All: Add support for application plugins (#3257)

ReactNativeClient/lib/services/commands/ToolbarButtonUtils.ts

@@ -0,0 +1,83 @@
+import CommandService from '../CommandService';
+import propsHaveChanged from './propsHaveChanged';
+import { stateUtils } from 'lib/reducer';
+
+const separatorItem = { type: 'separator' };
+
+export interface ToolbarButtonInfo {
+	name: string,
+	tooltip: string,
+	iconName: string,
+	enabled: boolean,
+	onClick():void,
+	title: string,
+}
+
+interface ToolbarButtonCacheItem {
+	props: any,
+	info: ToolbarButtonInfo,
+}
+
+interface ToolbarButtonCache {
+	[key:string]: ToolbarButtonCacheItem,
+}
+
+export default class ToolbarButtonUtils {
+
+	private service_:CommandService;
+	private toolbarButtonCache_:ToolbarButtonCache = {};
+
+	constructor(service:CommandService) {
+		this.service_ = service;
+	}
+
+	private get service():CommandService {
+		return this.service_;
+	}
+
+	private commandToToolbarButton(commandName:string, props:any):ToolbarButtonInfo {
+		if (this.toolbarButtonCache_[commandName] && !propsHaveChanged(this.toolbarButtonCache_[commandName].props, props)) {
+			return this.toolbarButtonCache_[commandName].info;
+		}
+
+		const command = this.service.commandByName(commandName, { runtimeMustBeRegistered: true });
+
+		const output = {
+			name: commandName,
+			tooltip: this.service.label(commandName),
+			iconName: command.declaration.iconName,
+			enabled: this.service.isEnabled(commandName, props),
+			onClick: async () => {
+				this.service.execute(commandName, props);
+			},
+			title: this.service.title(commandName, props),
+		};
+
+		this.toolbarButtonCache_[commandName] = {
+			props: props,
+			info: output,
+		};
+
+		return this.toolbarButtonCache_[commandName].info;
+	}
+
+	// This method ensures that if the provided commandNames and state hasn't changed
+	// the output also won't change. Invididual toolbarButtonInfo also won't changed
+	// if the state they use hasn't changed. This is to avoid useless renders of the toolbars.
+	public commandsToToolbarButtons(state:any, commandNames:string[]):ToolbarButtonInfo[] {
+		const output:ToolbarButtonInfo[] = [];
+
+		for (const commandName of commandNames) {
+			if (commandName === '-') {
+				output.push(separatorItem as any);
+				continue;
+			}
+
+			const props = this.service.commandMapStateToProps(commandName, state);
+			output.push(this.commandToToolbarButton(commandName, props));
+		}
+
+		return stateUtils.selectArrayShallow({ array: output }, commandNames.join('_'));
+	}
+
+}