Skip to content

Commit c889882

Browse files
tangjinzhoutangjinzhou
committed
refactor: skeleton
1 parent 5096ee4 commit c889882

File tree

13 files changed

+633
-261
lines changed

13 files changed

+633
-261
lines changed

‎components/avatar/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { App } from 'vue';
22
import Avatar from './Avatar';
33
import Group from './Group';
44

5-
export { AvatarProps, AvatarSize } from './Avatar';
5+
export { AvatarProps, AvatarSize, avatarProps } from './Avatar';
66
export { AvatarGroupProps } from './Group';
77

88
Avatar.Group = Group;

‎components/skeleton/Avatar.tsx

Lines changed: 30 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,40 @@
1-
import { defineComponent, ExtractPropTypes } from 'vue';
1+
import { computed, defineComponent } from 'vue';
22
import classNames from '../_util/classNames';
33
import PropTypes from '../_util/vue-types';
44
import { tuple } from '../_util/type';
55
import initDefaultProps from '../_util/props-util/initDefaultProps';
6+
import useConfigInject from '../_util/hooks/useConfigInject';
7+
import Element, { skeletonElementProps, SkeletonElementProps } from './Element';
68

7-
const skeletonAvatarProps = {
8-
prefixCls: PropTypes.string,
9-
size: PropTypes.oneOfType([
10-
PropTypes.oneOf(tuple('large', 'small', 'default')),
11-
PropTypes.number,
12-
]),
13-
shape: PropTypes.oneOf(tuple('circle', 'square')),
14-
};
9+
export interface AvatarProps extends Omit<SkeletonElementProps, 'shape'> {
10+
shape?: 'circle' | 'square';
11+
}
1512

