@autobest-ui/components 1.1.1 → 1.1.8

package/lib/table/__stories__/style.css

@@ -1 +1 @@
-.ab-table-body{height:120px}
+.table-demo thead{background-color:#2b5797;color:#fff}.table-demo tbody tr.ab-table-expand-row{background-color:#fafafa}.table-demo tbody tr:hover{background-color:#f3f3f3}.table-demo td,.table-demo th{padding:.16rem;border-bottom:1px solid #d0d0d0}.table-demo td.ab-table-checkbox,.table-demo th.ab-table-checkbox{padding:.16rem 0}.table-demo .merged-cell{border-left:1px solid #d0d0d0;border-right:1px solid #d0d0d0}.table-demo-expanded{font-size:.2rem}

package/lib/table/__stories__/style.scss

@@ -1,3 +1,34 @@
-.ab-table-body {
-  height: 120px;
+.table-demo {
+  thead {
+    background-color: #2b5797;
+    color: #fff;
+  }
+
+  tbody tr {
+    &.ab-table-expand-row {
+      background-color: #fafafa;
+    }
+
+    &:hover {
+      background-color: #f3f3f3;
+    }
+  }
+
+  th, td {
+    padding: .16rem;
+    border-bottom: 1px solid #D0D0D0;
+
+    &.ab-table-checkbox {
+      padding: .16rem 0;
+    }
+  }
+
+  .merged-cell {
+    border-left: 1px solid #D0D0D0;
+    border-right: 1px solid #D0D0D0;
+  }
+}
+
+.table-demo-expanded {
+  font-size: .2rem;
 }

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

@@ -0,0 +1,112 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _utils = require("@autobest-ui/utils");
+
+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);
+};
+
+var getIndentCol = function getIndentCol(prefixCls, number) {
+  if (number === 0) {
+    return null;
+  }
+
+  return new Array(number).fill(false).map(function (_item, index) {
+    return _react.default.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.default.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 && (0, _typeof2.default)(renderInfo) === 'object' && !Array.isArray(renderInfo) && !_react.default.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.default.createElement("td", {
+      className: className,
+      key: cellInfo.key,
+      colSpan: cellInfo.colSpan,
+      rowSpan: cellInfo.rowSpan
+    }, cellInfo.content));
+  });
+
+  if (!(0, _utils.isEmptyArray)(contentCells)) {
+    return _react.default.createElement("tr", {
+      className: (0, _classnames.default)(cls + "-row", className)
+    }, indentCell, CheckCell, contentCells);
+  }
+
+  return null;
+}
+
+BodyRow.defaultProps = {
+  isExpand: false
+};
+var _default = BodyRow;
+exports.default = _default;

package/lib/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/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,74 @@
+"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,
+        isExpand: true
+      }));
+    }
+  });
+  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;