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

改成 svg icon

This commit is contained in:
2betop 2020-06-08 16:53:52 +08:00
parent 9a039e59db
commit ccf5c646ce
13 changed files with 102 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
scss/components/_spinner.scss
View File

@ -58,6 +58,13 @@
}
transition: ease-out all 0.3s;
&--icon {
background: transparent;
animation: spin 2s linear infinite;
width: auto;
height: auto;
}
}
// 当启用 overlay 的时候，应该是居中模式。

5
scss/components/_status.scss
View File

@ -34,6 +34,11 @@
}
}
svg.#{$ns}Status-icon {
width: 16px;
height: 16px;
}
.#{$ns}Status-icon {
&--danger,
&--primary,

5
scss/components/_table.scss
View File

@ -741,4 +741,9 @@
> .#{$ns}Button--disabled-wrap > .#{$ns}Button {
margin: px2rem(3px);
}
> .#{$ns}Button--link {
padding: 0;
margin-right: px2rem(10px);
}
}

11
src/components/Select.tsx
View File

@ -24,6 +24,7 @@ import Checkbox from './Checkbox';
import Input from './Input';
import {Api} from '../types';
import {LocaleProps, localeable} from '../locale';
import Spinner from './Spinner';
export interface Option {
label?: string;
@ -330,7 +331,6 @@ export class Select extends React.Component<SelectProps, SelectState> {
placeholder: '请选择',
valueField: 'value',
labelField: 'label',
spinnerClassName: 'fa fa-spinner fa-spin fa-1x fa-fw',
inline: false,
disabled: false,
checkAll: false,
@ -871,7 +871,6 @@ export class Select extends React.Component<SelectProps, SelectState> {
className,
value,
loading,
spinnerClassName,
clearable,
labelField,
disabled,
@ -927,9 +926,11 @@ export class Select extends React.Component<SelectProps, SelectState> {
</a>
) : null}
{loading ? (
<span className={cx('Select-spinner')}>
<i className={spinnerClassName} />
</span>
<Spinner
show
icon="reload"
spinnerClassName={cx('Select-spinner')}
/>
) : null}
<span className={cx('Select-arrow')} />

25
src/components/Spinner.tsx
View File

@ -6,8 +6,9 @@
*/
import React from 'react';
import {ClassNamesFn, themeable} from '../theme';
import {themeable, ThemeProps} from '../theme';
import Transition, {ENTERED, ENTERING} from 'react-transition-group/Transition';
import {Icon} from './icons';
const fadeStyles: {
[propName: string]: string;
@ -16,25 +17,21 @@ const fadeStyles: {
[ENTERED]: 'in'
};
interface SpinnerProps {
interface SpinnerProps extends ThemeProps {
overlay: boolean;
spinnerClassName: string;
mode: string;
size: 'sm' | 'lg' | '';
classPrefix: string;
classnames: ClassNamesFn;
show: boolean;
icon?: string;
}
export class Spinner extends React.Component<SpinnerProps, object> {
static defaultProps: Pick<
SpinnerProps,
'overlay' | 'spinnerClassName' | 'size' | 'mode' | 'show'
> = {
static defaultProps = {
overlay: false,
spinnerClassName: '',
mode: '',
size: '',
size: '' as '',
show: true
};
@ -48,7 +45,8 @@ export class Spinner extends React.Component<SpinnerProps, object> {
spinnerClassName,
mode,
size,
overlay
overlay,
icon
} = this.props;
return (
<Transition mountOnEnter unmountOnExit in={show} timeout={350}>
@ -75,9 +73,12 @@ export class Spinner extends React.Component<SpinnerProps, object> {
className={cx(`Spinner`, spinnerClassName, fadeStyles[status], {
[`Spinner--${mode}`]: mode,
[`Spinner--overlay`]: overlay,
[`Spinner--${size}`]: size
[`Spinner--${size}`]: size,
[`Spinner--icon`]: icon
})}
/>
>
{icon ? <Icon icon={icon} className="icon" /> : null}
</div>
</>
);
}}

1
src/components/icons.tsx
View File

@ -143,6 +143,7 @@ registerIcon('prev', LeftArrowIcon);
registerIcon('next', RightArrowIcon);
registerIcon('check', CheckIcon);
registerIcon('plus', PlusIcon);
registerIcon('add', PlusIcon);
registerIcon('minus', MinusIcon);
registerIcon('pencil', PencilIcon);
registerIcon('view', ViewIcon);

10
src/icons/pencil.svg
View File

@ -1,4 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" version="1.1" p-id="1463">
<path d="M11.496,1.834 L14.168,4.506 C14.48,4.818 14.48,5.322 14.168,5.634 L11.904,7.898 L5.4,14.402 L1.6,14.402 L1.6,10.602 L8.848,3.354 L8.848,3.354 L10.368,1.834 C10.68,1.522 11.184,1.522 11.496,1.834 Z M8.67,4.663 L2.4,10.9333708 L2.4,13.602 L5.06862915,13.602 L11.338,7.331 L8.67,4.663 Z M10.932,2.40137085 L9.23537085,4.098 L11.904,6.76662915 L13.6006292,5.07 L10.932,2.40137085 Z M8,13.6 L12.8,13.6 L12.8,14.4 L8,14.4 L8,13.6 Z" id="path-1"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" version="1.1">
<g fill="currentColor" fill-rule="nonzero">
<path d="M11.496,1.834 L14.168,4.506 C14.48,4.818 14.48,5.322 14.168,5.634 L11.904,7.898 L5.4,14.402 L1.6,14.402 L1.6,10.602 L8.848,3.354 L8.848,3.354 L10.368,1.834 C10.68,1.522 11.184,1.522 11.496,1.834 Z M8.67,4.663 L2.4,10.9333708 L2.4,13.602 L5.06862915,13.602 L11.338,7.331 L8.67,4.663 Z M10.932,2.40137085 L9.23537085,4.098 L11.904,6.76662915 L13.6006292,5.07 L10.932,2.40137085 Z M8,13.6 L12.8,13.6 L12.8,14.4 L8,14.4 L8,13.6 Z">
</path>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 601 B

After

Width:  |  Height:  |  Size: 625 B

7
src/renderers/Chart.tsx
View File

@ -11,6 +11,7 @@ import {resolveVariableAndFilter, isPureVariable} from '../utils/tpl-builtin';
import {isApiOutdated, isEffectiveApi} from '../utils/api';
import {ScopedContext, IScopedContext} from '../Scoped';
import {createObject} from '../utils/helper';
import Spinner from '../components/Spinner';
export interface ChartProps extends RendererProps {
chartRef?: (echart: any) => void;
@ -238,7 +239,11 @@ export class Chart extends React.Component<ChartProps> {
placeholder={
<div className={cx(`${ns}Chart`, className)} style={style}>
<div className={`${ns}Chart-placeholder`}>
<i key="loading" className="fa fa-spinner fa-spin fa-2x fa-fw" />
<Spinner
show
icon="reload"
spinnerClassName={cx('Chart-spinner')}
/>
</div>
</div>
}

23
src/renderers/Form/Table.tsx
View File

@ -11,6 +11,7 @@ import {dataMapping} from '../../utils/tpl-builtin';
import findIndex from 'lodash/findIndex';
import memoize from 'lodash/memoize';
import {SimpleMap} from '../../utils/SimpleMap';
import {Icon} from '../../components/icons';
export interface TableProps extends FormControlProps {
placeholder?: string;
@ -48,11 +49,11 @@ export default class FormTable extends React.Component<TableProps, TableState> {
static defaultProps = {
placeholder: '空',
scaffold: {},
addBtnIcon: 'fa fa-plus',
updateBtnIcon: 'fa fa-pencil',
deleteBtnIcon: 'fa fa-minus',
confirmBtnIcon: 'fa fa-check',
cancelBtnIcon: 'fa fa-times',
addBtnIcon: 'plus',
updateBtnIcon: 'pencil',
deleteBtnIcon: 'minus',
confirmBtnIcon: 'check',
cancelBtnIcon: 'close',
valueField: ''
};
@ -376,7 +377,9 @@ export default class FormTable extends React.Component<TableProps, TableState> {
onClick={this.addItem.bind(this, rowIndex, undefined)}
>
{props.addBtnLabel ? <span>{props.addBtnLabel}</span> : null}
{props.addBtnIcon ? <i className={props.addBtnIcon} /> : null}
{props.addBtnIcon ? (
<Icon icon={props.addBtnIcon} className="icon" />
) : null}
</Button>
)
});
@ -428,7 +431,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
<span>{props.updateBtnLabel}</span>
) : null}
{props.updateBtnIcon ? (
<i className={props.updateBtnIcon} />
<Icon icon={props.updateBtnIcon} className="icon" />
) : null}
</Button>
)
@ -452,7 +455,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
<span>{props.confirmBtnLabel}</span>
) : null}
{props.confirmBtnIcon ? (
<i className={props.confirmBtnIcon} />
<Icon icon={props.confirmBtnIcon} className="icon" />
) : null}
</Button>
) : null
@ -476,7 +479,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
<span>{props.cancelBtnLabel}</span>
) : null}
{props.cancelBtnIcon ? (
<i className={props.cancelBtnIcon} />
<Icon icon={props.cancelBtnIcon} className="icon" />
) : null}
</Button>
) : null
@ -510,7 +513,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
<span>{props.deleteBtnLabel}</span>
) : null}
{props.deleteBtnIcon ? (
<i className={props.deleteBtnIcon} />
<Icon icon={props.deleteBtnIcon} className="icon" />
) : null}
</Button>
)

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

