blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-24 02:16:12 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] Loading: optimize jsx

Browse Source
This commit is contained in:
陈嘉涵 2019-05-13 20:33:22 +08:00
parent a6b429cf58
commit e2f98e59da
2 changed files with 35 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
packages/loading/index.tsx
View File

@ -1,4 +1,5 @@
import { use, suffixPx } from '../utils'; import { use, suffixPx } from '../utils';
import { GRAY } from '../utils/color';
import { inherit } from '../utils/functional'; import { inherit } from '../utils/functional';
// Types // Types
@ -16,7 +17,36 @@ export type LoadingProps = {
}; };
const [sfc, bem] = use('loading'); const [sfc, bem] = use('loading');
const DEFAULT_COLOR = '#c9c9c9';
function LoadingIcon(h: CreateElement, props: LoadingProps) {
if (props.type === 'spinner') {
const Spin = [];
for (let i = 0; i < 12; i++) {
Spin.push(<i />);
}
return Spin;
}
return (
<svg class={bem('circular')} viewBox="25 25 50 50">
<circle cx="50" cy="50" r="20" fill="none" />
</svg>
);
}
function LoadingText(h: CreateElement, props: LoadingProps, slots: DefaultSlots) {
if (slots.default) {
const style = props.textSize && {
fontSize: suffixPx(props.textSize)
};
return (
<span class={bem('text')} style={style}>
{slots.default()}
</span>
);
}
}
function Loading( function Loading(
h: CreateElement, h: CreateElement,
@ -33,40 +63,12 @@ function Loading(
style.height = iconSize; style.height = iconSize;
} }
const Spin = [];
if (type === 'spinner') {
for (let i = 0; i < 12; i++) {
Spin.push(<i />);
}
}
const Circular = type === 'circular' && (
<svg class={bem('circular')} viewBox="25 25 50 50">
<circle cx="50" cy="50" r="20" fill="none" />
</svg>
);
function Text() {
if (slots.default) {
const style = props.textSize && {
fontSize: suffixPx(props.textSize)
};
return (
<span class={bem('text')} style={style}>
{slots.default()}
</span>
);
}
}
return ( return (
<div class={bem([type, { vertical: props.vertical }])} {...inherit(ctx, true)}> <div class={bem([type, { vertical: props.vertical }])} {...inherit(ctx, true)}>
<span class={bem('spinner', type)} style={style}> <span class={bem('spinner', type)} style={style}>
{Spin} {LoadingIcon(h, props)}
{Circular}
</span> </span>
{Text()} {LoadingText(h, props, slots)}
</div> </div>
); );
} }
@ -81,7 +83,7 @@ Loading.props = {
}, },
color: { color: {
type: String, type: String,
default: DEFAULT_COLOR default: GRAY
} }
}; };

1
packages/utils/color.ts
View File

@ -2,4 +2,5 @@ export const RED = '#f44';
export const BLUE = '#1989fa'; export const BLUE = '#1989fa';
export const GREEN = '#07c160'; export const GREEN = '#07c160';
export const WHITE = '#fff'; export const WHITE = '#fff';
export const GRAY = '#c9c9c9';
export const GRAY_DARK = '#969799'; export const GRAY_DARK = '#969799';