@draftbit/core 43.4.11-d2edf8.3 → 43.4.13-33318c.0

package/lib/typescript/src/mappings/CheckboxRow.d.ts

@@ -7,6 +7,18 @@ export declare const SEED_DATA: {
     };
     triggers: string[];
     props: {
+        fieldName: {
+            handlerPropName: string;
+            group: string;
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: string;
+            valuePropName: string;
+            editable: boolean;
+            required: boolean;
+        };
         label: any;
         labelStyle: {
             group: string;
@@ -29,19 +41,17 @@ export declare const SEED_DATA: {
             defaultValue: null;
             options: never[];
         };
-        fieldName: {
-            handlerPropName: string;
+        color: {
             group: string;
             label: string;
             description: string;
-            formType: string;
-            propType: string;
-            defaultValue: string;
-            valuePropName: string;
             editable: boolean;
             required: boolean;
+            defaultValue: null;
+            formType: string;
+            propType: string;
         };
-        color: {
+        uncheckedColor: {
             group: string;
             label: string;
             description: string;
@@ -51,15 +61,46 @@ export declare const SEED_DATA: {
             formType: string;
             propType: string;
         };
-        uncheckedColor: {
-            group: string;
+        disabled: {
             label: string;
             description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
             editable: boolean;
             required: boolean;
+            group: string;
+        };
+        size: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
             defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        checkedIcon: {
+            label: string;
+            description: string;
             formType: string;
             propType: string;
+            defaultValue: string;
+            required: boolean;
+            editable: boolean;
+            group: string;
+        };
+        uncheckedIcon: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: string;
+            required: boolean;
+            editable: boolean;
+            group: string;
         };
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "43.4.11-d2edf8.3+d2edf814",
+  "version": "43.4.13-33318c.0+33318c53",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -80,5 +80,5 @@
       ]
     ]
   },
-  "gitHead": "d2edf81446f0e84767bbea7fba1ea857ed1521ef"
+  "gitHead": "33318c53ed16ca1a66fd5f43269e5866bf430fbf"
 }

package/src/components/Accordion/AccordionGroup.js

@@ -18,10 +18,10 @@ const AccordionGroup = ({ Icon, openColor, closedColor, caretColor, icon, iconSi
             icon ? (React.createElement(Icon, { name: icon, size: iconSize, color: labelColor, style: styles.icon })) : null,
             React.createElement(View, { style: styles.content },
                 React.createElement(Text, { selectable: false, style: [
+                        textStyles,
                         {
                             color: labelColor,
                         },
-                        textStyles,
                     ] }, label)),
             React.createElement(Icon, { name: expanded
                     ? "MaterialIcons/keyboard-arrow-up"

package/src/components/Accordion/AccordionGroup.tsx

@@ -74,10 +74,10 @@ const AccordionGroup = ({
           <Text
             selectable={false}
             style={[
+              textStyles,
               {
                 color: labelColor,
               },
-              textStyles,
             ]}
           >
             {label}

package/src/components/Checkbox/Checkbox.js

@@ -3,7 +3,23 @@ import { View, StyleSheet, } from "react-native";
 import { useTheme } from "../../theming";
 import Touchable from "../Touchable";
 import { usePrevious } from "../../hooks";
-const Checkbox = ({ Icon, status, disabled = false, onPress = () => { }, onCheck, onUncheck, color, uncheckedColor, defaultValue, checkedIcon = "MaterialCommunityIcons/checkbox-marked", uncheckedIcon = "MaterialCommunityIcons/checkbox-blank-outline", size = 24, style, ...rest }) => {
+const Checkbox = ({ Icon, status, disabled = false, onPress, onCheck, onUncheck, color, uncheckedColor, defaultValue, checkedIcon = "MaterialCommunityIcons/checkbox-marked", uncheckedIcon = "MaterialCommunityIcons/checkbox-blank-outline", size = 24, style, ...rest }) => {
+    console.log("Checbox prop", {
+        Icon,
+        status,
+        disabled,
+        onPress,
+        onCheck,
+        onUncheck,
+        color,
+        uncheckedColor,
+        defaultValue,
+        checkedIcon,
+        uncheckedIcon,
+        size,
+        style,
+        rest: { ...rest },
+    });
     const [internalValue, setInternalValue] = React.useState(status || defaultValue || false);
     React.useEffect(() => {
         if (status != null) {
@@ -25,12 +41,12 @@ const Checkbox = ({ Icon, status, disabled = false, onPress = () => { }, onCheck
     const handlePress = () => {
         const newValue = !internalValue;
         setInternalValue(newValue);
-        onPress(newValue);
-        if (onCheck && newValue) {
-            onCheck();
+        onPress?.(newValue);
+        if (newValue) {
+            onCheck?.();
         }
-        if (onUncheck && !newValue) {
-            onUncheck();
+        if (!newValue) {
+            onUncheck?.();
         }
     };
     return (React.createElement(Touchable, { ...rest, onPress: handlePress, disabled: disabled, accessibilityState: { disabled }, accessibilityRole: "button", accessibilityLiveRegion: "polite", style: [styles.container, style, { width: size, height: size }] },

package/src/components/Checkbox/Checkbox.tsx

@@ -32,7 +32,7 @@ const Checkbox: React.FC<CheckboxProps & TouchableHighlightProps & IconSlot> =
     Icon,
     status,
     disabled = false,
-    onPress = () => {},
+    onPress,
     onCheck,
     onUncheck,
     color,
@@ -44,6 +44,23 @@ const Checkbox: React.FC<CheckboxProps & TouchableHighlightProps & IconSlot> =
     style,
     ...rest
   }) => {
+    console.log("Checbox prop", {
+      Icon,
+      status,
+      disabled,
+      onPress,
+      onCheck,
+      onUncheck,
+      color,
+      uncheckedColor,
+      defaultValue,
+      checkedIcon,
+      uncheckedIcon,
+      size,
+      style,
+      rest: { ...rest },
+    });
+
     const [internalValue, setInternalValue] = React.useState<boolean>(
       status || defaultValue || false
     );
@@ -59,6 +76,7 @@ const Checkbox: React.FC<CheckboxProps & TouchableHighlightProps & IconSlot> =
     const previousDefaultValue = usePrevious(defaultValue) as
       | boolean
       | undefined;
+
     React.useEffect(() => {
       if (defaultValue !== previousDefaultValue) {
         setInternalValue(Boolean(defaultValue));
@@ -73,15 +91,16 @@ const Checkbox: React.FC<CheckboxProps & TouchableHighlightProps & IconSlot> =
 
     const handlePress = () => {
       const newValue = !internalValue;
+
       setInternalValue(newValue);
-      onPress(newValue);
+      onPress?.(newValue);
 
-      if (onCheck && newValue) {
-        onCheck();
+      if (newValue) {
+        onCheck?.();
       }
 
-      if (onUncheck && !newValue) {
-        onUncheck();
+      if (!newValue) {
+        onUncheck?.();
       }
     };
 

package/src/components/Checkbox/CheckboxGroupRow.js

@@ -0,0 +1,77 @@
+import * as React from "react";
+import { StyleSheet, View, Platform, } from "react-native";
+import Checkbox from "./Checkbox";
+import Text from "../Text";
+import { useCheckboxGroupContext } from "./context";
+import { Direction as GroupDirection } from "./context";
+import Touchable from "../Touchable";
+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?.(!isChecked);
+            onValueChange?.(value, !isChecked);
+        }
+    };
+    const { textStyles, viewStyles } = extractStyles(style);
+    return (React.createElement(Touchable, { 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;

package/src/components/Checkbox/CheckboxGroupRow.tsx

@@ -0,0 +1,152 @@
+import * as React from "react";
+import {
+  StyleProp,
+  ViewStyle,
+  StyleSheet,
+  TextStyle,
+  View,
+  Platform,
+} 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 Touchable from "../Touchable";
+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 (
+    <Touchable
+      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>
+    </Touchable>
+  );
+};
+
+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;

package/src/components/Checkbox/CheckboxRow.js

@@ -1,59 +1,60 @@
 import * as React from "react";
 import { StyleSheet, View, Platform, } from "react-native";
-import Checkbox from "./Checkbox";
+import { isString } from "lodash";
+import { extractStyles } from "../../utilities";
+import { usePrevious } from "../../hooks";
 import Text from "../Text";
-import { useCheckboxGroupContext } from "./context";
-import { Direction as GroupDirection } from "./context";
 import Touchable from "../Touchable";
-import { extractStyles } from "../../utilities";
+import Checkbox from "./Checkbox";
 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);
+    if (isString(value)) {
+        return React.createElement(Text, { style: [textStyle, labelStyle] }, value);
     }
     else {
         return React.createElement(React.Fragment, null, value);
     }
 };
-const CheckboxRow = ({ 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 CheckboxRow = ({ 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(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);
+    React.useEffect(() => {
+        if (defaultValue !== previousDefaultValue) {
+            setInternalValue(Boolean(defaultValue));
+        }
+    }, [defaultValue, previousDefaultValue]);
     const handlePress = () => {
-        if (!disabled) {
-            onPress(!isChecked);
-            onValueChange && onValueChange(value, !isChecked);
+        const newValue = !internalValue;
+        setInternalValue(newValue);
+        onPress?.(newValue);
+        if (newValue) {
+            onCheck?.();
+        }
+        if (!newValue) {
+            onUncheck?.();
         }
     };
     const { textStyles, viewStyles } = extractStyles(style);
-    return (React.createElement(Touchable, { onPress: handlePress, style: [styles.mainParent, { flexDirection: direction }, viewStyles], disabled: disabled, ...rest },
+    return (React.createElement(Touchable, { onPress: handlePress, style: [viewStyles, styles.mainParent, { flexDirection: direction }], 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 }))));
+            ] }, renderLabel(label, textStyles, labelStyle)),
+        React.createElement(Checkbox, { Icon: Icon, status: internalValue, style: checkboxStyle, disabled: disabled, onPress: handlePress, color: color, uncheckedColor: uncheckedColor, checkedIcon: checkedIcon, uncheckedIcon: uncheckedIcon, size: size })));
 };
 const styles = StyleSheet.create({
     mainParent: {
@@ -62,7 +63,7 @@ const styles = StyleSheet.create({
         paddingStart: 20,
         minHeight: 50,
         paddingEnd: 20,
-        flex: 1,
+        display: "flex",
         ...Platform.select({
             web: {
                 cursor: "pointer",