zerod 0.6.2 → 0.6.3

package/components/Zform/index.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import { Form, Modal, Input, Button, Row, Col, message, ConfigProvider } from 'antd';
 import zh_CN from 'antd/lib/locale-provider/zh_CN';
 import PropTypes from 'prop-types';
@@ -245,7 +246,30 @@ export const Zform = Form.create()(
                     return newValue;
                 }
             },
+            setErrorsId(rootEl, valuesIdMap) {
+                setTimeout(() => {
+                    let root = rootEl || this.currRootEl;
+
+                    if (root) {
+                        if (root.localName === 'td') {
+                            root = root.parentElement;
+                        }
+                        // console.dir(root);
+                        Object.keys(valuesIdMap).forEach((key) => {
+                            const inputEl = root.querySelector(`#${key}`);
+                            let parEl = inputEl.parentElement;
+                            while (parEl && !(parEl.className || '').includes('ant-form-item-control')) {
+                                parEl = parEl.parentElement;
+                            }
+                            if (parEl) {
+                                parEl.querySelector('.ant-form-explain').id = valuesIdMap[key];
+                            }
+                        });
+                    }
+                }, 100);
+            },
             setFieldsValue: (vals) => {
+                this.valuesIdMap = {};
                 const values = vals || this.props.values || this.props.formDefaultValues;
                 if (values) {
                     const saveSettingValues = { ...(this.state.saveSettingValues || {}), ...(values || {}) };
@@ -256,6 +280,7 @@ export const Zform = Form.create()(
                 const forms = !this.props.onlySetCurrentValues ? this.methods.getForms() : [this.form];
                 const otherFormItems = (this.props.getOtherFormItems && this.props.getOtherFormItems()) || [];
                 forms.forEach((form) => {
+                    const valuesIdMap = {};
                     const formItems = form.zformItems.concat(otherFormItems);
                     if (values && formItems.length) {
                         const newValues = {};
@@ -268,6 +293,7 @@ export const Zform = Form.create()(
                                     value: this.methods.treatValue({ key, value: value.value, formItems }),
                                     errors: value.errors.map((item) => new Error(item)),
                                 };
+                                valuesIdMap[key] = value.valueId;
                             } else if (value !== undefined) {
                                 newValues[key] = this.methods.treatValue({ key, value, formItems });
                             }
@@ -279,6 +305,7 @@ export const Zform = Form.create()(
                         if (Object.keys(newFields).length) {
                             form.setFields(newFields);
                         }
+                        this.methods.setErrorsId(form.zform.currRootEl, valuesIdMap);
                     }
                 });
             },
@@ -555,6 +582,7 @@ export const Zform = Form.create()(
                     saveOptionsMapKey: this.form.saveOptionsMapKey,
                     getAsyncQueue: () => this.allAsync,
                     saveSettingValues: this.state.saveSettingValues || {},
+                    zform: this,
                 };
                 this.prevSettingValues = this.state.saveSettingValues;
                 this.prevPropsForm = this.props.form;
@@ -599,7 +627,13 @@ export const Zform = Form.create()(
             const items = this.getFormItems();
             const wrapperClassname = classNames('z-form', className || '');
             return this.setAntdConfigProvider(
-                <Form onSubmit={this.methods.onSubmit} className={wrapperClassname} style={style}>
+                <Form
+                    ref={(el) => {
+                        this.currRootEl = ReactDOM.findDOMNode(el);
+                    }}
+                    onSubmit={this.methods.onSubmit}
+                    className={wrapperClassname}
+                    style={style}>
                     <Row type="flex" className={`z-form-row z-form-label-${labelLayout} z-form-control-${controlSize}`}>
                         {items}
                     </Row>
@@ -618,7 +652,15 @@ export const Zform = Form.create()(
             );
         }
         setAntdConfigProvider(children) {
-            return <ConfigProvider locale={zh_CN}>{children}</ConfigProvider>;
+            return (
+                <ConfigProvider
+                    ref={(el) => {
+                        this.currRootEl = ReactDOM.findDOMNode(el);
+                    }}
+                    locale={zh_CN}>
+                    {children}
+                </ConfigProvider>
+            );
         }
     },
 );

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "zerod",
-    "version": "0.6.2",
+    "version": "0.6.3",
     "description": "react+antd+scss的扩展组件，结合zerod-admin-web脚手架使用",
     "author": "zgt",
     "main": "index.js",