split out ToolbarPluginForm

This commit is contained in:
Shawn Erquhart
2017-04-18 11:09:14 -04:00
parent dd29658abb
commit b8dce2fb4b
4 changed files with 80 additions and 48 deletions

View File

@ -235,7 +235,7 @@ export default class RawEditor extends React.Component {
this.updateHeight(); this.updateHeight();
}; };
handlePlugin = (plugin, data) => { handlePluginSubmit = (plugin, data) => {
const toBlock = plugin.get('toBlock'); const toBlock = plugin.get('toBlock');
this.replaceSelection(toBlock.call(toBlock, data.toJS())); this.replaceSelection(toBlock.call(toBlock, data.toJS()));
}; };
@ -334,7 +334,7 @@ export default class RawEditor extends React.Component {
<ToolbarPlugins <ToolbarPlugins
selectionPosition={selectionPosition} selectionPosition={selectionPosition}
plugins={plugins} plugins={plugins}
onPlugin={this.handlePlugin} onSubmit={this.handlePluginSubmit}
onAddAsset={onAddAsset} onAddAsset={onAddAsset}
onRemoveAsset={onRemoveAsset} onRemoveAsset={onRemoveAsset}
getAsset={getAsset} getAsset={getAsset}

View File

@ -0,0 +1,59 @@
import React, { PropTypes } from 'react';
import { Map } from 'immutable';
import { Button } from 'react-toolbox/lib/button';
import ToolbarPluginFormControl from './ToolbarPluginFormControl';
import styles from './ToolbarPlugins.css';
export default class ToolbarPluginForm extends React.Component {
constructor(props) {
super(props);
this.state = {
data: Map(),
};
}
handleSubmit = (event) => {
const { plugin, onSubmit } = this.props;
onSubmit(plugin, this.state.data);
event.preventDefault();
}
render() {
const {
plugin,
onSubmit,
onCancel,
value,
onAddAsset,
onRemoveAsset,
getAsset,
onChange,
} = this.props;
return (
<form className={styles.pluginForm} onSubmit={this.handleSubmit}>
<h3 className={styles.header}>Insert {plugin.get('label')}</h3>
<div className={styles.body}>
{plugin.get('fields').map((field, index) => (
<ToolbarPluginFormControl
key={index}
field={field}
value={this.state.data.get(field.get('name'))}
onAddAsset={onAddAsset}
onRemoveAsset={onRemoveAsset}
getAsset={getAsset}
onChange={(val) => {
this.setState({ data: this.state.data.set(field.get('name'), val) });
}}
/>
))}
</div>
<div className={styles.footer}>
<Button raised onClick={this.handleSubmit}>Insert</Button>
{' '}
<Button onClick={onCancel}>Cancel</Button>
</div>
</form>
);
}
}

View File

@ -3,6 +3,7 @@ import { fromJS } from 'immutable';
import { Button } from 'react-toolbox/lib/button'; import { Button } from 'react-toolbox/lib/button';
import { Icon } from '../../UI'; import { Icon } from '../../UI';
import ToolbarButton from './ToolbarButton'; import ToolbarButton from './ToolbarButton';
import ToolbarPluginForm from './ToolbarPluginForm';
import ToolbarPluginFormControl from './ToolbarPluginFormControl'; import ToolbarPluginFormControl from './ToolbarPluginFormControl';
import toolbarStyles from './Toolbar.css'; import toolbarStyles from './Toolbar.css';
import styles from './ToolbarPlugins.css'; import styles from './ToolbarPlugins.css';
@ -10,7 +11,7 @@ import styles from './ToolbarPlugins.css';
export default class ToolbarPlugins extends Component { export default class ToolbarPlugins extends Component {
static propTypes = { static propTypes = {
plugins: PropTypes.object.isRequired, plugins: PropTypes.object.isRequired,
onPlugin: PropTypes.func.isRequired, onSubmit: PropTypes.func.isRequired,
onAddAsset: PropTypes.func.isRequired, onAddAsset: PropTypes.func.isRequired,
onRemoveAsset: PropTypes.func.isRequired, onRemoveAsset: PropTypes.func.isRequired,
getAsset: PropTypes.func.isRequired, getAsset: PropTypes.func.isRequired,
@ -20,65 +21,28 @@ export default class ToolbarPlugins extends Component {
super(props); super(props);
this.state = { this.state = {
openPlugin: null, openPlugin: null,
pluginData: fromJS({}),
}; };
} }
handlePlugin(plugin) { handlePlugin(plugin) {
return (e) => { return (e) => {
e.preventDefault(); e.preventDefault();
this.setState({ openPlugin: plugin, pluginData: fromJS({}) }); this.setState({ openPlugin: plugin });
}; };
} }
handleSubmit = (e) => { handleSubmit = (plugin, pluginData) => {
e.preventDefault(); this.props.onSubmit(plugin, pluginData);
const { openPlugin, pluginData } = this.state;
this.props.onPlugin(openPlugin, pluginData);
this.setState({ openPlugin: null }); this.setState({ openPlugin: null });
}; };
handleCancel = (e) => { handleCancel = (e) => {
e.preventDefault();
this.setState({ openPlugin: null }); this.setState({ openPlugin: null });
}; };
pluginForm(plugin) {
return (<form className={styles.pluginForm} onSubmit={this.handleSubmit}>
<h3 className={styles.header}>Insert {plugin.get('label')}</h3>
<div className={styles.body}>
{plugin.get('fields').map((field, index) => (
<ToolbarPluginFormControl
key={index}
field={field}
value={this.state.pluginData.get(field.get('name'))}
onAddAsset={this.props.onAddAsset}
onRemoveAsset={this.props.onRemoveAsset}
getAsset={this.props.getAsset}
onChange={(val) => {
this.setState({ pluginData: this.state.pluginData.set(field.get('name'), val) });
}}
/>
))}
</div>
<div className={styles.footer}>
<Button
raised
onClick={this.handleSubmit}
>
Insert
</Button>
{' '}
<Button onClick={this.handleCancel}>
Cancel
</Button>
</div>
</form>);
}
render() { render() {
const { plugins } = this.props; const { plugins, onAddAsset, onRemoveAsset, getAsset } = this.props;
const { openPlugin } = this.state; const { openPlugin, pluginData } = this.state;
const classNames = [styles.root]; const classNames = [styles.root];
if (openPlugin) { if (openPlugin) {
@ -94,7 +58,16 @@ export default class ToolbarPlugins extends Component {
action={this.handlePlugin(plugin)} action={this.handlePlugin(plugin)}
/> />
))} ))}
{openPlugin && this.pluginForm(openPlugin)} {openPlugin &&
<ToolbarPluginForm
plugin={openPlugin}
onSubmit={this.handleSubmit}
onCancel={this.handleCancel}
onAddAsset={onAddAsset}
onRemoveAsset={onRemoveAsset}
getAsset={getAsset}
/>
}
</div>); </div>);
} }
} }

View File

@ -203,7 +203,7 @@ export default class Editor extends Component {
command(this.view.state, this.handleAction); command(this.view.state, this.handleAction);
}; };
handlePlugin = (plugin, data) => { handlePluginSubmit = (plugin, data) => {
const { schema } = this.state; const { schema } = this.state;
const nodeType = schema.nodes[`plugin_${ plugin.get('id') }`]; const nodeType = schema.nodes[`plugin_${ plugin.get('id') }`];
this.view.props.onAction(this.view.state.tr.replaceSelectionWith(nodeType.create(data.toJS())).action()); this.view.props.onAction(this.view.state.tr.replaceSelectionWith(nodeType.create(data.toJS())).action());
@ -289,7 +289,7 @@ export default class Editor extends Component {
<ToolbarPlugins <ToolbarPlugins
selectionPosition={selectionPosition} selectionPosition={selectionPosition}
plugins={plugins} plugins={plugins}
onPlugin={this.handlePlugin} onSubmit={this.handlePluginSubmit}
onAddAsset={onAddAsset} onAddAsset={onAddAsset}
onRemoveAsset={onRemoveAsset} onRemoveAsset={onRemoveAsset}
getAsset={getAsset} getAsset={getAsset}