@jswork/react-ant-resource-form 1.0.1

package/README.md

@@ -0,0 +1,7 @@
+# react-ant-resource-form
+> Antd form builder for resource form.
+
+## installation
+```shell
+yarn add @jswork/react-ant-resource-form
+```

package/dist/main.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }var w=Object.defineProperty;var _=Object.getOwnPropertySymbols;var B=Object.prototype.hasOwnProperty,L=Object.prototype.propertyIsEnumerable;var $=(t,a,e)=>a in t?w(t,a,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[a]=e,o=(t,a)=>{for(var e in a||(a={}))B.call(a,e)&&$(t,e,a[e]);if(_)for(var e of _(a))L.call(a,e)&&$(t,e,a[e]);return t};var n=(t,a)=>w(t,"name",{value:a,configurable:!0});var E=(t,a)=>{var e={};for(var s in t)B.call(t,s)&&a.indexOf(s)<0&&(e[s]=t[s]);if(t!=null&&_)for(var s of _(t))a.indexOf(s)<0&&L.call(t,s)&&(e[s]=t[s]);return e};var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames);var _react = require('react'); var _react2 = _interopRequireDefault(_react);var _antd = require('antd');var _reactantformschema = require('@jswork/react-ant-form-schema'); var _reactantformschema2 = _interopRequireDefault(_reactantformschema);var _icons = require('@ant-design/icons');var O="react-ant-resource-form",D={"zh-CN":{submit:"\u63D0\u4EA4",back:"\u8FD4\u56DE"},"en-US":{submit:"Submit",back:"Back"}},G={lang:"zh-CN"},H=n(t=>{let l=o(o({},G),t),{className:a,meta:e,children:s,lang:d,title:p,loading:R,extra:y,size:S}=l,A=E(l,["className","meta","children","lang","title","loading","extra","size"]),i=n(f=>D[d][f],"t"),m=n(()=>history.back(),"handleBack"),g=y||_react2.default.createElement(_antd.Button,{size:"small",icon:_react2.default.createElement(_icons.ArrowLeftOutlined,null),onClick:m},i("back")),F=s||_react2.default.createElement(_antd.Space,null,_react2.default.createElement(_antd.Button,{htmlType:"submit",type:"primary",icon:_react2.default.createElement(_icons.SaveOutlined,null)},i("submit")),_react2.default.createElement(_antd.Button,{icon:_react2.default.createElement(_icons.ArrowLeftOutlined,null),onClick:m},i("back")));return _react2.default.createElement(_antd.Card,{title:p,size:S,loading:R,"data-component":O,className:_classnames2.default.call(void 0, O,a),extra:g},_react2.default.createElement(_reactantformschema2.default,o({meta:e},A),F))},"ReactAntResourceForm"),x= exports.ReactAntResourceForm =H;var _next = require('@jswork/next'); var _next2 = _interopRequireDefault(_next);var W={"zh-CN":{create_success:"\u521B\u5EFA\u6210\u529F",update_success:"\u66F4\u65B0\u6210\u529F"},"en-US":{create_success:"Create success",update_success:"Update success"}},X={lang:"zh-CN"},Y=n(t=>{let N=o(o({},X),t),{name:a,params:e,lang:s,onRequest:d,onResponse:p}=N,R=E(N,["name","params","lang","onRequest","onResponse"]),y=`${a}_update`,S=`${a}_create`,A=`${a}_show`,[i]=_antd.Form.useForm(),m=!!(e!=null&&e.id),g=n(c=>W[s][c],"t"),[F,l]=_react.useState.call(void 0, !1),f=n(c=>(l(!0),(d==null?void 0:d(c))||c),"handleStateRequest"),b=n(c=>{p==null||p(c),l(!1)},"handleStateResponse"),M=n(c=>{if(m){let h=o({id:e.id},c),u=f({stage:"update",payload:h});_next2.default.$api[y](u).then(C=>{_antd.message.success(g("update_success")),b({stage:"update",data:C})}).finally(()=>l(!1))}else{let h=o({},c),u=f({stage:"create",payload:h});_next2.default.$api[S](u).then(C=>{_antd.message.success(g("create_success")),b({stage:"create",data:C})}).finally(()=>l(!1))}},"handleFinish");return _react.useEffect.call(void 0, ()=>{if(m){let c={id:e.id},h=f({stage:"update",payload:c});_next2.default.$api[A](h).then(u=>{i.setFieldsValue(u),b({stage:"show",data:u})}).finally(()=>l(!1))}},[m]),_react2.default.createElement(x,o({loading:F,form:i,onFinish:M},R))},"ReactAntResourceFormApi"),Z= exports.ReactAntResourceFormApi =Y;exports.ReactAntResourceForm = x; exports.ReactAntResourceFormApi = Z;
+//# sourceMappingURL=main.cjs.js.map

