Skip to content

Commit 6de892c

Browse files
necolasnecolas
committed
[add] CheckBox component
Implements the CheckBox component and adds a web-only 'color' prop to allow the color of the checkbox to be customized.
1 parent 495defd commit 6de892c

File tree

14 files changed

+578
-4
lines changed

14 files changed

+578
-4
lines changed

‎docs/storybook/1-components/CheckBox/CheckBoxScreen.js‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
/* eslint-disable react/jsx-sort-props */
2+
3+
/**
4+
* @flow
5+
*/
6+
7+
import CustomSize from './examples/CustomSize';
8+
import PropColor from './examples/PropColor';
9+
import PropDisabled from './examples/PropDisabled';
10+
import PropOnValueChange from './examples/PropOnValueChange';
11+
import PropValue from './examples/PropValue';
12+
import React from 'react';
13+
import UIExplorer, {
14+
AppText,
15+
Code,
16+
Description,
17+
DocItem,
18+
Section,
19+
storiesOf
20+
} from '../../ui-explorer';
21+
22+
const CheckBoxScreen = () => (
23+
<UIExplorer title="CheckBox" url="components/CheckBox">
24+
<Description>
25+
<AppText>
26+
This is a controlled component that requires an <Code>onValueChange</Code> callback that
27+
updates the value prop in order for the component to reflect user actions. If the{' '}
28+
<Code>value</Code> prop is not updated, the component will continue to render the supplied{' '}
29+
<Code>value</Code> prop instead of the expected result of any user actions.
30+
</AppText>
31+
</Description>
32+
33+
<Section title="Props">
34+
<DocItem name="...View props" />
35+
36+
<DocItem
37+
description="Customize the color of the checkbox."
38+
example={{
39+
render: () => <PropColor />
40+
}}
41+
label="web"
42+
name="color"
43+
typeInfo="?color"
44+
/>
45+
46+
<DocItem
47+
description="If true, the user won't be able to interact with the checkbox."
48+
example={{
49+
render: () => <PropDisabled />
50+
}}
51+
name="disabled"
52+
typeInfo="?boolean = false"
53+
/>
54+
55+
<DocItem
56+
description="Invoked with the event when the value changes."
57+
name="onChange"
58+
typeInfo="?function"
59+
/>
60+
61+
<DocItem
62+
description="Invoked with the new value when the value changes."
63+
example={{
64+
render: () => <PropOnValueChange />
65+
}}
66+
name="onValueChange"
67+
typeInfo="?function"
68+
/>
69+
70+
<DocItem
71+
description="The value of the checkbox. If `true` the checkbox will be checked."
72+
example={{
73+
render: () => <PropValue />
74+
}}
75+
name="value"
76+
typeInfo="?boolean = false"
77+
/>
78+
</Section>
79+
80+
<Section title="More examples">
81+
<DocItem
82+
description="The checkbox size can be controlled by the 'height' and 'width' style properties"
83+
example={{
84+
code: '<CheckBox style={{ height: 32, width: 32 }} />',
85+
render: () => <CustomSize />
86+
}}
87+
name="Custom size"
88+
/>
89+
</Section>
90+
</UIExplorer>
91+
);
92+
93+
storiesOf('Components', module).add('CheckBox', CheckBoxScreen);

‎docs/storybook/1-components/CheckBox/examples/CustomSize.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/**
2+
* @flow
3+
*/
4+
5+
import React from 'react';
6+
import styles from './styles';
7+
import { CheckBox, View } from 'react-native';
8+
9+
const CustomSizeExample = () => (
10+
<View style={styles.row}>
11+
<View style={styles.marginRight}>
12+
<CheckBox style={{ height: 20, width: 20 }} value />
13+
</View>
14+
<View style={styles.marginRight}>
15+
<CheckBox style={{ height: 32, width: 32 }} value />
16+
</View>
17+
</View>
18+
);
19+
20+
export default CustomSizeExample;

