v1.5.0

1. FormItem新增showRequiredMark属性 2. 细节调整
react-widget · Nov 8, 2019 · 58f5ec3 · 58f5ec3
1 parent 04399e9
commit 58f5ec3
Show file tree

Hide file tree

Showing 20 changed files with 111 additions and 46 deletions.
diff --git a/README.md b/README.md
@@ -91,6 +91,7 @@ labelPosition?: "top" | "left";
 labelAlign?: "left" | "right";
 controlStyle?: React.CSSProperties;
 controlClassName?: string;
+showRequiredMark?: boolean;
 required?: boolean;
 requiredMessage?: string;
 clearErrorOnFocus?: boolean;
@@ -275,6 +276,10 @@ $form-item-cls: nex-form-item;
         flex: none;
     }
 
+    &-label-left {
+        text-align: left;
+    }
+
     &-top {
         display: block;
     }
@@ -303,6 +308,7 @@ $form-item-cls: nex-form-item;
     }
 }
 
+
 ```
 
 

diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!doctype html><html style="width:100%;height:100%;overflow:auto"><head><meta charset="utf-8"><title>Layout</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"><style>.demo{width:1100px;height:500px;margin:50px auto;background:#fff;font-size:12px;overflow:auto}.rw-layout-content{height:200px}.rw-layout.rw-layout-has-sider{text-align:center;background:#3ba0e9}.rw-layout-sider{width:200px;text-align:center;background:#3ba0e9;color:#fff}.rw-layout-footer,.rw-layout-header{background:#7dbcea;color:#fff;height:64px;line-height:64px;text-align:center}.rw-layout-content{background:rgba(16,142,233,1);color:#fff;text-align:center}</style><link href="static/css/2.71a0092d.chunk.css" rel="stylesheet"><link href="static/css/index.b2e6f73b.chunk.css" rel="stylesheet"></head><body style="background:#f5f5f5"><div class="demo" id="demo"></div><script src="static/js/runtime~index.f795885b.js"></script><script src="static/js/2.71a0092d.chunk.js"></script><script src="static/js/index.b2e6f73b.chunk.js"></script></body></html>
+<!doctype html><html style="width:100%;height:100%;overflow:auto"><head><meta charset="utf-8"><title>Layout</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"><style>.demo{width:1100px;height:500px;margin:50px auto;background:#fff;font-size:12px;overflow:auto}.rw-layout-content{height:200px}.rw-layout.rw-layout-has-sider{text-align:center;background:#3ba0e9}.rw-layout-sider{width:200px;text-align:center;background:#3ba0e9;color:#fff}.rw-layout-footer,.rw-layout-header{background:#7dbcea;color:#fff;height:64px;line-height:64px;text-align:center}.rw-layout-content{background:rgba(16,142,233,1);color:#fff;text-align:center}</style><link href="static/css/2.71a0092d.chunk.css" rel="stylesheet"><link href="static/css/index.d7a93482.chunk.css" rel="stylesheet"></head><body style="background:#f5f5f5"><div class="demo" id="demo"></div><script src="static/js/runtime~index.f795885b.js"></script><script src="static/js/2.71a0092d.chunk.js"></script><script src="static/js/index.d7a93482.chunk.js"></script></body></html>
diff --git a/docs/manifest.json b/docs/manifest.json
@@ -1,6 +1,6 @@
 {
-  "index.css": "static/css/index.b2e6f73b.chunk.css",
-  "index.js": "static/js/index.b2e6f73b.chunk.js",
+  "index.css": "static/css/index.d7a93482.chunk.css",
+  "index.js": "static/js/index.d7a93482.chunk.js",
   "runtime~index.js": "static/js/runtime~index.f795885b.js",
   "static/css/2.71a0092d.chunk.css": "static/css/2.71a0092d.chunk.css",
   "static/js/2.71a0092d.chunk.js": "static/js/2.71a0092d.chunk.js",

diff --git a/docs/static/css/index.b2e6f73b.chunk.css → docs/static/css/index.d7a93482.chunk.css b/docs/static/css/index.b2e6f73b.chunk.css → docs/static/css/index.d7a93482.chunk.css
diff --git a/docs/static/js/index.b2e6f73b.chunk.js b/docs/static/js/index.b2e6f73b.chunk.js
diff --git a/docs/static/js/index.d7a93482.chunk.js b/docs/static/js/index.d7a93482.chunk.js
diff --git a/esm/Form.js b/esm/Form.js
@@ -41,6 +41,10 @@ function (_React$Component) {
       formValue: _this.props.defaultFormValue || {}
     });
 
+    _defineProperty(_assertThisInitialized(_this), "handleSubmit", function (e) {
+      e.preventDefault();
+    });
+
     return _this;
   }
 
@@ -63,7 +67,8 @@ function (_React$Component) {
     var idx = this.fields.indexOf(field);
 
     if (idx !== -1) {
-      var name = field.props.name;
+      var name = field.props.name; // eslint-disable-next-line
+
       this.state.formError[name] = null;
       this.fields.splice(idx, 1);
     }
@@ -75,11 +80,14 @@ function (_React$Component) {
       initialFormValue[field.props.name] = field._initialValue;
     });
     this.fieldLocks = {};
-    this.formLockId++;
-    this.state.validatingFields = {};
-    this.state.formValue = initialFormValue; // this.formError = {};
+    this.formLockId = 1; // eslint-disable-next-line
+
+    this.state.validatingFields = {}; // eslint-disable-next-line
+
+    this.state.formValue = initialFormValue; // eslint-disable-next-line
 
-    this.cleanErrors(); // this.setState({
+    this.state.formError = {}; // this.cleanErrors();
+    // this.setState({
     //     formError: {},
     //     validatingFields: {},
     //     formValue: initialFormValue
@@ -96,10 +104,12 @@ function (_React$Component) {
         initialValue = field._initialValue;
       }
     });
-    this.fieldLocks[name] = 1;
-    this.state.validatingFields[name] = false; // this.formError[name] = null;
+    this.fieldLocks[name] = 1; // eslint-disable-next-line
+
+    this.state.validatingFields[name] = false; // eslint-disable-next-line
+
+    this.state.formError[name] = null; // this.cleanError(name);
 
-    this.cleanError(name);
     this.setValue(name, initialValue, cb);
   };
 
@@ -435,6 +445,8 @@ function (_React$Component) {
     var validCounter = 0;
 
     var updateFormState = function updateFormState() {
+      if (lockId !== _this3.formLockId) return;
+
       _this3.setState({
         formError: formError,
         validatingFields: validatingFields
@@ -454,9 +466,12 @@ function (_React$Component) {
           callback(allErrors.length ? allErrors : null, formValue, true
           /* abort state */
           );
+          console.log("abort");
           return;
         }
 
+        console.log("validate");
+
         _this3.setState({
           formError: formError,
           validatingFields: {}
@@ -489,7 +504,6 @@ function (_React$Component) {
           asyncTimer = null;
           if (hasUpdate) return;
           hasUpdate = true;
-          if (lockId !== _this3.formLockId) return;
           updateFormState();
         }, asyncTestDelay);
 
@@ -560,7 +574,7 @@ function (_React$Component) {
     }, React.createElement(Component, {
       style: style,
       className: classnames(prefixCls, className),
-      onSubmit: onSubmit
+      onSubmit: onSubmit || this.handleSubmit
     }, typeof children === "function" ? children(this) : children));
   };
 

diff --git a/esm/FormItem.js b/esm/FormItem.js
@@ -251,7 +251,9 @@ function (_React$Component) {
   };
 
   _proto.getFormItemContext = function getFormItemContext() {
-    return Object.create(this);
+    return {
+      formItem: this
+    };
   };
 
   _proto.render = function render() {
@@ -262,6 +264,7 @@ function (_React$Component) {
     var _this$props2 = this.props,
         name = _this$props2.name,
         label = _this$props2.label,
+        showRequiredMark = _this$props2.showRequiredMark,
         required = _this$props2.required,
         className = _this$props2.className,
         prefixCls = _this$props2.prefixCls,
@@ -294,7 +297,7 @@ function (_React$Component) {
     }, React.createElement("div", {
       style: style,
       ref: this.saveDOM,
-      className: classnames(prefixCls, (_classnames = {}, _classnames[prefixCls + "-inline"] = inline, _classnames[prefixCls + "-" + labelPosition] = labelPosition, _classnames["has-error"] = hasError, _classnames["is-validating"] = isValidating, _classnames["is-required"] = required, _classnames["" + className] = className, _classnames))
+      className: classnames(prefixCls, (_classnames = {}, _classnames[prefixCls + "-inline"] = inline, _classnames[prefixCls + "-" + labelPosition] = labelPosition, _classnames["has-error"] = hasError, _classnames["is-validating"] = isValidating, _classnames["is-required"] = required || showRequiredMark, _classnames["" + className] = className, _classnames))
     }, label && React.createElement("label", {
       htmlFor: this.getProp("labelFor"),
       className: classnames((_classnames2 = {}, _classnames2[prefixCls + "-label"] = true, _classnames2[prefixCls + "-label-left"] = labelAlign === "left" && labelPosition === "left", _classnames2), this.getProp("labelClassName")),
@@ -327,6 +330,7 @@ FormItem.propTypes = process.env.NODE_ENV !== "production" ? {
   controlStyle: PropTypes.object,
   controlClassName: PropTypes.string,
   validator: PropTypes.oneOfType([PropTypes.func, PropTypes.array]),
+  showRequiredMark: PropTypes.bool,
   required: PropTypes.bool,
   requiredMessage: PropTypes.string,
   clearErrorOnFocus: PropTypes.bool,
@@ -338,6 +342,7 @@ FormItem.propTypes = process.env.NODE_ENV !== "production" ? {
   inline: PropTypes.bool
 } : {};
 FormItem.defaultProps = {
-  prefixCls: "nex-form-item"
+  prefixCls: "nex-form-item",
+  showRequiredMark: false
 };
 export default FormItem;
diff --git a/esm/index.d.ts b/esm/index.d.ts
@@ -63,6 +63,7 @@ declare namespace ReactWidgetForm {
         labelAlign?: "left" | "right";
         controlStyle?: React.CSSProperties;
         controlClassName?: string;
+        showRequiredMark?: boolean;
         required?: boolean;
         requiredMessage?: string;
         clearErrorOnFocus?: boolean;

diff --git a/esm/useFormItem.js b/esm/useFormItem.js
@@ -2,5 +2,6 @@
 import React from "react";
 import FormItemContext from "./FormItemContext";
 export default (function () {
-  return React.useContext(FormItemContext);
+  var context = React.useContext(FormItemContext);
+  return context.formItem;
 });
diff --git a/examples/demos/demo1.js b/examples/demos/demo1.js
@@ -65,7 +65,6 @@ export default class DEMO extends Component {
     };
 
     renderFieldExtra = component => {
-        console.log("update");
         return (
             <div
                 style={{

diff --git a/lib/Form.js b/lib/Form.js
@@ -54,6 +54,9 @@ function (_React$Component) {
       validatingFields: {},
       formValue: _this.props.defaultFormValue || {}
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSubmit", function (e) {
+      e.preventDefault();
+    });
     return _this;
   }
 
@@ -76,7 +79,8 @@ function (_React$Component) {
     var idx = this.fields.indexOf(field);
 
     if (idx !== -1) {
-      var name = field.props.name;
+      var name = field.props.name; // eslint-disable-next-line
+
       this.state.formError[name] = null;
       this.fields.splice(idx, 1);
     }
@@ -88,11 +92,14 @@ function (_React$Component) {
       initialFormValue[field.props.name] = field._initialValue;
     });
     this.fieldLocks = {};
-    this.formLockId++;
-    this.state.validatingFields = {};
-    this.state.formValue = initialFormValue; // this.formError = {};
+    this.formLockId = 1; // eslint-disable-next-line
+
+    this.state.validatingFields = {}; // eslint-disable-next-line
 
-    this.cleanErrors(); // this.setState({
+    this.state.formValue = initialFormValue; // eslint-disable-next-line
+
+    this.state.formError = {}; // this.cleanErrors();
+    // this.setState({
     //     formError: {},
     //     validatingFields: {},
     //     formValue: initialFormValue
@@ -109,10 +116,12 @@ function (_React$Component) {
         initialValue = field._initialValue;
       }
     });
-    this.fieldLocks[name] = 1;
-    this.state.validatingFields[name] = false; // this.formError[name] = null;
+    this.fieldLocks[name] = 1; // eslint-disable-next-line
+
+    this.state.validatingFields[name] = false; // eslint-disable-next-line
+
+    this.state.formError[name] = null; // this.cleanError(name);
 
-    this.cleanError(name);
     this.setValue(name, initialValue, cb);
   };
 
@@ -446,6 +455,8 @@ function (_React$Component) {
     var validCounter = 0;
 
     var updateFormState = function updateFormState() {
+      if (lockId !== _this3.formLockId) return;
+
       _this3.setState({
         formError: formError,
         validatingFields: validatingFields
@@ -465,9 +476,12 @@ function (_React$Component) {
           callback(allErrors.length ? allErrors : null, formValue, true
           /* abort state */
           );
+          console.log("abort");
           return;
         }
 
+        console.log("validate");
+
         _this3.setState({
           formError: formError,
           validatingFields: {}
@@ -500,7 +514,6 @@ function (_React$Component) {
           asyncTimer = null;
           if (hasUpdate) return;
           hasUpdate = true;
-          if (lockId !== _this3.formLockId) return;
           updateFormState();
         }, asyncTestDelay);
 
@@ -571,7 +584,7 @@ function (_React$Component) {
     }, _react.default.createElement(Component, {
       style: style,
       className: (0, _classnames.default)(prefixCls, className),
-      onSubmit: onSubmit
+      onSubmit: onSubmit || this.handleSubmit
     }, typeof children === "function" ? children(this) : children));
   };
 

diff --git a/lib/FormItem.js b/lib/FormItem.js
@@ -263,7 +263,9 @@ function (_React$Component) {
   };
 
   _proto.getFormItemContext = function getFormItemContext() {
-    return Object.create(this);
+    return {
+      formItem: this
+    };
   };
 
   _proto.render = function render() {
@@ -274,6 +276,7 @@ function (_React$Component) {
     var _this$props2 = this.props,
         name = _this$props2.name,
         label = _this$props2.label,
+        showRequiredMark = _this$props2.showRequiredMark,
         required = _this$props2.required,
         className = _this$props2.className,
         prefixCls = _this$props2.prefixCls,
@@ -306,7 +309,7 @@ function (_React$Component) {
     }, _react.default.createElement("div", {
       style: style,
       ref: this.saveDOM,
-      className: (0, _classnames3.default)(prefixCls, (_classnames = {}, _classnames[prefixCls + "-inline"] = inline, _classnames[prefixCls + "-" + labelPosition] = labelPosition, _classnames["has-error"] = hasError, _classnames["is-validating"] = isValidating, _classnames["is-required"] = required, _classnames["" + className] = className, _classnames))
+      className: (0, _classnames3.default)(prefixCls, (_classnames = {}, _classnames[prefixCls + "-inline"] = inline, _classnames[prefixCls + "-" + labelPosition] = labelPosition, _classnames["has-error"] = hasError, _classnames["is-validating"] = isValidating, _classnames["is-required"] = required || showRequiredMark, _classnames["" + className] = className, _classnames))
     }, label && _react.default.createElement("label", {
       htmlFor: this.getProp("labelFor"),
       className: (0, _classnames3.default)((_classnames2 = {}, _classnames2[prefixCls + "-label"] = true, _classnames2[prefixCls + "-label-left"] = labelAlign === "left" && labelPosition === "left", _classnames2), this.getProp("labelClassName")),
@@ -338,6 +341,7 @@ FormItem.propTypes = process.env.NODE_ENV !== "production" ? {
   controlStyle: _propTypes.default.object,
   controlClassName: _propTypes.default.string,
   validator: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.array]),
+  showRequiredMark: _propTypes.default.bool,
   required: _propTypes.default.bool,
   requiredMessage: _propTypes.default.string,
   clearErrorOnFocus: _propTypes.default.bool,
@@ -349,7 +353,8 @@ FormItem.propTypes = process.env.NODE_ENV !== "production" ? {
   inline: _propTypes.default.bool
 } : {};
 FormItem.defaultProps = {
-  prefixCls: "nex-form-item"
+  prefixCls: "nex-form-item",
+  showRequiredMark: false
 };
 var _default = FormItem;
 exports.default = _default;
diff --git a/lib/index.d.ts b/lib/index.d.ts
@@ -63,6 +63,7 @@ declare namespace ReactWidgetForm {
         labelAlign?: "left" | "right";
         controlStyle?: React.CSSProperties;
         controlClassName?: string;
+        showRequiredMark?: boolean;
         required?: boolean;
         requiredMessage?: string;
         clearErrorOnFocus?: boolean;

diff --git a/lib/useFormItem.js b/lib/useFormItem.js
@@ -13,7 +13,9 @@ var _react = _interopRequireDefault(require("react"));
 var _FormItemContext = _interopRequireDefault(require("./FormItemContext"));
 
 var _default = function _default() {
-  return _react.default.useContext(_FormItemContext.default);
+  var context = _react.default.useContext(_FormItemContext.default);
+
+  return context.formItem;
 };
 
 exports.default = _default;
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "react-widget-form",
-    "version": "1.4.0",
+    "version": "1.5.0",
     "description": "",
     "main": "lib/index.js",
     "module": "esm/index.js",