@teamias/rex-design 0.0.34 → 0.0.36

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

@@ -5,7 +5,13 @@ export declare const BaseDescriptions: FC<IBaseDescriptionsProps>;
 type TDataCellItem = GetProps<typeof DataCell>['items'][number];
 /** 允许自定义参数 */
 type TDataCellItemExtend = TDataCellItem & Record<string, any>;
-export interface IBaseDescriptionsProps extends Omit<GetProps<typeof Descriptions>, 'items'> {
+export interface IBaseDescriptionsProps extends Omit<GetProps<typeof Descriptions>, 'items' | 'column'> {
+    /** table layout fixed */
+    isFixed?: boolean;
+    /** 每个 label 宽度 */
+    labelWidth?: string;
+    /** 列数 */
+    column?: number;
     /** 主要渲染数据 */
     items?: Array<{
         label: React.ReactNode;

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

@@ -1,5 +1,5 @@
 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); }
-var _excluded = ["items", "useDataCellRender", "onDataCellClick"];
+var _excluded = ["column", "labelWidth", "useDataCellRender", "items", "onDataCellClick", "isFixed", "styles"];
 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; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -8,52 +8,75 @@ 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; }
 import { Descriptions } from 'antd';
+import { merge } from 'lodash';
 import { DataCell } from "../data-cell";
+import { Box } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var BaseDescriptions = function BaseDescriptions(_ref) {
-  var items = _ref.items,
+  var _ref$column = _ref.column,
+    column = _ref$column === void 0 ? 3 : _ref$column,
+    _ref$labelWidth = _ref.labelWidth,
+    labelWidth = _ref$labelWidth === void 0 ? '120px' : _ref$labelWidth,
     _ref$useDataCellRende = _ref.useDataCellRender,
     useDataCellRender = _ref$useDataCellRende === void 0 ? true : _ref$useDataCellRende,
+    items = _ref.items,
     onDataCellClick = _ref.onDataCellClick,
+    isFixed = _ref.isFixed,
+    styles = _ref.styles,
     otherProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_jsx(Descriptions, _objectSpread(_objectSpread({
-    size: "small"
-  }, otherProps), {}, {
-    items: items === null || items === void 0 ? void 0 : items.map(function (item, index) {
-      try {
-        var _item$children;
-        var children = useDataCellRender ? ((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.map(function (topItem, topIndex) {
-          return /*#__PURE__*/_jsx(DataCell, {
-            items: topItem,
-            onClick: function onClick(cellItem, subItem) {
-              // console.log(cellItem, subItem);
-              onDataCellClick === null || onDataCellClick === void 0 || onDataCellClick({
-                item: topItem,
-                cellItem: cellItem,
-                subItem: subItem,
-                index: index
-              });
-            }
-          }, topIndex);
-        })) || '-' : item.children || '-';
-        return _objectSpread(_objectSpread({}, item), {}, {
-          key: "".concat(index),
-          children: children
-        });
-      } catch (error) {
-        console.error('BaseDescriptions Error:', error, item, index);
-        return _objectSpread(_objectSpread({}, item), {}, {
-          key: "".concat(index),
-          children: /*#__PURE__*/_jsx("div", {
-            style: {
-              color: 'red'
-            },
-            children: "\u6570\u636E\u51FA\u73B0\u95EE\u9898,\u8BF7\u67E5\u770B\u63A7\u5236\u53F0\u8F93\u51FA"
-          })
-        });
-      }
-    })
-  }));
+  return /*#__PURE__*/_jsx(Box, {
+    style: {
+      '--table-layout': isFixed ? 'fixed' : 'auto',
+      '--label-width': labelWidth,
+      '--content-width': "".concat(100 / column, "%")
+    },
+    children: /*#__PURE__*/_jsx(Descriptions, _objectSpread(_objectSpread({
+      size: "small"
+    }, otherProps), {}, {
+      styles: merge({}, {
+        content: {
+          padding: '24px 12px'
+        },
+        label: {
+          padding: '12px'
+        }
+      }, styles),
+      items: items === null || items === void 0 ? void 0 : items.map(function (item, index) {
+        try {
+          var _item$children;
+          var children = useDataCellRender ? ((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.map(function (topItem, topIndex) {
+            return /*#__PURE__*/_jsx(DataCell, {
+              items: topItem,
+              onClick: function onClick(cellItem, subItem) {
+                // console.log(cellItem, subItem);
+                onDataCellClick === null || onDataCellClick === void 0 || onDataCellClick({
+                  item: topItem,
+                  cellItem: cellItem,
+                  subItem: subItem,
+                  index: index
+                });
+              }
+            }, topIndex);
+          })) || '-' : item.children || '-';
+          return _objectSpread(_objectSpread({}, item), {}, {
+            key: "".concat(index),
+            children: children
+          });
+        } catch (error) {
+          console.error('BaseDescriptions Error:', error, item, index);
+          return _objectSpread(_objectSpread({}, item), {}, {
+            key: "".concat(index),
+            children: /*#__PURE__*/_jsx("div", {
+              style: {
+                color: 'red'
+              },
+              children: "\u6570\u636E\u51FA\u73B0\u95EE\u9898,\u8BF7\u67E5\u770B\u63A7\u5236\u53F0\u8F93\u51FA"
+            })
+          });
+        }
+      })
+    }))
+  });
 };
 
 /** 允许自定义参数 */

package/dist/components/base-descriptions/style.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Box: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/base-descriptions/style.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export var Box = styled.div.withConfig({
+  displayName: "Box",
+  componentId: "rex-design-aaf4__sc-1bifo7s-0"
+})(["table{table-layout:var(--table-layout) !important;}th.ant-descriptions-item-label{width:var(--label-width);max-width:var(--label-width);min-width:var(--label-width);}td.ant-descriptions-item-content{width:var(--content-width);max-width:var(--content-width);min-width:var(--label-width);}"]);

package/dist/components/base-form/core/descriptions-model.js

@@ -1,6 +1,7 @@
 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); }
