const React = require('react'); const { connect } = require('react-redux'); const { themeStyle } = require('lib/theme'); const ToolbarButton = require('./ToolbarButton/ToolbarButton.js').default; const ToolbarSpace = require('./ToolbarSpace.min.js'); const ToggleEditorsButton = require('./ToggleEditorsButton/ToggleEditorsButton.js').default; interface Props { themeId: number, style: any, items: any[], } class ToolbarBaseComponent extends React.Component { render() { const theme = themeStyle(this.props.themeId); const style:any = Object.assign({ display: 'flex', flexDirection: 'row', boxSizing: 'border-box', backgroundColor: theme.backgroundColor3, padding: theme.toolbarPadding, paddingRight: theme.mainPadding, }, this.props.style); const groupStyle:any = { display: 'flex', flexDirection: 'row', boxSizing: 'border-box', }; const leftItemComps:any[] = []; const centerItemComps:any[] = []; const rightItemComps:any[] = []; if (this.props.items) { for (let i = 0; i < this.props.items.length; i++) { const o = this.props.items[i]; let key = o.iconName ? o.iconName : ''; key += o.title ? o.title : ''; const itemType = !('type' in o) ? 'button' : o.type; if (!key) key = `${o.type}_${i}`; const props = Object.assign( { key: key, themeId: this.props.themeId, }, o ); if (o.name === 'toggleEditors') { rightItemComps.push(); } else if (itemType === 'button') { const target = ['historyForward', 'historyBackward', 'toggleExternalEditing'].includes(o.name) ? leftItemComps : centerItemComps; target.push(); } else if (itemType === 'separator') { centerItemComps.push(); } } } return (
{leftItemComps}
{centerItemComps}
{rightItemComps}
); } } const mapStateToProps = (state:any) => { return { themeId: state.settings.theme }; }; export default connect(mapStateToProps)(ToolbarBaseComponent);