@douyinfe/semi-ui 2.11.0-beta.1 → 2.11.0

package/lib/es/table/HeadTable.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Fixed, TableComponents, Scroll, BodyScrollEvent, ColumnProps } from './interface';
+import { Fixed, TableComponents, Scroll, BodyScrollEvent, ColumnProps, OnHeaderRow } from './interface';
 export interface HeadTableProps {
     [x: string]: any;
     anyColumnFixed?: boolean;
@@ -15,6 +15,7 @@ export interface HeadTableProps {
     selectedRowKeysSet: Set<any>;
     showHeader?: boolean;
     onDidUpdate?: (ref: React.MutableRefObject<any>) => void;
+    onHeaderRow?: OnHeaderRow<any>;
 }
 declare const _default: React.ForwardRefExoticComponent<Pick<HeadTableProps, keyof HeadTableProps> & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/lib/es/table/HeadTable.js

@@ -96,7 +96,8 @@ HeadTable.propTypes = {
   }),
   selectedRowKeysSet: PropTypes.instanceOf(_Set).isRequired,
   showHeader: PropTypes.bool,
-  onDidUpdate: PropTypes.func
+  onDidUpdate: PropTypes.func,
+  onHeaderRow: PropTypes.func
 };
 HeadTable.defaultProps = {
   handleBodyScroll: _noop

package/lib/es/table/Table.js

@@ -658,6 +658,7 @@ class Table extends BaseComponent {
         components,
         headerRef,
         bodyRef,
+        onHeaderRow,
         rowSelection,
         dataSource,
         bodyHasScrollBar,
@@ -678,6 +679,7 @@ class Table extends BaseComponent {
         scroll: scroll,
         showHeader: showHeader,
         selectedRowKeysSet: selectedRowKeysSet,
+        onHeaderRow: onHeaderRow,
         dataSource: dataSource,
         bodyHasScrollBar: bodyHasScrollBar
       }) : null;

package/lib/es/table/interface.d.ts

@@ -211,7 +211,7 @@ export declare type GetCheckboxProps<RecordType> = (record: RecordType) => Check
 export declare type RowSelectionOnChange<RecordType> = (selectedRowKeys?: (string | number)[], selectedRows?: RecordType[]) => void;
 export declare type RowSelectionOnSelect<RecordType> = (record?: RecordType, selected?: boolean, selectedRows?: RecordType[], nativeEvent?: React.MouseEvent) => void;
 export declare type RowSelectionOnSelectAll<RecordType> = (selected?: boolean, selectedRows?: RecordType[], changedRows?: RecordType[]) => void;
-export declare type ExpandIcon = ((expanded?: boolean) => React.ReactNode) | React.ReactNode | boolean;
+export declare type ExpandIcon = ((expanded?: boolean) => React.ReactNode) | React.ReactNode;
 export declare type ExpandedRowRender<RecordType> = (record?: RecordType, index?: number, expanded?: boolean) => React.ReactNode;
 export declare type Footer<RecordType> = ReactNode | ((pageData?: RecordType[]) => React.ReactNode);
 export declare type FormatPageText = ((pageInfo?: {

package/lib/es/timeline/index.d.ts

@@ -11,7 +11,7 @@ export interface TimelineProps extends Pick<React.AriaAttributes, 'aria-label'>
     className?: string;
     style?: React.CSSProperties;
     dataSource?: Data[];
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
 }
 declare class Timeline extends PureComponent<TimelineProps> {
     static contextType: React.Context<import("../configProvider/context").ContextValue>;

package/lib/es/timeline/item.d.ts

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import '@douyinfe/semi-foundation/lib/es/timeline/timeline.css';
 export interface TimelineItemProps {
     color?: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     time?: React.ReactNode;
     type?: 'default' | 'ongoing' | 'success' | 'warning' | 'error';
     dot?: React.ReactNode;

package/list/index.tsx

@@ -17,7 +17,7 @@ export { ListItemProps } from './item';
 export interface ListProps<T> {
     style?: React.CSSProperties;
     className?: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     bordered?: boolean;
     footer?: React.ReactNode;
     header?: React.ReactNode;

package/list/item.tsx

@@ -12,7 +12,7 @@ export interface ListItemProps {
     main?: React.ReactNode;
     align?: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
     className?: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     style?: React.CSSProperties;
     onClick?: React.MouseEventHandler<HTMLLIElement>;
     onRightClick?: React.MouseEventHandler<HTMLLIElement>;

package/modal/Modal.tsx

@@ -23,7 +23,7 @@ export type Directions = 'ltr' | 'rtl';
 
 export interface ModalReactProps extends ModalProps {
     cancelButtonProps?: ButtonProps;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     okButtonProps?: ButtonProps;
     bodyStyle?: CSSProperties;
     maskStyle?: CSSProperties;
@@ -50,7 +50,7 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
         centered: PropTypes.bool,
         visible: PropTypes.bool,
         width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        height:  PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
         confirmLoading: PropTypes.bool,
         cancelLoading: PropTypes.bool,
         okText: PropTypes.string,
@@ -193,23 +193,23 @@ class Modal extends BaseComponent<ModalReactProps, ModalState> {
 
 
     static info = function (props: ModalReactProps) {
-        return confirm(withInfo(props));
+        return confirm<ReturnType<typeof withInfo>>(withInfo(props));
     };
 
     static success = function (props: ModalReactProps) {
-        return confirm(withSuccess(props));
+        return confirm<ReturnType<typeof withSuccess>>(withSuccess(props));
     };
 
     static error = function (props: ModalReactProps) {
-        return confirm(withError(props));
+        return confirm<ReturnType<typeof withError>>(withError(props));
     };
 
     static warning = function (props: ModalReactProps) {
-        return confirm(withWarning(props));
+        return confirm<ReturnType<typeof withWarning>>(withWarning(props));
     };
 
     static confirm = function (props: ModalReactProps) {
-        return confirm(withConfirm(props));
+        return confirm<ReturnType<typeof withConfirm>>(withConfirm(props));
     };
 
     static destroyAll = function destroyAllFn() {

package/modal/ModalContent.tsx

@@ -21,7 +21,7 @@ let uuid = 0;
 
 
 export interface ModalContentReactProps extends ModalContentProps {
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
 }
 export default class ModalContent extends BaseComponent<ModalContentReactProps, ModalContentState> {
     static contextType = ConfigContext;

package/modal/confirm.tsx

@@ -5,14 +5,14 @@ import ConfirmModal from './ConfirmModal';
 
 import '@douyinfe/semi-foundation/modal/modal.scss';
 import { get } from 'lodash';
-import { IconAlertTriangle, IconInfoCircle, IconTickCircle, IconHelpCircle, IconAlertCircle } from '@douyinfe/semi-icons';
+import { IconAlertCircle, IconAlertTriangle, IconHelpCircle, IconInfoCircle, IconTickCircle } from '@douyinfe/semi-icons';
 import { Motion } from '../_base/base';
 
-export interface ConfirmProps extends ModalReactProps{
+export interface ConfirmProps extends ModalReactProps {
     type: 'success' | 'info' | 'warning' | 'error' | 'confirm';
 }
 
-export default function confirm(props: ConfirmProps) {
+export default function confirm<T>(props: ConfirmProps) {
     // create a dom in adapter?
     const div = document.createElement('div');
     document.body.appendChild(div);
@@ -51,7 +51,7 @@ export default function confirm(props: ConfirmProps) {
     } : false;
 
     function render(renderProps: ConfirmProps) {
-        ReactDOM.render(<ConfirmModal {...renderProps} motion={mergedMotion} />, div);
+        ReactDOM.render(<ConfirmModal {...renderProps} motion={mergedMotion}/>, div);
     }
 
     function close() {
@@ -62,7 +62,7 @@ export default function confirm(props: ConfirmProps) {
         render(currentConfig);
     }
 
-    function update(newConfig: ConfirmProps) {
+    function update(newConfig: T extends { type: Exclude<ConfirmProps['type'], 'confirm'> } ? ModalReactProps : ConfirmProps) {
         currentConfig = {
             ...currentConfig,
             ...newConfig,
@@ -79,11 +79,10 @@ export default function confirm(props: ConfirmProps) {
 }
 
 
-
 export function withInfo(props: ModalReactProps) {
     return {
         type: 'info' as const,
-        icon: <IconInfoCircle />,
+        icon: <IconInfoCircle/>,
         ...props
     };
 }
@@ -91,7 +90,7 @@ export function withInfo(props: ModalReactProps) {
 export function withSuccess(props: ModalReactProps) {
     return {
         type: 'success' as const,
-        icon: <IconTickCircle />,
+        icon: <IconTickCircle/>,
         ...props
     };
 }
@@ -99,7 +98,7 @@ export function withSuccess(props: ModalReactProps) {
 export function withWarning(props: ModalReactProps) {
     return {
         type: 'warning' as const,
-        icon: <IconAlertTriangle />,
+        icon: <IconAlertTriangle/>,
         ...props
     };
 }
@@ -107,7 +106,7 @@ export function withWarning(props: ModalReactProps) {
 export function withError(props: ModalReactProps) {
     return {
         type: 'error' as const,
-        icon: <IconAlertCircle />,
+        icon: <IconAlertCircle/>,
         ...props
     };
 }
@@ -115,7 +114,7 @@ export function withError(props: ModalReactProps) {
 export function withConfirm(props: ModalReactProps) {
     return {
         type: 'confirm' as const,
-        icon: <IconHelpCircle />,
+        icon: <IconHelpCircle/>,
         ...props
     };
 }

package/modal/useModal/index.tsx

@@ -19,7 +19,15 @@ function usePatchElement(): ([ReactNode[], (element: ReactNode) => () => void])
     return [elements, patchElement];
 }
 
-export default function useModal() {
+type UseModalReturnHooksType = (config: ModalReactProps) => { destroy: () => void, update: (newConfig: ConfirmProps) => void };
+
+export default function useModal(): [{
+    info: UseModalReturnHooksType,
+    success: UseModalReturnHooksType,
+    error:UseModalReturnHooksType,
+    warning: UseModalReturnHooksType,
+    confirm: UseModalReturnHooksType
+}, ReactNode] {
     const [elements, patchElement] = usePatchElement();
 
     // eslint-disable-next-line max-len

package/navigation/Footer.tsx

@@ -10,7 +10,7 @@ import NavContext, { NavContextType } from './nav-context';
 import { BaseProps } from '../_base/baseComponent';
 
 export interface NavFooterProps extends BaseProps {
-    collapseButton?: React.ReactNode | boolean;
+    collapseButton?: React.ReactNode;
     collapseText?: (collapsed?: boolean) => React.ReactNode;
 }
 
@@ -28,7 +28,7 @@ export default class NavFooter extends PureComponent<NavFooterProps> {
     static defaultProps = {
         collapseButton: false,
     };
-    
+
     context: NavContextType;
 
     renderCollapseButton = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.11.0-beta.1",
+    "version": "2.11.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -14,12 +14,12 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "2.11.0-beta.1",
-        "@douyinfe/semi-animation-react": "2.11.0-beta.1",
-        "@douyinfe/semi-foundation": "2.11.0-beta.1",
-        "@douyinfe/semi-icons": "2.11.0-beta.1",
-        "@douyinfe/semi-illustrations": "2.11.0-beta.1",
-        "@douyinfe/semi-theme-default": "2.11.0-beta.1",
+        "@douyinfe/semi-animation": "2.11.0",
+        "@douyinfe/semi-animation-react": "2.11.0",
+        "@douyinfe/semi-foundation": "2.11.0",
+        "@douyinfe/semi-icons": "2.11.0",
+        "@douyinfe/semi-illustrations": "2.11.0",
+        "@douyinfe/semi-theme-default": "2.11.0",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -69,13 +69,13 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "23088cd48e6c894f541e4358d495001e923321fd",
+    "gitHead": "f7a5cae3d9190faff4a08c5a4da23927a1ab86e5",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.11.0-beta.1",
+        "@douyinfe/semi-scss-compile": "2.11.0",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

package/radio/radioGroup.tsx

@@ -30,7 +30,7 @@ export type RadioGroupProps = {
     value?: string | number;
     onChange?: (event: RadioChangeEvent) => void;
     className?: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     style?: React.CSSProperties;
     direction?: ArrayElement<typeof strings.DIRECTION_SET>;
     mode?: RadioMode;

package/select/index.tsx

@@ -28,6 +28,7 @@ import { isSemiIcon } from '../_utils';
 import { Subtract } from 'utility-types';
 
 import warning from '@douyinfe/semi-foundation/utils/warning';
+import { getUuidShort } from '@douyinfe/semi-foundation/utils/uuid';
 
 import '@douyinfe/semi-foundation/select/select.scss';
 import { Locale } from '../locale/interface';
@@ -50,7 +51,7 @@ type ExcludeInputType = {
 type OnChangeValueType = string | number | Record<string, any>;
 export interface optionRenderProps {
     key?: any;
-    label?: string | React.ReactNode | number;
+    label?: React.ReactNode;
     value?: string | number;
     style?: React.CSSProperties;
     className?: string;
@@ -340,7 +341,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
             isHovering: false,
         };
         /* Generate random string */
-        this.selectOptionListID = Math.random().toString(36).slice(2);
+        this.selectOptionListID = '';
         this.virtualizeListRef = React.createRef();
         this.inputRef = React.createRef();
         this.triggerRef = React.createRef();
@@ -559,6 +560,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
 
     componentDidMount() {
         this.foundation.init();
+        this.selectOptionListID = getUuidShort();
     }
 
     componentWillUnmount() {

package/sideSheet/SideSheetContent.tsx

@@ -23,7 +23,7 @@ export interface SideSheetContentProps {
     style: CSSProperties;
     bodyStyle?: CSSProperties;
     className: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     footer?: React.ReactNode;
     'aria-label'?: string;
 }

package/table/HeadTable.tsx

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 
 import ColGroup from './ColGroup';
 import TableHeader from './TableHeader';
-import { Fixed, TableComponents, Scroll, BodyScrollEvent, ColumnProps } from './interface';
+import { Fixed, TableComponents, Scroll, BodyScrollEvent, ColumnProps, OnHeaderRow } from './interface';
 
 export interface HeadTableProps {
     [x: string]: any;
@@ -23,6 +23,7 @@ export interface HeadTableProps {
     selectedRowKeysSet: Set<any>;
     showHeader?: boolean;
     onDidUpdate?: (ref: React.MutableRefObject<any>) => void;
+    onHeaderRow?: OnHeaderRow<any>;
 }
 
 /**
@@ -46,6 +47,7 @@ class HeadTable extends React.PureComponent<HeadTableProps> {
         selectedRowKeysSet: PropTypes.instanceOf(Set).isRequired, // Useful when update is selected
         showHeader: PropTypes.bool,
         onDidUpdate: PropTypes.func,
+        onHeaderRow: PropTypes.func,
     };
 
     static defaultProps = {

package/table/Table.tsx

@@ -1089,6 +1089,7 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
             components,
             headerRef,
             bodyRef,
+            onHeaderRow,
             rowSelection,
             dataSource,
             bodyHasScrollBar,
@@ -1110,6 +1111,7 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
                     scroll={scroll}
                     showHeader={showHeader}
                     selectedRowKeysSet={selectedRowKeysSet}
+                    onHeaderRow={onHeaderRow}
                     dataSource={dataSource}
                     bodyHasScrollBar={bodyHasScrollBar}
                 />

package/table/_story/v2/FixedOnHeaderRow/index.jsx

@@ -0,0 +1,134 @@
+import React, { useState, useMemo, useEffect } from 'react';
+import { Table, Avatar, Toast } from '@douyinfe/semi-ui';
+import * as dateFns from 'date-fns';
+
+App.storyName = 'fix onHeaderRow';
+
+/**
+ * test with cypress
+ */
+export default function App() {
+    const [dataSource, setData] = useState([]);
+    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',
+            fixed: true,
+            width: 250,
+            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),
+        },
+        {
+            title: '大小',
+            dataIndex: 'size',
+            width: 200,
+            sorter: (a, b) => (a.size - b.size > 0 ? 1 : -1),
+            render: text => `${text} KB`,
+        },
+        {
+            title: '所有者',
+            dataIndex: 'owner',
+            width: 200,
+            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',
+            width: 200,
+            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',
+            align: 'center',
+            width: 100,
+        },
+    ];
+
+    const scroll = useMemo(() => ({ y: 300, x: 1200 }), []);
+    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,
+            }),
+            fixed: true,
+        }),
+        []
+    );
+
+    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().valueOf() + randomNumber * DAY,
+                avatarBg: isSemiDesign ? 'grey' : 'red',
+            });
+        }
+        return data;
+    };
+
+    useEffect(() => {
+        const data = getData();
+        setData(data);
+    }, []);
+
+    return (
+        <Table
+            onHeaderRow={(columns, index) => {
+                return {
+                    onClick: event => {
+                        console.log(event);
+                        Toast.info('header click');
+                    }, // 点击表头行
+                };
+            }}
+            columns={columns}
+            dataSource={dataSource}
+            rowSelection={rowSelection}
+            scroll={scroll}
+        />
+    );
+}

package/table/_story/v2/index.js

@@ -4,4 +4,5 @@ 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';

package/table/interface.ts

@@ -240,7 +240,7 @@ export type RowSelectionOnSelect<RecordType> = (
     nativeEvent?: React.MouseEvent
 ) => void;
 export type RowSelectionOnSelectAll<RecordType> = (selected?: boolean, selectedRows?: RecordType[], changedRows?: RecordType[]) => void;
-export type ExpandIcon = ((expanded?: boolean) => React.ReactNode) | React.ReactNode | boolean;
+export type ExpandIcon = ((expanded?: boolean) => React.ReactNode) | React.ReactNode;
 export type ExpandedRowRender<RecordType> = (record?: RecordType, index?: number, expanded?: boolean) => React.ReactNode;
 export type Footer<RecordType> = ReactNode | ((pageData?: RecordType[]) => React.ReactNode);
 export type FormatPageText = ((pageInfo?: { currentStart?: number; currentEnd?: number; total?: number }) => React.ReactNode) | boolean;

package/timeline/index.tsx

@@ -17,7 +17,7 @@ export interface TimelineProps extends Pick<React.AriaAttributes, 'aria-label'>
     className?: string;
     style?: React.CSSProperties;
     dataSource?: Data[];
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
 }
 
 const prefixCls = cssClasses.PREFIX;

package/timeline/item.tsx

@@ -7,7 +7,7 @@ import '@douyinfe/semi-foundation/timeline/timeline.scss';
 
 export interface TimelineItemProps {
     color?: string;
-    children?: React.ReactNode | undefined;
+    children?: React.ReactNode;
     time?: React.ReactNode;
     type?: 'default' | 'ongoing' | 'success' | 'warning' | 'error';
     dot?: React.ReactNode;