expo-checkbox - npm Package Compare versions

Comparing version 2.7.0 to 3.0.0

build/Checkbox.types.d.ts

@@ -1,3 +0,3 @@
-import { SyntheticEvent } from 'react';
-import { ColorValue, NativeSyntheticEvent, ViewProps } from 'react-native';
+import type { SyntheticEvent } from 'react';
+import type { ColorValue, NativeSyntheticEvent, ViewProps } from 'react-native';
 export type CheckboxEvent = {
@@ -4,0 +4,0 @@ /**

build/ExpoCheckbox.d.ts

@@ -1,7 +0,3 @@
-import React from 'react';
-import { CheckboxProps } from './Checkbox.types';
-export default class ExpoCheckbox extends React.PureComponent<CheckboxProps> {
-    private handleChange;
-    render(): JSX.Element;
-}
+import type { CheckboxProps } from './Checkbox.types';
+export default function ExpoCheckbox({ color, disabled, onChange, onValueChange, style, value, ...other }: CheckboxProps): JSX.Element;
 //# sourceMappingURL=ExpoCheckbox.d.ts.map

build/ExpoCheckbox.js

@@ -0,25 +1,23 @@
+// Copyright © 2024 650 Industries.
 import React from 'react';
 import { StyleSheet, Image, Pressable, Platform } from 'react-native';
 const checkmarkBase64 = 'data:image/png;base64,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';
-export default class ExpoCheckbox extends React.PureComponent {
-    handleChange = () => {
-        this.props.onValueChange?.(!this.props.value);
+export default function ExpoCheckbox({ color, disabled, onChange, onValueChange, style, value, ...other }) {
+    const handleChange = () => {
+        onValueChange?.(!value);
     };
-    render() {
-        const { color, disabled, onChange, onValueChange, style, value, ...other } = this.props;
-        return (<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 && (<Image source={{
-                    uri: checkmarkBase64,
-                }} style={StyleSheet.absoluteFill}/>)}
-      </Pressable>);
-    }
+    return (<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 && (<Image source={{
+                uri: checkmarkBase64,
+            }} style={StyleSheet.absoluteFill}/>)}
+    </Pressable>);
 }
@@ -26,0 +24,0 @@ const defaultEnabledColor = Platform.select({

build/ExpoCheckbox.web.d.ts

 /**
+ * Copyright © 2024 650 Industries.
  * Copyright (c) Nicolas Gallagher.
@@ -11,8 +12,12 @@ * Copyright (c) Facebook, Inc. and its affiliates.
 import React from 'react';
-import { CheckboxProps } from './Checkbox.types';
-export default class ExpoCheckbox extends React.PureComponent<CheckboxProps> {
-    private handleChange;
-    render(): JSX.Element;
-}
+import type { CheckboxEvent } from './Checkbox.types';
+declare const ExpoCheckbox: React.ForwardRefExoticComponent<import("react-native").ViewProps & {
+    value?: boolean | undefined;
+    disabled?: boolean | undefined;
+    color?: import("react-native").ColorValue | undefined;
+    onChange?: ((event: import("react-native").NativeSyntheticEvent<CheckboxEvent> | React.SyntheticEvent<HTMLInputElement, CheckboxEvent>) => void) | undefined;
+    onValueChange?: ((value: boolean) => void) | undefined;
+} & React.RefAttributes<unknown>>;
+export default ExpoCheckbox;
 export declare const name = "ExpoCheckbox";
 //# sourceMappingURL=ExpoCheckbox.web.d.ts.map

build/ExpoCheckbox.web.js

 /**
+ * Copyright © 2024 650 Industries.
  * Copyright (c) Nicolas Gallagher.
@@ -11,36 +12,33 @@ * Copyright (c) Facebook, Inc. and its affiliates.
 import React from 'react';
-// @ts-ignore
-import { StyleSheet, View, unstable_createElement as createElement } from 'react-native';
-export default class ExpoCheckbox extends React.PureComponent {
-    handleChange = (event) => {
+import { StyleSheet, View, unstable_createElement as createElement } from 'react-native-web';
+const ExpoCheckbox = React.forwardRef(({ color, disabled, onChange, onValueChange, style, value, ...other }, ref) => {
+    const handleChange = (event) => {
         const value = event.nativeEvent.target.checked;
         event.nativeEvent.value = value;
-        this.props.onChange?.(event);
-        this.props.onValueChange?.(value);
+        onChange?.(event);
+        onValueChange?.(value);
     };
-    render() {
-        const { color, disabled, onChange, onValueChange, style, value, ...other } = this.props;
-        const fakeControl = (<View 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 (<View {...other} style={[styles.root, style, disabled && styles.cursorDefault]}>
+    const fakeControl = (<View 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', {
+        'aria-checked': value,
+        'aria-disabled': disabled,
+        checked: value,
+        disabled,
+        onChange: handleChange,
+        style: [styles.nativeControl, styles.cursorInherit],
+        type: 'checkbox',
+    });
+    return (<View ref={ref} {...other} style={[styles.root, style, disabled && styles.cursorDefault]}>
         {nativeControl}
         {fakeControl}
       </View>);
-    }
-}
+});
+export default ExpoCheckbox;
 const styles = StyleSheet.create({
@@ -47,0 +45,0 @@ root: {

CHANGELOG.md

@@ -13,2 +13,12 @@ # Changelog
 
+## 3.0.0 — 2024-04-18
+
+### 🎉 New features
+
+- Mark React client components with "use client" directives. ([#27300](https://github.com/expo/expo/pull/27300) by [@EvanBacon](https://github.com/EvanBacon))
+
+### 💡 Others
+
+- Convert to function components and remove "use client" directives. ([#27438](https://github.com/expo/expo/pull/27438) by [@EvanBacon](https://github.com/EvanBacon))
+
 ## 2.7.0 — 2023-11-14
@@ -15,0 +25,0 @@

package.json

 {
   "name": "expo-checkbox",
-  "version": "2.7.0",
+  "version": "3.0.0",
   "description": "Basic checkbox for iOS, Android, and web",
@@ -41,3 +41,3 @@ "main": "build/Checkbox.js",
   },
-  "gitHead": "3142a086578deffd8704a8f1b6f0f661527d836c"
+  "gitHead": "4165b8d72e1b9a1889c2767534cc619e21468110"
 }

src/Checkbox.types.ts

@@ -1,3 +0,3 @@
-import { SyntheticEvent } from 'react';
-import { ColorValue, NativeSyntheticEvent, ViewProps } from 'react-native';
+import type { SyntheticEvent } from 'react';
+import type { ColorValue, NativeSyntheticEvent, ViewProps } from 'react-native';
 
@@ -4,0 +4,0 @@ export type CheckboxEvent = {

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

Total package byte prevSize

48012

increased by0.53%

Lines of code

497

increased by0.61%

No dependency changes