expo-checkbox 2.6.0 → 3.0.0
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 +16 -0
- package/build/Checkbox.types.d.ts +2 -2
- package/build/Checkbox.types.d.ts.map +1 -1
- package/build/Checkbox.types.js.map +1 -1
- package/build/ExpoCheckbox.d.ts +2 -6
- package/build/ExpoCheckbox.d.ts.map +1 -1
- package/build/ExpoCheckbox.js +18 -20
- package/build/ExpoCheckbox.js.map +1 -1
- package/build/ExpoCheckbox.web.d.ts +10 -5
- package/build/ExpoCheckbox.web.d.ts.map +1 -1
- package/build/ExpoCheckbox.web.js +27 -28
- package/build/ExpoCheckbox.web.js.map +1 -1
- package/package.json +2 -2
- package/src/Checkbox.types.ts +2 -2
- package/src/ExpoCheckbox.tsx +40 -34
- package/src/ExpoCheckbox.web.tsx +19 -19
package/CHANGELOG.md
CHANGED
|
@@ -10,6 +10,22 @@
|
|
|
10
10
|
|
|
11
11
|
### 💡 Others
|
|
12
12
|
|
|
13
|
+
## 3.0.0 — 2024-04-18
|
|
14
|
+
|
|
15
|
+
### 🎉 New features
|
|
16
|
+
|
|
17
|
+
- Mark React client components with "use client" directives. ([#27300](https://github.com/expo/expo/pull/27300) by [@EvanBacon](https://github.com/EvanBacon))
|
|
18
|
+
|
|
19
|
+
### 💡 Others
|
|
20
|
+
|
|
21
|
+
- Convert to function components and remove "use client" directives. ([#27438](https://github.com/expo/expo/pull/27438) by [@EvanBacon](https://github.com/EvanBacon))
|
|
22
|
+
|
|
23
|
+
## 2.7.0 — 2023-11-14
|
|
24
|
+
|
|
25
|
+
### 💡 Others
|
|
26
|
+
|
|
27
|
+
- Use `pointerEvent` style instead of prop for components on web. ([#24931](https://github.com/expo/expo/pull/24931) by [@EvanBacon](https://github.com/EvanBacon))
|
|
28
|
+
|
|
13
29
|
## 2.6.0 — 2023-10-17
|
|
14
30
|
|
|
15
31
|
### 💡 Others
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { SyntheticEvent } from 'react';
|
|
2
|
-
import { ColorValue, NativeSyntheticEvent, ViewProps } from 'react-native';
|
|
1
|
+
import type { SyntheticEvent } from 'react';
|
|
2
|
+
import type { ColorValue, NativeSyntheticEvent, ViewProps } from 'react-native';
|
|
3
3
|
export type CheckboxEvent = {
|
|
4
4
|
/**
|
|
5
5
|
* On native platforms, a `NodeHandle` for the element on which the event has occurred.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.types.d.ts","sourceRoot":"","sources":["../src/Checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Checkbox.types.d.ts","sourceRoot":"","sources":["../src/Checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,EAAE,UAAU,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEhF,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 { 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"]}
|
|
1
|
+
{"version":3,"file":"Checkbox.types.js","sourceRoot":"","sources":["../src/Checkbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { SyntheticEvent } from 'react';\nimport type { 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,7 +1,3 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
export default class ExpoCheckbox extends React.PureComponent<CheckboxProps> {
|
|
4
|
-
private handleChange;
|
|
5
|
-
render(): JSX.Element;
|
|
6
|
-
}
|
|
1
|
+
import type { CheckboxProps } from './Checkbox.types';
|
|
2
|
+
export default function ExpoCheckbox({ color, disabled, onChange, onValueChange, style, value, ...other }: CheckboxProps): JSX.Element;
|
|
7
3
|
//# 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":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAKtD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,KAAK,EACL,KAAK,EACL,GAAG,KAAK,EACT,EAAE,aAAa,eA+Bf"}
|
package/build/ExpoCheckbox.js
CHANGED
|
@@ -1,27 +1,25 @@
|
|
|
1
|
+
// Copyright © 2024 650 Industries.
|
|
1
2
|
import React from 'react';
|
|
2
3
|
import { StyleSheet, Image, Pressable, Platform } from 'react-native';
|
|
3
4
|
const checkmarkBase64 = 'data:image/png;base64,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';
|
|
4
|
-
export default
|
|
5
|
-
handleChange = () => {
|
|
6
|
-
|
|
5
|
+
export default function ExpoCheckbox({ color, disabled, onChange, onValueChange, style, value, ...other }) {
|
|
6
|
+
const handleChange = () => {
|
|
7
|
+
onValueChange?.(!value);
|
|
7
8
|
};
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
}} style={StyleSheet.absoluteFill}/>)}
|
|
23
|
-
</Pressable>);
|
|
24
|
-
}
|
|
9
|
+
return (<Pressable {...other} disabled={disabled}
|
|
10
|
+
// Announces "checked" status and "checkbox" as the focused element
|
|
11
|
+
accessibilityRole="checkbox" accessibilityState={{ disabled, checked: value }} style={[
|
|
12
|
+
styles.root,
|
|
13
|
+
style,
|
|
14
|
+
value && styles.checked,
|
|
15
|
+
!!color && { backgroundColor: value ? color : undefined, borderColor: color },
|
|
16
|
+
disabled && styles.disabled,
|
|
17
|
+
value && disabled && styles.checkedAndDisabled,
|
|
18
|
+
]} onPress={handleChange}>
|
|
19
|
+
{value && (<Image source={{
|
|
20
|
+
uri: checkmarkBase64,
|
|
21
|
+
}} style={StyleSheet.absoluteFill}/>)}
|
|
22
|
+
</Pressable>);
|
|
25
23
|
}
|
|
26
24
|
const defaultEnabledColor = Platform.select({
|
|
27
25
|
ios: '#007AFF',
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
1
|
+
{"version":3,"file":"ExpoCheckbox.js","sourceRoot":"","sources":["../src/ExpoCheckbox.tsx"],"names":[],"mappings":"AAAA,mCAAmC;AAEnC,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,UAAU,YAAY,CAAC,EACnC,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,KAAK,EACL,KAAK,EACL,GAAG,KAAK,EACM;IACd,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,aAAa,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,SAAS,CACR,IAAI,KAAK,CAAC,CACV,QAAQ,CAAC,CAAC,QAAQ,CAAC;IACnB,mEAAmE;IACnE,iBAAiB,CAAC,UAAU,CAC5B,kBAAkB,CAAC,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CACjD,KAAK,CAAC,CAAC;YACL,MAAM,CAAC,IAAI;YACX,KAAK;YACL,KAAK,IAAI,MAAM,CAAC,OAAO;YACvB,CAAC,CAAC,KAAK,IAAI,EAAE,eAAe,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE;YAC7E,QAAQ,IAAI,MAAM,CAAC,QAAQ;YAC3B,KAAK,IAAI,QAAQ,IAAI,MAAM,CAAC,kBAAkB;SAC/C,CAAC,CACF,OAAO,CAAC,CAAC,YAAY,CAAC,CACtB;MAAA,CAAC,KAAK,IAAI,CACR,CAAC,KAAK,CACJ,MAAM,CAAC,CAAC;gBACN,GAAG,EAAE,eAAe;aACrB,CAAC,CACF,KAAK,CAAC,CAAC,UAAU,CAAC,YAAY,CAAC,EAC/B,CACH,CACH;IAAA,EAAE,SAAS,CAAC,CACb,CAAC;AACJ,CAAC;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":["// Copyright © 2024 650 Industries.\n\nimport React from 'react';\nimport { StyleSheet, Image, Pressable, Platform } from 'react-native';\n\nimport type { CheckboxProps } from './Checkbox.types';\n\nconst checkmarkBase64 =\n 'data:image/png;base64,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';\n\nexport default function ExpoCheckbox({\n color,\n disabled,\n onChange,\n onValueChange,\n style,\n value,\n ...other\n}: CheckboxProps) {\n const handleChange = () => {\n onValueChange?.(!value);\n };\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={handleChange}>\n {value && (\n <Image\n source={{\n uri: checkmarkBase64,\n }}\n style={StyleSheet.absoluteFill}\n />\n )}\n </Pressable>\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"]}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
+
* Copyright © 2024 650 Industries.
|
|
2
3
|
* Copyright (c) Nicolas Gallagher.
|
|
3
4
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
4
5
|
*
|
|
@@ -8,10 +9,14 @@
|
|
|
8
9
|
* see: https://github.com/necolas/react-native-web
|
|
9
10
|
*/
|
|
10
11
|
import React from 'react';
|
|
11
|
-
import {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
12
|
+
import type { CheckboxEvent } from './Checkbox.types';
|
|
13
|
+
declare const ExpoCheckbox: React.ForwardRefExoticComponent<import("react-native").ViewProps & {
|
|
14
|
+
value?: boolean | undefined;
|
|
15
|
+
disabled?: boolean | undefined;
|
|
16
|
+
color?: import("react-native").ColorValue | undefined;
|
|
17
|
+
onChange?: ((event: import("react-native").NativeSyntheticEvent<CheckboxEvent> | React.SyntheticEvent<HTMLInputElement, CheckboxEvent>) => void) | undefined;
|
|
18
|
+
onValueChange?: ((value: boolean) => void) | undefined;
|
|
19
|
+
} & React.RefAttributes<unknown>>;
|
|
20
|
+
export default ExpoCheckbox;
|
|
16
21
|
export declare const name = "ExpoCheckbox";
|
|
17
22
|
//# 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
|
|
1
|
+
{"version":3,"file":"ExpoCheckbox.web.d.ts","sourceRoot":"","sources":["../src/ExpoCheckbox.web.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAiB,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAErE,QAAA,MAAM,YAAY;;;;;;iCAuCjB,CAAC;AAEF,eAAe,YAAY,CAAC;AA0D5B,eAAO,MAAM,IAAI,iBAAiB,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
+
* Copyright © 2024 650 Industries.
|
|
2
3
|
* Copyright (c) Nicolas Gallagher.
|
|
3
4
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
4
5
|
*
|
|
@@ -8,40 +9,37 @@
|
|
|
8
9
|
* see: https://github.com/necolas/react-native-web
|
|
9
10
|
*/
|
|
10
11
|
import React from 'react';
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
handleChange = (event) => {
|
|
12
|
+
import { StyleSheet, View, unstable_createElement as createElement } from 'react-native-web';
|
|
13
|
+
const ExpoCheckbox = React.forwardRef(({ color, disabled, onChange, onValueChange, style, value, ...other }, ref) => {
|
|
14
|
+
const handleChange = (event) => {
|
|
15
15
|
const value = event.nativeEvent.target.checked;
|
|
16
16
|
event.nativeEvent.value = value;
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
onChange?.(event);
|
|
18
|
+
onValueChange?.(value);
|
|
19
19
|
};
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
});
|
|
39
|
-
return (<View {...other} style={[styles.root, style, disabled && styles.cursorDefault]}>
|
|
20
|
+
const fakeControl = (<View style={[
|
|
21
|
+
styles.fakeControl,
|
|
22
|
+
value && styles.fakeControlChecked,
|
|
23
|
+
// custom color
|
|
24
|
+
!!color && { backgroundColor: value ? color : undefined, borderColor: color },
|
|
25
|
+
disabled && styles.fakeControlDisabled,
|
|
26
|
+
value && disabled && styles.fakeControlCheckedAndDisabled,
|
|
27
|
+
]}/>);
|
|
28
|
+
const nativeControl = createElement('input', {
|
|
29
|
+
'aria-checked': value,
|
|
30
|
+
'aria-disabled': disabled,
|
|
31
|
+
checked: value,
|
|
32
|
+
disabled,
|
|
33
|
+
onChange: handleChange,
|
|
34
|
+
style: [styles.nativeControl, styles.cursorInherit],
|
|
35
|
+
type: 'checkbox',
|
|
36
|
+
});
|
|
37
|
+
return (<View ref={ref} {...other} style={[styles.root, style, disabled && styles.cursorDefault]}>
|
|
40
38
|
{nativeControl}
|
|
41
39
|
{fakeControl}
|
|
42
40
|
</View>);
|
|
43
|
-
|
|
44
|
-
|
|
41
|
+
});
|
|
42
|
+
export default ExpoCheckbox;
|
|
45
43
|
const styles = StyleSheet.create({
|
|
46
44
|
root: {
|
|
47
45
|
// @ts-ignore
|
|
@@ -60,6 +58,7 @@ const styles = StyleSheet.create({
|
|
|
60
58
|
},
|
|
61
59
|
fakeControl: {
|
|
62
60
|
...StyleSheet.absoluteFillObject,
|
|
61
|
+
pointerEvents: 'none',
|
|
63
62
|
alignItems: 'center',
|
|
64
63
|
backgroundColor: '#fff',
|
|
65
64
|
borderColor: '#657786',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpoCheckbox.web.js","sourceRoot":"","sources":["../src/ExpoCheckbox.web.tsx"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"ExpoCheckbox.web.js","sourceRoot":"","sources":["../src/ExpoCheckbox.web.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright © 2024 650 Industries.\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';\nimport { StyleSheet, View, unstable_createElement as createElement } from 'react-native-web';\n\nimport type { CheckboxProps, CheckboxEvent } from './Checkbox.types';\n\nconst ExpoCheckbox = React.forwardRef(\n ({ color, disabled, onChange, onValueChange, style, value, ...other }: CheckboxProps, ref) => {\n const handleChange = (event: React.SyntheticEvent<HTMLInputElement, CheckboxEvent>) => {\n const value = event.nativeEvent.target.checked;\n event.nativeEvent.value = value;\n onChange?.(event);\n onValueChange?.(value);\n };\n\n const fakeControl = (\n <View\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 'aria-checked': value,\n 'aria-disabled': disabled,\n checked: value,\n disabled,\n onChange: handleChange,\n style: [styles.nativeControl, styles.cursorInherit],\n type: 'checkbox',\n });\n\n return (\n <View ref={ref} {...other} style={[styles.root, style, disabled && styles.cursorDefault]}>\n {nativeControl}\n {fakeControl}\n </View>\n );\n }\n);\n\nexport default ExpoCheckbox;\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 pointerEvents: 'none',\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": "
|
|
3
|
+
"version": "3.0.0",
|
|
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": "4165b8d72e1b9a1889c2767534cc619e21468110"
|
|
42
42
|
}
|
package/src/Checkbox.types.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { SyntheticEvent } from 'react';
|
|
2
|
-
import { ColorValue, NativeSyntheticEvent, ViewProps } from 'react-native';
|
|
1
|
+
import type { SyntheticEvent } from 'react';
|
|
2
|
+
import type { ColorValue, NativeSyntheticEvent, ViewProps } from 'react-native';
|
|
3
3
|
|
|
4
4
|
export type CheckboxEvent = {
|
|
5
5
|
/**
|
package/src/ExpoCheckbox.tsx
CHANGED
|
@@ -1,46 +1,52 @@
|
|
|
1
|
+
// Copyright © 2024 650 Industries.
|
|
2
|
+
|
|
1
3
|
import React from 'react';
|
|
2
4
|
import { StyleSheet, Image, Pressable, Platform } from 'react-native';
|
|
3
5
|
|
|
4
|
-
import { CheckboxProps } from './Checkbox.types';
|
|
6
|
+
import type { CheckboxProps } from './Checkbox.types';
|
|
5
7
|
|
|
6
8
|
const checkmarkBase64 =
|
|
7
9
|
'data:image/png;base64,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';
|
|
8
10
|
|
|
9
|
-
export default
|
|
10
|
-
|
|
11
|
-
|
|
11
|
+
export default function ExpoCheckbox({
|
|
12
|
+
color,
|
|
13
|
+
disabled,
|
|
14
|
+
onChange,
|
|
15
|
+
onValueChange,
|
|
16
|
+
style,
|
|
17
|
+
value,
|
|
18
|
+
...other
|
|
19
|
+
}: CheckboxProps) {
|
|
20
|
+
const handleChange = () => {
|
|
21
|
+
onValueChange?.(!value);
|
|
12
22
|
};
|
|
13
23
|
|
|
14
|
-
|
|
15
|
-
|
|
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
|
-
</Pressable>
|
|
42
|
-
);
|
|
43
|
-
}
|
|
24
|
+
return (
|
|
25
|
+
<Pressable
|
|
26
|
+
{...other}
|
|
27
|
+
disabled={disabled}
|
|
28
|
+
// Announces "checked" status and "checkbox" as the focused element
|
|
29
|
+
accessibilityRole="checkbox"
|
|
30
|
+
accessibilityState={{ disabled, checked: value }}
|
|
31
|
+
style={[
|
|
32
|
+
styles.root,
|
|
33
|
+
style,
|
|
34
|
+
value && styles.checked,
|
|
35
|
+
!!color && { backgroundColor: value ? color : undefined, borderColor: color },
|
|
36
|
+
disabled && styles.disabled,
|
|
37
|
+
value && disabled && styles.checkedAndDisabled,
|
|
38
|
+
]}
|
|
39
|
+
onPress={handleChange}>
|
|
40
|
+
{value && (
|
|
41
|
+
<Image
|
|
42
|
+
source={{
|
|
43
|
+
uri: checkmarkBase64,
|
|
44
|
+
}}
|
|
45
|
+
style={StyleSheet.absoluteFill}
|
|
46
|
+
/>
|
|
47
|
+
)}
|
|
48
|
+
</Pressable>
|
|
49
|
+
);
|
|
44
50
|
}
|
|
45
51
|
|
|
46
52
|
const defaultEnabledColor = Platform.select({
|
package/src/ExpoCheckbox.web.tsx
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
+
* Copyright © 2024 650 Industries.
|
|
2
3
|
* Copyright (c) Nicolas Gallagher.
|
|
3
4
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
4
5
|
*
|
|
@@ -9,25 +10,21 @@
|
|
|
9
10
|
*/
|
|
10
11
|
|
|
11
12
|
import React from 'react';
|
|
12
|
-
|
|
13
|
-
import { StyleSheet, View, unstable_createElement as createElement } from 'react-native';
|
|
13
|
+
import { StyleSheet, View, unstable_createElement as createElement } from 'react-native-web';
|
|
14
14
|
|
|
15
|
-
import { CheckboxProps, CheckboxEvent } from './Checkbox.types';
|
|
15
|
+
import type { CheckboxProps, CheckboxEvent } from './Checkbox.types';
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
const
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
render() {
|
|
26
|
-
const { color, disabled, onChange, onValueChange, style, value, ...other } = this.props;
|
|
17
|
+
const ExpoCheckbox = React.forwardRef(
|
|
18
|
+
({ color, disabled, onChange, onValueChange, style, value, ...other }: CheckboxProps, ref) => {
|
|
19
|
+
const handleChange = (event: React.SyntheticEvent<HTMLInputElement, CheckboxEvent>) => {
|
|
20
|
+
const value = event.nativeEvent.target.checked;
|
|
21
|
+
event.nativeEvent.value = value;
|
|
22
|
+
onChange?.(event);
|
|
23
|
+
onValueChange?.(value);
|
|
24
|
+
};
|
|
27
25
|
|
|
28
26
|
const fakeControl = (
|
|
29
27
|
<View
|
|
30
|
-
pointerEvents="none"
|
|
31
28
|
style={[
|
|
32
29
|
styles.fakeControl,
|
|
33
30
|
value && styles.fakeControlChecked,
|
|
@@ -40,23 +37,25 @@ export default class ExpoCheckbox extends React.PureComponent<CheckboxProps> {
|
|
|
40
37
|
);
|
|
41
38
|
|
|
42
39
|
const nativeControl = createElement('input', {
|
|
43
|
-
|
|
44
|
-
|
|
40
|
+
'aria-checked': value,
|
|
41
|
+
'aria-disabled': disabled,
|
|
45
42
|
checked: value,
|
|
46
43
|
disabled,
|
|
47
|
-
onChange:
|
|
44
|
+
onChange: handleChange,
|
|
48
45
|
style: [styles.nativeControl, styles.cursorInherit],
|
|
49
46
|
type: 'checkbox',
|
|
50
47
|
});
|
|
51
48
|
|
|
52
49
|
return (
|
|
53
|
-
<View {...other} style={[styles.root, style, disabled && styles.cursorDefault]}>
|
|
50
|
+
<View ref={ref} {...other} style={[styles.root, style, disabled && styles.cursorDefault]}>
|
|
54
51
|
{nativeControl}
|
|
55
52
|
{fakeControl}
|
|
56
53
|
</View>
|
|
57
54
|
);
|
|
58
55
|
}
|
|
59
|
-
|
|
56
|
+
);
|
|
57
|
+
|
|
58
|
+
export default ExpoCheckbox;
|
|
60
59
|
|
|
61
60
|
const styles = StyleSheet.create({
|
|
62
61
|
root: {
|
|
@@ -77,6 +76,7 @@ const styles = StyleSheet.create({
|
|
|
77
76
|
},
|
|
78
77
|
fakeControl: {
|
|
79
78
|
...StyleSheet.absoluteFillObject,
|
|
79
|
+
pointerEvents: 'none',
|
|
80
80
|
alignItems: 'center',
|
|
81
81
|
backgroundColor: '#fff',
|
|
82
82
|
borderColor: '#657786',
|