@douyinfe/semi-ui 2.1.2 → 2.1.5

package/table/ColGroup.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { get } from 'lodash';
+import { cssClasses } from '@douyinfe/semi-foundation/table/constants';
+import { flattenColumns } from '@douyinfe/semi-foundation/table/utils';
+import { ColumnProps } from './interface';
+
+export interface ColGroupProps {
+    columns?: ColumnProps[];
+    prefixCls?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    components?: Record<string, any>;
+}
+
+export default class ColGroup extends React.PureComponent<ColGroupProps> {
+    static propTypes = {
+        columns: PropTypes.array,
+        prefixCls: PropTypes.string,
+        className: PropTypes.string,
+        style: PropTypes.object,
+        components: PropTypes.object,
+    };
+
+    static defaultProps = {
+        columns: [] as [],
+        prefixCls: cssClasses.PREFIX,
+    };
+
+    render() {
+        const { columns, className, style, prefixCls, components } = this.props;
+
+        // eslint-disable-next-line @typescript-eslint/no-shadow
+        const ColGroup = get(components, 'colgroup.wrapper', 'colgroup');
+        const Col = get(components, 'colgroup.col', 'col');
+
+        const cols = flattenColumns(columns).map((column: ColumnProps, idx: number) => {
+            const colStyle: { width?: number | string; minWidth?: number | string } = {};
+
+            /**
+             * table width
+             */
+            if (column.width) {
+                colStyle.width = column.width;
+                colStyle.minWidth = colStyle.width;
+            }
+
+            return (
+                <Col
+                    className={classnames(`${prefixCls}-col`, column.className)}
+                    key={column.key || column.dataIndex || idx}
+                    style={colStyle}
+                />
+            );
+        });
+
+        const groupCls = classnames(`${prefixCls}-colgroup`, className);
+
+        return (
+            <ColGroup className={groupCls} style={style}>
+                {cols}
+            </ColGroup>
+        );
+    }
+}

package/table/Column.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import ColumnShape from './ColumnShape';
+import { ColumnProps } from './interface';
+
+export default class Column extends React.PureComponent<ColumnProps> {
+    static propTypes = {
+        ...ColumnShape,
+    };
+
+    constructor(props: ColumnProps = {}) {
+        super(props);
+    }
+
+    render(): null {
+        return null;
+    }
+}

package/table/ColumnFilter.tsx

