@douyinfe/semi-ui 2.1.0-beta.0 → 2.1.0-next.0

package/lib/cjs/table/Body/ExpandedRow.js

@@ -0,0 +1,176 @@
+"use strict";
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _lodashEs = require("lodash-es");
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/table/constants");
+
+var _utils = require("@douyinfe/semi-foundation/lib/cjs/table/utils");
+
+var _tableContext = _interopRequireDefault(require("../table-context"));
+
+var _BaseRow = _interopRequireDefault(require("./BaseRow"));
+
+var _utils2 = require("../utils");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && (0, _indexOf.default)(e).call(e, p) < 0) t[p] = s[p];
+
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
+    if ((0, _indexOf.default)(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+/* eslint-disable max-len */
+
+
+/**
+ * Render expanded row
+ */
+class TableExpandedRow extends _react.PureComponent {
+  render() {
+    const {
+      record,
+      columns: propColumns = [],
+      prefixCls,
+      className,
+      expanded,
+      expandedRowRender,
+      renderExpandIcon,
+      index,
+      store,
+      components,
+      style,
+      virtualized,
+      indentSize,
+      cellWidths
+    } = this.props;
+    const {
+      tableWidth,
+      anyColumnFixed,
+      getCellWidths
+    } = this.context;
+    const cell = expandedRowRender(record, index, expanded);
+    let children = null;
+    const props = {};
+    let column = {};
+
+    if ((0, _lodashEs.isNull)(cell)) {
+      return null;
+    } else if ( /*#__PURE__*/(0, _react.isValidElement)(cell)) {
+      children = cell;
+    } else if (cell && Object.prototype.toString.call(cell) === '[object Object]') {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const _a = cell,
+            {
+        children: cellChildren,
+        fixed
+      } = _a,
+            restProps = __rest(_a, ["children", "fixed"]);
+
+      children = cellChildren;
+      column = (0, _assign.default)({}, restProps);
+    }
+
+    if ((0, _lodashEs.get)(components, 'body.cell') !== _constants.strings.DEFAULT_COMPONENTS.body.cell) {
+      if (virtualized) {
+        (0, _lodashEs.set)(props, 'style.height', '100%');
+      }
+
+      (0, _lodashEs.set)(props, 'style.display', 'block');
+      (0, _lodashEs.set)(props, 'style.width', (0, _utils.arrayAdd)(cellWidths, 0, propColumns.length));
+    } else {
+      // Remove the row where the scroll bar is located
+      props.colSpan = (0, _utils.filterColumns)(propColumns).length;
+    }
+
+    const columns = [(0, _assign.default)({
+      render: () => ({
+        props,
+        children: /*#__PURE__*/_react.default.createElement("div", {
+          className: (0, _classnames.default)("".concat(prefixCls, "-expand-inner")),
+          style: {
+            width: anyColumnFixed ? (0, _utils2.amendTableWidth)(tableWidth) : undefined
+          }
+        }, children)
+      })
+    }, column)];
+    const rowCls = (0, _classnames.default)(className, "".concat(prefixCls, "-row-expand"));
+    const baseRowCellWidths = getCellWidths(columns);
+    return /*#__PURE__*/_react.default.createElement(_BaseRow.default, {
+      style: style,
+      components: components,
+      className: rowCls,
+      expandedRow: true,
+      renderExpandIcon: renderExpandIcon,
+      rowKey: "".concat(record.key, "-expanded-row"),
+      columns: columns,
+      store: store,
+      virtualized: virtualized,
+      indentSize: indentSize,
+      cellWidths: baseRowCellWidths
+    });
+  }
+
+}
+
+exports.default = TableExpandedRow;
+TableExpandedRow.contextType = _tableContext.default;
+TableExpandedRow.propTypes = {
+  cellWidths: _propTypes.default.array.isRequired,
+  className: _propTypes.default.string,
+  columns: _propTypes.default.array,
+  components: _propTypes.default.object,
+  defaultExpandAllRows: _propTypes.default.bool,
+  defaultExpandedRowKeys: _propTypes.default.array,
+  expandIcon: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.node, _propTypes.default.func]),
+  expandRowByClick: _propTypes.default.bool,
+  expanded: _propTypes.default.bool,
+  expandedRowKeys: _propTypes.default.array,
+  expandedRowRender: _propTypes.default.func,
+  indentSize: _propTypes.default.number,
+  index: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  onExpand: _propTypes.default.func,
+  onExpandedRowsChange: _propTypes.default.func,
+  prefixCls: _propTypes.default.string,
+  record: _propTypes.default.object,
+  renderExpandIcon: _propTypes.default.func,
+  store: _propTypes.default.object,
+  style: _propTypes.default.object,
+  virtualized: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.object])
+};
+TableExpandedRow.defaultProps = {
+  record: {},
+  prefixCls: _constants.cssClasses.PREFIX
+};

