Skip to content

Commit 1b74f4a

Browse files
bplok20010bplok20010
committed
v1.2.0
1. 新增labelAlign属性 2. normalizeFieldValue属性
1 parent 6e0187d commit 1b74f4a

File tree

15 files changed

+303
-118
lines changed

15 files changed

+303
-118
lines changed

‎README.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,10 +60,12 @@ labelWidth?: string | number;
6060
labelClassName?: string;
6161
labelStyle?: React.CSSProperties;
6262
labelPosition?: "top" | "left";
63+
labelAlign?: "left" | "right";
6364
controlStyle?: React.CSSProperties;
6465
controlClassName?: string;
6566
clearErrorOnFocus?: boolean;
6667
inline?: boolean;
68+
normalizeFieldValue?: (value: any, prevValue: any, formValue: {}) => any;
6769
onSubmit?: (e: React.SyntheticEvent) => void;
6870
onChange?: (formValue: {}) => void;
6971
getInputProps?: (component: FormItem) => {};
@@ -86,12 +88,13 @@ labelWidth?: string | number;
8688
labelClassName?: string;
8789
labelStyle?: React.CSSProperties;
8890
labelPosition?: "top" | "left";
91+
labelAlign?: "left" | "right";
8992
controlStyle?: React.CSSProperties;
9093
controlClassName?: string;
9194
required?: boolean;
9295
requiredMessage?: string;
9396
clearErrorOnFocus?: boolean;
94-
normalize?: (value: any) => any;
97+
normalize?: (value: any, prevValue: any, formValue: {}) => any;
9598
renderExtra?: (component: FormItem) => React.ReactNode;
9699
validateDelay?: number;
97100
validateTrigger?: ValidateTriggerType | ValidateTriggerType[];

‎esm/Form.js

Lines changed: 52 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -67,27 +67,35 @@ function (_React$Component) {
6767
}
6868
};
6969

