@kne/form-info 0.1.9 → 0.1.10

package/dist/index.js

@@ -5,15 +5,19 @@ var react = require('react');
 var InfoPage = require('@kne/info-page');
 var flexBox = require('@kne/flex-box');
 var reactFormPlus = require('@kne/react-form-plus');
+var responsiveUtils = require('@kne/responsive-utils');
 var antd = require('antd');
 var jsxRuntime = require('react/jsx-runtime');
 var icons = require('@ant-design/icons');
 var reactIntl = require('@kne/react-intl');
+var TableView = require('@kne/table-view');
+require('@kne/table-view/dist/index.css');
 var useControlValue = require('@kne/use-control-value');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var InfoPage__default = /*#__PURE__*/_interopDefaultLegacy(InfoPage);
+var TableView__default = /*#__PURE__*/_interopDefaultLegacy(TableView);
 var useControlValue__default = /*#__PURE__*/_interopDefaultLegacy(useControlValue);
 
 function _extends() {
@@ -117,7 +121,7 @@ var classnames = createCommonjsModule(function (module) {
 }());
 });
 
-var style = {"form-outer":"kne-form-info_ZQNNL","form-info":"kne-form-info_GW4Xx","extra-btn":"kne-form-info_eY4qR","list-part":"kne-form-info_SL3dC","list-item":"kne-form-info_PNnMa","is-important":"kne-form-info_Xkp38","list-item-part":"kne-form-info_HiB5Q","table-list-inner":"kne-form-info_Uw-3T","multi-field-item":"kne-form-info_uogqr","react-form__field-label":"kne-form-info_UGjS9","multi-field-add-btn":"kne-form-info_rjVPh","table-list":"kne-form-info_r8-bn","table-list-field":"kne-form-info_Qkutm","table-list-header":"kne-form-info_9WdfD","is-req":"kne-form-info_CsPaL","table-options":"kne-form-info_8smwK","steps":"kne-form-info_IOdkE","steps-form-inner":"kne-form-info_uc1HZ","steps-modal":"kne-form-info_vWPQO","table-list-empty":"kne-form-info_DXskv","extra-container":"kne-form-info_wU-w4"};
+var style = {"kne-responsive-boundary":"kne-form-info_gh14z","kne-responsive-scroll":"kne-form-info_Kfn6L","form-outer":"kne-form-info_ZQNNL","form-info":"kne-form-info_GW4Xx","extra-btn":"kne-form-info_eY4qR","list-part":"kne-form-info_SL3dC","list-item":"kne-form-info_PNnMa","list-item-part":"kne-form-info_HiB5Q","is-important":"kne-form-info_Xkp38","table-list-inner":"kne-form-info_Uw-3T","multi-field-item":"kne-form-info_uogqr","react-form__field-label":"kne-form-info_UGjS9","multi-field-add-btn":"kne-form-info_rjVPh","table-list-view":"kne-form-info_ZD9zd","table-list":"kne-form-info_r8-bn","is-mobile":"kne-form-info_LtgJz","table-list-mobile-list":"kne-form-info_5uGUh","table-list-mobile-card":"kne-form-info_H8TZT","table-list-mobile-card-body":"kne-form-info_3Mhy7","table-list-mobile-field":"kne-form-info_-e-f1","table-list-mobile-actions":"kne-form-info_FVPV7","table-list-field":"kne-form-info_Qkutm","table-list-header":"kne-form-info_9WdfD","is-req":"kne-form-info_CsPaL","table-options":"kne-form-info_8smwK","steps":"kne-form-info_IOdkE","steps-vertical":"kne-form-info_03aHQ","steps-form-inner":"kne-form-info_uc1HZ","steps-modal":"kne-form-info_vWPQO","table-list-empty":"kne-form-info_DXskv","extra-container":"kne-form-info_wU-w4"};
 
 const _excluded$7 = ["className", "column", "list", "gap"];
 const FormInfo = props => {
@@ -130,7 +134,8 @@ const FormInfo = props => {
     list = _Object$assign.list,
     gap = _Object$assign.gap,
     others = _objectWithoutPropertiesLoose(_Object$assign, _excluded$7);
-  const isFlexBox = !(Number.isInteger(column) && column > 0);
+  const isMobile = responsiveUtils.useIsMobile();
+  const isFlexBox = !isMobile && !(Number.isInteger(column) && column > 0);
   const _useFlexBox = flexBox.useFlexBox(isFlexBox ? column : {}),
     flexBoxRef = _useFlexBox.ref,
     flexBoxColumn = _useFlexBox.column;
@@ -164,6 +169,9 @@ const FormInfo = props => {
     });
   };
   const renderColumn = () => {
+    if (isMobile) {
+      return renderInner(1);
+    }
     if (!isFlexBox) {
       return renderInner(column);
     }
@@ -212,6 +220,7 @@ const _excluded$6 = ["className", "itemClassName", "removeIcon", "removeText", "
 const List = withLocale(p => {
   const _useIntl = reactIntl.useIntl(),
     formatMessage = _useIntl.formatMessage;
+  const isMobile = responsiveUtils.useIsMobile();
   const _Object$assign = Object.assign({}, {
       addText: formatMessage({
         id: 'addText'
@@ -235,8 +244,8 @@ const List = withLocale(p => {
     title = _Object$assign.title,
     bordered = _Object$assign.bordered,
     others = _objectWithoutPropertiesLoose(_Object$assign, _excluded$6);
+  const showBorder = isMobile ? false : bordered;
   return /*#__PURE__*/jsxRuntime.jsx(reactFormPlus.SubList, _extends({}, others, {
-    className: classnames(className, style['list-part']),
     listRender: _ref => {
       let id = _ref.id,
         allowRemove = _ref.allowRemove,
@@ -247,7 +256,7 @@ const List = withLocale(p => {
           [style['is-important']]: important
         }),
         children: [/*#__PURE__*/jsxRuntime.jsx(FormInfo, _extends({}, props, {
-          bordered: bordered,
+          bordered: showBorder,
           className: style['list-item-part'],
           gap: 16,
           extra: allowRemove && /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
@@ -265,9 +274,9 @@ const List = withLocale(p => {
       let allowAdd = _ref2.allowAdd,
         onAdd = _ref2.onAdd;
       return /*#__PURE__*/jsxRuntime.jsx(InfoPage__default["default"].Part, {
-        className: itemClassName,
+        className: classnames(className, itemClassName, style['list-part']),
         title: title,
-        bordered: bordered,
+        bordered: showBorder,
         extra: /*#__PURE__*/jsxRuntime.jsx("div", {
           className: style['extra-container'],
           children: allowAdd && /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
@@ -340,7 +349,25 @@ const MultiField = withLocale(p => {
   }));
 });
 
-const _excluded$4 = ["className", "addIcon", "addText", "removeIcon", "removeText", "title", "bordered"];
+const _excluded$4 = ["className", "addIcon", "addText", "removeIcon", "removeText", "title", "bordered", "renderMobile", "list"];
+const buildColumns = (list, _ref) => {
+  let removeText = _ref.removeText;
+  const fieldList = Array.isArray(list) ? list : [];
+  return [...fieldList.filter(item => {
+    var _item$props, _item$props2;
+    return (item == null || (_item$props = item.props) == null ? void 0 : _item$props.display) !== false && !(item != null && (_item$props2 = item.props) != null && _item$props2.hidden);
+  }).map(item => ({
+    name: item.props.name,
+    title: item.props.label,
+    render: value => value
+  })), {
+    name: '__options__',
+    type: 'options',
+    title: removeText || '',
+    width: 100,
+    render: value => value
+  }];
+};
 const TableList = withLocale(p => {
   const _useIntl = reactIntl.useIntl(),
     formatMessage = _useIntl.formatMessage;
@@ -365,10 +392,39 @@ const TableList = withLocale(p => {
     removeText = _Object$assign.removeText,
     title = _Object$assign.title,
     bordered = _Object$assign.bordered,
+    _Object$assign$render = _Object$assign.renderMobile,
+    renderMobile = _Object$assign$render === void 0 ? true : _Object$assign$render,
+    list = _Object$assign.list,
     others = _objectWithoutPropertiesLoose(_Object$assign, _excluded$4);
-  return /*#__PURE__*/jsxRuntime.jsx(reactFormPlus.TableList, _extends({}, others, {
-    headerRender: (children, _ref) => {
-      let width = _ref.width;
+  const isMobile = responsiveUtils.useIsMobile();
+  const useMobileRender = TableView.isRenderMobileActive(renderMobile, isMobile);
+  const resolvedRenderMobile = react.useMemo(() => TableView.resolveRenderMobile(renderMobile), [renderMobile]);
+  const columns = react.useMemo(() => buildColumns(list, {
+    removeText
+  }), [list, removeText]);
+  const renderPart = (children, _ref2, extraClassName) => {
+    let onAdd = _ref2.onAdd,
+      allowAdd = _ref2.allowAdd;
+    return /*#__PURE__*/jsxRuntime.jsx(InfoPage__default["default"].Part, {
+      title: title,
+      className: classnames(className, style['table-list'], extraClassName),
+      bordered: bordered,
+      extra: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: style['extra-container'],
+        children: allowAdd && /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
+          className: style['extra-btn'],
+          icon: addIcon,
+          onClick: onAdd,
+          children: addText
+        })
+      }),
+      children: children
+    });
+  };
+  const renderDesktop = () => /*#__PURE__*/jsxRuntime.jsx(reactFormPlus.TableList, _extends({}, others, {
+    list: list,
+    headerRender: (children, _ref3) => {
+      let width = _ref3.width;
       return /*#__PURE__*/jsxRuntime.jsxs(antd.Row, {
         className: style['table-list-header'],
         wrap: false,
@@ -380,9 +436,9 @@ const TableList = withLocale(p => {
         })]
       });
     },
-    headerItemRender: (children, _ref2) => {
-      let id = _ref2.id,
-        isReq = _ref2.isReq;
+    headerItemRender: (children, _ref4) => {
+      let id = _ref4.id,
+        isReq = _ref4.isReq;
       return /*#__PURE__*/jsxRuntime.jsx(antd.Col, {
         className: classnames({
           [style['is-req']]: isReq
@@ -397,11 +453,11 @@ const TableList = withLocale(p => {
         children: children
       });
     },
-    listRender: (children, _ref3) => {
-      let id = _ref3.id,
-        width = _ref3.width,
-        onRemove = _ref3.onRemove,
-        allowRemove = _ref3.allowRemove;
+    listRender: (children, _ref5) => {
+      let id = _ref5.id,
+        width = _ref5.width,
+        onRemove = _ref5.onRemove,
+        allowRemove = _ref5.allowRemove;
       return /*#__PURE__*/jsxRuntime.jsxs(antd.Row, {
         wrap: false,
         align: "top",
@@ -421,29 +477,67 @@ const TableList = withLocale(p => {
         })]
       }, id);
     },
-    children: (children, _ref4) => {
-      let onAdd = _ref4.onAdd,
-        allowAdd = _ref4.allowAdd;
-      return /*#__PURE__*/jsxRuntime.jsx(InfoPage__default["default"].Part, {
-        title: title,
-        className: classnames(className, style['table-list']),
-        bordered: bordered,
-        extra: /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: style['extra-container'],
-          children: allowAdd && /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
-            className: style['extra-btn'],
-            icon: addIcon,
-            onClick: onAdd,
-            children: addText
+    children: (children, controls) => renderPart(/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: style['table-list-inner'],
+      children: children
+    }), controls)
+  }));
+  const renderMobileList = () => /*#__PURE__*/jsxRuntime.jsx(reactFormPlus.SubList, _extends({}, others, {
+    list: list,
+    listRender: _ref6 => {
+      let id = _ref6.id,
+        rowList = _ref6.list,
+        groupArgs = _ref6.groupArgs,
+        onRemove = _ref6.onRemove,
+        allowRemove = _ref6.allowRemove;
+      return /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: classnames(style['table-list-mobile-card'], 'info-page-table-mobile-card'),
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: style['table-list-mobile-card-body'],
+          children: /*#__PURE__*/jsxRuntime.jsx(reactFormPlus.FieldList, {
+            list: rowList,
+            groupArgs: groupArgs,
+            itemRender: (children, targetProps) => {
+              if (targetProps.hidden) {
+                return /*#__PURE__*/jsxRuntime.jsx("div", {
+                  style: {
+                    display: 'none'
+                  },
+                  children: children
+                });
+              }
+              return /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: style['table-list-mobile-field'],
+                children: children
+              });
+            }
           })
-        }),
-        children: /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: style['table-list-inner'],
-          children: children
-        })
-      });
-    }
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: style['table-list-mobile-actions'],
+          children: /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
+            type: "link",
+            onClick: onRemove,
+            danger: true,
+            disabled: !allowRemove,
+            icon: removeIcon,
+            children: removeText
+          })
+        })]
+      }, id);
+    },
+    children: (children, controls) => renderPart(/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: classnames(style['table-list-mobile-list'], 'info-page-table-mobile-card-list'),
+      children: children
+    }), controls, style['is-mobile'])
   }));
+  return /*#__PURE__*/jsxRuntime.jsx(TableView__default["default"], {
+    columns: columns,
+    dataSource: [],
+    empty: null,
+    className: style['table-list-view'],
+    renderMobile: useMobileRender ? typeof resolvedRenderMobile === 'function' ? resolvedRenderMobile : () => renderMobileList() : false,
+    render: () => renderDesktop()
+  });
 });
 
 const _excluded$3 = ["className", "children"];
@@ -3870,6 +3964,7 @@ const FormSteps = p => {
     onComplete = _Object$assign.onComplete,
     children = _Object$assign.children,
     stepProps = _objectWithoutPropertiesLoose(_Object$assign, _excluded$1);
+  const isMobile = responsiveUtils.useIsMobile();
   const _useControlValue = useControlValue__default["default"](stepProps, {
       value: 'current',
       defaultValue: 'defaultCurrent'
@@ -3897,12 +3992,20 @@ const FormSteps = p => {
     }
     return currentItem;
   });
+
+  // 移动端强制垂直布局，不允许水平 Steps
+  const stepsDirection = isMobile ? 'vertical' : stepProps.direction || stepProps.orientation;
+  const isVerticalSteps = stepsDirection === 'vertical';
   const inner = /*#__PURE__*/jsxRuntime.jsxs(antd.Flex, {
     className: className,
-    vertical: stepProps.direction !== 'vertical' || stepProps.orientation !== 'vertical',
+    vertical: !isVerticalSteps || isMobile,
     gap: 24,
-    children: [/*#__PURE__*/jsxRuntime.jsx(antd.Steps, _extends({}, omit_1(stepProps, ['current', 'defaultCurrent', 'onChange']), {
-      className: classnames(stepsClassName, style['steps']),
+    children: [/*#__PURE__*/jsxRuntime.jsx(antd.Steps, _extends({}, omit_1(stepProps, ['current', 'defaultCurrent', 'onChange', 'direction', 'orientation']), {
+      direction: stepsDirection,
+      orientation: stepsDirection,
+      className: classnames(stepsClassName, style['steps'], {
+        [style['steps-vertical']]: isVerticalSteps
+      }),
       items: stepItems,
       current: currentStep
     })), /*#__PURE__*/jsxRuntime.jsx("div", {