test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-03 12:38:53 +08:00
Code Issues Actions 3 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' 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', { fis.match('_*.scss', {
release: false release: false
}); });

1
package.json
View File

@ -110,6 +110,7 @@
"es6-symbol": "3.1.1", "es6-symbol": "3.1.1",
"faker": "^4.1.0", "faker": "^4.1.0",
"fis-parser-node-sass": "^1.0.5", "fis-parser-node-sass": "^1.0.5",
"fis-parser-svgr": "^1.0.0",
"fis3": "^3.4.41", "fis3": "^3.4.41",
"fis3-hook-commonjs": "^0.1.31", "fis3-hook-commonjs": "^0.1.31",
"fis3-hook-node_modules": "^2.3.1", "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 cx from 'classnames';
import {findDOMNode} from 'react-dom'; import {findDOMNode} from 'react-dom';
import {SketchPicker, ColorResult} from 'react-color'; import {SketchPicker, ColorResult} from 'react-color';
import {closeIcon} from './icons'; import {Icon} from './icons';
import Overlay from './Overlay'; import Overlay from './Overlay';
import uncontrollable = require('uncontrollable'); import uncontrollable = require('uncontrollable');
import PopOver from './PopOver'; import PopOver from './PopOver';
@ -213,7 +213,7 @@ export class ColorControl extends React.PureComponent<ColorProps, ColorControlSt
{clearable && !disabled && value ? ( {clearable && !disabled && value ? (
<a onClick={this.clearValue} className={cx('ColorPicker-clear')}> <a onClick={this.clearValue} className={cx('ColorPicker-clear')}>
{closeIcon} <Icon icon="close" className="icon" />
</a> </a>
) : null} ) : 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 CalendarContainer from 'react-datetime/src/CalendarContainer';
import ReactDatePicker from 'react-datetime'; import ReactDatePicker from 'react-datetime';
import Select from './Select'; import Select from './Select';
import {closeIcon} from './icons'; import {Icon} from './icons';
import PopOver from './PopOver'; import PopOver from './PopOver';
import Overlay from './Overlay'; import Overlay from './Overlay';
import {classPrefix, classnames} from '../themes/default'; import {classPrefix, classnames} from '../themes/default';
@ -757,7 +757,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
{clearable && !disabled && value ? ( {clearable && !disabled && value ? (
<a className={`${ns}DatePicker-clear`} onClick={this.clearValue}> <a className={`${ns}DatePicker-clear`} onClick={this.clearValue}>
{closeIcon} <Icon icon="close" className="icon" />
</a> </a>
) : null} ) : null}

4
src/components/DateRangePicker.tsx
View File

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

4
src/components/Drawer.tsx
View File

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

4
src/components/Select.tsx
View File

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

180
src/components/icons.tsx
View File

@ -3,91 +3,99 @@
* @description * @description
* @author fex * @author fex
*/ */
import React from 'react'; 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"> // @ts-ignore
<path import CloseIcon from '../icons/close.svg';
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" // @ts-ignore
p-id="1464" import UnDoIcon from '../icons/undo.svg';
data-spm-anchor-id="a313x.7781069.0.i0" // @ts-ignore
/> import ReDoIcon from '../icons/redo.svg';
</svg> // @ts-ignore
); import EnterIcon from '../icons/enter.svg';
export const unDoIcon = ( // @ts-ignore
<svg className="icon" viewBox="0 0 1024 1024" version="1.1"> import VolumeIcon from '../icons/volume.svg';
<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" /> // @ts-ignore
</svg> import MuteIcon from '../icons/mute.svg';
); // @ts-ignore
export const reDoIcon = ( import PlayIcon from '../icons/play.svg';
<svg className="icon" viewBox="0 0 1024 1024" version="1.1"> // @ts-ignore
<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" /> import PauseIcon from '../icons/pause.svg';
</svg> // @ts-ignore
); import LeftArrowIcon from '../icons/left-arrow.svg';
export const enterIcon = ( // @ts-ignore
<svg className="icon" viewBox="0 0 1024 1024" version="1.1"> import RightArrowIcon from '../icons/right-arrow.svg';
<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 = ( // @ts-ignore
<svg className="icon" viewBox="0 0 1024 1024" version="1.1"> export const closeIcon = (<CloseIcon className="icon" />);
<path // @ts-ignore
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" export const unDoIcon = (<UnDoIcon className="icon" />);
fill="#606670" // @ts-ignore
p-id="3605" export const reDoIcon = (<ReDoIcon className="icon" />);
/> // @ts-ignore
<path export const enterIcon = (<EnterIcon className="icon" />);
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" // @ts-ignore
fill="#606670" export const volumeIcon = (<VolumeIcon className="icon" />);
p-id="3606" // @ts-ignore
/> export const muteIcon = (<MuteIcon className="icon" />);
</svg> // @ts-ignore
); export const playIcon = (<PlayIcon className="icon" />);
export const muteIcon = ( // @ts-ignore
<svg className="icon" viewBox="0 0 1024 1024" version="1.1"> export const pauseIcon = (<PauseIcon className="icon" />);
<path // @ts-ignore
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" export const leftArrowIcon = (<LeftArrowIcon className="icon" />);
fill="#606670" // @ts-ignore
p-id="2312" export const rightArrowIcon = (<RightArrowIcon className="icon" />);
/>
</svg> const iconFactory:{
); [propName:string]: React.ReactType<{}>
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" export function getIcon(key:string) {
p-id="4494" return iconFactory[key];
fill="#606670" }
/>
</svg> export function registerIcon(key:string, component:React.ReactType<{}>) {
); iconFactory[key] = component;
export const pauseIcon = ( }
<svg className="icon" viewBox="0 0 1024 1024" version="1.1">
<path registerIcon('close', CloseIcon);
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" registerIcon('undo', UnDoIcon);
p-id="7567" registerIcon('redo', ReDoIcon);
fill="#606670" registerIcon('enter', EnterIcon);
/> registerIcon('volume', VolumeIcon);
<path registerIcon('mute', MuteIcon);
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" registerIcon('play', PlayIcon);
p-id="7568" registerIcon('pause', PauseIcon);
fill="#606670" registerIcon('left-arrow', LeftArrowIcon);
/> registerIcon('right-arrow', RightArrowIcon);
</svg>
); export function Icon({
export const leftArrowIcon = ( icon,
<svg className="icon" viewBox="0 0 1024 1024" version="1.1"> ...rest
<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" icon: string
p-id="2160" } & React.ComponentProps<any>) {
/> const Component = getIcon(icon);
</svg> return Component ? (
); <Component {...rest} />
export const rightArrowIcon = ( ) : (
<svg className="icon" viewBox="0 0 1024 1024" version="1.1"> <span className="text-danger">没有 icon {icon}</span>
<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>
); );
}
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 './utils/tpl-lodash';
import * as utils from './utils/helper'; import * as utils from './utils/helper';
import {resizeSensor} from './utils/resize-sensor'; import {resizeSensor} from './utils/resize-sensor';
import {setIconVendor} from './renderers/Form/IconPicker-icons'; import {setIconVendor} from './renderers/Form/IconPickerIcons';
import { import {
NotFound, NotFound,

8
src/renderers/Audio.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import upperFirst = require('lodash/upperFirst'); import upperFirst = require('lodash/upperFirst');
import {Renderer, RendererProps} from '../factory'; import {Renderer, RendererProps} from '../factory';
import {autobind} from '../utils/helper'; 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 {resolveVariable} from '../utils/tpl-builtin';
import {filter} from '../utils/tpl'; import {filter} from '../utils/tpl';
@ -323,7 +323,7 @@ export class Audio extends React.Component<AudioProps, AudioState> {
<div <div
className={cx('Audio-play')} className={cx('Audio-play')}
onClick={this.handlePlaying}> onClick={this.handlePlaying}>
{playing ? pauseIcon : playIcon} {playing ? <Icon icon="pause" className="icon" /> : <Icon icon="play" className="icon" />}
</div> </div>
) )
} }
@ -370,7 +370,7 @@ export class Audio extends React.Component<AudioProps, AudioState> {
<div <div
className={cx('Audio-volumeControlIcon')} className={cx('Audio-volumeControlIcon')}
onClick={this.handleMute}> onClick={this.handleMute}>
{volume > 0 ? volumeIcon : muteIcon} {volume > 0 ? <Icon icon="volumn" className="icon" /> : <Icon icon="mute" className="icon" />}
</div> </div>
<input <input
type='range' min={0} max={1} step='any' type='range' min={0} max={1} step='any'
@ -381,7 +381,7 @@ export class Audio extends React.Component<AudioProps, AudioState> {
<div <div
className={cx('Audio-volume')} className={cx('Audio-volume')}
onMouseEnter={() => this.toggleHandleVolume(true)}> onMouseEnter={() => this.toggleHandleVolume(true)}>
{volume > 0 ? volumeIcon : muteIcon} {volume > 0 ? <Icon icon="volumn" className="icon" /> : <Icon icon="mute" className="icon" />}
</div> </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 {Renderer, RendererProps} from '../factory';
import {resolveVariable} from '../utils/tpl-builtin'; import {resolveVariable} from '../utils/tpl-builtin';
import {autobind, createObject, isObject, isArrayChilrenModified} from '../utils/helper'; import {autobind, createObject, isObject, isArrayChilrenModified} from '../utils/helper';
import {leftArrowIcon, rightArrowIcon} from '../components/icons'; import {Icon} from '../components/icons';
const animationStyles: { const animationStyles: {
[propName: string]: string; [propName: string]: string;
@ -212,8 +212,8 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
onMouseEnter={this.handleMouseEnter} onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave} onMouseLeave={this.handleMouseLeave}
> >
<div className={cx('Carousel-leftArrow')} onClick={this.prev}>{leftArrowIcon}</div> <div className={cx('Carousel-leftArrow')} onClick={this.prev}><Icon icon="left-arrow" className="icon" /></div>
<div className={cx('Carousel-rightArrow')} onClick={this.next}>{rightArrowIcon}</div> <div className={cx('Carousel-rightArrow')} onClick={this.next}><Icon icon="right-arrow" className="icon" /></div>
</div> </div>
) )
} }

