From 6614f30e283fc6aed073de640a96c5bd1b4c405e Mon Sep 17 00:00:00 2001 From: Michael Haglund Date: Fri, 31 May 2019 15:14:24 -0500 Subject: [PATCH] revert(Removed customStyling of toolbar group): Removed customStyes prop on toolbarGroup BREAKING CHANGE: customStyles attribute was removed from toolbarGroups --- package.json | 2 -- src/toolbar/index.js | 15 +++++---------- src/toolbarGroup/index.js | 10 ++-------- stories/index.stories.js | 24 ------------------------ test/Draftable.test.jsx | 10 +++++----- yarn.lock | 7 +------ 6 files changed, 13 insertions(+), 55 deletions(-) diff --git a/package.json b/package.json index b22777a..7b64822 100644 --- 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 index e8954ba..7cc53d4 100644 --- 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, + groups: Array, [string]: Array }; @@ -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 => ( )) diff --git a/src/toolbarGroup/index.js b/src/toolbarGroup/index.js index 840cba2..8d4bc55 100644 --- 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, 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 ( -
+
{ items.map((item) => { const active = item.type === 'style' && inlineStyles.has(item.style); diff --git a/stories/index.stories.js b/stories/index.stories.js index e07d8b7..469ecc8 100644 --- 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', () => ) - .add('with custom styles', () => { - const toolbarConfig = { - groups: [ - { - key: 'custom', - customStyles: { - marginLeft: 'auto', - }, - }, - ], - custom: [ - { - label: 'Custom', - Icon: BoldIcon, - type: 'custom', - action: () => alert('Success!'), - }, - ], - }; - return ( - - ); - }) .add('with initial state', () => { const initialState = DraftableState.createFromString('

Test bolded

', 'html'); return ( diff --git a/test/Draftable.test.jsx b/test/Draftable.test.jsx index c775d3a..1ec75ad 100644 --- a/test/Draftable.test.jsx +++ b/test/Draftable.test.jsx @@ -25,7 +25,7 @@ describe('Draftable', () => { test('Renders with provided config', () => { const { queryAllByTestId } = render( @@ -37,7 +37,7 @@ describe('Draftable', () => { const action = sinon.spy(); const { getByTestId } = render( { test('Calls style actions', () => { const { getByTestId } = render( ); @@ -68,7 +68,7 @@ describe('Draftable', () => { test('Calls indent actions', () => { const { getByTestId } = render( ); @@ -79,7 +79,7 @@ describe('Draftable', () => { test('Calls list actions', () => { const { getByTestId } = render( ); diff --git a/yarn.lock b/yarn.lock index 35fed6c..bf310f1 100644 --- 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"