@ -12,6 +12,7 @@ import {Icon} from '../../components/icons';
import Input from '../../components/Input';
import {autobind, createObject, setVariable} from '../../utils/helper';
import {isEffectiveApi} from '../../utils/api';
import Spinner from '../../components/Spinner';
// declare function matchSorter(items:Array<any>, input:any, options:any): Array<any>;
@ -74,8 +75,7 @@ export default class TextControl extends React.PureComponent<
labelField: 'label',
valueField: 'value',
placeholder: '',
allowInputText: true,
spinnerClassName: 'fa fa-spinner fa-spin fa-1x fa-fw'
allowInputText: true
};
componentWillReceiveProps(nextProps: TextProps) {
@ -415,7 +415,6 @@ export default class TextControl extends React.PureComponent<
labelField,
valueField,
multiple,
spinnerClassName,
translate: __
} = this.props;
@ -523,7 +522,11 @@ export default class TextControl extends React.PureComponent<
</a>
) : null}
{loading ? (
<i className={cx(`TextControl-spinner`, spinnerClassName)} />
<Spinner
show
icon="reload"
spinnerClassName={cx('TextControl-spinner')}
/>
) : null}
{isOpen && filtedOptions.length ? (
<div className={cx('TextControl-sugs')}>

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

@ -12,6 +12,7 @@ import debouce from 'lodash/debounce';
import find from 'lodash/find';
import {Api} from '../../types';
import {isEffectiveApi} from '../../utils/api';
import Spinner from '../../components/Spinner';
export interface TreeSelectProps extends OptionsControlProps {
placeholder?: any;
@ -39,8 +40,7 @@ export default class TreeSelectControl extends React.Component<
joinValues: true,
extractValue: false,
delimiter: ',',
resetValue: '',
spinnerClassName: 'fa fa-spinner fa-spin fa-1x fa-fw'
resetValue: ''
};
container: React.RefObject<HTMLDivElement>;
@ -456,7 +456,6 @@ export default class TreeSelectControl extends React.Component<
const {
className,
disabled,
spinnerClassName,
inline,
loading,
multiple,
@ -521,9 +520,11 @@ export default class TreeSelectControl extends React.Component<
) : null}
{loading ? (
<span className={cx('TreeSelect-spinner')}>
<i className={spinnerClassName} />
</span>
<Spinner
show
icon="reload"
spinnerClassName={cx('TreeSelect-spinner')}
/>
) : null}
<span className={cx('TreeSelect-arrow')} />
</div>

24
src/renderers/Status.tsx
View File

@ -4,6 +4,7 @@ import {ServiceStore, IServiceStore} from '../store/service';
import {Api, SchemaNode, PlainObject} from '../types';
import {filter} from '../utils/tpl';
import cx from 'classnames';
import {Icon} from '../components/icons';
export interface StatusProps extends RendererProps {
className?: string;
@ -15,8 +16,8 @@ export class StatusField extends React.Component<StatusProps, object> {
static defaultProps: Partial<StatusProps> = {
placeholder: '-',
map: {
0: 'fa fa-times text-danger',
1: 'fa fa-check text-success'
0: 'svg-success',
1: 'svg-fail'
},
labelMap: {
// 0: '失败',
@ -47,10 +48,25 @@ export class StatusField extends React.Component<StatusProps, object> {
}
wrapClassName = `StatusField--${value}`;
viewValue = (
<i className={cx('StatusField-icon', map[value])} key="icon" />
let itemClassName = map[value];
let svgIcon: string = '';
itemClassName = itemClassName.replace(
/\bsvg-(.*)\b/,
(_: string, icon: string) => {
svgIcon = icon;
return 'icon';
}
);
if (svgIcon) {
viewValue = (
<Icon icon={svgIcon} className={cx('Status-icon', itemClassName)} />
);
} else {
viewValue = <i className={cx('Status-icon', map[value])} key="icon" />;
}
if (labelMap && labelMap[value]) {
viewValue = [
viewValue,

7
src/renderers/Tasks.tsx
View File

@ -7,6 +7,7 @@ import {Api, ApiObject, Payload} from '../types';
import update from 'react-addons-update';
import {isEffectiveApi, isApiOutdated} from '../utils/api';
import {ScopedContext, IScopedContext} from '../Scoped';
import Spinner from '../components/Spinner';
export interface TaskProps extends RendererProps {
className?: string;
@ -297,7 +298,11 @@ export default class Task extends React.Component<TaskProps, TaskState> {
<td>{item.label}</td>
<td>
{item.status == loadingStatusCode ? (
<i className="fa fa-spinner fa-spin fa-2x fa-fw" />
<Spinner
show
icon="reload"
spinnerClassName={cx('Task-spinner')}
/>
) : item.status == canRetryStatusCode ? (
<a
onClick={() => this.submitTask(item, key, true)}