@autobest-ui/components 1.1.1 → 1.1.8

package/esm/table/body/BodyRow.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Column } from '../interface';
+export interface BodyRowProps<T> {
+    className?: string;
+    prefixCls: string;
+    rowData: T;
+    index: number;
+    columns: Column<T>[];
+    indent: number;
+    CheckCell: React.ReactElement;
+    isExpand?: boolean;
+}
+declare function BodyRow<RowDataType>({ className, prefixCls: cls, rowData, index, columns, indent, CheckCell, isExpand }: BodyRowProps<RowDataType>): JSX.Element;
+declare namespace BodyRow {
+    var defaultProps: {
+        isExpand: boolean;
+    };
+}
+export default BodyRow;

package/esm/table/body/BodyRow.js

@@ -0,0 +1,98 @@
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
+import React from 'react';
+import classNames from 'classnames';
+import { isEmptyArray } from '@autobest-ui/utils';
+
+var getIndentCol = function getIndentCol(prefixCls, number) {
+  if (number === 0) {
+    return null;
+  }
+
+  return new Array(number).fill(false).map(function (_item, index) {
+    return React.createElement("td", {
+      key: index,
+      className: prefixCls + "-indent"
+    });
+  });
+};
+
+function BodyRow(_a) {
+  var className = _a.className,
+      cls = _a.prefixCls,
+      rowData = _a.rowData,
+      index = _a.index,
+      columns = _a.columns,
+      indent = _a.indent,
+      CheckCell = _a.CheckCell,
+      isExpand = _a.isExpand;
+  var indentCell = React.useMemo(function () {
+    return getIndentCol(cls, indent);
+  }, [cls, indent]);
+  var contentCells = [];
+  columns.forEach(function (col, colIndex) {
+    var renderer = (columns[colIndex] || {}).onRender;
+    var renderInfo = renderer ? renderer(rowData, index, colIndex) : rowData[col.dataIndex];
+    var cellProps = {};
+    var content;
+
+    if (renderInfo && _typeof(renderInfo) === 'object' && !Array.isArray(renderInfo) && !React.isValidElement(renderInfo)) {
+      var children = renderInfo.children,
+          props = renderInfo.props;
+      content = children;
+      cellProps = props;
+    } else {
+      content = renderInfo;
+    }
+
+    var colSpan = cellProps.colSpan,
+        rowSpan = cellProps.rowSpan,
+        className = cellProps.className;
+
+    var cellInfo = __assign(__assign({}, col), {
+      content: content,
+      colSpan: colSpan === undefined ? 1 : colSpan,
+      rowSpan: rowSpan === undefined ? 1 : rowSpan
+    });
+
+    if (cellInfo.colSpan === 0 || cellInfo.rowSpan === 0 || isExpand && !cellInfo.content) {
+      return;
+    }
+
+    contentCells.push(React.createElement("td", {
+      className: className,
+      key: cellInfo.key,
+      colSpan: cellInfo.colSpan,
+      rowSpan: cellInfo.rowSpan
+    }, cellInfo.content));
+  });
+
+  if (!isEmptyArray(contentCells)) {
+    return React.createElement("tr", {
+      className: classNames(cls + "-row", className)
+    }, indentCell, CheckCell, contentCells);
+  }
+
+  return null;
+}
+
+BodyRow.defaultProps = {
+  isExpand: false
+};
+export default BodyRow;

package/esm/table/body/CheckIcon.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactText } from 'react';
+export interface BodyRowSelectionInfo<T> {
+    checkIcon?: (checked: boolean, rowData: T, index: number) => React.ReactElement;
+    getDisabled?: (rowData: T) => boolean;
+    onSelect?: (checked: boolean, rowData: T) => void;
+}
+export interface BodyCheckIconProps<T> {
+    prefixCls: string;
+    rowData: T;
+    rowKey: ReactText;
+    rowIndex: number;
+    rowSelection: BodyRowSelectionInfo<T>;
+    selectedRowKeys: ReactText[];
+}
+declare const _default: React.NamedExoticComponent<BodyCheckIconProps<any>>;
+export default _default;

