@jswork/react-ant-form-schema 1.0.20 → 1.0.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/main.cjs.js +1 -1
  2. package/dist/main.cjs.js.map +1 -1
  3. package/dist/main.d.mts +31 -3
  4. package/dist/main.d.ts +31 -3
  5. package/dist/main.esm.js +1 -1
  6. package/dist/main.esm.js.map +1 -1
  7. package/package.json +4 -5
  8. package/src/index.tsx +78 -12
package/dist/main.cjs.js CHANGED
@@ -1,4 +1,4 @@
1
- "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }var h=Object.defineProperty;var n=Object.getOwnPropertySymbols;var y=Object.prototype.hasOwnProperty,A=Object.prototype.propertyIsEnumerable;var d=(t,e,o)=>e in t?h(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,a=(t,e)=>{for(var o in e||(e={}))y.call(e,o)&&d(t,o,e[o]);if(n)for(var o of n(e))A.call(e,o)&&d(t,o,e[o]);return t};var N=(t,e)=>h(t,"name",{value:e,configurable:!0});var u=(t,e)=>{var o={};for(var r in t)y.call(t,r)&&e.indexOf(r)<0&&(o[r]=t[r]);if(t!=null&&n)for(var r of n(t))e.indexOf(r)<0&&A.call(t,r)&&(o[r]=t[r]);return o};var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);var _react = require('react'); var _react2 = _interopRequireDefault(_react);var _antd = require('antd');var _niceformreact = require('@ebay/nice-form-react'); var _niceformreact2 = _interopRequireDefault(_niceformreact);function p(t,e){let o=a({},t);for(let r in e)e[r]&&typeof e[r]=="object"&&!Array.isArray(e[r])?o[r]=p(o[r]||{},e[r]):o[r]=e[r];return o}N(p,"deepMerge");var E="react-ant-form-schema",z={vertical:{wrapperProps:{labelCol:{span:24}}},horizontal:{wrapperProps:{labelCol:{span:8}}}},L={header:null,layout:"horizontal"},T=_react2.default.forwardRef((t,e)=>{var f,i;let c=a(a({},L),t),{className:o,meta:r,header:F,children:b,actionsClassName:x,layout:s}=c,M=u(c,["className","meta","header","children","actionsClassName","layout"]),P=b,l=p(z[s],r),R=s==="horizontal"?(i=(f=l==null?void 0:l.wrapperProps)==null?void 0:f.labelCol)==null?void 0:i.span:0;return _react2.default.createElement(_antd.Form,a({"data-component":E,className:_classnames2.default.call(void 0, E,o),layout:s,ref:e},M),F,_react2.default.createElement(_niceformreact2.default,{meta:l}),_react2.default.createElement(_antd.Form.Item,{wrapperCol:{offset:R},className:x,style:{marginBottom:0}},P))}),w=T;var J=w;exports.default = J;
1
+ "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }var b=Object.defineProperty;var f=Object.getOwnPropertySymbols;var y=Object.prototype.hasOwnProperty,M=Object.prototype.propertyIsEnumerable;var N=(a,t,r)=>t in a?b(a,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):a[t]=r,s=(a,t)=>{for(var r in t||(t={}))y.call(t,r)&&N(a,r,t[r]);if(f)for(var r of f(t))M.call(t,r)&&N(a,r,t[r]);return a};var p=(a,t)=>b(a,"name",{value:t,configurable:!0});var A=(a,t)=>{var r={};for(var e in a)y.call(a,e)&&t.indexOf(e)<0&&(r[e]=a[e]);if(a!=null&&f)for(var e of f(a))t.indexOf(e)<0&&M.call(a,e)&&(r[e]=a[e]);return r};var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);var _react = require('react'); var _react2 = _interopRequireDefault(_react);var _antd = require('antd');var _niceformreact = require('@ebay/nice-form-react'); var _niceformreact2 = _interopRequireDefault(_niceformreact);function n(a,t){let r=s({},a);for(let e in t)t[e]&&typeof t[e]=="object"&&!Array.isArray(t[e])?r[e]=n(r[e]||{},t[e]):r[e]=t[e];return r}p(n,"deepMerge");var S="react-ant-form-schema",h={vertical:{labelWidth:24},horizontal:{labelWidth:4}},_={header:null,layout:"horizontal"},j=_react2.default.forwardRef((a,t)=>{let g=s(s({},_),a),{className:r,meta:e,header:C,children:R,actionsClassName:k,layout:m}=g,z=A(g,["className","meta","header","children","actionsClassName","layout"]),T=R,l=n(h[m],e),W=m==="horizontal"?l==null?void 0:l.labelWidth:0,v=e.groups&&e.groups.length>0,w=e.groupsMode||"fieldset",G=p(()=>{var E;if(w==="tabs"){let c=e.groups.map((i,d)=>{let I=n(h[m],i.meta);return{key:String(d),label:i.title,children:_react2.default.createElement(_niceformreact2.default,{meta:I})}});return _react2.default.createElement(_antd.Tabs,s({items:c,className:"react-ant-form-schema-tabs"},e.tabProps))}else return _react2.default.createElement("div",{className:"react-ant-form-schema-groups"},(E=e.groups)==null?void 0:E.map((c,i)=>{let d=n(h[m],c.meta);return _react2.default.createElement("fieldset",{key:i,className:"react-ant-form-schema-fieldset"},_react2.default.createElement("legend",{className:"react-ant-form-schema-legend"},c.title),_react2.default.createElement(_niceformreact2.default,{meta:d}))}))},"renderGroupsContent");return _react2.default.createElement(_antd.Form,s({"data-component":S,className:_classnames2.default.call(void 0, S,r),layout:m,ref:t},z),C,v?G():_react2.default.createElement(_niceformreact2.default,{meta:l}),_react2.default.createElement(_antd.Form.Item,{wrapperCol:{offset:W},className:k,style:{marginBottom:0}},T))}),x=j;var Y=x;exports.default = Y;
2
2
 
3
3
  module.exports = exports.default;
4
4
  //# sourceMappingURL=main.cjs.js.map