@@ -0,0 +1,203 @@
+/* eslint-disable no-nested-ternary */
+/* eslint-disable eqeqeq */
+import React, { isValidElement } from 'react';
+import cls from 'classnames';
+import { noop } from 'lodash';
+import { IconFilter } from '@douyinfe/semi-icons';
+
+import { cssClasses } from '@douyinfe/semi-foundation/table/constants';
+
+import Dropdown, { DropdownProps } from '../dropdown';
+import { Trigger, Position } from '../tooltip';
+import { Radio } from '../radio';
+import { Checkbox } from '../checkbox';
+import {
+    FilterIcon,
+    Filter,
+    OnFilterDropdownVisibleChange,
+    RenderFilterDropdownItem
+} from './interface';
+
+function renderDropdown(props: RenderDropdownProps = {}, nestedElem: React.ReactNode = null, level = 0) {
+    const {
+        filterMultiple = true,
+        filters = [],
+        filteredValue = [],
+        filterDropdownVisible,
+        onSelect = noop,
+        onFilterDropdownVisibleChange = noop,
+        trigger = 'click',
+        position = 'bottom',
+        renderFilterDropdownItem,
+    } = props;
+
+    const dropdownProps: DropdownProps = {
+        ...props,
+        onVisibleChange: (visible: boolean) => onFilterDropdownVisibleChange(visible),
+        trigger,
+        position,
+        render: (
+            <Dropdown.Menu>
+                {Array.isArray(filters) &&
+                    filters.map((filter, index) => {
+                        const changeFn = (e: React.MouseEvent<HTMLLIElement>) => {
+                            const domEvent = e && e.nativeEvent;
+                            if (domEvent) {
+                                // Block this event to prevent the pop-up layer from closing
+                                domEvent.stopImmediatePropagation();
+
+                                // Prevent bubbling and default events to prevent label click events from triggering twice
+                                domEvent.stopPropagation();
+                                domEvent.preventDefault();
+                            }
+                            let values = [...filteredValue];
+
+                            const included = values.includes(filter.value);
+                            const idx = values.indexOf(filter.value);
+
+                            if (idx > -1) {
+                                values.splice(idx, 1);
+                            } else if (filterMultiple) {
+                                values.push(filter.value);
+                            } else {
+                                values = [filter.value];
+                            }
+                            return onSelect({
+                                value: filter.value,
+                                filteredValue: values,
+                                included: !included,
+                                domEvent,
+                            });
+                        };
+
+                        const checked = filteredValue.includes(filter.value);
+                        const { text } = filter;
+                        const { value } = filter;
+                        const key = `${level}_${index}`;
+
+                        const dropdownItem =
+                            typeof renderFilterDropdownItem === 'function' ?
+                                renderFilterDropdownItem({
+                                    onChange: changeFn,
+                                    filterMultiple,
+                                    value,
+                                    text,
+                                    checked,
+                                    filteredValue,
+                                    level,
+                                }) :
+                                null;
+
+                        let item =
+                            dropdownItem && React.isValidElement(dropdownItem) ? (
+                                React.cloneElement(dropdownItem, { key })
+                            ) : (
+                                <Dropdown.Item key={key} onClick={changeFn}>
+                                    {filterMultiple ? (
+                                        <Checkbox checked={checked}>{text}</Checkbox>
+                                    ) : (
+                                        <Radio checked={checked}>{text}</Radio>
+                                    )}
+                                </Dropdown.Item>
+                            );
+
+                        if (Array.isArray(filter.children) && filter.children.length) {
+                            const childrenDropdownProps = {
+                                ...props,
+                                filters: filter.children,
+                                trigger: 'hover' as const,
+                                position: 'right' as const,
+                            };
+
+                            delete childrenDropdownProps.filterDropdownVisible;
+
+                            item = renderDropdown(childrenDropdownProps, item, level + 1);
+                        }
+                        return item;
+                    })}
+            </Dropdown.Menu>
+        ),
+    };
+
+    if (filterDropdownVisible != null) {
+        dropdownProps.visible = filterDropdownVisible;
+    }
+
+    return (
+        <Dropdown {...dropdownProps} key={`Dropdown_level_${level}`}>
+            {nestedElem}
+        </Dropdown>
+    );
+}
+
+export interface ColumnFilterProps {
+    prefixCls?: string;
+    filteredValue?: any[];
+    filterIcon?: FilterIcon;
+    filterDropdown?: React.ReactElement;
+    renderFilterDropdown?: (props: RenderDropdownProps, options: { iconElem: React.ReactNode }) => React.ReactElement;
+    filterDropdownProps?: DropdownProps;
+    onFilterDropdownVisibleChange?: OnFilterDropdownVisibleChange;
+    onSelect?: (data: OnSelectData) => void;
+}
+
+export default function ColumnFilter(props: ColumnFilterProps = {}): React.ReactElement {
+    const {
+        prefixCls = cssClasses.PREFIX,
+        filteredValue,
+        filterIcon = 'filter',
+        renderFilterDropdown,
+        filterDropdownProps,
+    } = props;
+    let { filterDropdown = null } = props;
+
+    const finalCls = cls(`${prefixCls}-column-filter`, {
+        on: Array.isArray(filteredValue) && filteredValue.length,
+    });
+
+    let iconElem;
+
+    if (typeof filterIcon === 'function') {
+        iconElem = filterIcon(Array.isArray(filteredValue) && filteredValue.length > 0);
+    } else if (isValidElement(filterIcon)) {
+        iconElem = filterIcon;
+    } else {
+        iconElem = (
+            <div className={finalCls}>
+                <IconFilter size="small" />
+            </div>
+        );
+    }
+
+    const renderProps = {
+        ...props,
+        ...filterDropdownProps,
+    };
+
+    filterDropdown = React.isValidElement<ColumnFilterProps>(filterDropdown) ?
+        filterDropdown :
+        typeof renderFilterDropdown === 'function' ?
+            renderFilterDropdown(renderProps, { iconElem }) :
+            renderDropdown(renderProps, iconElem);
+
+    return filterDropdown;
+}
+
+export interface OnSelectData {
+    value: any;
+    filteredValue: any;
+    included: boolean;
+    domEvent: React.MouseEvent<HTMLElement>;
+}
+
+export interface RenderDropdownProps {
+    filterMultiple?: boolean;
+    filters?: Filter[];
+    filteredValue?: any[];
+    filterDropdownVisible?: boolean;
+    onSelect?: (data: OnSelectData) => void;
+    onFilterDropdownVisibleChange?: OnFilterDropdownVisibleChange;
+    trigger?: Trigger;
+    position?: Position;
+    renderFilterDropdownItem?: RenderFilterDropdownItem;
+}

