expo-checkbox - npm Package Compare versions

Comparing version 1.0.3 to 2.0.0

build/Checkbox.types.d.ts

@@ -6,16 +6,31 @@ import { ColorValue, NativeSyntheticEvent, ViewProps } from 'react-native';
 }>;
-export interface CheckboxProps extends ViewProps {
-    /** The value of the checkbox. If true the checkbox will be turned on. Default value is false. */
+export declare type CheckboxProps = ViewProps & {
+    /**
+     * Value indicating if the checkbox should be rendered as checked or not. Default value is `false`.
+     */
     value?: boolean;
-    /** If true the user won't be able to toggle the checkbox. Default value is false. */
+    /**
+     * If the checkbox is disabled, it becomes opaque and uncheckable.
+     */
     disabled?: boolean;
-    /** Sets the tint color of the checkbox */
+    /**
+     * The tint or color of the checkbox. This overrides the disabled opaque style.
+     */
     color?: ColorValue;
-    /** Used in case the props change removes the component. */
+    /**
+     * Callback that is invoked when the user presses the checkbox.
+     * @param event A native event containing the checkbox change.
+     */
     onChange?: (event: CheckboxEvent) => void;
-    /** Invoked with the new value when the value changes. */
+    /**
+     * Callback that is invoked when the user presses the checkbox.
+     * @param value A boolean indicating the new checked state of the checkbox.
+     */
     onValueChange?: (value: boolean) => void;
-}
+};
 export declare type CheckboxComponent = React.FC<CheckboxProps> & {
+    /**
+     * @deprecated
+     */
     isAvailableAsync: () => Promise<boolean>;
 };

build/ExpoCheckbox.d.ts

@@ -1,1 +0,3 @@
-export { default } from './CheckboxUnavailable';
+import { CheckboxComponent } from './Checkbox.types';
+declare const ExpoCheckbox: CheckboxComponent;
+export default ExpoCheckbox;

build/ExpoCheckbox.js

@@ -1,2 +0,56 @@
-export { default } from './CheckboxUnavailable';
+import React, { useCallback } from 'react';
+import { StyleSheet, Image, Pressable, Platform } from 'react-native';
+const checkmarkBase64 = 'data:image/png;base64,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';
+const ExpoCheckbox = (props) => {
+    const { color, disabled, onChange, onValueChange, style, value, ...other } = props;
+    const handleChange = useCallback(() => {
+        onValueChange && onValueChange(!value);
+    }, [onValueChange, value]);
+    return (React.createElement(Pressable, { ...other, disabled: disabled, 
+        // Announces "checked" status and "checkbox" as the focused element
+        accessibilityRole: "checkbox", accessibilityState: { disabled, checked: value }, style: [
+            styles.root,
+            style,
+            value && styles.checked,
+            !!color && { backgroundColor: value ? color : undefined, borderColor: color },
+            disabled && styles.disabled,
+            value && disabled && styles.checkedAndDisabled,
+        ], onPress: handleChange }, value && (React.createElement(Image, { source: {
+            uri: checkmarkBase64,
+        }, style: StyleSheet.absoluteFill }))));
+};
+ExpoCheckbox.displayName = 'Checkbox';
+export default ExpoCheckbox;
+const defaultEnabledColor = Platform.select({
+    ios: '#007AFF',
+    android: '#009688',
+});
+const defaultGrayColor = '#657786';
+const disabledGrayColor = '#CCD6DD';
+const disabledCheckedGrayColor = '#AAB8C2';
+const styles = StyleSheet.create({
+    root: {
+        height: 20,
+        width: 20,
+        borderRadius: 2,
+        borderWidth: 2,
+        borderColor: defaultGrayColor,
+    },
+    checked: {
+        backgroundColor: defaultEnabledColor,
+        borderColor: defaultEnabledColor,
+    },
+    disabled: {
+        borderColor: disabledGrayColor,
+        backgroundColor: 'transparent',
+    },
+    checkedAndDisabled: {
+        backgroundColor: disabledCheckedGrayColor,
+        borderColor: disabledCheckedGrayColor,
+    },
+});
+ExpoCheckbox.isAvailableAsync = () => {
+    console.warn('Checkbox.isAvailableAsync() is deprecated and will be removed in future releases');
+    return Promise.resolve(true);
+};
 //# sourceMappingURL=ExpoCheckbox.js.map

build/ExpoCheckbox.web.js

