Blocks: Try allowing custom buttons in the freeform block

blocks/library/freeform/buttons.js

@@ -0,0 +1,83 @@
+/**
+ * External dependencies
+ */
+import { isFunction, compact } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from 'element';
+
+/**
+ * Internal dependencies
+ */
+import SimpleButton from './buttons/simple';
+import ListBoxButton from './buttons/listbox';
+import MenuButton from './buttons/menu';
+import SplitButton from './buttons/split';
+
+class Buttons extends Component {
+	constructor() {
+		super( ...arguments );
+		this.state = {
+			buttons: [],
+		};
+	}
+
+	componentDidMount() {
+		if ( this.props.editor ) {
+			this.updateButtons();
+		}
+	}
+
+	componentDidUpdate( prevProps ) {
+		if (
+			prevProps.editor !== this.props.editor ||
+			prevProps.exclude !== this.props.exclude ||
+			prevProps.buttons !== this.props.buttons
+		) {
+			this.updateButtons();
+		}
+	}
+
+	updateButtons() {
+		const { editor, buttons = [], exclude = [] } = this.props;
+		const editorButtons = buttons
+			.filter( ( id ) => exclude.indexOf( id ) === -1 && !! editor.buttons[ id ] )
+			.map( ( id ) => {
+				let button = editor.buttons[ id ];
+
+				// Editor Buttons can be declared as functions
+				if ( isFunction( button ) ) {
+					button = button();
+				}
+
+				return { id, button };
+			} );
+		this.setState( { buttons: compact( editorButtons ) } );
+	}
+
+	render() {
+		const { editor } = this.props;
+		const { buttons } = this.state;
+
+		if ( ! buttons.length ) {
+			return null;
+		}
+
+		return (
+			<ul className="components-toolbar">
+				{ buttons.map( ( { id, button } ) => (
+					<li key={ id }>
+						{ ! button.type && <SimpleButton id={ id } button={ button } editor={ editor } /> }
+						{ button.type === 'listbox' && <ListBoxButton id={ id } button={ button } editor={ editor } /> }
+						{ button.type === 'menubutton' && <MenuButton id={ id } button={ button } editor={ editor } /> }
+						{ button.type === 'splitbutton' && <SplitButton id={ id } button={ button } editor={ editor } /> }
+					</li>
+				) ) }
+			</ul>
+		);
+	}
+}
+
+export default Buttons;

blocks/library/freeform/buttons/listbox.js

@@ -0,0 +1,115 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { find, isObject } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from 'element';
+import { Button, TinymceIcon, Popover } from 'components';
+
+class ListBoxButton extends Component {
+	constructor() {
+		super( ...arguments );
+		this.state = {
+			isActive: false,
+			isDisabled: false,
+			value: '',
+			opened: false,
+		};
+		this.mounted = true;
+		this.toggleList = this.toggleList.bind( this );
+		this.onSelect = this.onSelect.bind( this );
+	}
+
+	componentDidMount() {
+		const { button } = this.props;
+		const fnNames = [ 'onPostRender', 'onpostrender', 'OnPostRender' ];
+		const onPostRender = find( fnNames, ( fn ) => button.hasOwnProperty( fn ) );
+		if ( onPostRender ) {
+			button[ onPostRender ].call( {
+				active: ( isActive ) => this.mounted && this.setState( { isActive } ),
+				disabled: ( isDisabled ) => this.mounted && this.setState( { isDisabled } ),
+				value: ( value ) => this.mounted && this.setState( { value } ),
+				text: () => {},
+			} );
+		}
+	}
+
+	componentWillUnmount() {
+		this.mounted = false;
+	}
+
+	onSelect( value ) {
+		return ( event ) => {
+			event.stopPropagation();
+			this.setState( { value, opened: false } );
+			const control = {
+				value: () => value,
+				settings: {
+					value,
+				},
+			};
+			if ( this.props.button.onselect ) {
+				this.props.button.onselect.call( control, { control } );
+			} else if ( this.props.button.onclick ) {
+				this.props.button.onclick.call( control, { control } );
+			}
+		};
+	}
+
+	toggleList( event ) {
+		event.stopPropagation();
+		this.setState( ( state ) => ( {
+			opened: ! state.opened,
+		} ) );
+	}
+
+	render() {
+		const { button } = this.props;
+		const { isActive, isDisabled, value, opened } = this.state;
+		const selectedChoice = find( button.values, ( choice ) => choice.value === value );
+		let text = value;
+		if ( selectedChoice && isObject( selectedChoice.text ) ) {
+			text = selectedChoice.text.raw;
+		} else if ( selectedChoice ) {
+			text = selectedChoice.text;
+		}
+
+		if ( ! value && ! selectedChoice ) {
+			return null;
+		}
+
+		return [
+			<Button
+				key="button"
+				label={ button.text }
+				onClick={ this.toggleList }
+				className={ classnames( 'components-toolbar__control', {
+					'is-active': isActive,
+				} ) }
+				aria-pressed={ isActive }
+				disabled={ isDisabled }
+			>
+				{ button.icon && <TinymceIcon icon={ button.icon } /> }
+				{ text }
+			</Button>,
+			opened && (
+				<Popover position="bottom center" key="menu">
+					{ button.values.map( ( choice, index ) => {
+						const buttonText = isObject( choice.text ) ? choice.text.raw : choice.text;
+						return (
+							<button className="blocks-buttons__listbox-choice" key={ index } onClick={ this.onSelect( choice.value, buttonText ) }>
+								{ buttonText }
+							</button>
+						);
+					} ) }
+				</Popover>
+			),
+		];
+	}
+}
+
+export default ListBoxButton;

