add media library support for editor plugin controls

decaporg · Sep 19, 2017 · 289c296 · 289c296
1 parent a9dd4b1
commit 289c296
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 2 deletions.
diff --git a/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarPluginForm.js b/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarPluginForm.js
@@ -1,18 +1,23 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import ImmutablePropTypes from "react-immutable-proptypes";
+import { connect } from 'react-redux';
 import { Map } from 'immutable';
 import { Button } from 'react-toolbox/lib/button';
+import { openMediaLibrary } from '../../../../../actions/mediaLibrary';
 import ToolbarPluginFormControl from './ToolbarPluginFormControl';
 import styles from './ToolbarPluginForm.css';
 
-export default class ToolbarPluginForm extends React.Component {
+class ToolbarPluginForm extends React.Component {
   static propTypes = {
     plugin: PropTypes.object.isRequired,
     onSubmit: PropTypes.func.isRequired,
     onCancel: PropTypes.func.isRequired,
     onAddAsset: PropTypes.func.isRequired,
     onRemoveAsset: PropTypes.func.isRequired,
     getAsset: PropTypes.func.isRequired,
+    mediaPaths: ImmutablePropTypes.map.isRequired,
+    onOpenMediaLibrary: PropTypes.func.isRequired,
   };
 
   constructor(props) {
@@ -38,6 +43,8 @@ export default class ToolbarPluginForm extends React.Component {
       onRemoveAsset,
       getAsset,
       onChange,
+      onOpenMediaLibrary,
+      mediaPaths,
     } = this.props;
 
     return (
@@ -55,6 +62,8 @@ export default class ToolbarPluginForm extends React.Component {
               onChange={(val) => {
                 this.setState({ data: this.state.data.set(field.get('name'), val) });
               }}
+              mediaPaths={mediaPaths}
+              onOpenMediaLibrary={onOpenMediaLibrary}
             />
           ))}
         </div>
@@ -67,3 +76,13 @@ export default class ToolbarPluginForm extends React.Component {
     );
   }
 }
+
+const mapStateToProps = state => ({
+  mediaPaths: state.mediaLibrary.get('controlMedia'),
+});
+
+const mapDispatchToProps = {
+  onOpenMediaLibrary: openMediaLibrary,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(ToolbarPluginForm);
diff --git a/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarPluginFormControl.js b/src/components/Widgets/Markdown/MarkdownControl/Toolbar/ToolbarPluginFormControl.js
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import ImmutablePropTypes from "react-immutable-proptypes";
 import { resolveWidget } from '../../../../Widgets';
 import styles from './ToolbarPluginFormControl.css';
 
@@ -11,11 +12,13 @@ const ToolbarPluginFormControl = ({
   onRemoveAsset,
   getAsset,
   onChange,
+  mediaPaths,
+  onOpenMediaLibrary,
 }) => {
   const widget = resolveWidget(field.get('widget') || 'string');
   const key = `field-${ field.get('name') }`;
   const Control = widget.control;
-  const controlProps = { field, value, onAddAsset, onRemoveAsset, getAsset, onChange };
+  const controlProps = { field, value, onAddAsset, onRemoveAsset, getAsset, onChange, mediaPaths, onOpenMediaLibrary };
 
   return (
     <div className={styles.control} key={key}>
@@ -35,6 +38,8 @@ ToolbarPluginFormControl.propTypes = {
   onRemoveAsset: PropTypes.func.isRequired,
   getAsset: PropTypes.func.isRequired,
   onChange: PropTypes.func.isRequired,
+  mediaPaths: ImmutablePropTypes.map.isRequired,
+  onOpenMediaLibrary: PropTypes.func.isRequired,
 };
 
 export default ToolbarPluginFormControl;