package/dist/main.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["/Users/ap7/github/react-ant-form-schema/packages/lib/dist/main.cjs.js","../src/index.tsx","../src/utils.ts","../src/main.tsx"],"names":["deepMerge","target","source","result","__spreadValues","key","Array","isArray","CLASS_NAME","DEFAULT_META","vertical","wrapperProps","labelCol","span","horizontal","defaultProps","header","layout","ReactAntdFormSchema","React","forwardRef","props","ref","_b","_c","_a","className","meta","children","actionsClassName","rest","footerNode","_meta","_offset","Form","data-component","cx","NiceForm","Item","wrapperCol","offset","style","marginBottom","index_default","main_default"],"mappings":"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","file":"/Users/ap7/github/react-ant-form-schema/packages/lib/dist/main.cjs.js","sourcesContent":[null,"import cx from 'classnames';\nimport React, { ReactNode } from 'react';\nimport { Form, FormInstance, FormProps } from 'antd';\nimport NiceForm, { NiceFormMeta } from '@ebay/nice-form-react';\nimport { deepMerge } from './utils';\n\nconst CLASS_NAME = 'react-ant-form-schema';\nconst DEFAULT_META = {\n vertical: {\n wrapperProps: {\n labelCol: { span: 24 },\n },\n },\n\n // 这个是 nice-form-react 默认的 meta 数据，其它设置不生效\n horizontal: {\n wrapperProps: {\n labelCol: { span: 8 },\n },\n },\n};\n\nexport type ReactAntdFormSchemaProps = {\n /**\n * The form schema meta data.\n */\n meta: NiceFormMeta;\n /**\n * The header content.\n */\n header?: ReactNode;\n /**\n * The form actions className.\n */\n actionsClassName?: string;\n} & FormProps;\n\nconst defaultProps: Partial<ReactAntdFormSchemaProps> = {\n header: null,\n layout: 'horizontal',\n};\n\nconst ReactAntdFormSchema = React.forwardRef<FormInstance, ReactAntdFormSchemaProps>(\n (props, ref) => {\n const { className, meta, header, children, actionsClassName, layout, ...rest } = {\n ...defaultProps,\n ...props,\n };\n const footerNode = children as ReactNode;\n const _meta = deepMerge(DEFAULT_META[layout!], meta) as NiceFormMeta;\n const _offset = layout === 'horizontal' ? _meta?.wrapperProps?.labelCol?.span : 0;\n\n return (\n <Form\n data-component={CLASS_NAME}\n className={cx(CLASS_NAME, className)}\n layout={layout}\n ref={ref}\n {...rest}>\n {header}\n <NiceForm meta={_meta} />\n <Form.Item\n wrapperCol={{ offset: _offset }}\n className={actionsClassName}\n style={{ marginBottom: 0 }}>\n {footerNode}\n </Form.Item>\n </Form>\n );\n }\n);\n\nexport default ReactAntdFormSchema;\n","/**\n * @Author: aric 1290657123@qq.com\n * @Date: 2025-10-18 21:20:55\n * @LastEditors: aric 1290657123@qq.com\n * @LastEditTime: 2025-10-22 08:55:52\n */\n\ntype AnyObject = { [key: string]: any };\n\nexport function deepMerge(target: AnyObject, source: AnyObject) {\n const result = { ...target };\n for (const key in source) {\n if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {\n result[key] = deepMerge(result[key] || {}, source[key]);\n } else {\n result[key] = source[key];\n }\n }\n return result;\n}\n","import ReactAntdFormSchema from '.';\nimport { ReactAntdFormSchemaProps } from '.';\n\nexport default ReactAntdFormSchema;\nexport type { ReactAntdFormSchemaProps };\n"]}
1
+ {"version":3,"sources":["/Users/feizheng/github/react-ant-form-schema/packages/lib/dist/main.cjs.js","../src/index.tsx","../src/utils.ts","../src/main.tsx"],"names":["deepMerge","target","source","result","__spreadValues","key","Array","isArray","CLASS_NAME","DEFAULT_META","vertical","labelWidth","horizontal","defaultProps","header","layout","ReactAntdFormSchema","React","forwardRef","props","ref","_a","className","meta","children","actionsClassName","rest","footerNode","_meta","_offset","isGroupsMode","groups","length","groupsMode","renderGroupsContent","__name","tabItems","map","group","index","groupMeta","String","label","title","NiceForm","Tabs","items","tabProps","div","fieldset","legend","Form","data-component","cx","Item","wrapperCol","offset","style","marginBottom","index_default","main_default"],"mappings":"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","file":"/Users/feizheng/github/react-ant-form-schema/packages/lib/dist/main.cjs.js","sourcesContent":[null,"import cx from 'classnames';\nimport React, { ReactNode } from 'react';\nimport { Form, FormInstance, FormProps, Tabs, TabsProps } from 'antd';\nimport NiceForm, { NiceFormMeta } from '@ebay/nice-form-react';\nimport { deepMerge } from './utils';\n\nexport type GroupsMode = 'fieldset' | 'tabs';\n\nexport type NiceFormGroup = {\n /**\n * The group title displayed in legend.\n */\n title: string;\n /**\n * The form meta for this group.\n */\n meta: NiceFormMeta;\n};\n\nconst CLASS_NAME = 'react-ant-form-schema';\nconst DEFAULT_META = {\n vertical: {\n labelWidth: 24,\n },\n // 这个是 nice-form-react 默认的 meta 数据，其它设置不生效\n // wrapperProps.labelCol.span 这个属性是 deprecated 的，请使用 labelWidth\n horizontal: {\n labelWidth: 4,\n },\n};\n\nexport type ReactAntdFormSchemaMeta = NiceFormMeta & {\n /**\n * Form groups for grouped mode.\n * When groups is provided, fields will be rendered in groups.\n */\n groups?: NiceFormGroup[];\n /**\n * Display mode for groups.\n * - 'fieldset': Render groups as fieldset/legend elements\n * - 'tabs': Render groups as tabs\n */\n groupsMode?: GroupsMode;\n /**\n * Props to pass to Tabs component when groupsMode is 'tabs'.\n */\n tabProps?: TabsProps;\n};\n\nexport type ReactAntdFormSchemaProps = {\n /**\n * The form schema meta data.\n */\n meta: ReactAntdFormSchemaMeta;\n /**\n * The header content.\n */\n header?: ReactNode;\n /**\n * The form actions className.\n */\n actionsClassName?: string;\n} & FormProps;\n\nconst defaultProps: Partial<ReactAntdFormSchemaProps> = {\n header: null,\n layout: 'horizontal',\n};\n\nconst ReactAntdFormSchema = React.forwardRef<FormInstance, ReactAntdFormSchemaProps>(\n (props, ref) => {\n const { className, meta, header, children, actionsClassName, layout, ...rest } = {\n ...defaultProps,\n ...props,\n };\n const footerNode = children as ReactNode;\n const _meta = deepMerge(DEFAULT_META[layout!], meta) as NiceFormMeta;\n const _offset = layout === 'horizontal' ? _meta?.labelWidth : 0;\n\n // Check if groups mode is enabled\n const isGroupsMode = meta.groups && meta.groups.length > 0;\n const groupsMode = meta.groupsMode || 'fieldset';\n\n const renderGroupsContent = () => {\n if (groupsMode === 'tabs') {\n const tabItems = meta.groups!.map((group, index) => {\n const groupMeta = deepMerge(DEFAULT_META[layout!], group.meta) as NiceFormMeta;\n return {\n key: String(index),\n label: group.title,\n children: <NiceForm meta={groupMeta} />,\n };\n });\n return (\n <Tabs\n items={tabItems}\n className=\"react-ant-form-schema-tabs\"\n {...meta.tabProps}\n />\n );\n } else {\n // fieldset mode (default)\n return (\n <div className=\"react-ant-form-schema-groups\">\n {meta.groups?.map((group, index) => {\n const groupMeta = deepMerge(DEFAULT_META[layout!], group.meta) as NiceFormMeta;\n return (\n <fieldset key={index} className=\"react-ant-form-schema-fieldset\">\n <legend className=\"react-ant-form-schema-legend\">{group.title}</legend>\n <NiceForm meta={groupMeta} />\n </fieldset>\n );\n })}\n </div>\n );\n }\n };\n\n return (\n <Form\n data-component={CLASS_NAME}\n className={cx(CLASS_NAME, className)}\n layout={layout}\n ref={ref}\n {...rest}>\n {header}\n {isGroupsMode ? renderGroupsContent() : <NiceForm meta={_meta} />}\n <Form.Item\n wrapperCol={{ offset: _offset }}\n className={actionsClassName}\n style={{ marginBottom: 0 }}>\n {footerNode}\n </Form.Item>\n </Form>\n );\n },\n);\n\nexport default ReactAntdFormSchema;\n","/**\n * @Author: aric 1290657123@qq.com\n * @Date: 2025-10-18 21:20:55\n * @LastEditors: aric 1290657123@qq.com\n * @LastEditTime: 2025-10-22 08:55:52\n */\n\ntype AnyObject = { [key: string]: any };\n\nexport function deepMerge(target: AnyObject, source: AnyObject) {\n const result = { ...target };\n for (const key in source) {\n if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {\n result[key] = deepMerge(result[key] || {}, source[key]);\n } else {\n result[key] = source[key];\n }\n }\n return result;\n}\n","import ReactAntdFormSchema from '.';\nimport { ReactAntdFormSchemaProps } from '.';\n\nexport default ReactAntdFormSchema;\nexport type { ReactAntdFormSchemaProps };\n"]}
package/dist/main.d.mts CHANGED
@@ -1,12 +1,40 @@
1
1
  import React, { ReactNode } from 'react';
