@douyinfe/semi-ui 2.17.0 → 2.19.0-alpha.0

package/table/Table.tsx

@@ -933,16 +933,22 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
             const stateSortOrder = get(curQuery, 'sortOrder');
             const defaultSortOrder = get(curQuery, 'defaultSortOrder', false);
             const sortOrder = this.foundation.isSortOrderValid(stateSortOrder) ? stateSortOrder : defaultSortOrder;
+            const TitleNode = typeof rawTitle !== 'function' && <React.Fragment key={strings.DEFAULT_KEY_COLUMN_TITLE}>{rawTitle as React.ReactNode}</React.Fragment>;
             if (typeof column.sorter === 'function' || column.sorter === true) {
+                // In order to increase the click hot area of ​​sorting, when sorting is required & useFullRender is false,
+                // both the title and sorting areas are used as the click hot area for sorting。
                 const sorter = (
                     <ColumnSorter
                         key={strings.DEFAULT_KEY_COLUMN_SORTER}
                         sortOrder={sortOrder}
                         onClick={e => this.foundation.handleSort(column, e)}
+                        title={TitleNode}
                     />
                 );
                 useFullRender && (titleMap.sorter = sorter);
                 titleArr.push(sorter);
+            } else {
+                titleArr.push(TitleNode);
             }
 
             const stateFilteredValue = get(curQuery, 'filteredValue');
@@ -964,10 +970,7 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
 
             const newTitle =
                 typeof rawTitle === 'function' ?
-                    () => rawTitle(titleMap) :
-                    titleArr.unshift(
-                        <React.Fragment key={strings.DEFAULT_KEY_COLUMN_TITLE}>{rawTitle}</React.Fragment>
-                    ) && titleArr;
+                    () => rawTitle(titleMap) : titleArr;
 
             column = { ...column, title: newTitle };
         }

package/table/_story/v2/FixedFilter/index.tsx