package/lib/cjs/table/Body/SectionRow.d.ts

@@ -0,0 +1,67 @@
+import React, { PureComponent, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import Store from '@douyinfe/semi-foundation/lib/cjs/utils/Store';
+import { ColumnProps, RenderGroupSection, OnGroupedRow, TableComponents, Virtualized, RowKey, OnRowReturnObject } from '../interface';
+export interface SectionRowProps {
+    record?: Record<string, any>;
+    index?: number;
+    columns?: ColumnProps[];
+    group?: (string | number)[];
+    groupKey: string | number;
+    data?: Record<string, any>[];
+    renderGroupSection?: RenderGroupSection;
+    onGroupedRow?: OnGroupedRow<Record<string, any>>;
+    clickGroupedRowToExpand?: boolean;
+    components?: TableComponents;
+    expanded?: boolean;
+    prefixCls?: string;
+    onExpand?: (willExpanded: boolean, groupKey: number | string, e: React.MouseEvent) => void;
+    virtualized?: Virtualized;
+    style?: React.CSSProperties;
+    renderExpandIcon?: (record: Record<string, any>, isNested: boolean, groupKey: string | number) => ReactNode | null;
+    className?: string;
+    store?: Store;
+    rowKey?: RowKey<any>;
+}
+/**
+ * Grouping component title row
+ */
+declare class SectionRow extends PureComponent<SectionRowProps> {
+    static contextType: React.Context<import("../table-context").TableContextProps>;
+    static propTypes: {
+        record: PropTypes.Requireable<object>;
+        index: PropTypes.Requireable<number>;
+        columns: PropTypes.Requireable<any[]>;
+        group: PropTypes.Validator<object>;
+        groupKey: PropTypes.Validator<string | number>;
+        data: PropTypes.Requireable<any[]>;
+        renderGroupSection: PropTypes.Requireable<(...args: any[]) => any>;
+        onGroupedRow: PropTypes.Requireable<(...args: any[]) => any>;
+        clickGroupedRowToExpand: PropTypes.Requireable<boolean>;
+        components: PropTypes.Requireable<object>;
+        expanded: PropTypes.Requireable<boolean>;
+        prefixCls: PropTypes.Requireable<string>;
+        onExpand: PropTypes.Requireable<(...args: any[]) => any>;
+        virtualized: PropTypes.Requireable<boolean | object>;
+        style: PropTypes.Requireable<object>;
+        renderExpandIcon: PropTypes.Requireable<(...args: any[]) => any>;
+        className: PropTypes.Requireable<string>;
+        store: PropTypes.Requireable<object>;
+        rowKey: PropTypes.Requireable<string | number | ((...args: any[]) => any)>;
+    };
+    static defaultProps: {
+        prefixCls: "semi-table";
+        components: {
+            body: {
+                row: string;
+                cell: string;
+            };
+        };
+    };
+    onRow: (...args: any[]) => OnRowReturnObject;
+    collectGroupedData: () => Record<string, any>[];
+    renderExpandIcon: (record: any) => React.ReactNode;
+    isInnerColumnKey(key: any): boolean;
+    render(): JSX.Element;
+}
+export default SectionRow;

package/lib/cjs/table/Body/SectionRow.js

@@ -0,0 +1,248 @@
+"use strict";
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _lodashEs = require("lodash-es");
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/table/constants");
+
+var _utils = require("@douyinfe/semi-foundation/lib/cjs/table/utils");
+
+var _BaseRow = _interopRequireDefault(require("./BaseRow"));
+
+var _tableContext = _interopRequireDefault(require("../table-context"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && (0, _indexOf.default)(e).call(e, p) < 0) t[p] = s[p];
+
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
+    if ((0, _indexOf.default)(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+/* eslint-disable max-len */
+
+/* eslint-disable @typescript-eslint/ban-types */
+
+/* eslint-disable eqeqeq */
+
+
+/**
+ * Grouping component title row
+ */
+class SectionRow extends _react.PureComponent {
+  constructor() {
+    var _this;
+
+    super(...arguments);
+    _this = this;
+
+    this.onRow = function () {
+      const {
+        onGroupedRow,
+        clickGroupedRowToExpand,
+        onExpand,
+        groupKey,
+        expanded
+      } = _this.props;
+      const rowProps = {};
+
+      if (typeof onGroupedRow === 'function') {
+        (0, _assign.default)(rowProps, onGroupedRow(...arguments));
+      }
+
+      return (0, _assign.default)((0, _assign.default)({}, rowProps), {
+        onClick: e => {
+          if (typeof onExpand === 'function' && clickGroupedRowToExpand) {
+            onExpand(!expanded, groupKey, e);
+          }
+
+          if (typeof rowProps.onClick === 'function') {
+            rowProps.onClick(e);
+          }
+        }
+      });
+    };
+
+    this.collectGroupedData = () => {
+      const {
+        data,
+        group,
+        rowKey
+      } = this.props;
+
+      if ((0, _isArray.default)(data) && data.length && (0, _lodashEs.isSet)(group)) {
+        return (0, _filter.default)(data).call(data, record => {
+          const realRowKey = typeof rowKey === 'function' ? rowKey(record) : (0, _lodashEs.get)(record, rowKey);
+          return realRowKey != null && realRowKey !== '' && group.has(realRowKey);
+        });
+      }
+
+      return [];
+    };
+
+    this.renderExpandIcon = record => {
+      const {
+        renderExpandIcon,
+        groupKey
+      } = this.props;
+
+      if (typeof renderExpandIcon === 'function') {
+        return renderExpandIcon(record, false, groupKey);
+      }
+
+      return null;
+    };
+  }
+
+  isInnerColumnKey(key) {
+    if (key != null) {
+      var _context;
+
+      return (0, _includes.default)(_context = [_constants.strings.DEFAULT_KEY_COLUMN_EXPAND, _constants.strings.DEFAULT_KEY_COLUMN_SELECTION]).call(_context, key);
+    }
+
+    return false;
+  }
+
+  render() {
+    const {
+      record,
+      columns: propColumns = [],
+      prefixCls,
+      className,
+      expanded,
+      renderGroupSection,
+      components,
+      index,
+      store,
+      group,
+      groupKey,
+      virtualized,
+      style
+    } = this.props;
+    const props = {};
+    let column = {};
+    let children = null; // render title
+
+    const cell = typeof renderGroupSection === 'function' ? renderGroupSection(groupKey, [...group]) : null;
+
+    if ( /*#__PURE__*/(0, _react.isValidElement)(cell)) {
+      children = cell;
+    } else if (cell && Object.prototype.toString.call(cell) === '[object Object]') {
+      const _a = cell,
+            {
+        children: cellChildren
+      } = _a,
+            restProps = __rest(_a, ["children"]);
+
+      children = cellChildren;
+      column = (0, _assign.default)({}, restProps);
+    } // Filter out scroll-bar column
+
+
+    props.colSpan = (0, _utils.filterColumns)(propColumns).length;
+    const columns = [(0, _assign.default)({
+      render: () => ({
+        props,
+        children
+      })
+    }, column)];
+    const rowCls = (0, _classnames.default)(className, "".concat(prefixCls, "-row-section"), {
+      on: expanded
+    });
+    const {
+      getCellWidths
+    } = this.context;
+    const baseRowCellWidths = getCellWidths(columns, null, true);
+    return /*#__PURE__*/_react.default.createElement(_BaseRow.default, {
+      components: components,
+      virtualized: virtualized,
+      index: index,
+      onRow: this.onRow,
+      expanded: expanded,
+      expandIcon: true,
+      isSection: true,
+      record: record,
+      replaceClassName: rowCls,
+      expandableRow: true,
+      renderExpandIcon: this.renderExpandIcon,
+      rowKey: groupKey,
+      columns: columns,
+      store: store,
+      style: style,
+      cellWidths: baseRowCellWidths
+    });
+  }
+
+}
+
+SectionRow.contextType = _tableContext.default;
+SectionRow.propTypes = {
+  record: _propTypes.default.object,
+  index: _propTypes.default.number,
+  columns: _propTypes.default.array,
+  group: _propTypes.default.object.isRequired,
+  groupKey: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
+  data: _propTypes.default.array,
+  renderGroupSection: _propTypes.default.func,
+  onGroupedRow: _propTypes.default.func,
+  clickGroupedRowToExpand: _propTypes.default.bool,
+  components: _propTypes.default.object,
+  expanded: _propTypes.default.bool,
+  prefixCls: _propTypes.default.string,
+  onExpand: _propTypes.default.func,
+  virtualized: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.object]),
+  style: _propTypes.default.object,
+  renderExpandIcon: _propTypes.default.func,
+  className: _propTypes.default.string,
+  store: _propTypes.default.object,
+  rowKey: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.func])
+};
+SectionRow.defaultProps = {
+  prefixCls: _constants.cssClasses.PREFIX,
+  components: {
+    body: {
+      row: 'tr',
+      cell: 'td'
+    }
+  }
+};
+var _default = SectionRow;
+exports.default = _default;

