@draftbit/core 48.5.5-bc0b6e.2 → 48.5.6

package/src/components/Checkbox/Checkbox.tsx

@@ -1,135 +1,135 @@
-import * as React from "react";
-import {
-  View,
-  StyleSheet,
-  Pressable,
-  PressableProps,
-  StyleProp,
-  ViewStyle,
-} from "react-native";
-import { useTheme } from "../../theming";
-import type { IconSlot } from "../../interfaces/Icon";
-
-import { usePrevious } from "../../hooks";
-
-export interface CheckboxProps {
-  status?: boolean;
-  disabled?: boolean;
-  onPress?: (checked: boolean) => void;
-  onCheck?: () => void;
-  onUncheck?: () => void;
-  color?: string;
-  uncheckedColor?: string;
-  checkedIcon?: string;
-  uncheckedIcon?: string;
-  defaultValue?: boolean;
-  size?: number;
-  style?: StyleProp<ViewStyle>;
-}
-
-const Checkbox: React.FC<CheckboxProps & PressableProps & IconSlot> = ({
-  Icon,
-  status,
-  disabled = false,
-  onPress,
-  onCheck,
-  onUncheck,
-  color,
-  uncheckedColor,
-  defaultValue,
-  checkedIcon = "MaterialCommunityIcons/checkbox-marked",
-  uncheckedIcon = "MaterialCommunityIcons/checkbox-blank-outline",
-  size = 24,
-  style,
-  ...rest
-}) => {
-  const [internalValue, setInternalValue] = React.useState<boolean>(
-    status || defaultValue || false
-  );
-
-  React.useEffect(() => {
-    if (status != null) {
-      setInternalValue(status);
-    }
-  }, [status]);
-
-  // This special logic is to handle weird APIs like Airtable that return
-  // true or undefined for a boolean
-  const previousDefaultValue = usePrevious(defaultValue) as boolean | undefined;
-
-  React.useEffect(() => {
-    if (defaultValue !== previousDefaultValue) {
-      setInternalValue(Boolean(defaultValue));
-    }
-  }, [defaultValue, previousDefaultValue]);
-
-  const { colors } = useTheme();
-
-  const checkboxColor = internalValue
-    ? color || colors.primary
-    : uncheckedColor || colors.primary;
-
-  const handlePress = () => {
-    const newValue = !internalValue;
-
-    setInternalValue(newValue);
-    onPress?.(newValue);
-
-    if (newValue) {
-      onCheck?.();
-    }
-
-    if (!newValue) {
-      onUncheck?.();
-    }
-  };
-
-  return (
-    <Pressable
-      {...rest}
-      onPress={handlePress}
-      disabled={disabled}
-      accessibilityState={{ disabled }}
-      accessibilityRole="button"
-      accessibilityLiveRegion="polite"
-      style={[styles.container, style, { width: size, height: size }]}
-    >
-      <Icon
-        style={styles.icon}
-        name={internalValue ? checkedIcon : uncheckedIcon}
-        size={size}
-        color={checkboxColor}
-      />
-      <View style={[StyleSheet.absoluteFill, styles.fillContainer]}>
-        <View
-          style={[
-            styles.fill,
-            { opacity: disabled ? 0.5 : 1 },
-            { borderColor: checkboxColor },
-          ]}
-        />
-      </View>
-    </Pressable>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: 18,
-  },
-  fillContainer: {
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  icon: {
-    alignSelf: "center",
-  },
-  fill: {
-    borderRadius: 5,
-    width: 30,
-    height: 30,
-    alignSelf: "center",
-  },
-});
-
-export default Checkbox;
+import * as React from "react";
+import {
+  View,
+  StyleSheet,
+  Pressable,
+  PressableProps,
+  StyleProp,
+  ViewStyle,
+} from "react-native";
+import { useTheme } from "../../theming";
+import type { IconSlot } from "../../interfaces/Icon";
+
+import { usePrevious } from "../../hooks";
+
+export interface CheckboxProps {
+  status?: boolean;
+  disabled?: boolean;
+  onPress?: (checked: boolean) => void;
+  onCheck?: () => void;
+  onUncheck?: () => void;
+  color?: string;
+  uncheckedColor?: string;
+  checkedIcon?: string;
+  uncheckedIcon?: string;
+  defaultValue?: boolean;
+  size?: number;
+  style?: StyleProp<ViewStyle>;
+}
+
+const Checkbox: React.FC<CheckboxProps & PressableProps & IconSlot> = ({
+  Icon,
+  status,
+  disabled = false,
+  onPress,
+  onCheck,
+  onUncheck,
+  color,
+  uncheckedColor,
+  defaultValue,
+  checkedIcon = "MaterialCommunityIcons/checkbox-marked",
+  uncheckedIcon = "MaterialCommunityIcons/checkbox-blank-outline",
+  size = 24,
+  style,
+  ...rest
+}) => {
+  const [internalValue, setInternalValue] = React.useState<boolean>(
+    status || defaultValue || false
+  );
+
+  React.useEffect(() => {
+    if (status != null) {
+      setInternalValue(status);
+    }
+  }, [status]);
+
+  // This special logic is to handle weird APIs like Airtable that return
+  // true or undefined for a boolean
+  const previousDefaultValue = usePrevious(defaultValue) as boolean | undefined;
+
+  React.useEffect(() => {
+    if (defaultValue !== previousDefaultValue) {
+      setInternalValue(Boolean(defaultValue));
+    }
+  }, [defaultValue, previousDefaultValue]);
+
+  const { colors } = useTheme();
+
+  const checkboxColor = internalValue
+    ? color || colors.primary
+    : uncheckedColor || colors.primary;
+
+  const handlePress = () => {
+    const newValue = !internalValue;
+
+    setInternalValue(newValue);
+    onPress?.(newValue);
+
+    if (newValue) {
+      onCheck?.();
+    }
+
+    if (!newValue) {
+      onUncheck?.();
+    }
+  };
+
+  return (
+    <Pressable
+      {...rest}
+      onPress={handlePress}
+      disabled={disabled}
+      accessibilityState={{ disabled }}
+      accessibilityRole="button"
+      accessibilityLiveRegion="polite"
+      style={[styles.container, style, { width: size, height: size }]}
+    >
+      <Icon
+        style={styles.icon}
+        name={internalValue ? checkedIcon : uncheckedIcon}
+        size={size}
+        color={checkboxColor}
+      />
+      <View style={[StyleSheet.absoluteFill, styles.fillContainer]}>
+        <View
+          style={[
+            styles.fill,
+            { opacity: disabled ? 0.5 : 1 },
+            { borderColor: checkboxColor },
+          ]}
+        />
+      </View>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 18,
+  },
+  fillContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  icon: {
+    alignSelf: "center",
+  },
+  fill: {
+    borderRadius: 5,
+    width: 30,
+    height: 30,
+    alignSelf: "center",
+  },
+});
+
+export default Checkbox;

