optimize structure for undo-example

Author: freedomlang

examples/undo-example/src/RedoButton.js renamed to examples/undo-example/src/Undo/components/Redo.js

@@ -8,7 +8,7 @@ type Props = {
   setEditorState: EditorState => void,
 }
 
-class RedoButton extends Component<Props> {
+class Redo extends Component<Props> {
   onClick = event => {
     event.stopPropagation()
     this.props.setEditorState(EditorState.redo(this.props.editorState))
@@ -29,4 +29,4 @@ class RedoButton extends Component<Props> {
   }
 }
 
-export default RedoButton
+export default Redo

examples/undo-example/src/UndoButton.js renamed to examples/undo-example/src/Undo/components/Undo.js

@@ -8,7 +8,7 @@ type Props = {
   setEditorState: EditorState => void,
 }
 
-class UndoButton extends Component<Props> {
+class Undo extends Component<Props> {
   onClick = event => {
     event.stopPropagation()
     this.props.setEditorState(EditorState.undo(this.props.editorState))
@@ -29,4 +29,4 @@ class UndoButton extends Component<Props> {
   }
 }
 
-export default UndoButton
+export default Undo

examples/undo-example/src/Undo/index.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Plugin } from '@djsp/core'
+import Redo from './components/Redo'
+import Undo from './components/Undo'
+
+const RedoButton = () => (
+  <Plugin>
+    {({ editorState, setEditorState }) => (
+      <Redo editorState={editorState} setEditorState={setEditorState} />
+    )}
+  </Plugin>
+)
+
+const UndoButton = () => (
+  <Plugin>
+    {({ editorState, setEditorState }) => (
+      <Undo editorState={editorState} setEditorState={setEditorState} />
+    )}
+  </Plugin>
+)
+
+export { RedoButton, UndoButton }

examples/undo-example/src/index.js

@@ -1,10 +1,9 @@
-import React, { Component, Fragment } from 'react'
+import React, { Component } from 'react'
 import ReactDOM from 'react-dom'
 
 import { EditorState, ContentState } from 'draft-js'
-import { EditorContainer, Editor, Plugin } from '@djsp/core'
-import UndoButton from './UndoButton.js'
-import RedoButton from './RedoButton.js'
+import { EditorContainer, Editor } from '@djsp/core'
+import { RedoButton, UndoButton } from './Undo'
 import './styles.css'
 
 class App extends Component {
@@ -24,20 +23,8 @@ class App extends Component {
         <EditorContainer
           editorState={this.state.editorState}
           onChange={this.onChange}>
-          <Plugin>
-            {({ editorState, setEditorState }) => (
-              <Fragment>
-                <UndoButton
-                  editorState={editorState}
-                  setEditorState={setEditorState}
-                />
-                <RedoButton
-                  editorState={editorState}
-                  setEditorState={setEditorState}
-                />
-              </Fragment>
-            )}
-          </Plugin>
+          <RedoButton />
+          <UndoButton />
           <Editor />
         </EditorContainer>
       </div>