Skip to content

Commit 6d2b485

Browse files
hoshinogamiYour Name1360151219
authored
Skeleton (#11)
* init card * change dom * fix: [Card]circle import * change:encoding * style: change * change: function * add: scale * change:scale * add: raduis * add:avatar * fix:actions * fix:expand and collapse * add:Grid * change:size * change:code * change:code * add:svg * change:name * fix:layout and add:show example * fix:safari compatible problem * init:skeleton * add:mdx * add * fix:adapt master * fix:code width * fix：avatar * add:avatar * delete * fix * init * fix * add card-loading * add paragraphheight * add active * fix code width and style width not same * fix: skeleton-title width * no * fix:variable name * fix:codeblock width --------- Co-authored-by: Your Name <[email protected]> Co-authored-by: 1360151219 <[email protected]> Co-authored-by: 盐焗乳鸽还要砂锅 <[email protected]>
1 parent df80a3e commit 6d2b485

File tree

12 files changed

+277
-13
lines changed

12 files changed

+277
-13
lines changed

‎packages/demo/index.scss‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -145,11 +145,15 @@ h3 {
145145
margin: 0 24px;
146146
}
147147
}
148+
148149
.line-numbers {
149150
//width: 100%;
150151
.code-toolbar {
151-
width: 76vw;
152-
overflow: auto;
152+
.data-prismjs-copy {
153+
//width: 70vw;
154+
//width: 100%;
155+
overflow: auto;
156+
}
153157
}
154158
}
155159
}

