@jswork/react-ant-resource-form 1.0.19 → 1.0.21
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.
- package/README.md +8 -0
- package/dist/main.cjs.js +1 -1
- package/dist/main.cjs.js.map +1 -1
- package/dist/main.d.mts +2 -0
- package/dist/main.d.ts +2 -0
- package/dist/main.esm.js +1 -1
- package/dist/main.esm.js.map +1 -1
- package/dist/style.css +1 -1
- package/dist/style.css.map +1 -1
- package/dist/style.scss +7 -3
- package/package.json +1 -1
- package/src/index.tsx +16 -19
- package/src/style.scss +7 -3
package/README.md
CHANGED
|
@@ -5,3 +5,11 @@
|
|
|
5
5
|
```shell
|
|
6
6
|
yarn add @jswork/react-ant-resource-form
|
|
7
7
|
```
|
|
8
|
+
|
|
9
|
+
## setup
|
|
10
|
+
```ts
|
|
11
|
+
import { config as niceFormConfig } from '@ebay/nice-form-react';
|
|
12
|
+
import antdAdapter from '@ebay/nice-form-react/adapters/antdAdapter';
|
|
13
|
+
|
|
14
|
+
niceFormConfig.addAdapter(antdAdapter);
|
|
15
|
+
```
|
package/dist/main.cjs.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }var E=Object.defineProperty;var S=Object.getOwnPropertySymbols;var b=Object.prototype.hasOwnProperty,
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }var E=Object.defineProperty;var S=Object.getOwnPropertySymbols;var b=Object.prototype.hasOwnProperty,y=Object.prototype.propertyIsEnumerable;var k=(a,s,e)=>s in a?E(a,s,{enumerable:!0,configurable:!0,writable:!0,value:e}):a[s]=e,d=(a,s)=>{for(var e in s||(s={}))b.call(s,e)&&k(a,e,s[e]);if(S)for(var e of S(s))y.call(s,e)&&k(a,e,s[e]);return a};var u=(a,s)=>E(a,"name",{value:s,configurable:!0});var w=(a,s)=>{var e={};for(var t in a)b.call(a,t)&&s.indexOf(t)<0&&(e[t]=a[t]);if(a!=null&&S)for(var t of S(a))s.indexOf(t)<0&&y.call(a,t)&&(e[t]=a[t]);return e};var h=(a,s,e)=>k(a,typeof s!="symbol"?s+"":s,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 V={"zh-CN":{create:"\u521B\u5EFA",update:"\u4FDD\u5B58",create_title:"\u521B\u5EFA",update_title:"\u66F4\u65B0",create_success:"\u521B\u5EFA\u6210\u529F",update_success:"\u66F4\u65B0\u6210\u529F",submit:"\u63D0\u4EA4",back:"\u8FD4\u56DE"},"en-US":{create:"Create",update:"Save",create_title:"Create",update_title:"Update",create_success:"Create success",update_success:"Update success",submit:"Submit",back:"Back"}};var _next = require('@jswork/next'); var _next2 = _interopRequireDefault(_next);var _reactrouterdom = require('react-router-dom');var _fastdeepequal = require('fast-deep-equal'); var _fastdeepequal2 = _interopRequireDefault(_fastdeepequal);var F="react-ant-resource-form",p,v=(p=class extends _react.Component{constructor(e){var t;super(e);h(this,"formRef",_react2.default.createRef());h(this,"_isMounted",!1);h(this,"_initialValues",null);h(this,"handleBack",u(()=>{history.back()},"handleBack"));h(this,"setInitialValues",u(e=>{var t;this._initialValues=e||((t=this.formInstance)==null?void 0:t.getFieldsValue())||{}},"setInitialValues"));h(this,"handleFinish",u(e=>{let{params:t,name:i}=this.props,r=`${i}_update`,o=`${i}_create`;if(this.isEdit){let l=d({id:t.id},e),m=this.handleStateRequest({stage:"update",payload:l});_next2.default.$api[r](m).then(c=>{_antd.message.success(this.t("update_success")),this.handleStateResponse({stage:"update",data:c})}).finally(()=>{this.setState({loading:!1}),this.setInitialValues(),this.handleValuesChange(null,this._initialValues)})}else{let l=d({},e),m=this.handleStateRequest({stage:"create",payload:l});_next2.default.$api[o](m).then(c=>{var f;_antd.message.success(this.t("create_success")),this.handleStateResponse({stage:"create",data:c}),(f=this.formInstance)==null||f.resetFields(),history.back()}).finally(()=>this.setState({loading:!1}))}},"handleFinish"));h(this,"handleKeydown",u(e=>{var r;let{disableHotkeySave:t}=this.props;(e.ctrlKey||e.metaKey)&&(e.key==="s"||e.key==="S")&&(e.preventDefault(),t||(r=this.formInstance)==null||r.submit())},"handleKeydown"));h(this,"handleValuesChange",u((e,t)=>{this.setState({touched:!_fastdeepequal2.default.call(void 0, this._initialValues,t)})},"handleValuesChange"));this.state={loading:!1,touched:!1},this.handleStateRequest=this.handleStateRequest.bind(this),this.handleStateResponse=this.handleStateResponse.bind(this),this.initDetailIfNeeded=this.initDetailIfNeeded.bind(this),(t=e.onInit)==null||t.call(e,this)}get isEdit(){let{params:e}=this.props;return!!(e!=null&&e.id)}get canSave(){let{touched:e,loading:t}=this.state;return this.isEdit?e&&!t:!t}get titleView(){let{title:e}=this.props,t=e||(this.isEdit?this.t("update_title"):this.t("create_title"));return _react2.default.createElement(_antd.Space,null,t,_react2.default.createElement("span",null,this.touchedView))}get touchedView(){return this.isEdit&&this.state.touched?_react2.default.createElement("em",{style:{color:"#f60"}},_react2.default.createElement(_icons.DiffOutlined,null)):null}get extraView(){let{extra:e,backText:t,backProps:i}=this.props;return e||_react2.default.createElement(_antd.Button,d({size:"small",icon:_react2.default.createElement(_icons.ArrowLeftOutlined,null),onClick:this.handleBack},i),t||this.t("back"))}get childrenView(){let{okText:e,backText:t,okProps:i,backProps:r,children:o}=this.props,l=e||(this.isEdit?this.t("update"):this.t("create"));return o||_react2.default.createElement(_antd.Space,null,_react2.default.createElement(_antd.Button,d({disabled:!this.canSave,htmlType:"submit",type:"primary",icon:_react2.default.createElement(_icons.SaveOutlined,null)},i),l||this.t("submit")),_react2.default.createElement(_antd.Button,d({icon:_react2.default.createElement(_icons.ArrowLeftOutlined,null),onClick:this.handleBack},r),t||this.t("back")))}get formInstance(){var e;return(e=this.formRef)==null?void 0:e.current}t(e){let{lang:t}=this.props;return V[t][e]}handleStateRequest(e){var t,i;return this.setState({loading:!0}),((i=(t=this.props).transformRequest)==null?void 0:i.call(t,e))||e.payload}handleStateResponse(e){var i,r,o,l;let{name:t}=this.props;return this.setState({loading:!1}),(r=(i=_next2.default.$event)==null?void 0:i.emit)==null||r.call(i,`${t}:refetch`),((l=(o=this.props).transformResponse)==null?void 0:l.call(o,e))||e.data}componentDidMount(){this._isMounted=!0,window.addEventListener("keydown",this.handleKeydown),this.initDetailIfNeeded()}componentDidUpdate(e){var r,o;let t=(r=e.params)==null?void 0:r.id,i=(o=this.props.params)==null?void 0:o.id;t!==i&&this.initDetailIfNeeded()}componentWillUnmount(){window.removeEventListener("keydown",this.handleKeydown),this._isMounted=!1}initDetailIfNeeded(){let{params:e,name:t}=this.props,i=`${t}_show`;if(this.isEdit){let r={id:e.id},o=this.handleStateRequest({stage:"show",payload:r});_next2.default.$api[i](o).then(l=>{var c,f;if(!this._isMounted)return;let m=this.handleStateResponse({stage:"show",data:l});(f=(c=this.formInstance)==null?void 0:c.setFieldsValue)==null||f.call(c,m)}).finally(()=>{this.setState({loading:!1}),this.setInitialValues()})}else this.setInitialValues()}render(){let g=this.props,{className:e,name:t,meta:i,children:r,lang:o,title:l,extra:m,size:c,okText:f,backText:H,okProps:W,backProps:j,classNames:N,params:G,transformRequest:J,transformResponse:Q,disableHotkeySave:X,blocker:q,onInit:Y}=g,D=w(g,["className","name","meta","children","lang","title","extra","size","okText","backText","okProps","backProps","classNames","params","transformRequest","transformResponse","disableHotkeySave","blocker","onInit"]);return _react2.default.createElement(_antd.Card,{title:this.titleView,extra:this.extraView,size:c,classNames:N,"data-component":F,"data-blocker":q,className:_classnames2.default.call(void 0, F,e)},_react2.default.createElement(_antd.Spin,{spinning:this.state.loading},_react2.default.createElement(_reactantformschema2.default,d({meta:i,ref:this.formRef,onValuesChange:this.handleValuesChange,onFinish:this.handleFinish},D),this.childrenView)))}},u(p,"ReactAntResourceForm"),h(p,"defaultProps",{lang:"zh-CN",disableHotkeySave:!1}),p),U= exports.ReactAntResourceFormFc =u(a=>{let s=_reactrouterdom.useParams.call(void 0, );return _react2.default.createElement(v,d({params:s},a))},"ReactAntResourceFormFc"),A=v;var pe=A;exports.ReactAntResourceFormFc = U; exports.default = pe;
|
|
2
2
|
//# sourceMappingURL=main.cjs.js.map
|
package/dist/main.cjs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["/Users/ap7/github/react-ant-resource-form/packages/lib/dist/main.cjs.js","../src/index.tsx","../src/locales.ts"],"names":["API_FORM_LOCALES","create","update","create_title","update_title","create_success","update_success","submit","back","CLASS_NAME","_a","ReactAntResourceForm","Component","props","formRef","React","createRef","_isMounted","_initialValues","handleBack","__name","history","handleFinish","values","params","name","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, { Component, FC } from 'react';\nimport { Button, ButtonProps, Card, CardProps, Space, message, Spin } from 'antd';\nimport type { FormInstance } from 'antd';\nimport ReactAntdFormSchema, { ReactAntdFormSchemaProps } from '@jswork/react-ant-form-schema';\nimport { ArrowLeftOutlined, DiffOutlined, SaveOutlined } from '@ant-design/icons';\nimport { API_FORM_LOCALES } from './locales';\nimport nx from '@jswork/next';\nimport { useParams } from 'react-router-dom';\nimport fde from 'fast-deep-equal';\n\ndeclare global {\n interface NxStatic {\n $api: Record<string, any>;\n $event: 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 ReactAntResourceFormProps = {\n lang?: string;\n loading?: boolean;\n okText?: string;\n backText?: string;\n params?: Record<string, any>;\n disableHotkeySave?: boolean;\n transformRequest?: (payload: StagePayload) => any;\n transformResponse?: (res: StageData) => any;\n okProps?: ButtonProps;\n backProps?: ButtonProps;\n classNames?: CardProps['classNames'];\n size?: CardProps['size'];\n extra?: CardProps['extra'];\n title?: CardProps['title'];\n onInit?: (ctx: ReactAntResourceForm) => void;\n} & ReactAntdFormSchemaProps;\n\ntype IState = {\n loading: boolean;\n touched: boolean;\n};\n\nconst CLASS_NAME = 'react-ant-resource-form';\n\n/**\n * 当前 card loading 不要直接使用，因为这个 loading 会导致 Card 里的 formRef 被设置成 null\n * 这个情况仅在 class component 里才会出现，function component 里不会：\n * 报错示例:\n *\n * this.formRef?: null\n * index.tsx:229 this.formRef?: {getFieldValue: ƒ, getFieldsValue: ƒ, getFieldError: ƒ, getFieldWarning: ƒ, getFieldsError: ƒ, …}\n * index.tsx:229 this.formRef?: null\n */\n\nclass ReactAntResourceForm extends Component<ReactAntResourceFormProps, IState> {\n public static defaultProps = {\n lang: 'zh-CN',\n disableHotkeySave: false,\n };\n\n private formRef = React.createRef<FormInstance>(); // 注意类型\n private _isMounted = false;\n private _initialValues = null;\n\n get isEdit() {\n const { params } = this.props;\n return Boolean(params?.id);\n }\n\n get canSave() {\n const { touched, loading } = this.state;\n if (!this.isEdit) return loading === false;\n return touched === true && loading === false;\n }\n\n get titleView() {\n const { title } = this.props;\n const _title = title || (this.isEdit ? this.t('update_title') : this.t('create_title'));\n return (\n <Space>\n {_title}\n <span>{this.touchedView}</span>\n </Space>\n );\n }\n\n get touchedView() {\n if (!this.isEdit) return null;\n return this.state.touched ? (\n <em style={{ color: '#f60' }}>\n <DiffOutlined />\n </em>\n ) : null;\n }\n\n get extraView() {\n const { extra, backText, backProps } = this.props;\n if (extra) return extra;\n return (\n <Button size=\"small\" icon={<ArrowLeftOutlined />} onClick={this.handleBack} {...backProps}>\n {backText || this.t('back')}\n </Button>\n );\n }\n\n get childrenView() {\n const { okText, backText, okProps, backProps, children } = this.props;\n const _okText = okText || (this.isEdit ? this.t('update') : this.t('create'));\n if (children) return children;\n\n return (\n <Space>\n <Button\n disabled={!this.canSave}\n htmlType=\"submit\"\n type=\"primary\"\n icon={<SaveOutlined />}\n {...okProps}>\n {_okText || this.t('submit')}\n </Button>\n <Button icon={<ArrowLeftOutlined />} onClick={this.handleBack} {...backProps}>\n {backText || this.t('back')}\n </Button>\n </Space>\n );\n }\n\n get formInstance() {\n return this.formRef?.current;\n }\n\n constructor(props: ReactAntResourceFormProps) {\n super(props);\n this.state = {\n loading: false,\n touched: false,\n };\n\n this.handleStateRequest = this.handleStateRequest.bind(this);\n this.handleStateResponse = this.handleStateResponse.bind(this);\n this.initDetailIfNeeded = this.initDetailIfNeeded.bind(this);\n\n props.onInit?.(this);\n }\n\n private t(key: string) {\n const { lang } = this.props;\n return API_FORM_LOCALES[lang!][key];\n }\n\n private handleBack = () => {\n history.back();\n };\n\n handleStateRequest(stagePayload: StagePayload) {\n this.setState({ loading: true });\n return this.props.transformRequest?.(stagePayload) || stagePayload.payload;\n }\n\n handleStateResponse(res: StageData) {\n const { name } = this.props;\n this.setState({ loading: false });\n nx.$event?.emit?.(`${name}:refetch`);\n return this.props.transformResponse?.(res) || res.data;\n }\n\n handleFinish = (values: any) => {\n const { params, name } = this.props;\n const resourceEdit = `${name}_update`;\n const resourceCreate = `${name}_create`;\n\n if (this.isEdit) {\n const payload = { id: params!.id, ...values };\n const _payload = this.handleStateRequest({ stage: 'update', payload });\n\n nx.$api[resourceEdit](_payload)\n .then((res: any) => {\n message.success(this.t('update_success'));\n this.handleStateResponse({ stage: 'update', data: res });\n })\n .finally(() => {\n this.setState({ loading: false });\n this._initialValues = this.formInstance?.getFieldsValue() || {};\n this.handleValuesChange(null, this._initialValues);\n });\n } else {\n const payload = { ...values };\n const _payload = this.handleStateRequest({ stage: 'create', payload });\n\n nx.$api[resourceCreate](_payload)\n .then((res: any) => {\n message.success(this.t('create_success'));\n this.handleStateResponse({ stage: 'create', data: res });\n this.formInstance?.resetFields();\n history.back();\n })\n .finally(() => this.setState({ loading: false }));\n }\n };\n\n // hotkey save handler (replaces useKeyboardSave hook)\n handleKeydown = (e: KeyboardEvent) => {\n const { disableHotkeySave } = this.props;\n const isSave = (e.ctrlKey || e.metaKey) && (e.key === 's' || e.key === 'S');\n if (isSave) {\n e.preventDefault();\n if (!disableHotkeySave) {\n // submit the form via ref\n try {\n this.formInstance?.submit();\n } catch (err) {\n // ignore if submit not available yet\n }\n }\n }\n };\n\n handleValuesChange = (_: any, allValues: any) => {\n this.setState({\n touched: fde(this._initialValues, allValues) === false,\n });\n };\n\n componentDidMount() {\n this._isMounted = true;\n // attach hotkey listener\n window.addEventListener('keydown', this.handleKeydown);\n // initialize detail if editing\n this.initDetailIfNeeded();\n }\n\n componentDidUpdate(prevProps: ReactAntResourceFormProps) {\n const prevId = prevProps.params?.id;\n const curId = this.props.params?.id;\n // re-init when id changed or from create -> edit\n if (prevId !== curId) {\n this.initDetailIfNeeded();\n }\n }\n\n componentWillUnmount() {\n window.removeEventListener('keydown', this.handleKeydown);\n this._isMounted = false;\n }\n\n initDetailIfNeeded() {\n const { params, name } = this.props;\n const resourceShow = `${name}_show`;\n\n if (this.isEdit) {\n const payload = { id: params!.id };\n const _payload = this.handleStateRequest({ stage: 'show', payload });\n\n nx.$api[resourceShow](_payload)\n .then((res: any) => {\n if (!this._isMounted) return; // 👈 关键：防止操作已卸载组件\n const data = this.handleStateResponse({ stage: 'show', data: res });\n // set fields value on the form via ref\n try {\n this.formInstance?.setFieldsValue?.(data);\n } catch (err) {\n // ignore if not available yet\n }\n })\n .finally(() => {\n this.setState({ loading: false });\n this._initialValues = this.formInstance?.getFieldsValue() || {};\n });\n } else {\n this._initialValues = this.formInstance?.getFieldsValue() || {};\n }\n }\n\n render() {\n const {\n className,\n name,\n meta,\n children,\n lang,\n title,\n extra,\n size,\n okText,\n backText,\n okProps,\n backProps,\n classNames,\n params,\n transformRequest,\n transformResponse,\n disableHotkeySave,\n onInit,\n ...rest\n } = this.props;\n\n return (\n <Card\n title={this.titleView}\n extra={this.extraView}\n size={size}\n classNames={classNames}\n data-component={CLASS_NAME}\n className={cx(CLASS_NAME, className)}>\n <Spin spinning={this.state.loading}>\n <ReactAntdFormSchema\n meta={meta}\n ref={this.formRef}\n onValuesChange={this.handleValuesChange}\n onFinish={this.handleFinish}\n {...rest}>\n {this.childrenView}\n </ReactAntdFormSchema>\n </Spin>\n </Card>\n );\n }\n}\n\nconst ReactAntResourceFormFc: FC<ReactAntResourceFormProps> = (props) => {\n const params = useParams();\n return <ReactAntResourceForm params={params} {...props} />;\n};\n\nexport default ReactAntResourceForm;\nexport { ReactAntResourceFormFc };\n","export const API_FORM_LOCALES = {\n 'zh-CN': {\n create: '创建',\n update: '保存',\n create_title: '创建',\n update_title: '更新',\n create_success: '创建成功',\n update_success: '更新成功',\n submit: '提交',\n back: '返回',\n },\n 'en-US': {\n create: 'Create',\n update: 'Save',\n create_title: 'Create',\n update_title: 'Update',\n create_success: 'Create success',\n update_success: 'Update success',\n submit: 'Submit',\n back: 'Back',\n },\n};\n"]}
|
|
1
|
+
{"version":3,"sources":["/Users/aric/github/react-ant-resource-form/packages/lib/dist/main.cjs.js","../src/index.tsx","../src/locales.ts"],"names":["API_FORM_LOCALES","create","update","create_title","update_title","create_success","update_success","submit","back","CLASS_NAME","_a","ReactAntResourceForm","Component","props","formRef","React","createRef","_isMounted","_initialValues","handleBack","__name","history","setInitialValues","values","formInstance","getFieldsValue","handleFinish","params","name","resourceEdit"],"mappings":"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","file":"/Users/aric/github/react-ant-resource-form/packages/lib/dist/main.cjs.js","sourcesContent":[null,"// import noop from '@jswork/noop';\nimport cx from 'classnames';\nimport React, { Component, FC } from 'react';\nimport { Button, ButtonProps, Card, CardProps, Space, message, Spin } from 'antd';\nimport type { FormInstance } from 'antd';\nimport ReactAntdFormSchema, { ReactAntdFormSchemaProps } from '@jswork/react-ant-form-schema';\nimport { ArrowLeftOutlined, DiffOutlined, SaveOutlined } from '@ant-design/icons';\nimport { API_FORM_LOCALES } from './locales';\nimport nx from '@jswork/next';\nimport { useParams } from 'react-router-dom';\nimport deepEqual from 'fast-deep-equal';\n\ndeclare global {\n interface NxStatic {\n $api: Record<string, any>;\n $event: 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 ReactAntResourceFormProps = {\n lang?: string;\n loading?: boolean;\n okText?: string;\n backText?: string;\n params?: Record<string, any>;\n blocker?: boolean;\n disableHotkeySave?: boolean;\n transformRequest?: (payload: StagePayload) => any;\n transformResponse?: (res: StageData) => any;\n okProps?: ButtonProps;\n backProps?: ButtonProps;\n classNames?: CardProps['classNames'];\n size?: CardProps['size'];\n extra?: CardProps['extra'];\n title?: CardProps['title'];\n onInit?: (ctx: ReactAntResourceForm) => void;\n} & ReactAntdFormSchemaProps;\n\ntype IState = {\n loading: boolean;\n touched: boolean;\n};\n\nconst CLASS_NAME = 'react-ant-resource-form';\n\n/**\n * 当前 card loading 不要直接使用，因为这个 loading 会导致 Card 里的 formRef 被设置成 null\n * 这个情况仅在 class component 里才会出现，function component 里不会：\n * 报错示例:\n *\n * this.formRef?: null\n * index.tsx:229 this.formRef?: {getFieldValue: ƒ, getFieldsValue: ƒ, getFieldError: ƒ, getFieldWarning: ƒ, getFieldsError: ƒ, …}\n * index.tsx:229 this.formRef?: null\n */\n\nclass ReactAntResourceForm extends Component<ReactAntResourceFormProps, IState> {\n public static defaultProps = {\n lang: 'zh-CN',\n disableHotkeySave: false,\n };\n\n private formRef = React.createRef<FormInstance>(); // 注意类型\n private _isMounted = false;\n private _initialValues = null;\n\n get isEdit() {\n const { params } = this.props;\n return Boolean(params?.id);\n }\n\n get canSave() {\n const { touched, loading } = this.state;\n if (!this.isEdit) return !loading;\n return touched && !loading;\n }\n\n get titleView() {\n const { title } = this.props;\n const _title = title || (this.isEdit ? this.t('update_title') : this.t('create_title'));\n return (\n <Space>\n {_title}\n <span>{this.touchedView}</span>\n </Space>\n );\n }\n\n get touchedView() {\n if (!this.isEdit) return null;\n return this.state.touched ? (\n <em style={{ color: '#f60' }}>\n <DiffOutlined />\n </em>\n ) : null;\n }\n\n get extraView() {\n const { extra, backText, backProps } = this.props;\n if (extra) return extra;\n return (\n <Button size=\"small\" icon={<ArrowLeftOutlined />} onClick={this.handleBack} {...backProps}>\n {backText || this.t('back')}\n </Button>\n );\n }\n\n get childrenView() {\n const { okText, backText, okProps, backProps, children } = this.props;\n const _okText = okText || (this.isEdit ? this.t('update') : this.t('create'));\n if (children) return children;\n\n return (\n <Space>\n <Button\n disabled={!this.canSave}\n htmlType=\"submit\"\n type=\"primary\"\n icon={<SaveOutlined />}\n {...okProps}>\n {_okText || this.t('submit')}\n </Button>\n <Button icon={<ArrowLeftOutlined />} onClick={this.handleBack} {...backProps}>\n {backText || this.t('back')}\n </Button>\n </Space>\n );\n }\n\n get formInstance() {\n return this.formRef?.current;\n }\n\n constructor(props: ReactAntResourceFormProps) {\n super(props);\n this.state = {\n loading: false,\n touched: false,\n };\n\n this.handleStateRequest = this.handleStateRequest.bind(this);\n this.handleStateResponse = this.handleStateResponse.bind(this);\n this.initDetailIfNeeded = this.initDetailIfNeeded.bind(this);\n\n props.onInit?.(this);\n }\n\n private t(key: string) {\n const { lang } = this.props;\n return API_FORM_LOCALES[lang!][key];\n }\n\n private handleBack = () => {\n history.back();\n };\n\n private setInitialValues = (values?: any) => {\n this._initialValues = values || this.formInstance?.getFieldsValue() || {};\n };\n\n handleStateRequest(stagePayload: StagePayload) {\n this.setState({ loading: true });\n return this.props.transformRequest?.(stagePayload) || stagePayload.payload;\n }\n\n handleStateResponse(res: StageData) {\n const { name } = this.props;\n this.setState({ loading: false });\n nx.$event?.emit?.(`${name}:refetch`);\n return this.props.transformResponse?.(res) || res.data;\n }\n\n handleFinish = (values: any) => {\n const { params, name } = this.props;\n const resourceEdit = `${name}_update`;\n const resourceCreate = `${name}_create`;\n\n if (this.isEdit) {\n const payload = { id: params!.id, ...values };\n const _payload = this.handleStateRequest({ stage: 'update', payload });\n\n nx.$api[resourceEdit](_payload)\n .then((res: any) => {\n message.success(this.t('update_success'));\n this.handleStateResponse({ stage: 'update', data: res });\n })\n .finally(() => {\n this.setState({ loading: false });\n this.setInitialValues();\n this.handleValuesChange(null, this._initialValues);\n });\n } else {\n const payload = { ...values };\n const _payload = this.handleStateRequest({ stage: 'create', payload });\n\n nx.$api[resourceCreate](_payload)\n .then((res: any) => {\n message.success(this.t('create_success'));\n this.handleStateResponse({ stage: 'create', data: res });\n this.formInstance?.resetFields();\n history.back();\n })\n .finally(() => this.setState({ loading: false }));\n }\n };\n\n // hotkey save handler (replaces useKeyboardSave hook)\n handleKeydown = (e: KeyboardEvent) => {\n const { disableHotkeySave } = this.props;\n const isSave = (e.ctrlKey || e.metaKey) && (e.key === 's' || e.key === 'S');\n if (isSave) {\n e.preventDefault();\n if (!disableHotkeySave) {\n this.formInstance?.submit();\n }\n }\n };\n\n handleValuesChange = (_: any, allValues: any) => {\n this.setState({\n touched: !deepEqual(this._initialValues, allValues),\n });\n };\n\n componentDidMount() {\n this._isMounted = true;\n // attach hotkey listener\n window.addEventListener('keydown', this.handleKeydown);\n // initialize detail if editing\n this.initDetailIfNeeded();\n }\n\n componentDidUpdate(prevProps: ReactAntResourceFormProps) {\n const prevId = prevProps.params?.id;\n const curId = this.props.params?.id;\n // re-init when id changed or from create -> edit\n if (prevId !== curId) {\n this.initDetailIfNeeded();\n }\n }\n\n componentWillUnmount() {\n window.removeEventListener('keydown', this.handleKeydown);\n this._isMounted = false;\n }\n\n initDetailIfNeeded() {\n const { params, name } = this.props;\n const resourceShow = `${name}_show`;\n\n if (this.isEdit) {\n const payload = { id: params!.id };\n const _payload = this.handleStateRequest({ stage: 'show', payload });\n\n nx.$api[resourceShow](_payload)\n .then((res: any) => {\n if (!this._isMounted) return; // 👈 关键：防止操作已卸载组件\n const data = this.handleStateResponse({ stage: 'show', data: res });\n this.formInstance?.setFieldsValue?.(data);\n })\n .finally(() => {\n this.setState({ loading: false });\n this.setInitialValues();\n });\n } else {\n this.setInitialValues();\n }\n }\n\n render() {\n const {\n className,\n name,\n meta,\n children,\n lang,\n title,\n extra,\n size,\n okText,\n backText,\n okProps,\n backProps,\n classNames,\n params,\n transformRequest,\n transformResponse,\n disableHotkeySave,\n blocker,\n onInit,\n ...rest\n } = this.props;\n\n return (\n <Card\n title={this.titleView}\n extra={this.extraView}\n size={size}\n classNames={classNames}\n data-component={CLASS_NAME}\n data-blocker={blocker}\n className={cx(CLASS_NAME, className)}>\n <Spin spinning={this.state.loading}>\n <ReactAntdFormSchema\n meta={meta}\n ref={this.formRef}\n onValuesChange={this.handleValuesChange}\n onFinish={this.handleFinish}\n {...rest}>\n {this.childrenView}\n </ReactAntdFormSchema>\n </Spin>\n </Card>\n );\n }\n}\n\nconst ReactAntResourceFormFc: FC<ReactAntResourceFormProps> = (props) => {\n const params = useParams();\n return <ReactAntResourceForm params={params} {...props} />;\n};\n\nexport default ReactAntResourceForm;\nexport { ReactAntResourceFormFc };\n","export const API_FORM_LOCALES = {\n 'zh-CN': {\n create: '创建',\n update: '保存',\n create_title: '创建',\n update_title: '更新',\n create_success: '创建成功',\n update_success: '更新成功',\n submit: '提交',\n back: '返回',\n },\n 'en-US': {\n create: 'Create',\n update: 'Save',\n create_title: 'Create',\n update_title: 'Update',\n create_success: 'Create success',\n update_success: 'Update success',\n submit: 'Submit',\n back: 'Back',\n },\n};\n"]}
|
package/dist/main.d.mts
CHANGED
|
@@ -23,6 +23,7 @@ type ReactAntResourceFormProps = {
|
|
|
23
23
|
okText?: string;
|
|
24
24
|
backText?: string;
|
|
25
25
|
params?: Record<string, any>;
|
|
26
|
+
blocker?: boolean;
|
|
26
27
|
disableHotkeySave?: boolean;
|
|
27
28
|
transformRequest?: (payload: StagePayload) => any;
|
|
28
29
|
transformResponse?: (res: StageData) => any;
|
|
@@ -65,6 +66,7 @@ declare class ReactAntResourceForm extends Component<ReactAntResourceFormProps,
|
|
|
65
66
|
constructor(props: ReactAntResourceFormProps);
|
|
66
67
|
private t;
|
|
67
68
|
private handleBack;
|
|
69
|
+
private setInitialValues;
|
|
68
70
|
handleStateRequest(stagePayload: StagePayload): any;
|
|
69
71
|
handleStateResponse(res: StageData): any;
|
|
70
72
|
handleFinish: (values: any) => void;
|
package/dist/main.d.ts
CHANGED
|
@@ -23,6 +23,7 @@ type ReactAntResourceFormProps = {
|
|
|
23
23
|
okText?: string;
|
|
24
24
|
backText?: string;
|
|
25
25
|
params?: Record<string, any>;
|
|
26
|
+
blocker?: boolean;
|
|
26
27
|
disableHotkeySave?: boolean;
|
|
27
28
|
transformRequest?: (payload: StagePayload) => any;
|
|
28
29
|
transformResponse?: (res: StageData) => any;
|
|
@@ -65,6 +66,7 @@ declare class ReactAntResourceForm extends Component<ReactAntResourceFormProps,
|
|
|
65
66
|
constructor(props: ReactAntResourceFormProps);
|
|
66
67
|
private t;
|
|
67
68
|
private handleBack;
|
|
69
|
+
private setInitialValues;
|
|
68
70
|
handleStateRequest(stagePayload: StagePayload): any;
|
|
69
71
|
handleStateResponse(res: StageData): any;
|
|
70
72
|
handleFinish: (values: any) => void;
|
package/dist/main.esm.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var E=Object.defineProperty;var S=Object.getOwnPropertySymbols;var b=Object.prototype.hasOwnProperty,
|
|
1
|
+
var E=Object.defineProperty;var S=Object.getOwnPropertySymbols;var b=Object.prototype.hasOwnProperty,y=Object.prototype.propertyIsEnumerable;var k=(a,s,e)=>s in a?E(a,s,{enumerable:!0,configurable:!0,writable:!0,value:e}):a[s]=e,d=(a,s)=>{for(var e in s||(s={}))b.call(s,e)&&k(a,e,s[e]);if(S)for(var e of S(s))y.call(s,e)&&k(a,e,s[e]);return a};var u=(a,s)=>E(a,"name",{value:s,configurable:!0});var w=(a,s)=>{var e={};for(var t in a)b.call(a,t)&&s.indexOf(t)<0&&(e[t]=a[t]);if(a!=null&&S)for(var t of S(a))s.indexOf(t)<0&&y.call(a,t)&&(e[t]=a[t]);return e};var h=(a,s,e)=>k(a,typeof s!="symbol"?s+"":s,e);import L from"classnames";import n,{Component as M}from"react";import{Button as R,Card as P,Space as I,message as x,Spin as $}from"antd";import O from"@jswork/react-ant-form-schema";import{ArrowLeftOutlined as C,DiffOutlined as T,SaveOutlined as B}from"@ant-design/icons";var V={"zh-CN":{create:"\u521B\u5EFA",update:"\u4FDD\u5B58",create_title:"\u521B\u5EFA",update_title:"\u66F4\u65B0",create_success:"\u521B\u5EFA\u6210\u529F",update_success:"\u66F4\u65B0\u6210\u529F",submit:"\u63D0\u4EA4",back:"\u8FD4\u56DE"},"en-US":{create:"Create",update:"Save",create_title:"Create",update_title:"Update",create_success:"Create success",update_success:"Update success",submit:"Submit",back:"Back"}};import _ from"@jswork/next";import{useParams as z}from"react-router-dom";import K from"fast-deep-equal";var F="react-ant-resource-form",p,v=(p=class extends M{constructor(e){var t;super(e);h(this,"formRef",n.createRef());h(this,"_isMounted",!1);h(this,"_initialValues",null);h(this,"handleBack",u(()=>{history.back()},"handleBack"));h(this,"setInitialValues",u(e=>{var t;this._initialValues=e||((t=this.formInstance)==null?void 0:t.getFieldsValue())||{}},"setInitialValues"));h(this,"handleFinish",u(e=>{let{params:t,name:i}=this.props,r=`${i}_update`,o=`${i}_create`;if(this.isEdit){let l=d({id:t.id},e),m=this.handleStateRequest({stage:"update",payload:l});_.$api[r](m).then(c=>{x.success(this.t("update_success")),this.handleStateResponse({stage:"update",data:c})}).finally(()=>{this.setState({loading:!1}),this.setInitialValues(),this.handleValuesChange(null,this._initialValues)})}else{let l=d({},e),m=this.handleStateRequest({stage:"create",payload:l});_.$api[o](m).then(c=>{var f;x.success(this.t("create_success")),this.handleStateResponse({stage:"create",data:c}),(f=this.formInstance)==null||f.resetFields(),history.back()}).finally(()=>this.setState({loading:!1}))}},"handleFinish"));h(this,"handleKeydown",u(e=>{var r;let{disableHotkeySave:t}=this.props;(e.ctrlKey||e.metaKey)&&(e.key==="s"||e.key==="S")&&(e.preventDefault(),t||(r=this.formInstance)==null||r.submit())},"handleKeydown"));h(this,"handleValuesChange",u((e,t)=>{this.setState({touched:!K(this._initialValues,t)})},"handleValuesChange"));this.state={loading:!1,touched:!1},this.handleStateRequest=this.handleStateRequest.bind(this),this.handleStateResponse=this.handleStateResponse.bind(this),this.initDetailIfNeeded=this.initDetailIfNeeded.bind(this),(t=e.onInit)==null||t.call(e,this)}get isEdit(){let{params:e}=this.props;return!!(e!=null&&e.id)}get canSave(){let{touched:e,loading:t}=this.state;return this.isEdit?e&&!t:!t}get titleView(){let{title:e}=this.props,t=e||(this.isEdit?this.t("update_title"):this.t("create_title"));return n.createElement(I,null,t,n.createElement("span",null,this.touchedView))}get touchedView(){return this.isEdit&&this.state.touched?n.createElement("em",{style:{color:"#f60"}},n.createElement(T,null)):null}get extraView(){let{extra:e,backText:t,backProps:i}=this.props;return e||n.createElement(R,d({size:"small",icon:n.createElement(C,null),onClick:this.handleBack},i),t||this.t("back"))}get childrenView(){let{okText:e,backText:t,okProps:i,backProps:r,children:o}=this.props,l=e||(this.isEdit?this.t("update"):this.t("create"));return o||n.createElement(I,null,n.createElement(R,d({disabled:!this.canSave,htmlType:"submit",type:"primary",icon:n.createElement(B,null)},i),l||this.t("submit")),n.createElement(R,d({icon:n.createElement(C,null),onClick:this.handleBack},r),t||this.t("back")))}get formInstance(){var e;return(e=this.formRef)==null?void 0:e.current}t(e){let{lang:t}=this.props;return V[t][e]}handleStateRequest(e){var t,i;return this.setState({loading:!0}),((i=(t=this.props).transformRequest)==null?void 0:i.call(t,e))||e.payload}handleStateResponse(e){var i,r,o,l;let{name:t}=this.props;return this.setState({loading:!1}),(r=(i=_.$event)==null?void 0:i.emit)==null||r.call(i,`${t}:refetch`),((l=(o=this.props).transformResponse)==null?void 0:l.call(o,e))||e.data}componentDidMount(){this._isMounted=!0,window.addEventListener("keydown",this.handleKeydown),this.initDetailIfNeeded()}componentDidUpdate(e){var r,o;let t=(r=e.params)==null?void 0:r.id,i=(o=this.props.params)==null?void 0:o.id;t!==i&&this.initDetailIfNeeded()}componentWillUnmount(){window.removeEventListener("keydown",this.handleKeydown),this._isMounted=!1}initDetailIfNeeded(){let{params:e,name:t}=this.props,i=`${t}_show`;if(this.isEdit){let r={id:e.id},o=this.handleStateRequest({stage:"show",payload:r});_.$api[i](o).then(l=>{var c,f;if(!this._isMounted)return;let m=this.handleStateResponse({stage:"show",data:l});(f=(c=this.formInstance)==null?void 0:c.setFieldsValue)==null||f.call(c,m)}).finally(()=>{this.setState({loading:!1}),this.setInitialValues()})}else this.setInitialValues()}render(){let g=this.props,{className:e,name:t,meta:i,children:r,lang:o,title:l,extra:m,size:c,okText:f,backText:H,okProps:W,backProps:j,classNames:N,params:G,transformRequest:J,transformResponse:Q,disableHotkeySave:X,blocker:q,onInit:Y}=g,D=w(g,["className","name","meta","children","lang","title","extra","size","okText","backText","okProps","backProps","classNames","params","transformRequest","transformResponse","disableHotkeySave","blocker","onInit"]);return n.createElement(P,{title:this.titleView,extra:this.extraView,size:c,classNames:N,"data-component":F,"data-blocker":q,className:L(F,e)},n.createElement($,{spinning:this.state.loading},n.createElement(O,d({meta:i,ref:this.formRef,onValuesChange:this.handleValuesChange,onFinish:this.handleFinish},D),this.childrenView)))}},u(p,"ReactAntResourceForm"),h(p,"defaultProps",{lang:"zh-CN",disableHotkeySave:!1}),p),U=u(a=>{let s=z();return n.createElement(v,d({params:s},a))},"ReactAntResourceFormFc"),A=v;var pe=A;export{U as ReactAntResourceFormFc,pe 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/locales.ts","../src/main.tsx"],"sourcesContent":["// import noop from '@jswork/noop';\nimport cx from 'classnames';\nimport React, { Component, FC } from 'react';\nimport { Button, ButtonProps, Card, CardProps, Space, message, Spin } from 'antd';\nimport type { FormInstance } from 'antd';\nimport ReactAntdFormSchema, { ReactAntdFormSchemaProps } from '@jswork/react-ant-form-schema';\nimport { ArrowLeftOutlined, DiffOutlined, SaveOutlined } from '@ant-design/icons';\nimport { API_FORM_LOCALES } from './locales';\nimport nx from '@jswork/next';\nimport { useParams } from 'react-router-dom';\nimport fde from 'fast-deep-equal';\n\ndeclare global {\n interface NxStatic {\n $api: Record<string, any>;\n $event: 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 ReactAntResourceFormProps = {\n lang?: string;\n loading?: boolean;\n okText?: string;\n backText?: string;\n params?: Record<string, any>;\n disableHotkeySave?: boolean;\n transformRequest?: (payload: StagePayload) => any;\n transformResponse?: (res: StageData) => any;\n okProps?: ButtonProps;\n backProps?: ButtonProps;\n classNames?: CardProps['classNames'];\n size?: CardProps['size'];\n extra?: CardProps['extra'];\n title?: CardProps['title'];\n onInit?: (ctx: ReactAntResourceForm) => void;\n} & ReactAntdFormSchemaProps;\n\ntype IState = {\n loading: boolean;\n touched: boolean;\n};\n\nconst CLASS_NAME = 'react-ant-resource-form';\n\n/**\n * 当前 card loading 不要直接使用，因为这个 loading 会导致 Card 里的 formRef 被设置成 null\n * 这个情况仅在 class component 里才会出现，function component 里不会：\n * 报错示例:\n *\n * this.formRef?: null\n * index.tsx:229 this.formRef?: {getFieldValue: ƒ, getFieldsValue: ƒ, getFieldError: ƒ, getFieldWarning: ƒ, getFieldsError: ƒ, …}\n * index.tsx:229 this.formRef?: null\n */\n\nclass ReactAntResourceForm extends Component<ReactAntResourceFormProps, IState> {\n public static defaultProps = {\n lang: 'zh-CN',\n disableHotkeySave: false,\n };\n\n private formRef = React.createRef<FormInstance>(); // 注意类型\n private _isMounted = false;\n private _initialValues = null;\n\n get isEdit() {\n const { params } = this.props;\n return Boolean(params?.id);\n }\n\n get canSave() {\n const { touched, loading } = this.state;\n if (!this.isEdit) return loading === false;\n return touched === true && loading === false;\n }\n\n get titleView() {\n const { title } = this.props;\n const _title = title || (this.isEdit ? this.t('update_title') : this.t('create_title'));\n return (\n <Space>\n {_title}\n <span>{this.touchedView}</span>\n </Space>\n );\n }\n\n get touchedView() {\n if (!this.isEdit) return null;\n return this.state.touched ? (\n <em style={{ color: '#f60' }}>\n <DiffOutlined />\n </em>\n ) : null;\n }\n\n get extraView() {\n const { extra, backText, backProps } = this.props;\n if (extra) return extra;\n return (\n <Button size=\"small\" icon={<ArrowLeftOutlined />} onClick={this.handleBack} {...backProps}>\n {backText || this.t('back')}\n </Button>\n );\n }\n\n get childrenView() {\n const { okText, backText, okProps, backProps, children } = this.props;\n const _okText = okText || (this.isEdit ? this.t('update') : this.t('create'));\n if (children) return children;\n\n return (\n <Space>\n <Button\n disabled={!this.canSave}\n htmlType=\"submit\"\n type=\"primary\"\n icon={<SaveOutlined />}\n {...okProps}>\n {_okText || this.t('submit')}\n </Button>\n <Button icon={<ArrowLeftOutlined />} onClick={this.handleBack} {...backProps}>\n {backText || this.t('back')}\n </Button>\n </Space>\n );\n }\n\n get formInstance() {\n return this.formRef?.current;\n }\n\n constructor(props: ReactAntResourceFormProps) {\n super(props);\n this.state = {\n loading: false,\n touched: false,\n };\n\n this.handleStateRequest = this.handleStateRequest.bind(this);\n this.handleStateResponse = this.handleStateResponse.bind(this);\n this.initDetailIfNeeded = this.initDetailIfNeeded.bind(this);\n\n props.onInit?.(this);\n }\n\n private t(key: string) {\n const { lang } = this.props;\n return API_FORM_LOCALES[lang!][key];\n }\n\n private handleBack = () => {\n history.back();\n };\n\n handleStateRequest(stagePayload: StagePayload) {\n this.setState({ loading: true });\n return this.props.transformRequest?.(stagePayload) || stagePayload.payload;\n }\n\n handleStateResponse(res: StageData) {\n const { name } = this.props;\n this.setState({ loading: false });\n nx.$event?.emit?.(`${name}:refetch`);\n return this.props.transformResponse?.(res) || res.data;\n }\n\n handleFinish = (values: any) => {\n const { params, name } = this.props;\n const resourceEdit = `${name}_update`;\n const resourceCreate = `${name}_create`;\n\n if (this.isEdit) {\n const payload = { id: params!.id, ...values };\n const _payload = this.handleStateRequest({ stage: 'update', payload });\n\n nx.$api[resourceEdit](_payload)\n .then((res: any) => {\n message.success(this.t('update_success'));\n this.handleStateResponse({ stage: 'update', data: res });\n })\n .finally(() => {\n this.setState({ loading: false });\n this._initialValues = this.formInstance?.getFieldsValue() || {};\n this.handleValuesChange(null, this._initialValues);\n });\n } else {\n const payload = { ...values };\n const _payload = this.handleStateRequest({ stage: 'create', payload });\n\n nx.$api[resourceCreate](_payload)\n .then((res: any) => {\n message.success(this.t('create_success'));\n this.handleStateResponse({ stage: 'create', data: res });\n this.formInstance?.resetFields();\n history.back();\n })\n .finally(() => this.setState({ loading: false }));\n }\n };\n\n // hotkey save handler (replaces useKeyboardSave hook)\n handleKeydown = (e: KeyboardEvent) => {\n const { disableHotkeySave } = this.props;\n const isSave = (e.ctrlKey || e.metaKey) && (e.key === 's' || e.key === 'S');\n if (isSave) {\n e.preventDefault();\n if (!disableHotkeySave) {\n // submit the form via ref\n try {\n this.formInstance?.submit();\n } catch (err) {\n // ignore if submit not available yet\n }\n }\n }\n };\n\n handleValuesChange = (_: any, allValues: any) => {\n this.setState({\n touched: fde(this._initialValues, allValues) === false,\n });\n };\n\n componentDidMount() {\n this._isMounted = true;\n // attach hotkey listener\n window.addEventListener('keydown', this.handleKeydown);\n // initialize detail if editing\n this.initDetailIfNeeded();\n }\n\n componentDidUpdate(prevProps: ReactAntResourceFormProps) {\n const prevId = prevProps.params?.id;\n const curId = this.props.params?.id;\n // re-init when id changed or from create -> edit\n if (prevId !== curId) {\n this.initDetailIfNeeded();\n }\n }\n\n componentWillUnmount() {\n window.removeEventListener('keydown', this.handleKeydown);\n this._isMounted = false;\n }\n\n initDetailIfNeeded() {\n const { params, name } = this.props;\n const resourceShow = `${name}_show`;\n\n if (this.isEdit) {\n const payload = { id: params!.id };\n const _payload = this.handleStateRequest({ stage: 'show', payload });\n\n nx.$api[resourceShow](_payload)\n .then((res: any) => {\n if (!this._isMounted) return; // 👈 关键：防止操作已卸载组件\n const data = this.handleStateResponse({ stage: 'show', data: res });\n // set fields value on the form via ref\n try {\n this.formInstance?.setFieldsValue?.(data);\n } catch (err) {\n // ignore if not available yet\n }\n })\n .finally(() => {\n this.setState({ loading: false });\n this._initialValues = this.formInstance?.getFieldsValue() || {};\n });\n } else {\n this._initialValues = this.formInstance?.getFieldsValue() || {};\n }\n }\n\n render() {\n const {\n className,\n name,\n meta,\n children,\n lang,\n title,\n extra,\n size,\n okText,\n backText,\n okProps,\n backProps,\n classNames,\n params,\n transformRequest,\n transformResponse,\n disableHotkeySave,\n onInit,\n ...rest\n } = this.props;\n\n return (\n <Card\n title={this.titleView}\n extra={this.extraView}\n size={size}\n classNames={classNames}\n data-component={CLASS_NAME}\n className={cx(CLASS_NAME, className)}>\n <Spin spinning={this.state.loading}>\n <ReactAntdFormSchema\n meta={meta}\n ref={this.formRef}\n onValuesChange={this.handleValuesChange}\n onFinish={this.handleFinish}\n {...rest}>\n {this.childrenView}\n </ReactAntdFormSchema>\n </Spin>\n </Card>\n );\n }\n}\n\nconst ReactAntResourceFormFc: FC<ReactAntResourceFormProps> = (props) => {\n const params = useParams();\n return <ReactAntResourceForm params={params} {...props} />;\n};\n\nexport default ReactAntResourceForm;\nexport { ReactAntResourceFormFc };\n","export const API_FORM_LOCALES = {\n 'zh-CN': {\n create: '创建',\n update: '保存',\n create_title: '创建',\n update_title: '更新',\n create_success: '创建成功',\n update_success: '更新成功',\n submit: '提交',\n back: '返回',\n },\n 'en-US': {\n create: 'Create',\n update: 'Save',\n create_title: 'Create',\n update_title: 'Update',\n create_success: 'Create success',\n update_success: 'Update success',\n submit: 'Submit',\n back: 'Back',\n },\n};\n","import ReactAntResourceForm, { ReactAntResourceFormFc } from '.';\nimport type { ReactAntResourceFormProps } from '.';\n\nexport default ReactAntResourceForm;\nexport { ReactAntResourceFormFc };\nexport type { ReactAntResourceFormProps };\n"],"mappings":"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","names":["cx","React","Component","Button","Card","Space","message","Spin","ReactAntdFormSchema","ArrowLeftOutlined","DiffOutlined","SaveOutlined","API_FORM_LOCALES","create","update","create_title","update_title","create_success","update_success","submit","back","nx","useParams","fde","CLASS_NAME","_a","ReactAntResourceForm","Component","props","formRef","React","createRef","_isMounted","_initialValues","handleBack","__name","history","back","handleFinish","values","params","name","resourceEdit","resourceCreate","isEdit","payload","__spreadValues","id","_payload","handleStateRequest","stage","nx","$api","then","res","message","success","t","handleStateResponse","data","finally","setState","loading","formInstance","getFieldsValue","handleValuesChange","resetFields","handleKeydown","e","disableHotkeySave","ctrlKey","metaKey","key","preventDefault","submit","err","_","allValues","touched","fde","state","bind","initDetailIfNeeded","onInit","Boolean","canSave","titleView","title","_title","Space","span","touchedView","em","style","color","DiffOutlined","extraView","extra","backText","backProps","Button","size","icon","ArrowLeftOutlined","onClick","childrenView","okText","okProps","children","_okText","disabled","htmlType","type","SaveOutlined","current","lang","API_FORM_LOCALES","stagePayload","_b","transformRequest","_c","_d","$event","emit","transformResponse","componentDidMount","window","addEventListener","componentDidUpdate","prevProps","prevId","curId","componentWillUnmount","removeEventListener","resourceShow","setFieldsValue","render","className","meta","classNames","rest","Card","data-component","cx","Spin","spinning","ReactAntdFormSchema","ref","onValuesChange","onFinish","__publicField","defaultProps","ReactAntResourceFormFc","useParams","index_default","main_default","ReactAntResourceForm"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.tsx","../src/locales.ts","../src/main.tsx"],"sourcesContent":["// import noop from '@jswork/noop';\nimport cx from 'classnames';\nimport React, { Component, FC } from 'react';\nimport { Button, ButtonProps, Card, CardProps, Space, message, Spin } from 'antd';\nimport type { FormInstance } from 'antd';\nimport ReactAntdFormSchema, { ReactAntdFormSchemaProps } from '@jswork/react-ant-form-schema';\nimport { ArrowLeftOutlined, DiffOutlined, SaveOutlined } from '@ant-design/icons';\nimport { API_FORM_LOCALES } from './locales';\nimport nx from '@jswork/next';\nimport { useParams } from 'react-router-dom';\nimport deepEqual from 'fast-deep-equal';\n\ndeclare global {\n interface NxStatic {\n $api: Record<string, any>;\n $event: 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 ReactAntResourceFormProps = {\n lang?: string;\n loading?: boolean;\n okText?: string;\n backText?: string;\n params?: Record<string, any>;\n blocker?: boolean;\n disableHotkeySave?: boolean;\n transformRequest?: (payload: StagePayload) => any;\n transformResponse?: (res: StageData) => any;\n okProps?: ButtonProps;\n backProps?: ButtonProps;\n classNames?: CardProps['classNames'];\n size?: CardProps['size'];\n extra?: CardProps['extra'];\n title?: CardProps['title'];\n onInit?: (ctx: ReactAntResourceForm) => void;\n} & ReactAntdFormSchemaProps;\n\ntype IState = {\n loading: boolean;\n touched: boolean;\n};\n\nconst CLASS_NAME = 'react-ant-resource-form';\n\n/**\n * 当前 card loading 不要直接使用，因为这个 loading 会导致 Card 里的 formRef 被设置成 null\n * 这个情况仅在 class component 里才会出现，function component 里不会：\n * 报错示例:\n *\n * this.formRef?: null\n * index.tsx:229 this.formRef?: {getFieldValue: ƒ, getFieldsValue: ƒ, getFieldError: ƒ, getFieldWarning: ƒ, getFieldsError: ƒ, …}\n * index.tsx:229 this.formRef?: null\n */\n\nclass ReactAntResourceForm extends Component<ReactAntResourceFormProps, IState> {\n public static defaultProps = {\n lang: 'zh-CN',\n disableHotkeySave: false,\n };\n\n private formRef = React.createRef<FormInstance>(); // 注意类型\n private _isMounted = false;\n private _initialValues = null;\n\n get isEdit() {\n const { params } = this.props;\n return Boolean(params?.id);\n }\n\n get canSave() {\n const { touched, loading } = this.state;\n if (!this.isEdit) return !loading;\n return touched && !loading;\n }\n\n get titleView() {\n const { title } = this.props;\n const _title = title || (this.isEdit ? this.t('update_title') : this.t('create_title'));\n return (\n <Space>\n {_title}\n <span>{this.touchedView}</span>\n </Space>\n );\n }\n\n get touchedView() {\n if (!this.isEdit) return null;\n return this.state.touched ? (\n <em style={{ color: '#f60' }}>\n <DiffOutlined />\n </em>\n ) : null;\n }\n\n get extraView() {\n const { extra, backText, backProps } = this.props;\n if (extra) return extra;\n return (\n <Button size=\"small\" icon={<ArrowLeftOutlined />} onClick={this.handleBack} {...backProps}>\n {backText || this.t('back')}\n </Button>\n );\n }\n\n get childrenView() {\n const { okText, backText, okProps, backProps, children } = this.props;\n const _okText = okText || (this.isEdit ? this.t('update') : this.t('create'));\n if (children) return children;\n\n return (\n <Space>\n <Button\n disabled={!this.canSave}\n htmlType=\"submit\"\n type=\"primary\"\n icon={<SaveOutlined />}\n {...okProps}>\n {_okText || this.t('submit')}\n </Button>\n <Button icon={<ArrowLeftOutlined />} onClick={this.handleBack} {...backProps}>\n {backText || this.t('back')}\n </Button>\n </Space>\n );\n }\n\n get formInstance() {\n return this.formRef?.current;\n }\n\n constructor(props: ReactAntResourceFormProps) {\n super(props);\n this.state = {\n loading: false,\n touched: false,\n };\n\n this.handleStateRequest = this.handleStateRequest.bind(this);\n this.handleStateResponse = this.handleStateResponse.bind(this);\n this.initDetailIfNeeded = this.initDetailIfNeeded.bind(this);\n\n props.onInit?.(this);\n }\n\n private t(key: string) {\n const { lang } = this.props;\n return API_FORM_LOCALES[lang!][key];\n }\n\n private handleBack = () => {\n history.back();\n };\n\n private setInitialValues = (values?: any) => {\n this._initialValues = values || this.formInstance?.getFieldsValue() || {};\n };\n\n handleStateRequest(stagePayload: StagePayload) {\n this.setState({ loading: true });\n return this.props.transformRequest?.(stagePayload) || stagePayload.payload;\n }\n\n handleStateResponse(res: StageData) {\n const { name } = this.props;\n this.setState({ loading: false });\n nx.$event?.emit?.(`${name}:refetch`);\n return this.props.transformResponse?.(res) || res.data;\n }\n\n handleFinish = (values: any) => {\n const { params, name } = this.props;\n const resourceEdit = `${name}_update`;\n const resourceCreate = `${name}_create`;\n\n if (this.isEdit) {\n const payload = { id: params!.id, ...values };\n const _payload = this.handleStateRequest({ stage: 'update', payload });\n\n nx.$api[resourceEdit](_payload)\n .then((res: any) => {\n message.success(this.t('update_success'));\n this.handleStateResponse({ stage: 'update', data: res });\n })\n .finally(() => {\n this.setState({ loading: false });\n this.setInitialValues();\n this.handleValuesChange(null, this._initialValues);\n });\n } else {\n const payload = { ...values };\n const _payload = this.handleStateRequest({ stage: 'create', payload });\n\n nx.$api[resourceCreate](_payload)\n .then((res: any) => {\n message.success(this.t('create_success'));\n this.handleStateResponse({ stage: 'create', data: res });\n this.formInstance?.resetFields();\n history.back();\n })\n .finally(() => this.setState({ loading: false }));\n }\n };\n\n // hotkey save handler (replaces useKeyboardSave hook)\n handleKeydown = (e: KeyboardEvent) => {\n const { disableHotkeySave } = this.props;\n const isSave = (e.ctrlKey || e.metaKey) && (e.key === 's' || e.key === 'S');\n if (isSave) {\n e.preventDefault();\n if (!disableHotkeySave) {\n this.formInstance?.submit();\n }\n }\n };\n\n handleValuesChange = (_: any, allValues: any) => {\n this.setState({\n touched: !deepEqual(this._initialValues, allValues),\n });\n };\n\n componentDidMount() {\n this._isMounted = true;\n // attach hotkey listener\n window.addEventListener('keydown', this.handleKeydown);\n // initialize detail if editing\n this.initDetailIfNeeded();\n }\n\n componentDidUpdate(prevProps: ReactAntResourceFormProps) {\n const prevId = prevProps.params?.id;\n const curId = this.props.params?.id;\n // re-init when id changed or from create -> edit\n if (prevId !== curId) {\n this.initDetailIfNeeded();\n }\n }\n\n componentWillUnmount() {\n window.removeEventListener('keydown', this.handleKeydown);\n this._isMounted = false;\n }\n\n initDetailIfNeeded() {\n const { params, name } = this.props;\n const resourceShow = `${name}_show`;\n\n if (this.isEdit) {\n const payload = { id: params!.id };\n const _payload = this.handleStateRequest({ stage: 'show', payload });\n\n nx.$api[resourceShow](_payload)\n .then((res: any) => {\n if (!this._isMounted) return; // 👈 关键：防止操作已卸载组件\n const data = this.handleStateResponse({ stage: 'show', data: res });\n this.formInstance?.setFieldsValue?.(data);\n })\n .finally(() => {\n this.setState({ loading: false });\n this.setInitialValues();\n });\n } else {\n this.setInitialValues();\n }\n }\n\n render() {\n const {\n className,\n name,\n meta,\n children,\n lang,\n title,\n extra,\n size,\n okText,\n backText,\n okProps,\n backProps,\n classNames,\n params,\n transformRequest,\n transformResponse,\n disableHotkeySave,\n blocker,\n onInit,\n ...rest\n } = this.props;\n\n return (\n <Card\n title={this.titleView}\n extra={this.extraView}\n size={size}\n classNames={classNames}\n data-component={CLASS_NAME}\n data-blocker={blocker}\n className={cx(CLASS_NAME, className)}>\n <Spin spinning={this.state.loading}>\n <ReactAntdFormSchema\n meta={meta}\n ref={this.formRef}\n onValuesChange={this.handleValuesChange}\n onFinish={this.handleFinish}\n {...rest}>\n {this.childrenView}\n </ReactAntdFormSchema>\n </Spin>\n </Card>\n );\n }\n}\n\nconst ReactAntResourceFormFc: FC<ReactAntResourceFormProps> = (props) => {\n const params = useParams();\n return <ReactAntResourceForm params={params} {...props} />;\n};\n\nexport default ReactAntResourceForm;\nexport { ReactAntResourceFormFc };\n","export const API_FORM_LOCALES = {\n 'zh-CN': {\n create: '创建',\n update: '保存',\n create_title: '创建',\n update_title: '更新',\n create_success: '创建成功',\n update_success: '更新成功',\n submit: '提交',\n back: '返回',\n },\n 'en-US': {\n create: 'Create',\n update: 'Save',\n create_title: 'Create',\n update_title: 'Update',\n create_success: 'Create success',\n update_success: 'Update success',\n submit: 'Submit',\n back: 'Back',\n },\n};\n","import ReactAntResourceForm, { ReactAntResourceFormFc } from '.';\nimport type { ReactAntResourceFormProps } from '.';\n\nexport default ReactAntResourceForm;\nexport { ReactAntResourceFormFc };\nexport type { ReactAntResourceFormProps };\n"],"mappings":"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","names":["cx","React","Component","Button","Card","Space","message","Spin","ReactAntdFormSchema","ArrowLeftOutlined","DiffOutlined","SaveOutlined","API_FORM_LOCALES","create","update","create_title","update_title","create_success","update_success","submit","back","nx","useParams","deepEqual","CLASS_NAME","_a","ReactAntResourceForm","Component","props","formRef","React","createRef","_isMounted","_initialValues","handleBack","__name","history","back","setInitialValues","values","formInstance","getFieldsValue","handleFinish","params","name","resourceEdit","resourceCreate","isEdit","payload","__spreadValues","id","_payload","handleStateRequest","stage","nx","$api","then","res","message","success","t","handleStateResponse","data","finally","setState","loading","handleValuesChange","resetFields","handleKeydown","e","disableHotkeySave","ctrlKey","metaKey","key","preventDefault","submit","_","allValues","touched","deepEqual","state","bind","initDetailIfNeeded","onInit","Boolean","canSave","titleView","title","_title","Space","span","touchedView","em","style","color","DiffOutlined","extraView","extra","backText","backProps","Button","size","icon","ArrowLeftOutlined","onClick","childrenView","okText","okProps","children","_okText","disabled","htmlType","type","SaveOutlined","current","lang","API_FORM_LOCALES","stagePayload","_b","transformRequest","_c","_d","$event","emit","transformResponse","componentDidMount","window","addEventListener","componentDidUpdate","prevProps","prevId","curId","componentWillUnmount","removeEventListener","resourceShow","setFieldsValue","render","className","meta","classNames","blocker","rest","Card","data-component","data-blocker","cx","Spin","spinning","ReactAntdFormSchema","ref","onValuesChange","onFinish","__publicField","defaultProps","ReactAntResourceFormFc","useParams","index_default","main_default","ReactAntResourceForm"]}
|
package/dist/style.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
.react-ant-form-schema[data-blocker=true] .nice-form-layout{display:block!important}
|
|
2
2
|
/*# sourceMappingURL=src/style.scss.map */
|
package/dist/style.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","file":"src/style.scss"}
|
|
1
|
+
{"version":3,"sources":["src/style.scss"],"names":[],"mappings":"AAAA,4DACE,uBACF","file":"src/style.scss","sourcesContent":[".react-ant-form-schema[data-blocker=true] .nice-form-layout {\n display: block !important;\n}"]}
|
package/dist/style.scss
CHANGED
package/package.json
CHANGED
package/src/index.tsx
CHANGED
|
@@ -8,7 +8,7 @@ import { ArrowLeftOutlined, DiffOutlined, SaveOutlined } from '@ant-design/icons
|
|
|
8
8
|
import { API_FORM_LOCALES } from './locales';
|
|
9
9
|
import nx from '@jswork/next';
|
|
10
10
|
import { useParams } from 'react-router-dom';
|
|
11
|
-
import
|
|
11
|
+
import deepEqual from 'fast-deep-equal';
|
|
12
12
|
|
|
13
13
|
declare global {
|
|
14
14
|
interface NxStatic {
|
|
@@ -33,6 +33,7 @@ export type ReactAntResourceFormProps = {
|
|
|
33
33
|
okText?: string;
|
|
34
34
|
backText?: string;
|
|
35
35
|
params?: Record<string, any>;
|
|
36
|
+
blocker?: boolean;
|
|
36
37
|
disableHotkeySave?: boolean;
|
|
37
38
|
transformRequest?: (payload: StagePayload) => any;
|
|
38
39
|
transformResponse?: (res: StageData) => any;
|
|
@@ -79,8 +80,8 @@ class ReactAntResourceForm extends Component<ReactAntResourceFormProps, IState>
|
|
|
79
80
|
|
|
80
81
|
get canSave() {
|
|
81
82
|
const { touched, loading } = this.state;
|
|
82
|
-
if (!this.isEdit) return loading
|
|
83
|
-
return touched
|
|
83
|
+
if (!this.isEdit) return !loading;
|
|
84
|
+
return touched && !loading;
|
|
84
85
|
}
|
|
85
86
|
|
|
86
87
|
get titleView() {
|
|
@@ -162,6 +163,10 @@ class ReactAntResourceForm extends Component<ReactAntResourceFormProps, IState>
|
|
|
162
163
|
history.back();
|
|
163
164
|
};
|
|
164
165
|
|
|
166
|
+
private setInitialValues = (values?: any) => {
|
|
167
|
+
this._initialValues = values || this.formInstance?.getFieldsValue() || {};
|
|
168
|
+
};
|
|
169
|
+
|
|
165
170
|
handleStateRequest(stagePayload: StagePayload) {
|
|
166
171
|
this.setState({ loading: true });
|
|
167
172
|
return this.props.transformRequest?.(stagePayload) || stagePayload.payload;
|
|
@@ -190,7 +195,7 @@ class ReactAntResourceForm extends Component<ReactAntResourceFormProps, IState>
|
|
|
190
195
|
})
|
|
191
196
|
.finally(() => {
|
|
192
197
|
this.setState({ loading: false });
|
|
193
|
-
this.
|
|
198
|
+
this.setInitialValues();
|
|
194
199
|
this.handleValuesChange(null, this._initialValues);
|
|
195
200
|
});
|
|
196
201
|
} else {
|
|
@@ -215,19 +220,14 @@ class ReactAntResourceForm extends Component<ReactAntResourceFormProps, IState>
|
|
|
215
220
|
if (isSave) {
|
|
216
221
|
e.preventDefault();
|
|
217
222
|
if (!disableHotkeySave) {
|
|
218
|
-
|
|
219
|
-
try {
|
|
220
|
-
this.formInstance?.submit();
|
|
221
|
-
} catch (err) {
|
|
222
|
-
// ignore if submit not available yet
|
|
223
|
-
}
|
|
223
|
+
this.formInstance?.submit();
|
|
224
224
|
}
|
|
225
225
|
}
|
|
226
226
|
};
|
|
227
227
|
|
|
228
228
|
handleValuesChange = (_: any, allValues: any) => {
|
|
229
229
|
this.setState({
|
|
230
|
-
touched:
|
|
230
|
+
touched: !deepEqual(this._initialValues, allValues),
|
|
231
231
|
});
|
|
232
232
|
};
|
|
233
233
|
|
|
@@ -265,19 +265,14 @@ class ReactAntResourceForm extends Component<ReactAntResourceFormProps, IState>
|
|
|
265
265
|
.then((res: any) => {
|
|
266
266
|
if (!this._isMounted) return; // 👈 关键：防止操作已卸载组件
|
|
267
267
|
const data = this.handleStateResponse({ stage: 'show', data: res });
|
|
268
|
-
|
|
269
|
-
try {
|
|
270
|
-
this.formInstance?.setFieldsValue?.(data);
|
|
271
|
-
} catch (err) {
|
|
272
|
-
// ignore if not available yet
|
|
273
|
-
}
|
|
268
|
+
this.formInstance?.setFieldsValue?.(data);
|
|
274
269
|
})
|
|
275
270
|
.finally(() => {
|
|
276
271
|
this.setState({ loading: false });
|
|
277
|
-
this.
|
|
272
|
+
this.setInitialValues();
|
|
278
273
|
});
|
|
279
274
|
} else {
|
|
280
|
-
this.
|
|
275
|
+
this.setInitialValues();
|
|
281
276
|
}
|
|
282
277
|
}
|
|
283
278
|
|
|
@@ -300,6 +295,7 @@ class ReactAntResourceForm extends Component<ReactAntResourceFormProps, IState>
|
|
|
300
295
|
transformRequest,
|
|
301
296
|
transformResponse,
|
|
302
297
|
disableHotkeySave,
|
|
298
|
+
blocker,
|
|
303
299
|
onInit,
|
|
304
300
|
...rest
|
|
305
301
|
} = this.props;
|
|
@@ -311,6 +307,7 @@ class ReactAntResourceForm extends Component<ReactAntResourceFormProps, IState>
|
|
|
311
307
|
size={size}
|
|
312
308
|
classNames={classNames}
|
|
313
309
|
data-component={CLASS_NAME}
|
|
310
|
+
data-blocker={blocker}
|
|
314
311
|
className={cx(CLASS_NAME, className)}>
|
|
315
312
|
<Spin spinning={this.state.loading}>
|
|
316
313
|
<ReactAntdFormSchema
|
package/src/style.scss
CHANGED