package/dist/main.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/ap7/github/react-ant-resource-form/packages/lib/dist/main.cjs.js","../src/index.tsx","../src/api.tsx"],"names":["CLASS_NAME","locales","submit","back","defaultProps","lang","ReactAntResourceForm","__name","props","_a","__spreadValues","className","meta","children","title","loading","extra","size","rest","t","key","handleBack","history","_extra","React","Button","icon","ArrowLeftOutlined","onClick","_children","Space","htmlType","type","SaveOutlined","Card","data-component","cx","ReactAntdFormSchema","index_default","create_success","update_success","ReactAntResourceFormApi","name","params","onRequest","onResponse","resourceEdit"],"mappings":"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","file":"/Users/ap7/github/react-ant-resource-form/packages/lib/dist/main.cjs.js","sourcesContent":[null,"// import noop from '@jswork/noop';\nimport cx from 'classnames';\nimport React, { FC } from 'react';\nimport { Button, Card, CardProps, Space } from 'antd';\nimport ReactAntdFormSchema, { ReactAntdFormSchemaProps } from '@jswork/react-ant-form-schema';\nimport { ArrowLeftOutlined, SaveOutlined } from '@ant-design/icons';\n\nexport type ReactAntResourceFormProps = {\n  lang?: string;\n  loading?: boolean;\n  size?: CardProps['size'];\n  extra?: CardProps['extra'];\n  title?: CardProps['title'];\n} & ReactAntdFormSchemaProps;\n\nconst CLASS_NAME = 'react-ant-resource-form';\nconst locales = {\n  'zh-CN': {\n    submit: '提交',\n    back: '返回',\n  },\n  'en-US': {\n    submit: 'Submit',\n    back: 'Back',\n  },\n};\n\nconst defaultProps = {\n  lang: 'zh-CN',\n};\n\nconst ReactAntResourceForm: FC<ReactAntResourceFormProps> = (props) => {\n  const { className, meta, children, lang, title, loading, extra, size, ...rest } = {\n    ...defaultProps,\n    ...props,\n  };\n  const t = (key: string) => locales[lang][key];\n  const handleBack = () => history.back();\n  const _extra = extra || (\n    <Button size=\"small\" icon={<ArrowLeftOutlined />} onClick={handleBack}>\n      {t('back')}\n    </Button>\n  );\n  const _children = children || (\n    <Space>\n      <Button htmlType=\"submit\" type=\"primary\" icon={<SaveOutlined />}>\n        {t('submit')}\n      </Button>\n      <Button icon={<ArrowLeftOutlined />} onClick={handleBack}>\n        {t('back')}\n      </Button>\n    </Space>\n  );\n\n  return (\n    <Card\n      title={title}\n      size={size}\n      loading={loading}\n      data-component={CLASS_NAME}\n      className={cx(CLASS_NAME, className)}\n      extra={_extra}>\n      <ReactAntdFormSchema meta={meta} {...rest}>\n        {_children}\n      </ReactAntdFormSchema>\n    </Card>\n  );\n};\n\nexport default ReactAntResourceForm;\n","import React, { FC, useEffect, useState } from 'react';\nimport ReactAntResourceForm, { ReactAntResourceFormProps } from '.';\nimport { Form, message } from 'antd';\nimport nx from '@jswork/next';\n\ndeclare global {\n  interface NxStatic {\n    $api: Record<string, any>;\n  }\n}\n\ntype StagePayload = {\n  stage: 'show' | 'create' | 'update';\n  payload: any;\n};\n\ntype StageData = {\n  stage: 'show' | 'create' | 'update';\n  data: any;\n};\n\nexport type ReactAntResourceFormApiProps = ReactAntResourceFormProps & {\n  lang?: string;\n  params?: Record<string, any>;\n  onRequest?: (payload: StagePayload) => any;\n  onResponse?: (res: StageData) => void;\n};\n\nconst locales = {\n  'zh-CN': {\n    create_success: '创建成功',\n    update_success: '更新成功',\n  },\n  'en-US': {\n    create_success: 'Create success',\n    update_success: 'Update success',\n  },\n};\n\nconst defaultProps = {\n  lang: 'zh-CN',\n};\n\nconst ReactAntResourceFormApi: FC<ReactAntResourceFormApiProps> = (props) => {\n  const { name, params, lang, onRequest, onResponse, ...rest } = {\n    ...defaultProps,\n    ...props,\n  };\n\n  const resourceEdit = `${name}_update`;\n  const resourceCreate = `${name}_create`;\n  const resourceShow = `${name}_show`;\n  const [form] = Form.useForm();\n  const isEdit = Boolean(params?.id);\n  const t = (key: string) => locales[lang!][key];\n  const [loading, setLoading] = useState(false);\n  const handleStateRequest = (payload: StagePayload) => {\n    setLoading(true);\n    return onRequest?.(payload) || payload;\n  };\n  const handleStateResponse = (res: StageData) => {\n    onResponse?.(res);\n    setLoading(false);\n  };\n\n  const handleFinish = (values) => {\n    if (isEdit) {\n      const payload = { id: params!.id, ...values };\n      const _payload = handleStateRequest({ stage: 'update', payload });\n\n      nx.$api[resourceEdit](_payload)\n        .then((res) => {\n          message.success(t('update_success'));\n          handleStateResponse({ stage: 'update', data: res });\n        })\n        .finally(() => setLoading(false));\n    } else {\n      const payload = { ...values };\n      const _payload = handleStateRequest({ stage: 'create', payload });\n\n      nx.$api[resourceCreate](_payload)\n        .then((res) => {\n          message.success(t('create_success'));\n          handleStateResponse({ stage: 'create', data: res });\n        })\n        .finally(() => setLoading(false));\n    }\n  };\n\n  // init detail\n  useEffect(() => {\n    if (isEdit) {\n      const payload = { id: params!.id };\n      const _payload = handleStateRequest({ stage: 'update', payload });\n      nx.$api[resourceShow](_payload)\n        .then((res) => {\n          form.setFieldsValue(res);\n          handleStateResponse({ stage: 'show', data: res });\n        })\n        .finally(() => setLoading(false));\n    }\n  }, [isEdit]);\n\n  return <ReactAntResourceForm loading={loading} form={form} onFinish={handleFinish} {...rest} />;\n};\n\nexport default ReactAntResourceFormApi;\n"]}