package/lib/cjs/table/Body/index.d.ts

@@ -0,0 +1,70 @@
+import React, { ReactNode } from 'react';
+import { FlattenData, GroupFlattenData } from '@douyinfe/semi-foundation/lib/cjs/table/bodyFoundation';
+import Store from '@douyinfe/semi-foundation/lib/cjs/utils/Store';
+import { BaseProps } from '../../_base/baseComponent';
+import { ExpandedRowRender, Virtualized, GetVirtualizedListRef, ColumnProps, Size, BodyScrollEvent, Scroll, Fixed, TableComponents, RowExpandable, VirtualizedOnScroll, RowKey } from '../interface';
+export interface BodyProps extends BaseProps {
+    anyColumnFixed?: boolean;
+    columns?: ColumnProps[];
+    dataSource?: Record<string, any>[];
+    disabledRowKeysSet: Set<any>;
+    emptySlot?: ReactNode;
+    expandedRowKeys?: (string | number)[];
+    expandedRowRender?: ExpandedRowRender<Record<string, any>>;
+    fixed?: Fixed;
+    forwardedRef?: React.MutableRefObject<HTMLDivElement> | ((instance: any) => void);
+    handleBodyScroll?: (e: BodyScrollEvent) => void;
+    handleWheel?: (e: React.WheelEvent<HTMLDivElement>) => void;
+    includeHeader?: boolean;
+    prefixCls?: string;
+    scroll?: Scroll;
+    selectedRowKeysSet: Set<any>;
+    showHeader?: boolean;
+    size?: Size;
+    virtualized?: Virtualized;
+    components?: TableComponents;
+    store: Store;
+    groups?: Map<string, Record<string, any>[]>[];
+    rowKey?: RowKey<Record<string, any>>;
+    childrenRecordName?: string;
+    rowExpandable?: RowExpandable<Record<string, any>>;
+    renderExpandIcon: (record: Record<string, any>, isNested: boolean) => ReactNode | null;
+    headerRef?: React.MutableRefObject<HTMLDivElement> | ((instance: any) => void);
+    onScroll?: VirtualizedOnScroll;
+}
+export interface BodyState {
+    virtualizedData?: Array<FlattenData | GroupFlattenData>;
+    cache?: {
+        virtualizedScrollTop?: number;
+        virtualizedScrollLeft?: number;
+    };
+    cachedExpandBtnShouldInRow?: boolean;
+    cachedExpandRelatedProps?: any[];
+}
+export interface BodyContext {
+    getVirtualizedListRef: GetVirtualizedListRef;
+}
+declare const _default: React.ForwardRefExoticComponent<Omit<BodyProps, "forwardedRef"> & React.RefAttributes<HTMLDivElement>>;
+export default _default;
+export interface RenderExpandedRowProps {
+    style?: React.CSSProperties;
+    components?: TableComponents;
+    renderExpandIcon: (record?: Record<string, any>, isNested?: boolean) => ReactNode | null;
+    expandedRowRender?: ExpandedRowRender<Record<string, any>>;
+    record?: Record<string, any>;
+    columns?: ColumnProps[];
+    expanded?: boolean;
+    index?: number;
+    rowKey?: RowKey<Record<string, any>>;
+    virtualized?: Virtualized;
+    level?: number;
+}
+export interface RenderSectionRowProps {
+    dataSource?: Record<string, any>[];
+    columns?: ColumnProps[];
+    rowKey?: RowKey<Record<string, any>>;
+    group?: any;
+    groupKey: string | number;
+    index?: number;
+    expanded?: boolean;
+}