-
Notifications
You must be signed in to change notification settings - Fork 699
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
Co-authored-by: shijia.me <shijia.me@bytedance.com>
- Loading branch information
1 parent
72a0688
commit 498ceef
Showing
5 changed files
with
118 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
106 changes: 106 additions & 0 deletions
106
packages/semi-ui/table/_story/v2/FixedRowSelectionHiddenResizable/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,106 @@ | ||
import React, { useMemo, useState } from 'react'; | ||
import { Table, Avatar, Button, Space } from '@douyinfe/semi-ui'; | ||
import * as dateFns from 'date-fns'; | ||
import { IconMore } from '@douyinfe/semi-icons'; | ||
|
||
const DAY = 24 * 60 * 60 * 1000; | ||
const figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png'; | ||
|
||
/** | ||
* test with cypress, don't modify this story | ||
* @returns | ||
*/ | ||
export default function App() { | ||
const [hidden, setHidden] = useState(false); | ||
const columns = [ | ||
{ | ||
title: '标题', | ||
dataIndex: 'name', | ||
width: 300, | ||
resize: false, | ||
render: (text, record, index) => { | ||
return ( | ||
<div> | ||
<Avatar size="small" shape="square" src={figmaIconUrl} style={{ marginRight: 12 }}></Avatar> | ||
{text} | ||
</div> | ||
); | ||
}, | ||
filters: [ | ||
{ | ||
text: 'Semi Design 设计稿', | ||
value: 'Semi Design 设计稿', | ||
}, | ||
{ | ||
text: 'Semi D2C 设计稿', | ||
value: 'Semi D2C 设计稿', | ||
}, | ||
], | ||
onFilter: (value, record) => record.name.includes(value), | ||
}, | ||
{ | ||
title: '大小', | ||
dataIndex: 'size', | ||
width: 200, | ||
sorter: (a, b) => (a.size - b.size > 0 ? 1 : -1), | ||
render: text => `${text} KB`, | ||
}, | ||
{ | ||
title: '所有者', | ||
width: 200, | ||
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', | ||
sorter: (a, b) => (a.updateTime - b.updateTime > 0 ? 1 : -1), | ||
render: value => { | ||
return dateFns.format(new Date(value), 'yyyy-MM-dd'); | ||
}, | ||
}, | ||
{ | ||
title: '操作列', | ||
dataIndex: 'operate', | ||
fixed: 'right', | ||
width: 100, | ||
resize: false, | ||
render: () => { | ||
return <IconMore />; | ||
}, | ||
}, | ||
]; | ||
|
||
const data = useMemo(() => { | ||
const _data = []; | ||
for (let i = 0; i < 46; i++) { | ||
const isSemiDesign = i % 2 === 0; | ||
const randomNumber = (i * 1000) % 199; | ||
_data.push({ | ||
key: '' + i, | ||
name: isSemiDesign ? `Semi Design 设计稿${i}.fig` : `Semi D2C 设计稿${i}.fig`, | ||
owner: isSemiDesign ? '姜鹏志' : '郝宣', | ||
size: randomNumber, | ||
updateTime: new Date('2024-01-24').valueOf() + randomNumber * DAY, | ||
avatarBg: isSemiDesign ? 'grey' : 'red', | ||
}); | ||
} | ||
return _data; | ||
}, []); | ||
|
||
return ( | ||
<Space vertical align="start"> | ||
<Button onClick={() => setHidden(!hidden)}>toggle hidden rowSelection</Button> | ||
<Table columns={columns} dataSource={data} resizable bordered rowSelection={{ hidden }} /> | ||
</Space> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters