expo-checkbox - npm Package Compare versions

Comparing version 2.2.2 to 2.3.0

build/Checkbox.d.ts

@@ -1,3 +0,6 @@
-export { default } from './ExpoCheckbox';
+import Checkbox from './ExpoCheckbox';
 export * from './Checkbox.types';
+export { Checkbox };
+/** @hidden */
+export default Checkbox;
 //# sourceMappingURL=Checkbox.d.ts.map

build/Checkbox.js

@@ -1,3 +0,6 @@
-export { default } from './ExpoCheckbox';
+import Checkbox from './ExpoCheckbox';
 export * from './Checkbox.types';
+export { Checkbox };
+/** @hidden */
+export default Checkbox;
 //# sourceMappingURL=Checkbox.js.map

build/Checkbox.types.d.ts

@@ -0,9 +1,18 @@
+import { SyntheticEvent } from 'react';
 import { ColorValue, NativeSyntheticEvent, ViewProps } from 'react-native';
-export declare type CheckboxEvent = NativeSyntheticEvent<{
-    target: number;
+export type CheckboxEvent = {
+    /**
+     * On native platforms, a `NodeHandle` for the element on which the event has occurred.
+     * On web, a DOM node on which the event has occurred.
+     */
+    target: any;
+    /**
+     * A boolean representing checkbox current value.
+     */
     value: boolean;
-}>;
-export declare type CheckboxProps = ViewProps & {
+};
+export type CheckboxProps = ViewProps & {
     /**
-     * Value indicating if the checkbox should be rendered as checked or not. Default value is `false`.
+     * Value indicating if the checkbox should be rendered as checked or not.
+     * @default false
      */
@@ -23,3 +32,3 @@ value?: boolean;
      */
-    onChange?: (event: CheckboxEvent) => void;
+    onChange?: (event: NativeSyntheticEvent<CheckboxEvent> | SyntheticEvent<HTMLInputElement, CheckboxEvent>) => void;
     /**
@@ -31,8 +40,2 @@ * Callback that is invoked when the user presses the checkbox.
 };
-export declare type CheckboxComponent = React.FC<CheckboxProps> & {
-    /**
-     * @deprecated
-     */
-    isAvailableAsync: () => Promise<boolean>;
-};
 //# sourceMappingURL=Checkbox.types.d.ts.map

build/ExpoCheckbox.d.ts

@@ -1,4 +0,7 @@
-import { CheckboxComponent } from './Checkbox.types';
-declare const ExpoCheckbox: CheckboxComponent;
-export default ExpoCheckbox;
+import React from 'react';
+import { CheckboxProps } from './Checkbox.types';
+export default class ExpoCheckbox extends React.PureComponent<CheckboxProps> {
+    private handleChange;
+    render(): JSX.Element;
+}
 //# sourceMappingURL=ExpoCheckbox.d.ts.map

build/ExpoCheckbox.js

@@ -1,24 +0,24 @@
-import React, { useCallback } from 'react';
+import React 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;
+export default class ExpoCheckbox extends React.PureComponent {
+    handleChange = () => {
+        this.props.onValueChange?.(!this.props.value);
+    };
+    render() {
+        const { color, disabled, onChange, onValueChange, style, value, ...other } = this.props;
+        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: this.handleChange }, value && (React.createElement(Image, { source: {
+                uri: checkmarkBase64,
+            }, style: StyleSheet.absoluteFill }))));
+    }
+}
 const defaultEnabledColor = Platform.select({
@@ -52,6 +52,2 @@ ios: '#007AFF',
 });
-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.d.ts

@@ -10,6 +10,9 @@ /**
  */
-import { CheckboxComponent } from './Checkbox.types';
-declare const ExpoCheckbox: CheckboxComponent;
-export default ExpoCheckbox;
+import React from 'react';
+import { CheckboxProps } from './Checkbox.types';
+export default class ExpoCheckbox extends React.PureComponent<CheckboxProps> {
+    private handleChange;
+    render(): JSX.Element;
+}
 export declare const name = "ExpoCheckbox";
 //# sourceMappingURL=ExpoCheckbox.web.d.ts.map

build/ExpoCheckbox.web.js

@@ -10,35 +10,36 @@ /**
  */
-import React, { useCallback } from 'react';
+import React from 'react';
 // @ts-ignore
 import { StyleSheet, View, unstable_createElement as createElement } from 'react-native';