package/table/ColumnSelection.tsx

@@ -0,0 +1,88 @@
+/* eslint-disable max-len */
+import React from 'react';
+import BaseComponent from '../_base/baseComponent';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import { noop } from 'lodash';
+
+import { cssClasses } from '@douyinfe/semi-foundation/table/constants';
+import TableSelectionCellFoundation, { TableSelectionCellAdapter, TableSelectionCellEvent } from '@douyinfe/semi-foundation/table/tableSelectionCellFoundation';
+
+import { Checkbox, CheckboxEvent, CheckboxProps } from '../checkbox';
+
+export interface TableSelectionCellProps {
+    columnTitle?: string; // TODO: future api
+    getCheckboxProps?: () => CheckboxProps;
+    type?: string; // TODO: future api
+    onChange?: (value: any, e: TableSelectionCellEvent) => void;
+    selected?: boolean;
+    disabled?: boolean;
+    indeterminate?: boolean; // Intermediate state, shown as a solid horizontal line
+    prefixCls?: string;
+    className?: string;
+}
+
+/**
+ * render selection cell
+ */
+export default class TableSelectionCell extends BaseComponent<TableSelectionCellProps, Record<string, any>> {
+    static propTypes = {
+        columnTitle: PropTypes.string,
+        getCheckboxProps: PropTypes.func,
+        type: PropTypes.string,
+        onChange: PropTypes.func,
+        selected: PropTypes.bool,
+        disabled: PropTypes.bool,
+        indeterminate: PropTypes.bool,
+        prefixCls: PropTypes.string,
+        className: PropTypes.string,
+    };
+
+    static defaultProps = {
+        disabled: false,
+        onChange: noop,
+        prefixCls: cssClasses.PREFIX,
+    };
+
+    get adapter(): TableSelectionCellAdapter {
+        return {
+            ...super.adapter,
+            notifyChange: (...args) => this.props.onChange(...args),
+        };
+    }
+
+    constructor(props: TableSelectionCellProps) {
+        super(props);
+        this.foundation = new TableSelectionCellFoundation(this.adapter);
+    }
+
+    handleChange = (e: CheckboxEvent) => this.foundation.handleChange(e);
+
+    render() {
+        const { selected, getCheckboxProps, indeterminate, disabled, prefixCls, className } = this.props;
+        let checkboxProps = {
+            onChange: this.handleChange,
+            disabled,
+            indeterminate,
+            checked: selected,
+        };
+
+        if (typeof getCheckboxProps === 'function') {
+            checkboxProps = { ...checkboxProps, ...getCheckboxProps() };
+        }
+
+        const wrapCls = classnames(
+            `${prefixCls}-selection-wrap`,
+            {
+                [`${prefixCls}-selection-disabled`]: disabled,
+            },
+            className
+        );
+
+        return (
+            <span className={wrapCls}>
+                <Checkbox {...checkboxProps} />
+            </span>
+        );
+    }
+}

package/table/ColumnShape.ts

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+import { strings } from '@douyinfe/semi-foundation/table/constants';
+
+export default {
+    align: PropTypes.oneOf(strings.ALIGNS),
+    className: PropTypes.string,
+    colSpan: PropTypes.number,
+    dataIndex: PropTypes.string,
+    defaultSortOrder: PropTypes.oneOf(strings.SORT_DIRECTIONS),
+    filterChildrenRecord: PropTypes.bool,
+    filterDropdownProps: PropTypes.object,
+    filterDropdown: PropTypes.node,
+    filterDropdownVisible: PropTypes.bool,
+    filterIcon: PropTypes.func,
+    filterMultiple: PropTypes.bool,
+    filteredValue: PropTypes.arrayOf(PropTypes.any),
+    filters: PropTypes.array,
+    fixed: PropTypes.oneOf(strings.FIXED_SET),
+    onCell: PropTypes.func,
+    onFilter: PropTypes.func,
+    onFilterDropdownVisibleChange: PropTypes.func,
+    onHeaderCell: PropTypes.func,
+    onSorterChange: PropTypes.func, // TODO: future api
+    render: PropTypes.func,
+    renderFilterDropdownItem: PropTypes.func,
+    sortChildrenRecord: PropTypes.bool,
+    sortDirections: PropTypes.arrayOf(PropTypes.string), // TODO: future api
+    sortOrder: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+    sorter: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+    title: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+    useFullRender: PropTypes.bool,
+    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+};

