Skip to content

Commit a6205e9

Browse files
author
Edward Xiao
committed
- <Select/> onChange res become whole object instead of string id 
1 parent 6b89cf9 commit a6205e9

File tree

10 files changed

+37
-32
lines changed

10 files changed

+37
-32
lines changed

‎docs/v4-doc.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -338,7 +338,7 @@ import 'react-inputs-validation/lib/react-inputs-validation.min.css';
338338
|customStyleOptionListContainer | Opt | Obj | | {} |
339339
|customStyleOptionListItem | Opt | Obj | | {} |
340340
|**onBlur** |**Opt**|**Func** |**In order to validate the value on blur, you MUST provide a function, even if it is an empty function. Missing this, the validation on blur will not work.** |**none** |
341-
|**onChange** |**Req**|**Func**| |**(val, e) => {}**|
341+
|**onChange** |**Req**|**Func**| |**(res, e) => {}**|
342342
|onFocus | Opt | Func | | none |
343343
|onClick | Opt | Func | | none |
344344
|**validationOption** |**Opt**|**obj** | |**{}** |
@@ -377,8 +377,8 @@ import 'react-inputs-validation/lib/react-inputs-validation.min.css';
377377
customStyleContainer={{}} //Optional.[Object].Default: {}.
378378
customStyleOptionListContainer={{}} //Optional.[Object].Default: {}.
379379
customStyleOptionListItem={{}} //Optional.[Object].Default: {}.
380-
onChange={(movie, e) => {
381-
this.setState({ movie });
380+
onChange={(res, e) => {
381+
this.setState({ movie: res.id });
382382
console.log(e);
383383
}} //Optional.[Func].Default: () => {}. Will return the value.
384384
onBlur={() => {}} //Optional.[Func].Default: none. In order to validate the value on blur, you MUST provide a function, even if it is an empty function. Missing this, the validation on blur will not work.

‎example/index.js‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -171,8 +171,8 @@ import { Select } from 'react-inputs-validation';
171171
{ id: 'CN', name: 'China' },
172172
{ id: 'JP', name: 'Japan' }
173173
]} // Required.[Array of Object(s)].Default: [].
174-
onChange={(country, e) => {
175-
this.setState({ country });
174+
onChange={(res, e) => {
175+
this.setState({ country: res.id });
176176
console.log(e);
177177
}} // Optional.[Func].Default: () => {}. Will return the value.
178178
onBlur={() => {}} // Optional.[Func].Default: none. In order to validate the value on blur, you MUST provide a function, even if it is an empty function. Missing this, the validation on blur will not work.
@@ -764,8 +764,8 @@ class Index extends Component {
764764
}}
765765
value={country} // Optional.[String].Default: "".
766766
optionList={[{ id: '', name: 'Please Select a country' }, { id: 'US', name: 'United States' }, { id: 'CN', name: 'China' }, { id: 'JP', name: 'Japan' }]} // Required.[Array of Object(s)].Default: [].
767-
onChange={(country, e) => {
768-
this.setState({ country });
767+
onChange={(res, e) => {
768+
this.setState({ country: res.id });
769769
console.log(e);
770770
}} // Optional.[Func].Default: () => {}. Will return the value.
771771
onBlur={() => {}} // Optional.[Func].Default: none. In order to validate the value on blur, you MUST provide a function, even if it is an empty function. Missing this, the validation on blur will not work.
@@ -833,7 +833,8 @@ class Index extends Component {
833833
<div style={rowContainerStyle}>
834834
<div style={rowStyle}>
835835
<div style={prefixAll({ ...labelStyle, flex: '3 3 0px', marginTop: '3px' })}>
836-
<span className="icon icon-person" style={{ ...labelContentStyle, fontSize: '20px' }} />&nbsp;
836+
<span className="icon icon-person" style={{ ...labelContentStyle, fontSize: '20px' }} />
837+
&nbsp;
837838
<span style={labelContentStyle}>Name</span>
838839
</div>
839840
<div style={prefixAll({ flex: '6 6 0px' })}>
@@ -952,7 +953,8 @@ class Index extends Component {
952953
<div style={rowStyle}>
953954
<div style={prefixAll({ ...labelStyle, flex: '3 3 0px', marginTop: '3px' })}>
954955
{/*<div style={(labelStyle, { flex: '3 3 0px' })}>*/}
955-
<span className="icon icon-info" style={{ ...labelContentStyle, fontSize: '20px' }} />&nbsp;
956+
<span className="icon icon-info" style={{ ...labelContentStyle, fontSize: '20px' }} />
957+
&nbsp;
956958
<span style={labelContentStyle}>job</span>
957959
</div>
958960
<div style={prefixAll({ flex: '6 6 0px', display: 'flex' })}>
@@ -1017,7 +1019,8 @@ class Index extends Component {
10171019
<div style={rowStyle}>
10181020
<div style={prefixAll({ ...labelStyle, flex: '3 3 0px', marginTop: '3px' })}>
10191021
{/*<div style={(labelStyle, { flex: '3 3 0px' })}>*/}
1020-
<span className="icon icon-assignment-late" style={{ ...labelContentStyle, fontSize: '20px' }} />&nbsp;
1022+
<span className="icon icon-assignment-late" style={{ ...labelContentStyle, fontSize: '20px' }} />
1023+
&nbsp;
10211024
<span style={labelContentStyle}>agreement</span>
10221025
</div>
10231026
<div style={prefixAll({ flex: '6 6 0px' })}>
@@ -1082,7 +1085,8 @@ class Index extends Component {
10821085
<div style={rowContainerStyle}>
10831086
<div style={rowStyle}>
10841087
<div style={prefixAll({ ...labelStyle, flex: '3 3 0px', marginTop: '3px' })}>
1085-
<span className="icon icon-bookmark" style={{ ...labelContentStyle, fontSize: '20px' }} />&nbsp;
1088+
<span className="icon icon-bookmark" style={{ ...labelContentStyle, fontSize: '20px' }} />
1089+
&nbsp;
10861090
<span style={labelContentStyle}>country</span>
10871091
</div>
10881092
<div style={prefixAll({ flex: '6 6 0px' })}>
@@ -1107,8 +1111,8 @@ class Index extends Component {
11071111
customStyleContainer={{}} // Optional.[Object].Default: {}.
11081112
customStyleOptionListContainer={{ maxHeight: '200px', overflow: 'auto', fontSize: '14px' }} // Optional.[Object].Default: {}.
11091113
customStyleOptionListItem={{}} // Optional.[Object].Default: {}.
1110-
onChange={(country, e) => {
1111-
this.setState({ country });
1114+
onChange={(res, e) => {
1115+
this.setState({ country: res.id });
11121116
console.log(e);
11131117
}} // Optional.[Func].Default: () => {}. Will return the value.
11141118
onBlur={() => {}} // Optional.[Func].Default: none. In order to validate the value on blur, you MUST provide a function, even if it is an empty function. Missing this, the validation on blur will not work.
@@ -1145,7 +1149,8 @@ class Index extends Component {
11451149
<div style={rowContainerStyle}>
11461150
<div style={rowStyle}>
11471151
<div style={prefixAll({ ...labelStyle, flex: '3 3 0px', marginTop: '3px' })}>
1148-
<span className="icon icon-insert-drive-file" style={{ ...labelContentStyle, fontSize: '20px' }} />&nbsp;
1152+
<span className="icon icon-insert-drive-file" style={{ ...labelContentStyle, fontSize: '20px' }} />
1153+
&nbsp;
11491154
<span style={labelContentStyle}>description</span>
11501155
</div>
11511156
<div style={prefixAll({ flex: '6 6 0px' })}>

‎lib/components/Select.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -300,12 +300,12 @@ var component = function component(_ref) {
300300
onClick(e);
301301
}
302302
}, []);
303-
var handleOnChange = useCallback(function (v, e) {
303+
var handleOnChange = useCallback(function (item, e) {
304304
if (disabled || $elWrapper === null) {
305305
return;
306306
}
307307

308-
onChange && onChange(String(v), e);
308+
onChange && onChange(item, e);
309309
}, []);
310310
var check = useCallback(function () {
311311
var name = option.name,
@@ -439,8 +439,8 @@ var component = function component(_ref) {
439439
}
440440
}
441441
}, []);
442-
var handleOnItemClick = useCallback(function (v, e) {
443-
handleOnChange(v, e);
442+
var handleOnItemClick = useCallback(function (item, e) {
443+
handleOnChange(item, e);
444444
}, []);
445445
var handleOnItemMouseOver = useCallback(function (index) {
446446
globalVariableCurrentFocus = index;
@@ -711,7 +711,7 @@ var Option = memo(function (_ref2) {
711711
_ref2$onMouseOut = _ref2.onMouseOut,
712712
onMouseOut = _ref2$onMouseOut === void 0 ? function () {} : _ref2$onMouseOut;
713713
var handleOnClick = useCallback(function (e) {
714-
onClick(item.id, e);
714+
onClick(item, e);
715715
}, []);
716716
var handleOnMouseOver = useCallback(function () {
717717
onMouseOver(index);

‎lib/react-inputs-validation.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/react-inputs-validation.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/react-inputs-validation.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/react-inputs-validation.min.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-inputs-validation",
3-
"version": "4.1.3",
3+
"version": "4.1.4",
44
"description": "React form input validation components",
55
"main": "index.js",
66
"repository": {

‎src/__tests__/Select.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ describe('Select component', () => {
128128
value={value}
129129
optionList={OPTION_LIST}
130130
onChange={res => {
131-
value = res;
131+
value = res.id;
132132
}}
133133
/>,
134134
);

‎src/js/Inputs/Select.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ interface Props {
104104
disabled?: boolean;
105105
validate?: boolean;
106106
optionList: OptionListItem[];
107-
onChange: (res: string, e: React.MouseEvent<HTMLElement>) => void;
107+
onChange: (res: object, e: React.MouseEvent<HTMLElement>) => void;
108108
onBlur?: (e: React.FocusEvent<HTMLElement> | Event) => void;
109109
onFocus?: (e: React.FocusEvent<HTMLElement>) => void;
110110
onClick?: (e: React.MouseEvent<HTMLElement>) => void;
@@ -195,11 +195,11 @@ const component: React.FC<Props> = ({
195195
onClick(e);
196196
}
197197
}, []);
198-
const handleOnChange = useCallback((v: string, e: React.MouseEvent<HTMLElement>) => {
198+
const handleOnChange = useCallback((item: object, e: React.MouseEvent<HTMLElement>) => {
199199
if (disabled || $elWrapper === null) {
200200
return;
201201
}
202-
onChange && onChange(String(v), e);
202+
onChange && onChange(item, e);
203203
}, []);
204204
const check = useCallback(() => {
205205
const { name, check, locale, required, msgOnSuccess } = option;
@@ -311,8 +311,8 @@ const component: React.FC<Props> = ({
311311
}
312312
}
313313
}, []);
314-
const handleOnItemClick = useCallback((v: string, e: React.MouseEvent<HTMLElement>) => {
315-
handleOnChange(v, e);
314+
const handleOnItemClick = useCallback((item: object, e: React.MouseEvent<HTMLElement>) => {
315+
handleOnChange(item, e);
316316
}, []);
317317
const handleOnItemMouseOver = useCallback((index: number) => {
318318
globalVariableCurrentFocus = index;
@@ -548,15 +548,15 @@ interface OptionProps {
548548
className?: string;
549549
item?: OptionListItem;
550550
customStyleOptionListItem?: object;
551-
onClick?: (res: string, e: React.MouseEvent<HTMLElement>) => void;
551+
onClick?: (res: object, e: React.MouseEvent<HTMLElement>) => void;
552552
onMouseOver?: (res: number) => void;
553553
onMouseMove?: () => void;
554554
onMouseOut?: () => void;
555555
}
556556
export const Option: React.FC<OptionProps> = memo(
557557
({ index = -1, id = '', className = '', item = { id: '', name: '' }, customStyleOptionListItem = {}, onClick = () => {}, onMouseOver = () => {}, onMouseMove = () => {}, onMouseOut = () => {} }) => {
558558
const handleOnClick = useCallback((e: React.MouseEvent<HTMLElement>) => {
559-
onClick(item.id, e);
559+
onClick(item, e);
560560
}, []);
561561
const handleOnMouseOver = useCallback(() => {
562562
onMouseOver(index);

0 commit comments

Comments
 (0)