package/dist/main.d.mts

@@ -0,0 +1,35 @@
+import { FC } from 'react';
+import { CardProps } from 'antd';
+import { ReactAntdFormSchemaProps } from '@jswork/react-ant-form-schema';
+
+type ReactAntResourceFormProps = {
+    lang?: string;
+    loading?: boolean;
+    size?: CardProps['size'];
+    extra?: CardProps['extra'];
+    title?: CardProps['title'];
+} & ReactAntdFormSchemaProps;
+declare const ReactAntResourceForm: FC<ReactAntResourceFormProps>;
+
+declare global {
+    interface NxStatic {
+        $api: Record<string, any>;
+    }
+}
+type StagePayload = {
+    stage: 'show' | 'create' | 'update';
+    payload: any;
+};
+type StageData = {
+    stage: 'show' | 'create' | 'update';
+    data: any;
+};
+type ReactAntResourceFormApiProps = ReactAntResourceFormProps & {
+    lang?: string;
+    params?: Record<string, any>;
+    onRequest?: (payload: StagePayload) => any;
+    onResponse?: (res: StageData) => void;
+};
+declare const ReactAntResourceFormApi: FC<ReactAntResourceFormApiProps>;
+
+export { ReactAntResourceForm, ReactAntResourceFormApi, type ReactAntResourceFormApiProps, type ReactAntResourceFormProps };

