Skip to content

Commit

Permalink
refactor: remove antd-icon (#139)
Browse files Browse the repository at this point in the history
* refactor: remove antd-icon

* chore: remove dep of antd-icon

* chore: remove icon plus
  • Loading branch information
orzyyyy authored Nov 28, 2019
1 parent adca6aa commit b14cf0c
Show file tree
Hide file tree
Showing 13 changed files with 93 additions and 648 deletions.
1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
357 changes: 9 additions & 348 deletions src/canvas/__tests__/__snapshots__/Canvas.test.tsx.snap

Large diffs are not rendered by default.

3 changes: 1 addition & 2 deletions src/tools/TagGroup.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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 && <Plus style={item.childStyle} />}
{item.children && <span style={item.childStyle}>+</span>}
{item.input}
</NinoZone>
</div>
Expand Down
10 changes: 6 additions & 4 deletions src/tools/Toolbar.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -8,7 +7,10 @@ const draggableItem: {
type: DraggableItemProp;
item: React.ReactElement;
key: string;
}[] = [{ type: 'block', item: <Border />, key: 'toolbar-block' }, { type: 'tag', item: <Tag />, key: 'toolbar-tag' }];
}[] = [
{ type: 'block', item: <div className="icon-border" />, key: 'toolbar-block' },
{ type: 'tag', item: <div className="icon-tag" />, key: 'toolbar-tag' },
];

