@autobest-ui/components 1.1.1 → 1.2.0

package/lib/table/body/CheckIcon.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _checkbox = _interopRequireDefault(require("../../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.default.createElement("td", null, checkIcon(checked, rowData, rowIndex));
+  }
+
+  var disabled = getDisabled(rowData);
+
+  var onCheckBoxChange = function onCheckBoxChange(checked) {
+    onSelect(checked, rowData);
+  };
+
+  return _react.default.createElement("td", {
+    className: cls + "-checkbox"
+  }, _react.default.createElement(_checkbox.default, {
+    checked: checked,
+    disabled: disabled,
+    onChange: onCheckBoxChange
+  }));
+}
+
+var _default = _react.default.memo(BodyCheckIcon);
+
+exports.default = _default;

package/lib/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/lib/table/body/index.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _BodyRow = _interopRequireDefault(require("./BodyRow"));
+
+var _CheckIcon = _interopRequireDefault(require("./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.default.createElement(_CheckIcon.default, {
+      prefixCls: prefixCls,
+      rowSelection: rowSelection,
+      rowKey: rowKey,
+      rowData: row,
+      rowIndex: rowIndex,
+      selectedRowKeys: selectedRowKeys
+    }) : null;
+    rows.push(_react.default.createElement(_BodyRow.default, {
+      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.default.createElement(_BodyRow.default, {
+        key: expandedRowKey,
+        className: prefixCls + "-expand-row",
+        prefixCls: prefixCls,
+        rowData: row,
+        index: rowIndex,
+        columns: expandedColumns,
+        CheckCell: null,
+        indent: CheckCell ? 1 : 0
+      }));
+    }
+  });
+  return _react.default.createElement(_react.default.Fragment, null, rows);
+}
+
+var _default = Body;
+exports.default = _default;

package/lib/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/lib/table/header/CheckIcon.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _checkbox = _interopRequireDefault(require("../../checkbox"));
+
+function HeaderCheckIcon(_a) {
+  var cls = _a.prefixCls,
+      rowSelection = _a.rowSelection;
+
+  if (!rowSelection) {
+    return null;
+  }
+
+  if (!rowSelection.selectAllVisible) {
+    // 有勾选功能，但是没有全选功能，需有占位元素
+    return _react.default.createElement("th", null, " ");
+  }
+
+  var checkIcon = rowSelection.checkIcon,
+      selectAllChecked = rowSelection.selectAllChecked,
+      onSelectAll = rowSelection.onSelectAll;
+
+  if (checkIcon) {
+    return _react.default.createElement("th", null, checkIcon(selectAllChecked, null, -1));
+  }
+
+  var onCheckBoxChange = function onCheckBoxChange() {
+    onSelectAll(!selectAllChecked);
+  };
+
+  return _react.default.createElement("th", {
+    className: cls + "-checkbox"
+  }, _react.default.createElement(_checkbox.default, {
+    checked: selectAllChecked,
+    onChange: onCheckBoxChange
+  }));
+}
+
+var _default = _react.default.memo(HeaderCheckIcon);
+
+exports.default = _default;

package/lib/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/lib/table/{HeaderCell.js → header/HeaderCell.js}

@@ -11,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _icon = _interopRequireDefault(require("../icon"));
+var _icon = _interopRequireDefault(require("../../icon"));
 
 var __extends = void 0 && (void 0).__extends || function () {
   var _extendStatics = function extendStatics(d, b) {
@@ -61,12 +61,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.default.createElement(_icon.default, {
         className: prefixCls + "-arrow",
         name: "arrow",
@@ -83,11 +88,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.default.createElement("th", {
-      key: fieldName
+      className: className,
+      colSpan: colSpan
     }, _react.default.createElement("div", {
       className: (0, _classnames.default)(prefixCls + "-title", (_a = {}, _a[prefixCls + "-point"] = sortName, _a)),
       onClick: this.onClick

package/lib/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/lib/table/header/HeaderRow.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _HeaderCell = _interopRequireDefault(require("./HeaderCell"));
+
+var _CheckIcon = _interopRequireDefault(require("./CheckIcon"));
+
+var __assign = void 0 && (void 0).__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);
+};
+
+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.default.useMemo(function () {
+    return parseHeaderRows(columns);
+  }, [columns]);
+
+  return _react.default.createElement("tr", null, _react.default.createElement(_CheckIcon.default, {
+    prefixCls: cls,
+    rowSelection: rowSelection
+  }), rows.map(function (item) {
+    return _react.default.createElement(_HeaderCell.default, __assign({
+      key: item.key
+    }, item, {
+      prefixCls: cls,
+      isSort: sortName && sortName === item.sortName,
+      isSortedDescending: isSortedDescending,
+      onSort: onSort,
+      sortIcon: sortIcon
+    }));
+  }));
+}
+
+var _default = HeaderRow;
+exports.default = _default;

package/lib/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设置每一列的宽度
      */