package/dist/main.d.ts

@@ -0,0 +1,35 @@
+import { FC } from 'react';
+import { CardProps } from 'antd';
+import { ReactAntdFormSchemaProps } from '@jswork/react-ant-form-schema';
+
+type ReactAntResourceFormProps = {
+    lang?: string;
+    loading?: boolean;
+    size?: CardProps['size'];
+    extra?: CardProps['extra'];
+    title?: CardProps['title'];
+} & ReactAntdFormSchemaProps;
+declare const ReactAntResourceForm: FC<ReactAntResourceFormProps>;
+
+declare global {
+    interface NxStatic {
+        $api: Record<string, any>;
+    }
+}
+type StagePayload = {
+    stage: 'show' | 'create' | 'update';
+    payload: any;
+};
+type StageData = {
+    stage: 'show' | 'create' | 'update';
+    data: any;
+};
+type ReactAntResourceFormApiProps = ReactAntResourceFormProps & {
+    lang?: string;
+    params?: Record<string, any>;
+    onRequest?: (payload: StagePayload) => any;
+    onResponse?: (res: StageData) => void;
+};
+declare const ReactAntResourceFormApi: FC<ReactAntResourceFormApiProps>;
+
+export { ReactAntResourceForm, ReactAntResourceFormApi, type ReactAntResourceFormApiProps, type ReactAntResourceFormProps };

package/dist/main.esm.js

