From 7d1368f189e9a4de51e6a9224faaaec43e421a3c Mon Sep 17 00:00:00 2001 From: 2betop <2betop.cn@gmail.com> Date: Mon, 8 Jun 2020 15:49:45 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B0=86=E4=B8=80=E4=BA=9B=20font=20icon=20?= =?UTF-8?q?=E6=94=B9=E6=88=90=20svg=20icon?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scss/_variables.scss | 13 ++----------- scss/base/_normalize.scss | 4 ++++ scss/components/_button.scss | 2 +- scss/components/_cards.scss | 5 +++-- scss/components/_dropdown.scss | 6 ++++++ scss/components/_list.scss | 7 ++++--- scss/components/_nav.scss | 15 +++++++++++---- scss/components/_pagination.scss | 4 ++-- scss/components/form/_combo.scss | 5 +++++ scss/components/form/_date.scss | 21 --------------------- src/components/DatePicker.tsx | 4 +++- src/components/DateRangePicker.tsx | 5 +---- src/components/icons.tsx | 20 ++++++++++++++++++++ src/icons/calendar.svg | 27 +++++++++++++++++++++++++++ src/icons/caret.svg | 7 +++++++ src/icons/column-filter.svg | 9 +++++++++ src/icons/copy.svg | 21 +++++++++++++++++++++ src/icons/filter.svg | 7 +++++++ src/icons/left-arrow.svg | 11 +++++++---- src/icons/location.svg | 19 ++++++++++--------- src/icons/minus.svg | 11 +++++++---- src/icons/plus.svg | 13 +++++++++---- src/icons/redo.svg | 11 +++++++---- src/icons/right-arrow.svg | 11 +++++++---- src/icons/undo.svg | 11 +++++++---- src/renderers/CRUD.tsx | 4 ++-- src/renderers/Card.tsx | 3 ++- src/renderers/Cards.tsx | 20 +++++++++++--------- src/renderers/Copyable.tsx | 9 ++++++--- src/renderers/DropDownButton.tsx | 21 +++++++++++++-------- src/renderers/Form/Combo.tsx | 15 ++++++++++----- src/renderers/Form/Date.tsx | 3 +-- src/renderers/Form/SubForm.tsx | 3 ++- src/renderers/List.tsx | 10 +++++----- src/renderers/Nav.tsx | 11 ++++++----- src/renderers/Pagination.tsx | 15 ++++++++------- src/renderers/QuickEdit.tsx | 9 ++++++--- src/renderers/Table.tsx | 16 ++++++++++------ 38 files changed, 269 insertions(+), 139 deletions(-) create mode 100644 src/icons/calendar.svg create mode 100644 src/icons/caret.svg create mode 100644 src/icons/column-filter.svg create mode 100644 src/icons/copy.svg create mode 100644 src/icons/filter.svg diff --git a/scss/_variables.scss b/scss/_variables.scss index 7f599e2a..b0cb1596 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -569,8 +569,8 @@ $QuickEdit-onFocus-borderColor: $info !default; $QuickEdit-onFocus-borderWidth: $borderWidth !default; // Copyable -$Copyable-iconColor: inherit !default; -$Copyable-onHover-iconColor: inherit !default; +$Copyable-iconColor: $icon-color !default; +$Copyable-onHover-iconColor: $icon-onHover-color !default; // PopOverAble $PopOverAble-iconColor: inherit !default; @@ -1042,15 +1042,6 @@ $DatePicker-placeholderColor: $Form-input-placeholderColor !default; $DatePicker-iconColor: $icon-color !default; $DatePicker-onHover-iconColor: $icon-onHover-color !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; $Calendar-fontSize: $fontSizeBase !default; diff --git a/scss/base/_normalize.scss b/scss/base/_normalize.scss index f8bbbf94..c8b486a7 100644 --- a/scss/base/_normalize.scss +++ b/scss/base/_normalize.scss @@ -347,3 +347,7 @@ svg.icon { position: relative; fill: currentColor; } + +svg.r90 { + transform: rotate(90deg); +} diff --git a/scss/components/_button.scss b/scss/components/_button.scss index 33df794a..3c6e5033 100644 --- a/scss/components/_button.scss +++ b/scss/components/_button.scss @@ -276,7 +276,7 @@ fieldset:disabled a.#{$ns}Button { min-width: $Button-height * $Button--iconOnly-minWidthRate; &:not(.#{$ns}Button--link) { - > svg { + > svg.icon { width: px2rem(14px); height: px2rem(14px); top: px2rem(2px); diff --git a/scss/components/_cards.scss b/scss/components/_cards.scss index 22a1ca7c..27cf3e37 100644 --- a/scss/components/_cards.scss +++ b/scss/components/_cards.scss @@ -62,7 +62,8 @@ } &-dragTip { - color: $text--loud-color; + width: 100%; + color: $info; clear: both; margin-top: $gap-xs; } @@ -130,7 +131,7 @@ .#{$ns}Cards-toolbar { display: flex; - flex-wrap: nowrap; + flex-wrap: wrap; } } diff --git a/scss/components/_dropdown.scss b/scss/components/_dropdown.scss index 648158a1..9bd6e538 100644 --- a/scss/components/_dropdown.scss +++ b/scss/components/_dropdown.scss @@ -4,6 +4,12 @@ &-caret { margin-left: $DropDown-caret-marginLeft; + + > svg { + width: px2rem(10px); + height: px2rem(10px); + top: 0.125em; + } } &--block { diff --git a/scss/components/_list.scss b/scss/components/_list.scss index 5a2533f4..2ccdc761 100644 --- a/scss/components/_list.scss +++ b/scss/components/_list.scss @@ -8,7 +8,7 @@ &-toolbar { @include clearfix(); display: flex; - flex-wrap: nowrap; + flex-wrap: wrap; padding: $List-toolbar-paddingY $List-toolbar-paddingX; } @@ -69,7 +69,8 @@ } &-dragTip { - color: $text--loud-color; + width: 100%; + color: $info; clear: both; margin-top: $gap-xs; } @@ -155,7 +156,7 @@ } &-dragBtn { - cursor: pointer; + cursor: move; float: left; margin-right: $gap-sm; } diff --git a/scss/components/_nav.scss b/scss/components/_nav.scss index 709f9cca..aa0d9a7b 100644 --- a/scss/components/_nav.scss +++ b/scss/components/_nav.scss @@ -1,8 +1,13 @@ .#{$ns}Nav { list-style: none; + user-select: none; margin: 0; padding: 0; + .#{$ns}Nav-itemIcon { + margin-right: $gap-xs; + } + &--tabs { border-bottom: $Tabs-borderWidth solid $Tabs-borderColor; @@ -46,10 +51,6 @@ border-bottom-color: $Tabs-content-bg; } } - - .#{$ns}Nav-itemIcon { - margin-right: $gap-xs; - } } &--stacked { @@ -111,6 +112,12 @@ cursor: pointer; transform: scale(0.8); transition: transform 0.3s; + + > svg { + width: 10px; + height: 10px; + top: 0; + } } .#{$ns}Nav-subItems { diff --git a/scss/components/_pagination.scss b/scss/components/_pagination.scss index 0bb3111d..4b6443d6 100644 --- a/scss/components/_pagination.scss +++ b/scss/components/_pagination.scss @@ -34,7 +34,7 @@ } } - > li.disabled { + > li.is-disabled { > span, > a { cursor: not-allowed; @@ -50,7 +50,7 @@ } } - > li.active { + > li.is-active { > a, > span, > a:hover, diff --git a/scss/components/form/_combo.scss b/scss/components/form/_combo.scss index 1f5bb50b..94937c78 100644 --- a/scss/components/form/_combo.scss +++ b/scss/components/form/_combo.scss @@ -22,6 +22,11 @@ } &-addBtn { + > svg { + width: $Combo-addBtn-fontSize; + height: $Combo-addBtn-fontSize; + } + font-size: $Combo-addBtn-fontSize; @include button-size( diff --git a/scss/components/form/_date.scss b/scss/components/form/_date.scss index 8c119797..f933a209 100644 --- a/scss/components/form/_date.scss +++ b/scss/components/form/_date.scss @@ -60,15 +60,6 @@ &:hover { 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 { @@ -303,18 +294,6 @@ 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, .rdtNext { cursor: pointer !important; diff --git a/src/components/DatePicker.tsx b/src/components/DatePicker.tsx index ac68e160..cd4a34dd 100644 --- a/src/components/DatePicker.tsx +++ b/src/components/DatePicker.tsx @@ -546,7 +546,9 @@ export class DatePicker extends React.Component { ) : null} - + + + {isOpened ? ( ; clearable?: boolean; - iconClassName?: string; minDate?: moment.Moment; maxDate?: moment.Moment; joinValues: boolean; @@ -165,7 +164,6 @@ export class DateRangePicker extends React.Component< clearable: true, delimiter: ',', ranges: 'yesterday,7daysago,prevweek,thismonth,prevmonth,prevquarter', - iconClassName: 'fa fa-calendar', resetValue: '', closeOnSelect: true, overlayPlacement: 'auto' @@ -525,7 +523,6 @@ export class DateRangePicker extends React.Component< timeFormat, ranges, disabled, - iconClassName, locale, overlayPlacement } = this.props; @@ -583,7 +580,7 @@ export class DateRangePicker extends React.Component< ) : null} - + {isOpened ? ( diff --git a/src/components/icons.tsx b/src/components/icons.tsx index d8968b44..1f615410 100644 --- a/src/components/icons.tsx +++ b/src/components/icons.tsx @@ -75,6 +75,21 @@ import ExchangeIcon from '../icons/exchange.svg'; // @ts-ignore 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 export const closeIcon = ; @@ -141,6 +156,11 @@ registerIcon('drag-bar', DragBarIcon); registerIcon('reload', ReloadIcon); registerIcon('exchange', ExchangeIcon); registerIcon('columns', ColmunsIcon); +registerIcon('calendar', CalendarIcon); +registerIcon('copy', CopyIcon); +registerIcon('filter', FilterIcon); +registerIcon('column-filter', ColumnFilterIcon); +registerIcon('caret', CaretIcon); export function Icon({ icon, diff --git a/src/icons/calendar.svg b/src/icons/calendar.svg new file mode 100644 index 00000000..d4460064 --- /dev/null +++ b/src/icons/calendar.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/icons/caret.svg b/src/icons/caret.svg new file mode 100644 index 00000000..4201d7ed --- /dev/null +++ b/src/icons/caret.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/icons/column-filter.svg b/src/icons/column-filter.svg new file mode 100644 index 00000000..0b749094 --- /dev/null +++ b/src/icons/column-filter.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/icons/copy.svg b/src/icons/copy.svg new file mode 100644 index 00000000..ae7dd00b --- /dev/null +++ b/src/icons/copy.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/icons/filter.svg b/src/icons/filter.svg new file mode 100644 index 00000000..b934d7e6 --- /dev/null +++ b/src/icons/filter.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/icons/left-arrow.svg b/src/icons/left-arrow.svg index 1fc19820..71eb7038 100644 --- a/src/icons/left-arrow.svg +++ b/src/icons/left-arrow.svg @@ -1,4 +1,7 @@ - - - \ No newline at end of file + + + + + + + diff --git a/src/icons/location.svg b/src/icons/location.svg index 88b0730c..d2289b0b 100644 --- a/src/icons/location.svg +++ b/src/icons/location.svg @@ -1,9 +1,10 @@ - - - - - - - \ No newline at end of file + + + + + + + + + diff --git a/src/icons/minus.svg b/src/icons/minus.svg index e5278cb7..624dde99 100644 --- a/src/icons/minus.svg +++ b/src/icons/minus.svg @@ -1,4 +1,7 @@ - - - \ No newline at end of file + + + + + + + diff --git a/src/icons/plus.svg b/src/icons/plus.svg index 5ebd036f..ff8f2077 100644 --- a/src/icons/plus.svg +++ b/src/icons/plus.svg @@ -1,4 +1,9 @@ - - - \ No newline at end of file + + + + + + + + + diff --git a/src/icons/redo.svg b/src/icons/redo.svg index 0db8e9a3..4e43ad4b 100644 --- a/src/icons/redo.svg +++ b/src/icons/redo.svg @@ -1,4 +1,7 @@ - - - \ No newline at end of file + + + + + + + diff --git a/src/icons/right-arrow.svg b/src/icons/right-arrow.svg index e9ddb4a8..c01f180b 100644 --- a/src/icons/right-arrow.svg +++ b/src/icons/right-arrow.svg @@ -1,4 +1,7 @@ - - - \ No newline at end of file + + + + + + + diff --git a/src/icons/undo.svg b/src/icons/undo.svg index 9549180b..4d9f3dcd 100644 --- a/src/icons/undo.svg +++ b/src/icons/undo.svg @@ -1,4 +1,7 @@ - - - \ No newline at end of file + + + + + + + diff --git a/src/renderers/CRUD.tsx b/src/renderers/CRUD.tsx index 711edbf6..747b8d95 100644 --- a/src/renderers/CRUD.tsx +++ b/src/renderers/CRUD.tsx @@ -29,6 +29,7 @@ import find from 'lodash/find'; import findIndex from 'lodash/findIndex'; import Html from '../components/Html'; import {Spinner} from '../components'; +import {Icon} from '../components/icons'; export interface CRUDProps extends RendererProps { api?: Api; @@ -1402,7 +1403,6 @@ export default class CRUD extends React.Component { this.search({page: page + 1, loadDataMode: 'load-more'}) } size="sm" - className="btn-primary" > {__('加载更多')} @@ -1426,7 +1426,7 @@ export default class CRUD extends React.Component { 'is-active': store.filterVisible })} > - + {__('筛选')} ); diff --git a/src/renderers/Card.tsx b/src/renderers/Card.tsx index 0f62f1ee..aff85b79 100644 --- a/src/renderers/Card.tsx +++ b/src/renderers/Card.tsx @@ -12,6 +12,7 @@ import QuickEdit from './QuickEdit'; import PopOver from './PopOver'; import {TableCell} from './Table'; import Copyable from './Copyable'; +import {Icon} from '../components/icons'; export interface CardProps extends RendererProps { onCheck: (item: IItem) => void; @@ -115,7 +116,7 @@ export class Card extends React.Component { if (dragging) { return (
- +
); } else if (selectable && !hideCheckToggler) { diff --git a/src/renderers/Cards.tsx b/src/renderers/Cards.tsx index 371a527f..539f0140 100644 --- a/src/renderers/Cards.tsx +++ b/src/renderers/Cards.tsx @@ -17,6 +17,7 @@ import Sortable from 'sortablejs'; import {filter} from '../utils/tpl'; import debounce from 'lodash/debounce'; import {resizeSensor} from '../utils/resize-sensor'; +import {Icon} from '../components/icons'; export interface Column { type: string; @@ -524,7 +525,7 @@ export default class Cards extends React.Component { className={cx('Button Button--xs Button--success m-l-sm')} onClick={this.handleSave} > - + 提交 @@ -544,7 +545,7 @@ export default class Cards extends React.Component { className={cx('Button Button--xs Button--success m-l-sm')} onClick={this.handleSaveOrder} > - + 提交 @@ -577,7 +578,8 @@ export default class Cards extends React.Component { showHeader, render, store, - classnames: cx + classnames: cx, + translate: __ } = this.props; if (showHeader === false) { @@ -603,7 +605,7 @@ export default class Cards extends React.Component { {child} {store.dragging ? (
- 请拖动右边的按钮进行排序 + {__('请拖动顶部的按钮进行排序')}
) : null} @@ -691,7 +693,7 @@ export default class Cards extends React.Component { } renderDragToggler() { - const {store, multiple, selectable, env} = this.props; + const {store, multiple, selectable, env, translate: __} = this.props; if (!store.draggable || store.items.length < 2) { return null; @@ -701,7 +703,7 @@ export default class Cards extends React.Component { ); } diff --git a/src/renderers/Copyable.tsx b/src/renderers/Copyable.tsx index d513263b..51e429e1 100644 --- a/src/renderers/Copyable.tsx +++ b/src/renderers/Copyable.tsx @@ -9,6 +9,7 @@ import cx from 'classnames'; import hoistNonReactStatic from 'hoist-non-react-statics'; import Button from '../components/Button'; import {filter} from '../utils/tpl'; +import {Icon} from '../components/icons'; export interface CopyableConfig {} @@ -54,12 +55,14 @@ export const HocCopyable = () => (Component: React.ComponentType): any => { className={cx(`Field--copyable`, className)} > - + > + + ); } diff --git a/src/renderers/DropDownButton.tsx b/src/renderers/DropDownButton.tsx index 270fc2a9..21da8263 100644 --- a/src/renderers/DropDownButton.tsx +++ b/src/renderers/DropDownButton.tsx @@ -6,13 +6,13 @@ import PopOver from '../components/PopOver'; import cx from 'classnames'; import {isVisible, noop} from '../utils/helper'; import {filter} from '../utils/tpl'; +import {Icon} from '../components/icons'; export interface DropDownButtonProps extends RendererProps { block?: boolean; size?: 'xs' | 'sm' | 'md' | 'lg'; align?: 'left' | 'right'; buttons?: Array; - caretIcon?: string; iconOnly?: boolean; defaultIsOpened?: boolean; closeOnOutside?: boolean; @@ -30,9 +30,7 @@ export default class DropDownButton extends React.Component< isOpened: false }; - static defaultProps = { - caretIcon: 'fa fa-angle-down' - }; + static defaultProps = {}; target: any; constructor(props: DropDownButtonProps) { @@ -48,7 +46,7 @@ export default class DropDownButton extends React.Component< if (this.props.defaultIsOpened) { this.setState({ isOpened: true - }) + }); } } @@ -154,7 +152,6 @@ export default class DropDownButton extends React.Component< primary, className, classnames: cx, - caretIcon, align, iconOnly, icon, @@ -189,9 +186,17 @@ export default class DropDownButton extends React.Component< size ? `Button--${size}` : '' )} > - {icon ? : null} + {icon ? ( + typeof icon === 'string' ? ( + + ) : ( + icon + ) + ) : null} {typeof label === 'string' ? filter(label, data) : label} - + + + {this.state.isOpened ? this.renderOuter() : null} diff --git a/src/renderers/Form/Combo.tsx b/src/renderers/Form/Combo.tsx index b9049f89..c02ab3f4 100644 --- a/src/renderers/Form/Combo.tsx +++ b/src/renderers/Form/Combo.tsx @@ -109,7 +109,7 @@ export default class ComboControl extends React.Component { draggableTip: '可拖拽排序', addButtonText: '新增', canAccessSuperData: false, - addIcon: 'fa fa-plus', + addIcon: true, dragIcon: '', deleteIcon: '', tabsMode: false, @@ -771,7 +771,11 @@ export default class ComboControl extends React.Component { 'add-button', { type: 'dropdown-button', - icon: addIcon, + icon: addIcon ? ( + + ) : ( + '' + ), label: __(addButtonText || '新增'), level: 'info', size: 'sm', @@ -793,7 +797,9 @@ export default class ComboControl extends React.Component { data-position="left" data-tooltip={__('新增一条数据')} > - {addIcon ? : null} + {addIcon ? ( + + ) : null} {__(addButtonText || '新增')} ) @@ -1121,7 +1127,6 @@ export default class ComboControl extends React.Component { 'add-button', { type: 'dropdown-button', - icon: addIcon, label: __(addButtonText || '新增'), level: 'info', size: 'sm', @@ -1145,7 +1150,7 @@ export default class ComboControl extends React.Component { data-tooltip={__('新增一条数据')} > {addIcon ? ( - + ) : null} {__(addButtonText || '新增')} diff --git a/src/renderers/Form/Date.tsx b/src/renderers/Form/Date.tsx index 52999a33..7ae6fcdd 100644 --- a/src/renderers/Form/Date.tsx +++ b/src/renderers/Form/Date.tsx @@ -38,8 +38,7 @@ export default class DateControl extends React.PureComponent< step: 1 } }, - clearable: true, - iconClassName: 'fa fa-calendar' + clearable: true }; componentWillMount() { diff --git a/src/renderers/Form/SubForm.tsx b/src/renderers/Form/SubForm.tsx index 688684e0..47da9318 100644 --- a/src/renderers/Form/SubForm.tsx +++ b/src/renderers/Form/SubForm.tsx @@ -4,6 +4,7 @@ import cx from 'classnames'; import omit from 'lodash/omit'; import pick from 'lodash/pick'; import {createObject} from '../../utils/helper'; +import {Icon} from '../../components/icons'; export interface SubFormProps extends FormControlProps { placeholder?: string; @@ -210,7 +211,7 @@ export default class SubFormControl extends React.PureComponent< disabled={disabled} data-tooltip={__('新增一条数据')} > - + {__('新增')} ]; diff --git a/src/renderers/List.tsx b/src/renderers/List.tsx index 17d51119..e1178bca 100644 --- a/src/renderers/List.tsx +++ b/src/renderers/List.tsx @@ -499,7 +499,7 @@ export default class List extends React.Component { className={cx('Button Button--xs Button--success m-l-sm')} onClick={this.handleSave} > - + 提交 @@ -519,7 +519,7 @@ export default class List extends React.Component { className={cx('Button Button--xs Button--success m-l-sm')} onClick={this.handleSaveOrder} > - + 提交 @@ -696,7 +696,7 @@ export default class List extends React.Component { store.dragging && store.clear(); }} > - + ); } diff --git a/src/renderers/Nav.tsx b/src/renderers/Nav.tsx index a1e7db96..3557e1dc 100644 --- a/src/renderers/Nav.tsx +++ b/src/renderers/Nav.tsx @@ -11,6 +11,7 @@ import {isApiOutdated, isEffectiveApi} from '../utils/api'; import {ScopedContext, IScopedContext} from '../Scoped'; import {Api} from '../types'; import {ClassNamesFn, themeable} from '../theme'; +import {Icon} from '../components/icons'; export interface Link { className?: string; @@ -44,9 +45,7 @@ export class Navigation extends React.Component< NavigationProps, NavigationState > { - static defaultProps: Partial = { - togglerClassName: 'fa fa-angle-down' - }; + static defaultProps: Partial = {}; mounted: boolean = true; constructor(props: NavigationProps) { @@ -280,10 +279,12 @@ export class Navigation extends React.Component< {link.children && link.children.length ? ( - this.toggleLink(link)} className={cx('Nav-itemToggler', togglerClassName)} - /> + > + + ) : null} {link.children && link.children.length ? ( diff --git a/src/renderers/Pagination.tsx b/src/renderers/Pagination.tsx index f7793e65..e3a34806 100644 --- a/src/renderers/Pagination.tsx +++ b/src/renderers/Pagination.tsx @@ -1,6 +1,7 @@ import React from 'react'; import {Renderer, RendererProps} from '../factory'; import {autobind} from '../utils/helper'; +import {Icon} from '../components/icons'; export interface PaginationProps extends RendererProps { activePage: number; @@ -48,7 +49,7 @@ export default class Pagination extends React.Component< @@ -133,7 +134,7 @@ export default class Pagination extends React.Component< onClick={() => onPageChange(page)} key={page} className={cx({ - active: page === activePage + 'is-active': page === activePage })} > {page} @@ -155,7 +156,7 @@ export default class Pagination extends React.Component< onClick={() => onPageChange(1)} key={1} className={cx({ - active: 1 === activePage + 'is-active': 1 === activePage })} > {1} @@ -183,7 +184,7 @@ export default class Pagination extends React.Component< onClick={() => onPageChange(items)} key={items} className={cx({ - active: items === activePage + 'is-active': items === activePage })} > {items} diff --git a/src/renderers/QuickEdit.tsx b/src/renderers/QuickEdit.tsx index f890f9cb..88b59b8c 100644 --- a/src/renderers/QuickEdit.tsx +++ b/src/renderers/QuickEdit.tsx @@ -17,6 +17,7 @@ import keycode from 'keycode'; import matches from 'dom-helpers/query/matches'; import Overlay from '../components/Overlay'; import PopOver from '../components/PopOver'; +import {Icon} from '../components/icons'; export interface QuickEditConfig {} @@ -491,11 +492,13 @@ export const HocQuickEdit = (config: Partial = {}) => ( onKeyUp={this.handleKeyUp} > - + > + + {this.state.isOpened ? this.renderPopOver() : null} ); diff --git a/src/renderers/Table.tsx b/src/renderers/Table.tsx index c7cda0b9..90b166df 100644 --- a/src/renderers/Table.tsx +++ b/src/renderers/Table.tsx @@ -983,7 +983,7 @@ export default class Table extends React.Component { className={cx('Button Button--xs Button--success m-l-sm')} onClick={this.handleSave} > - + {__('提交')} @@ -1005,7 +1005,7 @@ export default class Table extends React.Component { className={cx('Button Button--xs Button--success m-l-sm')} onClick={this.handleSaveOrder} > - + {__('提交')} @@ -2311,7 +2311,9 @@ export class HeadCellSearchDropDown extends React.Component< return ( - + + + {this.state.isOpened ? ( findDOMNode(this))} @@ -2510,7 +2512,9 @@ export class HeadCellFilterDropDown extends React.Component< return ( - + + + {isOpened ? ( findDOMNode(this))}