@teamias/rex-design 0.0.13 → 0.0.15

package/dist/components/base-table/base-table.d.ts

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 import { GetProps, Table } from 'antd';
 import { IDataCellItem, TGroupV2 } from '../data-cell/types';
-export declare const BaseTable: <T extends object = object>({ useDataCellRender, fields: outFields, fieldsConfig, fieldProps: outFieldProps, requestFields, requestFieldsUrl, requestFieldsParams, fieldPropsFn, indexColumn, extraColumns, onDataCellClick, onDataCellClickV2, scroll, rootClassName, customEmptyText, ...otherProps }: IBaseTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const BaseTable: <T extends object = object>({ useDataCellRender, fields: outFields, fieldsConfig, fieldProps: outFieldProps, requestFields, requestFieldsUrl, requestFieldsParams, fieldPropsFn, indexColumn, extraColumns, onDataCellClick, onDataCellClickV2, scroll, rootClassName, customEmptyText, headerStyle: topHeaderStyle, ...otherProps }: IBaseTableProps<T>) => import("react/jsx-runtime").JSX.Element;
 /** 组件props */
 export interface IBaseTableProps<T extends object = object> extends Omit<TRawTableProps<T>, 'size' | 'bordered' | 'tableLayout' | 'scroll'> {
     /** @deprecated 使用 fieldsConfig */
@@ -41,6 +42,8 @@ export interface IBaseTableProps<T extends object = object> extends Omit<TRawTab
     scroll?: TRawTableProps<T>['scroll'] | ((height?: number) => TRawTableProps<T>['scroll']);
     /** 自定义空数据文案 */
     customEmptyText?: string;
+    /** 表头样式 */
+    headerStyle?: React.CSSProperties;
 }
 export type TRawTableProps<T> = GetProps<typeof Table<T>>;
 export type TBaseTableColumns<T> = Required<TRawTableProps<T>>['columns'][number] & {
@@ -48,4 +51,6 @@ export type TBaseTableColumns<T> = Required<TRawTableProps<T>>['columns'][number
     hidden?: boolean;
     /** 权限key */
     permissionKey?: string;
+    /** 表头样式 */
+    headerStyle?: React.CSSProperties;
 };

package/dist/components/base-table/base-table.js

@@ -1,4 +1,4 @@
-var _excluded = ["useDataCellRender", "fields", "fieldsConfig", "fieldProps", "requestFields", "requestFieldsUrl", "requestFieldsParams", "fieldPropsFn", "indexColumn", "extraColumns", "onDataCellClick", "onDataCellClickV2", "scroll", "rootClassName", "customEmptyText"];
+var _excluded = ["useDataCellRender", "fields", "fieldsConfig", "fieldProps", "requestFields", "requestFieldsUrl", "requestFieldsParams", "fieldPropsFn", "indexColumn", "extraColumns", "onDataCellClick", "onDataCellClickV2", "scroll", "rootClassName", "customEmptyText", "headerStyle"];
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -34,6 +34,7 @@ export var BaseTable = function BaseTable(_ref) {
     scroll = _ref.scroll,
     rootClassName = _ref.rootClassName,
     customEmptyText = _ref.customEmptyText,
+    topHeaderStyle = _ref.headerStyle,
     otherProps = _objectWithoutProperties(_ref, _excluded);
   var responseConfig = useRequestFieldsConfig();
   var _useRexProConfigProvi = useRexProConfigProvider(),
@@ -89,6 +90,28 @@ export var BaseTable = function BaseTable(_ref) {
     };
   };
 
+  /** 处理表头渲染,扩展样式 */
+  var renderTitle = function renderTitle(title, headerStyle) {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("div", {
+        style: {
+          position: 'relative',
+          zIndex: 0,
+          opacity: 0
+        },
+        children: title
+      }), /*#__PURE__*/_jsx("div", {
+        style: _objectSpread({
+          position: 'absolute',
+          inset: 0,
+          zIndex: 1,
+          padding: 'inherit'
+        }, headerStyle !== null && headerStyle !== void 0 ? headerStyle : topHeaderStyle),
+        children: title
+      })]
+    });
+  };
+
   // 列处理
   var _useMemo = useMemo(function () {
       var _fieldPropsFn;
@@ -97,19 +120,20 @@ export var BaseTable = function BaseTable(_ref) {
       var each = function each(data) {
         if (!data) return;
         return data.map(function (item) {
-          if ('dataIndex' in item && item.dataIndex) {
+          var hasChildren = 'children' in item && Array.isArray(item.children) && item.children.length > 0;
+          if (hasChildren) {
+            var children = 'children' in item ? each(item.children) : undefined;
+            return _objectSpread(_objectSpread({}, item), {}, {
+              title: renderTitle(item.title, item === null || item === void 0 ? void 0 : item.headerStyle),
+              children: children
+            });
+          }
+          if ('dataIndex' in item) {
             var _item$width2;
             var itemProps = item.dataIndex ? fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps[item.dataIndex] : {};
             // defaultWidth.current = item.width ?? defaultWidth.current;
-            var mergeItem = _objectSpread(_objectSpread({}, item), itemProps);
-
-            // 隐藏时候不显示
-            if (mergeItem.hidden) return undefined;
-            if (operationPermission && !operationPermission(mergeItem.permissionKey)) return undefined;
-
-            // 渲染列 +1
-            inlineColumnCount += 1;
-            var newItem = _objectSpread(_objectSpread(_objectSpread({}, item), {}, {
+            var mergeItem = _objectSpread(_objectSpread({}, item), {}, {
+              title: renderTitle(item.title, item === null || item === void 0 ? void 0 : item.headerStyle),
               width: (_item$width2 = item.width) !== null && _item$width2 !== void 0 ? _item$width2 : 100,
               render: function render(value, record, index) {
                 if (item.render) return item.render(value, record, index);
@@ -145,16 +169,18 @@ export var BaseTable = function BaseTable(_ref) {
                 }
                 return {};
               }
-            }, itemProps), generateClassNameWithWidth(_objectSpread(_objectSpread({}, item), itemProps)));
-            delete newItem.hidden;
-            delete newItem.permissionKey;
-            return newItem;
-          }
-          if ('children' in item) {
-            var children = 'children' in item ? each(item.children) : undefined;
-            return _objectSpread(_objectSpread({}, item), {}, {
-              children: children
-            });
+            }, itemProps);
+
+            // 隐藏时候不显示
+            if (mergeItem.hidden) return undefined;
+            if (operationPermission && !operationPermission(mergeItem.permissionKey)) return undefined;
+
+            // 渲染列 +1
+            inlineColumnCount += 1;
+            Object.assign(mergeItem, generateClassNameWithWidth(mergeItem));
+            delete mergeItem.hidden;
+            delete mergeItem.permissionKey;
+            return mergeItem;
           }
           return _objectSpread({}, item);
         }).filter(function (ii) {
@@ -167,14 +193,14 @@ export var BaseTable = function BaseTable(_ref) {
         inlineColumns: each(fields),
         columnCount: inlineColumnCount
       };
-    }, [fields]),
+    }, [fields, topHeaderStyle]),
     inlineColumns = _useMemo.inlineColumns,
     columnCount = _useMemo.columnCount;
   var beforeInlineColumn = [indexColumn && _objectSpread(_objectSpread({
-    title: formatMessage({
+    title: renderTitle(formatMessage({
       id: 'rex.components.base-table.column-serial-number-title',
       defaultMessage: '序号'
-    }),
+    }), indexColumn.headerStyle),
     dataIndex: 'key-web-index',
     align: 'center',
     fixed: true,
@@ -240,7 +266,9 @@ export var BaseTable = function BaseTable(_ref) {
     },
     children: /*#__PURE__*/_jsx(Table, _objectSpread(_objectSpread({
       columns: [].concat(beforeInlineColumn || [], inlineColumns || [], (extraColumns || []).map(function (ii) {
-        return _objectSpread(_objectSpread({}, ii), generateClassNameWithWidth(ii));
+        return _objectSpread(_objectSpread({}, ii), {}, {
+          title: renderTitle(ii.title, ii === null || ii === void 0 ? void 0 : ii.headerStyle)
+        }, generateClassNameWithWidth(ii));
       })),
       rowKey: "key"
     }, otherProps), {}, {
@@ -260,6 +288,9 @@ export var BaseTable = function BaseTable(_ref) {
       rowSelection: otherProps.rowSelection ? _objectSpread({
         columnWidth: 50,
         fixed: 'left',
+        columnTitle: function columnTitle(checkboxNode) {
+          return renderTitle(checkboxNode);
+        },
         // className: `custom-width::${otherProps.rowSelection.columnWidth ?? 50}`,
         getCheckboxProps: function getCheckboxProps(record) {
           if (record && record.is_checkbox === 2) {

package/dist/components/base-table/components/BaseTableRow.js

@@ -8,10 +8,10 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /* eslint-disable react/destructuring-assignment */
-import classNames from "classnames";
-import React from "react";
-import { TableParentRow, TableParentRowCell } from "../style";
+import classNames from 'classnames';
+import React from 'react';
 import { DataCell } from "../../data-cell/data-cell";
+import { TableParentRow, TableParentRowCell } from "../style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -52,16 +52,16 @@ export var BaseTableRow = function BaseTableRow(outProps) {
       var isRight = rightArr[rightArr.length - 1] && rightArr[rightArr.length - 1].key.includes('key-');
       /** 右边宽度 */
       var rightWidth = getWidth(rightArr[rightArr.length - 1]);
-      /**
-       * 偏移量
-       * - td的padding值: 16
-       * - 滚动条的宽度 20
+      /**
+       * 偏移量
+       * - td的padding值: 16
+       * - 滚动条的宽度 20
        */
       var offsetWidth = 16 + 20;
       // console.log(props);
 
       return /*#__PURE__*/_jsxs(TableParentRow, {
-        className: classNames("base-table-parent-row", props.className),
+        className: classNames('base-table-parent-row', props.className),
         "data-row-key": rowKey,
         children: [function () {
           var content = function content(width) {

package/dist/components/base-table/demo/BaseTableAll.js

@@ -1,54 +1,61 @@
-import React from 'react';
 import { BaseTable } from "../base-table";
 import { tableData } from "./tableData";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 export default (function () {
   return /*#__PURE__*/_jsx(BaseTable, {
+    headerStyle: {
+      backgroundColor: '#98eeff',
+      color: '#000'
+    },
     fieldsConfig: [{
-      "title": "beforeExtraColumns",
-      "dataIndex": "beforeExtraColumns",
-      width: 200
+      title: 'beforeExtraColumns',
+      dataIndex: 'beforeExtraColumns',
+      width: 200,
+      headerStyle: {
+        backgroundColor: '#000',
+        color: '#fff'
+      }
     }, {
-      "title": "编号/状态",
-      "dataIndex": "status_name",
+      title: '编号/状态',
+      dataIndex: 'status_name',
       width: 200,
-      "key": "status_name"
+      key: 'status_name'
     }, {
-      "title": "SPU/组合SKU",
-      "dataIndex": "goods_spu_info",
+      title: 'SPU/组合SKU',
+      dataIndex: 'goods_spu_info',
       width: 200,
-      "key": "goods_spu_info"
+      key: 'goods_spu_info'
     }, {
-      "title": "图片",
-      "dataIndex": "goods_image",
-      "key": "goods_image",
+      title: '图片',
+      dataIndex: 'goods_image',
+      key: 'goods_image',
       width: 200,
-      "align": 'center'
+      align: 'center'
     }, {
-      "title": "SKU/属性",
-      "dataIndex": "goods_sku_info",
+      title: 'SKU/属性',
+      dataIndex: 'goods_sku_info',
       width: 200,
-      "key": "goods_sku_info"
+      key: 'goods_sku_info'
     }, {
-      "title": "计划员",
-      "dataIndex": "planuser",
+      title: '计划员',
+      dataIndex: 'planuser',
       width: 200,
-      "key": "planuser"
+      key: 'planuser'
     }, {
-      "title": "供应商",
-      "dataIndex": "factory",
+      title: '供应商',
+      dataIndex: 'factory',
       width: 200,
-      "key": "factory"
+      key: 'factory'
     }, {
-      "title": "ASIN",
-      "dataIndex": "asin",
-      "key": "asin",
+      title: 'ASIN',
+      dataIndex: 'asin',
+      key: 'asin',
       width: 200
     }],
     extraColumns: [{
-      "title": "extraColumns",
-      "dataIndex": "extraColumns",
+      title: 'extraColumns',
+      dataIndex: 'extraColumns',
       width: 200,
       fixed: 'right',
       render: function render() {

package/dist/components/base-table/demo/BaseTableBasic.js

@@ -1,39 +1,38 @@
-import React from 'react';
 import { BaseTable } from "../base-table";
 import { tableData } from "./tableData";
 import { jsx as _jsx } from "react/jsx-runtime";
 export default (function () {
   return /*#__PURE__*/_jsx(BaseTable, {
     fieldsConfig: [{
-      "title": "编号/状态",
-      "dataIndex": "status_name",
-      "key": "status_name"
+      title: '编号/状态',
+      dataIndex: 'status_name',
+      key: 'status_name'
     }, {
-      "title": "SPU/组合SKU",
-      "dataIndex": "goods_spu_info",
-      "key": "goods_spu_info",
+      title: 'SPU/组合SKU',
+      dataIndex: 'goods_spu_info',
+      key: 'goods_spu_info',
       hidden: true
     }, {
-      "title": "图片",
-      "dataIndex": "goods_image",
-      "key": "goods_image",
-      "align": 'center'
+      title: '图片',
+      dataIndex: 'goods_image',
+      key: 'goods_image',
+      align: 'center'
     }, {
-      "title": "SKU/属性",
-      "dataIndex": "goods_sku_info",
-      "key": "goods_sku_info"
+      title: 'SKU/属性',
+      dataIndex: 'goods_sku_info',
+      key: 'goods_sku_info'
     }, {
-      "title": "计划员",
-      "dataIndex": "planuser",
-      "key": "planuser"
+      title: '计划员',
+      dataIndex: 'planuser',
+      key: 'planuser'
     }, {
-      "title": "供应商",
-      "dataIndex": "factory",
-      "key": "factory"
+      title: '供应商',
+      dataIndex: 'factory',
+      key: 'factory'
     }, {
-      "title": "ASIN22",
-      "dataIndex": "asin",
-      "key": "asin"
+      title: 'ASIN22',
+      dataIndex: 'asin',
+      key: 'asin'
     }],
     extraColumns: [{
       title: '操作',

package/dist/components/base-table/demo/BaseTableRowSelect.js

@@ -1,38 +1,37 @@
-import React from 'react';
 import { BaseTable } from "../base-table";
 import { tableData } from "./tableData";
 import { jsx as _jsx } from "react/jsx-runtime";
 export default (function () {
   return /*#__PURE__*/_jsx(BaseTable, {
     fieldsConfig: [{
-      "title": "编号/状态",
-      "dataIndex": "status_name",
-      "key": "status_name"
+      title: '编号/状态',
+      dataIndex: 'status_name',
+      key: 'status_name'
     }, {
-      "title": "SPU/组合SKU",
-      "dataIndex": "goods_spu_info",
-      "key": "goods_spu_info"
+      title: 'SPU/组合SKU',
+      dataIndex: 'goods_spu_info',
+      key: 'goods_spu_info'
     }, {
-      "title": "图片",
-      "dataIndex": "goods_image",
-      "key": "goods_image",
-      "align": 'center'
+      title: '图片',
+      dataIndex: 'goods_image',
+      key: 'goods_image',
+      align: 'center'
     }, {
-      "title": "SKU/属性",
-      "dataIndex": "goods_sku_info",
-      "key": "goods_sku_info"
+      title: 'SKU/属性',
+      dataIndex: 'goods_sku_info',
+      key: 'goods_sku_info'
     }, {
-      "title": "计划员",
-      "dataIndex": "planuser",
-      "key": "planuser"
+      title: '计划员',
+      dataIndex: 'planuser',
+      key: 'planuser'
     }, {
-      "title": "供应商",
-      "dataIndex": "factory",
-      "key": "factory"
+      title: '供应商',
+      dataIndex: 'factory',
+      key: 'factory'
     }, {
-      "title": "ASIN",
-      "dataIndex": "asin",
-      "key": "asin"
+      title: 'ASIN',
+      dataIndex: 'asin',
+      key: 'asin'
     }],
     scroll: function scroll(height) {
       return {