package/esm/table/body/CheckIcon.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import Checkbox from '../../checkbox';
+
+function BodyCheckIcon(_a) {
+  var cls = _a.prefixCls,
+      rowData = _a.rowData,
+      rowKey = _a.rowKey,
+      rowIndex = _a.rowIndex,
+      selectedRowKeys = _a.selectedRowKeys,
+      _b = _a.rowSelection,
+      checkIcon = _b.checkIcon,
+      getDisabled = _b.getDisabled,
+      onSelect = _b.onSelect;
+  var checked = selectedRowKeys.includes(rowKey);
+
+  if (checkIcon) {
+    return React.createElement("td", null, checkIcon(checked, rowData, rowIndex));
+  }
+
+  var disabled = getDisabled(rowData);
+
+  var onCheckBoxChange = function onCheckBoxChange(checked) {
+    onSelect(checked, rowData);
+  };
+
+  return React.createElement("td", {
+    className: cls + "-checkbox"
+  }, React.createElement(Checkbox, {
+    checked: checked,
+    disabled: disabled,
+    onChange: onCheckBoxChange
+  }));
+}
+
+export default React.memo(BodyCheckIcon);

package/esm/table/body/index.d.ts

@@ -0,0 +1,24 @@
+import React, { ReactText } from 'react';
+import { BodyRowProps } from './BodyRow';
+import { BodyCheckIconProps, BodyRowSelectionInfo } from './CheckIcon';
+import { ColumnOnRenderReturnObjectInfo } from '../interface';
+/**
+ * 可展开子列表
+ */
+export interface TableExpandableInfo<T> {
+    expandedRowRender: (rowData: T, index: number) => React.ReactNode | React.ReactNode[] | ColumnOnRenderReturnObjectInfo;
+}
+export interface BodyProps<T> extends Pick<BodyRowProps<T>, 'prefixCls' | 'columns'>, Pick<BodyCheckIconProps<T>, 'selectedRowKeys'> {
+    /**
+     * 表格数据
+     */
+    dataSource: T[];
+    /**
+     * 子列表渲染（不赋值则没有子列表），详见Expandable
+     */
+    expandable?: TableExpandableInfo<T>;
+    getRowKey: (rowData: T) => ReactText;
+    rowSelection: BodyRowSelectionInfo<T>;
+}
+declare function Body<RowDataType>({ prefixCls, columns, dataSource, getRowKey, rowSelection, selectedRowKeys, expandable }: BodyProps<RowDataType>): JSX.Element;
+export default Body;

package/esm/table/body/index.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import BodyRow from './BodyRow';
+import CheckIcon from './CheckIcon';
+
+var noop = function noop() {
+  return null;
+};
+
+function Body(_a) {
+  var prefixCls = _a.prefixCls,
+      columns = _a.columns,
+      dataSource = _a.dataSource,
+      getRowKey = _a.getRowKey,
+      rowSelection = _a.rowSelection,
+      selectedRowKeys = _a.selectedRowKeys,
+      expandable = _a.expandable;
+  var rows = [];
+  var expandedRowRenderer = expandable ? expandable.expandedRowRender : noop;
+  dataSource.forEach(function (row, rowIndex) {
+    var rowKey = getRowKey(row);
+    var CheckCell = rowSelection ? React.createElement(CheckIcon, {
+      prefixCls: prefixCls,
+      rowSelection: rowSelection,
+      rowKey: rowKey,
+      rowData: row,
+      rowIndex: rowIndex,
+      selectedRowKeys: selectedRowKeys
+    }) : null;
+    rows.push(React.createElement(BodyRow, {
+      key: rowKey,
+      prefixCls: prefixCls,
+      rowData: row,
+      index: rowIndex,
+      columns: columns,
+      CheckCell: CheckCell,
+      indent: 0
+    }));
+    var expandedRowKey = rowKey + " expanded";
+    var expandedColumns = [{
+      title: null,
+      key: expandedRowKey,
+      onRender: expandedRowRenderer
+    }];
+
+    if (expandable) {
+      rows.push(React.createElement(BodyRow, {
+        key: expandedRowKey,
+        className: prefixCls + "-expand-row",
+        prefixCls: prefixCls,
+        rowData: row,
+        index: rowIndex,
+        columns: expandedColumns,
+        CheckCell: null,
+        indent: CheckCell ? 1 : 0,
+        isExpand: true
+      }));
+    }
+  });
+  return React.createElement(React.Fragment, null, rows);
+}
+
+export default Body;