-var _excluded = ["descriptionsProps", "fields"],
-  _excluded2 = ["label", "tooltip", "formItemProps", "rules"];
+var _excluded = ["isFixed", "column", "styles"],
+  _excluded2 = ["descriptionsProps", "fields", "labelWidth"],
+  _excluded3 = ["label", "tooltip", "formItemProps", "rules"];
 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; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -9,14 +10,23 @@ 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; }
 import { Descriptions, Form } from 'antd';
+import { merge } from 'lodash';
 import { useMemo } from 'react';
 import { DescriptionsStyle } from "../style";
 import { BaseForm } from "./base-form";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var DescriptionsModel = function DescriptionsModel(_ref) {
-  var descriptionsProps = _ref.descriptionsProps,
+  var _ref$descriptionsProp = _ref.descriptionsProps,
+    _ref$descriptionsProp2 = _ref$descriptionsProp === void 0 ? {} : _ref$descriptionsProp,
+    isFixed = _ref$descriptionsProp2.isFixed,
+    _ref$descriptionsProp3 = _ref$descriptionsProp2.column,
+    column = _ref$descriptionsProp3 === void 0 ? 3 : _ref$descriptionsProp3,
+    styles = _ref$descriptionsProp2.styles,
+    descriptionsProps = _objectWithoutProperties(_ref$descriptionsProp2, _excluded),
     fields = _ref.fields,
-    baseFormProps = _objectWithoutProperties(_ref, _excluded);
+    _ref$labelWidth = _ref.labelWidth,
+    labelWidth = _ref$labelWidth === void 0 ? '120px' : _ref$labelWidth,
+    baseFormProps = _objectWithoutProperties(_ref, _excluded2);
   var descriptionsItems = useMemo(function () {
     /** 检查field或其subItems是否包含rules */
     var hasRules = function hasRules(field) {
@@ -38,7 +48,7 @@ export var DescriptionsModel = function DescriptionsModel(_ref) {
         tooltip = field.tooltip,
         formItemProps = field.formItemProps,
         rules = field.rules,
-        otherData = _objectWithoutProperties(field, _excluded2);
+        otherData = _objectWithoutProperties(field, _excluded3);
       return {
         label: /*#__PURE__*/_jsx(Form.Item, {
           label: label,
@@ -75,14 +85,23 @@ export var DescriptionsModel = function DescriptionsModel(_ref) {
     })) || [];
   }, [fields]);
   return /*#__PURE__*/_jsx(DescriptionsStyle, {
+    style: {
+      '--table-layout': isFixed ? 'fixed' : 'auto',
+      '--label-width': labelWidth,
+      '--content-width': "".concat(100 / column, "%")
+    },
     children: /*#__PURE__*/_jsx(Descriptions, _objectSpread(_objectSpread({
-      bordered: true,
-      styles: {
+      bordered: true
+    }, descriptionsProps), {}, {
+      styles: merge({}, {
         content: {
           padding: '24px 12px'
+        },
+        label: {
+          padding: '12px'
         }
-      }
-    }, descriptionsProps), {}, {
+      }, styles),
+      column: column,
       items: descriptionsItems
     }))
   });

package/dist/components/base-form/demo/BaseFormDescriptions.js

@@ -35,9 +35,11 @@ export default (function () {
       }]
     }, {
       field: ['avg_cost_min', 'avg_cost_max'],
-      valueType: 'inputNumberRangeV2'
+      valueType: 'inputNumberRangeV2',
+      itemWidth: '100%'
     }],
-    hidden: false
+    hidden: false,
+    span: 3
   }, {
     valueType: 'multipleComponents',
     label: 'multipleComponents',

package/dist/components/base-form/style/index.js

@@ -8,4 +8,4 @@ export var BaseFormStyle = createGlobalStyle([".base-form-field-group{display:fl
 export var DescriptionsStyle = styled.div.withConfig({
   displayName: "DescriptionsStyle",
   componentId: "rex-design-aaf4__sc-1e1tacy-0"
-})([".ant-descriptions-view{overflow:auto;}.ant-form-item-additional{position:absolute;}.ant-descriptions-row{th.ant-descriptions-item-label:has( + td.ant-descriptions-item-content > span:empty ){display:none;}td.ant-descriptions-item-content:has(> span:empty){display:none;}}"]);
+})(["table{table-layout:var(--table-layout) !important;}.ant-descriptions-view{overflow:auto;}th.ant-descriptions-item-label{width:var(--label-width);max-width:var(--label-width);min-width:var(--label-width);}td.ant-descriptions-item-content{width:var(--content-width);max-width:var(--content-width);min-width:var(--label-width);}.ant-form-item-additional{position:absolute;}.ant-descriptions-row{th.ant-descriptions-item-label:has( + td.ant-descriptions-item-content > span:empty ){display:none;}td.ant-descriptions-item-content:has(> span:empty){display:none;}th label.ant-form-item-no-colon{display:block;word-wrap:break-word;&:after{content:initial;}> *{vertical-align:middle;}}}"]);

package/dist/components/base-form/types/base-form.d.ts

@@ -26,5 +26,12 @@ export interface IBaseFormProps {
     /**
      * Descriptions 组件属性
      */
-    descriptionsProps?: Omit<GetProps<typeof Descriptions>, 'items'>;
+    descriptionsProps?: IDescriptionsProps;
 }
+interface IDescriptionsProps extends Omit<GetProps<typeof Descriptions>, 'items' | 'column'> {
+    /** 列数 */
+    column?: number;
+    /** table layout fixed */
+    isFixed?: boolean;
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamias/rex-design",
-  "version": "0.0.34",
+  "version": "0.0.36",
   "description": "A react library developed with dumi",
   "license": "MIT",
   "module": "dist/index.js",