@draftbit/core 48.5.6 → 48.5.7-26899.2

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.js

@@ -0,0 +1,77 @@
+import * as React from "react";
+import { StyleSheet, View, Platform, Pressable, } from "react-native";
+import Checkbox from "./Checkbox";
+import Text from "../Text";
+import { useCheckboxGroupContext } from "./context";
+import { Direction as GroupDirection } from "./context";
+import { extractStyles } from "../../utilities";
+export var Direction;
+(function (Direction) {
+    Direction["Row"] = "row";
+    Direction["RowReverse"] = "row-reverse";
+})(Direction || (Direction = {}));
+const getCheckboxAlignment = (parentDirection, 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, labelStyle, textStyle) => {
+    if (typeof value === "string") {
+        return React.createElement(Text, { style: [labelStyle, textStyle] }, value);
+    }
+    else {
+        return React.createElement(React.Fragment, null, value);
+    }
+};
+const CheckboxGroupRow = ({ 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 === null || onPress === void 0 ? void 0 : onPress(!isChecked);
+            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(value, !isChecked);
+        }
+    };
+    const { textStyles, viewStyles } = extractStyles(style);
+    return (React.createElement(Pressable, { onPress: handlePress, style: [styles.mainParent, { flexDirection: direction }, viewStyles], disabled: disabled, ...rest },
+        React.createElement(View, { style: [
+                styles.label,
+                {
+                    alignItems: direction === Direction.Row ? "flex-start" : "flex-end",
+                },
+                labelContainerStyle,
+            ] }, renderLabel(label, labelStyle, textStyles)),
+        React.createElement(View, { style: {
+                flex: 1,
+                alignItems: getCheckboxAlignment(parentDirection, direction),
+            } },
+            React.createElement(Checkbox, { Icon: Icon, status: isChecked, onPress: handlePress, style: checkboxStyle, disabled: disabled, color: color, uncheckedColor: uncheckedColor }))));
+};
+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;
+//# sourceMappingURL=CheckboxGroupRow.js.map

package/src/components/Checkbox/CheckboxGroupRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroupRow.js","sourceRoot":"","sources":["CheckboxGroupRow.tsx"],"names":[],"mappings":"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"}

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;