@@ -0,0 +1,2 @@
+var w=Object.defineProperty;var _=Object.getOwnPropertySymbols;var B=Object.prototype.hasOwnProperty,L=Object.prototype.propertyIsEnumerable;var $=(t,a,e)=>a in t?w(t,a,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[a]=e,o=(t,a)=>{for(var e in a||(a={}))B.call(a,e)&&$(t,e,a[e]);if(_)for(var e of _(a))L.call(a,e)&&$(t,e,a[e]);return t};var n=(t,a)=>w(t,"name",{value:a,configurable:!0});var E=(t,a)=>{var e={};for(var s in t)B.call(t,s)&&a.indexOf(s)<0&&(e[s]=t[s]);if(t!=null&&_)for(var s of _(t))a.indexOf(s)<0&&L.call(t,s)&&(e[s]=t[s]);return e};import T from"classnames";import r from"react";import{Button as k,Card as V,Space as j}from"antd";import q from"@jswork/react-ant-form-schema";import{ArrowLeftOutlined as U,SaveOutlined as v}from"@ant-design/icons";var O="react-ant-resource-form",D={"zh-CN":{submit:"\u63D0\u4EA4",back:"\u8FD4\u56DE"},"en-US":{submit:"Submit",back:"Back"}},G={lang:"zh-CN"},H=n(t=>{let l=o(o({},G),t),{className:a,meta:e,children:s,lang:d,title:p,loading:R,extra:y,size:S}=l,A=E(l,["className","meta","children","lang","title","loading","extra","size"]),i=n(f=>D[d][f],"t"),m=n(()=>history.back(),"handleBack"),g=y||r.createElement(k,{size:"small",icon:r.createElement(U,null),onClick:m},i("back")),F=s||r.createElement(j,null,r.createElement(k,{htmlType:"submit",type:"primary",icon:r.createElement(v,null)},i("submit")),r.createElement(k,{icon:r.createElement(U,null),onClick:m},i("back")));return r.createElement(V,{title:p,size:S,loading:R,"data-component":O,className:T(O,a),extra:g},r.createElement(q,o({meta:e},A),F))},"ReactAntResourceForm"),x=H;import I,{useEffect as J,useState as K}from"react";import{Form as Q,message as P}from"antd";import z from"@jswork/next";var W={"zh-CN":{create_success:"\u521B\u5EFA\u6210\u529F",update_success:"\u66F4\u65B0\u6210\u529F"},"en-US":{create_success:"Create success",update_success:"Update success"}},X={lang:"zh-CN"},Y=n(t=>{let N=o(o({},X),t),{name:a,params:e,lang:s,onRequest:d,onResponse:p}=N,R=E(N,["name","params","lang","onRequest","onResponse"]),y=`${a}_update`,S=`${a}_create`,A=`${a}_show`,[i]=Q.useForm(),m=!!(e!=null&&e.id),g=n(c=>W[s][c],"t"),[F,l]=K(!1),f=n(c=>(l(!0),(d==null?void 0:d(c))||c),"handleStateRequest"),b=n(c=>{p==null||p(c),l(!1)},"handleStateResponse"),M=n(c=>{if(m){let h=o({id:e.id},c),u=f({stage:"update",payload:h});z.$api[y](u).then(C=>{P.success(g("update_success")),b({stage:"update",data:C})}).finally(()=>l(!1))}else{let h=o({},c),u=f({stage:"create",payload:h});z.$api[S](u).then(C=>{P.success(g("create_success")),b({stage:"create",data:C})}).finally(()=>l(!1))}},"handleFinish");return J(()=>{if(m){let c={id:e.id},h=f({stage:"update",payload:c});z.$api[A](h).then(u=>{i.setFieldsValue(u),b({stage:"show",data:u})}).finally(()=>l(!1))}},[m]),I.createElement(x,o({loading:F,form:i,onFinish:M},R))},"ReactAntResourceFormApi"),Z=Y;export{x as ReactAntResourceForm,Z as ReactAntResourceFormApi};
+//# sourceMappingURL=main.esm.js.map

package/dist/main.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx","../src/api.tsx"],"sourcesContent":["// import noop from '@jswork/noop';\nimport cx from 'classnames';\nimport React, { FC } from 'react';\nimport { Button, Card, CardProps, Space } from 'antd';\nimport ReactAntdFormSchema, { ReactAntdFormSchemaProps } from '@jswork/react-ant-form-schema';\nimport { ArrowLeftOutlined, SaveOutlined } from '@ant-design/icons';\n\nexport type ReactAntResourceFormProps = {\n  lang?: string;\n  loading?: boolean;\n  size?: CardProps['size'];\n  extra?: CardProps['extra'];\n  title?: CardProps['title'];\n} & ReactAntdFormSchemaProps;\n\nconst CLASS_NAME = 'react-ant-resource-form';\nconst locales = {\n  'zh-CN': {\n    submit: '提交',\n    back: '返回',\n  },\n  'en-US': {\n    submit: 'Submit',\n    back: 'Back',\n  },\n};\n\nconst defaultProps = {\n  lang: 'zh-CN',\n};\n\nconst ReactAntResourceForm: FC<ReactAntResourceFormProps> = (props) => {\n  const { className, meta, children, lang, title, loading, extra, size, ...rest } = {\n    ...defaultProps,\n    ...props,\n  };\n  const t = (key: string) => locales[lang][key];\n  const handleBack = () => history.back();\n  const _extra = extra || (\n    <Button size=\"small\" icon={<ArrowLeftOutlined />} onClick={handleBack}>\n      {t('back')}\n    </Button>\n  );\n  const _children = children || (\n    <Space>\n      <Button htmlType=\"submit\" type=\"primary\" icon={<SaveOutlined />}>\n        {t('submit')}\n      </Button>\n      <Button icon={<ArrowLeftOutlined />} onClick={handleBack}>\n        {t('back')}\n      </Button>\n    </Space>\n  );\n\n  return (\n    <Card\n      title={title}\n      size={size}\n      loading={loading}\n      data-component={CLASS_NAME}\n      className={cx(CLASS_NAME, className)}\n      extra={_extra}>\n      <ReactAntdFormSchema meta={meta} {...rest}>\n        {_children}\n      </ReactAntdFormSchema>\n    </Card>\n  );\n};\n\nexport default ReactAntResourceForm;\n","import React, { FC, useEffect, useState } from 'react';\nimport ReactAntResourceForm, { ReactAntResourceFormProps } from '.';\nimport { Form, message } from 'antd';\nimport nx from '@jswork/next';\n\ndeclare global {\n  interface NxStatic {\n    $api: Record<string, any>;\n  }\n}\n\ntype StagePayload = {\n  stage: 'show' | 'create' | 'update';\n  payload: any;\n};\n\ntype StageData = {\n  stage: 'show' | 'create' | 'update';\n  data: any;\n};\n\nexport type ReactAntResourceFormApiProps = ReactAntResourceFormProps & {\n  lang?: string;\n  params?: Record<string, any>;\n  onRequest?: (payload: StagePayload) => any;\n  onResponse?: (res: StageData) => void;\n};\n\nconst locales = {\n  'zh-CN': {\n    create_success: '创建成功',\n    update_success: '更新成功',\n  },\n  'en-US': {\n    create_success: 'Create success',\n    update_success: 'Update success',\n  },\n};\n\nconst defaultProps = {\n  lang: 'zh-CN',\n};\n\nconst ReactAntResourceFormApi: FC<ReactAntResourceFormApiProps> = (props) => {\n  const { name, params, lang, onRequest, onResponse, ...rest } = {\n    ...defaultProps,\n    ...props,\n  };\n\n  const resourceEdit = `${name}_update`;\n  const resourceCreate = `${name}_create`;\n  const resourceShow = `${name}_show`;\n  const [form] = Form.useForm();\n  const isEdit = Boolean(params?.id);\n  const t = (key: string) => locales[lang!][key];\n  const [loading, setLoading] = useState(false);\n  const handleStateRequest = (payload: StagePayload) => {\n    setLoading(true);\n    return onRequest?.(payload) || payload;\n  };\n  const handleStateResponse = (res: StageData) => {\n    onResponse?.(res);\n    setLoading(false);\n  };\n\n  const handleFinish = (values) => {\n    if (isEdit) {\n      const payload = { id: params!.id, ...values };\n      const _payload = handleStateRequest({ stage: 'update', payload });\n\n      nx.$api[resourceEdit](_payload)\n        .then((res) => {\n          message.success(t('update_success'));\n          handleStateResponse({ stage: 'update', data: res });\n        })\n        .finally(() => setLoading(false));\n    } else {\n      const payload = { ...values };\n      const _payload = handleStateRequest({ stage: 'create', payload });\n\n      nx.$api[resourceCreate](_payload)\n        .then((res) => {\n          message.success(t('create_success'));\n          handleStateResponse({ stage: 'create', data: res });\n        })\n        .finally(() => setLoading(false));\n    }\n  };\n\n  // init detail\n  useEffect(() => {\n    if (isEdit) {\n      const payload = { id: params!.id };\n      const _payload = handleStateRequest({ stage: 'update', payload });\n      nx.$api[resourceShow](_payload)\n        .then((res) => {\n          form.setFieldsValue(res);\n          handleStateResponse({ stage: 'show', data: res });\n        })\n        .finally(() => setLoading(false));\n    }\n  }, [isEdit]);\n\n  return <ReactAntResourceForm loading={loading} form={form} onFinish={handleFinish} {...rest} />;\n};\n\nexport default ReactAntResourceFormApi;\n"],"mappings":"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","names":["cx","React","Button","Card","Space","ReactAntdFormSchema","ArrowLeftOutlined","SaveOutlined","CLASS_NAME","locales","submit","back","defaultProps","lang","ReactAntResourceForm","__name","props","_a","__spreadValues","className","meta","children","title","loading","extra","size","rest","t","key","handleBack","history","_extra","React","Button","icon","ArrowLeftOutlined","onClick","_children","Space","htmlType","type","SaveOutlined","Card","data-component","cx","ReactAntdFormSchema","index_default","React","useEffect","useState","Form","message","nx","locales","create_success","update_success","defaultProps","lang","ReactAntResourceFormApi","__name","props","_a","__spreadValues","name","params","onRequest","onResponse","rest","resourceEdit","resourceCreate","resourceShow","form","Form","useForm","isEdit","Boolean","id","t","key","loading","setLoading","useState","handleStateRequest","payload","handleStateResponse","res","handleFinish","values","_payload","stage","nx","$api","then","message","success","data","finally","useEffect","setFieldsValue","React","ReactAntResourceForm","onFinish","api_default"]}

package/dist/style.css

@@ -0,0 +1,2 @@
+
+/*# sourceMappingURL=src/style.scss.map */

package/dist/style.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"src/style.scss"}

