@jswork/react-ant-resource-form 1.0.18 → 1.0.19
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/dist/main.cjs.js +1 -1
- package/dist/main.cjs.js.map +1 -1
- package/dist/main.d.mts +7 -1
- package/dist/main.d.ts +7 -1
- package/dist/main.esm.js +1 -1
- package/dist/main.esm.js.map +1 -1
- package/package.json +4 -1
- package/src/index.tsx +57 -6
- package/src/hooks.ts +0 -27
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
|
|
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,w=Object.prototype.propertyIsEnumerable;var R=(a,s,e)=>s in a?E(a,s,{enumerable:!0,configurable:!0,writable:!0,value:e}):a[s]=e,m=(a,s)=>{for(var e in s||(s={}))b.call(s,e)&&R(a,e,s[e]);if(S)for(var e of S(s))w.call(s,e)&&R(a,e,s[e]);return a};var p=(a,s)=>E(a,"name",{value:s,configurable:!0});var V=(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&&w.call(a,t)&&(e[t]=a[t]);return e};var d=(a,s,e)=>R(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 x={"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 v="react-ant-resource-form",f,A=(f=class extends _react.Component{constructor(e){var t;super(e);d(this,"formRef",_react2.default.createRef());d(this,"_isMounted",!1);d(this,"_initialValues",null);d(this,"handleBack",p(()=>{history.back()},"handleBack"));d(this,"handleFinish",p(e=>{let{params:t,name:i}=this.props,n=`${i}_update`,o=`${i}_create`;if(this.isEdit){let l=m({id:t.id},e),h=this.handleStateRequest({stage:"update",payload:l});_next2.default.$api[n](h).then(c=>{_antd.message.success(this.t("update_success")),this.handleStateResponse({stage:"update",data:c})}).finally(()=>{var c;this.setState({loading:!1}),this._initialValues=((c=this.formInstance)==null?void 0:c.getFieldsValue())||{},this.handleValuesChange(null,this._initialValues)})}else{let l=m({},e),h=this.handleStateRequest({stage:"create",payload:l});_next2.default.$api[o](h).then(c=>{var u;_antd.message.success(this.t("create_success")),this.handleStateResponse({stage:"create",data:c}),(u=this.formInstance)==null||u.resetFields(),history.back()}).finally(()=>this.setState({loading:!1}))}},"handleFinish"));d(this,"handleKeydown",p(e=>{var n;let{disableHotkeySave:t}=this.props;if((e.ctrlKey||e.metaKey)&&(e.key==="s"||e.key==="S")&&(e.preventDefault(),!t))try{(n=this.formInstance)==null||n.submit()}catch(o){}},"handleKeydown"));d(this,"handleValuesChange",p((e,t)=>{this.setState({touched:_fastdeepequal2.default.call(void 0, this._initialValues,t)===!1})},"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===!0&&t===!1:t===!1}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,m({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:n,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,m({disabled:!this.canSave,htmlType:"submit",type:"primary",icon:_react2.default.createElement(_icons.SaveOutlined,null)},i),l||this.t("submit")),_react2.default.createElement(_antd.Button,m({icon:_react2.default.createElement(_icons.ArrowLeftOutlined,null),onClick:this.handleBack},n),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 x[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,n,o,l;let{name:t}=this.props;return this.setState({loading:!1}),(n=(i=_next2.default.$event)==null?void 0:i.emit)==null||n.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 n,o;let t=(n=e.params)==null?void 0:n.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(){var n;let{params:e,name:t}=this.props,i=`${t}_show`;if(this.isEdit){let o={id:e.id},l=this.handleStateRequest({stage:"show",payload:o});_next2.default.$api[i](l).then(h=>{var u,g;if(!this._isMounted)return;let c=this.handleStateResponse({stage:"show",data:h});try{(g=(u=this.formInstance)==null?void 0:u.setFieldsValue)==null||g.call(u,c)}catch(D){}}).finally(()=>{var h;this.setState({loading:!1}),this._initialValues=((h=this.formInstance)==null?void 0:h.getFieldsValue())||{}})}else this._initialValues=((n=this.formInstance)==null?void 0:n.getFieldsValue())||{}}render(){let y=this.props,{className:e,name:t,meta:i,children:n,lang:o,title:l,extra:h,size:c,okText:u,backText:g,okProps:D,backProps:W,classNames:q,params:j,transformRequest:G,transformResponse:J,disableHotkeySave:Q,onInit:X}=y,L=V(y,["className","name","meta","children","lang","title","extra","size","okText","backText","okProps","backProps","classNames","params","transformRequest","transformResponse","disableHotkeySave","onInit"]);return _react2.default.createElement(_antd.Card,{title:this.titleView,extra:this.extraView,size:c,classNames:q,"data-component":v,className:_classnames2.default.call(void 0, v,e)},_react2.default.createElement(_antd.Spin,{spinning:this.state.loading},_react2.default.createElement(_reactantformschema2.default,m({meta:i,ref:this.formRef,onValuesChange:this.handleValuesChange,onFinish:this.handleFinish},L),this.childrenView)))}},p(f,"ReactAntResourceForm"),d(f,"defaultProps",{lang:"zh-CN",disableHotkeySave:!1}),f),H= exports.ReactAntResourceFormFc =p(a=>{let s=_reactrouterdom.useParams.call(void 0, );return _react2.default.createElement(A,m({params:s},a))},"ReactAntResourceFormFc"),N=A;var ue=N;exports.ReactAntResourceFormFc = H; exports.default = ue;
|
|
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","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, SaveOutlined } from '@ant-design/icons';\nimport { API_FORM_LOCALES } from './locales';\nimport nx from '@jswork/next';\nimport { useParams } from 'react-router-dom';\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} & ReactAntdFormSchemaProps;\n\ntype IState = {\n loading: 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\n get isEdit() {\n const { params } = this.props;\n return Boolean(params?.id);\n }\n\n get titleView() {\n const { title } = this.props;\n return title || (this.isEdit ? this.t('update_title') : this.t('create_title'));\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 htmlType=\"submit\" type=\"primary\" icon={<SaveOutlined />} {...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 };\n\n this.handleStateRequest = this.handleStateRequest.bind(this);\n this.handleStateResponse = this.handleStateResponse.bind(this);\n this.initDetailIfNeeded = this.initDetailIfNeeded.bind(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(() => this.setState({ loading: false }));\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 isSave = (e.ctrlKey || e.metaKey) && (e.key === 's' || e.key === 'S');\n if (isSave) {\n e.preventDefault();\n if (!this.props.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 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(() => this.setState({ loading: false }));\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 ...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 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/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"]}
|
package/dist/main.d.mts
CHANGED
|
@@ -32,9 +32,11 @@ type ReactAntResourceFormProps = {
|
|
|
32
32
|
size?: CardProps['size'];
|
|
33
33
|
extra?: CardProps['extra'];
|
|
34
34
|
title?: CardProps['title'];
|
|
35
|
+
onInit?: (ctx: ReactAntResourceForm) => void;
|
|
35
36
|
} & ReactAntdFormSchemaProps;
|
|
36
37
|
type IState = {
|
|
37
38
|
loading: boolean;
|
|
39
|
+
touched: boolean;
|
|
38
40
|
};
|
|
39
41
|
/**
|
|
40
42
|
* 当前 card loading 不要直接使用,因为这个 loading 会导致 Card 里的 formRef 被设置成 null
|
|
@@ -52,8 +54,11 @@ declare class ReactAntResourceForm extends Component<ReactAntResourceFormProps,
|
|
|
52
54
|
};
|
|
53
55
|
private formRef;
|
|
54
56
|
private _isMounted;
|
|
57
|
+
private _initialValues;
|
|
55
58
|
get isEdit(): boolean;
|
|
56
|
-
get
|
|
59
|
+
get canSave(): boolean;
|
|
60
|
+
get titleView(): React.JSX.Element;
|
|
61
|
+
get touchedView(): React.JSX.Element | null;
|
|
57
62
|
get extraView(): string | number | true | Iterable<React.ReactNode> | React.JSX.Element;
|
|
58
63
|
get childrenView(): string | number | true | Iterable<React.ReactNode> | React.JSX.Element | ((values: rc_field_form_lib_interface.Store, form: rc_field_form_lib_interface.FormInstance) => JSX.Element | React.ReactNode);
|
|
59
64
|
get formInstance(): FormInstance<any> | null;
|
|
@@ -64,6 +69,7 @@ declare class ReactAntResourceForm extends Component<ReactAntResourceFormProps,
|
|
|
64
69
|
handleStateResponse(res: StageData): any;
|
|
65
70
|
handleFinish: (values: any) => void;
|
|
66
71
|
handleKeydown: (e: KeyboardEvent) => void;
|
|
72
|
+
handleValuesChange: (_: any, allValues: any) => void;
|
|
67
73
|
componentDidMount(): void;
|
|
68
74
|
componentDidUpdate(prevProps: ReactAntResourceFormProps): void;
|
|
69
75
|
componentWillUnmount(): void;
|
package/dist/main.d.ts
CHANGED
|
@@ -32,9 +32,11 @@ type ReactAntResourceFormProps = {
|
|
|
32
32
|
size?: CardProps['size'];
|
|
33
33
|
extra?: CardProps['extra'];
|
|
34
34
|
title?: CardProps['title'];
|
|
35
|
+
onInit?: (ctx: ReactAntResourceForm) => void;
|
|
35
36
|
} & ReactAntdFormSchemaProps;
|
|
36
37
|
type IState = {
|
|
37
38
|
loading: boolean;
|
|
39
|
+
touched: boolean;
|
|
38
40
|
};
|
|
39
41
|
/**
|
|
40
42
|
* 当前 card loading 不要直接使用,因为这个 loading 会导致 Card 里的 formRef 被设置成 null
|
|
@@ -52,8 +54,11 @@ declare class ReactAntResourceForm extends Component<ReactAntResourceFormProps,
|
|
|
52
54
|
};
|
|
53
55
|
private formRef;
|
|
54
56
|
private _isMounted;
|
|
57
|
+
private _initialValues;
|
|
55
58
|
get isEdit(): boolean;
|
|
56
|
-
get
|
|
59
|
+
get canSave(): boolean;
|
|
60
|
+
get titleView(): React.JSX.Element;
|
|
61
|
+
get touchedView(): React.JSX.Element | null;
|
|
57
62
|
get extraView(): string | number | true | Iterable<React.ReactNode> | React.JSX.Element;
|
|
58
63
|
get childrenView(): string | number | true | Iterable<React.ReactNode> | React.JSX.Element | ((values: rc_field_form_lib_interface.Store, form: rc_field_form_lib_interface.FormInstance) => JSX.Element | React.ReactNode);
|
|
59
64
|
get formInstance(): FormInstance<any> | null;
|
|
@@ -64,6 +69,7 @@ declare class ReactAntResourceForm extends Component<ReactAntResourceFormProps,
|
|
|
64
69
|
handleStateResponse(res: StageData): any;
|
|
65
70
|
handleFinish: (values: any) => void;
|
|
66
71
|
handleKeydown: (e: KeyboardEvent) => void;
|
|
72
|
+
handleValuesChange: (_: any, allValues: any) => void;
|
|
67
73
|
componentDidMount(): void;
|
|
68
74
|
componentDidUpdate(prevProps: ReactAntResourceFormProps): void;
|
|
69
75
|
componentWillUnmount(): void;
|
package/dist/main.esm.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var
|
|
1
|
+
var E=Object.defineProperty;var S=Object.getOwnPropertySymbols;var b=Object.prototype.hasOwnProperty,w=Object.prototype.propertyIsEnumerable;var R=(a,s,e)=>s in a?E(a,s,{enumerable:!0,configurable:!0,writable:!0,value:e}):a[s]=e,m=(a,s)=>{for(var e in s||(s={}))b.call(s,e)&&R(a,e,s[e]);if(S)for(var e of S(s))w.call(s,e)&&R(a,e,s[e]);return a};var p=(a,s)=>E(a,"name",{value:s,configurable:!0});var V=(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&&w.call(a,t)&&(e[t]=a[t]);return e};var d=(a,s,e)=>R(a,typeof s!="symbol"?s+"":s,e);import M from"classnames";import r,{Component as P}from"react";import{Button as k,Card as $,Space as I,message as C,Spin as O}from"antd";import T from"@jswork/react-ant-form-schema";import{ArrowLeftOutlined as F,DiffOutlined as B,SaveOutlined as z}from"@ant-design/icons";var x={"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 K}from"react-router-dom";import U from"fast-deep-equal";var v="react-ant-resource-form",f,A=(f=class extends P{constructor(e){var t;super(e);d(this,"formRef",r.createRef());d(this,"_isMounted",!1);d(this,"_initialValues",null);d(this,"handleBack",p(()=>{history.back()},"handleBack"));d(this,"handleFinish",p(e=>{let{params:t,name:i}=this.props,n=`${i}_update`,o=`${i}_create`;if(this.isEdit){let l=m({id:t.id},e),h=this.handleStateRequest({stage:"update",payload:l});_.$api[n](h).then(c=>{C.success(this.t("update_success")),this.handleStateResponse({stage:"update",data:c})}).finally(()=>{var c;this.setState({loading:!1}),this._initialValues=((c=this.formInstance)==null?void 0:c.getFieldsValue())||{},this.handleValuesChange(null,this._initialValues)})}else{let l=m({},e),h=this.handleStateRequest({stage:"create",payload:l});_.$api[o](h).then(c=>{var u;C.success(this.t("create_success")),this.handleStateResponse({stage:"create",data:c}),(u=this.formInstance)==null||u.resetFields(),history.back()}).finally(()=>this.setState({loading:!1}))}},"handleFinish"));d(this,"handleKeydown",p(e=>{var n;let{disableHotkeySave:t}=this.props;if((e.ctrlKey||e.metaKey)&&(e.key==="s"||e.key==="S")&&(e.preventDefault(),!t))try{(n=this.formInstance)==null||n.submit()}catch(o){}},"handleKeydown"));d(this,"handleValuesChange",p((e,t)=>{this.setState({touched:U(this._initialValues,t)===!1})},"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===!0&&t===!1:t===!1}get titleView(){let{title:e}=this.props,t=e||(this.isEdit?this.t("update_title"):this.t("create_title"));return r.createElement(I,null,t,r.createElement("span",null,this.touchedView))}get touchedView(){return this.isEdit&&this.state.touched?r.createElement("em",{style:{color:"#f60"}},r.createElement(B,null)):null}get extraView(){let{extra:e,backText:t,backProps:i}=this.props;return e||r.createElement(k,m({size:"small",icon:r.createElement(F,null),onClick:this.handleBack},i),t||this.t("back"))}get childrenView(){let{okText:e,backText:t,okProps:i,backProps:n,children:o}=this.props,l=e||(this.isEdit?this.t("update"):this.t("create"));return o||r.createElement(I,null,r.createElement(k,m({disabled:!this.canSave,htmlType:"submit",type:"primary",icon:r.createElement(z,null)},i),l||this.t("submit")),r.createElement(k,m({icon:r.createElement(F,null),onClick:this.handleBack},n),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 x[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,n,o,l;let{name:t}=this.props;return this.setState({loading:!1}),(n=(i=_.$event)==null?void 0:i.emit)==null||n.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 n,o;let t=(n=e.params)==null?void 0:n.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(){var n;let{params:e,name:t}=this.props,i=`${t}_show`;if(this.isEdit){let o={id:e.id},l=this.handleStateRequest({stage:"show",payload:o});_.$api[i](l).then(h=>{var u,g;if(!this._isMounted)return;let c=this.handleStateResponse({stage:"show",data:h});try{(g=(u=this.formInstance)==null?void 0:u.setFieldsValue)==null||g.call(u,c)}catch(D){}}).finally(()=>{var h;this.setState({loading:!1}),this._initialValues=((h=this.formInstance)==null?void 0:h.getFieldsValue())||{}})}else this._initialValues=((n=this.formInstance)==null?void 0:n.getFieldsValue())||{}}render(){let y=this.props,{className:e,name:t,meta:i,children:n,lang:o,title:l,extra:h,size:c,okText:u,backText:g,okProps:D,backProps:W,classNames:q,params:j,transformRequest:G,transformResponse:J,disableHotkeySave:Q,onInit:X}=y,L=V(y,["className","name","meta","children","lang","title","extra","size","okText","backText","okProps","backProps","classNames","params","transformRequest","transformResponse","disableHotkeySave","onInit"]);return r.createElement($,{title:this.titleView,extra:this.extraView,size:c,classNames:q,"data-component":v,className:M(v,e)},r.createElement(O,{spinning:this.state.loading},r.createElement(T,m({meta:i,ref:this.formRef,onValuesChange:this.handleValuesChange,onFinish:this.handleFinish},L),this.childrenView)))}},p(f,"ReactAntResourceForm"),d(f,"defaultProps",{lang:"zh-CN",disableHotkeySave:!1}),f),H=p(a=>{let s=K();return r.createElement(A,m({params:s},a))},"ReactAntResourceFormFc"),N=A;var ue=N;export{H as ReactAntResourceFormFc,ue 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, SaveOutlined } from '@ant-design/icons';\nimport { API_FORM_LOCALES } from './locales';\nimport nx from '@jswork/next';\nimport { useParams } from 'react-router-dom';\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} & ReactAntdFormSchemaProps;\n\ntype IState = {\n loading: 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\n get isEdit() {\n const { params } = this.props;\n return Boolean(params?.id);\n }\n\n get titleView() {\n const { title } = this.props;\n return title || (this.isEdit ? this.t('update_title') : this.t('create_title'));\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 htmlType=\"submit\" type=\"primary\" icon={<SaveOutlined />} {...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 };\n\n this.handleStateRequest = this.handleStateRequest.bind(this);\n this.handleStateResponse = this.handleStateResponse.bind(this);\n this.initDetailIfNeeded = this.initDetailIfNeeded.bind(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(() => this.setState({ loading: false }));\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 isSave = (e.ctrlKey || e.metaKey) && (e.key === 's' || e.key === 'S');\n if (isSave) {\n e.preventDefault();\n if (!this.props.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 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(() => this.setState({ loading: false }));\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 ...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 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","SaveOutlined","API_FORM_LOCALES","create","update","create_title","update_title","create_success","update_success","submit","back","nx","useParams","CLASS_NAME","_a","ReactAntResourceForm","Component","props","formRef","React","createRef","_isMounted","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","resetFields","handleKeydown","e","ctrlKey","metaKey","key","preventDefault","disableHotkeySave","submit","err","state","bind","initDetailIfNeeded","Boolean","titleView","title","extraView","extra","backText","backProps","Button","size","icon","ArrowLeftOutlined","onClick","childrenView","okText","okProps","children","_okText","Space","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","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 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"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jswork/react-ant-resource-form",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.19",
|
|
4
4
|
"main": "dist/main.cjs.js",
|
|
5
5
|
"module": "dist/main.esm.js",
|
|
6
6
|
"types": "dist/main.d.ts",
|
|
@@ -16,6 +16,9 @@
|
|
|
16
16
|
"postbuild": "postsass -s src/style.scss -d dist/style.css -c",
|
|
17
17
|
"release": "release-it"
|
|
18
18
|
},
|
|
19
|
+
"dependencies": {
|
|
20
|
+
"fast-deep-equal": "^3.1.3"
|
|
21
|
+
},
|
|
19
22
|
"devDependencies": {
|
|
20
23
|
"@ant-design/icons": "^6.1.0",
|
|
21
24
|
"@jswork/next": "^1.4.2",
|
package/src/index.tsx
CHANGED
|
@@ -4,10 +4,11 @@ import React, { Component, FC } from 'react';
|
|
|
4
4
|
import { Button, ButtonProps, Card, CardProps, Space, message, Spin } from 'antd';
|
|
5
5
|
import type { FormInstance } from 'antd';
|
|
6
6
|
import ReactAntdFormSchema, { ReactAntdFormSchemaProps } from '@jswork/react-ant-form-schema';
|
|
7
|
-
import { ArrowLeftOutlined, SaveOutlined } from '@ant-design/icons';
|
|
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 fde from 'fast-deep-equal';
|
|
11
12
|
|
|
12
13
|
declare global {
|
|
13
14
|
interface NxStatic {
|
|
@@ -41,10 +42,12 @@ export type ReactAntResourceFormProps = {
|
|
|
41
42
|
size?: CardProps['size'];
|
|
42
43
|
extra?: CardProps['extra'];
|
|
43
44
|
title?: CardProps['title'];
|
|
45
|
+
onInit?: (ctx: ReactAntResourceForm) => void;
|
|
44
46
|
} & ReactAntdFormSchemaProps;
|
|
45
47
|
|
|
46
48
|
type IState = {
|
|
47
49
|
loading: boolean;
|
|
50
|
+
touched: boolean;
|
|
48
51
|
};
|
|
49
52
|
|
|
50
53
|
const CLASS_NAME = 'react-ant-resource-form';
|
|
@@ -67,15 +70,37 @@ class ReactAntResourceForm extends Component<ReactAntResourceFormProps, IState>
|
|
|
67
70
|
|
|
68
71
|
private formRef = React.createRef<FormInstance>(); // 注意类型
|
|
69
72
|
private _isMounted = false;
|
|
73
|
+
private _initialValues = null;
|
|
70
74
|
|
|
71
75
|
get isEdit() {
|
|
72
76
|
const { params } = this.props;
|
|
73
77
|
return Boolean(params?.id);
|
|
74
78
|
}
|
|
75
79
|
|
|
80
|
+
get canSave() {
|
|
81
|
+
const { touched, loading } = this.state;
|
|
82
|
+
if (!this.isEdit) return loading === false;
|
|
83
|
+
return touched === true && loading === false;
|
|
84
|
+
}
|
|
85
|
+
|
|
76
86
|
get titleView() {
|
|
77
87
|
const { title } = this.props;
|
|
78
|
-
|
|
88
|
+
const _title = title || (this.isEdit ? this.t('update_title') : this.t('create_title'));
|
|
89
|
+
return (
|
|
90
|
+
<Space>
|
|
91
|
+
{_title}
|
|
92
|
+
<span>{this.touchedView}</span>
|
|
93
|
+
</Space>
|
|
94
|
+
);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
get touchedView() {
|
|
98
|
+
if (!this.isEdit) return null;
|
|
99
|
+
return this.state.touched ? (
|
|
100
|
+
<em style={{ color: '#f60' }}>
|
|
101
|
+
<DiffOutlined />
|
|
102
|
+
</em>
|
|
103
|
+
) : null;
|
|
79
104
|
}
|
|
80
105
|
|
|
81
106
|
get extraView() {
|
|
@@ -95,7 +120,12 @@ class ReactAntResourceForm extends Component<ReactAntResourceFormProps, IState>
|
|
|
95
120
|
|
|
96
121
|
return (
|
|
97
122
|
<Space>
|
|
98
|
-
<Button
|
|
123
|
+
<Button
|
|
124
|
+
disabled={!this.canSave}
|
|
125
|
+
htmlType="submit"
|
|
126
|
+
type="primary"
|
|
127
|
+
icon={<SaveOutlined />}
|
|
128
|
+
{...okProps}>
|
|
99
129
|
{_okText || this.t('submit')}
|
|
100
130
|
</Button>
|
|
101
131
|
<Button icon={<ArrowLeftOutlined />} onClick={this.handleBack} {...backProps}>
|
|
@@ -113,11 +143,14 @@ class ReactAntResourceForm extends Component<ReactAntResourceFormProps, IState>
|
|
|
113
143
|
super(props);
|
|
114
144
|
this.state = {
|
|
115
145
|
loading: false,
|
|
146
|
+
touched: false,
|
|
116
147
|
};
|
|
117
148
|
|
|
118
149
|
this.handleStateRequest = this.handleStateRequest.bind(this);
|
|
119
150
|
this.handleStateResponse = this.handleStateResponse.bind(this);
|
|
120
151
|
this.initDetailIfNeeded = this.initDetailIfNeeded.bind(this);
|
|
152
|
+
|
|
153
|
+
props.onInit?.(this);
|
|
121
154
|
}
|
|
122
155
|
|
|
123
156
|
private t(key: string) {
|
|
@@ -155,7 +188,11 @@ class ReactAntResourceForm extends Component<ReactAntResourceFormProps, IState>
|
|
|
155
188
|
message.success(this.t('update_success'));
|
|
156
189
|
this.handleStateResponse({ stage: 'update', data: res });
|
|
157
190
|
})
|
|
158
|
-
.finally(() =>
|
|
191
|
+
.finally(() => {
|
|
192
|
+
this.setState({ loading: false });
|
|
193
|
+
this._initialValues = this.formInstance?.getFieldsValue() || {};
|
|
194
|
+
this.handleValuesChange(null, this._initialValues);
|
|
195
|
+
});
|
|
159
196
|
} else {
|
|
160
197
|
const payload = { ...values };
|
|
161
198
|
const _payload = this.handleStateRequest({ stage: 'create', payload });
|
|
@@ -173,10 +210,11 @@ class ReactAntResourceForm extends Component<ReactAntResourceFormProps, IState>
|
|
|
173
210
|
|
|
174
211
|
// hotkey save handler (replaces useKeyboardSave hook)
|
|
175
212
|
handleKeydown = (e: KeyboardEvent) => {
|
|
213
|
+
const { disableHotkeySave } = this.props;
|
|
176
214
|
const isSave = (e.ctrlKey || e.metaKey) && (e.key === 's' || e.key === 'S');
|
|
177
215
|
if (isSave) {
|
|
178
216
|
e.preventDefault();
|
|
179
|
-
if (!
|
|
217
|
+
if (!disableHotkeySave) {
|
|
180
218
|
// submit the form via ref
|
|
181
219
|
try {
|
|
182
220
|
this.formInstance?.submit();
|
|
@@ -187,6 +225,12 @@ class ReactAntResourceForm extends Component<ReactAntResourceFormProps, IState>
|
|
|
187
225
|
}
|
|
188
226
|
};
|
|
189
227
|
|
|
228
|
+
handleValuesChange = (_: any, allValues: any) => {
|
|
229
|
+
this.setState({
|
|
230
|
+
touched: fde(this._initialValues, allValues) === false,
|
|
231
|
+
});
|
|
232
|
+
};
|
|
233
|
+
|
|
190
234
|
componentDidMount() {
|
|
191
235
|
this._isMounted = true;
|
|
192
236
|
// attach hotkey listener
|
|
@@ -228,7 +272,12 @@ class ReactAntResourceForm extends Component<ReactAntResourceFormProps, IState>
|
|
|
228
272
|
// ignore if not available yet
|
|
229
273
|
}
|
|
230
274
|
})
|
|
231
|
-
.finally(() =>
|
|
275
|
+
.finally(() => {
|
|
276
|
+
this.setState({ loading: false });
|
|
277
|
+
this._initialValues = this.formInstance?.getFieldsValue() || {};
|
|
278
|
+
});
|
|
279
|
+
} else {
|
|
280
|
+
this._initialValues = this.formInstance?.getFieldsValue() || {};
|
|
232
281
|
}
|
|
233
282
|
}
|
|
234
283
|
|
|
@@ -251,6 +300,7 @@ class ReactAntResourceForm extends Component<ReactAntResourceFormProps, IState>
|
|
|
251
300
|
transformRequest,
|
|
252
301
|
transformResponse,
|
|
253
302
|
disableHotkeySave,
|
|
303
|
+
onInit,
|
|
254
304
|
...rest
|
|
255
305
|
} = this.props;
|
|
256
306
|
|
|
@@ -266,6 +316,7 @@ class ReactAntResourceForm extends Component<ReactAntResourceFormProps, IState>
|
|
|
266
316
|
<ReactAntdFormSchema
|
|
267
317
|
meta={meta}
|
|
268
318
|
ref={this.formRef}
|
|
319
|
+
onValuesChange={this.handleValuesChange}
|
|
269
320
|
onFinish={this.handleFinish}
|
|
270
321
|
{...rest}>
|
|
271
322
|
{this.childrenView}
|
package/src/hooks.ts
DELETED
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { useEffect, useCallback } from 'react';
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* 这个Hook此项目已经用不到了,不过,如果后面当前组件需要改写成 functional 的形式,需要用到
|
|
5
|
-
* 暂时可以保留
|
|
6
|
-
* @param callback
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
export const useKeyboardSave = (callback: (e: KeyboardEvent) => void) => {
|
|
10
|
-
const handler = useCallback(
|
|
11
|
-
(e: KeyboardEvent) => {
|
|
12
|
-
// 使用 code 更可靠(不受键盘布局或大小写影响)
|
|
13
|
-
if ((e.ctrlKey || e.metaKey) && e.code === 'KeyS') {
|
|
14
|
-
e.preventDefault();
|
|
15
|
-
callback(e);
|
|
16
|
-
}
|
|
17
|
-
},
|
|
18
|
-
[callback] // 确保 handler 随 callback 更新而更新
|
|
19
|
-
);
|
|
20
|
-
|
|
21
|
-
useEffect(() => {
|
|
22
|
-
document.addEventListener('keydown', handler);
|
|
23
|
-
return () => {
|
|
24
|
-
document.removeEventListener('keydown', handler);
|
|
25
|
-
};
|
|
26
|
-
}, [handler]); // handler 是 useCallback 包装的,稳定依赖
|
|
27
|
-
};
|