@draftbit/core 43.4.11-d2edf8.3 → 43.4.11

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, 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",

package/src/components/Checkbox/CheckboxRow.tsx

@@ -7,85 +7,93 @@ import {
   View,
   Platform,
 } from "react-native";
-import Checkbox, { CheckboxProps } from "./Checkbox";
-import Text from "../Text";
-import { useCheckboxGroupContext } from "./context";
+import { isString } from "lodash";
+
 import type { IconSlot } from "../../interfaces/Icon";
-import { Direction as GroupDirection } from "./context";
-import Touchable from "../Touchable";
 import { extractStyles } from "../../utilities";
+import { usePrevious } from "../../hooks";
+import Text from "../Text";
+import Touchable from "../Touchable";
+import Checkbox, { CheckboxProps } from "./Checkbox";
 
 export enum Direction {
   Row = "row",
   RowReverse = "row-reverse",
 }
 
-export interface CheckboxRowProps extends Omit<CheckboxProps, "onPress"> {
+export interface CheckboxRowProps extends CheckboxProps {
   label: string | React.ReactNode;
-  value: string; // A string that this checkbox represents
+  labelStyle?: StyleProp<TextStyle>;
   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>;
+  if (isString(value)) {
+    return <Text style={[textStyle, labelStyle]}>{value}</Text>;
   } else {
     return <>{value}</>;
   }
 };
 
 const CheckboxRow: React.FC<CheckboxRowProps & IconSlot> = ({
-  Icon,
   label = "Label",
-  status,
-  value,
-  onPress = () => {},
-  labelContainerStyle,
   labelStyle,
+  labelContainerStyle,
   checkboxStyle,
   direction = Direction.Row,
-  disabled,
-  style,
+  Icon,
+  status,
+  disabled = false,
+  onPress,
+  onCheck,
+  onUncheck,
   color,
   uncheckedColor,
+  defaultValue,
+  checkedIcon,
+  uncheckedIcon,
+  size,
+  style,
   ...rest
 }) => {
-  const {
-    values: selectedValues,
-    onValueChange,
-    direction: parentDirection,
-  } = useCheckboxGroupContext();
+  const [internalValue, setInternalValue] = React.useState<boolean>(
+    status || defaultValue || false
+  );
 
-  const values = Array.isArray(selectedValues) ? selectedValues : [];
-  const isChecked = status || values.includes(value);
+  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 = () => {
-    if (!disabled) {
-      onPress(!isChecked);
-      onValueChange && onValueChange(value, !isChecked);
+    const newValue = !internalValue;
+
+    setInternalValue(newValue);
+    onPress?.(newValue);
+
+    if (newValue) {
+      onCheck?.();
+    }
+
+    if (!newValue) {
+      onUncheck?.();
     }
   };
 
@@ -94,7 +102,7 @@ const CheckboxRow: React.FC<CheckboxRowProps & IconSlot> = ({
   return (
     <Touchable
       onPress={handlePress}
-      style={[styles.mainParent, { flexDirection: direction }, viewStyles]}
+      style={[viewStyles, styles.mainParent, { flexDirection: direction }]}
       disabled={disabled}
       {...rest}
     >
@@ -107,24 +115,20 @@ const CheckboxRow: React.FC<CheckboxRowProps & IconSlot> = ({
           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}
-        />
+        {renderLabel(label, textStyles, labelStyle)}
       </View>
+
+      <Checkbox
+        Icon={Icon}
+        status={internalValue}
+        style={checkboxStyle}
+        disabled={disabled}
+        color={color}
+        uncheckedColor={uncheckedColor}
+        checkedIcon={checkedIcon}
+        uncheckedIcon={uncheckedIcon}
+        size={size}
+      />
     </Touchable>
   );
 };
@@ -136,7 +140,7 @@ const styles = StyleSheet.create({
     paddingStart: 20,
     minHeight: 50,
     paddingEnd: 20,
-    flex: 1,
+    display: "flex",
     ...Platform.select({
       web: {
         cursor: "pointer",

package/src/components/DatePicker/DatePicker.js

@@ -1,10 +1,9 @@
 import * as React from "react";
-import { View, Animated, Text, StyleSheet, Platform, I18nManager, TextInput as NativeTextInput, } from "react-native";
+import { View, Animated, Text, StyleSheet, I18nManager, TextInput as NativeTextInput, } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import dateFormat from "dateformat";
 import { withTheme } from "../../theming";
 import Portal from "../Portal/Portal";
-import Button from "../DeprecatedButton";
 import Touchable from "../Touchable";
 import DateTimePicker from "./DatePickerComponent";
 const AnimatedText = Animated.createAnimatedComponent(Text);
@@ -325,9 +324,8 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
                             paddingRight: insets.right,
                         },
                     ] },
-                    Platform.OS === "ios" && (React.createElement(Button, { Icon: Icon, type: "text", onPress: toggleVisibility, style: styles.closeButton }, "Close")),
                     React.createElement(DateTimePicker, { value: getValidDate(), mode: mode, isVisible: pickerVisible, toggleVisibility: toggleVisibility, onChange: (_event, data) => {
-                            Platform.OS === "ios" ? null : toggleVisibility();
+                            toggleVisibility();
                             setValue(data);
                             onDateChange(data);
                         } })))))));

package/src/components/DatePicker/DatePicker.tsx

@@ -7,7 +7,6 @@ import {
   StyleProp,
   ViewStyle,
   TextStyle,
-  Platform,
   TextInputProps,
   ImageStyle,
   I18nManager,
@@ -19,7 +18,6 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import dateFormat from "dateformat";
 import { withTheme } from "../../theming";
 import Portal from "../Portal/Portal";
-import Button from "../DeprecatedButton";
 import Touchable from "../Touchable";
 import DateTimePicker from "./DatePickerComponent";
 
@@ -496,24 +494,13 @@ const DatePicker: React.FC<Props> = ({
                 },
               ]}
             >
-              {Platform.OS === "ios" && (
-                <Button
-                  Icon={Icon}
-                  type="text"
-                  onPress={toggleVisibility}
-                  style={styles.closeButton}
-                >
-                  Close
-                </Button>
-              )}
-
               <DateTimePicker
                 value={getValidDate()}
                 mode={mode}
                 isVisible={pickerVisible}
                 toggleVisibility={toggleVisibility}
                 onChange={(_event: any, data: any) => {
-                  Platform.OS === "ios" ? null : toggleVisibility();
+                  toggleVisibility();
                   setValue(data);
                   onDateChange(data);
                 }}

package/src/components/RadioButton/RadioButtonRow.js

@@ -61,7 +61,7 @@ const styles = StyleSheet.create({
         paddingStart: 20,
         minHeight: 50,
         paddingEnd: 20,
-        flex: 1,
+        display: "flex",
         ...Platform.select({
             web: {
                 cursor: "pointer",

package/src/components/RadioButton/RadioButtonRow.tsx

@@ -134,7 +134,7 @@ const styles = StyleSheet.create({
     paddingStart: 20,
     minHeight: 50,
     paddingEnd: 20,
-    flex: 1,
+    display: "flex",
     ...Platform.select({
       web: {
         cursor: "pointer",

package/src/mappings/CheckboxRow.js

@@ -1,4 +1,4 @@
-import { createTextProp, createTextStyle, createRowDirectionProp, createFieldNameProp, COMPONENT_TYPES, Triggers, createColorProp, } from "@draftbit/types";
+import { createBoolProp, createTextProp, createTextStyle, createRowDirectionProp, createFieldNameProp, createIconProp, createStaticNumberProp, COMPONENT_TYPES, Triggers, createColorProp, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Checkbox Row",
     tag: "CheckboxRow",
@@ -6,8 +6,13 @@ export const SEED_DATA = {
     layout: {
         minHeight: 50,
     },
-    triggers: [Triggers.OnPress],
+    triggers: [Triggers.OnPress, Triggers.OnCheck, Triggers.OnUncheck],
     props: {
+        fieldName: createFieldNameProp({
+            defaultValue: "checkboxRowValue",
+            valuePropName: "value",
+            handlerPropName: "onPress",
+        }),
         label: createTextProp({
             label: "Label",
             description: "Label to show with the checkbox",
@@ -21,11 +26,6 @@ export const SEED_DATA = {
             editable: false,
         }),
         direction: createRowDirectionProp(),
-        fieldName: createFieldNameProp({
-            defaultValue: "checkboxRowValue",
-            valuePropName: "value",
-            handlerPropName: "onPress",
-        }),
         color: createColorProp({
             description: "Color for the button (used when the checkbox is checked)",
         }),
@@ -33,5 +33,24 @@ export const SEED_DATA = {
             label: "Unselected Color",
             description: "Color for the button when the checkbox is unchecked",
         }),
+        disabled: createBoolProp({
+            label: "Disabled",
+            description: "Whether the checkbox is disabled",
+        }),
+        size: createStaticNumberProp({
+            label: "Size",
+            description: "Specifies the size of the icon",
+            defaultValue: null,
+        }),
+        checkedIcon: createIconProp({
+            label: "Checked Icon",
+            description: 'Icon to show when the checkbox status is "checked"',
+            defaultValue: null,
+        }),
+        uncheckedIcon: createIconProp({
+            label: "Unchecked Icon",
+            description: 'Icon to show when the checkbox status is "unchecked"',
+            defaultValue: null,
+        }),
     },
 };