package/table/ColumnSorter.tsx

@@ -0,0 +1,58 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import cls from 'classnames';
+import { noop } from 'lodash';
+import { IconCaretup, IconCaretdown } from '@douyinfe/semi-icons';
+
+import { cssClasses, strings } from '@douyinfe/semi-foundation/table/constants';
+
+import { SortOrder } from './interface';
+
+export interface ColumnSorterProps {
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    prefixCls?: string;
+    sortOrder?: SortOrder;
+}
+
+export default class ColumnSorter extends PureComponent<ColumnSorterProps> {
+    static propTypes = {
+        className: PropTypes.string,
+        style: PropTypes.object,
+        onClick: PropTypes.func,
+        prefixCls: PropTypes.string,
+        sortOrder: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+    };
+
+    static defaultProps = {
+        prefixCls: cssClasses.PREFIX,
+        onClick: noop,
+        sortOrder: false,
+    };
+
+    render() {
+        const { prefixCls, onClick, sortOrder, style } = this.props;
+
+        const iconBtnSize = 'small';
+
+        const upCls = cls(`${prefixCls}-column-sorter-up`, {
+            on: sortOrder === strings.SORT_DIRECTIONS[0],
+        });
+
+        const downCls = cls(`${prefixCls}-column-sorter-down`, {
+            on: sortOrder === strings.SORT_DIRECTIONS[1],
+        });
+
+        return (
+            <div style={style} className={`${prefixCls}-column-sorter`} onClick={onClick}>
+                <span className={`${upCls}`}>
+                    <IconCaretup size={iconBtnSize} />
+                </span>
+                <span className={`${downCls}`}>
+                    <IconCaretdown size={iconBtnSize} />
+                </span>
+            </div>
+        );
+    }
+}

package/table/CustomExpandIcon.tsx

@@ -0,0 +1,95 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { noop } from 'lodash';
+
+import { IconChevronRight, IconChevronDown, IconTreeTriangleDown, IconTreeTriangleRight } from '@douyinfe/semi-icons';
+import { cssClasses } from '@douyinfe/semi-foundation/table/constants';
+
+import Rotate from '../motions/Rotate';
+
+export interface CustomExpandIconProps {
+    expanded?: boolean;
+    componentType?: 'tree' | 'expand';
+    onClick?: (nextExpand: boolean, e: React.MouseEvent<HTMLDivElement>) => void;
+    onMouseEnter?: (e: React.MouseEvent<HTMLSpanElement>) => void;
+    onMouseLeave?: (e: React.MouseEvent<HTMLSpanElement>) => void;
+    expandIcon?: ((expanded?: boolean) => React.ReactNode) | React.ReactNode;
+    prefixCls?: string;
+    motion?: boolean;
+}
+
+/**
+ * render expand icon
+ */
+export default function CustomExpandIcon(props: CustomExpandIconProps) {
+    const {
+        expanded,
+        componentType,
+        onClick = noop,
+        onMouseEnter = noop,
+        onMouseLeave = noop,
+        expandIcon,
+        prefixCls = cssClasses.PREFIX,
+        motion = true,
+    } = props;
+
+    let icon;
+
+    if (React.isValidElement(expandIcon)) {
+        icon = expandIcon;
+    } else if (typeof expandIcon === 'function') {
+        icon = expandIcon(expanded);
+    } else if (componentType === 'tree') {
+        icon = expanded && !motion ? <IconTreeTriangleDown size="small" /> : <IconTreeTriangleRight size="small" />;
+    } else {
+        icon = expanded && !motion ? <IconChevronDown /> : <IconChevronRight />;
+    }
+
+    const handleClick = useCallback(
+        e => {
+            if (typeof onClick === 'function') {
+                onClick(!expanded, e);
+            }
+        },
+        [expanded]
+    );
+
+    if (motion) {
+        icon = (
+            <Rotate isOpen={expanded} enterDeg={90}>
+                {icon}
+            </Rotate>
+        );
+    }
+
+    return (
+        <span
+            onClick={handleClick}
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
+            className={`${prefixCls}-expand-icon`}
+        >
+            {icon}
+        </span>
+    );
+}
+
+CustomExpandIcon.propTypes = {
+    expanded: PropTypes.bool,
+    componentType: PropTypes.oneOf(['tree', 'expand']),
+    onClick: PropTypes.func,
+    onMouseEnter: PropTypes.func,
+    onMouseLeave: PropTypes.func,
+    expandIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+    prefixCls: PropTypes.string,
+    motion: PropTypes.bool,
+};
+
+CustomExpandIcon.defaultProps = {
+    componentType: 'expand',
+    onClick: noop,
+    onMouseEnter: noop,
+    onMouseLeave: noop,
+    prefixCls: cssClasses.PREFIX,
+};

