revert(Removed customStyling of toolbar group): Removed customStyes p…

…rop on toolbarGroup BREAKING CHANGE: customStyles attribute was removed from toolbarGroups
lifechurch · May 31, 2019 · 6614f30 · 6614f30
1 parent b89f35a
commit 6614f30
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 55 deletions.
diff --git a/package.json b/package.json
@@ -64,7 +64,6 @@
     "babel-plugin-jsx-remove-data-test-id": "^2.0.0",
     "commitizen": "^3.1.1",
     "cross-env": "^5.2.0",
-    "css-loader": "^2.1.1",
     "cz-conventional-changelog": "2.1.0",
     "draft-js": "^0.11.0-beta2",
     "eslint": "^5.16.0",
@@ -74,7 +73,6 @@
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-react": "^7.13.0",
     "flow-bin": "^0.98.1",
-    "flow-inlinestyle": "^1.0.9",
     "jest": "^24.8.0",
     "jest-transform-stub": "^2.0.0",
     "react": "^16.8.6",

diff --git a/src/toolbar/index.js b/src/toolbar/index.js
@@ -1,12 +1,12 @@
 // @flow
 import React from 'react';
 import { EditorState } from 'draft-js';
-import ToolbarGroup, { type ToolbarGroupType } from '../toolbarGroup';
+import ToolbarGroup from '../toolbarGroup';
 import type { ToolbarButtonType } from '../toolbarButton';
 import { BLOCK_TYPES_LISTS, BLOCK_TYPES_INLINE, BLOCK_TYPES_INDENT } from '../lib/BlockTypes';
 
 export type ToolbarConfigType = {
-  groups: Array<ToolbarGroupType>,
+  groups: Array<string>,
   [string]: Array<ToolbarButtonType>
 };
 
