Merge pull request #27 from niuware/development

Refactor 'EditorControls' component
niuware · Oct 5, 2019 · e7f71e7 · e7f71e7
2 parents 93abf87 + 3d48471
commit e7f71e7
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mui-rte",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Material-UI Rich Text Editor and Viewer",
   "keywords": [
     "material-ui",

diff --git a/src/MUIRichTextEditor.tsx b/src/MUIRichTextEditor.tsx
@@ -411,7 +411,6 @@ class MUIRichTextEditor extends React.Component<IMUIRichTextEditorProps, IMUIRic
             url = linkInstance.getData().url
             urlKey = linkKey
         }
-        console.log(document.getElementById("mui-rte-image-control-toolbar"))
         this.setState({
             urlValue: url,
             urlKey: urlKey,

diff --git a/src/components/EditorControls.tsx b/src/components/EditorControls.tsx
@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react'
+import React, { FunctionComponent, useState, useEffect } from 'react'
 import { EditorState } from 'draft-js'
 import FormatBoldIcon from '@material-ui/icons/FormatBold'
 import FormatItalicIcon from '@material-ui/icons/FormatItalic'
@@ -175,7 +175,6 @@ const STYLE_TYPES: TStyleType[] = [
 ]
 
 interface IBlockStyleControlsProps extends KeyString {
-    children?: React.ReactNode
     editorState: EditorState
     controls?: Array<TEditorControl>
     customControls?: TCustomControl[]
@@ -192,14 +191,18 @@ interface IBlockStyleControlsProps extends KeyString {
     className?: string
 }
 
-const EditorControls: FunctionComponent<IBlockStyleControlsProps> = (props: IBlockStyleControlsProps) => {
+const EditorControls: FunctionComponent<IBlockStyleControlsProps> = (props) => {
+    const [availableControls, setAvailableControls] = useState(props.controls ? [] : STYLE_TYPES)
     const selectionInfo = getSelectionInfo(props.editorState)
-    let filteredControls = STYLE_TYPES
-    if (props.controls) {
-        filteredControls = []
+
+    useEffect(() => {
+        if (!props.controls) {
+            return
+        }
+        const filteredControls: TStyleType[] = []
         const controls = props.controls.filter((control, index) => props.controls!.indexOf(control) >= index)
         controls.forEach(name => {
-            let style = STYLE_TYPES.find(style => style.name === name)
+            const style = STYLE_TYPES.find(style => style.name === name)
             if (style) {
                 filteredControls.push(style)
             }
@@ -218,10 +221,12 @@ const EditorControls: FunctionComponent<IBlockStyleControlsProps> = (props: IBlo
                 }
             }
         })
-    }
+        setAvailableControls(filteredControls)
+    }, [props.controls, props.customControls])
+
     return (
         <div className={props.className}>
-            {filteredControls.map(style => {
+            {availableControls.map(style => {
                 if (props.toolbarMode && 
                     (style.type !== "inline" && (style.name !== "link" && style.name !== "clear"))) {
                     return null

diff --git a/test/EditorControls.test.tsx b/test/EditorControls.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { shallow } from 'enzyme'
+import { shallow, mount } from 'enzyme'
 import { assert, expect } from 'chai'
 import { EditorState } from 'draft-js'
 import EditorControls, { TEditorControl } from '../src/components/EditorControls'
@@ -13,7 +13,7 @@ describe('<EditorControls />', () => {
     })
 
     it('should render all controls', () => {
-        const wrapper = shallow(
+        const wrapper = mount(
             <EditorControls
                 editorState={editorState}
                 onClear={() => {}}
@@ -42,7 +42,7 @@ describe('<EditorControls />', () => {
             "Code Block",
             "Underline"
         ]
-        const wrapper = shallow(
+        const wrapper = mount(
             <EditorControls
                 editorState={editorState}
                 controls={controls}
@@ -64,7 +64,7 @@ describe('<EditorControls />', () => {
     })
 
     it('should not render controls', () => {
-        const wrapper = shallow(
+        const wrapper = mount(
             <EditorControls
                 editorState={editorState}
                 controls={[]}