split out ToolbarPluginForm
This commit is contained in:
@ -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}
|
||||||
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
@ -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>);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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}
|
||||||
|
Reference in New Issue
Block a user