@draftbit/core 48.5.5-bc0b6e.2 → 48.5.6

package/src/components/Checkbox/CheckboxRow.tsx

@@ -1,157 +1,157 @@
-import * as React from "react";
-import {
-  StyleProp,
-  ViewStyle,
-  StyleSheet,
-  TextStyle,
-  View,
-  Platform,
-  Pressable,
-} from "react-native";
-import { isString } from "lodash";
-
-import type { IconSlot } from "../../interfaces/Icon";
-import { extractStyles } from "../../utilities";
-import { usePrevious } from "../../hooks";
-import Text from "../Text";
-import Checkbox, { CheckboxProps } from "./Checkbox";
-
-export enum Direction {
-  Row = "row",
-  RowReverse = "row-reverse",
-}
-
-export interface CheckboxRowProps extends CheckboxProps {
-  label: string | React.ReactNode;
-  labelStyle?: StyleProp<TextStyle>;
-  labelContainerStyle: StyleProp<ViewStyle>;
-  checkboxStyle?: StyleProp<ViewStyle>;
-  direction?: Direction;
-}
-
-const renderLabel = (
-  value: string | React.ReactNode,
-  labelStyle: StyleProp<TextStyle>,
-  textStyle: StyleProp<TextStyle>
-) => {
-  if (isString(value)) {
-    return <Text style={[textStyle, labelStyle]}>{value}</Text>;
-  } else {
-    return <>{value}</>;
-  }
-};
-
-const CheckboxRow: React.FC<CheckboxRowProps & IconSlot> = ({
-  label = "Label",
-  labelStyle,
-  labelContainerStyle,
-  checkboxStyle,
-  direction = Direction.Row,
-  Icon,
-  status,
-  disabled = false,
-  onPress,
-  onCheck,
-  onUncheck,
-  color,
-  uncheckedColor,
-  defaultValue,
-  checkedIcon,
-  uncheckedIcon,
-  size,
-  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 handlePress = () => {
-    const newValue = !internalValue;
-
-    setInternalValue(newValue);
-    onPress?.(newValue);
-
-    if (newValue) {
-      onCheck?.();
-    }
-
-    if (!newValue) {
-      onUncheck?.();
-    }
-  };
-
-  const { textStyles, viewStyles } = extractStyles(style);
-
-  return (
-    <Pressable
-      onPress={handlePress}
-      style={[viewStyles, styles.mainParent, { flexDirection: direction }]}
-      disabled={disabled}
-      {...rest}
-    >
-      <View
-        style={[
-          styles.label,
-          {
-            alignItems: direction === Direction.Row ? "flex-start" : "flex-end",
-          },
-          labelContainerStyle,
-        ]}
-      >
-        {renderLabel(label, textStyles, labelStyle)}
-      </View>
-
-      <Checkbox
-        Icon={Icon}
-        status={internalValue}
-        style={checkboxStyle}
-        disabled={disabled}
-        onPress={handlePress}
-        color={color}
-        uncheckedColor={uncheckedColor}
-        checkedIcon={checkedIcon}
-        uncheckedIcon={uncheckedIcon}
-        size={size}
-      />
-    </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 CheckboxRow;
+import * as React from "react";
+import {
+  StyleProp,
+  ViewStyle,
+  StyleSheet,
+  TextStyle,
+  View,
+  Platform,
+  Pressable,
+} from "react-native";
+import { isString } from "lodash";
+
+import type { IconSlot } from "../../interfaces/Icon";
+import { extractStyles } from "../../utilities";
+import { usePrevious } from "../../hooks";
+import Text from "../Text";
+import Checkbox, { CheckboxProps } from "./Checkbox";
+
+export enum Direction {
+  Row = "row",
+  RowReverse = "row-reverse",
+}
+
+export interface CheckboxRowProps extends CheckboxProps {
+  label: string | React.ReactNode;
+  labelStyle?: StyleProp<TextStyle>;
+  labelContainerStyle: StyleProp<ViewStyle>;
+  checkboxStyle?: StyleProp<ViewStyle>;
+  direction?: Direction;
+}
+
+const renderLabel = (
+  value: string | React.ReactNode,
+  labelStyle: StyleProp<TextStyle>,
+  textStyle: StyleProp<TextStyle>
+) => {
+  if (isString(value)) {
+    return <Text style={[textStyle, labelStyle]}>{value}</Text>;
+  } else {
+    return <>{value}</>;
+  }
+};
+
+const CheckboxRow: React.FC<CheckboxRowProps & IconSlot> = ({
+  label = "Label",
+  labelStyle,
+  labelContainerStyle,
+  checkboxStyle,
+  direction = Direction.Row,
+  Icon,
+  status,
+  disabled = false,
+  onPress,
+  onCheck,
+  onUncheck,
+  color,
+  uncheckedColor,
+  defaultValue,
+  checkedIcon,
+  uncheckedIcon,
+  size,
+  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 handlePress = () => {
+    const newValue = !internalValue;
+
+    setInternalValue(newValue);
+    onPress?.(newValue);
+
+    if (newValue) {
+      onCheck?.();
+    }
+
+    if (!newValue) {
+      onUncheck?.();
+    }
+  };
+
+  const { textStyles, viewStyles } = extractStyles(style);
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      style={[viewStyles, styles.mainParent, { flexDirection: direction }]}
+      disabled={disabled}
+      {...rest}
+    >
+      <View
+        style={[
+          styles.label,
+          {
+            alignItems: direction === Direction.Row ? "flex-start" : "flex-end",
+          },
+          labelContainerStyle,
+        ]}
+      >
+        {renderLabel(label, textStyles, labelStyle)}
+      </View>
+
+      <Checkbox
+        Icon={Icon}
+        status={internalValue}
+        style={checkboxStyle}
+        disabled={disabled}
+        onPress={handlePress}
+        color={color}
+        uncheckedColor={uncheckedColor}
+        checkedIcon={checkedIcon}
+        uncheckedIcon={uncheckedIcon}
+        size={size}
+      />
+    </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 CheckboxRow;

package/src/components/Checkbox/context.ts

@@ -1,22 +1,22 @@
-import { createContext, useContext } from "react";
-
-export enum Direction {
-  Horizontal = "horizontal",
-  Vertical = "vertical",
-}
-
-interface CheckboxGroupContext {
-  onValueChange: (value: string, selected: boolean) => void;
-  values: string[];
-  direction?: Direction;
-}
-
-export const checkboxGroupContext = createContext<CheckboxGroupContext>({
-  onValueChange: () => {},
-  values: [],
-  direction: undefined,
-});
-
-export function useCheckboxGroupContext() {
-  return useContext(checkboxGroupContext);
-}
+import { createContext, useContext } from "react";
+
+export enum Direction {
+  Horizontal = "horizontal",
+  Vertical = "vertical",
+}
+
+interface CheckboxGroupContext {
+  onValueChange: (value: string, selected: boolean) => void;
+  values: string[];
+  direction?: Direction;
+}
+
+export const checkboxGroupContext = createContext<CheckboxGroupContext>({
+  onValueChange: () => {},
+  values: [],
+  direction: undefined,
+});
+
+export function useCheckboxGroupContext() {
+  return useContext(checkboxGroupContext);
+}

package/src/components/Checkbox/index.ts

@@ -1,2 +1,2 @@
-export { default as Checkbox } from "./Checkbox";
-export { default as CheckboxRow } from "./CheckboxRow";
+export { default as Checkbox } from "./Checkbox";
+export { default as CheckboxRow } from "./CheckboxRow";

package/src/components/Config.ts

@@ -1,82 +1,82 @@
-import { Dimensions, Platform } from "react-native";
-
-const getWindowDimensions = () => {
-  const { width, height } = Dimensions.get("window");
-  return {
-    windowWidth: width,
-    windowHeight: height,
-  };
-};
-
-const { windowWidth, windowHeight } = getWindowDimensions();
-
-const getFilters = (options: { width: number; height: number }) => {
-  const { width, height } = options;
-  const filters = ["c_scale", "q_auto", "dpr_auto"];
-
-  if (width) filters.push(`w_${width}`);
-  if (height) filters.push(`h_${height}`);
-
-  return filters.join(",");
-};
-
-const buildImageUrl = (
-  options: { width: number; height: number },
-  name: string
-) => {
-  const filters = getFilters(options);
-  return [
-    "https://res.cloudinary.com/altos/image/upload",
-    filters,
-    `${name}.png`,
-  ].join("/");
-};
-
-const getExtension = () => {
-  return Platform.OS === "web" ? ".svg" : ".png";
-};
-
-export default {
-  windowWidth,
-  windowHeight,
-  avatarImageUrl: buildImageUrl(
-    {
-      width: 60,
-      height: 60,
-    },
-    "Avatar"
-  ),
-  avatarImageSize: 60,
-  cardImageSize: 200,
-  cardImageUrl:
-    "https://static.draftbit.com/images/placeholder-image" + getExtension(),
-  cardIconSize: 16,
-  cardIconBackgroundOpacity: 0.24,
-  cardIconElevation: 1,
-  placeholderImageURL:
-    "https://static.draftbit.com/images/placeholder-image" + getExtension(),
-  getPlaceholderImageUrl: (size: { width: number; height: number }) =>
-    buildImageUrl(
-      { width: size.width, height: size.height },
-      "image-placeholder_1"
-    ),
-  placeholderSvgURL: "https://static.draftbit.com/images/placeholder-image.svg",
-  squareImageUrl: buildImageUrl({ width: 100, height: 100 }, "Avatar"),
-  FABSize: 40,
-  FABBorderRadius: 20,
-  FABFixedHeight: 64,
-  cardContainerShortImageAspectRatio: 1,
-  rowSingleLineImageSize: 24,
-  rowMultiLineImageSize: 48,
-  rowSingleLineIconSize: 24,
-  rowMultiLineIconSize: 16,
-  headerIconSize: 24,
-  buttonIconSize: 24,
-  swiperInactiveDotSize: 6,
-  swiperActiveDotSize: 10,
-  fieldSearchBarFullIconSize: 24,
-  stepperButtonSize: 40,
-  radioButtonSize: 24,
-  topSafeAreaViewHeight: 0,
-  // topSafeAreaViewHeight: Platform.OS === "android" ? Constants.statusBarHeight : 0
-};
+import { Dimensions, Platform } from "react-native";
+
+const getWindowDimensions = () => {
+  const { width, height } = Dimensions.get("window");
+  return {
+    windowWidth: width,
+    windowHeight: height,
+  };
+};
+
+const { windowWidth, windowHeight } = getWindowDimensions();
+
+const getFilters = (options: { width: number; height: number }) => {
+  const { width, height } = options;
+  const filters = ["c_scale", "q_auto", "dpr_auto"];
+
+  if (width) filters.push(`w_${width}`);
+  if (height) filters.push(`h_${height}`);
+
+  return filters.join(",");
+};
+
+const buildImageUrl = (
+  options: { width: number; height: number },
+  name: string
+) => {
+  const filters = getFilters(options);
+  return [
+    "https://res.cloudinary.com/altos/image/upload",
+    filters,
+    `${name}.png`,
+  ].join("/");
+};
+
+const getExtension = () => {
+  return Platform.OS === "web" ? ".svg" : ".png";
+};
+
+export default {
+  windowWidth,
+  windowHeight,
+  avatarImageUrl: buildImageUrl(
+    {
+      width: 60,
+      height: 60,
+    },
+    "Avatar"
+  ),
+  avatarImageSize: 60,
+  cardImageSize: 200,
+  cardImageUrl:
+    "https://static.draftbit.com/images/placeholder-image" + getExtension(),
+  cardIconSize: 16,
+  cardIconBackgroundOpacity: 0.24,
+  cardIconElevation: 1,
+  placeholderImageURL:
+    "https://static.draftbit.com/images/placeholder-image" + getExtension(),
+  getPlaceholderImageUrl: (size: { width: number; height: number }) =>
+    buildImageUrl(
+      { width: size.width, height: size.height },
+      "image-placeholder_1"
+    ),
+  placeholderSvgURL: "https://static.draftbit.com/images/placeholder-image.svg",
+  squareImageUrl: buildImageUrl({ width: 100, height: 100 }, "Avatar"),
+  FABSize: 40,
+  FABBorderRadius: 20,
+  FABFixedHeight: 64,
+  cardContainerShortImageAspectRatio: 1,
+  rowSingleLineImageSize: 24,
+  rowMultiLineImageSize: 48,
+  rowSingleLineIconSize: 24,
+  rowMultiLineIconSize: 16,
+  headerIconSize: 24,
+  buttonIconSize: 24,
+  swiperInactiveDotSize: 6,
+  swiperActiveDotSize: 10,
+  fieldSearchBarFullIconSize: 24,
+  stepperButtonSize: 40,
+  radioButtonSize: 24,
+  topSafeAreaViewHeight: 0,
+  // topSafeAreaViewHeight: Platform.OS === "android" ? Constants.statusBarHeight : 0
+};