package/dist/style.scss

@@ -0,0 +1,3 @@
+//.react-ant-resource-form {
+//  color: red;
+//}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@jswork/react-ant-resource-form",
+  "version": "1.0.1",
+  "main": "dist/main.cjs.js",
+  "module": "dist/main.esm.js",
+  "types": "dist/main.d.ts",
+  "description": "Antd form builder for resource form.",
+  "homepage": "https://js.work",
+  "license": "MIT",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "postbuild": "postsass -s src/style.scss -d dist/style.css -c",
+    "release": "release-it"
+  },
+  "dependencies": {
+    "@jswork/react-ant-form-schema": "^1.0.6"
+  },
+  "devDependencies": {
+    "@ant-design/icons": "^6.1.0",
+    "@jswork/next": "^1.4.2",
+    "@swc/core": "^1.3.93",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "antd": "^5.27.5",
+    "autoprefixer": "^10.4.16",
+    "classnames": "^2.5.1",
+    "cssnano": "^6.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsup": "^8.2.4",
+    "typescript": "^5.2.2"
+  },
+  "peerDependencies": {
+    "classnames": "*",
+    "react": "*",
+    "react-dom": "*",
+    "@jswork/next": "*",
+    "antd": "*",
+    "@ant-design/icons": "*"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "keywords": [
+    "react",
+    "antd",
+    "curd",
+    "form",
+    "resource"
+  ]
+}

