refactor(static-toolbar): refactor static-toolbar via render prop

Author: freedomlang

draft-js-static-toolbar-plugin/CHANGELOG.md

@@ -3,6 +3,9 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+### 3.0.0
+- Swap structure prop in static toolbar for render prop
+
 ## 2.0.2 - 2.0.3
 - bumped find-with-regex
 

draft-js-static-toolbar-plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draft-js-static-toolbar-plugin",
-  "version": "2.0.3",
+  "version": "3.0.0",
   "description": "Static Toolbar Plugin for DraftJS",
   "author": {
     "name": "Julian Krispel",

draft-js-static-toolbar-plugin/src/components/Toolbar/index.js

@@ -1,7 +1,14 @@
 /* eslint-disable react/no-array-index-key */
 import React from 'react';
+import {
+  ItalicButton,
+  BoldButton,
+  UnderlineButton,
+  CodeButton,
+} from 'draft-js-buttons';
+import PropTypes from 'prop-types';
 
-export default class Toolbar extends React.Component {
+class Toolbar extends React.Component {
 
   state = {
     /**
@@ -28,8 +35,17 @@ export default class Toolbar extends React.Component {
    */
   onOverrideContent = (overrideContent) => this.setState({ overrideContent });
 
+  renderDefaultButtons = (externalProps) => (
+    <div>
+      <ItalicButton {...externalProps} />
+      <BoldButton {...externalProps} />
+      <UnderlineButton {...externalProps} />
+      <CodeButton {...externalProps} />
+    </div>
+  );
+
   render() {
-    const { theme, store, structure } = this.props;
+    const { theme, store } = this.props;
     const { overrideContent: OverrideContent } = this.state;
     const childrenProps = {
       theme: theme.buttonStyles,
@@ -44,9 +60,14 @@ export default class Toolbar extends React.Component {
       >
         {OverrideContent
           ? <OverrideContent {...childrenProps} />
-          : structure.map((Component, index) =>
-            <Component key={index} {...childrenProps} />)}
+          : (this.props.children || this.renderDefaultButtons)(childrenProps)}
       </div>
     );
   }
 }
+
+Toolbar.propTypes = {
+  children: PropTypes.func
+};
+
+export default Toolbar;

draft-js-static-toolbar-plugin/src/index.js

@@ -1,10 +1,4 @@
 import decorateComponentWithProps from 'decorate-component-with-props';
-import {
-  ItalicButton,
-  BoldButton,
-  UnderlineButton,
-  CodeButton,
-} from 'draft-js-buttons';
 import createStore from './utils/createStore';
 import Toolbar from './components/Toolbar';
 import Separator from './components/Separator';
@@ -18,17 +12,10 @@ export default (config = {}) => {
 
   const {
     theme = defaultTheme,
-    structure = [
-      BoldButton,
-      ItalicButton,
-      UnderlineButton,
-      CodeButton,
-    ]
   } = config;
 
   const toolbarProps = {
     store,
-    structure,
     theme,
   };