p96170835
/
amis
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

将一些 font icon 改成 svg icon

This commit is contained in:
2betop 2020-06-08 15:49:45 +08:00
parent 807834db20
commit 7d1368f189
38 changed files with 269 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
scss/_variables.scss
View File

@ -569,8 +569,8 @@ $QuickEdit-onFocus-borderColor: $info !default;
$QuickEdit-onFocus-borderWidth: $borderWidth !default; $QuickEdit-onFocus-borderWidth: $borderWidth !default;
// Copyable // Copyable
$Copyable-iconColor: inherit !default; $Copyable-iconColor: $icon-color !default;
$Copyable-onHover-iconColor: inherit !default; $Copyable-onHover-iconColor: $icon-onHover-color !default;
// PopOverAble // PopOverAble
$PopOverAble-iconColor: inherit !default; $PopOverAble-iconColor: inherit !default;
@ -1042,15 +1042,6 @@ $DatePicker-placeholderColor: $Form-input-placeholderColor !default;
$DatePicker-iconColor: $icon-color !default; $DatePicker-iconColor: $icon-color !default;
$DatePicker-onHover-iconColor: $icon-onHover-color !default; $DatePicker-onHover-iconColor: $icon-onHover-color !default;
$DatePicker-onFocused-borderColor: $Form-input-onFocused-borderColor !default; $DatePicker-onFocused-borderColor: $Form-input-onFocused-borderColor !default;
$DatePicker-toggler-vendor: 'FontAwesome' !default;
$DatePicker-toggler-fontSize: $Form-fontSize !default;
$DatePicker-toggler-icon: '\f073' !default;
$DatePicker-prevBtn-vendor: 'FontAwesome' !default;
$DatePicker-prevBtn-fontSize: $fontSizeMd !default;
$DatePicker-prevBtn-icon: '\f104' !default;
$DatePicker-nextBtn-vendor: 'FontAwesome' !default;
$DatePicker-nextBtn-fontSize: $fontSizeMd !default;
$DatePicker-nextBtn-icon: '\f105' !default;
$DatePicker-header-select-borderColor: #fff !default; $DatePicker-header-select-borderColor: #fff !default;
$Calendar-fontSize: $fontSizeBase !default; $Calendar-fontSize: $fontSizeBase !default;

4
scss/base/_normalize.scss
View File

@ -347,3 +347,7 @@ svg.icon {
position: relative; position: relative;
fill: currentColor; fill: currentColor;
} }
svg.r90 {
transform: rotate(90deg);
}

2
scss/components/_button.scss
View File

@ -276,7 +276,7 @@ fieldset:disabled a.#{$ns}Button {
min-width: $Button-height * $Button--iconOnly-minWidthRate; min-width: $Button-height * $Button--iconOnly-minWidthRate;
&:not(.#{$ns}Button--link) { &:not(.#{$ns}Button--link) {
> svg { > svg.icon {
width: px2rem(14px); width: px2rem(14px);
height: px2rem(14px); height: px2rem(14px);
top: px2rem(2px); top: px2rem(2px);

5
scss/components/_cards.scss
View File

@ -62,7 +62,8 @@
} }
&-dragTip { &-dragTip {
color: $text--loud-color; width: 100%;
color: $info;
clear: both; clear: both;
margin-top: $gap-xs; margin-top: $gap-xs;
} }
@ -130,7 +131,7 @@
.#{$ns}Cards-toolbar { .#{$ns}Cards-toolbar {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: wrap;
} }
} }

6
scss/components/_dropdown.scss
View File

@ -4,6 +4,12 @@
&-caret { &-caret {
margin-left: $DropDown-caret-marginLeft; margin-left: $DropDown-caret-marginLeft;
> svg {
width: px2rem(10px);
height: px2rem(10px);
top: 0.125em;
}
} }
&--block { &--block {

7
scss/components/_list.scss
View File

@ -8,7 +8,7 @@
&-toolbar { &-toolbar {
@include clearfix(); @include clearfix();
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: wrap;
padding: $List-toolbar-paddingY $List-toolbar-paddingX; padding: $List-toolbar-paddingY $List-toolbar-paddingX;
} }
@ -69,7 +69,8 @@
} }
&-dragTip { &-dragTip {
color: $text--loud-color; width: 100%;
color: $info;
clear: both; clear: both;
margin-top: $gap-xs; margin-top: $gap-xs;
} }
@ -155,7 +156,7 @@
} }
&-dragBtn { &-dragBtn {
cursor: pointer; cursor: move;
float: left; float: left;
margin-right: $gap-sm; margin-right: $gap-sm;
} }

15
scss/components/_nav.scss
View File

@ -1,8 +1,13 @@
.#{$ns}Nav { .#{$ns}Nav {
list-style: none; list-style: none;
user-select: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
.#{$ns}Nav-itemIcon {
margin-right: $gap-xs;
}
&--tabs { &--tabs {
border-bottom: $Tabs-borderWidth solid $Tabs-borderColor; border-bottom: $Tabs-borderWidth solid $Tabs-borderColor;
@ -46,10 +51,6 @@
border-bottom-color: $Tabs-content-bg; border-bottom-color: $Tabs-content-bg;
} }
} }
.#{$ns}Nav-itemIcon {
margin-right: $gap-xs;
}
} }
&--stacked { &--stacked {
@ -111,6 +112,12 @@
cursor: pointer; cursor: pointer;
transform: scale(0.8); transform: scale(0.8);
transition: transform 0.3s; transition: transform 0.3s;
> svg {
width: 10px;
height: 10px;
top: 0;
}
} }
.#{$ns}Nav-subItems { .#{$ns}Nav-subItems {

4
scss/components/_pagination.scss
View File