2
- import { FormProps, FormInstance } from 'antd';
2
+ import { TabsProps, FormProps, FormInstance } from 'antd';
3
3
  import { NiceFormMeta } from '@ebay/nice-form-react';
4
4
 
5
+ type GroupsMode = 'fieldset' | 'tabs';
6
+ type NiceFormGroup = {
7
+ /**
8
+ * The group title displayed in legend.
9
+ */
10
+ title: string;
11
+ /**
12
+ * The form meta for this group.
13
+ */
14
+ meta: NiceFormMeta;
15
+ };
16
+ type ReactAntdFormSchemaMeta = NiceFormMeta & {
17
+ /**
18
+ * Form groups for grouped mode.
19
+ * When groups is provided, fields will be rendered in groups.
20
+ */
21
+ groups?: NiceFormGroup[];
22
+ /**
23
+ * Display mode for groups.
24
+ * - 'fieldset': Render groups as fieldset/legend elements
25
+ * - 'tabs': Render groups as tabs
26
+ */
27
+ groupsMode?: GroupsMode;
28
+ /**
29
+ * Props to pass to Tabs component when groupsMode is 'tabs'.
30
+ */
31
+ tabProps?: TabsProps;
32
+ };
5
33
  type ReactAntdFormSchemaProps = {
6
34
  /**
7
35
  * The form schema meta data.
8
36
  */
9
- meta: NiceFormMeta;
37
+ meta: ReactAntdFormSchemaMeta;
10
38
  /**
11
39
  * The header content.
12
40
  */
@@ -20,7 +48,7 @@ declare const ReactAntdFormSchema: React.ForwardRefExoticComponent<{
20
48
  /**
21
49
  * The form schema meta data.
22
50
  */
23
- meta: NiceFormMeta;
51
+ meta: ReactAntdFormSchemaMeta;
24
52
  /**
25
53
  * The header content.
26
54
  */
package/dist/main.d.ts CHANGED
@@ -1,12 +1,40 @@
1
1
  import React, { ReactNode } from 'react';
2
- import { FormProps, FormInstance } from 'antd';
2
+ import { TabsProps, FormProps, FormInstance } from 'antd';
3
3
  import { NiceFormMeta } from '@ebay/nice-form-react';
4
4
 
5
+ type GroupsMode = 'fieldset' | 'tabs';
6
+ type NiceFormGroup = {
7
+ /**
8
+ * The group title displayed in legend.
9
+ */
10
+ title: string;
11
+ /**
12
+ * The form meta for this group.
13
+ */
14
+ meta: NiceFormMeta;
15
+ };
16
+ type ReactAntdFormSchemaMeta = NiceFormMeta & {
17
+ /**
18
+ * Form groups for grouped mode.
19
+ * When groups is provided, fields will be rendered in groups.
20
+ */
21
+ groups?: NiceFormGroup[];
22
+ /**
23
+ * Display mode for groups.
24
+ * - 'fieldset': Render groups as fieldset/legend elements
25
+ * - 'tabs': Render groups as tabs
26
+ */
27
+ groupsMode?: GroupsMode;
28
+ /**
29
+ * Props to pass to Tabs component when groupsMode is 'tabs'.
30
+ */
31
+ tabProps?: TabsProps;
32
+ };
5
33
  type ReactAntdFormSchemaProps = {
6
34
  /**
7
35
  * The form schema meta data.
8
36
  */
9
- meta: NiceFormMeta;
37
+ meta: ReactAntdFormSchemaMeta;
10
38
  /**
11
39
  * The header content.
12
40
  */
@@ -20,7 +48,7 @@ declare const ReactAntdFormSchema: React.ForwardRefExoticComponent<{
20
48
  /**
21
49
  * The form schema meta data.
22
50
  */
23
- meta: NiceFormMeta;
51
+ meta: ReactAntdFormSchemaMeta;
24
52
  /**
25
53
  * The header content.
26
54
  */
package/dist/main.esm.js CHANGED
@@ -1,2 +1,2 @@
1
- var h=Object.defineProperty;var n=Object.getOwnPropertySymbols;var y=Object.prototype.hasOwnProperty,A=Object.prototype.propertyIsEnumerable;var d=(t,e,o)=>e in t?h(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,a=(t,e)=>{for(var o in e||(e={}))y.call(e,o)&&d(t,o,e[o]);if(n)for(var o of n(e))A.call(e,o)&&d(t,o,e[o]);return t};var N=(t,e)=>h(t,"name",{value:e,configurable:!0});var u=(t,e)=>{var o={};for(var r in t)y.call(t,r)&&e.indexOf(r)<0&&(o[r]=t[r]);if(t!=null&&n)for(var r of n(t))e.indexOf(r)<0&&A.call(t,r)&&(o[r]=t[r]);return o};import S from"classnames";import m from"react";import{Form as C}from"antd";import g from"@ebay/nice-form-react";function p(t,e){let o=a({},t);for(let r in e)e[r]&&typeof e[r]=="object"&&!Array.isArray(e[r])?o[r]=p(o[r]||{},e[r]):o[r]=e[r];return o}N(p,"deepMerge");var E="react-ant-form-schema",z={vertical:{wrapperProps:{labelCol:{span:24}}},horizontal:{wrapperProps:{labelCol:{span:8}}}},L={header:null,layout:"horizontal"},T=m.forwardRef((t,e)=>{var f,i;let c=a(a({},L),t),{className:o,meta:r,header:F,children:b,actionsClassName:x,layout:s}=c,M=u(c,["className","meta","header","children","actionsClassName","layout"]),P=b,l=p(z[s],r),R=s==="horizontal"?(i=(f=l==null?void 0:l.wrapperProps)==null?void 0:f.labelCol)==null?void 0:i.span:0;return m.createElement(C,a({"data-component":E,className:S(E,o),layout:s,ref:e},M),F,m.createElement(g,{meta:l}),m.createElement(C.Item,{wrapperCol:{offset:R},className:x,style:{marginBottom:0}},P))}),w=T;var J=w;export{J as default};
1
+ var b=Object.defineProperty;var f=Object.getOwnPropertySymbols;var y=Object.prototype.hasOwnProperty,M=Object.prototype.propertyIsEnumerable;var N=(a,t,r)=>t in a?b(a,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):a[t]=r,s=(a,t)=>{for(var r in t||(t={}))y.call(t,r)&&N(a,r,t[r]);if(f)for(var r of f(t))M.call(t,r)&&N(a,r,t[r]);return a};var p=(a,t)=>b(a,"name",{value:t,configurable:!0});var A=(a,t)=>{var r={};for(var e in a)y.call(a,e)&&t.indexOf(e)<0&&(r[e]=a[e]);if(a!=null&&f)for(var e of f(a))t.indexOf(e)<0&&M.call(a,e)&&(r[e]=a[e]);return r};import L from"classnames";import o from"react";import{Form as F,Tabs as P}from"antd";import u from"@ebay/nice-form-react";function n(a,t){let r=s({},a);for(let e in t)t[e]&&typeof t[e]=="object"&&!Array.isArray(t[e])?r[e]=n(r[e]||{},t[e]):r[e]=t[e];return r}p(n,"deepMerge");var S="react-ant-form-schema",h={vertical:{labelWidth:24},horizontal:{labelWidth:4}},_={header:null,layout:"horizontal"},j=o.forwardRef((a,t)=>{let g=s(s({},_),a),{className:r,meta:e,header:C,children:R,actionsClassName:k,layout:m}=g,z=A(g,["className","meta","header","children","actionsClassName","layout"]),T=R,l=n(h[m],e),W=m==="horizontal"?l==null?void 0:l.labelWidth:0,v=e.groups&&e.groups.length>0,w=e.groupsMode||"fieldset",G=p(()=>{var E;if(w==="tabs"){let c=e.groups.map((i,d)=>{let I=n(h[m],i.meta);return{key:String(d),label:i.title,children:o.createElement(u,{meta:I})}});return o.createElement(P,s({items:c,className:"react-ant-form-schema-tabs"},e.tabProps))}else return o.createElement("div",{className:"react-ant-form-schema-groups"},(E=e.groups)==null?void 0:E.map((c,i)=>{let d=n(h[m],c.meta);return o.createElement("fieldset",{key:i,className:"react-ant-form-schema-fieldset"},o.createElement("legend",{className:"react-ant-form-schema-legend"},c.title),o.createElement(u,{meta:d}))}))},"renderGroupsContent");return o.createElement(F,s({"data-component":S,className:L(S,r),layout:m,ref:t},z),C,v?G():o.createElement(u,{meta:l}),o.createElement(F.Item,{wrapperCol:{offset:W},className:k,style:{marginBottom:0}},T))}),x=j;var Y=x;export{Y as default};
2
2
  //# sourceMappingURL=main.esm.js.map
package/dist/main.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.tsx","../src/utils.ts","../src/main.tsx"],"sourcesContent":["import cx from 'classnames';\nimport React, { ReactNode } from 'react';\nimport { Form, FormInstance, FormProps } from 'antd';\nimport NiceForm, { NiceFormMeta } from '@ebay/nice-form-react';\nimport { deepMerge } from './utils';\n\nconst CLASS_NAME = 'react-ant-form-schema';\nconst DEFAULT_META = {\n vertical: {\n wrapperProps: {\n labelCol: { span: 24 },\n },\n },\n\n // 这个是 nice-form-react 默认的 meta 数据，其它设置不生效\n horizontal: {\n wrapperProps: {\n labelCol: { span: 8 },\n },\n },\n};\n\nexport type ReactAntdFormSchemaProps = {\n /**\n * The form schema meta data.\n */\n meta: NiceFormMeta;\n /**\n * The header content.\n */\n header?: ReactNode;\n /**\n * The form actions className.\n */\n actionsClassName?: string;\n} & FormProps;\n\nconst defaultProps: Partial<ReactAntdFormSchemaProps> = {\n header: null,\n layout: 'horizontal',\n};\n\nconst ReactAntdFormSchema = React.forwardRef<FormInstance, ReactAntdFormSchemaProps>(\n (props, ref) => {\n const { className, meta, header, children, actionsClassName, layout, ...rest } = {\n ...defaultProps,\n ...props,\n };\n const footerNode = children as ReactNode;\n const _meta = deepMerge(DEFAULT_META[layout!], meta) as NiceFormMeta;\n const _offset = layout === 'horizontal' ? _meta?.wrapperProps?.labelCol?.span : 0;\n\n return (\n <Form\n data-component={CLASS_NAME}\n className={cx(CLASS_NAME, className)}\n layout={layout}\n ref={ref}\n {...rest}>\n {header}\n <NiceForm meta={_meta} />\n <Form.Item\n wrapperCol={{ offset: _offset }}\n className={actionsClassName}\n style={{ marginBottom: 0 }}>\n {footerNode}\n </Form.Item>\n </Form>\n );\n }\n);\n\nexport default ReactAntdFormSchema;\n","/**\n * @Author: aric 1290657123@qq.com\n * @Date: 2025-10-18 21:20:55\n * @LastEditors: aric 1290657123@qq.com\n * @LastEditTime: 2025-10-22 08:55:52\n */\n\ntype AnyObject = { [key: string]: any };\n\nexport function deepMerge(target: AnyObject, source: AnyObject) {\n const result = { ...target };\n for (const key in source) {\n if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {\n result[key] = deepMerge(result[key] || {}, source[key]);\n } else {\n result[key] = source[key];\n }\n }\n return result;\n}\n","import ReactAntdFormSchema from '.';\nimport { ReactAntdFormSchemaProps } from '.';\n\nexport default ReactAntdFormSchema;\nexport type { ReactAntdFormSchemaProps };\n"],"mappings":"8iBAAA,OAAOA,MAAQ,aACf,OAAOC,MAA0B,QACjC,OAASC,QAAAA,MAAqC,OAC9C,OAAOC,MAAgC,wBCMhC,SAASC,EAAUC,EAAmBC,EAAiB,CAC5D,IAAMC,EAASC,EAAA,GAAKH,GACpB,QAAWI,KAAOH,EACZA,EAAOG,CAAAA,GAAQ,OAAOH,EAAOG,CAAAA,GAAS,UAAY,CAACC,MAAMC,QAAQL,EAAOG,CAAAA,CAAI,EAC9EF,EAAOE,CAAAA,EAAOL,EAAUG,EAAOE,CAAAA,GAAQ,CAAC,EAAGH,EAAOG,CAAAA,CAAI,EAEtDF,EAAOE,CAAAA,EAAOH,EAAOG,CAAAA,EAGzB,OAAOF,CACT,CAVgBH,EAAAA,EAAAA,aDHhB,IAAMQ,EAAa,wBACbC,EAAe,CACnBC,SAAU,CACRC,aAAc,CACZC,SAAU,CAAEC,KAAM,EAAG,CACvB,CACF,EAGAC,WAAY,CACVH,aAAc,CACZC,SAAU,CAAEC,KAAM,CAAE,CACtB,CACF,CACF,EAiBME,EAAkD,CACtDC,OAAQ,KACRC,OAAQ,YACV,EAEMC,EAAsBC,EAAMC,WAChC,CAACC,EAAOC,IAAAA,CA3CV,IAAAC,EAAAC,EA4CI,IAAiFC,EAAAC,IAAA,GAC5EX,GACAM,GAFGM,WAAAA,EAAWC,KAAAA,EAAMZ,OAAAA,EAAQa,SAAAA,EAAUC,iBAAAA,EAAkBb,OAAAA,CA5CjE,EA4CqFQ,EAATM,EAAAA,EAASN,EAATM,CAAhEJ,YAAWC,OAAMZ,SAAQa,WAAUC,mBAAkBb,WAIvDe,EAAaH,EACbI,EAAQC,EAAUzB,EAAaQ,CAAAA,EAAUW,CAAAA,EACzCO,EAAUlB,IAAW,cAAegB,GAAAA,EAAAA,GAAAA,YAAAA,EAAOtB,eAAPsB,YAAAA,EAAqBrB,WAArBqB,YAAAA,EAA+BpB,KAAO,EAEhF,OACEM,EAAA,cAACiB,EAAAA,EAAAA,CACCC,iBAAgB7B,EAChBmB,UAAWW,EAAG9B,EAAYmB,CAAAA,EAC1BV,OAAQA,EACRK,IAAKA,GACDS,GACHf,EACDG,EAAA,cAACoB,EAAAA,CAASX,KAAMK,IAChBd,EAAA,cAACiB,EAAKI,KAAI,CACRC,WAAY,CAAEC,OAAQP,CAAQ,EAC9BR,UAAWG,EACXa,MAAO,CAAEC,aAAc,CAAE,GACxBZ,CAAAA,CAAAA,CAIT,CAAA,EAGFa,EAAe3B,EErEf,IAAA4B,EAAeC","names":["cx","React","Form","NiceForm","deepMerge","target","source","result","__spreadValues","key","Array","isArray","CLASS_NAME","DEFAULT_META","vertical","wrapperProps","labelCol","span","horizontal","defaultProps","header","layout","ReactAntdFormSchema","React","forwardRef","props","ref","_b","_c","_a","__spreadValues","className","meta","children","actionsClassName","rest","footerNode","_meta","deepMerge","_offset","Form","data-component","cx","NiceForm","Item","wrapperCol","offset","style","marginBottom","index_default","main_default","ReactAntdFormSchema"]}
1
+ {"version":3,"sources":["../src/index.tsx","../src/utils.ts","../src/main.tsx"],"sourcesContent":["import cx from 'classnames';\nimport React, { ReactNode } from 'react';\nimport { Form, FormInstance, FormProps, Tabs, TabsProps } from 'antd';\nimport NiceForm, { NiceFormMeta } from '@ebay/nice-form-react';\nimport { deepMerge } from './utils';\n\nexport type GroupsMode = 'fieldset' | 'tabs';\n\nexport type NiceFormGroup = {\n /**\n * The group title displayed in legend.\n */\n title: string;\n /**\n * The form meta for this group.\n */\n meta: NiceFormMeta;\n};\n\nconst CLASS_NAME = 'react-ant-form-schema';\nconst DEFAULT_META = {\n vertical: {\n labelWidth: 24,\n },\n // 这个是 nice-form-react 默认的 meta 数据，其它设置不生效\n // wrapperProps.labelCol.span 这个属性是 deprecated 的，请使用 labelWidth\n horizontal: {\n labelWidth: 4,\n },\n};\n\nexport type ReactAntdFormSchemaMeta = NiceFormMeta & {\n /**\n * Form groups for grouped mode.\n * When groups is provided, fields will be rendered in groups.\n */\n groups?: NiceFormGroup[];\n /**\n * Display mode for groups.\n * - 'fieldset': Render groups as fieldset/legend elements\n * - 'tabs': Render groups as tabs\n */\n groupsMode?: GroupsMode;\n /**\n * Props to pass to Tabs component when groupsMode is 'tabs'.\n */\n tabProps?: TabsProps;\n};\n\nexport type ReactAntdFormSchemaProps = {\n /**\n * The form schema meta data.\n */\n meta: ReactAntdFormSchemaMeta;\n /**\n * The header content.\n */\n header?: ReactNode;\n /**\n * The form actions className.\n */\n actionsClassName?: string;\n} & FormProps;\n\nconst defaultProps: Partial<ReactAntdFormSchemaProps> = {\n header: null,\n layout: 'horizontal',\n};\n\nconst ReactAntdFormSchema = React.forwardRef<FormInstance, ReactAntdFormSchemaProps>(\n (props, ref) => {\n const { className, meta, header, children, actionsClassName, layout, ...rest } = {\n ...defaultProps,\n ...props,\n };\n const footerNode = children as ReactNode;\n const _meta = deepMerge(DEFAULT_META[layout!], meta) as NiceFormMeta;\n const _offset = layout === 'horizontal' ? _meta?.labelWidth : 0;\n\n // Check if groups mode is enabled\n const isGroupsMode = meta.groups && meta.groups.length > 0;\n const groupsMode = meta.groupsMode || 'fieldset';\n\n const renderGroupsContent = () => {\n if (groupsMode === 'tabs') {\n const tabItems = meta.groups!.map((group, index) => {\n const groupMeta = deepMerge(DEFAULT_META[layout!], group.meta) as NiceFormMeta;\n return {\n key: String(index),\n label: group.title,\n children: <NiceForm meta={groupMeta} />,\n };\n });\n return (\n <Tabs\n items={tabItems}\n className=\"react-ant-form-schema-tabs\"\n {...meta.tabProps}\n />\n );\n } else {\n // fieldset mode (default)\n return (\n <div className=\"react-ant-form-schema-groups\">\n {meta.groups?.map((group, index) => {\n const groupMeta = deepMerge(DEFAULT_META[layout!], group.meta) as NiceFormMeta;\n return (\n <fieldset key={index} className=\"react-ant-form-schema-fieldset\">\n <legend className=\"react-ant-form-schema-legend\">{group.title}</legend>\n <NiceForm meta={groupMeta} />\n </fieldset>\n );\n })}\n </div>\n );\n }\n };\n\n return (\n <Form\n data-component={CLASS_NAME}\n className={cx(CLASS_NAME, className)}\n layout={layout}\n ref={ref}\n {...rest}>\n {header}\n {isGroupsMode ? renderGroupsContent() : <NiceForm meta={_meta} />}\n <Form.Item\n wrapperCol={{ offset: _offset }}\n className={actionsClassName}\n style={{ marginBottom: 0 }}>\n {footerNode}\n </Form.Item>\n </Form>\n );\n },\n);\n\nexport default ReactAntdFormSchema;\n","/**\n * @Author: aric 1290657123@qq.com\n * @Date: 2025-10-18 21:20:55\n * @LastEditors: aric 1290657123@qq.com\n * @LastEditTime: 2025-10-22 08:55:52\n */\n\ntype AnyObject = { [key: string]: any };\n\nexport function deepMerge(target: AnyObject, source: AnyObject) {\n const result = { ...target };\n for (const key in source) {\n if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {\n result[key] = deepMerge(result[key] || {}, source[key]);\n } else {\n result[key] = source[key];\n }\n }\n return result;\n}\n","import ReactAntdFormSchema from '.';\nimport { ReactAntdFormSchemaProps } from '.';\n\nexport default ReactAntdFormSchema;\nexport type { ReactAntdFormSchemaProps };\n"],"mappings":"8iBAAA,OAAOA,MAAQ,aACf,OAAOC,MAA0B,QACjC,OAASC,QAAAA,EAA+BC,QAAAA,MAAuB,OAC/D,OAAOC,MAAgC,wBCMhC,SAASC,EAAUC,EAAmBC,EAAiB,CAC5D,IAAMC,EAASC,EAAA,GAAKH,GACpB,QAAWI,KAAOH,EACZA,EAAOG,CAAAA,GAAQ,OAAOH,EAAOG,CAAAA,GAAS,UAAY,CAACC,MAAMC,QAAQL,EAAOG,CAAAA,CAAI,EAC9EF,EAAOE,CAAAA,EAAOL,EAAUG,EAAOE,CAAAA,GAAQ,CAAC,EAAGH,EAAOG,CAAAA,CAAI,EAEtDF,EAAOE,CAAAA,EAAOH,EAAOG,CAAAA,EAGzB,OAAOF,CACT,CAVgBH,EAAAA,EAAAA,aDUhB,IAAMQ,EAAa,wBACbC,EAAe,CACnBC,SAAU,CACRC,WAAY,EACd,EAGAC,WAAY,CACVD,WAAY,CACd,CACF,EAmCME,EAAkD,CACtDC,OAAQ,KACRC,OAAQ,YACV,EAEMC,EAAsBC,EAAMC,WAChC,CAACC,EAAOC,IAAAA,CACN,IAAiFC,EAAAC,IAAA,GAC5ET,GACAM,GAFGI,WAAAA,EAAWC,KAAAA,EAAMV,OAAAA,EAAQW,SAAAA,EAAUC,iBAAAA,EAAkBX,OAAAA,CAvEjE,EAuEqFM,EAATM,EAAAA,EAASN,EAATM,CAAhEJ,YAAWC,OAAMV,SAAQW,WAAUC,mBAAkBX,WAIvDa,EAAaH,EACbI,EAAQC,EAAUrB,EAAaM,CAAAA,EAAUS,CAAAA,EACzCO,EAAUhB,IAAW,aAAec,GAAAA,YAAAA,EAAOlB,WAAa,EAGxDqB,EAAeR,EAAKS,QAAUT,EAAKS,OAAOC,OAAS,EACnDC,EAAaX,EAAKW,YAAc,WAEhCC,EAAsBC,EAAA,IAAA,CAnFhC,IAAAhB,EAoFM,GAAIc,IAAe,OAAQ,CACzB,IAAMG,EAAWd,EAAKS,OAAQM,IAAI,CAACC,EAAOC,IAAAA,CACxC,IAAMC,EAAYZ,EAAUrB,EAAaM,CAAAA,EAAUyB,EAAMhB,IAAI,EAC7D,MAAO,CACLmB,IAAKC,OAAOH,CAAAA,EACZI,MAAOL,EAAMM,MACbrB,SAAUR,EAAA,cAAC8B,EAAAA,CAASvB,KAAMkB,GAC5B,CACF,CAAA,EACA,OACEzB,EAAA,cAAC+B,EAAAA,EAAAA,CACCC,MAAOX,EACPf,UAAU,8BACNC,EAAK0B,UAGf,KAEE,QACEjC,EAAA,cAACkC,MAAAA,CAAI5B,UAAU,iCACZC,EAAAA,EAAKS,SAALT,YAAAA,EAAae,IAAI,CAACC,EAAOC,IAAAA,CACxB,IAAMC,EAAYZ,EAAUrB,EAAaM,CAAAA,EAAUyB,EAAMhB,IAAI,EAC7D,OACEP,EAAA,cAACmC,WAAAA,CAAST,IAAKF,EAAOlB,UAAU,kCAC9BN,EAAA,cAACoC,SAAAA,CAAO9B,UAAU,gCAAgCiB,EAAMM,KAAK,EAC7D7B,EAAA,cAAC8B,EAAAA,CAASvB,KAAMkB,IAGtB,EAAA,CAIR,EAjC4B,uBAmC5B,OACEzB,EAAA,cAACqC,EAAAA,EAAAA,CACCC,iBAAgB/C,EAChBe,UAAWiC,EAAGhD,EAAYe,CAAAA,EAC1BR,OAAQA,EACRK,IAAKA,GACDO,GACHb,EACAkB,EAAeI,EAAAA,EAAwBnB,EAAA,cAAC8B,EAAAA,CAASvB,KAAMK,IACxDZ,EAAA,cAACqC,EAAKG,KAAI,CACRC,WAAY,CAAEC,OAAQ5B,CAAQ,EAC9BR,UAAWG,EACXkC,MAAO,CAAEC,aAAc,CAAE,GACxBjC,CAAAA,CAAAA,CAIT,CAAA,EAGFkC,EAAe9C,EEvIf,IAAA+C,EAAeC","names":["cx","React","Form","Tabs","NiceForm","deepMerge","target","source","result","__spreadValues","key","Array","isArray","CLASS_NAME","DEFAULT_META","vertical","labelWidth","horizontal","defaultProps","header","layout","ReactAntdFormSchema","React","forwardRef","props","ref","_a","__spreadValues","className","meta","children","actionsClassName","rest","footerNode","_meta","deepMerge","_offset","isGroupsMode","groups","length","groupsMode","renderGroupsContent","__name","tabItems","map","group","index","groupMeta","key","String","label","title","NiceForm","Tabs","items","tabProps","div","fieldset","legend","Form","data-component","cx","Item","wrapperCol","offset","style","marginBottom","index_default","main_default","ReactAntdFormSchema"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jswork/react-ant-form-schema",
3
- "version": "1.0.20",
3
+ "version": "1.0.22",
4
4
  "main": "dist/main.cjs.js",
5
5
  "module": "dist/main.esm.js",
6
6
  "types": "dist/main.d.ts",
@@ -26,11 +26,13 @@
26
26
  "react": "^18.2.0",
27
27
  "react-dom": "^18.2.0",
28
28
  "tsup": "^8.2.4",
29
- "typescript": "^5.2.2"
29
+ "typescript": "^5.2.2",
30
+ "@ebay/nice-form-react": "^2.0.3"
30
31
  },
31
32
  "peerDependencies": {
32
33
  "classnames": "*",
33
34
  "react": "*",
35
+ "@ebay/nice-form-react": "*",
34
36
  "react-dom": "*",
35
37
  "antd": "^5.27.5"
36
38
  },
@@ -38,9 +40,6 @@
38
40
  "access": "public",
39
41
  "registry": "https://registry.npmjs.org"
40
42
  },
41
- "dependencies": {
42
- "@ebay/nice-form-react": "^2.0.3"
43
- },
44
43
  "keywords": [
45
44
  "form",
46
45
  "schema",
package/src/index.tsx CHANGED
@@ -1,30 +1,57 @@
1
1
  import cx from 'classnames';
2
2
  import React, { ReactNode } from 'react';
3
- import { Form, FormInstance, FormProps } from 'antd';
3
+ import { Form, FormInstance, FormProps, Tabs, TabsProps } from 'antd';
4
4
  import NiceForm, { NiceFormMeta } from '@ebay/nice-form-react';
5
5
  import { deepMerge } from './utils';
6
6
 
7
+ export type GroupsMode = 'fieldset' | 'tabs';
8
+
9
+ export type NiceFormGroup = {
10
+ /**
11
+ * The group title displayed in legend.
12
+ */
13
+ title: string;
14
+ /**
15
+ * The form meta for this group.
16
+ */
17
+ meta: NiceFormMeta;
18
+ };
19
+
7
20
  const CLASS_NAME = 'react-ant-form-schema';
8
21
  const DEFAULT_META = {
9
22
  vertical: {
10
- wrapperProps: {
11
- labelCol: { span: 24 },
12
- },
23
+ labelWidth: 24,
13
24
  },
14
-
15
25
  // 这个是 nice-form-react 默认的 meta 数据，其它设置不生效
26
+ // wrapperProps.labelCol.span 这个属性是 deprecated 的，请使用 labelWidth
16
27
  horizontal: {
17
- wrapperProps: {
18
- labelCol: { span: 8 },
19
- },
28
+ labelWidth: 4,
20
29
  },
21
30
  };
22
31
 
32
+ export type ReactAntdFormSchemaMeta = NiceFormMeta & {
33
+ /**
34
+ * Form groups for grouped mode.
35
+ * When groups is provided, fields will be rendered in groups.
36
+ */
37
+ groups?: NiceFormGroup[];
38
+ /**
39
+ * Display mode for groups.
40
+ * - 'fieldset': Render groups as fieldset/legend elements
41
+ * - 'tabs': Render groups as tabs
42
+ */
43
+ groupsMode?: GroupsMode;
44
+ /**
45
+ * Props to pass to Tabs component when groupsMode is 'tabs'.
46
+ */
47
+ tabProps?: TabsProps;
48
+ };
49
+
23
50
  export type ReactAntdFormSchemaProps = {
24
51
  /**
25
52
  * The form schema meta data.
26
53
  */
27
- meta: NiceFormMeta;
54
+ meta: ReactAntdFormSchemaMeta;
28
55
  /**
29
56
  * The header content.
30
57
  */
@@ -48,7 +75,46 @@ const ReactAntdFormSchema = React.forwardRef<FormInstance, ReactAntdFormSchemaPr
48
75
  };
49
76
  const footerNode = children as ReactNode;
50
77
  const _meta = deepMerge(DEFAULT_META[layout!], meta) as NiceFormMeta;
51
- const _offset = layout === 'horizontal' ? _meta?.wrapperProps?.labelCol?.span : 0;
78
+ const _offset = layout === 'horizontal' ? _meta?.labelWidth : 0;
79
+
80
+ // Check if groups mode is enabled
81
+ const isGroupsMode = meta.groups && meta.groups.length > 0;
82
+ const groupsMode = meta.groupsMode || 'fieldset';
83
+
84
+ const renderGroupsContent = () => {
85
+ if (groupsMode === 'tabs') {
86
+ const tabItems = meta.groups!.map((group, index) => {
87
+ const groupMeta = deepMerge(DEFAULT_META[layout!], group.meta) as NiceFormMeta;
88
+ return {
89
+ key: String(index),
90
+ label: group.title,
91
+ children: <NiceForm meta={groupMeta} />,
92
+ };
93
+ });
94
+ return (
95
+ <Tabs
96
+ items={tabItems}
97
+ className="react-ant-form-schema-tabs"
98
+ {...meta.tabProps}
99
+ />
100
+ );
101
+ } else {
102
+ // fieldset mode (default)
103
+ return (
104
+ <div className="react-ant-form-schema-groups">
105
+ {meta.groups?.map((group, index) => {
106
+ const groupMeta = deepMerge(DEFAULT_META[layout!], group.meta) as NiceFormMeta;
107
+ return (
108
+ <fieldset key={index} className="react-ant-form-schema-fieldset">
109
+ <legend className="react-ant-form-schema-legend">{group.title}</legend>
110
+ <NiceForm meta={groupMeta} />
111
+ </fieldset>
112
+ );
113
+ })}
114
+ </div>
115
+ );
116
+ }
117
+ };
52
118
 
53
119
  return (
54
120
  <Form
@@ -58,7 +124,7 @@ const ReactAntdFormSchema = React.forwardRef<FormInstance, ReactAntdFormSchemaPr
58
124
  ref={ref}
59
125
  {...rest}>
60
126
  {header}
61
- <NiceForm meta={_meta} />
127
+ {isGroupsMode ? renderGroupsContent() : <NiceForm meta={_meta} />}
62
128
  <Form.Item
63
129
  wrapperCol={{ offset: _offset }}
64
130
  className={actionsClassName}
@@ -67,7 +133,7 @@ const ReactAntdFormSchema = React.forwardRef<FormInstance, ReactAntdFormSchemaPr
67
133
  </Form.Item>
68
134
  </Form>
69
135
  );
70
- }
136
+ },
71
137
  );
72
138
 
73
139
  export default ReactAntdFormSchema;