test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-29 18:48:45 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

将 icons 从 tsx 提取出来

Browse Source
This commit is contained in:
liaoxuezhi 2019-09-02 18:22:30 +08:00
parent b9169633bf
commit 38e3f478bf
31 changed files with 195 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
fis-conf.js
View File

@ -34,6 +34,22 @@ fis.match('*.scss', {
rExt: '.css'
});
fis.match('/src/icons/**.svg', {
rExt: '.js',
isJsXLike: true,
isJsLike: true,
isMod: true,
parser: [
fis.plugin('svgr'),
fis.plugin('typescript', {
importHelpers: true,
esModuleInterop: true,
experimentalDecorators: true,
sourceMap: false
})
]
})
fis.match('_*.scss', {
release: false
});

1
package.json
View File

@ -110,6 +110,7 @@
"es6-symbol": "3.1.1",
"faker": "^4.1.0",
"fis-parser-node-sass": "^1.0.5",
"fis-parser-svgr": "^1.0.0",
"fis3": "^3.4.41",
"fis3-hook-commonjs": "^0.1.31",
"fis3-hook-node_modules": "^2.3.1",

4
src/components/ColorPicker.tsx
View File

@ -8,7 +8,7 @@ import React from 'react';
import cx from 'classnames';
import {findDOMNode} from 'react-dom';
import {SketchPicker, ColorResult} from 'react-color';
import {closeIcon} from './icons';
import {Icon} from './icons';
import Overlay from './Overlay';
import uncontrollable = require('uncontrollable');
import PopOver from './PopOver';
@ -213,7 +213,7 @@ export class ColorControl extends React.PureComponent<ColorProps, ColorControlSt
{clearable && !disabled && value ? (
<a onClick={this.clearValue} className={cx('ColorPicker-clear')}>
{closeIcon}
<Icon icon="close" className="icon" />
</a>
) : null}

4
src/components/DatePicker.tsx
View File

@ -13,7 +13,7 @@ import 'moment/locale/zh-cn';
import CalendarContainer from 'react-datetime/src/CalendarContainer';
import ReactDatePicker from 'react-datetime';
import Select from './Select';
import {closeIcon} from './icons';
import {Icon} from './icons';
import PopOver from './PopOver';
import Overlay from './Overlay';
import {classPrefix, classnames} from '../themes/default';
@ -757,7 +757,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
{clearable && !disabled && value ? (
<a className={`${ns}DatePicker-clear`} onClick={this.clearValue}>
{closeIcon}
<Icon icon="close" className="icon" />
</a>
) : null}

4
src/components/DateRangePicker.tsx
View File

@ -8,7 +8,7 @@ import React = require('react');
import moment = require('moment');
import {findDOMNode} from 'react-dom';
import cx from 'classnames';
import {closeIcon} from './icons';
import { Icon } from './icons';
import Overlay from './Overlay';
import {BaseDatePicker} from './DatePicker';
import PopOver from './PopOver';
@ -440,7 +440,7 @@ export class DateRangePicker extends React.Component<DateRangePickerProps, DateR
{clearable && !disabled && value ? (
<a className={`${ns}DateRangePicker-clear`} onClick={this.clearValue}>
{closeIcon}
<Icon icon="close" className="icon" />
</a>
) : null}

4
src/components/Drawer.tsx
View File

