@proximus/lavender-checkbox-native 2.1.0-alpha.0 → 2.1.1-alpha.1

package/dist/PxCheckBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PxCheckBox.d.ts","sourceRoot":"","sources":["../src/PxCheckBox.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,EACL,kBAAkB,EAClB,SAAS,EAGT,SAAS,EACV,MAAM,cAAc,CAAC;AAKtB,OAAO,YAAY,CAAC;AAEpB,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACrC;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,KAAK,EACL,QAAgB,EAChB,YAAY,EACZ,GAAG,kBAAkB,EACtB,EAAE,cAAc,GAAG,kBAAkB,qBAmHrC"}
+{"version":3,"file":"PxCheckBox.d.ts","sourceRoot":"","sources":["../src/PxCheckBox.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,EACL,kBAAkB,EAElB,SAAS,EAGT,SAAS,EACV,MAAM,cAAc,CAAC;AAKtB,OAAO,YAAY,CAAC;AAEpB,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACrC;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,KAAK,EACL,QAAgB,EAChB,YAAY,EACZ,GAAG,kBAAkB,EACtB,EAAE,cAAc,GAAG,kBAAkB,qBAuHrC"}

package/dist/PxCheckBox.js

@@ -1,22 +1,22 @@
 import CheckBox from '@react-native-community/checkbox';
 import React, { useCallback, useEffect, useState } from 'react';
-import { StyleSheet, TouchableOpacity, } from 'react-native';
+import { Platform, StyleSheet, TouchableOpacity, } from 'react-native';
 import { a11y, e2eID } from '@proximus/lavender-common-native';
 import { useTheme } from '@proximus/lavender-styling-native';
 import { Body } from '@proximus/lavender-texts-native';
 import 'nullthrows';
 export function PxCheckBox({ checked, onChange, testID, label, disabled = false, wrapperStyle, ...accessibilityProps }) {
     const { theme } = useTheme();
+    const [internalChecked, setInternalChecked] = useState(checked);
+    useEffect(() => {
+        setInternalChecked(checked);
+    }, [checked, setInternalChecked]);
     const onChangeCallback = useCallback((value) => {
         setInternalChecked(value);
         if (onChange) {
             onChange(value);
         }
-    }, [onChange]);
-    const [internalChecked, setInternalChecked] = useState(checked);
-    useEffect(() => {
-        setInternalChecked(checked);
-    }, [checked]);
+    }, [onChange, setInternalChecked]);
     const colors = {
         disabledBackgroundColor: theme.t('ColorBackgroundStateDisabledDefault'),
         disabledLabelColor: theme.t('ColorTextStateDisabledDefault'),
@@ -61,7 +61,11 @@ export function PxCheckBox({ checked, onChange, testID, label, disabled = false,
                 ? colors.disabledBackgroundColor
                 : colors.checkedBackgroundColor, onFillColor: disabled
                 ? colors.disabledBackgroundColor
-                : colors.checkedBackgroundColor, onCheckColor: disabled ? colors.disabledCheckColor : colors.checkColor, animationDuration: 0.2, value: internalChecked, disabled: disabled, boxType: 'square', onValueChange: onChangeCallback, focusable: true, ...a11y({
+                : colors.checkedBackgroundColor, onCheckColor: disabled ? colors.disabledCheckColor : colors.checkColor, animationDuration: 0.2, value: internalChecked, disabled: disabled, boxType: 'square', ...(Platform.OS === 'android' && {
+                // on Android, native checkbox grabs all touch events and TouchableOpacity onpress not called
+                // so need to rely on native onValueChange
+                onValueChange: onChangeCallback,
+            }), focusable: true, ...a11y({
                 accessible: accessibilityProps.accessible,
                 accessibilityLabel: accessibilityProps.accessibilityLabel || label,
                 accessibilityHint: accessibilityProps.accessibilityHint,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-checkbox-native",
-  "version": "2.1.0-alpha.0",
+  "version": "2.1.1-alpha.1",
   "description": "Lavender Checkbox native component",
   "license": "MIT",
   "type": "module",