@ -34,7 +34,7 @@
} }
} }
> li.disabled { > li.is-disabled {
> span, > span,
> a { > a {
cursor: not-allowed; cursor: not-allowed;
@ -50,7 +50,7 @@
} }
} }
> li.active { > li.is-active {
> a, > a,
> span, > span,
> a:hover, > a:hover,

5
scss/components/form/_combo.scss
View File

@ -22,6 +22,11 @@
} }
&-addBtn { &-addBtn {
> svg {
width: $Combo-addBtn-fontSize;
height: $Combo-addBtn-fontSize;
}
font-size: $Combo-addBtn-fontSize; font-size: $Combo-addBtn-fontSize;
@include button-size( @include button-size(

21
scss/components/form/_date.scss
View File

@ -60,15 +60,6 @@
&:hover { &:hover {
color: $DatePicker-onHover-iconColor; color: $DatePicker-onHover-iconColor;
} }
&:before {
line-height: 1;
color: inherit;
content: $DatePicker-toggler-icon;
display: inline-block;
font-size: $DatePicker-toggler-fontSize;
font-family: $DatePicker-toggler-vendor;
}
} }
&-clear { &-clear {
@ -303,18 +294,6 @@
line-height: 1; line-height: 1;
} }
.rdtBtnPrev:before {
font-family: $DatePicker-prevBtn-vendor;
font-size: $DatePicker-prevBtn-fontSize;
content: $DatePicker-prevBtn-icon;
}
.rdtBtnNext:before {
font-family: $DatePicker-nextBtn-vendor;
font-size: $DatePicker-nextBtn-fontSize;
content: $DatePicker-nextBtn-icon;
}
.rdtPrev, .rdtPrev,
.rdtNext { .rdtNext {
cursor: pointer !important; cursor: pointer !important;

4
src/components/DatePicker.tsx
View File

@ -546,7 +546,9 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
</a> </a>
) : null} ) : null}
<a className={`${ns}DatePicker-toggler`} /> <a className={`${ns}DatePicker-toggler`}>
<Icon icon="calendar" className="icon" />
</a>
{isOpened ? ( {isOpened ? (
<Overlay <Overlay

5
src/components/DateRangePicker.tsx
View File

@ -27,7 +27,6 @@ export interface DateRangePickerProps extends ThemeProps, LocaleProps {
inputFormat?: string; inputFormat?: string;
ranges?: string | Array<ShortCuts>; ranges?: string | Array<ShortCuts>;
clearable?: boolean; clearable?: boolean;
iconClassName?: string;
minDate?: moment.Moment; minDate?: moment.Moment;
maxDate?: moment.Moment; maxDate?: moment.Moment;
joinValues: boolean; joinValues: boolean;
@ -165,7 +164,6 @@ export class DateRangePicker extends React.Component<
clearable: true, clearable: true,
delimiter: ',', delimiter: ',',
ranges: 'yesterday,7daysago,prevweek,thismonth,prevmonth,prevquarter', ranges: 'yesterday,7daysago,prevweek,thismonth,prevmonth,prevquarter',
iconClassName: 'fa fa-calendar',
resetValue: '', resetValue: '',
closeOnSelect: true, closeOnSelect: true,
overlayPlacement: 'auto' overlayPlacement: 'auto'
@ -525,7 +523,6 @@ export class DateRangePicker extends React.Component<
timeFormat, timeFormat,
ranges, ranges,
disabled, disabled,
iconClassName,
locale, locale,
overlayPlacement overlayPlacement
} = this.props; } = this.props;
@ -583,7 +580,7 @@ export class DateRangePicker extends React.Component<
) : null} ) : null}
<a className={`${ns}DateRangePicker-toggler`}> <a className={`${ns}DateRangePicker-toggler`}>
<i className={iconClassName} /> <Icon icon="calendar" className="icon" />
</a> </a>
{isOpened ? ( {isOpened ? (

20
src/components/icons.tsx
View File

@ -75,6 +75,21 @@ import ExchangeIcon from '../icons/exchange.svg';
// @ts-ignore // @ts-ignore
import ColmunsIcon from '../icons/columns.svg'; import ColmunsIcon from '../icons/columns.svg';
// @ts-ignore
import CalendarIcon from '../icons/calendar.svg';
// @ts-ignore
import CopyIcon from '../icons/copy.svg';
// @ts-ignore
import FilterIcon from '../icons/filter.svg';
// @ts-ignore
import CaretIcon from '../icons/caret.svg';
// @ts-ignore
import ColumnFilterIcon from '../icons/column-filter.svg';
// 兼容原来的用法，后续不直接试用。 // 兼容原来的用法，后续不直接试用。
// @ts-ignore // @ts-ignore
export const closeIcon = <CloseIcon />; export const closeIcon = <CloseIcon />;
@ -141,6 +156,11 @@ registerIcon('drag-bar', DragBarIcon);
registerIcon('reload', ReloadIcon); registerIcon('reload', ReloadIcon);
registerIcon('exchange', ExchangeIcon); registerIcon('exchange', ExchangeIcon);
registerIcon('columns', ColmunsIcon); registerIcon('columns', ColmunsIcon);
registerIcon('calendar', CalendarIcon);
registerIcon('copy', CopyIcon);
registerIcon('filter', FilterIcon);
registerIcon('column-filter', ColumnFilterIcon);
registerIcon('caret', CaretIcon);
export function Icon({ export function Icon({
icon, icon,

27
src/icons/calendar.svg Normal file
View File

@ -0,0 +1,27 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-136.000000, -8.000000)">
<path d="M159.5,0.5 L0.5,0.5 L0.5,29.5 L159.5,29.5 L159.5,0.5 Z" stroke="currentColor">
</path>
<g transform="translate(136.000000, 8.000000)" fill="currentColor" fill-rule="nonzero">
<path d="M0,14 L14,14 L14,3 L0,3 L0,14 Z M2,5 L12,5 L12,12 L2,12 L2,5 Z" id="Shape">
</path>
<rect id="Rectangle-path" x="0" y="0" width="14" height="2">
</rect>
<rect id="Rectangle-path" x="9" y="6" width="2" height="2">
</rect>
<rect id="Rectangle-path" x="9" y="9" width="2" height="2">
</rect>
<rect id="Rectangle-path" x="6" y="6" width="2" height="2">
</rect>
<rect id="Rectangle-path" x="6" y="9" width="2" height="2">
</rect>
<rect id="Rectangle-path" x="3" y="6" width="2" height="2">
</rect>
<rect id="Rectangle-path" x="3" y="9" width="2" height="2">
</rect>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

7
src/icons/caret.svg Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 150 87" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="caret-down" transform="translate(0.390625, -0.109375)" fill="currentColor" fill-rule="nonzero">
<path d="M145.321875,21.578125 L83.453125,83.446875 C78.5718769,88.3266492 70.6593731,88.3266492 65.778125,83.446875 L3.903125,21.578125 C0.653667694,18.4396941 -0.649532465,13.7921513 0.494410543,9.42178345 C1.63835355,5.05141555 5.05141555,1.63835355 9.42178345,0.494410543 C13.7921513,-0.649532465 18.4396941,0.653667694 21.578125,3.903125 L74.609375,56.934375 L127.640625,3.903125 C132.521441,-0.979417366 140.436208,-0.980816477 145.31875,3.9 C150.201292,8.78081648 150.202691,16.6955826 145.321875,21.578125 Z" id="路径">
</path>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 817 B

9
src/icons/column-filter.svg Normal file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="组件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g fill="currentColor">
<path d="M0,0 L4,4.999 L4.082,10 L8,12 L8,4.999 L12,0 L0,0 Z M5.0528196,9.05445227 L4.97933146,4.82735426 L4.97320745,4.49967969 L4.75580505,4.24311339 L2,1 L10,1 L7.24419495,4.24311339 L7.02066854,4.50640615 L7.02066854,4.84272902 L7.02066854,10 L5.0528196,9.05445227 Z" id="Page-1">
</path>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 582 B

21
src/icons/copy.svg Normal file
View File

@ -0,0 +1,21 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<polygon id="path-1" points="0 12 12 12 12 0 0 0">
</polygon>
</defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Page-1">
<polyline id="Stroke-1" stroke="currentColor" points="2.5 9.5 0.5 9.5 0.5 0.5 9.5 0.5 9.5 2.5">
</polyline>
<mask id="mask-2" fill="white">
<use xlink:href="#path-1">
</use>
</mask>
<g id="Clip-4">
</g>
<polygon id="Stroke-3" stroke="currentColor" mask="url(#mask-2)" points="2.5 11.5 11.5 11.5 11.5 2.5 2.5 2.5">
</polygon>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 703 B

7
src/icons/filter.svg Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 150 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g fill="currentColor" fill-rule="nonzero">
<path d="M58.3333334,100 L91.6666666,100 L91.6666666,83.3333334 L58.3333334,83.3333334 L58.3333334,100 L58.3333334,100 Z M0,0 L0,16.6666666 L150,16.6666666 L150,0 L0,0 Z M25,58.3333334 L125,58.3333334 L125,41.6666666 L25,41.6666666 L25,58.3333334 Z" id="形状">
</path>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 492 B

9
src/icons/left-arrow.svg
View File

@ -1,4 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" <?xml version="1.0" encoding="UTF-8"?>
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" version="1.1" p-id="1463"> <svg viewBox="0 0 577 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<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" /> <g id="left-arrow" transform="translate(-1.000000, 0.000000)" fill="currentColor" fill-rule="nonzero">
<path d="M101.211517,511.805631 L564.889594,73.082583 C581.083814,56.452218 581.083814,29.107879 564.889594,12.477515 C548.695374,-4.15285 522.393987,-4.15285 506.275618,12.477515 L12.750113,479.360302 C4.103082,488.3297 0.405338,500.295219 1.03111,511.805631 C0.386375,523.714261 4.103082,535.67978 12.750113,544.630216 L506.256655,1011.513 C522.375024,1028.16233 548.695373,1028.16233 564.870631,1011.513 C581.064851,994.427533 581.064851,967.5383 564.870631,950.907936 L101.211517,511.805631" id="路径">
</path>
</g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 603 B

After

Width:  |  Height:  |  Size: 798 B

13
src/icons/location.svg
View File

@ -1,9 +1,10 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <?xml version="1.0" standalone="no"?>
<svg t="1585402743083" class="icon" viewBox="0 0 1024 1024" version="1.1" <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
xmlns="http://www.w3.org/2000/svg" p-id="2408" <svg t="1585402743083" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2408" xmlns:xlink="http://www.w3.org/1999/xlink">
xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
<defs> <defs>
<style type="text/css"></style> <style type="text/css">
</style>
</defs> </defs>
<path d="M511.968 0c-207.84 0-376.96 169.12-376.96 376.992 0 54.208 11.104 105.984 32.96 153.888 94.24 206.24 274.976 424 328.128 485.824 3.968 4.608 9.792 7.296 15.904 7.296s11.904-2.656 15.904-7.296c53.12-61.824 233.856-279.552 328.128-485.824 21.888-47.904 32.96-99.648 32.96-153.888-0.032-207.872-169.152-376.992-376.992-376.992zM511.968 572.8c-107.968 0-195.808-87.84-195.808-195.808s87.84-195.84 195.808-195.84 195.808 87.84 195.808 195.84c0 107.968-87.84 195.808-195.808 195.808z" p-id="2409"></path> <path d="M511.968 0c-207.84 0-376.96 169.12-376.96 376.992 0 54.208 11.104 105.984 32.96 153.888 94.24 206.24 274.976 424 328.128 485.824 3.968 4.608 9.792 7.296 15.904 7.296s11.904-2.656 15.904-7.296c53.12-61.824 233.856-279.552 328.128-485.824 21.888-47.904 32.96-99.648 32.96-153.888-0.032-207.872-169.152-376.992-376.992-376.992zM511.968 572.8c-107.968 0-195.808-87.84-195.808-195.808s87.84-195.84 195.808-195.84 195.808 87.84 195.808 195.84c0 107.968-87.84 195.808-195.808 195.808z" p-id="2409">
</path>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 917 B

After

Width:  |  Height:  |  Size: 874 B

9
src/icons/minus.svg
View File

@ -1,4 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" <?xml version="1.0" encoding="UTF-8"?>
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20" version="1.1" p-id="1463"> <svg viewBox="0 0 12 2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<polygon id="path-1" points="4 10.6 4 9.4 16 9.4 16 10.6"></polygon> <g id="minus" fill="currentColor" fill-rule="nonzero">
<polygon id="path-1" points="0 1.6 0 0.4 12 0.4 12 1.6">
</polygon>
</g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 214 B

After

Width:  |  Height:  |  Size: 297 B

11
src/icons/plus.svg
View File

@ -1,4 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" <?xml version="1.0" encoding="UTF-8"?>
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20" version="1.1" p-id="1463"> <svg viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<polygon id="path-1" points="10.6 10.6 10.6 16 9.4 16 9.4 10.6 4 10.6 4 9.4 9.4 9.4 9.4 4 10.6 4 10.6 9.4 16 9.4 16 10.6"></polygon> <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="plus" fill="currentColor" fill-rule="nonzero">
<polygon id="path-1" points="6.6 6.6 6.6 12 5.4 12 5.4 6.6 0 6.6 0 5.4 5.4 5.4 5.4 0 6.6 0 6.6 5.4 12 5.4 12 6.6">
</polygon>
</g>
</g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 278 B

After

Width:  |  Height:  |  Size: 447 B

9
src/icons/redo.svg
View File

@ -1,4 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" <?xml version="1.0" encoding="UTF-8"?>
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" version="1.1" p-id="1463"> <svg viewBox="0 0 854 768" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<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" /> <g id="redo" fill="currentColor" fill-rule="nonzero">
<path d="M619,0 L588.92,30.08 L771.96,213.333333 L277.666667,213.333333 C124.499696,213.333333 0.3333335,337.499696 0.3333335,490.666667 C0.3333335,643.833637 124.499696,768 277.666667,768 L491,768 L491,725.333333 L277.666667,725.333333 C148.069828,725.324873 43.0153188,620.263506 43.0153188,490.666667 C43.0153188,361.069827 148.069828,256.00846 277.666667,256 L771.96,256 L588.706667,439.253333 L619,469.333333 L853.666667,234.666667 L619,0 Z" id="路径">
</path>
</g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 400 B

After

Width:  |  Height:  |  Size: 699 B

9
src/icons/right-arrow.svg
View File

@ -1,4 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" <?xml version="1.0" encoding="UTF-8"?>
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" version="1.1" p-id="1463"> <svg viewBox="0 0 513 1021" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<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" /> <g id="right-arrow" fill="currentColor" fill-rule="nonzero">
<path d="M56.559054,1013.77369 L512.908116,512.684524 L56.559054,12.234501 C49.4114678,2.93455912 37.6664238,-1.59188176 26.1262324,0.505948246 C14.586041,2.60377825 5.18544409,10.9741727 1.76815516,22.1946471 C-1.64913377,33.4151214 1.48980228,45.6045351 9.901516,53.778884 L424.706197,512.684524 L12.458094,969.672731 C2.45820596,982.551498 4.01297737,1000.9483 16.0324422,1011.96615 C28.0519071,1022.98399 46.5142346,1022.93619 58.476487,1011.85626 L56.559054,1013.77369 Z" id="路径">
</path>
</g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 377 B

After

Width:  |  Height:  |  Size: 737 B

9
src/icons/undo.svg
View File

@ -1,4 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" <?xml version="1.0" encoding="UTF-8"?>
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" version="1.1" p-id="1463"> <svg viewBox="0 0 854 768" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<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" /> <g id="undo" fill="currentColor" fill-rule="nonzero">
<path d="M576.333333,213.333333 L82.04,213.333333 L265.293333,30.08 L235,0 L0.333333,234.666667 L235,469.333333 L265.08,439.253333 L82.04,256 L576.333333,256 C705.930172,256.00846 810.984681,361.069827 810.984681,490.666667 C810.984681,620.263506 705.930172,725.324873 576.333333,725.333333 L363,725.333333 L363,768 L576.333333,768 C729.500304,768 853.666667,643.833637 853.666667,490.666667 C853.666667,337.499696 729.500304,213.333333 576.333333,213.333333 Z" id="路径">
</path>
</g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 407 B

After

Width:  |  Height:  |  Size: 714 B

4
src/renderers/CRUD.tsx
View File

@ -29,6 +29,7 @@ import find from 'lodash/find';
import findIndex from 'lodash/findIndex'; import findIndex from 'lodash/findIndex';
import Html from '../components/Html'; import Html from '../components/Html';
import {Spinner} from '../components'; import {Spinner} from '../components';
import {Icon} from '../components/icons';
export interface CRUDProps extends RendererProps { export interface CRUDProps extends RendererProps {
api?: Api; api?: Api;
@ -1402,7 +1403,6 @@ export default class CRUD extends React.Component<CRUDProps, any> {
this.search({page: page + 1, loadDataMode: 'load-more'}) this.search({page: page + 1, loadDataMode: 'load-more'})
} }
size="sm" size="sm"
className="btn-primary"
> >
{__('加载更多')} {__('加载更多')}
</Button> </Button>
@ -1426,7 +1426,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
'is-active': store.filterVisible 'is-active': store.filterVisible
})} })}
> >
<i className="fa fa-sliders m-r-sm" /> <Icon icon="filter" className="icon m-r-xs" />
{__('筛选')} {__('筛选')}
</button> </button>
); );