@@ -0,0 +1,106 @@
+import React, { useState, useMemo, useEffect } from 'react';
+
+// eslint-disable-next-line semi-design/no-import
+import { Table, Avatar } from '@douyinfe/semi-ui';
+import * as dateFns from 'date-fns';
+
+const DAY = 24 * 60 * 60 * 1000;
+const figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';
+
+const columns = [
+    {
+        title: '标题',
+        dataIndex: 'name',
+        width: 400,
+        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 Pro 设计稿',
+                value: 'Semi Pro 设计稿',
+            },
+        ],
+        onFilter: (value, record) => record.name.includes(value),
+        sorter: (a, b) => a.name.length - b.name.length > 0 ? 1 : -1,
+    },
+    {
+        title: '大小',
+        dataIndex: 'size',
+        sorter: (a, b) => a.size - b.size > 0 ? 1 : -1,
+        render: (text) => `${text} KB`
+    },
+    {
+        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',
+        sorter: (a, b) => a.updateTime - b.updateTime > 0 ? 1 : -1,
+        render: (value) => {
+            return dateFns.format(new Date(value), 'yyyy-MM-dd');
+        }
+    }
+];
+
+App.storyName = 'Fixed filter issue 1036';
+/**
+ * test with cypress, please don't modify this story
+ */
+export default function App() {
+    const [dataSource, setData] = useState([]);
+
+    const rowSelection = useMemo(() => ({
+        onChange: (selectedRowKeys, selectedRows) => {
+            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+        },
+        getCheckboxProps: record => ({
+            disabled: record.name === 'Michael James', // Column configuration not to be checked
+            name: record.name,
+        }),
+    }), []);
+    const scroll = useMemo(() => ({ y: 300 }), []);
+
+    const getData = () => {
+        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 Pro 设计稿${i}.fig`,
+                owner: isSemiDesign ? '姜鹏志' : '郝宣',
+                size: randomNumber,
+                updateTime: new Date('2022-08-11').valueOf() + randomNumber * DAY,
+                avatarBg: isSemiDesign ? 'grey' : 'red'
+            });
+        }
+        return data;
+    };
+
+    useEffect(() => {
+        const data = getData();
+        setData(data);
+    }, []);
+
+    return <Table columns={columns} dataSource={dataSource} rowSelection={rowSelection} scroll={scroll} />;
+}

package/table/_story/v2/FixedSorter/index.tsx

@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+// eslint-disable-next-line semi-design/no-import
+import { Table } from '@douyinfe/semi-ui';
+// eslint-disable-next-line semi-design/no-import
+import { ChangeInfo } from '@douyinfe/semi-ui/table';
+
+const data = [
+    {
+        key: 'a',
+        group: 'yes',
+        count: 3,
+    },
+    {
+        key: 'b',
+        group: 'no',
+        count: 3,
+    },
+    {
+        key: 'c',
+        group: 'no',
+        count: 1,
+    },
+    {
+        key: 'd',
+        group: 'yes',
+        count: 1,
+    },
+    {
+        key: 'e',
+        group: 'no',
+        count: 2,
+    },
+    {
+        key: 'f',
+        group: 'yes',
+        count: 2,
+    }
+];
+
+Demo.storyName = 'fixed sorter';
+/**
+ * 保持分组顺序不变的排序方式
+ */
+function Demo() {
+    const [filtered, setFiltered] = useState([...data]);
+    console.log(filtered);
+    const columns = [
+        {
+            title: 'ID',
+            dataIndex: 'key',
+        },
+        {
+            title: 'group',
+            dataIndex: 'Group',
+            sorter: (a, b) => a.group === 'yes' ? -1 : 1,
+            // sortOrder: 'ascend'
+        },
+        {
+            title: 'Count',
+            dataIndex: 'count',
+            // sorter: true
+            sorter: (a, b) => a.count - b.count > 0 ? 1 : -1,
+        },
+    ];
+
+    const onTableChange = ({ sorter }: ChangeInfo<any>) => {
+        if (sorter) {
+            const { dataIndex, sortOrder } = sorter;
+            setFiltered(prev => [...prev].sort((a, b) => {
+                if (a.group !== b.group) {
+                    return a.group === 'yes' ? -1 : 1;
+                }
+
+                let ascendValue = -1;
+                if (dataIndex === 'count') {
+                    ascendValue = a.count - b.count > 0 ? 1 : -1;
+                }
+
+                return sortOrder === 'ascend' ? ascendValue : -ascendValue;
+            }));
+        }
+    };
+
+
+    return (
+        <div style={{ padding: '20px 0px' }}>
+            <Table
+                dataSource={filtered}
+                onChange={onTableChange}
+                rowKey="key"
+                groupBy="group"
+                columns={columns}
+                renderGroupSection={groupKey => <strong>分组 {groupKey}</strong>}
+                expandAllGroupRows
+                scroll={{ y: 480 }}
+                pagination={{ pageSize: 4 }}
+            />
+        </div>
+    );
+}
+
+export default Demo;

package/table/_story/v2/index.js

@@ -4,7 +4,9 @@ export { default as FixedZIndex } from './FixedZIndex';
 export { default as FixedHeaderMerge } from './FixedHeaderMerge';
 export { default as FixedResizable } from './FixedResizable';
 export { default as FixedExpandedRow } from './FixedExpandedRow';
-export { default as FixedMemoryLeak  } from './FixedMemoryLeak';
+export { default as FixedMemoryLeak } from './FixedMemoryLeak';
 export { default as FixedOnHeaderRow } from './FixedOnHeaderRow';
 export { default as RadioRowSelection } from './radioRowSelection';
-export { default as FixedVirtualizedEmpty } from './FixedVirtualizedEmpty';
+export { default as FixedVirtualizedEmpty } from './FixedVirtualizedEmpty';
+export { default as FixedFilter } from './FixedFilter';
+export { default as FixedSorter } from './FixedSorter';

package/tag/_story/tag.stories.js

@@ -1,5 +1,5 @@
 /* argus-disable unPkgSensitiveInfo */
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import withPropsCombinations from 'react-storybook-addon-props-combinations';
 import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
 
@@ -232,3 +232,59 @@ export const AvatarTagGroup = () => <AvatarTagGroupDemo />;
 AvatarTagGroup.story = {
   name: 'avatar tagGroup',
 };
+
+class TagGroupCloseableDemo extends React.Component {
+    constructor(props){
+        super(props);
+        this.state = {
+            tagList: [
+                { tagKey: '1', color: 'white', children: '抖音',  closable: true,},
+                { tagKey: '2',color: 'white', children: '火山小视频', closable: true,},
+                { tagKey: '3',color: 'white', children: '剪映', closable: true,},
+                { tagKey: '4',color: 'white', children: '皮皮虾', closable: true,},
+            ]
+        };
+        this.tagListClick = this.tagListClick.bind(this);
+    }
+
+    tagListClick(value, e, tagKey){
+        const newTagList = [...this.state.tagList];
+        const closeTagIndex = newTagList.findIndex(t => t.tagKey === tagKey);
+        newTagList.splice(closeTagIndex, 1);
+        this.setState({
+          tagList: newTagList,
+        });
+    }
+
+    render() {
+        return (
+            <div style={ {
+                backgroundColor: 'var(--semi-color-fill-0)',
+                height: 35,
+                width: 300,
+                display: 'flex',
+                alignItems: 'center',
+                padding: '0 10px',
+                marginBottom: 30,
+            }}>
+                <TagGroup
+                    maxTagCount={3}
+                    style={ {
+                        display: 'flex',
+                        alignItems: 'center',
+                        width: 350,
+                    }}
+                    tagList={this.state.tagList}
+                    size='large'
+                    onTagClose={this.tagListClick}
+                />
+            </div>
+        );
+    }
+}
+
+export const TagGroupCloseable = () => <TagGroupCloseableDemo />;
+
+TagGroupCloseable.story = {
+  name: 'tagGroup closable',
+}

package/tag/group.tsx

@@ -21,6 +21,7 @@ export interface TagGroupProps<T> {
     popoverProps?: PopoverProps;
     avatarShape?: AvatarShape;
     mode?: string;
+    onTagClose: (tagChildren: React.ReactNode, event: React.MouseEvent<HTMLElement>, tagKey: string | number) => void;
 }
 
 export default class TagGroup<T> extends PureComponent<TagGroupProps<T>> {
@@ -29,6 +30,7 @@ export default class TagGroup<T> extends PureComponent<TagGroupProps<T>> {
         className: '',
         size: tagSize[0],
         avatarShape: 'square',
+        onTagClose: () => undefined,
     };
 
     static propTypes = {
@@ -40,6 +42,7 @@ export default class TagGroup<T> extends PureComponent<TagGroupProps<T>> {
         tagList: PropTypes.array,
         size: PropTypes.oneOf(tagSize),
         mode: PropTypes.string,
+        onTagClose: PropTypes.func,
         showPopover: PropTypes.bool,
         popoverProps: PropTypes.object,
         avatarShape: PropTypes.oneOf(avatarShapeSet),
@@ -95,18 +98,32 @@ export default class TagGroup<T> extends PureComponent<TagGroupProps<T>> {
     }
 
     renderAllTags() {
-        const { tagList, size, mode, avatarShape } = this.props;
-        const renderTags = tagList.map((tag, index): (Tag | React.ReactNode) => {
+        const { tagList, size, mode, avatarShape, onTagClose } = this.props;
+        const renderTags = tagList.map((tag): (Tag | React.ReactNode) => {
             if (mode === 'custom') {
                 return tag as React.ReactNode;
             }
             if (!(tag as TagProps).size) {
                 (tag as TagProps).size = size;
             }
+            
             if (!(tag as TagProps).avatarShape) {
                 (tag as TagProps).avatarShape = avatarShape;
             }
-            return <Tag key={`${index}-tag`} {...(tag as TagProps)} />;
+
+            if (!(tag as TagProps).tagKey) {
+                if (typeof (tag as TagProps).children === 'string' || typeof (tag as TagProps).children === 'number') {
+                    (tag as TagProps).tagKey = (tag as TagProps).children as string | number;
+                } else {
+                    (tag as TagProps).tagKey = Math.random();
+                }
+            }
+            return <Tag {...(tag as TagProps)} key={(tag as TagProps).tagKey} onClose={(tagChildren, e, tagKey) => {
+                if ((tag as TagProps).onClose) {
+                    (tag as TagProps).onClose(tagChildren, e, tagKey);
+                }
+                onTagClose && onTagClose(tagChildren, e, tagKey);
+            }} />;
         });
         return renderTags;
     }

package/tag/index.tsx

@@ -40,6 +40,7 @@ export default class Tag extends Component<TagProps, TagState> {
 
     static propTypes = {
         children: PropTypes.node,
+        tagKey: PropTypes.oneOf([PropTypes.string, PropTypes.number]),
         size: PropTypes.oneOf(tagSize),
         color: PropTypes.oneOf(tagColors),
         type: PropTypes.oneOf(tagType),
@@ -79,11 +80,11 @@ export default class Tag extends Component<TagProps, TagState> {
         }
     }
 
-    close(e: React.MouseEvent<HTMLElement>, value: React.ReactNode) {
+    close(e: React.MouseEvent<HTMLElement>, value: React.ReactNode, tagKey: string | number) {
         const { onClose } = this.props;
         e.stopPropagation();
         e.nativeEvent.stopImmediatePropagation();
-        onClose && onClose(value, e);
+        onClose && onClose(value, e, tagKey);
         // when user call e.preventDefault() in onClick callback, tag will not hidden
         if (e.defaultPrevented) {
             return;
@@ -96,7 +97,7 @@ export default class Tag extends Component<TagProps, TagState> {
         switch (event.key) {
             case "Backspace":
             case "Delete":
-                closable && this.close(event, this.props.children);
+                closable && this.close(event, this.props.children, this.props.tagKey);
                 handlePrevent(event);
                 break;
             case "Enter":
@@ -119,7 +120,7 @@ export default class Tag extends Component<TagProps, TagState> {
     }
 
     render() {
-        const { children, size, color, closable, visible, onClose, onClick, className, type, avatarSrc, avatarShape, tabIndex, ...attr } = this.props;
+        const { tagKey, children, size, color, closable, visible, onClose, onClick, className, type, avatarSrc, avatarShape, tabIndex, ...attr } = this.props;
         const { visible: isVisible } = this.state;
         const clickable = onClick !== Tag.defaultProps.onClick || closable;
         // only when the Tag is clickable or closable, the value of tabIndex is allowed to be passed in. 
@@ -145,7 +146,7 @@ export default class Tag extends Component<TagProps, TagState> {
         const wrapProps = clickable ? ({ ...baseProps, ...a11yProps }) : baseProps;
         const closeIcon = closable ? (
             // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-            <div className={`${prefixCls}-close`} onClick={e => this.close(e, children)}>
+            <div className={`${prefixCls}-close`} onClick={e => this.close(e, children, tagKey)}>
                 <IconClose size="small" />
             </div>
         ) : null;

package/tag/interface.ts

@@ -22,12 +22,13 @@ export type AvatarShape = 'circle' | 'square';
 
 export interface TagProps {
     children?: React.ReactNode;
+    tagKey?: string | number;
     size?: TagSize;
     color?: TagColor;
     type?: TagType;
     closable?: boolean;
     visible?: boolean;
-    onClose?: (tagChildren: React.ReactNode, event: React.MouseEvent<HTMLElement>) => void;
+    onClose?: (tagChildren: React.ReactNode, event: React.MouseEvent<HTMLElement>, tagKey: string | number) => void;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     style?: React.CSSProperties;
     className?: string;

package/transfer/_story/transfer.stories.js

@@ -195,7 +195,7 @@ TransferDraggableAndDisabled.story = {
 }
 
 
-const ControledTransfer = () => {
+const ControlledTransfer = () => {
   const [value, setValue] = useState([2, 3]);
 
   const handleChange = value => {
@@ -209,7 +209,7 @@ const ControledTransfer = () => {
   );
 };
 
-export const ControlledTransfer = () => <ControledTransfer />;
+export const ControlledTransfer = () => <ControlledTransfer />;
 
 ControlledTransfer.story = {
   name: '受控Transfer',

package/tree/_story/tree.stories.js

@@ -1,9 +1,9 @@
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useCallback } from 'react';
 import { cloneDeep, difference, isEqual } from 'lodash';
 import { IconEdit, IconMapPin, IconMore } from '@douyinfe/semi-icons';
 import Tree from '../index';
 import AutoSizer from '../autoSizer';
-import { Button, ButtonGroup, Input, Popover, Toast, Space } from '../../index';
+import { Button, ButtonGroup, Input, Popover, Toast, Space, Select, Switch } from '../../index';
 import BigTree from './BigData';
 import testData from './data';
 const TreeNode = Tree.TreeNode;
@@ -2398,4 +2398,153 @@ export const ValueImpactExpansionWithDynamicTreeData = () => {
       </Space>
     </>
   )
-}
+}
+
+class DemoV extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            gData: [],
+            total: 0,
+            align: 'center',
+            scrollKey: '',
+            expandAll: false,
+        };
+        this.onGen = this.onGen.bind(this);
+        this.onScroll = this.onScroll.bind(this);
+        this.onInputChange = this.onInputChange.bind(this);
+        this.onInputBlur = this.onInputBlur.bind(this);
+        this.onSelectChange = this.onSelectChange.bind(this);
+        this.treeRef = React.createRef();
+    }
+
+    generateData(x = 5, y = 4, z = 3, gData = []) {
+        // x：每一级下的节点总数。y：每级节点里有y个节点、存在子节点。z：树的level层级数（0表示一级）
+        function _loop(_level, _preKey, _tns) {
+            const preKey = _preKey || '0';
+            const tns = _tns || gData;
+
+            const children = [];
+            for (let i = 0; i < x; i++) {
+                const key = `${preKey}-${i}`;
+                tns.push({ label: `${key}-标签`, key: `${key}-key`, value: `${key}-value` });
+                if (i < y) {
+                    children.push(key);
+                }
+            }
+            if (_level < 0) {
+                return tns;
+            }
+            const __level = _level - 1;
+            children.forEach((key, index) => {
+                tns[index].children = [];
+                return _loop(__level, key, tns[index].children);
+            });
+
+            return null;
+        }
+        _loop(z);
+
+        function calcTotal(x, y, z) {
+            const rec = n => (n >= 0 ? x * y ** n-- + rec(n) : 0);
+            return rec(z + 1);
+        }
+        return { gData, total: calcTotal(x, y, z) };
+    }
+
+    onGen() {
+        const { gData, total } = this.generateData();
+        this.setState({
+            gData,
+            total
+        });
+    };
+
+    onScroll(scrollKey, align) {
+      this.treeRef?.current.scrollTo({ key: scrollKey, align});
+    }
+
+    onInputChange(value) {
+      this.setState({
+        scrollKey: value,
+      })
+    }
+
+    onInputBlur(e) {
+      const { value } = e.target;
+      this.onScroll(value, this.state.align);
+    }
+
+    onSelectChange(align){
+      this.setState({
+        align: align,
+      })
+      this.onScroll(this.state.scrollKey, align);
+    }
+
+    render() {
+        const style = {
+            width: 260,
+            border: '1px solid var(--semi-color-border)'
+        };
+        return (
+            <div style={{ padding: '0 20px' }}>
+                <Button onClick={this.onGen}>生成数据: </Button>
+                <span>共 {this.state.total} 个节点</span>
+                <br/>
+                <br/>
+                <div style={{ display: 'flex', alignItems: 'center', }}>
+                  <span>defaultExpandAll</span>
+                  <Switch onChange={(value) => {
+                      this.setState({
+                        expandAll: value,
+                      })
+                  }}/>
+                </div>
+                <br/>
+                <span>跳转的key：</span>
+                <Input
+                  placeholder={'格式：x-x-key'} 
+                  style={{ width: 180, marginRight: 20 }} 
+                  onChange={this.onInputChange}
+                  onBlur={this.onInputBlur}
+                ></Input>
+                <span>scroll align：</span>
+                <Select 
+                  defaultValue='center'
+                  style={{ width: 180 }} 
+                  optionList={['center', 'start', 'end', 'smart', 'auto'].map(item => ({
+                    value: item,
+                    label: item,
+                  }))}
+                  onChange={this.onSelectChange}
+                >
+                </Select>
+                <br />
+                <br />
+                {this.state.gData.length ? (
+                    <Tree
+                        key={`key-${this.state.expandAll}`}
+                        ref={this.treeRef}
+                        defaultExpandAll={this.state.expandAll}
+                        treeData={this.state.gData}
+                        filterTreeNode
+                        showFilteredOnly
+                        style={style}
+                        virtualize={{
+                            // if set height for tree, it will fill 100%
+                            height: 300,
+                            itemSize: 28,
+                        }}
+                    />
+                ) : null}
+            </div>
+        );
+    }
+}
+
+export const virtualizeTree = () => <DemoV />;
+
+virtualizeTree.story = {
+  name: 'virtualize tree',
+};

package/tree/index.tsx

@@ -39,7 +39,8 @@ import {
     TreeNodeData,
     FlattenNode,
     KeyEntity,
-    OptionProps
+    OptionProps,
+    ScrollData,
 } from './interface';
 import CheckboxGroup from '../checkbox/checkboxGroup';
 
@@ -146,6 +147,7 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
     onNodeClick: any;
     onMotionEnd: any;
     context: ContextValue;
+    virtualizedListRef: React.RefObject<any>;
 
     constructor(props: TreeProps) {
         super(props);
@@ -179,6 +181,7 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
         this.optionsRef = React.createRef();
         this.foundation = new TreeFoundation(this.adapter);
         this.dragNode = null;
+        this.virtualizedListRef = React.createRef();
     }
 
     /**
@@ -493,6 +496,17 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
         this.foundation.handleInputChange(value);
     };
 
+    scrollTo = (scrollData: ScrollData) => {
+        const { key, align = 'center' } = scrollData;
+        const { flattenNodes } = this.state;
+        if (key) {
+            const index = flattenNodes?.findIndex((node) => {
+                return node.key === key;
+            });
+            index >= 0 && (this.virtualizedListRef.current as any)?.scrollToItem(index, align);
+        }
+    }
+
     renderInput() {
         const {
             searchClassName,
@@ -664,6 +678,7 @@ class Tree extends BaseComponent<TreeProps, TreeState> {
             <AutoSizer defaultHeight={virtualize.height} defaultWidth={virtualize.width}>
                 {({ height, width }: { width: string | number; height: string | number }) => (
                     <VirtualList
+                        ref={this.virtualizedListRef}
                         itemCount={flattenNodes.length}
                         itemSize={virtualize.itemSize}
                         height={height}