‎docs/storybook/1-components/CheckBox/examples/PropColor.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/**
2+
* @flow
3+
*/
4+
5+
import React from 'react';
6+
import styles from './styles';
7+
import { CheckBox, View } from 'react-native';
8+
9+
const CheckBoxColorExample = () => (
10+
<View style={styles.row}>
11+
<View style={styles.marginRight}>
12+
<CheckBox color="#1DA1F2" value />
13+
</View>
14+
<View style={styles.marginRight}>
15+
<CheckBox color="#F45D22" value />
16+
</View>
17+
</View>
18+
);
19+
20+
export default CheckBoxColorExample;

‎docs/storybook/1-components/CheckBox/examples/PropDisabled.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/**
2+
* @flow
3+
*/
4+
5+
import React from 'react';
6+
import styles from './styles';
7+
import { CheckBox, View } from 'react-native';
8+
9+
const CheckBoxDisabledExample = () => (
10+
<View style={styles.row}>
11+
<View style={styles.marginRight}>
12+
<CheckBox disabled value={false} />
13+
</View>
14+
<View style={styles.marginRight}>
15+
<CheckBox disabled value />
16+
</View>
17+
</View>
18+
);
19+
20+
export default CheckBoxDisabledExample;

‎docs/storybook/1-components/CheckBox/examples/PropOnValueChange.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
/**
2+
* @flow
3+
*/
4+
5+
import styles from './styles';
6+
import React, { PureComponent } from 'react';
7+
import { CheckBox, Text, View } from 'react-native';
8+
9+
class CheckBoxOnValueChangeExample extends PureComponent {
10+
state = {
11+
eventSwitchIsOn: false,
12+
eventSwitchRegressionIsOn: true
13+
};
14+
15+
render() {
16+
const { eventSwitchIsOn, eventSwitchRegressionIsOn } = this.state;
17+
18+
return (
19+
<View style={styles.row}>
20+
<View style={[styles.alignCenter, styles.marginRight]}>
21+
<CheckBox
22+
onValueChange={this._handleEventSwitch}
23+
style={styles.marginBottom}
24+
value={eventSwitchIsOn}
25+
/>
26+
<CheckBox
27+
onValueChange={this._handleEventSwitch}
28+
style={styles.marginBottom}
29+
value={eventSwitchIsOn}
30+
/>
31+
<Text>{eventSwitchIsOn ? 'On' : 'Off'}</Text>
32+
</View>
33+
<View style={styles.alignCenter}>
34+
<CheckBox
35+
onValueChange={this._handleEventSwitchRegression}
36+
style={styles.marginBottom}
37+
value={eventSwitchRegressionIsOn}
38+
/>
39+
<CheckBox
40+
onValueChange={this._handleEventSwitchRegression}
41+
style={styles.marginBottom}
42+
value={eventSwitchRegressionIsOn}
43+
/>
44+
<Text>{eventSwitchRegressionIsOn ? 'On' : 'Off'}</Text>
45+
</View>
46+
</View>
47+
);
48+
}
49+
50+
_handleEventSwitch = value => {
51+
this.setState({ eventSwitchIsOn: value });
52+
};
53+
54+
_handleEventSwitchRegression = value => {
55+
this.setState({ eventSwitchRegressionIsOn: value });
56+
};
57+
}
58+
59+
export default CheckBoxOnValueChangeExample;

‎docs/storybook/1-components/CheckBox/examples/PropValue.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/**
2+
* @flow
3+
*/
4+
5+
import React from 'react';
6+
import styles from './styles';
7+
import { CheckBox, View } from 'react-native';
8+
9+
const CheckBoxValueExample = () => (
10+
<View style={styles.row}>
11+
<View style={styles.marginRight}>
12+
<CheckBox value={false} />
13+
</View>
14+
<View style={styles.marginRight}>
15+
<CheckBox value />
16+
</View>
17+
</View>
18+
);
19+
20+
export default CheckBoxValueExample;

