Bladeren bron

Merge branch 'main' into release

代强 2 jaren geleden
bovenliggende
commit
205b13c656

+ 99 - 0
packages/semi-ui/table/_story/HugeData/index.jsx

@@ -0,0 +1,99 @@
+import React, { useMemo, useCallback } from 'react';
+import Table from '../../';
+import Avatar from "../../../avatar";
+import { IconMore } from "@douyinfe/semi-icons";
+
+const Demo = () => {
+    const columns = [
+        {
+            title: '标题',
+            dataIndex: 'name',
+            render: (text, record, index) => {
+                return (
+                    <div>
+                        <Avatar
+                            size="small"
+                            shape="square"
+                            src={record.nameIconSrc}
+                            style={{ marginRight: 12 }}
+                        ></Avatar>
+                        {text}
+                    </div>
+                );
+            },
+        },
+        {
+            title: '大小',
+            dataIndex: 'size',
+        },
+        {
+            title: '所有者',
+            dataIndex: 'owner',
+            render: (text, record, index) => {
+                return (
+                    <div>
+                        <Avatar size="small" color={record.avatarBg} style={{ marginRight: 4 }}>
+                            {typeof text === 'string' && text.slice(0, 1)}
+                        </Avatar>
+                        {text}
+                    </div>
+                );
+            },
+        },
+        {
+            title: '更新日期',
+            dataIndex: 'updateTime',
+        },
+        {
+            title: '',
+            dataIndex: 'operate',
+            render: () => {
+                return <IconMore />;
+            },
+        },
+    ];
+    const data = [
+        {
+            key: '1',
+            name: 'Semi Design 设计稿.fig',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png',
+            size: '2M',
+            owner: '姜鹏志',
+            updateTime: '2020-02-02 05:13',
+            avatarBg: 'grey',
+        },
+        {
+            key: '2',
+            name: 'Semi Design 分享演示文稿',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
+            size: '2M',
+            owner: '郝宣',
+            updateTime: '2020-01-17 05:31',
+            avatarBg: 'red',
+        },
+        {
+            key: '3',
+            name: '设计文档',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
+            size: '34KB',
+            owner: 'Zoey Edwards',
+            updateTime: '2020-01-26 11:01',
+            avatarBg: 'light-blue',
+        },
+    ];
+    for (let i=4;i<=9999;i++) {
+        data[i-1] = {
+            key: `${i}`,
+            name: '设计文档',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
+            size: '34KB',
+            owner: 'Zoey Edwards',
+            updateTime: '2020-01-26 11:01',
+            avatarBg: 'light-blue',
+        };
+    }
+
+    return <Table columns={columns} dataSource={data} pagination={false} />;
+};
+
+export default Demo;

+ 3 - 0
packages/semi-ui/table/_story/table.stories.jsx

@@ -46,6 +46,7 @@ import ExpandAllRows from './ExpandAllRows';
 import ExpandAllGroupRows from './ExpandAllGroupRows';
 import ExpandRowByClick from './ExpandRowByClick';
 import FixAllColumnsWithoutWidth from './FixAllColumnsWithoutWidth';
+import HugeData from "./HugeData"
 
 export default {
   title: 'Table'
@@ -619,3 +620,5 @@ PerfRenderDemo.parameters = {
   chromatic: { disableSnapshot: true },
 }
 export const RenderPaginationDemo = () => <RenderPagination />;
+
+export const HugeDataDemo = ()=><HugeData/>

+ 20 - 0
packages/semi-ui/typography/_story/HugeData/index.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import Typography from '../../';
+
+const { Paragraph, Title, Text } = Typography;
+export const HugeData = () => {
+    return <div>
+
+        {
+            new Array(100).map((_, i)=>{
+                return <div key={i}>
+                    <Title heading={5} ellipsis={{ showTooltip: true }} style={{ width: 250 }}>
+                        是一个很长很长很长很长5号标题
+                    </Title>
+                </div>;
+            })
+        }
+
+
+    </div>;
+};

+ 6 - 1
packages/semi-ui/typography/_story/typography.stories.jsx

@@ -4,6 +4,7 @@ import withPropsCombinations from 'react-storybook-addon-props-combinations';
 import Icon from '../../icons';
 import Typography from '../index';
 import { IconLink, IconTick, IconSetting } from '@douyinfe/semi-icons';
+import {HugeData} from "./HugeData";
 
 export default {
   title: 'Typography'
@@ -819,4 +820,8 @@ export const JsEllipsisNoTooltip = () => (
   >
       data_tns
   </Title>
-)
+)
+
+export const HugeDataDemo = ()=>{
+    return <HugeData/>
+}