16-
export const SkeletonAvatarProps = PropTypes.shape(skeletonAvatarProps).loose;
17-
18-
export type ISkeletonAvatarProps = Partial<ExtractPropTypes<typeof skeletonAvatarProps>>;
19-
20-
const Avatar = defineComponent({
21-
props: initDefaultProps(skeletonAvatarProps, {
13+
export const avatarProps = initDefaultProps(
14+
{ ...skeletonElementProps(), shape: PropTypes.oneOf(tuple('circle', 'square')) },
15+
{
2216
size: 'large',
23-
}),
24-
render() {
25-
const { prefixCls, size, shape } = this.$props;
26-
27-
const sizeCls = classNames({
28-
[`${prefixCls}-lg`]: size === 'large',
29-
[`${prefixCls}-sm`]: size === 'small',
30-
});
31-
32-
const shapeCls = classNames({
33-
[`${prefixCls}-circle`]: shape === 'circle',
34-
[`${prefixCls}-square`]: shape === 'square',
35-
});
36-
37-
const sizeStyle =
38-
typeof size === 'number'
39-
? {
40-
width: `${size}px`,
41-
height: `${size}px`,
42-
lineHeight: `${size}px`,
43-
}
44-
: {};
45-
46-
return <span class={classNames(prefixCls, sizeCls, shapeCls)} style={sizeStyle} />;
17+
},
18+
);
19+
20+
const SkeletonAvatar = defineComponent({
21+
name: 'ASkeletonAvatar',
22+
props: avatarProps,
23+
setup(props) {
24+
const { prefixCls } = useConfigInject('skeleton', props);
25+
const cls = computed(() =>
26+
classNames(prefixCls.value, `${prefixCls.value}-element`, {
27+
[`${prefixCls.value}-active`]: props.active,
28+
}),
29+
);
30+
return () => {
31+
return (
32+
<div class={cls.value}>
33+
<Element {...props} prefixCls={`${prefixCls.value}-avatar`} />
34+
</div>
35+
);
36+
};
4737
},
4838
});
4939

50-
export default Avatar;
40+
export default SkeletonAvatar;

‎components/skeleton/Button.tsx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { computed, defineComponent } from 'vue';
2+
import classNames from '../_util/classNames';
3+
import PropTypes from '../_util/vue-types';
4+
import { tuple } from '../_util/type';
5+
import useConfigInject from '../_util/hooks/useConfigInject';
6+
import Element, { skeletonElementProps, SkeletonElementProps } from './Element';
7+
8+
export interface SkeletonButtonProps extends Omit<SkeletonElementProps, 'size'> {
9+
size?: 'large' | 'small' | 'default';
10+
}
11+
12+
const SkeletonButton = defineComponent({
13+
name: 'ASkeletonButton',
14+
props: { ...skeletonElementProps(), size: PropTypes.oneOf(tuple('large', 'small', 'default')) },
15+
setup(props) {
16+
const { prefixCls } = useConfigInject('skeleton', props);
17+
const cls = computed(() =>
18+
classNames(prefixCls.value, `${prefixCls.value}-element`, {
19+
[`${prefixCls.value}-active`]: props.active,
20+
}),
21+
);
22+
return () => {
23+
return (
24+
<div class={cls.value}>
25+
<Element {...props} prefixCls={`${prefixCls.value}-button`} />
26+
</div>
27+
);
28+
};
29+
},
30+
});
31+
32+
export default SkeletonButton;

‎components/skeleton/Element.tsx

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { CSSProperties, ExtractPropTypes, FunctionalComponent } from '@vue/runtime-dom';
2+
import classNames from '../_util/classNames';
3+
import { tuple } from '../_util/type';
4+
import PropTypes from '../_util/vue-types';
5+
6+
export const skeletonElementProps = () => ({
7+
prefixCls: PropTypes.string,
8+
size: PropTypes.oneOfType([
9+
PropTypes.oneOf(tuple('large', 'small', 'default')),
10+
PropTypes.number,
11+
]),
12+
shape: PropTypes.oneOf(tuple('circle', 'square', 'round')),
13+
active: PropTypes.looseBool,
14+
});
15+
16+
export type SkeletonElementProps = Partial<
17+
ExtractPropTypes<ReturnType<typeof skeletonElementProps>>
18+
>;
19+
20+
const Element: FunctionalComponent<SkeletonElementProps> = props => {
21+
const { prefixCls, size, shape } = props;
22+
23+
const sizeCls = classNames({
24+
[`${prefixCls}-lg`]: size === 'large',
25+
[`${prefixCls}-sm`]: size === 'small',
26+
});
27+
28+
const shapeCls = classNames({
29+
[`${prefixCls}-circle`]: shape === 'circle',
30+
[`${prefixCls}-square`]: shape === 'square',
31+
[`${prefixCls}-round`]: shape === 'round',
32+
});
33+
34+
const sizeStyle: CSSProperties =
35+
typeof size === 'number'
36+
? {
37+
width: `${size}px`,
38+
height: `${size}px`,
39+
lineHeight: `${size}px`,
40+
}
41+
: {};
42+
43+
return <span class={classNames(prefixCls, sizeCls, shapeCls)} style={sizeStyle} />;
44+
};
45+
Element.displayName = 'SkeletonElement';
46+
47+
export default Element;

‎components/skeleton/Image.tsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { computed, defineComponent } from 'vue';
2+
import classNames from '../_util/classNames';
3+
import useConfigInject from '../_util/hooks/useConfigInject';
4+
import { skeletonElementProps, SkeletonElementProps } from './Element';
5+
6+
export interface SkeletonImageProps
7+
extends Omit<SkeletonElementProps, 'size' | 'shape' | 'active'> {}
8+
9+
const path =
10+
'M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z';
11+
12+
const SkeletonImage = defineComponent({
13+
name: 'ASkeletonImage',
14+
props: skeletonElementProps(),
15+
setup(props) {
16+
const { prefixCls } = useConfigInject('skeleton', props);
17+
const cls = computed(() => classNames(prefixCls.value, `${prefixCls.value}-element`));
18+
return () => {
19+
return (
20+
<div class={cls.value}>
21+
<div class={`${prefixCls.value}-image`}>
22+
<svg
23+
viewBox="0 0 1098 1024"
24+
xmlns="http://www.w3.org/2000/svg"
25+
class={`${prefixCls.value}-image-svg`}
26+
>
27+
<path d={path} class={`${prefixCls.value}-image-path`} />
28+
</svg>
29+
</div>
30+
</div>
31+
);
32+
};
33+
},
34+
});
35+
36+
export default SkeletonImage;

‎components/skeleton/Input.tsx

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { computed, defineComponent } from 'vue';
2+
import classNames from '../_util/classNames';
3+
import PropTypes from '../_util/vue-types';
4+
import { tuple } from '../_util/type';
5+
import useConfigInject from '../_util/hooks/useConfigInject';
6+
import Element, { skeletonElementProps, SkeletonElementProps } from './Element';
7+
import Omit from 'omit.js';
8+
9+
export interface SkeletonInputProps extends Omit<SkeletonElementProps, 'size' | 'shape'> {
10+
size?: 'large' | 'small' | 'default';
11+
}
12+
13+
const SkeletonInput = defineComponent({
14+
name: 'ASkeletonInput',
15+
props: {
16+
...Omit(skeletonElementProps(), 'shape'),
17+
size: PropTypes.oneOf(tuple('large', 'small', 'default')),
18+
},
19+
setup(props) {
20+
const { prefixCls } = useConfigInject('skeleton', props);
21+
const cls = computed(() =>
22+
classNames(prefixCls.value, `${prefixCls.value}-element`, {
23+
[`${prefixCls.value}-active`]: props.active,
24+
}),
25+
);
26+
return () => {
27+
return (
28+
<div class={cls.value}>
29+
<Element {...props} prefixCls={`${prefixCls.value}-input`} />
30+
</div>
31+
);
32+
};
33+
},
34+
});
35+
36+
export default SkeletonInput;

‎components/skeleton/Paragraph.tsx

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,20 @@ import PropTypes from '../_util/vue-types';
33

44
const widthUnit = PropTypes.oneOfType([PropTypes.number, PropTypes.string]);
55

6-
const skeletonParagraphProps = {
6+
export const skeletonParagraphProps = {
77
prefixCls: PropTypes.string,
88
width: PropTypes.oneOfType([widthUnit, PropTypes.arrayOf(widthUnit)]),
99
rows: PropTypes.number,
1010
};
1111

12-
export const SkeletonParagraphProps = PropTypes.shape(skeletonParagraphProps).loose;
12+
export type SkeletonParagraphProps = Partial<ExtractPropTypes<typeof skeletonParagraphProps>>;
1313

14-
export type ISkeletonParagraphProps = Partial<ExtractPropTypes<typeof skeletonParagraphProps>>;
15-
16-
const Paragraph = defineComponent({
14+
const SkeletonParagraph = defineComponent({
1715
props: skeletonParagraphProps,
18-
methods: {
19-
getWidth(index: number) {
20-
const { width, rows = 2 } = this;
16+
name: 'SkeletonParagraph',
17+
setup(props) {
18+
const getWidth = (index: number) => {
19+
const { width, rows = 2 } = props;
2120
if (Array.isArray(width)) {
2221
return width[index];
2322
}
@@ -26,16 +25,18 @@ const Paragraph = defineComponent({
2625
return width;
2726
}
2827
return undefined;
29-
},
30-
},
31-
render() {
32-
const { prefixCls, rows } = this.$props;
33-
const rowList = [...Array(rows)].map((_, index) => {
34-
const width = this.getWidth(index);
35-
return <li key={index} style={{ width: typeof width === 'number' ? `${width}px` : width }} />;
36-
});
37-
return <ul class={prefixCls}>{rowList}</ul>;
28+
};
29+
return () => {
30+
const { prefixCls, rows } = props;
31+
const rowList = [...Array(rows)].map((_, index) => {
32+
const width = getWidth(index);
33+
return (
34+
<li key={index} style={{ width: typeof width === 'number' ? `${width}px` : width }} />
35+
);
36+
});
37+
return <ul class={prefixCls}>{rowList}</ul>;
38+
};
3839
},
3940
});
4041

41-
export default Paragraph;
42+
export default SkeletonParagraph;

0 commit comments

Comments
 (0)