Skip to content

Commit 1dbb55b

Browse files
xiejay97xiejay97
committed
feat(ui): add skeleton component
1 parent 4efadf6 commit 1dbb55b

29 files changed

Lines changed: 306 additions & 72 deletions

‎packages/ui/src/components/avatar/Avatar.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { usePrefixConfig, useComponentConfig } from '../../hooks';
44
import { registerComponentMate, getClassName } from '../../utils';
55

66
export interface DAvatarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
7-
dShape?: string | number;
7+
dVariant?: 'circular' | 'square';
88
dImg?: React.ImgHTMLAttributes<HTMLImageElement>;
99
dIcon?: React.ReactNode;
1010
dText?: React.ReactNode;
@@ -14,7 +14,7 @@ export interface DAvatarProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
1414
const { COMPONENT_NAME } = registerComponentMate({ COMPONENT_NAME: 'DAvatar' });
1515
export function DAvatar(props: DAvatarProps): JSX.Element | null {
1616
const {
17-
dShape = 'circular',
17+
dVariant = 'circular',
1818
dImg,
1919
dIcon,
2020
dText,
@@ -46,15 +46,12 @@ export function DAvatar(props: DAvatarProps): JSX.Element | null {
4646
return (
4747
<div
4848
{...restProps}
49-
className={getClassName(restProps.className, `${dPrefix}avatar`, `${dPrefix}avatar--${type}`, {
50-
[`${dPrefix}avatar--${dShape}`]: dShape === 'circular' || dShape === 'square',
51-
})}
49+
className={getClassName(restProps.className, `${dPrefix}avatar`, `${dPrefix}avatar--${type}`, `${dPrefix}avatar--${dVariant}`)}
5250
style={{
5351
...restProps.style,
5452
width: dSize,
5553
height: dSize,
5654
fontSize: type === 'icon' ? dSize / 2 : type === 'text' ? dSize * 0.45 : undefined,
57-
borderRadius: dShape === 'circular' || dShape === 'square' ? undefined : dShape,
5855
}}
5956
>
6057
{type === 'img' ? (

‎packages/ui/src/components/avatar/demos/2.Shape.md‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,16 @@ title:
66

77
# en-US
88

9-
Set the shape via `dShape`.
9+
Set the shape via `dVariant`.
1010

1111
# zh-Hant
1212

13-
通过 `dShape` 设置形状。
13+
通过 `dVariant` 设置形状。
1414

1515
```tsx
1616
import { DAvatar } from '@react-devui/ui';
1717

1818
export default function Demo() {
19-
return (
20-
<>
21-
<DAvatar dText="U" dShape="square"></DAvatar>
22-
<DAvatar dText="U" dShape={8}></DAvatar>
23-
</>
24-
);
19+
return <DAvatar dText="U" dVariant="square"></DAvatar>;
2520
}
2621
```

‎packages/ui/src/components/button/Button.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export interface DButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEleme
1414
dTheme?: 'primary' | 'success' | 'warning' | 'danger';
1515
dLoading?: boolean;
1616
dBlock?: boolean;
17-
dShape?: 'circle' | 'round';
17+
dVariant?: 'circle' | 'round';
1818
dSize?: DSize;
1919
dIcon?: React.ReactNode;
2020
dIconRight?: boolean;
@@ -28,7 +28,7 @@ function Button(props: DButtonProps, ref: React.ForwardedRef<HTMLButtonElement>)
2828
dTheme = 'primary',
2929
dLoading = false,
3030
dBlock = false,
31-
dShape,
31+
dVariant,
3232
dSize,
3333
dIcon,
3434
dIconRight = false,
@@ -58,7 +58,7 @@ function Button(props: DButtonProps, ref: React.ForwardedRef<HTMLButtonElement>)
5858
{...restProps}
5959
ref={ref}
6060
className={getClassName(restProps.className, `${dPrefix}button`, `${dPrefix}button--${dType}`, `t-${dTheme}`, {
61-
[`${dPrefix}button--${dShape}`]: dShape,
61+
[`${dPrefix}button--${dVariant}`]: dVariant,
6262
[`${dPrefix}button--${size}`]: size,
6363
[`${dPrefix}button--block`]: dBlock,
6464
[`${dPrefix}button--icon`]: !children,

‎packages/ui/src/components/button/demos/3.Icon.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,12 @@ import { SearchOutlined } from '@react-devui/ui/icons';
1919
export default function Demo() {
2020
return (
2121
<>
22-
<DButton dShape="circle" dIcon={<SearchOutlined />} />
23-
<DButton dType="secondary" dShape="circle" dIcon={<SearchOutlined />} />
24-
<DButton dType="outline" dShape="circle" dIcon={<SearchOutlined />} />
25-
<DButton dType="dashed" dShape="circle" dIcon={<SearchOutlined />} />
26-
<DButton dType="text" dShape="circle" dIcon={<SearchOutlined />} />
27-
<DButton dType="link" dShape="circle" dIcon={<SearchOutlined />} />
22+
<DButton dVariant="circle" dIcon={<SearchOutlined />} />
23+
<DButton dType="secondary" dVariant="circle" dIcon={<SearchOutlined />} />
24+
<DButton dType="outline" dVariant="circle" dIcon={<SearchOutlined />} />
25+
<DButton dType="dashed" dVariant="circle" dIcon={<SearchOutlined />} />
26+
<DButton dType="text" dVariant="circle" dIcon={<SearchOutlined />} />
27+
<DButton dType="link" dVariant="circle" dIcon={<SearchOutlined />} />
2828
<br />
2929
<DButton dIcon={<SearchOutlined />}>Search</DButton>
3030
<DButton dIcon={<SearchOutlined />} dIconRight>

‎packages/ui/src/components/button/demos/5.Loading.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export default function Demo() {
4343
<DButton dLoading={loadings[1]} onClick={() => handleClick(1)}>
4444
Click me!
4545
</DButton>
46-
<DButton dLoading={loadings[2]} dShape="circle" dIcon={<SearchOutlined />} onClick={() => handleClick(2)} />
46+
<DButton dLoading={loadings[2]} dVariant="circle" dIcon={<SearchOutlined />} onClick={() => handleClick(2)} />
4747
<br />
4848
<DButton dLoading={loadings[3]} dIcon={<SearchOutlined />} dIconRight onClick={() => handleClick(3)}>
4949
Click me!

‎packages/ui/src/components/button/demos/7.Size.md‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,24 +20,24 @@ export default function Demo() {
2020
return (
2121
<>
2222
<DButton dSize="smaller" dIcon={<SearchOutlined />} />
23-
<DButton dSize="smaller" dShape="circle" dIcon={<SearchOutlined />} />
24-
<DButton dSize="smaller" dShape="round" dIcon={<SearchOutlined />} />
23+
<DButton dSize="smaller" dVariant="circle" dIcon={<SearchOutlined />} />
24+
<DButton dSize="smaller" dVariant="round" dIcon={<SearchOutlined />} />
2525
<DButton dSize="smaller">Button</DButton>
26-
<DButton dSize="smaller" dShape="round">
26+
<DButton dSize="smaller" dVariant="round">
2727
Button
2828
</DButton>
2929
<br />
3030
<DButton dIcon={<SearchOutlined />} />
31-
<DButton dShape="circle" dIcon={<SearchOutlined />} />
32-
<DButton dShape="round" dIcon={<SearchOutlined />} />
31+
<DButton dVariant="circle" dIcon={<SearchOutlined />} />
32+
<DButton dVariant="round" dIcon={<SearchOutlined />} />
3333
<DButton>Button</DButton>
34-
<DButton dShape="round">Button</DButton>
34+
<DButton dVariant="round">Button</DButton>
3535
<br />
3636
<DButton dSize="larger" dIcon={<SearchOutlined />} />
37-
<DButton dSize="larger" dShape="circle" dIcon={<SearchOutlined />} />
38-
<DButton dSize="larger" dShape="round" dIcon={<SearchOutlined />} />
37+
<DButton dSize="larger" dVariant="circle" dIcon={<SearchOutlined />} />
38+
<DButton dSize="larger" dVariant="round" dIcon={<SearchOutlined />} />
3939
<DButton dSize="larger">Button</DButton>
40-
<DButton dSize="larger" dShape="round">
40+
<DButton dSize="larger" dVariant="round">
4141
Button
4242
</DButton>
4343
</>

‎packages/ui/src/components/button/demos/8.Compose.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ export default function Demo() {
7878
</DCompose>
7979
<DCompose dSize={size} dVertical={vertical} dDisabled={disabled}>
8080
{['L', 'M', 'R'].map((text) => (
81-
<DButton key={text} dType="secondary" dShape={text === 'M' ? undefined : 'round'}>
81+
<DButton key={text} dType="secondary" dVariant={text === 'M' ? undefined : 'round'}>
8282
{text}
8383
</DButton>
8484
))}

‎packages/ui/src/components/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,9 @@ export { DSelect } from './select';
9797
export type { DSeparatorProps } from './separator';
9898
export { DSeparator } from './separator';
9999

100+
export type { DSkeletonProps } from './skeleton';
101+
export { DSkeleton } from './skeleton';
102+
100103
export type { DSliderProps } from './slider';
101104
export { DSlider } from './slider';
102105

‎packages/ui/src/components/loading/Loading.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ export function DLoading(props: DLoadingProps): JSX.Element | null {
9494
children
9595
) : (
9696
<svg className={`${dPrefix}loading__spinner`} width="1em" height="1em" viewBox="0 0 50 50">
97-
<circle cx="25" cy="25" r="20" fill="none" stroke="currentColor" strokeWidth="4" strokeLinecap="round"></circle>
97+
<circle cx="25" cy="25" r="21" fill="none" stroke="currentColor" strokeWidth="4" strokeLinecap="round"></circle>
9898
</svg>
9999
)}
100100
</div>

‎packages/ui/src/components/loading/demos/3.Icon.md‎

Lines changed: 42 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ Custom loading icon.
1616
import { useState } from 'react';
1717

1818
import { DLoading, DAlert, DSwitch } from '@react-devui/ui';
19-
import { LoadingOutlined } from '@react-devui/ui/icons';
2019

2120
export default function Demo() {
2221
const [loading, setLoading] = useState(true);
@@ -30,11 +29,52 @@ export default function Demo() {
3029
<br />
3130
<div style={{ position: 'relative' }}>
3231
<DLoading dVisible={loading}>
33-
<LoadingOutlined dSpin />
32+
<div class="lds-facebook">
33+
<div></div>
34+
<div></div>
35+
<div></div>
36+
</div>
3437
</DLoading>
3538
<DAlert dTitle="I love DevUI so much!" dDescription="Detailed description and advice about DevUI." dType="info"></DAlert>
3639
</div>
3740
</>
3841
);
3942
}
4043
```
44+
45+
```scss
46+
.lds-facebook {
47+
display: inline-flex;
48+
gap: 0 6px;
49+
align-items: center;
50+
}
51+
52+
.lds-facebook div {
53+
width: 8px;
54+
background: var(--d-color-primary);
55+
animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
56+
}
57+
58+
.lds-facebook div:nth-child(1) {
59+
animation-delay: -0.24s;
60+
}
61+
62+
.lds-facebook div:nth-child(2) {
63+
animation-delay: -0.12s;
64+
}
65+
66+
.lds-facebook div:nth-child(3) {
67+
animation-delay: 0;
68+
}
69+
70+
@keyframes lds-facebook {
71+
0% {
72+
height: 56px;
73+
}
74+
75+
50%,
76+
100% {
77+
height: 28px;
78+
}
79+
}
80+
```

0 commit comments

Comments
 (0)