package/esm/table/header/CheckIcon.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface HeaderRowSelectionInfo {
+    checkIcon?: (checked: boolean, rowData: null, index: number) => React.ReactElement;
+    selectAllVisible?: boolean;
+    selectAllChecked: boolean;
+    onSelectAll?: (checked: boolean) => void;
+}
+interface HeaderCheckIconProps {
+    prefixCls: string;
+    rowSelection: HeaderRowSelectionInfo;
+}
+declare const _default: React.NamedExoticComponent<HeaderCheckIconProps>;
+export default _default;

package/esm/table/header/CheckIcon.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import Checkbox from '../../checkbox';
+
+function HeaderCheckIcon(_a) {
+  var cls = _a.prefixCls,
+      rowSelection = _a.rowSelection;
+
+  if (!rowSelection) {
+    return null;
+  }
+
+  if (!rowSelection.selectAllVisible) {
+    // 有勾选功能，但是没有全选功能，需有占位元素
+    return React.createElement("th", null, " ");
+  }
+
+  var checkIcon = rowSelection.checkIcon,
+      selectAllChecked = rowSelection.selectAllChecked,
+      onSelectAll = rowSelection.onSelectAll;
+
+  if (checkIcon) {
+    return React.createElement("th", null, checkIcon(selectAllChecked, null, -1));
+  }
+
+  var onCheckBoxChange = function onCheckBoxChange() {
+    onSelectAll(!selectAllChecked);
+  };
+
+  return React.createElement("th", {
+    className: cls + "-checkbox"
+  }, React.createElement(Checkbox, {
+    checked: selectAllChecked,
+    onChange: onCheckBoxChange
+  }));
+}
+
+export default React.memo(HeaderCheckIcon);

package/esm/table/header/HeaderCell.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Column } from '../interface';
+export interface HeaderCellProps<T> extends Column<T> {
+    prefixCls: string;
+    isSort: boolean;
+    isSortedDescending?: boolean;
+    onSort: (sortColumn: string) => void;
+    /**
+     * 自定义排序图标，若不传，则采用默认的排序图标
+     * @param isSortDesc
+     */
+    sortIcon?: (isSortDesc: boolean) => React.ReactNode;
+}
+export default class HeaderCell<RowDataType> extends React.PureComponent<HeaderCellProps<RowDataType>> {
+    onClick: () => void;
+    renderArrow: () => {};
+    render(): JSX.Element;
+}

package/esm/table/{HeaderCell.js → header/HeaderCell.js}

