expo-checkbox 2.2.2 → 2.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -1
- package/README.md +1 -1
- package/build/Checkbox.d.ts +4 -1
- package/build/Checkbox.d.ts.map +1 -1
- package/build/Checkbox.js +4 -1
- package/build/Checkbox.js.map +1 -1
- package/build/Checkbox.types.d.ts +15 -12
- package/build/Checkbox.types.d.ts.map +1 -1
- package/build/Checkbox.types.js.map +1 -1
- package/build/ExpoCheckbox.d.ts +6 -3
- package/build/ExpoCheckbox.d.ts.map +1 -1
- package/build/ExpoCheckbox.js +21 -25
- package/build/ExpoCheckbox.js.map +1 -1
- package/build/ExpoCheckbox.web.d.ts +6 -3
- package/build/ExpoCheckbox.web.d.ts.map +1 -1
- package/build/ExpoCheckbox.web.js +30 -34
- package/build/ExpoCheckbox.web.js.map +1 -1
- package/package.json +2 -2
- package/src/Checkbox.ts +6 -1
- package/src/Checkbox.types.ts +17 -12
- package/src/ExpoCheckbox.tsx +36 -43
- package/src/ExpoCheckbox.web.tsx +41 -51
package/CHANGELOG.md
CHANGED
|
@@ -10,6 +10,16 @@
|
|
|
10
10
|
|
|
11
11
|
### 💡 Others
|
|
12
12
|
|
|
13
|
+
## 2.3.1 — 2023-02-09
|
|
14
|
+
|
|
15
|
+
_This version does not introduce any user-facing changes._
|
|
16
|
+
|
|
17
|
+
## 2.3.0 — 2023-02-03
|
|
18
|
+
|
|
19
|
+
### ⚠️ Notices
|
|
20
|
+
|
|
21
|
+
- Remove deprecated `isAvailableAsync()` method. ([#20961](https://github.com/expo/expo/pull/20961) by [@Simek](https://github.com/Simek))
|
|
22
|
+
|
|
13
23
|
## 2.2.2 — 2022-11-02
|
|
14
24
|
|
|
15
25
|
_This version does not introduce any user-facing changes._
|
|
@@ -30,7 +40,7 @@ _This version does not introduce any user-facing changes._
|
|
|
30
40
|
|
|
31
41
|
### 🛠 Breaking changes
|
|
32
42
|
|
|
33
|
-
-
|
|
43
|
+
- Deprecate `isAvailableAsync()` and reimplement module in javascript. ([#13510](https://github.com/expo/expo/pull/13510) by [@ajsmth](https://github.com/ajsmth))
|
|
34
44
|
|
|
35
45
|
## 1.0.3 — 2021-03-10
|
|
36
46
|
|
package/README.md
CHANGED
package/build/Checkbox.d.ts
CHANGED
package/build/Checkbox.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../src/Checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../src/Checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AAEjC,OAAO,EAAE,QAAQ,EAAE,CAAC;AAEpB,cAAc;AACd,eAAe,QAAQ,CAAC"}
|
package/build/Checkbox.js
CHANGED
package/build/Checkbox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../src/Checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../src/Checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AAEjC,OAAO,EAAE,QAAQ,EAAE,CAAC;AAEpB,cAAc;AACd,eAAe,QAAQ,CAAC","sourcesContent":["import Checkbox from './ExpoCheckbox';\nexport * from './Checkbox.types';\n\nexport { Checkbox };\n\n/** @hidden */\nexport default Checkbox;\n"]}
|
|
@@ -1,11 +1,20 @@
|
|
|
1
|
+
import { SyntheticEvent } from 'react';
|
|
1
2
|
import { ColorValue, NativeSyntheticEvent, ViewProps } from 'react-native';
|
|
2
|
-
export
|
|
3
|
-
|
|
3
|
+
export type CheckboxEvent = {
|
|
4
|
+
/**
|
|
5
|
+
* On native platforms, a `NodeHandle` for the element on which the event has occurred.
|
|
6
|
+
* On web, a DOM node on which the event has occurred.
|
|
7
|
+
*/
|
|
8
|
+
target: any;
|
|
9
|
+
/**
|
|
10
|
+
* A boolean representing checkbox current value.
|
|
11
|
+
*/
|
|
4
12
|
value: boolean;
|
|
5
|
-
}
|
|
6
|
-
export
|
|
13
|
+
};
|
|
14
|
+
export type CheckboxProps = ViewProps & {
|
|
7
15
|
/**
|
|
8
|
-
* Value indicating if the checkbox should be rendered as checked or not.
|
|
16
|
+
* Value indicating if the checkbox should be rendered as checked or not.
|
|
17
|
+
* @default false
|
|
9
18
|
*/
|
|
10
19
|
value?: boolean;
|
|
11
20
|
/**
|
|
@@ -20,17 +29,11 @@ export declare type CheckboxProps = ViewProps & {
|
|
|
20
29
|
* Callback that is invoked when the user presses the checkbox.
|
|
21
30
|
* @param event A native event containing the checkbox change.
|
|
22
31
|
*/
|
|
23
|
-
onChange?: (event: CheckboxEvent) => void;
|
|
32
|
+
onChange?: (event: NativeSyntheticEvent<CheckboxEvent> | SyntheticEvent<HTMLInputElement, CheckboxEvent>) => void;
|
|
24
33
|
/**
|
|
25
34
|
* Callback that is invoked when the user presses the checkbox.
|
|
26
35
|
* @param value A boolean indicating the new checked state of the checkbox.
|
|
27
36
|
*/
|
|
28
37
|
onValueChange?: (value: boolean) => void;
|
|
29
38
|
};
|
|
30
|
-
export declare type CheckboxComponent = React.FC<CheckboxProps> & {
|
|
31
|
-
/**
|
|
32
|
-
* @deprecated
|
|
33
|
-
*/
|
|
34
|
-
isAvailableAsync: () => Promise<boolean>;
|
|
35
|
-
};
|
|
36
39
|
//# sourceMappingURL=Checkbox.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.types.d.ts","sourceRoot":"","sources":["../src/Checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Checkbox.types.d.ts","sourceRoot":"","sources":["../src/Checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE3E,MAAM,MAAM,aAAa,GAAG;IAC1B;;;OAGG;IACH,MAAM,EAAE,GAAG,CAAC;IACZ;;OAEG;IACH,KAAK,EAAE,OAAO,CAAC;CAChB,CAAC;AAGF,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG;IACtC;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,oBAAoB,CAAC,aAAa,CAAC,GAAG,cAAc,CAAC,gBAAgB,EAAE,aAAa,CAAC,KACzF,IAAI,CAAC;IACV;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.types.js","sourceRoot":"","sources":["../src/Checkbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ColorValue, NativeSyntheticEvent, ViewProps } from 'react-native';\n\
|
|
1
|
+
{"version":3,"file":"Checkbox.types.js","sourceRoot":"","sources":["../src/Checkbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import { SyntheticEvent } from 'react';\nimport { ColorValue, NativeSyntheticEvent, ViewProps } from 'react-native';\n\nexport type CheckboxEvent = {\n /**\n * On native platforms, a `NodeHandle` for the element on which the event has occurred.\n * On web, a DOM node on which the event has occurred.\n */\n target: any;\n /**\n * A boolean representing checkbox current value.\n */\n value: boolean;\n};\n\n// @needsAudit\nexport type CheckboxProps = ViewProps & {\n /**\n * Value indicating if the checkbox should be rendered as checked or not.\n * @default false\n */\n value?: boolean;\n /**\n * If the checkbox is disabled, it becomes opaque and uncheckable.\n */\n disabled?: boolean;\n /**\n * The tint or color of the checkbox. This overrides the disabled opaque style.\n */\n color?: ColorValue;\n /**\n * Callback that is invoked when the user presses the checkbox.\n * @param event A native event containing the checkbox change.\n */\n onChange?: (\n event: NativeSyntheticEvent<CheckboxEvent> | SyntheticEvent<HTMLInputElement, CheckboxEvent>\n ) => void;\n /**\n * Callback that is invoked when the user presses the checkbox.\n * @param value A boolean indicating the new checked state of the checkbox.\n */\n onValueChange?: (value: boolean) => void;\n};\n"]}
|
package/build/ExpoCheckbox.d.ts
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
export default ExpoCheckbox
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { CheckboxProps } from './Checkbox.types';
|
|
3
|
+
export default class ExpoCheckbox extends React.PureComponent<CheckboxProps> {
|
|
4
|
+
private handleChange;
|
|
5
|
+
render(): JSX.Element;
|
|
6
|
+
}
|
|
4
7
|
//# sourceMappingURL=ExpoCheckbox.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpoCheckbox.d.ts","sourceRoot":"","sources":["../src/ExpoCheckbox.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ExpoCheckbox.d.ts","sourceRoot":"","sources":["../src/ExpoCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAKjD,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC;IAC1E,OAAO,CAAC,YAAY,CAElB;IAEF,MAAM;CA8BP"}
|
package/build/ExpoCheckbox.js
CHANGED
|
@@ -1,26 +1,26 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { StyleSheet, Image, Pressable, Platform } from 'react-native';
|
|
3
3
|
const checkmarkBase64 = 'data:image/png;base64,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';
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
|
|
4
|
+
export default class ExpoCheckbox extends React.PureComponent {
|
|
5
|
+
handleChange = () => {
|
|
6
|
+
this.props.onValueChange?.(!this.props.value);
|
|
7
|
+
};
|
|
8
|
+
render() {
|
|
9
|
+
const { color, disabled, onChange, onValueChange, style, value, ...other } = this.props;
|
|
10
|
+
return (React.createElement(Pressable, { ...other, disabled: disabled,
|
|
11
|
+
// Announces "checked" status and "checkbox" as the focused element
|
|
12
|
+
accessibilityRole: "checkbox", accessibilityState: { disabled, checked: value }, style: [
|
|
13
|
+
styles.root,
|
|
14
|
+
style,
|
|
15
|
+
value && styles.checked,
|
|
16
|
+
!!color && { backgroundColor: value ? color : undefined, borderColor: color },
|
|
17
|
+
disabled && styles.disabled,
|
|
18
|
+
value && disabled && styles.checkedAndDisabled,
|
|
19
|
+
], onPress: this.handleChange }, value && (React.createElement(Image, { source: {
|
|
20
|
+
uri: checkmarkBase64,
|
|
21
|
+
}, style: StyleSheet.absoluteFill }))));
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
24
|
const defaultEnabledColor = Platform.select({
|
|
25
25
|
ios: '#007AFF',
|
|
26
26
|
android: '#009688',
|
|
@@ -49,8 +49,4 @@ const styles = StyleSheet.create({
|
|
|
49
49
|
borderColor: disabledCheckedGrayColor,
|
|
50
50
|
},
|
|
51
51
|
});
|
|
52
|
-
ExpoCheckbox.isAvailableAsync = () => {
|
|
53
|
-
console.warn('Checkbox.isAvailableAsync() is deprecated and will be removed in future releases');
|
|
54
|
-
return Promise.resolve(true);
|
|
55
|
-
};
|
|
56
52
|
//# sourceMappingURL=ExpoCheckbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpoCheckbox.js","sourceRoot":"","sources":["../src/ExpoCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"ExpoCheckbox.js","sourceRoot":"","sources":["../src/ExpoCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAItE,MAAM,eAAe,GACnB,osJAAosJ,CAAC;AAEvsJ,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,KAAK,CAAC,aAA4B;IAClE,YAAY,GAAG,GAAG,EAAE;QAC1B,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAChD,CAAC,CAAC;IAEF,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAExF,OAAO,CACL,oBAAC,SAAS,OACJ,KAAK,EACT,QAAQ,EAAE,QAAQ;YAClB,mEAAmE;YACnE,iBAAiB,EAAC,UAAU,EAC5B,kBAAkB,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,EAChD,KAAK,EAAE;gBACL,MAAM,CAAC,IAAI;gBACX,KAAK;gBACL,KAAK,IAAI,MAAM,CAAC,OAAO;gBACvB,CAAC,CAAC,KAAK,IAAI,EAAE,eAAe,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE;gBAC7E,QAAQ,IAAI,MAAM,CAAC,QAAQ;gBAC3B,KAAK,IAAI,QAAQ,IAAI,MAAM,CAAC,kBAAkB;aAC/C,EACD,OAAO,EAAE,IAAI,CAAC,YAAY,IACzB,KAAK,IAAI,CACR,oBAAC,KAAK,IACJ,MAAM,EAAE;gBACN,GAAG,EAAE,eAAe;aACrB,EACD,KAAK,EAAE,UAAU,CAAC,YAAY,GAC9B,CACH,CACS,CACb,CAAC;IACJ,CAAC;CACF;AAED,MAAM,mBAAmB,GAAG,QAAQ,CAAC,MAAM,CAAC;IAC1C,GAAG,EAAE,SAAS;IACd,OAAO,EAAE,SAAS;CACnB,CAAC,CAAC;AACH,MAAM,gBAAgB,GAAG,SAAS,CAAC;AACnC,MAAM,iBAAiB,GAAG,SAAS,CAAC;AACpC,MAAM,wBAAwB,GAAG,SAAS,CAAC;AAE3C,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,IAAI,EAAE;QACJ,MAAM,EAAE,EAAE;QACV,KAAK,EAAE,EAAE;QACT,YAAY,EAAE,CAAC;QACf,WAAW,EAAE,CAAC;QACd,WAAW,EAAE,gBAAgB;KAC9B;IACD,OAAO,EAAE;QACP,eAAe,EAAE,mBAAmB;QACpC,WAAW,EAAE,mBAAmB;KACjC;IACD,QAAQ,EAAE;QACR,WAAW,EAAE,iBAAiB;QAC9B,eAAe,EAAE,aAAa;KAC/B;IACD,kBAAkB,EAAE;QAClB,eAAe,EAAE,wBAAwB;QACzC,WAAW,EAAE,wBAAwB;KACtC;CACF,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { StyleSheet, Image, Pressable, Platform } from 'react-native';\n\nimport { CheckboxProps } from './Checkbox.types';\n\nconst checkmarkBase64 =\n 'data:image/png;base64,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';\n\nexport default class ExpoCheckbox extends React.PureComponent<CheckboxProps> {\n private handleChange = () => {\n this.props.onValueChange?.(!this.props.value);\n };\n\n render() {\n const { color, disabled, onChange, onValueChange, style, value, ...other } = this.props;\n\n return (\n <Pressable\n {...other}\n disabled={disabled}\n // Announces \"checked\" status and \"checkbox\" as the focused element\n accessibilityRole=\"checkbox\"\n accessibilityState={{ disabled, checked: value }}\n style={[\n styles.root,\n style,\n value && styles.checked,\n !!color && { backgroundColor: value ? color : undefined, borderColor: color },\n disabled && styles.disabled,\n value && disabled && styles.checkedAndDisabled,\n ]}\n onPress={this.handleChange}>\n {value && (\n <Image\n source={{\n uri: checkmarkBase64,\n }}\n style={StyleSheet.absoluteFill}\n />\n )}\n </Pressable>\n );\n }\n}\n\nconst defaultEnabledColor = Platform.select({\n ios: '#007AFF',\n android: '#009688',\n});\nconst defaultGrayColor = '#657786';\nconst disabledGrayColor = '#CCD6DD';\nconst disabledCheckedGrayColor = '#AAB8C2';\n\nconst styles = StyleSheet.create({\n root: {\n height: 20,\n width: 20,\n borderRadius: 2,\n borderWidth: 2,\n borderColor: defaultGrayColor,\n },\n checked: {\n backgroundColor: defaultEnabledColor,\n borderColor: defaultEnabledColor,\n },\n disabled: {\n borderColor: disabledGrayColor,\n backgroundColor: 'transparent',\n },\n checkedAndDisabled: {\n backgroundColor: disabledCheckedGrayColor,\n borderColor: disabledCheckedGrayColor,\n },\n});\n"]}
|
|
@@ -7,8 +7,11 @@
|
|
|
7
7
|
*
|
|
8
8
|
* see: https://github.com/necolas/react-native-web
|
|
9
9
|
*/
|
|
10
|
-
import
|
|
11
|
-
|
|
12
|
-
export default ExpoCheckbox
|
|
10
|
+
import React from 'react';
|
|
11
|
+
import { CheckboxProps } from './Checkbox.types';
|
|
12
|
+
export default class ExpoCheckbox extends React.PureComponent<CheckboxProps> {
|
|
13
|
+
private handleChange;
|
|
14
|
+
render(): JSX.Element;
|
|
15
|
+
}
|
|
13
16
|
export declare const name = "ExpoCheckbox";
|
|
14
17
|
//# sourceMappingURL=ExpoCheckbox.web.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpoCheckbox.web.d.ts","sourceRoot":"","sources":["../src/ExpoCheckbox.web.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;
|
|
1
|
+
{"version":3,"file":"ExpoCheckbox.web.d.ts","sourceRoot":"","sources":["../src/ExpoCheckbox.web.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,aAAa,EAAiB,MAAM,kBAAkB,CAAC;AAEhE,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC;IAC1E,OAAO,CAAC,YAAY,CAKlB;IAEF,MAAM;CAkCP;AAyDD,eAAO,MAAM,IAAI,iBAAiB,CAAC"}
|
|
@@ -7,39 +7,40 @@
|
|
|
7
7
|
*
|
|
8
8
|
* see: https://github.com/necolas/react-native-web
|
|
9
9
|
*/
|
|
10
|
-
import React
|
|
10
|
+
import React from 'react';
|
|
11
11
|
// @ts-ignore
|
|
12
12
|
import { StyleSheet, View, unstable_createElement as createElement } from 'react-native';
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
const handleChange = useCallback((event) => {
|
|
13
|
+
export default class ExpoCheckbox extends React.PureComponent {
|
|
14
|
+
handleChange = (event) => {
|
|
16
15
|
const value = event.nativeEvent.target.checked;
|
|
17
16
|
event.nativeEvent.value = value;
|
|
18
|
-
onChange
|
|
19
|
-
onValueChange
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
17
|
+
this.props.onChange?.(event);
|
|
18
|
+
this.props.onValueChange?.(value);
|
|
19
|
+
};
|
|
20
|
+
render() {
|
|
21
|
+
const { color, disabled, onChange, onValueChange, style, value, ...other } = this.props;
|
|
22
|
+
const fakeControl = (React.createElement(View, { pointerEvents: "none", style: [
|
|
23
|
+
styles.fakeControl,
|
|
24
|
+
value && styles.fakeControlChecked,
|
|
25
|
+
// custom color
|
|
26
|
+
!!color && { backgroundColor: value ? color : undefined, borderColor: color },
|
|
27
|
+
disabled && styles.fakeControlDisabled,
|
|
28
|
+
value && disabled && styles.fakeControlCheckedAndDisabled,
|
|
29
|
+
] }));
|
|
30
|
+
const nativeControl = createElement('input', {
|
|
31
|
+
accessibilityChecked: value,
|
|
32
|
+
accessibilityDisabled: disabled,
|
|
33
|
+
checked: value,
|
|
34
|
+
disabled,
|
|
35
|
+
onChange: this.handleChange,
|
|
36
|
+
style: [styles.nativeControl, styles.cursorInherit],
|
|
37
|
+
type: 'checkbox',
|
|
38
|
+
});
|
|
39
|
+
return (React.createElement(View, { ...other, style: [styles.root, style, disabled && styles.cursorDefault] },
|
|
40
|
+
nativeControl,
|
|
41
|
+
fakeControl));
|
|
42
|
+
}
|
|
43
|
+
}
|
|
43
44
|
const styles = StyleSheet.create({
|
|
44
45
|
root: {
|
|
45
46
|
// @ts-ignore
|
|
@@ -92,10 +93,5 @@ const styles = StyleSheet.create({
|
|
|
92
93
|
WebkitAppearance: 'none',
|
|
93
94
|
},
|
|
94
95
|
});
|
|
95
|
-
export default ExpoCheckbox;
|
|
96
|
-
ExpoCheckbox.isAvailableAsync = () => {
|
|
97
|
-
console.warn('Checkbox.isAvailableAsync() is deprecated and will be removed in future releases');
|
|
98
|
-
return Promise.resolve(true);
|
|
99
|
-
};
|
|
100
96
|
export const name = 'ExpoCheckbox';
|
|
101
97
|
//# sourceMappingURL=ExpoCheckbox.web.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpoCheckbox.web.js","sourceRoot":"","sources":["../src/ExpoCheckbox.web.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"ExpoCheckbox.web.js","sourceRoot":"","sources":["../src/ExpoCheckbox.web.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,aAAa;AACb,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,sBAAsB,IAAI,aAAa,EAAE,MAAM,cAAc,CAAC;AAIzF,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,KAAK,CAAC,aAA4B;IAClE,YAAY,GAAG,CAAC,KAA4D,EAAE,EAAE;QACtF,MAAM,KAAK,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC;QAC/C,KAAK,CAAC,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;QAChC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC;QAC7B,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC,CAAC;IAEF,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAExF,MAAM,WAAW,GAAG,CAClB,oBAAC,IAAI,IACH,aAAa,EAAC,MAAM,EACpB,KAAK,EAAE;gBACL,MAAM,CAAC,WAAW;gBAClB,KAAK,IAAI,MAAM,CAAC,kBAAkB;gBAClC,eAAe;gBACf,CAAC,CAAC,KAAK,IAAI,EAAE,eAAe,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE;gBAC7E,QAAQ,IAAI,MAAM,CAAC,mBAAmB;gBACtC,KAAK,IAAI,QAAQ,IAAI,MAAM,CAAC,6BAA6B;aAC1D,GACD,CACH,CAAC;QAEF,MAAM,aAAa,GAAG,aAAa,CAAC,OAAO,EAAE;YAC3C,oBAAoB,EAAE,KAAK;YAC3B,qBAAqB,EAAE,QAAQ;YAC/B,OAAO,EAAE,KAAK;YACd,QAAQ;YACR,QAAQ,EAAE,IAAI,CAAC,YAAY;YAC3B,KAAK,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,aAAa,CAAC;YACnD,IAAI,EAAE,UAAU;SACjB,CAAC,CAAC;QAEH,OAAO,CACL,oBAAC,IAAI,OAAK,KAAK,EAAE,KAAK,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,IAAI,MAAM,CAAC,aAAa,CAAC;YAC3E,aAAa;YACb,WAAW,CACP,CACR,CAAC;IACJ,CAAC;CACF;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,IAAI,EAAE;QACJ,aAAa;QACb,MAAM,EAAE,SAAS;QACjB,MAAM,EAAE,EAAE;QACV,UAAU,EAAE,MAAM;QAClB,KAAK,EAAE,EAAE;KACV;IACD,aAAa,EAAE;QACb,aAAa;QACb,MAAM,EAAE,SAAS;KAClB;IAED,aAAa,EAAE;QACb,aAAa;QACb,MAAM,EAAE,SAAS;KAClB;IACD,WAAW,EAAE;QACX,GAAG,UAAU,CAAC,kBAAkB;QAChC,UAAU,EAAE,QAAQ;QACpB,eAAe,EAAE,MAAM;QACvB,WAAW,EAAE,SAAS;QACtB,YAAY,EAAE,CAAC;QACf,WAAW,EAAE,OAAO;QACpB,WAAW,EAAE,CAAC;QACd,MAAM,EAAE,MAAM;QACd,cAAc,EAAE,QAAQ;QACxB,KAAK,EAAE,MAAM;KACd;IACD,kBAAkB,EAAE;QAClB,eAAe,EAAE,SAAS;QAC1B,aAAa;QACb,eAAe,EACb,m4BAAm4B;QACr4B,gBAAgB,EAAE,WAAW;QAC7B,WAAW,EAAE,SAAS;KACvB;IACD,mBAAmB,EAAE;QACnB,WAAW,EAAE,SAAS;KACvB;IACD,6BAA6B,EAAE;QAC7B,eAAe,EAAE,SAAS;QAC1B,WAAW,EAAE,SAAS;KACvB;IACD,aAAa,EAAE;QACb,GAAG,UAAU,CAAC,kBAAkB;QAChC,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,CAAC;QACT,OAAO,EAAE,CAAC;QACV,KAAK,EAAE,MAAM;QACb,aAAa;QACb,gBAAgB,EAAE,MAAM;KACzB;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,IAAI,GAAG,cAAc,CAAC","sourcesContent":["/**\n * Copyright (c) Nicolas Gallagher.\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * see: https://github.com/necolas/react-native-web\n */\n\nimport React from 'react';\n// @ts-ignore\nimport { StyleSheet, View, unstable_createElement as createElement } from 'react-native';\n\nimport { CheckboxProps, CheckboxEvent } from './Checkbox.types';\n\nexport default class ExpoCheckbox extends React.PureComponent<CheckboxProps> {\n private handleChange = (event: React.SyntheticEvent<HTMLInputElement, CheckboxEvent>) => {\n const value = event.nativeEvent.target.checked;\n event.nativeEvent.value = value;\n this.props.onChange?.(event);\n this.props.onValueChange?.(value);\n };\n\n render() {\n const { color, disabled, onChange, onValueChange, style, value, ...other } = this.props;\n\n const fakeControl = (\n <View\n pointerEvents=\"none\"\n style={[\n styles.fakeControl,\n value && styles.fakeControlChecked,\n // custom color\n !!color && { backgroundColor: value ? color : undefined, borderColor: color },\n disabled && styles.fakeControlDisabled,\n value && disabled && styles.fakeControlCheckedAndDisabled,\n ]}\n />\n );\n\n const nativeControl = createElement('input', {\n accessibilityChecked: value,\n accessibilityDisabled: disabled,\n checked: value,\n disabled,\n onChange: this.handleChange,\n style: [styles.nativeControl, styles.cursorInherit],\n type: 'checkbox',\n });\n\n return (\n <View {...other} style={[styles.root, style, disabled && styles.cursorDefault]}>\n {nativeControl}\n {fakeControl}\n </View>\n );\n }\n}\n\nconst styles = StyleSheet.create({\n root: {\n // @ts-ignore\n cursor: 'pointer',\n height: 16,\n userSelect: 'none',\n width: 16,\n },\n cursorDefault: {\n // @ts-ignore\n cursor: 'default',\n },\n\n cursorInherit: {\n // @ts-ignore\n cursor: 'inherit',\n },\n fakeControl: {\n ...StyleSheet.absoluteFillObject,\n alignItems: 'center',\n backgroundColor: '#fff',\n borderColor: '#657786',\n borderRadius: 2,\n borderStyle: 'solid',\n borderWidth: 2,\n height: '100%',\n justifyContent: 'center',\n width: '100%',\n },\n fakeControlChecked: {\n backgroundColor: '#009688',\n // @ts-ignore\n backgroundImage:\n 'url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K\")',\n backgroundRepeat: 'no-repeat',\n borderColor: '#009688',\n },\n fakeControlDisabled: {\n borderColor: '#CCD6DD',\n },\n fakeControlCheckedAndDisabled: {\n backgroundColor: '#AAB8C2',\n borderColor: '#AAB8C2',\n },\n nativeControl: {\n ...StyleSheet.absoluteFillObject,\n height: '100%',\n margin: 0,\n padding: 0,\n width: '100%',\n // @ts-ignore\n WebkitAppearance: 'none',\n },\n});\n\nexport const name = 'ExpoCheckbox';\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "expo-checkbox",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.3.1",
|
|
4
4
|
"description": "Basic checkbox for iOS, Android, and web",
|
|
5
5
|
"main": "build/Checkbox.js",
|
|
6
6
|
"types": "build/Checkbox.d.ts",
|
|
@@ -38,5 +38,5 @@
|
|
|
38
38
|
"jest": {
|
|
39
39
|
"preset": "expo-module-scripts"
|
|
40
40
|
},
|
|
41
|
-
"gitHead": "
|
|
41
|
+
"gitHead": "1f8a6a09570fd451378565ca34933018ce48454e"
|
|
42
42
|
}
|
package/src/Checkbox.ts
CHANGED
package/src/Checkbox.types.ts
CHANGED
|
@@ -1,12 +1,23 @@
|
|
|
1
|
+
import { SyntheticEvent } from 'react';
|
|
1
2
|
import { ColorValue, NativeSyntheticEvent, ViewProps } from 'react-native';
|
|
2
3
|
|
|
3
|
-
|
|
4
|
-
|
|
4
|
+
export type CheckboxEvent = {
|
|
5
|
+
/**
|
|
6
|
+
* On native platforms, a `NodeHandle` for the element on which the event has occurred.
|
|
7
|
+
* On web, a DOM node on which the event has occurred.
|
|
8
|
+
*/
|
|
9
|
+
target: any;
|
|
10
|
+
/**
|
|
11
|
+
* A boolean representing checkbox current value.
|
|
12
|
+
*/
|
|
13
|
+
value: boolean;
|
|
14
|
+
};
|
|
5
15
|
|
|
6
16
|
// @needsAudit
|
|
7
17
|
export type CheckboxProps = ViewProps & {
|
|
8
18
|
/**
|
|
9
|
-
* Value indicating if the checkbox should be rendered as checked or not.
|
|
19
|
+
* Value indicating if the checkbox should be rendered as checked or not.
|
|
20
|
+
* @default false
|
|
10
21
|
*/
|
|
11
22
|
value?: boolean;
|
|
12
23
|
/**
|
|
@@ -21,18 +32,12 @@ export type CheckboxProps = ViewProps & {
|
|
|
21
32
|
* Callback that is invoked when the user presses the checkbox.
|
|
22
33
|
* @param event A native event containing the checkbox change.
|
|
23
34
|
*/
|
|
24
|
-
onChange?: (
|
|
35
|
+
onChange?: (
|
|
36
|
+
event: NativeSyntheticEvent<CheckboxEvent> | SyntheticEvent<HTMLInputElement, CheckboxEvent>
|
|
37
|
+
) => void;
|
|
25
38
|
/**
|
|
26
39
|
* Callback that is invoked when the user presses the checkbox.
|
|
27
40
|
* @param value A boolean indicating the new checked state of the checkbox.
|
|
28
41
|
*/
|
|
29
42
|
onValueChange?: (value: boolean) => void;
|
|
30
43
|
};
|
|
31
|
-
|
|
32
|
-
// @docsMissing
|
|
33
|
-
export type CheckboxComponent = React.FC<CheckboxProps> & {
|
|
34
|
-
/**
|
|
35
|
-
* @deprecated
|
|
36
|
-
*/
|
|
37
|
-
isAvailableAsync: () => Promise<boolean>;
|
|
38
|
-
};
|
package/src/ExpoCheckbox.tsx
CHANGED
|
@@ -1,49 +1,47 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { StyleSheet, Image, Pressable, Platform } from 'react-native';
|
|
3
3
|
|
|
4
|
-
import {
|
|
4
|
+
import { CheckboxProps } from './Checkbox.types';
|
|
5
5
|
|
|
6
6
|
const checkmarkBase64 =
|
|
7
7
|
'data:image/png;base64,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';
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
export default class ExpoCheckbox extends React.PureComponent<CheckboxProps> {
|
|
10
|
+
private handleChange = () => {
|
|
11
|
+
this.props.onValueChange?.(!this.props.value);
|
|
12
|
+
};
|
|
11
13
|
|
|
12
|
-
|
|
13
|
-
onValueChange
|
|
14
|
-
}, [onValueChange, value]);
|
|
14
|
+
render() {
|
|
15
|
+
const { color, disabled, onChange, onValueChange, style, value, ...other } = this.props;
|
|
15
16
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
ExpoCheckbox.displayName = 'Checkbox';
|
|
45
|
-
|
|
46
|
-
export default ExpoCheckbox;
|
|
17
|
+
return (
|
|
18
|
+
<Pressable
|
|
19
|
+
{...other}
|
|
20
|
+
disabled={disabled}
|
|
21
|
+
// Announces "checked" status and "checkbox" as the focused element
|
|
22
|
+
accessibilityRole="checkbox"
|
|
23
|
+
accessibilityState={{ disabled, checked: value }}
|
|
24
|
+
style={[
|
|
25
|
+
styles.root,
|
|
26
|
+
style,
|
|
27
|
+
value && styles.checked,
|
|
28
|
+
!!color && { backgroundColor: value ? color : undefined, borderColor: color },
|
|
29
|
+
disabled && styles.disabled,
|
|
30
|
+
value && disabled && styles.checkedAndDisabled,
|
|
31
|
+
]}
|
|
32
|
+
onPress={this.handleChange}>
|
|
33
|
+
{value && (
|
|
34
|
+
<Image
|
|
35
|
+
source={{
|
|
36
|
+
uri: checkmarkBase64,
|
|
37
|
+
}}
|
|
38
|
+
style={StyleSheet.absoluteFill}
|
|
39
|
+
/>
|
|
40
|
+
)}
|
|
41
|
+
</Pressable>
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
47
45
|
|
|
48
46
|
const defaultEnabledColor = Platform.select({
|
|
49
47
|
ios: '#007AFF',
|
|
@@ -74,8 +72,3 @@ const styles = StyleSheet.create({
|
|
|
74
72
|
borderColor: disabledCheckedGrayColor,
|
|
75
73
|
},
|
|
76
74
|
});
|
|
77
|
-
|
|
78
|
-
ExpoCheckbox.isAvailableAsync = () => {
|
|
79
|
-
console.warn('Checkbox.isAvailableAsync() is deprecated and will be removed in future releases');
|
|
80
|
-
return Promise.resolve(true);
|
|
81
|
-
};
|
package/src/ExpoCheckbox.web.tsx
CHANGED
|
@@ -8,58 +8,55 @@
|
|
|
8
8
|
* see: https://github.com/necolas/react-native-web
|
|
9
9
|
*/
|
|
10
10
|
|
|
11
|
-
import React
|
|
11
|
+
import React from 'react';
|
|
12
12
|
// @ts-ignore
|
|
13
13
|
import { StyleSheet, View, unstable_createElement as createElement } from 'react-native';
|
|
14
14
|
|
|
15
|
-
import {
|
|
15
|
+
import { CheckboxProps, CheckboxEvent } from './Checkbox.types';
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
export default class ExpoCheckbox extends React.PureComponent<CheckboxProps> {
|
|
18
|
+
private handleChange = (event: React.SyntheticEvent<HTMLInputElement, CheckboxEvent>) => {
|
|
19
|
+
const value = event.nativeEvent.target.checked;
|
|
20
|
+
event.nativeEvent.value = value;
|
|
21
|
+
this.props.onChange?.(event);
|
|
22
|
+
this.props.onValueChange?.(value);
|
|
23
|
+
};
|
|
19
24
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
const value = (event.nativeEvent.target as unknown as HTMLInputElement).checked;
|
|
23
|
-
event.nativeEvent.value = value;
|
|
24
|
-
onChange && onChange(event);
|
|
25
|
-
onValueChange && onValueChange(value);
|
|
26
|
-
},
|
|
27
|
-
[onChange, onValueChange]
|
|
28
|
-
);
|
|
25
|
+
render() {
|
|
26
|
+
const { color, disabled, onChange, onValueChange, style, value, ...other } = this.props;
|
|
29
27
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
28
|
+
const fakeControl = (
|
|
29
|
+
<View
|
|
30
|
+
pointerEvents="none"
|
|
31
|
+
style={[
|
|
32
|
+
styles.fakeControl,
|
|
33
|
+
value && styles.fakeControlChecked,
|
|
34
|
+
// custom color
|
|
35
|
+
!!color && { backgroundColor: value ? color : undefined, borderColor: color },
|
|
36
|
+
disabled && styles.fakeControlDisabled,
|
|
37
|
+
value && disabled && styles.fakeControlCheckedAndDisabled,
|
|
38
|
+
]}
|
|
39
|
+
/>
|
|
40
|
+
);
|
|
43
41
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
42
|
+
const nativeControl = createElement('input', {
|
|
43
|
+
accessibilityChecked: value,
|
|
44
|
+
accessibilityDisabled: disabled,
|
|
45
|
+
checked: value,
|
|
46
|
+
disabled,
|
|
47
|
+
onChange: this.handleChange,
|
|
48
|
+
style: [styles.nativeControl, styles.cursorInherit],
|
|
49
|
+
type: 'checkbox',
|
|
50
|
+
});
|
|
53
51
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
ExpoCheckbox.displayName = 'Checkbox';
|
|
52
|
+
return (
|
|
53
|
+
<View {...other} style={[styles.root, style, disabled && styles.cursorDefault]}>
|
|
54
|
+
{nativeControl}
|
|
55
|
+
{fakeControl}
|
|
56
|
+
</View>
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
63
60
|
|
|
64
61
|
const styles = StyleSheet.create({
|
|
65
62
|
root: {
|
|
@@ -116,11 +113,4 @@ const styles = StyleSheet.create({
|
|
|
116
113
|
},
|
|
117
114
|
});
|
|
118
115
|
|
|
119
|
-
export default ExpoCheckbox;
|
|
120
|
-
|
|
121
|
-
ExpoCheckbox.isAvailableAsync = () => {
|
|
122
|
-
console.warn('Checkbox.isAvailableAsync() is deprecated and will be removed in future releases');
|
|
123
|
-
return Promise.resolve(true);
|
|
124
|
-
};
|
|
125
|
-
|
|
126
116
|
export const name = 'ExpoCheckbox';
|