package/src/api.tsx

@@ -0,0 +1,107 @@
+import React, { FC, useEffect, useState } from 'react';
+import ReactAntResourceForm, { ReactAntResourceFormProps } from '.';
+import { Form, message } from 'antd';
+import nx from '@jswork/next';
+
+declare global {
+  interface NxStatic {
+    $api: Record<string, any>;
+  }
+}
+
+type StagePayload = {
+  stage: 'show' | 'create' | 'update';
+  payload: any;
+};
+
+type StageData = {
+  stage: 'show' | 'create' | 'update';
+  data: any;
+};
+
+export type ReactAntResourceFormApiProps = ReactAntResourceFormProps & {
+  lang?: string;
+  params?: Record<string, any>;
+  onRequest?: (payload: StagePayload) => any;
+  onResponse?: (res: StageData) => void;
+};
+
+const locales = {
+  'zh-CN': {
+    create_success: '创建成功',
+    update_success: '更新成功',
+  },
+  'en-US': {
+    create_success: 'Create success',
+    update_success: 'Update success',
+  },
+};
+
+const defaultProps = {
+  lang: 'zh-CN',
+};
+
+const ReactAntResourceFormApi: FC<ReactAntResourceFormApiProps> = (props) => {
+  const { name, params, lang, onRequest, onResponse, ...rest } = {
+    ...defaultProps,
+    ...props,
+  };
+
+  const resourceEdit = `${name}_update`;
+  const resourceCreate = `${name}_create`;
+  const resourceShow = `${name}_show`;
+  const [form] = Form.useForm();
+  const isEdit = Boolean(params?.id);
+  const t = (key: string) => locales[lang!][key];
+  const [loading, setLoading] = useState(false);
+  const handleStateRequest = (payload: StagePayload) => {
+    setLoading(true);
+    return onRequest?.(payload) || payload;
+  };
+  const handleStateResponse = (res: StageData) => {
+    onResponse?.(res);
+    setLoading(false);
+  };
+
+  const handleFinish = (values) => {
+    if (isEdit) {
+      const payload = { id: params!.id, ...values };
+      const _payload = handleStateRequest({ stage: 'update', payload });
+
+      nx.$api[resourceEdit](_payload)
+        .then((res) => {
+          message.success(t('update_success'));
+          handleStateResponse({ stage: 'update', data: res });
+        })
+        .finally(() => setLoading(false));
+    } else {
+      const payload = { ...values };
+      const _payload = handleStateRequest({ stage: 'create', payload });
+
+      nx.$api[resourceCreate](_payload)
+        .then((res) => {
+          message.success(t('create_success'));
+          handleStateResponse({ stage: 'create', data: res });
+        })
+        .finally(() => setLoading(false));
+    }
+  };
+
+  // init detail
+  useEffect(() => {
+    if (isEdit) {
+      const payload = { id: params!.id };
+      const _payload = handleStateRequest({ stage: 'update', payload });
+      nx.$api[resourceShow](_payload)
+        .then((res) => {
+          form.setFieldsValue(res);
+          handleStateResponse({ stage: 'show', data: res });
+        })
+        .finally(() => setLoading(false));
+    }
+  }, [isEdit]);
+
+  return <ReactAntResourceForm loading={loading} form={form} onFinish={handleFinish} {...rest} />;
+};
+
+export default ReactAntResourceFormApi;