const onDragStart = (e: React.DragEvent<HTMLLIElement>, item: { type: DraggableItemProp }) => {
e.dataTransfer.effectAllowed = 'copy';
Expand All @@ -19,10 +21,10 @@ const Toolbar = () => (
<div className="Toolbar">
<ul>
<li>
<Minus />
<div className="icon-minus" />
</li>
<li>
<Branches />
<div className="icon-branches" />
</li>
{draggableItem.map(({ type, item, key }) => (
<li draggable onDragStart={e => onDragStart(e, { type })} key={key}>
Expand Down
5 changes: 4 additions & 1 deletion src/tools/__tests__/Toolbar.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,10 @@ describe('Toolbar', () => {
it('toolbar render correctly', () => {
const wrapper = mount(<Toolbar />);
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', () => {
Expand Down
304 changes: 12 additions & 292 deletions src/tools/__tests__/__snapshots__/Toolbar.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -7,312 +7,32 @@ exports[`Toolbar toolbar render correctly 1`] = `
>
<ul>
<li>
<Minus>
<AntdIcon
icon={
Object {
"icon": Object {
"attrs": Object {
"focusable": "false",
"viewBox": "64 64 896 896",
},
"children": Array [
Object {
"attrs": Object {
"d": "M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z",
},
"tag": "path",
},
],
"tag": "svg",
},
"name": "minus",
"theme": "outline",
}
}
>
<span
aria-label="minus"
className="anticon anticon-minus"
role="img"
>
<IconReact
className=""
icon={
Object {
"icon": Object {
"attrs": Object {
"focusable": "false",
"viewBox": "64 64 896 896",
},
"children": Array [
Object {
"attrs": Object {
"d": "M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z",
},
"tag": "path",
},
],
"tag": "svg",
},
"name": "minus",
"theme": "outline",
}
}
>
<svg
aria-hidden="true"
className=""
data-icon="minus"
fill="currentColor"
focusable="false"
height="1em"
key="svg-minus"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
key="svg-minus-svg-0"
/>
</svg>
</IconReact>
</span>
</AntdIcon>
</Minus>
<div
className="icon-minus"
/>
</li>
<li>
<Branches>
<AntdIcon
icon={
Object {
"icon": Object {
"attrs": Object {
"focusable": "false",
"viewBox": "64 64 896 896",
},
"children": Array [
Object {
"attrs": Object {
"d": "M740 161c-61.8 0-112 50.2-112 112 0 50.1 33.1 92.6 78.5 106.9v95.9L320 602.4V318.1c44.2-15 76-56.9 76-106.1 0-61.8-50.2-112-112-112s-112 50.2-112 112c0 49.2 31.8 91 76 106.1V706c-44.2 15-76 56.9-76 106.1 0 61.8 50.2 112 112 112s112-50.2 112-112c0-49.2-31.8-91-76-106.1v-27.8l423.5-138.7a50.52 50.52 0 0034.9-48.2V378.2c42.9-15.8 73.6-57 73.6-105.2 0-61.8-50.2-112-112-112zm-504 51a48.01 48.01 0 0196 0 48.01 48.01 0 01-96 0zm96 600a48.01 48.01 0 01-96 0 48.01 48.01 0 0196 0zm408-491a48.01 48.01 0 010-96 48.01 48.01 0 010 96z",
},
"tag": "path",
},
],
"tag": "svg",
},
"name": "branches",
"theme": "outline",
}
}
>
<span
aria-label="branches"
className="anticon anticon-branches"
role="img"
>
<IconReact
className=""
icon={
Object {
"icon": Object {
"attrs": Object {
"focusable": "false",
"viewBox": "64 64 896 896",
},
"children": Array [
Object {
"attrs": Object {
"d": "M740 161c-61.8 0-112 50.2-112 112 0 50.1 33.1 92.6 78.5 106.9v95.9L320 602.4V318.1c44.2-15 76-56.9 76-106.1 0-61.8-50.2-112-112-112s-112 50.2-112 112c0 49.2 31.8 91 76 106.1V706c-44.2 15-76 56.9-76 106.1 0 61.8 50.2 112 112 112s112-50.2 112-112c0-49.2-31.8-91-76-106.1v-27.8l423.5-138.7a50.52 50.52 0 0034.9-48.2V378.2c42.9-15.8 73.6-57 73.6-105.2 0-61.8-50.2-112-112-112zm-504 51a48.01 48.01 0 0196 0 48.01 48.01 0 01-96 0zm96 600a48.01 48.01 0 01-96 0 48.01 48.01 0 0196 0zm408-491a48.01 48.01 0 010-96 48.01 48.01 0 010 96z",
},
"tag": "path",
},
],
"tag": "svg",
},
"name": "branches",
"theme": "outline",
}
}
>
<svg
aria-hidden="true"
className=""
data-icon="branches"
fill="currentColor"
focusable="false"
height="1em"
key="svg-branches"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M740 161c-61.8 0-112 50.2-112 112 0 50.1 33.1 92.6 78.5 106.9v95.9L320 602.4V318.1c44.2-15 76-56.9 76-106.1 0-61.8-50.2-112-112-112s-112 50.2-112 112c0 49.2 31.8 91 76 106.1V706c-44.2 15-76 56.9-76 106.1 0 61.8 50.2 112 112 112s112-50.2 112-112c0-49.2-31.8-91-76-106.1v-27.8l423.5-138.7a50.52 50.52 0 0034.9-48.2V378.2c42.9-15.8 73.6-57 73.6-105.2 0-61.8-50.2-112-112-112zm-504 51a48.01 48.01 0 0196 0 48.01 48.01 0 01-96 0zm96 600a48.01 48.01 0 01-96 0 48.01 48.01 0 0196 0zm408-491a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
key="svg-branches-svg-0"
/>
</svg>
</IconReact>
</span>
</AntdIcon>
</Branches>
<div
className="icon-branches"
/>
</li>
<li
draggable={true}
key="toolbar-block"
onDragStart={[Function]}
>
<Border>
<AntdIcon
icon={
Object {
"icon": Object {
"attrs": Object {
"focusable": "false",
"viewBox": "64 64 896 896",
},
"children": Array [
Object {
"attrs": Object {
"d": "M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z",
},
"tag": "path",
},
],
"tag": "svg",
},
"name": "border",
"theme": "outline",
}
}
>
<span
aria-label="border"
className="anticon anticon-border"
role="img"
>
<IconReact
className=""
icon={
Object {
"icon": Object {
"attrs": Object {
"focusable": "false",
"viewBox": "64 64 896 896",
},
"children": Array [
Object {
"attrs": Object {
"d": "M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z",
},
"tag": "path",
},
],
"tag": "svg",
},
"name": "border",
"theme": "outline",
}
}
>
<svg
aria-hidden="true"
className=""
data-icon="border"
fill="currentColor"
focusable="false"
height="1em"
key="svg-border"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"
key="svg-border-svg-0"
/>
</svg>
</IconReact>
</span>
</AntdIcon>
</Border>
<div
className="icon-border"
/>
</li>
<li
draggable={true}
key="toolbar-tag"
onDragStart={[Function]}
>
<Tag>
<AntdIcon
icon={
Object {
"icon": Object {
"attrs": Object {
"focusable": "false",
"viewBox": "64 64 896 896",
},
"children": Array [
Object {
"attrs": Object {
"d": "M938 458.8l-29.6-312.6c-1.5-16.2-14.4-29-30.6-30.6L565.2 86h-.4c-3.2 0-5.7 1-7.6 2.9L88.9 557.2a9.96 9.96 0 000 14.1l363.8 363.8c1.9 1.9 4.4 2.9 7.1 2.9s5.2-1 7.1-2.9l468.3-468.3c2-2.1 3-5 2.8-8zM459.7 834.7L189.3 564.3 589 164.6 836 188l23.4 247-399.7 399.7zM680 256c-48.5 0-88 39.5-88 88s39.5 88 88 88 88-39.5 88-88-39.5-88-88-88zm0 120c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z",
},
"tag": "path",
},
],
"tag": "svg",
},
"name": "tag",
"theme": "outline",
}
}
>
<span
aria-label="tag"
className="anticon anticon-tag"
role="img"
>
<IconReact
className=""
icon={
Object {
"icon": Object {
"attrs": Object {
"focusable": "false",
"viewBox": "64 64 896 896",
},
"children": Array [
Object {
"attrs": Object {
"d": "M938 458.8l-29.6-312.6c-1.5-16.2-14.4-29-30.6-30.6L565.2 86h-.4c-3.2 0-5.7 1-7.6 2.9L88.9 557.2a9.96 9.96 0 000 14.1l363.8 363.8c1.9 1.9 4.4 2.9 7.1 2.9s5.2-1 7.1-2.9l468.3-468.3c2-2.1 3-5 2.8-8zM459.7 834.7L189.3 564.3 589 164.6 836 188l23.4 247-399.7 399.7zM680 256c-48.5 0-88 39.5-88 88s39.5 88 88 88 88-39.5 88-88-39.5-88-88-88zm0 120c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z",
},
"tag": "path",
},
],
"tag": "svg",
},
"name": "tag",
"theme": "outline",
}
}
>
<svg
aria-hidden="true"
className=""
data-icon="tag"
fill="currentColor"
focusable="false"
height="1em"
key="svg-tag"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M938 458.8l-29.6-312.6c-1.5-16.2-14.4-29-30.6-30.6L565.2 86h-.4c-3.2 0-5.7 1-7.6 2.9L88.9 557.2a9.96 9.96 0 000 14.1l363.8 363.8c1.9 1.9 4.4 2.9 7.1 2.9s5.2-1 7.1-2.9l468.3-468.3c2-2.1 3-5 2.8-8zM459.7 834.7L189.3 564.3 589 164.6 836 188l23.4 247-399.7 399.7zM680 256c-48.5 0-88 39.5-88 88s39.5 88 88 88 88-39.5 88-88-39.5-88-88-88zm0 120c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"
key="svg-tag-svg-0"
/>
</svg>
</IconReact>
</span>
</AntdIcon>
</Tag>
<div
className="icon-tag"
/>
</li>
</ul>
</div>
Expand Down
Loading

0 comments on commit b14cf0c

Please sign in to comment.