‎packages/demo/index.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import IconMdx from './src/components/Icon/index.mdx';
55
import InputMdx from './src/components/Input/index.mdx';
66
import { Button, Icon, Input } from 'pivot-design';
77
import CardMdx from './src/components/Card/index.mdx';
8+
import SkeletonMdx from './src/components/Skeleton/index.mdx';
9+
import { Skeleton } from 'pivot-design';
810
import { Card } from 'pivot-design';
911
import Draggable from '@/examples/Draggable/Draggable';
1012
import CodeBlock from '@/components/codeBlock';
@@ -24,6 +26,8 @@ const App = () => {
2426
<div className={`demo-item ${select === 'Draggable' ? 'active' : ''}`} onClick={() => setSelect('Draggable')}>
2527
拖拽列表
2628
</div>
29+
<div className={`demo-item ${select === 'Skeleton' ? 'active' : ''}`} onClick={() => setSelect('Skeleton')}>
30+
骨架屏
2731
<div className={`demo-item ${select === 'Icon' ? 'active' : ''}`} onClick={() => setSelect('Icon')}>
2832
图标
2933
</div>
@@ -47,6 +51,7 @@ const App = () => {
4751
{select === 'Input' ? <InputMdx components={{ Input, CodeBlock }} /> : null}
4852
{select === 'Card' ? <CardMdx components={{ Card, CodeBlock }} /> : null}
4953
{select === 'Draggable' ? <Draggable /> : null}
54+
{select === 'Skeleton' ? <SkeletonMdx components={{ Skeleton, CodeBlock }} /> : null}
5055
</div>
5156
</div>
5257
</div>

‎packages/demo/src/components/Card/demo/Loading.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { Card, Button } from 'pivot-design';
2+
import React, { useState } from 'react';
3+
import Actions from '../svg/index.tsx';
4+
import More from '../svg/tab.tsx';
5+
const App: React.FC = () => {
6+
const [loading, setLoading] = useState<boolean>(false);
7+
const onClickHandle = () => {
8+
setLoading(!loading);
9+
};
10+
return (
11+
<>
12+
<Card
13+
loading={loading}
14+
title={<div>多余文本</div>}
15+
time="19:20 2020-09-15"
16+
extra={<More />}
17+
avatar={
18+
<img src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" width="35" height="35" />
19+
}
20+
actions={<Actions />}
21+
>
22+
我好想买Airpods但是没有钱，梁老师可不可以 资助我我好想买Airpods 但是没有钱，
23+
梁老师可不可以资助我一点钱呢啊？不多不多的， 球球了！我好想买Airpods但是没有钱，
24+
梁老师可不可以资助我一点钱钱呢啊？ 不多不多的，球球了！我好想买Airpods但是没有钱，梁老师可
25+
我好想买Airpods但是没有钱，梁老师可不可以资助我一点钱钱呢啊？ 不多不多的，球球了！ 我好想买Airpods但是没有钱，
26+
梁老师可不可以资助我一点钱钱呢啊？不多不多的，球球了！ 我好想买Airpods但是没有钱，梁老师可
27+
我好想买Airpods但是没有钱，梁老师可不可以资助我一点钱钱呢啊？ 不多不多的，球球了！ 我好想买Airpods但是没有钱，
28+
梁老师可不可以资助我一点钱钱呢啊？ 不多不多的， 球球了！我好想买Airpods但是没有钱，梁老师可
29+
</Card>
30+
<Button size="small" onClick={onClickHandle}>
31+
change
32+
</Button>
33+
</>
34+
);
35+
};
36+
export default App;

‎packages/demo/src/components/Card/index.mdx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,3 +105,8 @@ import More from "./svg/tab.tsx"
105105
我好想买Airpods但是没有钱，梁老师可</p>
106106
</Card>
107107
</CodeBlock>
108+
109+
<div className="title">加载中</div>
110+
<CodeBlock line={'5-7'}>
111+
<Loading/>
112+
</CodeBlock>

‎packages/demo/src/components/Skeleton/index.mdx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# skeleton
2+
3+
<div className="title">普通样式</div>
4+
<CodeBlock line={'5-7'}>
5+
<Skeleton style={{width:"380px"}}></Skeleton>
6+
</CodeBlock>
7+
<div className="title">带标题</div>
8+
<CodeBlock line={'5-7'}>
9+
<Skeleton style={{width:"380px"}} title={true}></Skeleton>
10+
</CodeBlock>
11+
<div className="title">带头像</div>
12+
<CodeBlock line={'5-7'}>
13+
<Skeleton style={{width:"380px"}} avatar={true}></Skeleton>
14+
</CodeBlock>
15+
<div className="title">块状</div>
16+
<CodeBlock line={'5-7'}>
17+
<Skeleton style={{width:"380px",height:"90px"}} brick={true}></Skeleton>
18+
</CodeBlock>
19+
<div className="title">静态</div>
20+
<CodeBlock line={'5-7'}>
21+
<Skeleton style={{width:"380px",'--skeleton-active':'false'}}></Skeleton>
22+
</CodeBlock>

‎packages/demo/src/components/codeBlock.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,13 @@ const CodeBlock: React.FC<ICodeProps> = (props) => {
3131

3232
<div className="pivot-code-box-actions">
3333
{expand ? (
34-
<div className="pivot-code-box-icon" onClick={() => setExpand(false)}>
34+
<div
35+
className="pivot-code-box-icon"
36+
onClick={() => {
37+
setExpand(false);
38+
setCodeDisplay(false);
39+
}}
40+
>
3541
<img src="https://gw.alipayobjects.com/zos/antfincdn/4zAaozCvUH/unexpand.svg" />
3642
</div>
3743
) : (

‎packages/design-props/components/skeleton.ts‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import React from 'react';
2+
import { PivotDesignProps } from './';
3+
4+
export interface SkeletonProps extends PivotDesignProps {
5+
/**
6+
* @version 1.0.0
7+
* @description 自定义样式
8+
* @default undefined
9+
*/
10+
style?: React.CSSProperties & CardCssTokens;
11+
/**
12+
* @version 1.0.0
13+
* @description 是否展示动画效果
14+
* @default false
15+
*/
16+
active?: boolean;
17+
/**
18+
* @version 1.0.0
19+
* @description 头像占位
20+
* @default false
21+
*/
22+
avatar?: boolean;
23+
/**
24+
* @version 1.0.0
25+
* @description 是否加载
26+
* @default undefined
27+
*/
28+
29+
loading?: boolean;
30+
/**
31+
* @version 1.0.0
32+
* @description 自定义条数
33+
* @default 4
34+
*/
35+
row?: number;
36+
/**
37+
* @version 1.0.0
38+
* @description 标题
39+
* @default false
40+
*/
41+
title?: boolean;
42+
/**
43+
* @version 1.0.0
44+
* @description 块状
45+
* @default false
46+
*/
47+
brick?: boolean;
48+
}
49+
50+
interface CardCssTokens {
51+
/**
52+
* @version 1.0.0
53+
* @description 背景颜色
54+
*@default --pivot-Skeleton-background-color
55+
*/
56+
'--skeleton-background-color'?: string;
57+
/**
58+
* @version 1.0.0
59+
* @description 自定义段落宽度
60+
* @default 0.8
61+
*/
62+
'--skeleton-paragraph-size'?: number;
63+
/**
64+
* @version 1.0.0
65+
* @description 是否展示动画效果
66+
* @default active
67+
*/
68+
'--skeleton-active'?: string;
69+
/**
70+
* @version 1.0.0
71+
* @description 标题长度
72+
* @default 1
73+
*/
74+
'--skeleton-title-height'?: number;
75+
/**
76+
* @version 1.0.0
77+
* @description 标题宽度
78+
* @default 40%
79+
*/
80+
'--skeleton-title-width'?: number;
81+
}

‎packages/design-props/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,4 @@ export type { IconProps } from './components/icon';
44
export type { InputProps } from './components/input';
55
export { CardProps } from './components/card';
66
export { DraggableListProps, DraggableItemProps } from './components/draggableList';
7-
7+
export { SkeletonProps } from './components/skeleton';

‎packages/design/components/Card/index.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useEffect, useRef, useState } from 'react';
22
import { CardProps } from 'pivot-design-props';
33
import { prefix } from '../constants';
4+
import Skeleton from '../Skeleton';
45
import classnames from 'classnames';
56
import './index.scss';
67
let num: number = 0;
@@ -30,10 +31,6 @@ const Card: React.FC<CardProps> = (props) => {
3031
setNeedExpandBtn(descRef?.current?.scrollHeight > descRef?.current?.clientHeight);
3132
}, []);
3233

33-
if (loading) {
34-
return <div className={`${prefix}-card-loading`} />;
35-
}
36-
3734
let classNames = classnames(
3835
`${prefix}-card`,
3936
className,
@@ -90,10 +87,11 @@ const Card: React.FC<CardProps> = (props) => {
9087

9188
return (
9289
<div className={classNames} style={style}>
90+
{loading && <Skeleton loading={loading} />}
9391
{cover}
94-
{CardHeader(title, extra, time, avatar)}
95-
{CardBody(children)}
96-
{CardActionDom(actions)}
92+
{!loading && CardHeader(title, extra, time, avatar)}
93+
{!loading && CardBody(children)}
94+
{!loading && CardActionDom(actions)}
9795
</div>
9896
);
9997
};

‎packages/design/components/Skeleton/index.scss‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
@import '../common.scss';
2+
.#{$prefix}-skeleton {
3+
width: 100%;
4+
height: 100%;
5+
border-radius: 10px;
6+
display: flex;
7+
justify-content: center;
8+
flex-wrap: unwrap;
9+
10+
.#{$prefix}-skeleton-content {
11+
display: block;
12+
padding: 10px;
13+
width: 100%;
14+
.#{$prefix}-skeleton-head {
15+
.#{$prefix}-skeleton-title {
16+
border-radius: 4px;
17+
margin: 0 auto;
18+
width: calc(var(--skeleton-title-width, 40%));
19+
height: calc(var(--skeleton-title-height, 1) * 1rem);
20+
}
21+
}
22+
}
23+
.#{$prefix}-skeleton-avatar {
24+
width: 35px;
25+
height: 35px;
26+
overflow: hidden;
27+
border-radius: 50%;
28+
}
29+
}
30+
li {
31+
border-radius: 4px;
32+
list-style: none;
33+
display: block;
34+
width: 100%;
35+
height: calc(var(--skeleton-paragraph-size, 0.8) * 1rem);
36+
&:first-child {
37+
width: 30%;
38+
}
39+
&:nth-child(2) {
40+
width: 60%;
41+
}
42+
}
43+
.#{$prefix}-skeleton-loading {
44+
background-image: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
45+
46+
background-size: 400% 100%;
47+
margin-top: 0.6rem;
48+
background-position: 100% 50%;
49+
50+
animation: var(--skeleton-active, active) 1.4s ease infinite;
51+
}
52+
@keyframes active {
53+
0% {
54+
background-position: 100% 50%;
55+
}
56+
57+
100% {
58+
background-position: 0 50%;
59+
}
60+
}

0 commit comments

Comments
 (0)