package/src/index.tsx

@@ -0,0 +1,70 @@
+// import noop from '@jswork/noop';
+import cx from 'classnames';
+import React, { FC } from 'react';
+import { Button, Card, CardProps, Space } from 'antd';
+import ReactAntdFormSchema, { ReactAntdFormSchemaProps } from '@jswork/react-ant-form-schema';
+import { ArrowLeftOutlined, SaveOutlined } from '@ant-design/icons';
+
+export type ReactAntResourceFormProps = {
+  lang?: string;
+  loading?: boolean;
+  size?: CardProps['size'];
+  extra?: CardProps['extra'];
+  title?: CardProps['title'];
+} & ReactAntdFormSchemaProps;
+
+const CLASS_NAME = 'react-ant-resource-form';
+const locales = {
+  'zh-CN': {
+    submit: '提交',
+    back: '返回',
+  },
+  'en-US': {
+    submit: 'Submit',
+    back: 'Back',
+  },
+};
+
+const defaultProps = {
+  lang: 'zh-CN',
+};
+
+const ReactAntResourceForm: FC<ReactAntResourceFormProps> = (props) => {
+  const { className, meta, children, lang, title, loading, extra, size, ...rest } = {
+    ...defaultProps,
+    ...props,
+  };
+  const t = (key: string) => locales[lang][key];
+  const handleBack = () => history.back();
+  const _extra = extra || (
+    <Button size="small" icon={<ArrowLeftOutlined />} onClick={handleBack}>
+      {t('back')}
+    </Button>
+  );
+  const _children = children || (
+    <Space>
+      <Button htmlType="submit" type="primary" icon={<SaveOutlined />}>
+        {t('submit')}
+      </Button>
+      <Button icon={<ArrowLeftOutlined />} onClick={handleBack}>
+        {t('back')}
+      </Button>
+    </Space>
+  );
+
+  return (
+    <Card
+      title={title}
+      size={size}
+      loading={loading}
+      data-component={CLASS_NAME}
+      className={cx(CLASS_NAME, className)}
+      extra={_extra}>
+      <ReactAntdFormSchema meta={meta} {...rest}>
+        {_children}
+      </ReactAntdFormSchema>
+    </Card>
+  );
+};
+
+export default ReactAntResourceForm;

package/src/main.tsx

@@ -0,0 +1,7 @@
+import ReactAntResourceForm from '.';
+import ReactAntResourceFormApi from './api';
+import type { ReactAntResourceFormProps } from '.';
+import type { ReactAntResourceFormApiProps } from './api';
+
+export { ReactAntResourceForm, ReactAntResourceFormApi };
+export type { ReactAntResourceFormProps, ReactAntResourceFormApiProps };

package/src/style.scss

@@ -0,0 +1,3 @@
+//.react-ant-resource-form {
+//  color: red;
+//}