70-
_proto.getValue = function getValue(name) {
71-
var getDefaultFieldValue = this.props.getDefaultFieldValue;
72-
var path2obj = this.props.path2obj;
73-
var formValue = this.state.formValue;
74-
var value = path2obj ? get(formValue, name) : formValue[name];
75-
return value === undefined && getDefaultFieldValue ? getDefaultFieldValue(name) : value;
70+
_proto.getFormValue = function getFormValue() {
71+
return this.state.formValue;
7672
};
7773

78-
_proto.setValue = function setValue(name, value, cb) {
74+
_proto.getValues = function getValues() {
75+
return this.state.formValue;
76+
};
77+
78+
_proto.setValues = function setValues(obj, cb) {
79+
if (obj === void 0) {
80+
obj = {};
81+
}
82+
7983
var _this$props = this.props,
8084
path2obj = _this$props.path2obj,
8185
onChange = _this$props.onChange;
82-
var formValue = this.state.formValue; // TODO: 后面再考虑下特殊场景
86+
var formValue = this.state.formValue;
8387

8488
var nextFormValue = _extends({}, formValue);
8589

86-
if (path2obj) {
87-
set(nextFormValue, name, value);
88-
} else {
89-
nextFormValue[name] = value;
90-
}
90+
Object.keys(obj).forEach(function (name) {
91+
var value = obj[name];
92+
93+
if (path2obj) {
94+
set(nextFormValue, name, value);
95+
} else {
96+
nextFormValue[name] = value;
97+
}
98+
});
9199

92100
if (!("formValue" in this.props)) {
93101
this.setState({
@@ -104,27 +112,31 @@ function (_React$Component) {
104112
}
105113
};
106114

107-
_proto.setValues = function setValues(obj, cb) {
108-
if (obj === void 0) {
109-
obj = {};
110-
}
115+
_proto.setFormValue = function setFormValue(formValue, cb) {
116+
return this.setValues(formValue, cb);
117+
};
118+
119+
_proto.getValue = function getValue(name) {
120+
var getDefaultFieldValue = this.props.getDefaultFieldValue;
121+
var path2obj = this.props.path2obj;
122+
var formValue = this.state.formValue;
123+
var value = path2obj ? get(formValue, name) : formValue[name];
124+
return value === undefined && getDefaultFieldValue ? getDefaultFieldValue(name, formValue) : value;
125+
};
111126

127+
_proto.setValue = function setValue(name, value, cb) {
112128
var _this$props2 = this.props,
113129
path2obj = _this$props2.path2obj,
114130
onChange = _this$props2.onChange;
115-
var formValue = this.state.formValue;
131+
var formValue = this.state.formValue; // TODO: 后面再考虑下特殊场景
116132

117133
var nextFormValue = _extends({}, formValue);
118134

119-
Object.keys(obj).forEach(function (name) {
120-
var value = obj[name];
121-
122-
if (path2obj) {
123-
set(nextFormValue, name, value);
124-
} else {
125-
nextFormValue[name] = value;
126-
}
127-
});
135+
if (path2obj) {
136+
set(nextFormValue, name, value);
137+
} else {
138+
nextFormValue[name] = value;
139+
}
128140

129141
if (!("formValue" in this.props)) {
130142
this.setState({
@@ -141,6 +153,14 @@ function (_React$Component) {
141153
}
142154
};
143155

156+
_proto.getFieldValue = function getFieldValue(name) {
157+
return this.getValue(name);
158+
};
159+
160+
_proto.setFieldValue = function setFieldValue(name, value, cb) {
161+
return this.setValue(name, value, cb);
162+
};
163+
144164
_proto.componentDidUpdate = function componentDidUpdate() {
145165
var formValue = this.state.formValue;
146166
var validateProcess = this._validateCb;
@@ -529,10 +549,12 @@ Form.propTypes = process.env.NODE_ENV !== "production" ? {
529549
labelStyle: PropTypes.object,
530550
labelClassName: PropTypes.string,
531551
labelPosition: PropTypes.oneOf(["top", "left"]),
552+
labelAlign: PropTypes.oneOf(["left", "right"]),
532553
controlStyle: PropTypes.object,
533554
controlClassName: PropTypes.string,
534555
clearErrorOnFocus: PropTypes.bool,
535556
inline: PropTypes.bool,
557+
normalizeFieldValue: PropTypes.func,
536558
onSubmit: PropTypes.func,
537559
onChange: PropTypes.func,
538560
getInputProps: PropTypes.func
@@ -546,8 +568,10 @@ Form.defaultProps = {
546568
component: "form",
547569
asyncTestDelay: 100,
548570
validateDelay: 0,
549-
validateTrigger: ["blur", "change"],
571+
validateTrigger: ["change"],
572+
//"blur",
550573
labelPosition: "left",
574+
labelAlign: "right",
551575
clearErrorOnFocus: true,
552576
inline: false
553577
};

‎esm/FormItem.js

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -182,16 +182,29 @@ function (_React$Component) {
182182
_onChange = _this$props.onChange,
183183
_onFocus = _this$props.onFocus,
184184
_onBlur = _this$props.onBlur;
185-
var getInputProps = this.getFormProps("getInputProps", function () {
185+
var form = this.getForm();
186+
187+
var _normalize = this.getFormProp("normalizeFieldValue");
188+
189+
if (_normalize && !normalize) {
190+
normalize = _normalize.bind(null, name);
191+
}
192+
193+
var getInputProps = this.getFormProp("getInputProps", function () {
186194
return {};
187195
});
188-
var customProps = getInputProps(this);
196+
var customProps = getInputProps(this); //valueTrigger 收集子节点的值的时机 待开发...
197+
189198
return _extends({
190199
value: this.getValue()
191200
}, customProps, {
192201
onChange: function onChange(value) {
202+
var formValue = form.getFormValue();
203+
204+
var prevValue = _this3.getValue();
205+
193206
if (normalize) {
194-
value = normalize(value);
207+
value = normalize(value, prevValue, formValue);
195208
}
196209

197210
_this3.handleChange(value, function () {
@@ -218,7 +231,7 @@ function (_React$Component) {
218231
return React.cloneElement(React.Children.only(this.props.children), this.normalizeChildrenProps());
219232
};
220233

221-
_proto.getFormProps = function getFormProps(prop, defaultValue) {
234+
_proto.getFormProp = function getFormProp(prop, defaultValue) {
222235
var form = this.getForm();
223236
var formProps = form.props;
224237
return formProps[prop] || defaultValue;
@@ -237,7 +250,8 @@ function (_React$Component) {
237250

238251
_proto.render = function render() {
239252
var _this4 = this,
240-
_classnames;
253+
_classnames,
254+
_classnames2;
241255

242256
var _this$props2 = this.props,
243257
name = _this$props2.name,
@@ -250,8 +264,9 @@ function (_React$Component) {
250264
children = _this$props2.children;
251265
var inline = this.getProp("inline");
252266
var labelPosition = this.getProp("labelPosition");
267+
var labelAlign = this.getProp("labelAlign");
253268

254-
var _renderControlExtra = this.getFormProps("renderControlExtra");
269+
var _renderControlExtra = this.getFormProp("renderControlExtra");
255270

256271
var renderControlExtra = function renderControlExtra() {
257272
if (renderExtra) {
@@ -276,7 +291,7 @@ function (_React$Component) {
276291
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))
277292
}, label && React.createElement("label", {
278293
htmlFor: this.getProp("labelFor"),
279-
className: classnames(prefixCls + "-label", this.getProp("labelClassName")),
294+
className: classnames((_classnames2 = {}, _classnames2[prefixCls + "-label"] = true, _classnames2[prefixCls + "-label-left"] = labelAlign === "left" && labelPosition === "left", _classnames2), this.getProp("labelClassName")),
280295
style: _extends({
281296
width: this.getProp("labelWidth")
282297
}, this.getProp("labelStyle", {}))
@@ -302,6 +317,7 @@ FormItem.propTypes = process.env.NODE_ENV !== "production" ? {
302317
labelStyle: PropTypes.object,
303318
labelClassName: PropTypes.string,
304319
labelPosition: PropTypes.oneOf(["top", "left"]),
320+
labelAlign: PropTypes.oneOf(["left", "right"]),
305321
controlStyle: PropTypes.object,
306322
controlClassName: PropTypes.string,
307323
validator: PropTypes.oneOfType([PropTypes.func, PropTypes.array]),
@@ -312,6 +328,7 @@ FormItem.propTypes = process.env.NODE_ENV !== "production" ? {
312328
renderExtra: PropTypes.func,
313329
validateDelay: PropTypes.number,
314330
validateTrigger: PropTypes.oneOf(["blur", "change"]),
331+
// onBlur onChange
315332
inline: PropTypes.bool
316333
} : {};
317334
FormItem.defaultProps = {

‎esm/index.d.ts

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ declare namespace ReactWidgetForm {
1616
path2obj?: boolean;
1717
defaultFormValue?: {};
1818
formValue?: {};
19-
getDefaultFieldValue?: (name: string) => any;
19+
getDefaultFieldValue?: (name: string, formValue: {}) => any;
2020
renderControlExtra?: (component: FormItem) => React.ReactNode;
2121
validators?: {
2222
[name: string]: Validator | Validator[];
@@ -30,10 +30,17 @@ declare namespace ReactWidgetForm {
3030
labelClassName?: string;
3131
labelStyle?: React.CSSProperties;
3232
labelPosition?: "top" | "left";
33+
labelAlign?: "left" | "right";
3334
controlStyle?: React.CSSProperties;
3435
controlClassName?: string;
3536
clearErrorOnFocus?: boolean;
3637
inline?: boolean;
38+
normalizeFieldValue?: (
39+
name: string,
40+
value: any,
41+
prevValue: any,
42+
formValue: {}
43+
) => any;
3744
onSubmit?: (e: React.SyntheticEvent) => void;
3845
onChange?: (formValue: {}) => void;
3946
getInputProps?: (component: FormItem) => {};
@@ -53,12 +60,13 @@ declare namespace ReactWidgetForm {
5360
labelClassName?: string;
5461
labelStyle?: React.CSSProperties;
5562
labelPosition?: "top" | "left";
63+
labelAlign?: "left" | "right";
5664
controlStyle?: React.CSSProperties;
5765
controlClassName?: string;
5866
required?: boolean;
5967
requiredMessage?: string;
6068
clearErrorOnFocus?: boolean;
61-
normalize?: (value: any) => any;
69+
normalize?: (value: any, prevValue: any, formValue: {}) => any;
6270
renderExtra?: (component: FormItem) => React.ReactNode;
6371
validateDelay?: number;
6472
validateTrigger?: ValidateTriggerType | ValidateTriggerType[];
@@ -89,13 +97,22 @@ declare namespace ReactWidgetForm {
8997
}
9098

9199
export class Form extends React.Component<FormProps, {}> {
100+
getFormValue(): {};
101+
getValues(): {};
102+
setFormValue(formValue: {}, callback: (formValue: {}) => void): void;
103+
setValues(formValue: {}, callback: (formValue: {}) => void): void;
92104
getValue(name: string): any;
105+
getFieldValue(name: string): any;
93106
setValue(
94107
name: string,
95108
value: any,
96109
callback: (formValue: {}) => void
97110
): void;
98-
setValues(formValue: {}, callback: (formValue: {}) => void): void;
111+
setFieldValue(
112+
name: string,
113+
value: any,
114+
callback: (formValue: {}) => void
115+
): void;
99116
hasError(name: string): boolean;
100117
getError(name: string): any;
101118
cleanError(name: string): void;

‎esm/style/index.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
.nex-form-item-label {
77
text-align: right;
88
flex: none; }
9+
.nex-form-item-label-left {
10+
text-align: left; }
911
.nex-form-item-top {
1012
display: block; }
1113
.nex-form-item-top.nex-form-item-inline {

‎examples/demos/demo1.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,10 +79,11 @@ export default class DEMO extends Component {
7979
<div>
8080
<Form
8181
labelWidth={80}
82-
validateTrigger={["change", "blur"]}
82+
// validateTrigger={["change", "blur"]}
8383
getDefaultFieldValue={() => ""}
8484
requiredMessage="不能为空"
8585
ref={form => (this.form = form)}
86+
labelAlign="right"
8687
// formValue={formValue}
8788
onChange={formValue => this.setState({ formValue })}
8889
onSubmit={this.onSubmit}

0 commit comments

Comments
 (0)