package/table/HeadTable.tsx

@@ -0,0 +1,118 @@
+/* eslint-disable max-len */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { get, noop } from 'lodash';
+import classnames from 'classnames';
+
+import ColGroup from './ColGroup';
+import TableHeader from './TableHeader';
+import { Fixed, TableComponents, Scroll, BodyScrollEvent, ColumnProps } from './interface';
+
+export interface HeadTableProps {
+    [x: string]: any;
+    anyColumnFixed?: boolean;
+    bodyHasScrollBar?: boolean;
+    columns?: ColumnProps[];
+    components?: TableComponents;
+    dataSource?: Record<string, any>[];
+    fixed?: Fixed;
+    handleBodyScroll?: React.EventHandler<BodyScrollEvent>;
+    prefixCls?: string;
+    forwardedRef?: React.MutableRefObject<HTMLDivElement> | ((instance: any) => void);
+    scroll?: Scroll;
+    selectedRowKeysSet: Set<any>;
+    showHeader?: boolean;
+    onDidUpdate?: (ref: React.MutableRefObject<any>) => void;
+}
+
+/**
+ * When there are fixed columns, the header is rendered as a separate Table
+ */
+class HeadTable extends React.PureComponent<HeadTableProps> {
+    static propTypes = {
+        anyColumnFixed: PropTypes.bool,
+        bodyHasScrollBar: PropTypes.bool,
+        columns: PropTypes.array,
+        components: PropTypes.object,
+        dataSource: PropTypes.array,
+        fixed: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+        handleBodyScroll: PropTypes.func,
+        prefixCls: PropTypes.string,
+        forwardedRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+        scroll: PropTypes.shape({
+            x: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.bool]),
+            y: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+        }),
+        selectedRowKeysSet: PropTypes.instanceOf(Set).isRequired, // Useful when update is selected
+        showHeader: PropTypes.bool,
+        onDidUpdate: PropTypes.func,
+    };
+
+    static defaultProps = {
+        handleBodyScroll: noop,
+    };
+
+    constructor(props: HeadTableProps = { selectedRowKeysSet: new Set() }) {
+        super(props);
+    }
+
+    render() {
+        const {
+            scroll,
+            prefixCls,
+            fixed,
+            forwardedRef,
+            handleBodyScroll,
+            columns,
+            components,
+            onDidUpdate,
+            showHeader,
+            anyColumnFixed,
+            bodyHasScrollBar
+        } = this.props;
+
+        if (!showHeader) {
+            return null;
+        }
+
+        const Table = get(components, 'header.outer', 'table');
+        const x = get(scroll, 'x');
+        const headStyle: Partial<React.CSSProperties> = {};
+        const tableStyle: { width?: number | string } = {};
+
+        if (x && !fixed) {
+            tableStyle.width = x;
+        }
+
+        if (bodyHasScrollBar) {
+            headStyle.overflowY = 'scroll';
+        }
+
+        const colgroup = <ColGroup columns={columns} prefixCls={prefixCls} />;
+        const tableHeader = (
+            <TableHeader {...this.props} columns={columns} components={components} onDidUpdate={onDidUpdate} />
+        );
+
+        return (
+            <div
+                key="headTable"
+                style={headStyle}
+                className={`${prefixCls}-header`}
+                ref={forwardedRef}
+                onScroll={handleBodyScroll}
+            >
+                <Table
+                    style={tableStyle}
+                    className={classnames(prefixCls, {
+                        [`${prefixCls}-fixed`]: anyColumnFixed,
+                    })}
+                >
+                    {colgroup}
+                    {tableHeader}
+                </Table>
+            </div>
+        );
+    }
+}
+
+export default React.forwardRef<HTMLDivElement, HeadTableProps>((props, ref) => <HeadTable {...props} forwardedRef={ref} />);