blocks/library/freeform/buttons/menu-items.js

@@ -0,0 +1,81 @@
+/**
+ * External dependencies
+ */
+import { isObject, isArray, noop } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from 'element';
+import { Popover, TinymceIcon } from 'components';
+
+class MenuItems extends Component {
+	constructor() {
+		super( ...arguments );
+		this.state = {
+			opened: {},
+		};
+		this.onHoverMenuItem = this.onHoverMenuItem.bind( this );
+		this.onUnHoverMenuItem = this.onUnHoverMenuItem.bind( this );
+	}
+
+	onHoverMenuItem( index ) {
+		return () => this.setState(
+			( state ) => ( {
+				opened: {
+					...state.opened,
+					[ index ]: true,
+				},
+			} )
+		);
+	}
+
+	onUnHoverMenuItem( index ) {
+		return () => this.setState(
+			( state ) => ( {
+				opened: {
+					...state.opened,
+					[ index ]: false,
+				},
+			} )
+		);
+	}
+
+	render() {
+		const { button, items, onClose } = this.props;
+		const defaultOnclick = isArray( button.menu ) ? noop : button.menu.itemDefaults.onclick;
+
+		return items.map( ( choice, index ) => {
+			const buttonText = isObject( choice.text ) ? choice.text.raw : choice.text;
+			const onClick = () => {
+				if ( choice.onclick ) {
+					choice.onclick();
+				} else if ( ! choice.menu ) {
+					defaultOnclick();
+				}
+				onClose();
+			};
+
+			return (
+				<div
+					key={ index }
+					onMouseEnter={ this.onHoverMenuItem( index ) }
+					onMouseLeave={ this.onUnHoverMenuItem( index ) }
+					className="blocks-buttons__menu-items-item"
+				>
+					<button className="blocks-buttons__menu-items-item-toggle" onClick={ onClick }>
+						{ choice.icon && <TinymceIcon icon={ choice.icon } /> }
+						{ buttonText }
+					</button>
+					{ choice.menu && this.state.opened[ index ] && (
+						<Popover position="custom custom" className="blocks-buttons__menu-items-item-submenu">
+							<MenuItems button={ button } items={ choice.menu } onClose={ onClose } />
+						</Popover>
+					) }
+				</ div>
+			);
+		} );
+	}
+}
+
+export default MenuItems;

blocks/library/freeform/buttons/menu.js

@@ -0,0 +1,87 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { find, isArray } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from 'element';
+import { Button, TinymceIcon, Popover, Dashicon } from 'components';
+
+/**
+ * Internal dependencies
+ */
+import MenuItems from './menu-items';
+
+class MenuButton extends Component {
+	constructor() {
+		super( ...arguments );
+		this.state = {
+			isActive: false,
+			isDisabled: false,
+			opened: false,
+		};
+		this.mounted = true;
+		this.toggleMenu = this.toggleMenu.bind( this );
+		this.closeMenu = this.closeMenu.bind( this );
+	}
+
+	componentDidMount() {
+		const { button } = this.props;
+		const fnNames = [ 'onPostRender', 'onpostrender', 'OnPostRender' ];
+		const onPostRender = find( fnNames, ( fn ) => button.hasOwnProperty( fn ) );
+		if ( onPostRender ) {
+			button[ onPostRender ].call( {
+				active: ( isActive ) => this.mounted && this.setState( { isActive } ),
+				disabled: ( isDisabled ) => this.mounted && this.setState( { isDisabled } ),
+			} );
+		}
+	}
+
+	componentWillUnmount() {
+		this.mounted = false;
+	}
+
+	closeMenu() {
+		this.setState( { opened: false } );
+	}
+
+	toggleMenu( event ) {
+		event.stopPropagation();
+		this.setState( ( state ) => ( {
+			opened: ! state.opened,
+		} ) );
+	}
+
+	render() {
+		const { button } = this.props;
+		const { isActive, isDisabled, opened } = this.state;
+		const items = isArray( button.menu ) ? button.menu : button.menu.items;
+
+		return [
+			<Button
+				key="button"
+				label={ button.text }
+				onClick={ this.toggleMenu }
+				className={ classnames( 'components-toolbar__control', {
+					'is-active': isActive,
+				} ) }
+				aria-pressed={ isActive }
+				disabled={ isDisabled }
+			>
+				{ button.icon && <TinymceIcon icon={ button.icon } /> }
+				{ button.text }
+				<Dashicon icon="arrow-down" />
+			</Button>,
+			opened && (
+				<Popover position="bottom center" key="menu">
+					<MenuItems button={ button } items={ items } onClose={ this.closeMenu } />
+				</Popover>
+			),
+		];
+	}
+}
+
+export default MenuButton;