‎docs/storybook/1-components/CheckBox/examples/styles.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/**
2+
* @flow
3+
*/
4+
5+
import { StyleSheet } from 'react-native';
6+
7+
const styles = StyleSheet.create({
8+
row: {
9+
flexDirection: 'row',
10+
flexWrap: 'wrap'
11+
},
12+
marginRight: {
13+
marginRight: 10
14+
},
15+
marginBottom: {
16+
marginBottom: 10
17+
},
18+
alignCenter: {
19+
alignItems: 'center'
20+
}
21+
});
22+
23+
export default styles;

‎docs/storybook/1-components/CheckBox/helpers.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/**
2+
* @flow
3+
*/
4+
5+
import React from 'react';
6+
import { StyleSheet, View } from 'react-native';
7+
8+
const DividerHorizontal = () => <View style={styles.horizontalDivider} />;
9+
const DividerVertical = () => <View style={styles.verticalDivider} />;
10+
11+
export const styles = StyleSheet.create({
12+
horizontalDivider: {
13+
width: '0.6rem'
14+
},
15+
verticalDivider: {
16+
height: '1.3125rem'
17+
},
18+
row: {
19+
flexDirection: 'row',
20+
flexWrap: 'wrap'
21+
},
22+
marginRight: {
23+
marginRight: 10
24+
},
25+
marginBottom: {
26+
marginBottom: 10
27+
},
28+
marginVertical: {
29+
marginVertical: 5
30+
},
31+
alignCenter: {
32+
alignItems: 'center'
33+
}
34+
});
35+
36+
export { DividerHorizontal, DividerVertical };