8
src/renderers/Dialog.tsx
View File

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

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

@ -4,7 +4,7 @@ import matchSorter from 'match-sorter';
import keycode from "keycode"; import keycode from "keycode";
import Downshift, { StateChangeOptions } from 'downshift'; import Downshift, { StateChangeOptions } from 'downshift';
import { autobind } from '../../utils/helper'; import { autobind } from '../../utils/helper';
import { ICONS } from './IconPicker-icons'; import { ICONS } from './IconPickerIcons';
import { import {
FormItem, FormItem,
FormControlProps 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 Checkbox from '../../components/Checkbox';
import PopOver from '../../components/PopOver'; import PopOver from '../../components/PopOver';
import {RootCloseWrapper} from 'react-overlays'; import {RootCloseWrapper} from 'react-overlays';
import {closeIcon, rightArrowIcon} from '../../components/icons'; import {Icon} from '../../components/icons';
import {autobind, flattenTree, isEmpty} from '../../utils/helper'; import {autobind, flattenTree, isEmpty} from '../../utils/helper';
import {dataMapping} from '../../utils/tpl-builtin'; import {dataMapping} from '../../utils/tpl-builtin';
@ -84,7 +84,7 @@ export default class NestedSelectControl extends React.Component<NestedSelectPro
} = this.props; } = this.props;
return clearable && !disabled && (Array.isArray(value) ? value.length : value) ? 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 @autobind
@ -230,7 +230,7 @@ export default class NestedSelectControl extends React.Component<NestedSelectPro
> >
{option.label} {option.label}
</Checkbox> </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} {option.children && option.children.length ? this.renderOptions(option.children, true, cascade ? false : uncheckable || multiple && checked) : null}
</div> </div>
) )
@ -250,7 +250,7 @@ export default class NestedSelectControl extends React.Component<NestedSelectPro
onClick={this.handleOptionClick.bind(this, option)} onClick={this.handleOptionClick.bind(this, option)}
> >
<span>{option.label}</span> <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} {option.children && option.children.length ? this.renderOptions(option.children, true, false) : null}
</div> </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 findIndex = require('lodash/findIndex');
import Html from '../../components/Html'; import Html from '../../components/Html';
import { filter } from '../../utils/tpl'; import { filter } from '../../utils/tpl';
import { closeIcon } from '../../components/icons'; import { Icon } from '../../components/icons';
import {isEmpty} from '../../utils/helper'; import {isEmpty} from '../../utils/helper';
import {dataMapping} from '../../utils/tpl-builtin'; import {dataMapping} from '../../utils/tpl-builtin';
@ -324,7 +324,7 @@ export default class PickerControl extends React.PureComponent<PickerProps, any>
/> />
</div> </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> <span onClick={this.open} className={cx('Picker-btn')}></span>
</div> </div>

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

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

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