@ -7,7 +7,7 @@
import React from 'react';
import Transition, {ENTERED, ENTERING, EXITING} from 'react-transition-group/Transition';
import {Portal} from 'react-overlays';
import {closeIcon} from './icons';
import {Icon} from './icons';
import cx from 'classnames';
import {current, addModal, removeModal} from './ModalManager';
import {ClassNamesFn, themeable} from '../theme';
@ -150,7 +150,7 @@ export class Drawer extends React.Component<DrawerProps, DrawerState> {
{overlay ? <div className={cx(`${ns}Drawer-overlay`, fadeStyles[status])} /> : null}
<div ref={this.contentRef} className={cx(`${ns}Drawer-content`, fadeStyles[status])}>
<a onClick={disabled ? undefined : onHide} className={`${ns}Drawer-close`}>
{closeIcon}
<Icon icon="close" className="icon" />
</a>
{children}
</div>

4
src/components/Select.tsx
View File

@ -12,7 +12,7 @@ import Overlay from './Overlay';
import PopOver from './PopOver';
import Downshift, {ControllerStateAndHelpers} from 'downshift';
import cx from 'classnames';
import {closeIcon} from './icons';
import {closeIcon, Icon} from './icons';
import matchSorter from 'match-sorter';
import {noop} from '../utils/helper';
import find = require('lodash/find');
@ -638,7 +638,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
</div>
{clearable && !disabled && value && value.length ? (
<a onClick={this.clearValue} className={cx('Select-clear')}>
{closeIcon}
<Icon icon="close" className="icon" />
</a>
) : null}
{loading ? (

182
src/components/icons.tsx
View File

@ -3,91 +3,99 @@
* @description
* @author fex
*/
import React from 'react';
export const closeIcon = (
<svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1463">
<path
d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z"
p-id="1464"
data-spm-anchor-id="a313x.7781069.0.i0"
/>
</svg>
);
export const unDoIcon = (
<svg className="icon" viewBox="0 0 1024 1024" version="1.1">
<path d="M661.333333 341.333333H167.04l183.253333-183.253333L320 128 85.333333 362.666667l234.666667 234.666666 30.08-30.08L167.04 384H661.333333a234.666667 234.666667 0 0 1 0 469.333333H448v42.666667h213.333333a277.333333 277.333333 0 0 0 0-554.666667z" />
</svg>
);
export const reDoIcon = (
<svg className="icon" viewBox="0 0 1024 1024" version="1.1">
<path d="M704 128l-30.08 30.08L856.96 341.333333H362.666667a277.333333 277.333333 0 0 0 0 554.666667h213.333333v-42.666667H362.666667a234.666667 234.666667 0 0 1 0-469.333333h494.293333l-183.253333 183.253333L704 597.333333l234.666667-234.666666z" />
</svg>
);
export const enterIcon = (
<svg className="icon" viewBox="0 0 1024 1024" version="1.1">
<path d="M864 192c-19.2 0-32 12.8-32 32v224c0 89.6-70.4 160-160 160H236.8l105.6-105.6c12.8-12.8 12.8-32 0-44.8s-32-12.8-44.8 0l-160 160c-3.2 3.2-6.4 6.4-6.4 9.6-3.2 6.4-3.2 16 0 25.6 3.2 3.2 3.2 6.4 6.4 9.6l160 160c6.4 6.4 12.8 9.6 22.4 9.6s16-3.2 22.4-9.6c12.8-12.8 12.8-32 0-44.8L236.8 672H672c124.8 0 224-99.2 224-224V224c0-19.2-12.8-32-32-32z" />
</svg>
);
export const volumeIcon = (
<svg className="icon" viewBox="0 0 1024 1024" version="1.1">
<path
d="M536.319574 5.11991a63.99888 63.99888 0 0 0-69.758779 13.439765L229.764939 255.99552H64.00784a63.99888 63.99888 0 0 0-63.99888 63.99888v383.99328a63.99888 63.99888 0 0 0 63.99888 63.99888h165.757099l236.795856 237.435845A63.99888 63.99888 0 0 0 512 1023.98208a53.759059 53.759059 0 0 0 24.319574-5.11991A63.99888 63.99888 0 0 0 575.99888 959.9832V63.99888a63.99888 63.99888 0 0 0-39.679306-58.87897zM192.0056 639.9888H128.00672V383.99328h63.99888z m255.99552 165.757099l-127.99776-127.99776V346.233941l127.99776-127.99776zM879.353571 148.477402a63.99888 63.99888 0 0 0-94.718342 87.038476 402.552955 402.552955 0 0 1 0 552.950324A63.99888 63.99888 0 0 0 831.9944 895.98432a63.99888 63.99888 0 0 0 46.719183-20.479641 531.830693 531.830693 0 0 0 0-727.027277z"
fill="#606670"
p-id="3605"
/>
<path
d="M751.9958 277.11515a63.99888 63.99888 0 0 0-95.99832 85.7585A218.236181 218.236181 0 0 1 703.99664 511.99104a221.436125 221.436125 0 0 1-47.359171 149.117391 63.99888 63.99888 0 0 0 4.479921 90.23842A63.99888 63.99888 0 0 0 703.99664 767.98656a63.99888 63.99888 0 0 0 47.359171-21.11963A349.433885 349.433885 0 0 0 831.9944 511.99104a353.273818 353.273818 0 0 0-79.9986-234.87589z"
fill="#606670"
p-id="3606"
/>
</svg>
);
export const muteIcon = (
<svg className="icon" viewBox="0 0 1024 1024" version="1.1">
<path
d="M536.310615 5.11991a63.99888 63.99888 0 0 0-69.75878 13.439765L229.755979 255.99552H63.99888a63.99888 63.99888 0 0 0-63.99888 63.99888v383.99328a63.99888 63.99888 0 0 0 63.99888 63.99888h165.757099l236.795856 237.435845A63.99888 63.99888 0 0 0 511.99104 1023.98208a53.759059 53.759059 0 0 0 24.319575-5.11991A63.99888 63.99888 0 0 0 575.98992 959.9832V63.99888a63.99888 63.99888 0 0 0-39.679305-58.87897zM191.99664 639.9888H127.99776V383.99328h63.99888z m255.99552 165.757099l-127.99776-127.99776V346.233941l127.99776-127.99776zM914.543995 511.99104l90.87841-90.238421a63.99888 63.99888 0 1 0-90.87841-90.878409l-90.23842 90.878409-90.238421-90.878409a63.99888 63.99888 0 0 0-90.87841 90.878409L734.067154 511.99104l-90.87841 90.238421a63.99888 63.99888 0 0 0 90.87841 90.87841l90.238421-90.87841 90.23842 90.87841a63.99888 63.99888 0 1 0 90.87841-90.87841z"
fill="#606670"
p-id="2312"
/>
</svg>
);
export const playIcon = (
<svg className="icon" viewBox="0 0 1024 1024" version="1.1">
<path
d="M852.727563 392.447107C956.997809 458.473635 956.941389 565.559517 852.727563 631.55032L281.888889 993.019655C177.618644 1059.046186 93.090909 1016.054114 93.090909 897.137364L93.090909 126.860063C93.090909 7.879206 177.675064-35.013033 281.888889 30.977769L852.727563 392.447107 852.727563 392.447107Z"
p-id="4494"
fill="#606670"
/>
</svg>
);
export const pauseIcon = (
<svg className="icon" viewBox="0 0 1024 1024" version="1.1">
<path
d="M757.52 73.107h-62.493c-34.526 0-62.498 27.984-62.498 62.511v749.948c0 34.526 27.974 62.493 62.498 62.493h62.493c34.516 0 62.502-27.968 62.502-62.493v-749.953c-0.001-34.524-27.984-62.509-62.502-62.509z"
p-id="7567"
fill="#606670"
/>
<path
d="M320.054 73.107h-62.502c-34.526 0-62.498 27.984-62.498 62.511v749.948c0 34.526 27.974 62.493 62.498 62.493h62.502c34.505 0 62.493-27.968 62.493-62.493v-749.953c-0.001-34.524-27.984-62.509-62.493-62.509z"
p-id="7568"
fill="#606670"
/>
</svg>
);
export const leftArrowIcon = (
<svg className="icon" viewBox="0 0 1024 1024" version="1.1">
<path
d="M324.211517 511.805631 787.889594 73.082583c16.19422-16.630365 16.19422-43.974704 0-60.605068-16.19422-16.630365-42.495607-16.630365-58.613976 0L235.750113 479.360302c-8.647031 8.969398-12.344775 20.934917-11.719003 32.445329-0.644735 11.90863 3.071972 23.874149 11.719003 32.824585l493.506542 466.882788c16.118369 16.649327 42.438718 16.649327 58.613976 0 16.19422-17.085471 16.19422-43.974704 0-60.605068L324.211517 511.805631"
p-id="2160"
/>
</svg>
);
export const rightArrowIcon = (
<svg className="icon" viewBox="0 0 1024 1024" version="1.1">
<path
d="M311.559054 1013.77369L767.908116 512.684524 311.559054 12.234501a31.318073 31.318073 0 1 0-46.657538 41.544383L679.706197 512.684524 267.458094 969.672731a31.318073 31.318073 0 0 0 46.018393 42.183526z"
p-id="1981"
/>
</svg>
);
// @ts-ignore
import CloseIcon from '../icons/close.svg';
// @ts-ignore
import UnDoIcon from '../icons/undo.svg';
// @ts-ignore
import ReDoIcon from '../icons/redo.svg';
// @ts-ignore
import EnterIcon from '../icons/enter.svg';
// @ts-ignore
import VolumeIcon from '../icons/volume.svg';
// @ts-ignore
import MuteIcon from '../icons/mute.svg';
// @ts-ignore
import PlayIcon from '../icons/play.svg';
// @ts-ignore
import PauseIcon from '../icons/pause.svg';
// @ts-ignore
import LeftArrowIcon from '../icons/left-arrow.svg';
// @ts-ignore
import RightArrowIcon from '../icons/right-arrow.svg';
// 兼容原来的用法，后续不直接试用。
// @ts-ignore
export const closeIcon = (<CloseIcon className="icon" />);
// @ts-ignore
export const unDoIcon = (<UnDoIcon className="icon" />);
// @ts-ignore
export const reDoIcon = (<ReDoIcon className="icon" />);
// @ts-ignore
export const enterIcon = (<EnterIcon className="icon" />);
// @ts-ignore
export const volumeIcon = (<VolumeIcon className="icon" />);
// @ts-ignore
export const muteIcon = (<MuteIcon className="icon" />);
// @ts-ignore
export const playIcon = (<PlayIcon className="icon" />);
// @ts-ignore
export const pauseIcon = (<PauseIcon className="icon" />);
// @ts-ignore
export const leftArrowIcon = (<LeftArrowIcon className="icon" />);
// @ts-ignore
export const rightArrowIcon = (<RightArrowIcon className="icon" />);
const iconFactory:{
[propName:string]: React.ReactType<{}>
} = {};
export function getIcon(key:string) {
return iconFactory[key];
}
export function registerIcon(key:string, component:React.ReactType<{}>) {
iconFactory[key] = component;
}
registerIcon('close', CloseIcon);
registerIcon('undo', UnDoIcon);
registerIcon('redo', ReDoIcon);
registerIcon('enter', EnterIcon);
registerIcon('volume', VolumeIcon);
registerIcon('mute', MuteIcon);
registerIcon('play', PlayIcon);
registerIcon('pause', PauseIcon);
registerIcon('left-arrow', LeftArrowIcon);
registerIcon('right-arrow', RightArrowIcon);
export function Icon({
icon,
...rest
}:{
icon: string
} & React.ComponentProps<any>) {
const Component = getIcon(icon);
return Component ? (
<Component {...rest} />
) : (
<span className="text-danger">没有 icon {icon}</span>
);
}
export {
CloseIcon,
UnDoIcon,
ReDoIcon,
EnterIcon,
VolumeIcon,
MuteIcon,
PlayIcon,
PauseIcon,
LeftArrowIcon,
RightArrowIcon
}

4
src/icons/close.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" version="1.1" p-id="1463">
<path d="M967.81435 106.836237 917.16274 56.18565 512 461.34839 106.836237 56.18565 56.184627 106.836237 461.34839 512 56.184627 917.163763 106.836237 967.815373 512 562.65161 917.16274 967.815373 967.81435 917.163763 562.650587 512Z" p-id="1464" data-spm-anchor-id="a313x.7781069.0.i0" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 439 B

4
src/icons/enter.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" version="1.1" p-id="1463">
<path d="M864 192c-19.2 0-32 12.8-32 32v224c0 89.6-70.4 160-160 160H236.8l105.6-105.6c12.8-12.8 12.8-32 0-44.8s-32-12.8-44.8 0l-160 160c-3.2 3.2-6.4 6.4-6.4 9.6-3.2 6.4-3.2 16 0 25.6 3.2 3.2 3.2 6.4 6.4 9.6l160 160c6.4 6.4 12.8 9.6 22.4 9.6s16-3.2 22.4-9.6c12.8-12.8 12.8-32 0-44.8L236.8 672H672c124.8 0 224-99.2 224-224V224c0-19.2-12.8-32-32-32z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 500 B

4
src/icons/left-arrow.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" version="1.1" p-id="1463">
<path d="M324.211517 511.805631 787.889594 73.082583c16.19422-16.630365 16.19422-43.974704 0-60.605068-16.19422-16.630365-42.495607-16.630365-58.613976 0L235.750113 479.360302c-8.647031 8.969398-12.344775 20.934917-11.719003 32.445329-0.644735 11.90863 3.071972 23.874149 11.719003 32.824585l493.506542 466.882788c16.118369 16.649327 42.438718 16.649327 58.613976 0 16.19422-17.085471 16.19422-43.974704 0-60.605068L324.211517 511.805631" p-id="2160" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 603 B

4
src/icons/mute.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" version="1.1" p-id="1463">
<path d="M536.310615 5.11991a63.99888 63.99888 0 0 0-69.75878 13.439765L229.755979 255.99552H63.99888a63.99888 63.99888 0 0 0-63.99888 63.99888v383.99328a63.99888 63.99888 0 0 0 63.99888 63.99888h165.757099l236.795856 237.435845A63.99888 63.99888 0 0 0 511.99104 1023.98208a53.759059 53.759059 0 0 0 24.319575-5.11991A63.99888 63.99888 0 0 0 575.98992 959.9832V63.99888a63.99888 63.99888 0 0 0-39.679305-58.87897zM191.99664 639.9888H127.99776V383.99328h63.99888z m255.99552 165.757099l-127.99776-127.99776V346.233941l127.99776-127.99776zM914.543995 511.99104l90.87841-90.238421a63.99888 63.99888 0 1 0-90.87841-90.878409l-90.23842 90.878409-90.238421-90.878409a63.99888 63.99888 0 0 0-90.87841 90.878409L734.067154 511.99104l-90.87841 90.238421a63.99888 63.99888 0 0 0 90.87841 90.87841l90.238421-90.87841 90.23842 90.87841a63.99888 63.99888 0 1 0 90.87841-90.87841z" fill="#606670" p-id="2312" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

5
src/icons/pause.svg Normal file
View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" version="1.1" p-id="1463">
<path d="M757.52 73.107h-62.493c-34.526 0-62.498 27.984-62.498 62.511v749.948c0 34.526 27.974 62.493 62.498 62.493h62.493c34.516 0 62.502-27.968 62.502-62.493v-749.953c-0.001-34.524-27.984-62.509-62.502-62.509z" p-id="7567" fill="#606670" />
<path d="M320.054 73.107h-62.502c-34.526 0-62.498 27.984-62.498 62.511v749.948c0 34.526 27.974 62.493 62.498 62.493h62.502c34.505 0 62.493-27.968 62.493-62.493v-749.953c-0.001-34.524-27.984-62.509-62.493-62.509z" p-id="7568" fill="#606670" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 638 B

4
src/icons/play.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" version="1.1" p-id="1463">
<path d="M852.727563 392.447107C956.997809 458.473635 956.941389 565.559517 852.727563 631.55032L281.888889 993.019655C177.618644 1059.046186 93.090909 1016.054114 93.090909 897.137364L93.090909 126.860063C93.090909 7.879206 177.675064-35.013033 281.888889 30.977769L852.727563 392.447107 852.727563 392.447107Z" p-id="4494" fill="#606670" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 492 B

4
src/icons/redo.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" version="1.1" p-id="1463">
<path d="M704 128l-30.08 30.08L856.96 341.333333H362.666667a277.333333 277.333333 0 0 0 0 554.666667h213.333333v-42.666667H362.666667a234.666667 234.666667 0 0 1 0-469.333333h494.293333l-183.253333 183.253333L704 597.333333l234.666667-234.666666z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 400 B

4
src/icons/right-arrow.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" version="1.1" p-id="1463">
<path d="M311.559054 1013.77369L767.908116 512.684524 311.559054 12.234501a31.318073 31.318073 0 1 0-46.657538 41.544383L679.706197 512.684524 267.458094 969.672731a31.318073 31.318073 0 0 0 46.018393 42.183526z" p-id="1981" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 377 B

4
src/icons/undo.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" version="1.1" p-id="1463">
<path d="M661.333333 341.333333H167.04l183.253333-183.253333L320 128 85.333333 362.666667l234.666667 234.666666 30.08-30.08L167.04 384H661.333333a234.666667 234.666667 0 0 1 0 469.333333H448v42.666667h213.333333a277.333333 277.333333 0 0 0 0-554.666667z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 407 B

5
src/icons/volume.svg Normal file
View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" version="1.1" p-id="1463">
<path d="M536.319574 5.11991a63.99888 63.99888 0 0 0-69.758779 13.439765L229.764939 255.99552H64.00784a63.99888 63.99888 0 0 0-63.99888 63.99888v383.99328a63.99888 63.99888 0 0 0 63.99888 63.99888h165.757099l236.795856 237.435845A63.99888 63.99888 0 0 0 512 1023.98208a53.759059 53.759059 0 0 0 24.319574-5.11991A63.99888 63.99888 0 0 0 575.99888 959.9832V63.99888a63.99888 63.99888 0 0 0-39.679306-58.87897zM192.0056 639.9888H128.00672V383.99328h63.99888z m255.99552 165.757099l-127.99776-127.99776V346.233941l127.99776-127.99776zM879.353571 148.477402a63.99888 63.99888 0 0 0-94.718342 87.038476 402.552955 402.552955 0 0 1 0 552.950324A63.99888 63.99888 0 0 0 831.9944 895.98432a63.99888 63.99888 0 0 0 46.719183-20.479641 531.830693 531.830693 0 0 0 0-727.027277z" fill="#606670" p-id="3605" />
<path d="M751.9958 277.11515a63.99888 63.99888 0 0 0-95.99832 85.7585A218.236181 218.236181 0 0 1 703.99664 511.99104a221.436125 221.436125 0 0 1-47.359171 149.117391 63.99888 63.99888 0 0 0 4.479921 90.23842A63.99888 63.99888 0 0 0 703.99664 767.98656a63.99888 63.99888 0 0 0 47.359171-21.11963A349.433885 349.433885 0 0 0 831.9944 511.99104a353.273818 353.273818 0 0 0-79.9986-234.87589z" fill="#606670" p-id="3606" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

2
src/index.tsx
View File

@ -12,7 +12,7 @@ import './utils/tpl-builtin';
import './utils/tpl-lodash';
import * as utils from './utils/helper';
import {resizeSensor} from './utils/resize-sensor';
import {setIconVendor} from './renderers/Form/IconPicker-icons';
import {setIconVendor} from './renderers/Form/IconPickerIcons';
import {
NotFound,

8
src/renderers/Audio.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import upperFirst = require('lodash/upperFirst');
import {Renderer, RendererProps} from '../factory';
import {autobind} from '../utils/helper';
import {volumeIcon, muteIcon, playIcon, pauseIcon} from '../components/icons';
import {Icon} from '../components/icons';
import {resolveVariable} from '../utils/tpl-builtin';
import {filter} from '../utils/tpl';
@ -323,7 +323,7 @@ export class Audio extends React.Component<AudioProps, AudioState> {
<div
className={cx('Audio-play')}
onClick={this.handlePlaying}>
{playing ? pauseIcon : playIcon}
{playing ? <Icon icon="pause" className="icon" /> : <Icon icon="play" className="icon" />}
</div>
)
}
@ -370,7 +370,7 @@ export class Audio extends React.Component<AudioProps, AudioState> {
<div
className={cx('Audio-volumeControlIcon')}
onClick={this.handleMute}>
{volume > 0 ? volumeIcon : muteIcon}
{volume > 0 ? <Icon icon="volumn" className="icon" /> : <Icon icon="mute" className="icon" />}
</div>
<input
type='range' min={0} max={1} step='any'
@ -381,7 +381,7 @@ export class Audio extends React.Component<AudioProps, AudioState> {
<div
className={cx('Audio-volume')}
onMouseEnter={() => this.toggleHandleVolume(true)}>
{volume > 0 ? volumeIcon : muteIcon}
{volume > 0 ? <Icon icon="volumn" className="icon" /> : <Icon icon="mute" className="icon" />}
</div>
)
)

6
src/renderers/Carousel.tsx
View File

@ -3,7 +3,7 @@ import Transition, {ENTERED, ENTERING, EXITING} from 'react-transition-group/Tra
import {Renderer, RendererProps} from '../factory';
import {resolveVariable} from '../utils/tpl-builtin';
import {autobind, createObject, isObject, isArrayChilrenModified} from '../utils/helper';
import {leftArrowIcon, rightArrowIcon} from '../components/icons';
import {Icon} from '../components/icons';
const animationStyles: {
[propName: string]: string;
@ -212,8 +212,8 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
>
<div className={cx('Carousel-leftArrow')} onClick={this.prev}>{leftArrowIcon}</div>
<div className={cx('Carousel-rightArrow')} onClick={this.next}>{rightArrowIcon}</div>
<div className={cx('Carousel-leftArrow')} onClick={this.prev}><Icon icon="left-arrow" className="icon" /></div>
<div className={cx('Carousel-rightArrow')} onClick={this.next}><Icon icon="right-arrow" className="icon" /></div>
</div>
)
}

8
src/renderers/Dialog.tsx
View File

@ -10,7 +10,7 @@ import Modal from '../components/Modal';
import findLast = require('lodash/findLast');
import { guid, chainFunctions, isVisible } from '../utils/helper';
import { reaction } from 'mobx';
import { closeIcon } from '../components/icons';
import { Icon } from '../components/icons';
import { ModalStore, IModalStore } from '../store/modal';
import { findDOMNode } from 'react-dom';
@ -395,7 +395,7 @@ export default class Dialog extends React.Component<DialogProps, DialogState> {
<div className={cx('Modal-header', headerClassName)}>
{showCloseButton !== false && !store.loading ? (
<a data-tooltip="关闭弹窗" onClick={this.handleSelfClose} className={cx('Modal-close')}>
{closeIcon}
<Icon icon="close" className="icon" />
</a>
) : null}
<div className={cx('Modal-title')}>{filter(title, store.formData)}</div>
@ -404,7 +404,7 @@ export default class Dialog extends React.Component<DialogProps, DialogState> {
<div className={cx('Modal-header', headerClassName)}>
{showCloseButton !== false && !store.loading ? (
<a data-tooltip="关闭弹窗" onClick={this.handleSelfClose} className={cx('Modal-close')}>
{closeIcon}
<Icon icon="close" className="icon" />
</a>
) : null}
{render('title', title, {
@ -413,7 +413,7 @@ export default class Dialog extends React.Component<DialogProps, DialogState> {
</div>
) : showCloseButton !== false && !store.loading ? (
<a data-tooltip="关闭弹窗" onClick={this.handleSelfClose} className={cx('Modal-close')}>
{closeIcon}
<Icon icon="close" className="icon" />
</a>
) : null}

2
src/renderers/Form/IconPicker.tsx
View File

@ -4,7 +4,7 @@ import matchSorter from 'match-sorter';
import keycode from "keycode";
import Downshift, { StateChangeOptions } from 'downshift';
import { autobind } from '../../utils/helper';
import { ICONS } from './IconPicker-icons';
import { ICONS } from './IconPickerIcons';
import {
FormItem,
FormControlProps

0
src/renderers/Form/IconPicker-icons.tsx → src/renderers/Form/IconPickerIcons.tsx
View File

8
src/renderers/Form/NestedSelect.tsx
View File

@ -5,7 +5,7 @@ import Overlay from '../../components/Overlay';
import Checkbox from '../../components/Checkbox';
import PopOver from '../../components/PopOver';
import {RootCloseWrapper} from 'react-overlays';
import {closeIcon, rightArrowIcon} from '../../components/icons';
import {Icon} from '../../components/icons';
import {autobind, flattenTree, isEmpty} from '../../utils/helper';
import {dataMapping} from '../../utils/tpl-builtin';
@ -84,7 +84,7 @@ export default class NestedSelectControl extends React.Component<NestedSelectPro
} = this.props;
return clearable && !disabled && (Array.isArray(value) ? value.length : value) ?
(<a onClick={this.clearValue} className={cx('NestedSelect-clear')}>{closeIcon}</a>) : null;
(<a onClick={this.clearValue} className={cx('NestedSelect-clear')}><Icon icon="close" className="icon" /></a>) : null;
}
@autobind
@ -230,7 +230,7 @@ export default class NestedSelectControl extends React.Component<NestedSelectPro
>
{option.label}
</Checkbox>
{option.children ? (<div className={cx('NestedSelect-optionArrowRight')}>{rightArrowIcon}</div>) : null}
{option.children ? (<div className={cx('NestedSelect-optionArrowRight')}><Icon icon="right-arrow" className="icon" /></div>) : null}
{option.children && option.children.length ? this.renderOptions(option.children, true, cascade ? false : uncheckable || multiple && checked) : null}
</div>
)
@ -250,7 +250,7 @@ export default class NestedSelectControl extends React.Component<NestedSelectPro
onClick={this.handleOptionClick.bind(this, option)}
>
<span>{option.label}</span>
{option.children ? (<div className={cx('NestedSelect-optionArrowRight')}>{rightArrowIcon}</div>) : null}
{option.children ? (<div className={cx('NestedSelect-optionArrowRight')}><Icon icon="right-arrow" className="icon" /></div>) : null}
{option.children && option.children.length ? this.renderOptions(option.children, true, false) : null}
</div>

4
src/renderers/Form/Picker.tsx
View File

@ -16,7 +16,7 @@ import {anyChanged, autobind, getVariable, noop} from '../../utils/helper';
import findIndex = require('lodash/findIndex');
import Html from '../../components/Html';
import { filter } from '../../utils/tpl';
import { closeIcon } from '../../components/icons';
import { Icon } from '../../components/icons';
import {isEmpty} from '../../utils/helper';
import {dataMapping} from '../../utils/tpl-builtin';
@ -324,7 +324,7 @@ export default class PickerControl extends React.PureComponent<PickerProps, any>
/>
</div>
{clearable && !disabled && selectedOptions.length ? (<a onClick={this.clearValue} className={cx('Picker-clear')}>{closeIcon}</a>) : null}
{clearable && !disabled && selectedOptions.length ? (<a onClick={this.clearValue} className={cx('Picker-clear')}><Icon icon="close" className="icon" /></a>) : null}
<span onClick={this.open} className={cx('Picker-btn')}></span>
</div>

4
src/renderers/Form/Range.tsx
View File

@ -8,7 +8,7 @@ import {
} from './Item';
import cx from 'classnames';
import InputRange from '../../components/Range';
import { closeIcon } from '../../components/icons';
import { Icon } from '../../components/icons';
export interface RangeProps extends FormControlProps {
max?: number;
@ -371,7 +371,7 @@ export default class RangeControl extends React.PureComponent<RangeProps, RangeS
{clearable && !disabled && showInput ? (
<a onClick={() => this.clearValue()} className={cx("InputRange-clear", {
'is-active': (multiple ? isEqual(this.state.value, {min: min, max: max}) : this.state.value !== min)
})}>{closeIcon}</a>
})}><Icon icon="close" className="icon" /></a>
) : null}
</div >
);

4
src/renderers/Form/Tag.tsx
View File

@ -9,7 +9,7 @@ import Downshift from 'downshift';
import matchSorter from 'match-sorter';
import debouce = require('lodash/debounce');
import find = require('lodash/find');
import { closeIcon } from '../../components/icons';
import { Icon } from '../../components/icons';
import { Portal } from 'react-overlays';
import { findDOMNode } from 'react-dom';
@ -271,7 +271,7 @@ export default class TagControl extends React.PureComponent<TagProps, TagState>
/>
</div>
{clearable && !disabled && value ? (<a onClick={this.clearValue} className={cx('TagControl-clear')}>{closeIcon}</a>) : null}
{clearable && !disabled && value ? (<a onClick={this.clearValue} className={cx('TagControl-clear')}><Icon icon="close" className="icon" /></a>) : null}
{loading ? <i className={cx(`TagControl-spinner`, spinnerClassName)} /> : null}
</div>

8
src/renderers/Form/Text.tsx
View File

@ -11,7 +11,7 @@ import matchSorter from 'match-sorter';
import debouce = require('lodash/debounce');
import { filter } from '../../utils/tpl';
import find = require('lodash/find');
import { closeIcon, enterIcon } from '../../components/icons';
import { Icon } from '../../components/icons';
import { autobind, createObject } from '../../utils/helper';
import {isEffectiveApi} from '../../utils/api';
@ -437,7 +437,7 @@ export default class TextControl extends React.PureComponent<TextProps, TextStat
/>
</div>
{clearable && !disabled && value ? (<a onClick={this.clearValue} className={cx('TextControl-clear')}>{closeIcon}</a>) : null}
{clearable && !disabled && value ? (<a onClick={this.clearValue} className={cx('TextControl-clear')}><Icon icon="close" className="icon" /></a>) : null}
{loading ? <i className={cx(`TextControl-spinner`, spinnerClassName)} /> : null}
{isOpen && filtedOptions.length ? (
<div className={cx('TextControl-sugs')}>
@ -455,7 +455,7 @@ export default class TextControl extends React.PureComponent<TextProps, TextStat
key={option.value}
>
{option.isNew ? (
<span>新增：{option.label}{enterIcon}</span>
<span>新增：{option.label}<Icon icon="enter" className="icon" /></span>
) : (
<span>{option.disabled ? option.label : highlight(option.label, inputValue as string)}{option.tip}</span>
)}
@ -501,7 +501,7 @@ export default class TextControl extends React.PureComponent<TextProps, TextStat
onChange={this.handleNormalInputChange}
value={typeof value === 'undefined' || value === null ? '' : typeof value === 'string' ? value : JSON.stringify(value)}
/>
{clearable && !disabled && value ? (<a onClick={this.clearValue} className={`${ns}TextControl-clear`}>{closeIcon}</a>) : null}
{clearable && !disabled && value ? (<a onClick={this.clearValue} className={`${ns}TextControl-clear`}><Icon icon="close" className="icon" /></a>) : null}
</div>
);
}

4
src/renderers/Form/TransferSelect.tsx
View File

@ -9,7 +9,7 @@ import {
find
} from 'lodash';
import Checkbox from '../../components/Checkbox';
import { closeIcon } from '../../components/icons';
import { closeIcon, Icon } from '../../components/icons';
export interface TransferSelectProps extends OptionsControlProps {
viewMode?: 'table' | 'normal';
@ -359,7 +359,7 @@ export class TransferSelect extends React.Component<TransferSelectProps, Transfe
onClick={this.handleCheck.bind(this, option)}
className={cx('TransferSelect-option-close')}
>
{closeIcon}
<Icon icon="close" className="icon" />
</a>
</td>
</tr>

4
src/renderers/Form/TreeSelect.tsx
View File

@ -8,7 +8,7 @@ import {
OptionsControlProps,
Option
} from './Options';
import { closeIcon } from '../../components/icons';
import { Icon } from '../../components/icons';
import TreeSelector from '../../components/Tree';
import matchSorter from 'match-sorter';
import debouce = require('lodash/debounce');
@ -484,7 +484,7 @@ export default class TreeSelectControl extends React.Component<TreeSelectProps,
) : null}
</div>
{clearable && !disabled && selectedOptions.length ? (<a onClick={this.clearValue} className={`${ns}TreeSelect-clear`}>{closeIcon}</a>) : null}
{clearable && !disabled && selectedOptions.length ? (<a onClick={this.clearValue} className={`${ns}TreeSelect-clear`}><Icon icon="close" className="icon" /></a>) : null}
{loading ? (
<span className={cx('TreeSelect-spinner')}>