@@ -26,7 +26,7 @@ var __extends = this && this.__extends || function () {
 
 import React from 'react';
 import classNames from 'classnames';
-import Icon from '../icon';
+import Icon from '../../icon';
 
 var HeaderCell =
 /** @class */
@@ -50,12 +50,17 @@ function (_super) {
       var _a = _this.props,
           prefixCls = _a.prefixCls,
           isSort = _a.isSort,
-          isSortedDescending = _a.isSortedDescending;
+          isSortedDescending = _a.isSortedDescending,
+          sortIcon = _a.sortIcon;
 
       if (!isSort) {
         return null;
       }
 
+      if (sortIcon) {
+        return sortIcon(isSortedDescending);
+      }
+
       return React.createElement(Icon, {
         className: prefixCls + "-arrow",
         name: "arrow",
@@ -72,11 +77,13 @@ function (_super) {
 
     var _b = this.props,
         prefixCls = _b.prefixCls,
+        className = _b.className,
         title = _b.title,
         sortName = _b.sortName,
-        fieldName = _b.fieldName;
+        colSpan = _b.colSpan;
     return React.createElement("th", {
-      key: fieldName
+      className: className,
+      colSpan: colSpan
     }, React.createElement("div", {
       className: classNames(prefixCls + "-title", (_a = {}, _a[prefixCls + "-point"] = sortName, _a)),
       onClick: this.onClick

package/esm/table/header/HeaderRow.d.ts

@@ -0,0 +1,16 @@
+import { Column } from '../interface';
+import { HeaderCellProps } from './HeaderCell';
+import { HeaderRowSelectionInfo } from './CheckIcon';
+export interface HeaderRowProps<T> extends Pick<HeaderCellProps<T>, 'sortName' | 'isSortedDescending' | 'sortIcon'> {
+    prefixCls: string;
+    columns: Column<T>[];
+    /**
+     * 点击表头触发的排序函数
+     * @param isSortedDescending
+     * @param sortName
+     */
+    onSortChange?: (isSortedDescending: boolean, sortName: string) => void;
+    rowSelection: HeaderRowSelectionInfo;
+}
+declare function HeaderRow<RowDataType>({ prefixCls: cls, columns, rowSelection, sortName, isSortedDescending, onSortChange, sortIcon }: HeaderRowProps<RowDataType>): JSX.Element;
+export default HeaderRow;

package/esm/table/header/HeaderRow.js

@@ -0,0 +1,76 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
+import React from 'react';
+import HeaderCell from './HeaderCell';
+import HeaderCheckIcon from './CheckIcon';
+
+function parseHeaderRows(columns) {
+  var rows = [];
+  columns.forEach(function (col) {
+    if ('colSpan' in col && col.colSpan === 0) {
+      return;
+    }
+
+    rows.push(__assign(__assign({}, col), {
+      colSpan: col.colSpan ? col.colSpan : 1
+    }));
+  });
+  return rows;
+}
+
+function HeaderRow(_a) {
+  var cls = _a.prefixCls,
+      columns = _a.columns,
+      rowSelection = _a.rowSelection,
+      sortName = _a.sortName,
+      isSortedDescending = _a.isSortedDescending,
+      onSortChange = _a.onSortChange,
+      sortIcon = _a.sortIcon;
+  /**
+   * 点击某一列的表头，触发排序
+   * @param name
+   */
+
+  var onSort = function onSort(name) {
+    if (!onSortChange) {
+      return;
+    }
+
+    var isSortedDesc = sortName === name ? !isSortedDescending : true;
+    onSortChange(isSortedDesc, name);
+  };
+
+  var rows = React.useMemo(function () {
+    return parseHeaderRows(columns);
+  }, [columns]);
+  return React.createElement("tr", null, React.createElement(HeaderCheckIcon, {
+    prefixCls: cls,
+    rowSelection: rowSelection
+  }), rows.map(function (item) {
+    return React.createElement(HeaderCell, __assign({
+      key: item.key
+    }, item, {
+      prefixCls: cls,
+      isSort: sortName && sortName === item.sortName,
+      isSortedDescending: isSortedDescending,
+      onSort: onSort,
+      sortIcon: sortIcon
+    }));
+  }));
+}
+
+export default HeaderRow;

package/esm/table/index.d.ts

@@ -1,23 +1,31 @@
-import React from 'react';
+import React, { ReactText } from 'react';
 import { AddListenerEventHandler } from '@autobest-ui/utils';
 import { Column } from './interface';
-export interface TableProps {
-    /**
-     * 定义每一列数据的格式
-     */
-    columns: Column[];
+import { HeaderRowProps } from './header/HeaderRow';
+import { BodyProps } from './body';
+import { HeaderRowSelectionInfo } from './header/CheckIcon';
+import { BodyRowSelectionInfo } from './body/CheckIcon';
+export interface RowSelectionInfo<T> extends Partial<Pick<HeaderRowSelectionInfo, 'selectAllVisible' | 'onSelectAll'>>, Partial<Pick<BodyRowSelectionInfo<T>, 'checkIcon'>> {
+    defaultSelectedRowKeys?: ReactText[];
+    getDisabled?: (dataRow: any, selectedRowKeys: ReactText[], selectedRows: T[]) => boolean;
+    onSelect?: (checked: boolean, rowData: T, selectedRows: T[]) => void;
+    onSelectedRowChange?: (selectedRowKeys: ReactText[], selectedRows: T[]) => void;
+}
+declare type StateRowSelectionInfo<T> = Pick<HeaderRowSelectionInfo, 'selectAllVisible' | 'selectAllChecked' | 'onSelectAll'> & Pick<BodyRowSelectionInfo<T>, 'checkIcon' | 'getDisabled' | 'onSelect'>;
+export interface TableProps<T> extends Pick<HeaderRowProps<T>, 'sortName' | 'sortIcon' | 'onSortChange' | 'isSortedDescending'>, Pick<BodyProps<T>, 'dataSource' | 'expandable'> {
     /**
-     * 表格里的数据
+     * 样式名
      */
-    dataSource: any[];
+    className?: string;
     /**
-     * 主键，唯一标识某一条记录，需要checkbox时必传
+     * 定义每一列数据的格式
+     * 具体类型见Column
      */
-    primaryKey: string;
+    columns: Column<T>[];
     /**
-     * 样式名
+     * 获取单条记录的唯一主键; 若是string类型，则取当前行数据中对应名称的属性值； 若是函数，则传入当前行数据，获取rowKey值；这也是勾选功能匹配时所用的key值
      */
-    className?: string;
+    rowKey?: string | ((rowData: T) => ReactText);
     /**
      * 是否固定表头
      */
@@ -26,7 +34,14 @@ export interface TableProps {
      * 最大高度，fixedHeader为true时生效
      */
     maxHeight?: string;
+    /**
+     * 为true时，Table会显示loading样式
+     */
     loading?: boolean;
+    /**
+     * 表格行是否可勾选，详见RowSelection
+     */
+    rowSelection?: RowSelectionInfo<T>;
     /**
      * 默认勾选项数组, 以primaryKey取值
      */
@@ -48,43 +63,53 @@ export interface TableProps {
      */
     isSortedDescending?: boolean;
 }
-interface TableState {
-    isSelectedAll: boolean;
-    selectedRowKeys: any[];
+interface TableState<T> {
+    selectedRowKeys: ReactText[];
+    selectedRows: T[];
+    rowSelection: StateRowSelectionInfo<T>;
 }
-declare class Table extends React.Component<TableProps, TableState> {
+declare class Table<RowDataType> extends React.Component<TableProps<RowDataType>, TableState<RowDataType>> {
     prefixCls: string;
     headerRef: React.RefObject<HTMLDivElement>;
     bodyRef: React.RefObject<HTMLDivElement>;
     scrollHandler: AddListenerEventHandler;
+    getRowKey: (rowData: RowDataType) => ReactText;
     static defaultProps: {
         fixedHeader: boolean;
         loading: boolean;
+        rowKey: string;
     };
-    constructor(props: TableProps);
+    readonly defaultRowSelection: Pick<StateRowSelectionInfo<RowDataType>, 'selectAllVisible' | 'selectAllChecked' | 'getDisabled'>;
+    constructor(props: TableProps<RowDataType>);
     /**
      * 清空选项
      */
     clearSelection: () => void;
     componentDidMount(): void;
-    componentDidUpdate(): void;
     componentWillUnmount(): void;
     addScrollListener: () => void;
+    getSelectedRows: (selectedKeys: any) => any;
     /**
      * 点击表头的checkbox，全选或全不选
      */
-    onSelectAll: () => void;
+    onSelectAll: (checked: any) => void;
     /**
      * 点击某一行的checkbook
      * @param visible
-     * @param name
-     */
-    onChange: (visible: boolean, name: string | number) => void;
-    /**
-     * 点击某一列的表头，触发排序
-     * @param sortName
-     */
-    onSort: (sortName: string) => void;
+     * @param rowData
+     */
+    onSelect: (visible: boolean, rowData: RowDataType) => void;
+    getDisabled: (rowData: any) => boolean;
+    getRowSelection: () => {
+        onSelect: (visible: boolean, rowData: RowDataType) => void;
+        onSelectAll: (checked: any) => void;
+        getDisabled: (rowData: any) => boolean;
+        defaultSelectedRowKeys?: (string | number)[];
+        onSelectedRowChange?: (selectedRowKeys: (string | number)[], selectedRows: RowDataType[]) => void;
+        selectAllVisible?: boolean;
+        checkIcon?: (checked: boolean, rowData: RowDataType, index: number) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)>) | (new (props: any) => React.Component<any, any, any>)>;
+        selectAllChecked: boolean;
+    };
     /**
      * 用colgroup设置每一列的宽度
      */