@@ -17,11 +17,7 @@ type ToolbarProps = {
 };
 
 export const defaultToolbarConfig:ToolbarConfigType = {
-  groups: [
-    { key: 'inline' },
-    { key: 'lists' },
-    { key: 'indentation' },
-  ],
+  groups: ['inline', 'lists', 'indentation'],
   inline: BLOCK_TYPES_INLINE,
   lists: BLOCK_TYPES_LISTS,
   indentation: BLOCK_TYPES_INDENT,
@@ -34,10 +30,9 @@ export default ({ editorState, toolbarConfig, onChange }:ToolbarProps) => {
       {
         toolbarConfig.groups.map(group => (
           <ToolbarGroup
-            key={group.key}
-            items={toolbarConfig[group.key]}
+            key={group}
+            items={toolbarConfig[group]}
             onChange={handleToggle}
-            customStyles={group.customStyles}
             editorState={editorState}
           />
         ))

diff --git a/src/toolbarGroup/index.js b/src/toolbarGroup/index.js
@@ -3,26 +3,20 @@ import React from 'react';
 import { EditorState } from 'draft-js';
 import ToolbarButton, { type ToolbarButtonType } from '../toolbarButton';
 
-export type ToolbarGroupType = {
-  key: string,
-  customStyles?: InlineStyle
-};
-
 type ToolbarGroupProps = {
   items: Array<ToolbarButtonType>,
   onChange: (ToolbarButtonType) => void,
   editorState: EditorState,
-  customStyles: ?InlineStyle,
 };
 
 export default ({
-  items, onChange, editorState, customStyles,
+  items, onChange, editorState,
 }:ToolbarGroupProps) => {
   const handleToggle = item => onChange(item);
   const inlineStyles = editorState.getCurrentInlineStyle();
 
   return (
-    <div data-testid='toolbarGroup' className='ToolbarGroup-root' style={customStyles}>
+    <div data-testid='toolbarGroup' className='ToolbarGroup-root'>
       {
         items.map((item) => {
           const active = item.type === 'style' && inlineStyles.has(item.style);

diff --git a/stories/index.stories.js b/stories/index.stories.js
@@ -1,33 +1,9 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { Draftable, DraftableState } from '../src';
-import BoldIcon from '../src/icons/TextBold';
 
 storiesOf('Draftable', module)
   .add('with default config', () => <Draftable />)
-  .add('with custom styles', () => {
-    const toolbarConfig = {
-      groups: [
-        {
-          key: 'custom',
-          customStyles: {
-            marginLeft: 'auto',
-          },
-        },
-      ],
-      custom: [
-        {
-          label: 'Custom',
-          Icon: BoldIcon,
-          type: 'custom',
-          action: () => alert('Success!'),
-        },
-      ],
-    };
-    return (
-      <Draftable toolbarConfig={toolbarConfig} />
-    );
-  })
   .add('with initial state', () => {
     const initialState = DraftableState.createFromString('<p>Test <b>bolded</b></p>', 'html');
     return (

diff --git a/test/Draftable.test.jsx b/test/Draftable.test.jsx
@@ -25,7 +25,7 @@ describe('Draftable', () => {
   test('Renders with provided config', () => {
     const { queryAllByTestId } = render(
       <Draftable toolbarConfig={{
-        groups: [{ key: 'inline' }, { key: 'lists' }],
+        groups: ['inline', 'lists'],
         inline: BLOCK_TYPES_INLINE,
         lists: BLOCK_TYPES_LISTS,
       }} />
@@ -37,7 +37,7 @@ describe('Draftable', () => {
     const action = sinon.spy();
     const { getByTestId } = render(
       <Draftable toolbarConfig={{
-        groups: [{ key: 'custom' }],
+        groups: ['custom'],
         custom: [
           {
             label: 'Custom',
@@ -57,7 +57,7 @@ describe('Draftable', () => {
   test('Calls style actions', () => {
     const { getByTestId } = render(
       <Draftable toolbarConfig={{
-        groups: [{ key:'inline' }],
+        groups: ['inline'],
         inline: BLOCK_TYPES_INLINE,
       }} />
     );
@@ -68,7 +68,7 @@ describe('Draftable', () => {
   test('Calls indent actions', () => {
     const { getByTestId } = render(
       <Draftable toolbarConfig={{
-        groups: [{ key:'indent' }],
+        groups: ['indent'],
         indent: BLOCK_TYPES_INDENT,
       }} />
     );
@@ -79,7 +79,7 @@ describe('Draftable', () => {
   test('Calls list actions', () => {
     const { getByTestId } = render(
       <Draftable toolbarConfig={{
-        groups: [{ key:'lists' }],
+        groups: ['lists'],
         lists: BLOCK_TYPES_LISTS,
       }} />
     );

diff --git a/yarn.lock b/yarn.lock
@@ -4059,7 +4059,7 @@ crypto-random-string@^1.0.0:
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"
   integrity sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=
 
-css-loader@^2.1.0, css-loader@^2.1.1:
+css-loader@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-2.1.1.tgz#d8254f72e412bb2238bb44dd674ffbef497333ea"
   integrity sha512-OcKJU/lt232vl1P9EEDamhoO9iKY3tIjY5GU+XDLblAykTdgs6Ux9P1hTHve8nFKy5KPpOXOsVI/hIwi3841+w==
@@ -5479,11 +5479,6 @@ flow-bin@^0.98.1:
   resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.98.1.tgz#a8d781621c91703df69928acc83c9777e2fcbb49"
   integrity sha512-y1YzQgbFUX4EG6h2EO8PhyJeS0VxNgER8XsTwU8IXw4KozfneSmGVgw8y3TwAOza7rVhTlHEoli1xNuNW1rhPw==
 
-flow-inlinestyle@^1.0.9:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/flow-inlinestyle/-/flow-inlinestyle-1.0.9.tgz#d760c4dd0abb7b02efb8c0e800a072ad3ca10c31"
-  integrity sha512-G46vIUeYD2TZuheeZpf0GdK0Y7hebbcHOgf2Uew/nVi3cyRW2MRt/UijgFpcMT5V0qJDS0LFvBiU5dMOhUf65g==
-
 flush-write-stream@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8"