3
src/renderers/Card.tsx
View File

@ -12,6 +12,7 @@ import QuickEdit from './QuickEdit';
import PopOver from './PopOver'; import PopOver from './PopOver';
import {TableCell} from './Table'; import {TableCell} from './Table';
import Copyable from './Copyable'; import Copyable from './Copyable';
import {Icon} from '../components/icons';
export interface CardProps extends RendererProps { export interface CardProps extends RendererProps {
onCheck: (item: IItem) => void; onCheck: (item: IItem) => void;
@ -115,7 +116,7 @@ export class Card extends React.Component<CardProps> {
if (dragging) { if (dragging) {
return ( return (
<div className={cx('Card-dragBtn')}> <div className={cx('Card-dragBtn')}>
<i className="fa fa-exchange" /> <Icon icon="drag-bar" className="icon" />
</div> </div>
); );
} else if (selectable && !hideCheckToggler) { } else if (selectable && !hideCheckToggler) {

20
src/renderers/Cards.tsx
View File

@ -17,6 +17,7 @@ import Sortable from 'sortablejs';
import {filter} from '../utils/tpl'; import {filter} from '../utils/tpl';
import debounce from 'lodash/debounce'; import debounce from 'lodash/debounce';
import {resizeSensor} from '../utils/resize-sensor'; import {resizeSensor} from '../utils/resize-sensor';
import {Icon} from '../components/icons';
export interface Column { export interface Column {
type: string; type: string;
@ -524,7 +525,7 @@ export default class Cards extends React.Component<GridProps, object> {
className={cx('Button Button--xs Button--success m-l-sm')} className={cx('Button Button--xs Button--success m-l-sm')}
onClick={this.handleSave} onClick={this.handleSave}
> >
<i className="fa fa-check m-r-xs" /> <Icon icon="check" className="icon m-r-xs" />
提交 提交
</button> </button>
<button <button
@ -532,7 +533,7 @@ export default class Cards extends React.Component<GridProps, object> {
className={cx('Button Button--xs Button--danger m-l-sm')} className={cx('Button Button--xs Button--danger m-l-sm')}
onClick={this.reset} onClick={this.reset}
> >
<i className="fa fa-times m-r-xs" /> <Icon icon="close" className="icon m-r-xs" />
放弃 放弃
</button> </button>
</span> </span>
@ -544,7 +545,7 @@ export default class Cards extends React.Component<GridProps, object> {
className={cx('Button Button--xs Button--success m-l-sm')} className={cx('Button Button--xs Button--success m-l-sm')}
onClick={this.handleSaveOrder} onClick={this.handleSaveOrder}
> >
<i className="fa fa-check m-r-xs" /> <Icon icon="check" className="icon m-r-xs" />
提交 提交
</button> </button>
<button <button
@ -552,7 +553,7 @@ export default class Cards extends React.Component<GridProps, object> {
className={cx('Button Button--xs Button--danger m-l-sm')} className={cx('Button Button--xs Button--danger m-l-sm')}
onClick={this.reset} onClick={this.reset}
> >
<i className="fa fa-times m-r-xs" /> <Icon icon="close" className="icon m-r-xs" />
放弃 放弃
</button> </button>
</span> </span>
@ -577,7 +578,8 @@ export default class Cards extends React.Component<GridProps, object> {
showHeader, showHeader,
render, render,
store, store,
classnames: cx classnames: cx,
translate: __
} = this.props; } = this.props;
if (showHeader === false) { if (showHeader === false) {
@ -603,7 +605,7 @@ export default class Cards extends React.Component<GridProps, object> {
{child} {child}
{store.dragging ? ( {store.dragging ? (
<div className={cx('Cards-dragTip')} ref={this.dragTipRef}> <div className={cx('Cards-dragTip')} ref={this.dragTipRef}>
请拖动右边的按钮进行排序 {__('请拖动顶部的按钮进行排序')}
</div> </div>
) : null} ) : null}
</div> </div>
@ -691,7 +693,7 @@ export default class Cards extends React.Component<GridProps, object> {
} }
renderDragToggler() { renderDragToggler() {
const {store, multiple, selectable, env} = this.props; const {store, multiple, selectable, env, translate: __} = this.props;
if (!store.draggable || store.items.length < 2) { if (!store.draggable || store.items.length < 2) {
return null; return null;
@ -701,7 +703,7 @@ export default class Cards extends React.Component<GridProps, object> {
<Button <Button
iconOnly iconOnly
key="dragging-toggle" key="dragging-toggle"
tooltip="对卡片进行排序操作" tooltip={__('对卡片进行排序操作')}
tooltipContainer={ tooltipContainer={
env && env.getModalContainer ? env.getModalContainer : undefined env && env.getModalContainer ? env.getModalContainer : undefined
} }
@ -713,7 +715,7 @@ export default class Cards extends React.Component<GridProps, object> {
store.dragging && store.clear(); store.dragging && store.clear();
}} }}
> >
<i className="fa fa-exchange" /> <Icon icon="exchange" className="icon r90" />
</Button> </Button>
); );
} }

9
src/renderers/Copyable.tsx
View File

@ -9,6 +9,7 @@ import cx from 'classnames';
import hoistNonReactStatic from 'hoist-non-react-statics'; import hoistNonReactStatic from 'hoist-non-react-statics';
import Button from '../components/Button'; import Button from '../components/Button';
import {filter} from '../utils/tpl'; import {filter} from '../utils/tpl';
import {Icon} from '../components/icons';
export interface CopyableConfig {} export interface CopyableConfig {}
@ -54,12 +55,14 @@ export const HocCopyable = () => (Component: React.ComponentType<any>): any => {
className={cx(`Field--copyable`, className)} className={cx(`Field--copyable`, className)}
> >
<Component {...this.props} wrapperComponent={''} noHoc /> <Component {...this.props} wrapperComponent={''} noHoc />
<i <a
key="edit-btn" key="edit-btn"
data-tooltip={__('点击复制')} data-tooltip={__('点击复制')}
className={cx('Field-copyBtn fa fa-clipboard')} className={cx('Field-copyBtn')}
onClick={this.handleClick.bind(this, content)} onClick={this.handleClick.bind(this, content)}
/> >
<Icon icon="copy" className="icon" />
</a>
</Component> </Component>
); );
} }

21
src/renderers/DropDownButton.tsx
View File

@ -6,13 +6,13 @@ import PopOver from '../components/PopOver';
import cx from 'classnames'; import cx from 'classnames';
import {isVisible, noop} from '../utils/helper'; import {isVisible, noop} from '../utils/helper';
import {filter} from '../utils/tpl'; import {filter} from '../utils/tpl';
import {Icon} from '../components/icons';
export interface DropDownButtonProps extends RendererProps { export interface DropDownButtonProps extends RendererProps {
block?: boolean; block?: boolean;
size?: 'xs' | 'sm' | 'md' | 'lg'; size?: 'xs' | 'sm' | 'md' | 'lg';
align?: 'left' | 'right'; align?: 'left' | 'right';
buttons?: Array<any>; buttons?: Array<any>;
caretIcon?: string;
iconOnly?: boolean; iconOnly?: boolean;
defaultIsOpened?: boolean; defaultIsOpened?: boolean;
closeOnOutside?: boolean; closeOnOutside?: boolean;
@ -30,9 +30,7 @@ export default class DropDownButton extends React.Component<
isOpened: false isOpened: false
}; };
static defaultProps = { static defaultProps = {};
caretIcon: 'fa fa-angle-down'
};
target: any; target: any;
constructor(props: DropDownButtonProps) { constructor(props: DropDownButtonProps) {
@ -48,7 +46,7 @@ export default class DropDownButton extends React.Component<
if (this.props.defaultIsOpened) { if (this.props.defaultIsOpened) {
this.setState({ this.setState({
isOpened: true isOpened: true
}) });
} }
} }
@ -154,7 +152,6 @@ export default class DropDownButton extends React.Component<
primary, primary,
className, className,
classnames: cx, classnames: cx,
caretIcon,
align, align,
iconOnly, iconOnly,
icon, icon,
@ -189,9 +186,17 @@ export default class DropDownButton extends React.Component<
size ? `Button--${size}` : '' size ? `Button--${size}` : ''
)} )}
> >
{icon ? <i className={cx(icon, 'm-r-xs')} /> : null} {icon ? (
typeof icon === 'string' ? (
<i className={cx(icon, 'm-r-xs')} />
) : (
icon
)
) : null}
{typeof label === 'string' ? filter(label, data) : label} {typeof label === 'string' ? filter(label, data) : label}
<i className={cx('DropDown-caret', caretIcon)} /> <span className={cx('DropDown-caret')}>
<Icon icon="caret" className="icon" />
</span>
</button> </button>
{this.state.isOpened ? this.renderOuter() : null} {this.state.isOpened ? this.renderOuter() : null}

15
src/renderers/Form/Combo.tsx
View File

@ -109,7 +109,7 @@ export default class ComboControl extends React.Component<ComboProps> {
draggableTip: '可拖拽排序', draggableTip: '可拖拽排序',
addButtonText: '新增', addButtonText: '新增',
canAccessSuperData: false, canAccessSuperData: false,
addIcon: 'fa fa-plus', addIcon: true,
dragIcon: '', dragIcon: '',
deleteIcon: '', deleteIcon: '',
tabsMode: false, tabsMode: false,
@ -771,7 +771,11 @@ export default class ComboControl extends React.Component<ComboProps> {
'add-button', 'add-button',
{ {
type: 'dropdown-button', type: 'dropdown-button',
icon: addIcon, icon: addIcon ? (
<Icon icon="plus" className="icon m-r-xs" />
) : (
''
),
label: __(addButtonText || '新增'), label: __(addButtonText || '新增'),
level: 'info', level: 'info',
size: 'sm', size: 'sm',
@ -793,7 +797,9 @@ export default class ComboControl extends React.Component<ComboProps> {
data-position="left" data-position="left"
data-tooltip={__('新增一条数据')} data-tooltip={__('新增一条数据')}
> >
{addIcon ? <i className={cx('m-r-xs', addIcon)} /> : null} {addIcon ? (
<Icon icon="plus" className="icon m-r-xs" />
) : null}
<span>{__(addButtonText || '新增')}</span> <span>{__(addButtonText || '新增')}</span>
</a> </a>
) )
@ -1121,7 +1127,6 @@ export default class ComboControl extends React.Component<ComboProps> {
'add-button', 'add-button',
{ {
type: 'dropdown-button', type: 'dropdown-button',
icon: addIcon,
label: __(addButtonText || '新增'), label: __(addButtonText || '新增'),
level: 'info', level: 'info',
size: 'sm', size: 'sm',
@ -1145,7 +1150,7 @@ export default class ComboControl extends React.Component<ComboProps> {
data-tooltip={__('新增一条数据')} data-tooltip={__('新增一条数据')}
> >
{addIcon ? ( {addIcon ? (
<i className={cx('Button-icon', addIcon)} /> <Icon icon="plus" className="icon m-r-xs" />
) : null} ) : null}
<span>{__(addButtonText || '新增')}</span> <span>{__(addButtonText || '新增')}</span>
</button> </button>

3
src/renderers/Form/Date.tsx
View File

@ -38,8 +38,7 @@ export default class DateControl extends React.PureComponent<
step: 1 step: 1
} }
}, },
clearable: true, clearable: true
iconClassName: 'fa fa-calendar'
}; };
componentWillMount() { componentWillMount() {

3
src/renderers/Form/SubForm.tsx
View File

@ -4,6 +4,7 @@ import cx from 'classnames';
import omit from 'lodash/omit'; import omit from 'lodash/omit';
import pick from 'lodash/pick'; import pick from 'lodash/pick';
import {createObject} from '../../utils/helper'; import {createObject} from '../../utils/helper';
import {Icon} from '../../components/icons';
export interface SubFormProps extends FormControlProps { export interface SubFormProps extends FormControlProps {
placeholder?: string; placeholder?: string;
@ -210,7 +211,7 @@ export default class SubFormControl extends React.PureComponent<
disabled={disabled} disabled={disabled}
data-tooltip={__('新增一条数据')} data-tooltip={__('新增一条数据')}
> >
<i className="fa fa-plus m-r-xs" /> <Icon icon="plus" className="icon m-r-xs" />
<span>{__('新增')}</span> <span>{__('新增')}</span>
</button> </button>
]; ];

10
src/renderers/List.tsx
View File

@ -499,7 +499,7 @@ export default class List extends React.Component<ListProps, object> {
className={cx('Button Button--xs Button--success m-l-sm')} className={cx('Button Button--xs Button--success m-l-sm')}
onClick={this.handleSave} onClick={this.handleSave}
> >
<i className="fa fa-check m-r-xs" /> <Icon icon="check" className="icon m-r-xs" />
提交 提交
</button> </button>
<button <button
@ -507,7 +507,7 @@ export default class List extends React.Component<ListProps, object> {
className={cx('Button Button--xs Button--danger m-l-sm')} className={cx('Button Button--xs Button--danger m-l-sm')}
onClick={this.reset} onClick={this.reset}
> >
<i className="fa fa-times m-r-xs" /> <Icon icon="close" className="icon m-r-xs" />
放弃 放弃
</button> </button>
</span> </span>
@ -519,7 +519,7 @@ export default class List extends React.Component<ListProps, object> {
className={cx('Button Button--xs Button--success m-l-sm')} className={cx('Button Button--xs Button--success m-l-sm')}
onClick={this.handleSaveOrder} onClick={this.handleSaveOrder}
> >
<i className="fa fa-check m-r-xs" /> <Icon icon="check" className="icon m-r-xs" />
提交 提交
</button> </button>
<button <button
@ -527,7 +527,7 @@ export default class List extends React.Component<ListProps, object> {
className={cx('Button Button--xs Button--danger m-l-sm')} className={cx('Button Button--xs Button--danger m-l-sm')}
onClick={this.reset} onClick={this.reset}
> >
<i className="fa fa-times m-r-xs" /> <Icon icon="close" className="icon m-r-xs" />
放弃 放弃
</button> </button>
</span> </span>
@ -696,7 +696,7 @@ export default class List extends React.Component<ListProps, object> {
store.dragging && store.clear(); store.dragging && store.clear();
}} }}
> >
<i className="fa fa-exchange" /> <Icon icon="exchange" className="icon r90" />
</Button> </Button>
); );
} }

11
src/renderers/Nav.tsx
View File

@ -11,6 +11,7 @@ import {isApiOutdated, isEffectiveApi} from '../utils/api';
import {ScopedContext, IScopedContext} from '../Scoped'; import {ScopedContext, IScopedContext} from '../Scoped';
import {Api} from '../types'; import {Api} from '../types';
import {ClassNamesFn, themeable} from '../theme'; import {ClassNamesFn, themeable} from '../theme';
import {Icon} from '../components/icons';
export interface Link { export interface Link {
className?: string; className?: string;
@ -44,9 +45,7 @@ export class Navigation extends React.Component<
NavigationProps, NavigationProps,
NavigationState NavigationState
> { > {
static defaultProps: Partial<NavigationProps> = { static defaultProps: Partial<NavigationProps> = {};
togglerClassName: 'fa fa-angle-down'
};
mounted: boolean = true; mounted: boolean = true;
constructor(props: NavigationProps) { constructor(props: NavigationProps) {
@ -280,10 +279,12 @@ export class Navigation extends React.Component<
</a> </a>
{link.children && link.children.length ? ( {link.children && link.children.length ? (
<i <span
onClick={() => this.toggleLink(link)} onClick={() => this.toggleLink(link)}
className={cx('Nav-itemToggler', togglerClassName)} className={cx('Nav-itemToggler', togglerClassName)}
/> >
<Icon icon="caret" className="icon" />
</span>
) : null} ) : null}
{link.children && link.children.length ? ( {link.children && link.children.length ? (

15
src/renderers/Pagination.tsx
View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import {Renderer, RendererProps} from '../factory'; import {Renderer, RendererProps} from '../factory';
import {autobind} from '../utils/helper'; import {autobind} from '../utils/helper';
import {Icon} from '../components/icons';
export interface PaginationProps extends RendererProps { export interface PaginationProps extends RendererProps {
activePage: number; activePage: number;
@ -48,7 +49,7 @@ export default class Pagination extends React.Component<
<ul className={cx('Pagination', 'Pagination--sm')}> <ul className={cx('Pagination', 'Pagination--sm')}>
<li <li
className={cx({ className={cx({
disabled: activePage < 2 'is-disabled': activePage < 2
})} })}
onClick={ onClick={
activePage < 2 activePage < 2
@ -57,12 +58,12 @@ export default class Pagination extends React.Component<
} }
> >
<a> <a>
<i className="fa fa-chevron-left" /> <Icon icon="left-arrow" className="icon" />
</a> </a>
</li> </li>
<li <li
className={cx({ className={cx({
disabled: !hasNext 'is-disabled': !hasNext
})} })}
onClick={ onClick={
!hasNext !hasNext
@ -71,7 +72,7 @@ export default class Pagination extends React.Component<
} }
> >
<a> <a>
<i className="fa fa-chevron-right" /> <Icon icon="right-arrow" className="icon" />
</a> </a>
</li> </li>
</ul> </ul>
@ -133,7 +134,7 @@ export default class Pagination extends React.Component<
onClick={() => onPageChange(page)} onClick={() => onPageChange(page)}
key={page} key={page}
className={cx({ className={cx({
active: page === activePage 'is-active': page === activePage
})} })}
> >
<a role="button">{page}</a> <a role="button">{page}</a>
@ -155,7 +156,7 @@ export default class Pagination extends React.Component<
onClick={() => onPageChange(1)} onClick={() => onPageChange(1)}
key={1} key={1}
className={cx({ className={cx({
active: 1 === activePage 'is-active': 1 === activePage
})} })}
> >
<a role="button">{1}</a> <a role="button">{1}</a>
@ -183,7 +184,7 @@ export default class Pagination extends React.Component<
onClick={() => onPageChange(items)} onClick={() => onPageChange(items)}
key={items} key={items}
className={cx({ className={cx({
active: items === activePage 'is-active': items === activePage
})} })}
> >
<a role="button">{items}</a> <a role="button">{items}</a>

9
src/renderers/QuickEdit.tsx
View File

@ -17,6 +17,7 @@ import keycode from 'keycode';
import matches from 'dom-helpers/query/matches'; import matches from 'dom-helpers/query/matches';
import Overlay from '../components/Overlay'; import Overlay from '../components/Overlay';
import PopOver from '../components/PopOver'; import PopOver from '../components/PopOver';
import {Icon} from '../components/icons';
export interface QuickEditConfig {} export interface QuickEditConfig {}
@ -491,11 +492,13 @@ export const HocQuickEdit = (config: Partial<QuickEditConfig> = {}) => (
onKeyUp={this.handleKeyUp} onKeyUp={this.handleKeyUp}
> >
<Component {...this.props} wrapperComponent={''} noHoc /> <Component {...this.props} wrapperComponent={''} noHoc />
<i <span
key="edit-btn" key="edit-btn"
className={cx('Field-quickEditBtn fa fa-edit')} className={cx('Field-quickEditBtn')}
onClick={this.openQuickEdit} onClick={this.openQuickEdit}
/> >
<Icon icon="pencil" className="icon" />
</span>
{this.state.isOpened ? this.renderPopOver() : null} {this.state.isOpened ? this.renderPopOver() : null}
</Component> </Component>
); );

16
src/renderers/Table.tsx
View File

@ -983,7 +983,7 @@ export default class Table extends React.Component<TableProps, object> {
className={cx('Button Button--xs Button--success m-l-sm')} className={cx('Button Button--xs Button--success m-l-sm')}
onClick={this.handleSave} onClick={this.handleSave}
> >
<i className="fa fa-check m-r-xs" /> <Icon icon="check" className="icon m-r-xs" />
{__('提交')} {__('提交')}
</button> </button>
<button <button
@ -991,7 +991,7 @@ export default class Table extends React.Component<TableProps, object> {
className={cx('Button Button--xs Button--danger m-l-sm')} className={cx('Button Button--xs Button--danger m-l-sm')}
onClick={this.reset} onClick={this.reset}
> >
<i className="fa fa-times m-r-xs" /> <Icon icon="close" className="icon m-r-xs" />
{__('放弃')} {__('放弃')}
</button> </button>
</span> </span>
@ -1005,7 +1005,7 @@ export default class Table extends React.Component<TableProps, object> {
className={cx('Button Button--xs Button--success m-l-sm')} className={cx('Button Button--xs Button--success m-l-sm')}
onClick={this.handleSaveOrder} onClick={this.handleSaveOrder}
> >
<i className="fa fa-check m-r-xs" /> <Icon icon="check" className="icon m-r-xs" />
{__('提交')} {__('提交')}
</button> </button>
<button <button
@ -1013,7 +1013,7 @@ export default class Table extends React.Component<TableProps, object> {
className={cx('Button Button--xs Button--danger m-l-sm')} className={cx('Button Button--xs Button--danger m-l-sm')}
onClick={this.reset} onClick={this.reset}
> >
<i className="fa fa-times m-r-xs" /> <Icon icon="close" className="icon m-r-xs" />
{__('放弃')} {__('放弃')}
</button> </button>
</span> </span>
@ -2311,7 +2311,9 @@ export class HeadCellSearchDropDown extends React.Component<
return ( return (
<span className={cx(`${ns}TableCell-searchBtn`)}> <span className={cx(`${ns}TableCell-searchBtn`)}>
<i className="fa fa-search" onClick={this.open} /> <span onClick={this.open}>
<Icon icon="search" className="icon" />
</span>
{this.state.isOpened ? ( {this.state.isOpened ? (
<Overlay <Overlay
container={popOverContainer || (() => findDOMNode(this))} container={popOverContainer || (() => findDOMNode(this))}
@ -2510,7 +2512,9 @@ export class HeadCellFilterDropDown extends React.Component<
return ( return (
<span className={cx(`${ns}TableCell-filterBtn`)}> <span className={cx(`${ns}TableCell-filterBtn`)}>
<i className="fa fa-filter" onClick={this.open} /> <span onClick={this.open}>
<Icon icon="column-filter" className="icon" />
</span>
{isOpened ? ( {isOpened ? (
<Overlay <Overlay
container={popOverContainer || (() => findDOMNode(this))} container={popOverContainer || (() => findDOMNode(this))}