‎src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap‎

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,9 @@ exports[`apis/AppRegistry/renderApplication getApplication 3`] = `
3939
.rn-backgroundColor-wib322{background-color:transparent}
4040
.rn-backgroundColor-8ndhhv{background-color:rgba(33,150,243,1)}
4141
.rn-backgroundColor-15al3ab{background-color:rgba(223,223,223,1)}
42+
.rn-backgroundColor-44z8sh{background-color:rgba(255,255,255,1)}
43+
.rn-backgroundColor-5itogg{background-color:rgba(0,150,136,1)}
44+
.rn-backgroundColor-1v82r4u{background-color:rgba(170,184,194,1)}
4245
.rn-backgroundColor-1hj8efq{background-color:rgba(213,213,213,1)}
4346
.rn-backgroundColor-1bgzomc{background-color:rgba(189,189,189,1)}
4447
.rn-color-homxoj{color:inherit}
@@ -56,9 +59,13 @@ exports[`apis/AppRegistry/renderApplication getApplication 3`] = `
5659
.rn-borderBottomStyle-rull8r{border-bottom-style:solid}
5760
.rn-borderLeftStyle-mm0ijv{border-left-style:solid}
5861
.rn-borderTopWidth-13yce4e{border-top-width:0px}
62+
.rn-borderTopWidth-1jxfwug{border-top-width:2px}
5963
.rn-borderRightWidth-fnigne{border-right-width:0px}
64+
.rn-borderRightWidth-18p6if4{border-right-width:2px}
6065
.rn-borderBottomWidth-ndvcnb{border-bottom-width:0px}
66+
.rn-borderBottomWidth-wgabs5{border-bottom-width:2px}
6167
.rn-borderLeftWidth-gxnn5r{border-left-width:0px}
68+
.rn-borderLeftWidth-dwliz8{border-left-width:2px}
6269
.rn-boxSizing-deolkf{box-sizing:border-box}
6370
.rn-display-6koalj{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex}
6471
.rn-display-xoduu5{display:-webkit-inline-box;display:-moz-inline-box;display:-ms-inline-flexbox;display:-webkit-inline-flex;display:inline-flex}
@@ -98,13 +105,15 @@ exports[`apis/AppRegistry/renderApplication getApplication 3`] = `
98105
.rn-height-1pi2tsx{height:100%}
99106
.rn-height-z80fyv{height:20px}
100107
.rn-height-1r8g8re{height:36px}
108+
.rn-height-10ptun7{height:16px}
101109
.rn-height-4v7adb{height:5px}
102110
.rn-height-1dernwh{height:70%}
103111
.rn-opacity-1272l3b{opacity:0}
104112
.rn-opacity-6dt33c{opacity:1}
105113
.rn-width-13qz1uu{width:100%}
106114
.rn-width-19wmn03{width:20px}
107115
.rn-width-1acpoxo{width:36px}
116+
.rn-width-1janqcz{width:16px}
108117
.rn-touchAction-19z077z{-ms-touch-action:none;touch-action:none}
109118
.rn-touchAction-1gvxusu{-ms-touch-action:manipulate;touch-action:manipulate}
110119
.rn-WebkitOverflowScrolling-150rngu{-webkit-overflow-scrolling:touch}
@@ -152,11 +161,28 @@ exports[`apis/AppRegistry/renderApplication getApplication 3`] = `
152161
.rn-borderBottomLeftRadius-pm2fo{border-bottom-left-radius:0px}
153162
.rn-fontWeight-majxgm{font-weight:500}
154163
.rn-textTransform-tsynxw{text-transform:uppercase}
155-
.rn-alignSelf-k200y{-ms-flex-item-align:start;-webkit-align-self:flex-start;align-self:flex-start}
156-
.rn-boxShadow-1ewcgjf{box-shadow:0px 1px 3px rgba(0,0,0,0.5)}
164+
.rn-borderTopColor-j4x2lb{border-top-color:rgba(101,119,134,1)}
165+
.rn-borderTopColor-gj2eto{border-top-color:rgba(0,150,136,1)}
166+
.rn-borderTopColor-1j7vz2b{border-top-color:rgba(204,214,221,1)}
167+
.rn-borderTopColor-2dclza{border-top-color:rgba(170,184,194,1)}
157168
.rn-borderTopColor-kqr9px{border-top-color:black}
169+
.rn-borderRightColor-12i18q1{border-right-color:rgba(101,119,134,1)}
170+
.rn-borderRightColor-31ud7z{border-right-color:rgba(0,150,136,1)}
171+
.rn-borderRightColor-10fg1ub{border-right-color:rgba(204,214,221,1)}
172+
.rn-borderRightColor-8jf312{border-right-color:rgba(170,184,194,1)}
158173
.rn-borderRightColor-q0dj5p{border-right-color:black}
174+
.rn-borderBottomColor-mg3rfb{border-bottom-color:rgba(101,119,134,1)}
175+
.rn-borderBottomColor-1bgnb8i{border-bottom-color:rgba(0,150,136,1)}
176+
.rn-borderBottomColor-zxuuv6{border-bottom-color:rgba(204,214,221,1)}
177+
.rn-borderBottomColor-1yeakrt{border-bottom-color:rgba(170,184,194,1)}
159178
.rn-borderBottomColor-1ah7hsa{border-bottom-color:black}
179+
.rn-borderLeftColor-vnhemr{border-left-color:rgba(101,119,134,1)}
180+
.rn-borderLeftColor-tbzcuz{border-left-color:rgba(0,150,136,1)}
181+
.rn-borderLeftColor-1p34dw6{border-left-color:rgba(204,214,221,1)}
182+
.rn-borderLeftColor-bluj2i{border-left-color:rgba(170,184,194,1)}
160183
.rn-borderLeftColor-137uh4u{border-left-color:black}
184+
.rn-backgroundImage-rs94m5{background-image:url(\\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K\\")}
185+
.rn-alignSelf-k200y{-ms-flex-item-align:start;-webkit-align-self:flex-start;align-self:flex-start}
186+
.rn-boxShadow-1ewcgjf{box-shadow:0px 1px 3px rgba(0,0,0,0.5)}
161187
.rn-resize-1dz5y72{resize:none}</style>"
162188
`;

0 commit comments

Comments
 (0)