-const ExpoCheckbox = (props) => {
-    const { color, disabled, onChange, onValueChange, style, value, ...other } = props;
-    const handleChange = useCallback((event) => {
+export default class ExpoCheckbox extends React.PureComponent {
+    handleChange = (event) => {
         const value = event.nativeEvent.target.checked;
         event.nativeEvent.value = value;
-        onChange && onChange(event);
-        onValueChange && onValueChange(value);
-    }, [onChange, onValueChange]);
-    const fakeControl = (React.createElement(View, { pointerEvents: "none", style: [
-            styles.fakeControl,
-            value && styles.fakeControlChecked,
-            // custom color
-            !!color && { backgroundColor: value ? color : undefined, borderColor: color },
-            disabled && styles.fakeControlDisabled,
-            value && disabled && styles.fakeControlCheckedAndDisabled,
-        ] }));
-    const nativeControl = createElement('input', {
-        accessibilityChecked: value,
-        accessibilityDisabled: disabled,
-        checked: value,
-        disabled,
-        onChange: handleChange,
-        style: [styles.nativeControl, styles.cursorInherit],
-        type: 'checkbox',
-    });
-    return (React.createElement(View, { ...other, style: [styles.root, style, disabled && styles.cursorDefault] },
-        nativeControl,
-        fakeControl));
-};
-ExpoCheckbox.displayName = 'Checkbox';
+        this.props.onChange?.(event);
+        this.props.onValueChange?.(value);
+    };
+    render() {
+        const { color, disabled, onChange, onValueChange, style, value, ...other } = this.props;
+        const fakeControl = (React.createElement(View, { pointerEvents: "none", style: [
+                styles.fakeControl,
+                value && styles.fakeControlChecked,
+                // custom color
+                !!color && { backgroundColor: value ? color : undefined, borderColor: color },
+                disabled && styles.fakeControlDisabled,
+                value && disabled && styles.fakeControlCheckedAndDisabled,
+            ] }));
+        const nativeControl = createElement('input', {
+            accessibilityChecked: value,
+            accessibilityDisabled: disabled,
+            checked: value,
+            disabled,
+            onChange: this.handleChange,
+            style: [styles.nativeControl, styles.cursorInherit],
+            type: 'checkbox',
+        });
+        return (React.createElement(View, { ...other, style: [styles.root, style, disabled && styles.cursorDefault] },
+            nativeControl,
+            fakeControl));
+    }
+}
 const styles = StyleSheet.create({
@@ -96,8 +97,3 @@ root: {
 });
-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

@@ -13,2 +13,8 @@ # Changelog
 
+## 2.3.0 — 2023-02-03
+
+### ⚠️ Notices
+
+- Remove deprecated `isAvailableAsync()` method. ([#20961](https://github.com/expo/expo/pull/20961) by [@Simek](https://github.com/Simek))
+
 ## 2.2.2 — 2022-11-02
@@ -34,3 +40,3 @@
 
-- Remove `isAvailableAsync()` and reimplement module in javascript. ([#13510](https://github.com/expo/expo/pull/13510) by [@ajsmth](https://github.com/ajsmth))
+- Deprecate `isAvailableAsync()` and reimplement module in javascript. ([#13510](https://github.com/expo/expo/pull/13510) by [@ajsmth](https://github.com/ajsmth))
 
@@ -37,0 +43,0 @@ ## 1.0.3 — 2021-03-10

package.json

 {
   "name": "expo-checkbox",
-  "version": "2.2.2",
+  "version": "2.3.0",
   "description": "Basic checkbox for iOS, Android, and web",
@@ -41,3 +41,3 @@ "main": "build/Checkbox.js",
   },
-  "gitHead": "1a87dcc55895a9e16e3d4fd0fa78f2244c1d961f"
+  "gitHead": "1815e2eaad8c753588c7b1eb74420174a28e01f4"
 }

README.md

 # expo-checkbox
 
-`expo-checkbox` provides a material design styled checkbox on Android and web.
+`expo-checkbox` provides a basic `boolean` input element for Android, iOS and web.
 
@@ -5,0 +5,0 @@ ## API documentation

src/Checkbox.ts

@@ -1,2 +0,7 @@
-export { default } from './ExpoCheckbox';
+import Checkbox from './ExpoCheckbox';
 export * from './Checkbox.types';
+
+export { Checkbox };
+
+/** @hidden */
+export default Checkbox;

src/Checkbox.types.ts

@@ -0,5 +1,15 @@
+import { SyntheticEvent } from 'react';
 import { ColorValue, NativeSyntheticEvent, ViewProps } from 'react-native';
 
-// @docsMissing
-export type CheckboxEvent = NativeSyntheticEvent<{ target: number; value: boolean }>;
+export type CheckboxEvent = {
+  /**
+   * On native platforms, a `NodeHandle` for the element on which the event has occurred.
+   * On web, a DOM node on which the event has occurred.
+   */
+  target: any;
+  /**
+   * A boolean representing checkbox current value.
+   */
+  value: boolean;
+};
 
@@ -9,3 +19,4 @@ // @needsAudit
   /**
-   * Value indicating if the checkbox should be rendered as checked or not. Default value is `false`.
+   * Value indicating if the checkbox should be rendered as checked or not.
+   * @default false
    */
@@ -25,3 +36,5 @@ value?: boolean;
    */
-  onChange?: (event: CheckboxEvent) => void;
+  onChange?: (
+    event: NativeSyntheticEvent<CheckboxEvent> | SyntheticEvent<HTMLInputElement, CheckboxEvent>
+  ) => void;
   /**
@@ -33,9 +46,1 @@ * Callback that is invoked when the user presses the checkbox.
 };
-
-// @docsMissing
-export type CheckboxComponent = React.FC<CheckboxProps> & {
-  /**
-   * @deprecated
-   */
-  isAvailableAsync: () => Promise<boolean>;
-};

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

490

increased by1.03%

Worsened metrics

Total package byte prevSize

47069

decreased by-0.57%

No dependency changes