@kne/form-info 0.1.9 → 0.1.10

package/dist/index.modern.js

@@ -2,14 +2,17 @@ import '@kne/info-page/dist/index.css';
 import '@kne/react-form-antd/dist/index.css';
 import { FormAntd, CancelButton, SubmitButton } from '@kne/react-form-antd';
 export * from '@kne/react-form-antd';
-import { forwardRef, isValidElement, useRef, createElement, createContext, useContext } from 'react';
+import { useMemo, forwardRef, isValidElement, useRef, createElement, createContext, useContext } from 'react';
 import InfoPage from '@kne/info-page';
 import { useFlexBox } from '@kne/flex-box';
-import { FormInfo as FormInfo$1, SubList, MultiField as MultiField$1, TableList as TableList$1 } from '@kne/react-form-plus';
+import { FormInfo as FormInfo$1, SubList, MultiField as MultiField$1, TableList as TableList$1, FieldList } from '@kne/react-form-plus';
+import { useIsMobile } from '@kne/responsive-utils';
 import { Col, Row, Empty, Button, Divider, Modal, Flex, Steps } from 'antd';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';
 import { createWithIntlProvider, useIntl } from '@kne/react-intl';
+import TableView, { isRenderMobileActive, resolveRenderMobile } from '@kne/table-view';
+import '@kne/table-view/dist/index.css';
 import useControlValue from '@kne/use-control-value';
 
 function _extends() {
@@ -113,7 +116,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 => {
@@ -128,7 +131,8 @@ const FormInfo = props => {
       gap
     } = _Object$assign,
     others = _objectWithoutPropertiesLoose(_Object$assign, _excluded$7);
-  const isFlexBox = !(Number.isInteger(column) && column > 0);
+  const isMobile = useIsMobile();
+  const isFlexBox = !isMobile && !(Number.isInteger(column) && column > 0);
   const {
     ref: flexBoxRef,
     column: flexBoxColumn
@@ -163,6 +167,9 @@ const FormInfo = props => {
     });
   };
   const renderColumn = () => {
+    if (isMobile) {
+      return renderInner(1);
+    }
     if (!isFlexBox) {
       return renderInner(column);
     }
@@ -212,6 +219,7 @@ const List = withLocale(p => {
   const {
     formatMessage
   } = useIntl();
+  const isMobile = useIsMobile();
   const _Object$assign = Object.assign({}, {
       addText: formatMessage({
         id: 'addText'
@@ -237,8 +245,8 @@ const List = withLocale(p => {
       bordered
     } = _Object$assign,
     others = _objectWithoutPropertiesLoose(_Object$assign, _excluded$6);
+  const showBorder = isMobile ? false : bordered;
   return /*#__PURE__*/jsx(SubList, _extends({}, others, {
-    className: classnames(className, style['list-part']),
     listRender: _ref => {
       let {
           id,
@@ -251,7 +259,7 @@ const List = withLocale(p => {
           [style['is-important']]: important
         }),
         children: [/*#__PURE__*/jsx(FormInfo, _extends({}, props, {
-          bordered: bordered,
+          bordered: showBorder,
           className: style['list-item-part'],
           gap: 16,
           extra: allowRemove && /*#__PURE__*/jsx(Button, {
@@ -270,9 +278,9 @@ const List = withLocale(p => {
       onAdd
     }) => {
       return /*#__PURE__*/jsx(InfoPage.Part, {
-        className: itemClassName,
+        className: classnames(className, itemClassName, style['list-part']),
         title: title,
-        bordered: bordered,
+        bordered: showBorder,
         extra: /*#__PURE__*/jsx("div", {
           className: style['extra-container'],
           children: allowAdd && /*#__PURE__*/jsx(Button, {
@@ -348,7 +356,26 @@ 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, {
+  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 {
     formatMessage
@@ -374,10 +401,37 @@ const TableList = withLocale(p => {
       removeIcon,
       removeText,
       title,
-      bordered
+      bordered,
+      renderMobile = true,
+      list
     } = _Object$assign,
     others = _objectWithoutPropertiesLoose(_Object$assign, _excluded$4);
-  return /*#__PURE__*/jsx(TableList$1, _extends({}, others, {
+  const isMobile = useIsMobile();
+  const useMobileRender = isRenderMobileActive(renderMobile, isMobile);
+  const resolvedRenderMobile = useMemo(() => resolveRenderMobile(renderMobile), [renderMobile]);
+  const columns = useMemo(() => buildColumns(list, {
+    removeText
+  }), [list, removeText]);
+  const renderPart = (children, {
+    onAdd,
+    allowAdd
+  }, extraClassName) => /*#__PURE__*/jsx(InfoPage.Part, {
+    title: title,
+    className: classnames(className, style['table-list'], extraClassName),
+    bordered: bordered,
+    extra: /*#__PURE__*/jsx("div", {
+      className: style['extra-container'],
+      children: allowAdd && /*#__PURE__*/jsx(Button, {
+        className: style['extra-btn'],
+        icon: addIcon,
+        onClick: onAdd,
+        children: addText
+      })
+    }),
+    children: children
+  });
+  const renderDesktop = () => /*#__PURE__*/jsx(TableList$1, _extends({}, others, {
+    list: list,
     headerRender: (children, {
       width
     }) => {
@@ -435,30 +489,68 @@ const TableList = withLocale(p => {
         })]
       }, id);
     },
-    children: (children, {
-      onAdd,
-      allowAdd
+    children: (children, controls) => renderPart(/*#__PURE__*/jsx("div", {
+      className: style['table-list-inner'],
+      children: children
+    }), controls)
+  }));
+  const renderMobileList = () => /*#__PURE__*/jsx(SubList, _extends({}, others, {
+    list: list,
+    listRender: ({
+      id,
+      list: rowList,
+      groupArgs,
+      onRemove,
+      allowRemove
     }) => {
-      return /*#__PURE__*/jsx(InfoPage.Part, {
-        title: title,
-        className: classnames(className, style['table-list']),
-        bordered: bordered,
-        extra: /*#__PURE__*/jsx("div", {
-          className: style['extra-container'],
-          children: allowAdd && /*#__PURE__*/jsx(Button, {
-            className: style['extra-btn'],
-            icon: addIcon,
-            onClick: onAdd,
-            children: addText
+      return /*#__PURE__*/jsxs("div", {
+        className: classnames(style['table-list-mobile-card'], 'info-page-table-mobile-card'),
+        children: [/*#__PURE__*/jsx("div", {
+          className: style['table-list-mobile-card-body'],
+          children: /*#__PURE__*/jsx(FieldList, {
+            list: rowList,
+            groupArgs: groupArgs,
+            itemRender: (children, targetProps) => {
+              if (targetProps.hidden) {
+                return /*#__PURE__*/jsx("div", {
+                  style: {
+                    display: 'none'
+                  },
+                  children: children
+                });
+              }
+              return /*#__PURE__*/jsx("div", {
+                className: style['table-list-mobile-field'],
+                children: children
+              });
+            }
           })
-        }),
-        children: /*#__PURE__*/jsx("div", {
-          className: style['table-list-inner'],
-          children: children
-        })
-      });
-    }
+        }), /*#__PURE__*/jsx("div", {
+          className: style['table-list-mobile-actions'],
+          children: /*#__PURE__*/jsx(Button, {
+            type: "link",
+            onClick: onRemove,
+            danger: true,
+            disabled: !allowRemove,
+            icon: removeIcon,
+            children: removeText
+          })
+        })]
+      }, id);
+    },
+    children: (children, controls) => renderPart(/*#__PURE__*/jsx("div", {
+      className: classnames(style['table-list-mobile-list'], 'info-page-table-mobile-card-list'),
+      children: children
+    }), controls, style['is-mobile'])
   }));
+  return /*#__PURE__*/jsx(TableView, {
+    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"];
@@ -3890,6 +3982,7 @@ const FormSteps = p => {
       children
     } = _Object$assign,
     stepProps = _objectWithoutPropertiesLoose(_Object$assign, _excluded$1);
+  const isMobile = useIsMobile();
   const [currentStep, onStepChange] = useControlValue(stepProps, {
     value: 'current',
     defaultValue: 'defaultCurrent'
@@ -3915,12 +4008,20 @@ const FormSteps = p => {
     }
     return currentItem;
   });
+
+  // 移动端强制垂直布局，不允许水平 Steps
+  const stepsDirection = isMobile ? 'vertical' : stepProps.direction || stepProps.orientation;
+  const isVerticalSteps = stepsDirection === 'vertical';
   const inner = /*#__PURE__*/jsxs(Flex, {
     className: className,
-    vertical: stepProps.direction !== 'vertical' || stepProps.orientation !== 'vertical',
+    vertical: !isVerticalSteps || isMobile,
     gap: 24,
-    children: [/*#__PURE__*/jsx(Steps, _extends({}, omit_1(stepProps, ['current', 'defaultCurrent', 'onChange']), {
-      className: classnames(stepsClassName, style['steps']),
+    children: [/*#__PURE__*/jsx(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__*/jsx("div", {