Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 1c7fbe5

Browse files
updated dependencies, fixed flow types, fixed several bugs
1 parent 341a412 commit 1c7fbe5

File tree

4 files changed

+2504
-1365
lines changed

4 files changed

+2504
-1365
lines changed

‎src/Checkbox.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
// @flow
22
import React from 'react';
3-
import CheckboxContext from './context';
3+
import {Consumer} from './context';
44

55
type CheckboxT = {
6-
value: string|number,
6+
value?: string,
77
};
88

99
export default class Checkbox extends React.Component<CheckboxT> {
1010
render() {
11-
const { value, ...rest } = this.props;
11+
const { value='on', ...rest } = this.props;
1212
return (
13-
<CheckboxContext.Consumer>
13+
<Consumer>
1414
{({ name, values, onChange }) => (
1515
<input
1616
{...rest}
@@ -21,7 +21,7 @@ export default class Checkbox extends React.Component<CheckboxT> {
2121
onChange={onChange}
2222
/>
2323
)}
24-
</CheckboxContext.Consumer>
24+
</Consumer>
2525
);
2626
}
2727
}

‎src/CheckboxGroup.js‎

Lines changed: 43 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,124 +1,81 @@
11
// @flow
22
import React from 'react';
3-
import CheckboxContext from './context';
3+
import {Provider} from './context';
44

55
type CheckboxGroupPropsT = {
6-
children: *,
6+
children: any,
77
name?: string,
8-
onChange: (values: string[], e: SyntheticEvent<HTMLInputElement>) => *,
9-
// Disable react/no-unused-prop-types until this bug is fixed and merged:
10-
// https://github.com/yannickcr/eslint-plugin-react/issues/1751
11-
// eslint-disable-next-line react/no-unused-prop-types
8+
onChange: (e: SyntheticInputEvent<HTMLInputElement>, values: string[]) => any,
129
values?: string[],
1310
};
1411

1512
type CheckboxGroupStateT = {
16-
name?: string,
17-
onChange?: (e: SyntheticEvent<HTMLInputElement>, values: Array<string>) => void,
1813
values: string[],
1914
};
2015

2116
export default class CheckboxGroup extends React.Component<
2217
CheckboxGroupPropsT,
2318
CheckboxGroupStateT
2419
> {
25-
static getDerivedStateFromProps(nextProps: CheckboxGroupPropsT) {
26-
if (!nextProps.values) {
27-
return {
28-
values: [],
29-
name: nextProps.name,
30-
};
31-
}
20+
state = {
21+
values: Array.isArray(this.props.values) ? this.props.values : [],
22+
};
3223

33-
if (Array.isArray(nextProps.values)) {
34-
return {
35-
values: nextProps.values.map((value) => value.toString()),
36-
name: nextProps.name,
37-
};
38-
}
24+
onChange = (e: SyntheticInputEvent<HTMLInputElement>) => {
25+
e.persist();
26+
const {
27+
currentTarget: { value, checked },
28+
} = e;
3929

40-
if (typeof nextProps.values === 'string') {
41-
return {
42-
values: [nextProps.values],
43-
name: nextProps.name,
44-
};
30+
if (checked) {
31+
this.addValue(e, value);
32+
} else {
33+
this.removeValue(e, value);
4534
}
46-
}
47-
48-
constructor(props: CheckboxGroupPropsT, state: CheckboxGroupStateT) {
49-
super(props, state);
50-
this.state = {
51-
...this.state,
52-
onChange: this.onChange,
53-
};
54-
}
55-
56-
state = {
57-
values: [],
58-
name: this.props.name,
5935
};
6036

61-
shouldComponentUpdate(nextProps: CheckboxGroupPropsT, nextState: CheckboxGroupStateT) {
62-
if (this.props !== nextProps || this.state !== nextState) {
63-
return true;
37+
customOnChangeHandler = (
38+
originalEvent: SyntheticInputEvent<HTMLInputElement>,
39+
values: string[]
40+
) => {
41+
if (typeof this.props.onChange === 'function') {
42+
this.props.onChange(originalEvent, values);
6443
}
65-
return false;
66-
}
44+
};
6745

68-
removeValue = (value: string,originalEvent: SyntheticEvent<HTMLInputElement>) => {
46+
removeValue = (originalEvent: SyntheticInputEvent<HTMLInputElement>,value: string) => {
6947
this.setState(
70-
(state) => {
71-
const { values } = state;
72-
const index = values.indexOf(value);
73-
if (index !== -1) {
74-
const nextValues = values.slice();
75-
nextValues.splice(index, 1);
76-
return {
77-
values: nextValues,
78-
};
79-
}
80-
},
48+
({ values }) => ({
49+
values: values.includes(value)
50+
? values.slice().filter((item) => item !== value)
51+
: values,
52+
}),
8153
() => {
82-
if (typeof this.props.onChange === 'function') {
83-
this.props.onChange(this.state.values, originalEvent);
84-
}
54+
this.customOnChangeHandler(originalEvent, this.state.values);
8555
}
8656
);
8757
};
8858

89-
addValue = (value: string,originalEvent: SyntheticEvent<HTMLInputElement>) => {
59+
addValue = (originalEvent: SyntheticInputEvent<HTMLInputElement>,value: string) => {
9060
this.setState(
91-
(state) => {
92-
const { values } = state;
93-
if (values.indexOf(value) === -1) {
94-
return {
95-
values: values.concat(value),
96-
};
97-
}
98-
},
61+
({ values }) => ({
62+
values: values.indexOf(value) === -1 ? values.slice().concat(value) : values,
63+
}),
9964
() => {
100-
if (typeof this.props.onChange === 'function') {
101-
this.props.onChange(this.state.values, originalEvent);
102-
}
65+
this.customOnChangeHandler(originalEvent, this.state.values);
10366
}
10467
);
10568
};
10669

107-
onChange = (e: SyntheticEvent<HTMLInputElement>) => {
108-
e.persist();
109-
const { currentTarget: { value, checked } } = e;
110-
if (checked) {
111-
this.addValue(value, e);
112-
} else {
113-
this.removeValue(value, e);
114-
}
115-
};
116-
11770
render() {
118-
return (
119-
<CheckboxContext.Provider value={this.state}>
120-
{this.props.children}
121-
</CheckboxContext.Provider>
122-
);
71+
const { children, name } = this.props;
72+
73+
const contextValue = {
74+
onChange: this.onChange,
75+
values: this.state.values,
76+
name,
77+
};
78+
79+
return <Provider value={contextValue}>{children}</Provider>;
12380
}
12481
}

‎src/context.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
import React from 'react';
22

3-
const CheckboxContext = React.createContext();
3+
const Context = React.createContext();
44

5-
export default CheckboxContext;
5+
export const Consumer = Context.Consumer;
6+
export const Provider = Context.Provider;
7+
8+
export default Context;

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /