v1.2.0

1. 新增labelAlign属性 2. normalizeFieldValue属性
react-widget · Nov 7, 2019 · 1b74f4a · 1b74f4a
1 parent 6e0187d
commit 1b74f4a
Show file tree

Hide file tree

Showing 15 changed files with 303 additions and 118 deletions.
diff --git a/README.md b/README.md
@@ -60,10 +60,12 @@ labelWidth?: string | number;
 labelClassName?: string;
 labelStyle?: React.CSSProperties;
 labelPosition?: "top" | "left";
+labelAlign?: "left" | "right";
 controlStyle?: React.CSSProperties;
 controlClassName?: string;
 clearErrorOnFocus?: boolean;
 inline?: boolean;
+normalizeFieldValue?: (value: any, prevValue: any, formValue: {}) => any;
 onSubmit?: (e: React.SyntheticEvent) => void;
 onChange?: (formValue: {}) => void;
 getInputProps?: (component: FormItem) => {};
@@ -86,12 +88,13 @@ labelWidth?: string | number;
 labelClassName?: string;
 labelStyle?: React.CSSProperties;
 labelPosition?: "top" | "left";
+labelAlign?: "left" | "right";
 controlStyle?: React.CSSProperties;
 controlClassName?: string;
 required?: boolean;
 requiredMessage?: string;
 clearErrorOnFocus?: boolean;
-normalize?: (value: any) => any;
+normalize?: (value: any, prevValue: any, formValue: {}) => any;
 renderExtra?: (component: FormItem) => React.ReactNode;
 validateDelay?: number;
 validateTrigger?: ValidateTriggerType | ValidateTriggerType[];

diff --git a/esm/Form.js b/esm/Form.js
@@ -67,27 +67,35 @@ function (_React$Component) {
     }
   };
 