@@ -13,3 +13,3 @@ /**
 import { StyleSheet, View, unstable_createElement as createElement } from 'react-native';
-const ExpoCheckbox = props => {
+const ExpoCheckbox = (props) => {
     const { color, disabled, onChange, onValueChange, style, value, ...other } = props;
@@ -22,3 +22,3 @@ const handleChange = useCallback((event) => {
     }, [onChange, onValueChange]);
-    const fakeControl = (React.createElement(View, { style: [
+    const fakeControl = (React.createElement(View, { pointerEvents: "none", style: [
             styles.fakeControl,
@@ -32,2 +32,3 @@ value && styles.fakeControlChecked,
     const nativeControl = createElement('input', {
+        accessibilityState: { disabled, checked: value },
         checked: value,
@@ -39,8 +40,7 @@ disabled,
     });
-    return (React.createElement(View, Object.assign({}, other, { style: [styles.root, style, disabled && styles.cursorDefault] }),
-        fakeControl,
-        nativeControl));
+    return (React.createElement(View, { ...other, style: [styles.root, style, disabled && styles.cursorDefault] },
+        nativeControl,
+        fakeControl));
 };
 ExpoCheckbox.displayName = 'Checkbox';
-ExpoCheckbox.isAvailableAsync = async () => true;
 const styles = StyleSheet.create({
@@ -63,2 +63,3 @@ root: {
     fakeControl: {
+        ...StyleSheet.absoluteFillObject,
         alignItems: 'center',
@@ -92,9 +93,14 @@ backgroundColor: '#fff',
         margin: 0,
-        opacity: 0,
         padding: 0,
         width: '100%',
+        // @ts-ignore
+        WebkitAppearance: 'none',
     },
 });
 export default ExpoCheckbox;
+ExpoCheckbox.isAvailableAsync = () => {
+    console.warn('Checkbox.isAvailableAsync() is deprecated and will be removed in future releases');
+    return Promise.resolve(true);
+};
 export const name = 'ExpoCheckbox';
 //# sourceMappingURL=ExpoCheckbox.web.js.map

CHANGELOG.md

@@ -11,2 +11,10 @@ # Changelog
 
+### 💡 Others
+
+## 2.0.0 — 2021-09-28
+
+### 🛠 Breaking changes
+
+- Remove `isAvailableAsync()` and reimplement module in javascript. ([#13510](https://github.com/expo/expo/pull/13510) by [@ajsmth](https://github.com/ajsmth))
+
 ## 1.0.3 — 2021-03-10
@@ -13,0 +21,0 @@

package.json

 {
   "name": "expo-checkbox",
-  "version": "1.0.3",
-  "description": "Checkbox for Android and web",
+  "version": "2.0.0",
+  "description": "Basic checkbox for iOS, Android, and web",
   "main": "build/Checkbox.js",
@@ -31,3 +31,3 @@ "types": "build/Checkbox.d.ts",
   "license": "MIT",
-  "homepage": "https://docs.expo.io/versions/latest/sdk/checkbox",
+  "homepage": "https://docs.expo.dev/versions/latest/sdk/checkbox",
   "devDependencies": {
@@ -39,3 +39,3 @@ "expo-module-scripts": "^2.0.0"
   },
-  "gitHead": "20fd5d772b3909444cf5c981845625801fe51e78"
+  "gitHead": "1fffde73411ee7a642b98f1506a8de921805d52b"
 }

src/Checkbox.types.ts

 import { ColorValue, NativeSyntheticEvent, ViewProps } from 'react-native';
 
+// @docsMissing
 export type CheckboxEvent = NativeSyntheticEvent<{ target: number; value: boolean }>;
 
-export interface CheckboxProps extends ViewProps {
-  /** The value of the checkbox. If true the checkbox will be turned on. Default value is false. */
+// @needsAudit
+export type CheckboxProps = ViewProps & {
+  /**
+   * Value indicating if the checkbox should be rendered as checked or not. Default value is `false`.
+   */
   value?: boolean;
-  /** If true the user won't be able to toggle the checkbox. Default value is false. */
+  /**
+   * If the checkbox is disabled, it becomes opaque and uncheckable.
+   */
   disabled?: boolean;
-  /** Sets the tint color of the checkbox */
+  /**
+   * The tint or color of the checkbox. This overrides the disabled opaque style.
+   */
   color?: ColorValue;
-  /** Used in case the props change removes the component. */
+  /**
+   * Callback that is invoked when the user presses the checkbox.
+   * @param event A native event containing the checkbox change.
+   */
   onChange?: (event: CheckboxEvent) => void;
-  /** Invoked with the new value when the value changes. */
+  /**
+   * Callback that is invoked when the user presses the checkbox.
+   * @param value A boolean indicating the new checked state of the checkbox.
+   */
   onValueChange?: (value: boolean) => void;
-}
+};
 
+// @docsMissing
 export type CheckboxComponent = React.FC<CheckboxProps> & {
+  /**
+   * @deprecated
+   */
   isAvailableAsync: () => Promise<boolean>;
 };

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

45245

increased by68.62%

Lines of code

483

increased by37.22%

Worsened metrics

Number of package files

21

decreased by-27.59%

Number of low supply chain risk alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes