From b14cf0cf53f4ae4a16566388c9320e206200b107 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8F=AA=E6=8D=B1=E5=AE=85?= Date: Thu, 28 Nov 2019 08:40:43 +0800 Subject: [PATCH] refactor: remove antd-icon (#139) * refactor: remove antd-icon * chore: remove dep of antd-icon * chore: remove icon plus --- package.json | 1 - .../__snapshots__/Canvas.test.tsx.snap | 357 +----------------- src/tools/TagGroup.tsx | 3 +- src/tools/Toolbar.tsx | 10 +- src/tools/__tests__/Toolbar.test.tsx | 5 +- .../__snapshots__/Toolbar.test.tsx.snap | 304 +-------------- src/tools/css/TagGroup.css | 8 + src/tools/css/Toolbar.css | 36 ++ src/tools/svg/border.svg | 4 + src/tools/svg/branches.svg | 4 + src/tools/svg/minus.svg | 4 + src/tools/svg/plus.svg | 1 + src/tools/svg/tag.svg | 4 + 13 files changed, 93 insertions(+), 648 deletions(-) create mode 100644 src/tools/svg/border.svg create mode 100644 src/tools/svg/branches.svg create mode 100644 src/tools/svg/minus.svg create mode 100644 src/tools/svg/plus.svg create mode 100644 src/tools/svg/tag.svg diff --git a/package.json b/package.json index 2ef17f2c..f9160601 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,6 @@ ] }, "dependencies": { - "@ant-design/icons": "^4.0.0-alpha.8", "antd": "^4.0.0-alpha.2", "core-js": "^3.4.1", "react-draggable": "^4.1.0" diff --git a/src/canvas/__tests__/__snapshots__/Canvas.test.tsx.snap b/src/canvas/__tests__/__snapshots__/Canvas.test.tsx.snap index d2913f07..56372d18 100644 --- a/src/canvas/__tests__/__snapshots__/Canvas.test.tsx.snap +++ b/src/canvas/__tests__/__snapshots__/Canvas.test.tsx.snap @@ -1461,122 +1461,9 @@ exports[`Canvas Canvas renders correctly 1`] = ` onContextMenu={[Function]} onWheel={[Function]} > - - - - - - - - - + + + + test4 @@ -1803,122 +1690,9 @@ exports[`Canvas Canvas renders correctly 1`] = ` onContextMenu={[Function]} onWheel={[Function]} > - - - - - - - - - + + + + test5 @@ -3016,122 +2790,9 @@ exports[`Canvas Canvas renders correctly 2`] = ` onContextMenu={[Function]} onWheel={[Function]} > - - - - - - - - - + + + + test5 diff --git a/src/tools/TagGroup.tsx b/src/tools/TagGroup.tsx index f3dc1ffb..718c3fbf 100644 --- a/src/tools/TagGroup.tsx +++ b/src/tools/TagGroup.tsx @@ -7,7 +7,6 @@ import { stopPropagation, preventDefault } from '../utils/LineUtil'; import { ContextMenuProps, CoordinatesProps, CommonProps } from '../canvas/core'; import NinoZone, { getTargetDom } from '../canvas/nino-zone'; import { LineProps } from './LineGroup'; -import { Plus } from '@ant-design/icons'; export type TagDomItem = CommonProps & CoordinatesProps & { input: string }; export type TagGroupRenderItem = { @@ -100,7 +99,7 @@ const TagGroup = ({ data, onChange, onContextMenu, className: parentClassName, l > {/* this should not be wrapper with a block element such as a div, or lines will get crashed */} - {item.children && } + {item.children && +} {item.input} diff --git a/src/tools/Toolbar.tsx b/src/tools/Toolbar.tsx index 0887e2d3..41acc376 100644 --- a/src/tools/Toolbar.tsx +++ b/src/tools/Toolbar.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import { Minus, Border, Tag, Branches } from '@ant-design/icons'; import './css/Toolbar.css'; export type DraggableItemProp = 'block' | 'tag'; @@ -8,7 +7,10 @@ const draggableItem: { type: DraggableItemProp; item: React.ReactElement; key: string; -}[] = [{ type: 'block', item: , key: 'toolbar-block' }, { type: 'tag', item: , key: 'toolbar-tag' }]; +}[] = [ + { type: 'block', item:
, key: 'toolbar-block' }, + { type: 'tag', item:
, key: 'toolbar-tag' }, +]; const onDragStart = (e: React.DragEvent, item: { type: DraggableItemProp }) => { e.dataTransfer.effectAllowed = 'copy'; @@ -19,10 +21,10 @@ const Toolbar = () => (
  • - +
  • - +
    • {draggableItem.map(({ type, item, key }) => (
  • onDragStart(e, { type })} key={key}> diff --git a/src/tools/__tests__/Toolbar.test.tsx b/src/tools/__tests__/Toolbar.test.tsx index 7e149394..d728dd26 100644 --- a/src/tools/__tests__/Toolbar.test.tsx +++ b/src/tools/__tests__/Toolbar.test.tsx @@ -6,7 +6,10 @@ describe('Toolbar', () => { it('toolbar render correctly', () => { const wrapper = mount(); expect(wrapper).toMatchSnapshot(); - expect(wrapper.find('.anticon').length).toBe(4); + expect(wrapper.find('.icon-minus')).toBeTruthy(); + expect(wrapper.find('.icon-branches')).toBeTruthy(); + expect(wrapper.find('.icon-border')).toBeTruthy(); + expect(wrapper.find('.icon-tag')).toBeTruthy(); }); it('onDragStart', () => { diff --git a/src/tools/__tests__/__snapshots__/Toolbar.test.tsx.snap b/src/tools/__tests__/__snapshots__/Toolbar.test.tsx.snap index 3ebeee81..80fef3b0 100644 --- a/src/tools/__tests__/__snapshots__/Toolbar.test.tsx.snap +++ b/src/tools/__tests__/__snapshots__/Toolbar.test.tsx.snap @@ -7,312 +7,32 @@ exports[`Toolbar toolbar render correctly 1`] = ` >
    • - - - - - - - - - +
    • - - - - - - - - - +
    • - - - - - - - - - +
    • - - - - - - - - - +
diff --git a/src/tools/css/TagGroup.css b/src/tools/css/TagGroup.css index 66d3be94..925bc056 100644 --- a/src/tools/css/TagGroup.css +++ b/src/tools/css/TagGroup.css @@ -17,3 +17,11 @@ opacity: 1; } } + +.tag-group .icon-plus { + -webkit-mask-image: url(../svg/plus.svg); + mask-image: url(../svg/plus.svg); + width: 20px; + height: 20px; + display: inline-block; +} diff --git a/src/tools/css/Toolbar.css b/src/tools/css/Toolbar.css index 70fbe224..44b7cc42 100644 --- a/src/tools/css/Toolbar.css +++ b/src/tools/css/Toolbar.css @@ -10,3 +10,39 @@ cursor: pointer; margin-bottom: 10px; } + +.Toolbar .icon-minus { + -webkit-mask-image: url(../svg/minus.svg); + mask-image: url(../svg/minus.svg); + width: 20px; + height: 20px; + display: inline-block; + background: gray; +} + +.Toolbar .icon-border { + -webkit-mask-image: url(../svg/border.svg); + mask-image: url(../svg/border.svg); + width: 20px; + height: 20px; + display: inline-block; + background: gray; +} + +.Toolbar .icon-tag { + -webkit-mask-image: url(../svg/tag.svg); + mask-image: url(../svg/tag.svg); + width: 20px; + height: 20px; + display: inline-block; + background: gray; +} + +.Toolbar .icon-branches { + -webkit-mask-image: url(../svg/branches.svg); + mask-image: url(../svg/branches.svg); + width: 20px; + height: 20px; + display: inline-block; + background: gray; +} diff --git a/src/tools/svg/border.svg b/src/tools/svg/border.svg new file mode 100644 index 00000000..b49ebc87 --- /dev/null +++ b/src/tools/svg/border.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/tools/svg/branches.svg b/src/tools/svg/branches.svg new file mode 100644 index 00000000..0a8a3955 --- /dev/null +++ b/src/tools/svg/branches.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/tools/svg/minus.svg b/src/tools/svg/minus.svg new file mode 100644 index 00000000..7d6ba5a9 --- /dev/null +++ b/src/tools/svg/minus.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/tools/svg/plus.svg b/src/tools/svg/plus.svg new file mode 100644 index 00000000..a0c34c72 --- /dev/null +++ b/src/tools/svg/plus.svg @@ -0,0 +1 @@ + diff --git a/src/tools/svg/tag.svg b/src/tools/svg/tag.svg new file mode 100644 index 00000000..c73b30a4 --- /dev/null +++ b/src/tools/svg/tag.svg @@ -0,0 +1,4 @@ + + + +