@ -9,7 +9,7 @@ import Downshift from 'downshift';
import matchSorter from 'match-sorter'; import matchSorter from 'match-sorter';
import debouce = require('lodash/debounce'); import debouce = require('lodash/debounce');
import find = require('lodash/find'); import find = require('lodash/find');
import { closeIcon } from '../../components/icons'; import { Icon } from '../../components/icons';
import { Portal } from 'react-overlays'; import { Portal } from 'react-overlays';
import { findDOMNode } from 'react-dom'; import { findDOMNode } from 'react-dom';
@ -271,7 +271,7 @@ export default class TagControl extends React.PureComponent<TagProps, TagState>
/> />
</div> </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} {loading ? <i className={cx(`TagControl-spinner`, spinnerClassName)} /> : null}
</div> </div>

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

@ -11,7 +11,7 @@ import matchSorter from 'match-sorter';
import debouce = require('lodash/debounce'); import debouce = require('lodash/debounce');
import { filter } from '../../utils/tpl'; import { filter } from '../../utils/tpl';
import find = require('lodash/find'); import find = require('lodash/find');
import { closeIcon, enterIcon } from '../../components/icons'; import { Icon } from '../../components/icons';
import { autobind, createObject } from '../../utils/helper'; import { autobind, createObject } from '../../utils/helper';
import {isEffectiveApi} from '../../utils/api'; import {isEffectiveApi} from '../../utils/api';
@ -437,7 +437,7 @@ export default class TextControl extends React.PureComponent<TextProps, TextStat
/> />
</div> </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} {loading ? <i className={cx(`TextControl-spinner`, spinnerClassName)} /> : null}
{isOpen && filtedOptions.length ? ( {isOpen && filtedOptions.length ? (
<div className={cx('TextControl-sugs')}> <div className={cx('TextControl-sugs')}>
@ -455,7 +455,7 @@ export default class TextControl extends React.PureComponent<TextProps, TextStat
key={option.value} key={option.value}
> >
{option.isNew ? ( {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> <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} onChange={this.handleNormalInputChange}
value={typeof value === 'undefined' || value === null ? '' : typeof value === 'string' ? value : JSON.stringify(value)} 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> </div>
); );
} }

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

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

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

@ -8,7 +8,7 @@ import {
OptionsControlProps, OptionsControlProps,
Option Option
} from './Options'; } from './Options';
import { closeIcon } from '../../components/icons'; import { Icon } from '../../components/icons';
import TreeSelector from '../../components/Tree'; import TreeSelector from '../../components/Tree';
import matchSorter from 'match-sorter'; import matchSorter from 'match-sorter';
import debouce = require('lodash/debounce'); import debouce = require('lodash/debounce');
@ -484,7 +484,7 @@ export default class TreeSelectControl extends React.Component<TreeSelectProps,
) : null} ) : null}
</div> </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 ? ( {loading ? (
<span className={cx('TreeSelect-spinner')}> <span className={cx('TreeSelect-spinner')}>