feat(Skeleton): add skeleton

.styleguide/components.js

@@ -197,6 +197,9 @@ module.exports = [
             },
             {
                 name: 'Loading'
+            },
+            {
+                name: 'Skeleton'
             }
         ]
     },

src/components/Skeleton/Skeleton.md

@@ -0,0 +1,15 @@
+### 说明
+
+用作组件的简单占位符。
+
+### 演示
+
+-   普通使用
+
+```js {"codepath": "skeleton.jsx"}
+```
+
+-   使用案例
+
+```js {"codepath": "usage.jsx"}
+```

src/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,32 @@
+import React, { HTMLAttributes, useMemo } from 'react';
+
+import { contentCls, SWrap } from './style';
+
+interface SkeletonProps {
+    /** 是否开启动画 */
+    animation?: boolean;
+    /** 章节的行数 */
+    rows?: number;
+    /** 宽度 */
+    width?: string | number;
+}
+
+const Skeleton = ({ animation, rows = 1, ...rest }: SkeletonProps & HTMLAttributes<HTMLDivElement>) => {
+    const content = useMemo(
+        () => (
+            <>
+                {new Array(Math.max(rows, 1)).fill(null).map((_, i) => {
+                    return <p key={i}></p>;
+                })}
+            </>
+        ),
+        [rows]
+    );
+    return (
+        <SWrap {...rest} animation={animation}>
+            <div className={contentCls}>{content}</div>
+        </SWrap>
+    );
+};
+
+export default Skeleton;

src/components/Skeleton/__demo__/skeleton.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import demoUtil from 'shared/demoUtil';
+import NumberInput from 'src/components/NumberInput';
+import Skeleton from 'src/components/Skeleton';
+import Form from 'src/components/Form';
+import Switch from 'src/components/Switch';
+
+// demo start
+const { formLayout, DemoWrap } = demoUtil;
+class Demo extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            animation: false,
+            rows: 1
+        };
+    }
+    render() {
+        const { animation, rows } = this.state;
+
+        return (
+            <div>
+                <Form className="demo-form" itemProps={{ ...formLayout }}>
+                    <Form.Item label="animation">
+                        <Switch checked={animation} onChange={animation => this.setState({ animation })} />
+                    </Form.Item>
+                    <Form.Item label="rows">
+                        <NumberInput value={rows} onChange={rows => this.setState({ rows })} />
+                    </Form.Item>
+                </Form>
+                <DemoWrap>
+                    {/* use key to reset animation */}
+                    <Skeleton key={rows} {...{ animation, rows }} />
+                </DemoWrap>
+            </div>
+        );
+    }
+}
+// demo end
+
+export default Demo;

src/components/Skeleton/__demo__/usage.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import Skeleton from 'src/components/Skeleton';
+import Card from 'src/components/Card';
+import demoUtil from 'shared/demoUtil';
+
+// demo start
+const { DemoWrap } = demoUtil;
+const Demo = () => (
+    <>
+        <h2>普通场景</h2>
+        <DemoWrap>
+            <Skeleton />
+        </DemoWrap>
+
+        <h2>带动画</h2>
+        <DemoWrap>
+            <Skeleton animation />
+        </DemoWrap>
+
+        <h2>多行</h2>
+        <DemoWrap>
+            <Skeleton rows={3} animation />
+        </DemoWrap>
+
+        <h2>组合</h2>
+        <DemoWrap>
+            <Card>
+                <Card.Header>
+                    <Skeleton animation width="60%" />
+                </Card.Header>
+                <Card.Content>
+                    <Skeleton animation rows={3} />
+                </Card.Content>
+            </Card>
+        </DemoWrap>
+    </>
+);
+// demo end
+
+export default Demo;