package/src/components/Checkbox/CheckboxGroupRow.tsx

@@ -1,152 +1,152 @@
-import * as React from "react";
-import {
-  StyleProp,
-  ViewStyle,
-  StyleSheet,
-  TextStyle,
-  View,
-  Platform,
-  Pressable,
-} from "react-native";
-import Checkbox, { CheckboxProps } from "./Checkbox";
-import Text from "../Text";
-import { useCheckboxGroupContext } from "./context";
-import type { IconSlot } from "../../interfaces/Icon";
-import { Direction as GroupDirection } from "./context";
-import { extractStyles } from "../../utilities";
-
-export enum Direction {
-  Row = "row",
-  RowReverse = "row-reverse",
-}
-
-export interface CheckboxGroupRowProps extends Omit<CheckboxProps, "onPress"> {
-  label: string | React.ReactNode;
-  value: string; // A string that this checkbox represents
-  labelContainerStyle: StyleProp<ViewStyle>;
-  checkboxStyle?: StyleProp<ViewStyle>;
-  labelStyle?: StyleProp<TextStyle>;
-  onPress?: (value: boolean) => void;
-  direction?: Direction;
-  color: string;
-  unselectedColor: string;
-}
-
-const getCheckboxAlignment = (
-  parentDirection: GroupDirection | undefined,
-  direction: Direction
-) => {
-  if (parentDirection === GroupDirection.Horizontal) {
-    return direction === Direction.Row ? "flex-start" : "flex-end";
-  } else if (direction === Direction.RowReverse) {
-    return "flex-start";
-  } else {
-    return "flex-end";
-  }
-};
-
-const renderLabel = (
-  value: string | React.ReactNode,
-  labelStyle: StyleProp<TextStyle>,
-  textStyle: StyleProp<TextStyle>
-) => {
-  if (typeof value === "string") {
-    return <Text style={[labelStyle, textStyle]}>{value}</Text>;
-  } else {
-    return <>{value}</>;
-  }
-};
-
-const CheckboxGroupRow: React.FC<CheckboxGroupRowProps & IconSlot> = ({
-  Icon,
-  label = "Label",
-  status,
-  value,
-  onPress,
-  labelContainerStyle,
-  labelStyle,
-  checkboxStyle,
-  direction = Direction.Row,
-  disabled,
-  style,
-  color,
-  uncheckedColor,
-  ...rest
-}) => {
-  const {
-    values: selectedValues,
-    onValueChange,
-    direction: parentDirection,
-  } = useCheckboxGroupContext();
-
-  const values = Array.isArray(selectedValues) ? selectedValues : [];
-  const isChecked = status || values.includes(value);
-
-  const handlePress = () => {
-    if (!disabled) {
-      onPress?.(!isChecked);
-      onValueChange?.(value, !isChecked);
-    }
-  };
-
-  const { textStyles, viewStyles } = extractStyles(style);
-
-  return (
-    <Pressable
-      onPress={handlePress}
-      style={[styles.mainParent, { flexDirection: direction }, viewStyles]}
-      disabled={disabled}
-      {...rest}
-    >
-      <View
-        style={[
-          styles.label,
-          {
-            alignItems: direction === Direction.Row ? "flex-start" : "flex-end",
-          },
-          labelContainerStyle,
-        ]}
-      >
-        {renderLabel(label, labelStyle, textStyles)}
-      </View>
-      <View
-        style={{
-          flex: 1,
-          alignItems: getCheckboxAlignment(parentDirection, direction),
-        }}
-      >
-        <Checkbox
-          Icon={Icon}
-          status={isChecked}
-          onPress={handlePress}
-          style={checkboxStyle}
-          disabled={disabled}
-          color={color}
-          uncheckedColor={uncheckedColor}
-        />
-      </View>
-    </Pressable>
-  );
-};
-
-const styles = StyleSheet.create({
-  mainParent: {
-    alignItems: "center",
-    justifyContent: "space-around",
-    paddingStart: 20,
-    minHeight: 50,
-    paddingEnd: 20,
-    display: "flex",
-    ...Platform.select({
-      web: {
-        cursor: "pointer",
-        userSelect: "none",
-      },
-    }),
-  },
-  label: {
-    flex: 3,
-  },
-});
-
-export default CheckboxGroupRow;
+import * as React from "react";
+import {
+  StyleProp,
+  ViewStyle,
+  StyleSheet,
+  TextStyle,
+  View,
+  Platform,
+  Pressable,
+} from "react-native";
+import Checkbox, { CheckboxProps } from "./Checkbox";
+import Text from "../Text";
+import { useCheckboxGroupContext } from "./context";
+import type { IconSlot } from "../../interfaces/Icon";
+import { Direction as GroupDirection } from "./context";
+import { extractStyles } from "../../utilities";
+
+export enum Direction {
+  Row = "row",
+  RowReverse = "row-reverse",
+}
+
+export interface CheckboxGroupRowProps extends Omit<CheckboxProps, "onPress"> {
+  label: string | React.ReactNode;
+  value: string; // A string that this checkbox represents
+  labelContainerStyle: StyleProp<ViewStyle>;
+  checkboxStyle?: StyleProp<ViewStyle>;
+  labelStyle?: StyleProp<TextStyle>;
+  onPress?: (value: boolean) => void;
+  direction?: Direction;
+  color: string;
+  unselectedColor: string;
+}
+
+const getCheckboxAlignment = (
+  parentDirection: GroupDirection | undefined,
+  direction: Direction
+) => {
+  if (parentDirection === GroupDirection.Horizontal) {
+    return direction === Direction.Row ? "flex-start" : "flex-end";
+  } else if (direction === Direction.RowReverse) {
+    return "flex-start";
+  } else {
+    return "flex-end";
+  }
+};
+
+const renderLabel = (
+  value: string | React.ReactNode,
+  labelStyle: StyleProp<TextStyle>,
+  textStyle: StyleProp<TextStyle>
+) => {
+  if (typeof value === "string") {
+    return <Text style={[labelStyle, textStyle]}>{value}</Text>;
+  } else {
+    return <>{value}</>;
+  }
+};
+
+const CheckboxGroupRow: React.FC<CheckboxGroupRowProps & IconSlot> = ({
+  Icon,
+  label = "Label",
+  status,
+  value,
+  onPress,
+  labelContainerStyle,
+  labelStyle,
+  checkboxStyle,
+  direction = Direction.Row,
+  disabled,
+  style,
+  color,
+  uncheckedColor,
+  ...rest
+}) => {
+  const {
+    values: selectedValues,
+    onValueChange,
+    direction: parentDirection,
+  } = useCheckboxGroupContext();
+
+  const values = Array.isArray(selectedValues) ? selectedValues : [];
+  const isChecked = status || values.includes(value);
+
+  const handlePress = () => {
+    if (!disabled) {
+      onPress?.(!isChecked);
+      onValueChange?.(value, !isChecked);
+    }
+  };
+
+  const { textStyles, viewStyles } = extractStyles(style);
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      style={[styles.mainParent, { flexDirection: direction }, viewStyles]}
+      disabled={disabled}
+      {...rest}
+    >
+      <View
+        style={[
+          styles.label,
+          {
+            alignItems: direction === Direction.Row ? "flex-start" : "flex-end",
+          },
+          labelContainerStyle,
+        ]}
+      >
+        {renderLabel(label, labelStyle, textStyles)}
+      </View>
+      <View
+        style={{
+          flex: 1,
+          alignItems: getCheckboxAlignment(parentDirection, direction),
+        }}
+      >
+        <Checkbox
+          Icon={Icon}
+          status={isChecked}
+          onPress={handlePress}
+          style={checkboxStyle}
+          disabled={disabled}
+          color={color}
+          uncheckedColor={uncheckedColor}
+        />
+      </View>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  mainParent: {
+    alignItems: "center",
+    justifyContent: "space-around",
+    paddingStart: 20,
+    minHeight: 50,
+    paddingEnd: 20,
+    display: "flex",
+    ...Platform.select({
+      web: {
+        cursor: "pointer",
+        userSelect: "none",
+      },
+    }),
+  },
+  label: {
+    flex: 3,
+  },
+});
+
+export default CheckboxGroupRow;