-  _proto.getValue = function getValue(name) {
-    var getDefaultFieldValue = this.props.getDefaultFieldValue;
-    var path2obj = this.props.path2obj;
-    var formValue = this.state.formValue;
-    var value = path2obj ? get(formValue, name) : formValue[name];
-    return value === undefined && getDefaultFieldValue ? getDefaultFieldValue(name) : value;
+  _proto.getFormValue = function getFormValue() {
+    return this.state.formValue;
   };
 
-  _proto.setValue = function setValue(name, value, cb) {
+  _proto.getValues = function getValues() {
+    return this.state.formValue;
+  };
+
+  _proto.setValues = function setValues(obj, cb) {
+    if (obj === void 0) {
+      obj = {};
+    }
+
     var _this$props = this.props,
         path2obj = _this$props.path2obj,
         onChange = _this$props.onChange;
-    var formValue = this.state.formValue; // TODO: 后面再考虑下特殊场景
+    var formValue = this.state.formValue;
 
     var nextFormValue = _extends({}, formValue);
 
-    if (path2obj) {
-      set(nextFormValue, name, value);
-    } else {
-      nextFormValue[name] = value;
-    }
+    Object.keys(obj).forEach(function (name) {
+      var value = obj[name];
+
+      if (path2obj) {
+        set(nextFormValue, name, value);
+      } else {
+        nextFormValue[name] = value;
+      }
+    });
 
     if (!("formValue" in this.props)) {
       this.setState({
@@ -104,27 +112,31 @@ function (_React$Component) {
     }
   };
 
-  _proto.setValues = function setValues(obj, cb) {
-    if (obj === void 0) {
-      obj = {};
-    }
+  _proto.setFormValue = function setFormValue(formValue, cb) {
+    return this.setValues(formValue, cb);
+  };
+
+  _proto.getValue = function getValue(name) {
+    var getDefaultFieldValue = this.props.getDefaultFieldValue;
+    var path2obj = this.props.path2obj;
+    var formValue = this.state.formValue;
+    var value = path2obj ? get(formValue, name) : formValue[name];
+    return value === undefined && getDefaultFieldValue ? getDefaultFieldValue(name, formValue) : value;
+  };
 
+  _proto.setValue = function setValue(name, value, cb) {
     var _this$props2 = this.props,
         path2obj = _this$props2.path2obj,
         onChange = _this$props2.onChange;
-    var formValue = this.state.formValue;
+    var formValue = this.state.formValue; // TODO: 后面再考虑下特殊场景
 
     var nextFormValue = _extends({}, formValue);
 
-    Object.keys(obj).forEach(function (name) {
-      var value = obj[name];
-
-      if (path2obj) {
-        set(nextFormValue, name, value);
-      } else {
-        nextFormValue[name] = value;
-      }
-    });
+    if (path2obj) {
+      set(nextFormValue, name, value);
+    } else {
+      nextFormValue[name] = value;
+    }
 
     if (!("formValue" in this.props)) {
       this.setState({
@@ -141,6 +153,14 @@ function (_React$Component) {
     }
   };
 
+  _proto.getFieldValue = function getFieldValue(name) {
+    return this.getValue(name);
+  };
+
+  _proto.setFieldValue = function setFieldValue(name, value, cb) {
+    return this.setValue(name, value, cb);
+  };
+
   _proto.componentDidUpdate = function componentDidUpdate() {
     var formValue = this.state.formValue;
     var validateProcess = this._validateCb;
@@ -529,10 +549,12 @@ Form.propTypes = process.env.NODE_ENV !== "production" ? {
   labelStyle: PropTypes.object,
   labelClassName: PropTypes.string,
   labelPosition: PropTypes.oneOf(["top", "left"]),
+  labelAlign: PropTypes.oneOf(["left", "right"]),
   controlStyle: PropTypes.object,
   controlClassName: PropTypes.string,
   clearErrorOnFocus: PropTypes.bool,
   inline: PropTypes.bool,
+  normalizeFieldValue: PropTypes.func,
   onSubmit: PropTypes.func,
   onChange: PropTypes.func,
   getInputProps: PropTypes.func
@@ -546,8 +568,10 @@ Form.defaultProps = {
   component: "form",
   asyncTestDelay: 100,
   validateDelay: 0,
-  validateTrigger: ["blur", "change"],
+  validateTrigger: ["change"],
+  //"blur",
   labelPosition: "left",
+  labelAlign: "right",
   clearErrorOnFocus: true,
   inline: false
 };

diff --git a/esm/FormItem.js b/esm/FormItem.js
@@ -182,16 +182,29 @@ function (_React$Component) {
         _onChange = _this$props.onChange,
         _onFocus = _this$props.onFocus,
         _onBlur = _this$props.onBlur;
-    var getInputProps = this.getFormProps("getInputProps", function () {
+    var form = this.getForm();
+
+    var _normalize = this.getFormProp("normalizeFieldValue");
+
+    if (_normalize && !normalize) {
+      normalize = _normalize.bind(null, name);
+    }
+
+    var getInputProps = this.getFormProp("getInputProps", function () {
       return {};
     });
-    var customProps = getInputProps(this);
+    var customProps = getInputProps(this); //valueTrigger 	收集子节点的值的时机 待开发...
+
     return _extends({
       value: this.getValue()
     }, customProps, {
       onChange: function onChange(value) {
+        var formValue = form.getFormValue();
+
+        var prevValue = _this3.getValue();
+
         if (normalize) {
-          value = normalize(value);
+          value = normalize(value, prevValue, formValue);
         }
 
         _this3.handleChange(value, function () {
@@ -218,7 +231,7 @@ function (_React$Component) {
     return React.cloneElement(React.Children.only(this.props.children), this.normalizeChildrenProps());
   };
 
-  _proto.getFormProps = function getFormProps(prop, defaultValue) {
+  _proto.getFormProp = function getFormProp(prop, defaultValue) {
     var form = this.getForm();
     var formProps = form.props;
     return formProps[prop] || defaultValue;
@@ -237,7 +250,8 @@ function (_React$Component) {
 
   _proto.render = function render() {
     var _this4 = this,
-        _classnames;
+        _classnames,
+        _classnames2;
 
     var _this$props2 = this.props,
         name = _this$props2.name,
@@ -250,8 +264,9 @@ function (_React$Component) {
         children = _this$props2.children;
     var inline = this.getProp("inline");
     var labelPosition = this.getProp("labelPosition");
+    var labelAlign = this.getProp("labelAlign");
 
-    var _renderControlExtra = this.getFormProps("renderControlExtra");
+    var _renderControlExtra = this.getFormProp("renderControlExtra");
 
     var renderControlExtra = function renderControlExtra() {
       if (renderExtra) {
@@ -276,7 +291,7 @@ function (_React$Component) {
       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))
     }, label && React.createElement("label", {
       htmlFor: this.getProp("labelFor"),
-      className: classnames(prefixCls + "-label", this.getProp("labelClassName")),
+      className: classnames((_classnames2 = {}, _classnames2[prefixCls + "-label"] = true, _classnames2[prefixCls + "-label-left"] = labelAlign === "left" && labelPosition === "left", _classnames2), this.getProp("labelClassName")),
       style: _extends({
         width: this.getProp("labelWidth")
       }, this.getProp("labelStyle", {}))
@@ -302,6 +317,7 @@ FormItem.propTypes = process.env.NODE_ENV !== "production" ? {
   labelStyle: PropTypes.object,
   labelClassName: PropTypes.string,
   labelPosition: PropTypes.oneOf(["top", "left"]),
+  labelAlign: PropTypes.oneOf(["left", "right"]),
   controlStyle: PropTypes.object,
   controlClassName: PropTypes.string,
   validator: PropTypes.oneOfType([PropTypes.func, PropTypes.array]),
@@ -312,6 +328,7 @@ FormItem.propTypes = process.env.NODE_ENV !== "production" ? {
   renderExtra: PropTypes.func,
   validateDelay: PropTypes.number,
   validateTrigger: PropTypes.oneOf(["blur", "change"]),
+  // onBlur onChange
   inline: PropTypes.bool
 } : {};
 FormItem.defaultProps = {

diff --git a/esm/index.d.ts b/esm/index.d.ts
@@ -16,7 +16,7 @@ declare namespace ReactWidgetForm {
         path2obj?: boolean;
         defaultFormValue?: {};
         formValue?: {};
-        getDefaultFieldValue?: (name: string) => any;
+        getDefaultFieldValue?: (name: string, formValue: {}) => any;
         renderControlExtra?: (component: FormItem) => React.ReactNode;
         validators?: {
             [name: string]: Validator | Validator[];
@@ -30,10 +30,17 @@ declare namespace ReactWidgetForm {
         labelClassName?: string;
         labelStyle?: React.CSSProperties;
         labelPosition?: "top" | "left";
+        labelAlign?: "left" | "right";
         controlStyle?: React.CSSProperties;
         controlClassName?: string;
         clearErrorOnFocus?: boolean;
         inline?: boolean;
+        normalizeFieldValue?: (
+            name: string,
+            value: any,
+            prevValue: any,
+            formValue: {}
+        ) => any;
         onSubmit?: (e: React.SyntheticEvent) => void;
         onChange?: (formValue: {}) => void;
         getInputProps?: (component: FormItem) => {};
@@ -53,12 +60,13 @@ declare namespace ReactWidgetForm {
         labelClassName?: string;
         labelStyle?: React.CSSProperties;
         labelPosition?: "top" | "left";
+        labelAlign?: "left" | "right";
         controlStyle?: React.CSSProperties;
         controlClassName?: string;
         required?: boolean;
         requiredMessage?: string;
         clearErrorOnFocus?: boolean;
-        normalize?: (value: any) => any;
+        normalize?: (value: any, prevValue: any, formValue: {}) => any;
         renderExtra?: (component: FormItem) => React.ReactNode;
         validateDelay?: number;
         validateTrigger?: ValidateTriggerType | ValidateTriggerType[];
@@ -89,13 +97,22 @@ declare namespace ReactWidgetForm {
     }
 
     export class Form extends React.Component<FormProps, {}> {
+        getFormValue(): {};
+        getValues(): {};
+        setFormValue(formValue: {}, callback: (formValue: {}) => void): void;
+        setValues(formValue: {}, callback: (formValue: {}) => void): void;
         getValue(name: string): any;
+        getFieldValue(name: string): any;
         setValue(
             name: string,
             value: any,
             callback: (formValue: {}) => void
         ): void;
-        setValues(formValue: {}, callback: (formValue: {}) => void): void;
+        setFieldValue(
+            name: string,
+            value: any,
+            callback: (formValue: {}) => void
+        ): void;
         hasError(name: string): boolean;
         getError(name: string): any;
         cleanError(name: string): void;

diff --git a/esm/style/index.css b/esm/style/index.css
@@ -6,6 +6,8 @@
   .nex-form-item-label {
     text-align: right;
     flex: none; }
+  .nex-form-item-label-left {
+    text-align: left; }
   .nex-form-item-top {
     display: block; }
   .nex-form-item-top.nex-form-item-inline {

diff --git a/examples/demos/demo1.js b/examples/demos/demo1.js
@@ -79,10 +79,11 @@ export default class DEMO extends Component {
             <div>
                 <Form
                     labelWidth={80}
-                    validateTrigger={["change", "blur"]}
+                    // validateTrigger={["change", "blur"]}
                     getDefaultFieldValue={() => ""}
                     requiredMessage="不能为空"
                     ref={form => (this.form = form)}
+                    labelAlign="right"
                     // formValue={formValue}
                     onChange={formValue => this.setState({ formValue })}
                     onSubmit={this.onSubmit}