@draftbit/core 43.4.11-ba6514.0 → 43.4.12-58730b.0

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,21 @@ 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}
+        onPress={handlePress}
+        color={color}
+        uncheckedColor={uncheckedColor}
+        checkedIcon={checkedIcon}
+        uncheckedIcon={uncheckedIcon}
+        size={size}
+      />
     </Touchable>
   );
 };
@@ -136,7 +141,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/components/TextField.js

@@ -231,6 +231,7 @@ class TextField extends React.Component {
                 : leftIconMode === "outset"
                     ? 16
                     : 0,
+            marginLeft: leftIconMode === "inset" && type === "solid" ? 16 : 0,
         };
         const labelStyle = {
             ...typography.subtitle1,
@@ -355,10 +356,10 @@ class TextField extends React.Component {
                                 opacity: hasActiveOutline ? this.state.labeled : 1,
                             },
                         ], numberOfLines: 1 }, label))) : null,
-                leftIconName && leftIconMode === "inset" ? (React.createElement(Icon, { ...leftIconProps, style: {
-                        ...leftIconStyle,
-                        marginLeft: type === "solid" ? 16 : 0,
-                    } })) : null,
+                leftIconName && leftIconMode === "inset" ? (React.createElement(View, { style: {
+                        justifyContent: type === "solid" ? "center" : undefined,
+                    } },
+                    React.createElement(Icon, { ...leftIconProps, style: leftIconStyle }))) : null,
                 render({
                     ref: (c) => {
                         this._root = c;

package/src/components/TextField.tsx

@@ -359,6 +359,7 @@ class TextField extends React.Component<Props, State> {
           : leftIconMode === "outset"
           ? 16
           : 0,
+      marginLeft: leftIconMode === "inset" && type === "solid" ? 16 : 0,
     };
 
     const labelStyle = {
@@ -536,13 +537,13 @@ class TextField extends React.Component<Props, State> {
           ) : null}
 
           {leftIconName && leftIconMode === "inset" ? (
-            <Icon
-              {...leftIconProps}
+            <View
               style={{
-                ...leftIconStyle,
-                marginLeft: type === "solid" ? 16 : 0,
+                justifyContent: type === "solid" ? "center" : undefined,
               }}
-            />
+            >
+              <Icon {...leftIconProps} style={leftIconStyle} />
+            </View>
           ) : null}
 
           {render({

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,
+        }),
     },
 };

package/src/mappings/CheckboxRow.ts

@@ -1,8 +1,11 @@
 import {
+  createBoolProp,
   createTextProp,
   createTextStyle,
   createRowDirectionProp,
   createFieldNameProp,
+  createIconProp,
+  createStaticNumberProp,
   COMPONENT_TYPES,
   Triggers,
   createColorProp,
@@ -15,8 +18,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",
@@ -30,11 +38,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)",
     }),
@@ -42,5 +45,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,
+    }),
   },
 };

package/src/mappings/Icon.js

@@ -6,7 +6,10 @@ export const SEED_DATA = {
     category: COMPONENT_TYPES.basic,
     layout: {},
     props: {
-        name: createIconProp(),
+        name: {
+            ...createIconProp(),
+            group: GROUPS.data,
+        },
         color: createColorProp(),
         size: createNumberProp({
             group: GROUPS.basic,

package/src/mappings/Icon.ts

@@ -13,7 +13,10 @@ export const SEED_DATA = {
   category: COMPONENT_TYPES.basic,
   layout: {},
   props: {
-    name: createIconProp(),
+    name: {
+      ...createIconProp(),
+      group: GROUPS.data,
+    },
     color: createColorProp(),
     size: createNumberProp({
       group: GROUPS.basic,

package/src/mappings/KeyboardAwareScrollView.js

@@ -0,0 +1,38 @@
+import { COMPONENT_TYPES, createStaticBoolProp, createStaticNumberProp, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Keyboard Aware Scroll View",
+    tag: "KeyboardAwareScrollView",
+    description: "View that moves pushes the content when virtual keyboard is open.",
+    category: COMPONENT_TYPES.layout,
+    layout: {},
+    props: {
+        viewIsInsideTabBar: createStaticBoolProp({
+            label: "View Is Inside TabBar",
+            description: "Adds an extra offset that represents the TabBarIOS height.",
+        }),
+        enableAutomaticScroll: createStaticBoolProp({
+            label: "Enable Automatic Scroll",
+            description: "When focus in TextInput will scroll the position, default is enabled",
+        }),
+        extraHeight: createStaticNumberProp({
+            label: "Extra Height",
+            description: "Adds an extra offset when focusing the TextInputs",
+        }),
+        extraScrollHeight: createStaticNumberProp({
+            label: "Extra Scroll Height",
+            description: "Adds an extra offset to the keyboard. Useful if you want to stick elements above the keyboard",
+        }),
+        enableResetScrollToCoords: createStaticBoolProp({
+            label: "Enable Reset Scroll To Coordinates",
+            description: "Lets the user enable or disable automatic resetScrollToCoords",
+        }),
+        keyboardOpeningTime: createStaticNumberProp({
+            label: "Keyboard Opening Time",
+            description: "Sets the delay time before scrolling to new position, default is 250",
+        }),
+        enableOnAndroid: createStaticBoolProp({
+            label: "Enable On Android",
+            description: "Enable Android Support",
+        }),
+    },
+};

package/src/mappings/KeyboardAwareScrollView.ts

@@ -0,0 +1,48 @@
+import {
+  COMPONENT_TYPES,
+  createStaticBoolProp,
+  createStaticNumberProp,
+} from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Keyboard Aware Scroll View",
+  tag: "KeyboardAwareScrollView",
+  description:
+    "View that moves pushes the content when virtual keyboard is open.",
+  category: COMPONENT_TYPES.layout,
+  layout: {},
+  props: {
+    viewIsInsideTabBar: createStaticBoolProp({
+      label: "View Is Inside TabBar",
+      description: "Adds an extra offset that represents the TabBarIOS height.",
+    }),
+    enableAutomaticScroll: createStaticBoolProp({
+      label: "Enable Automatic Scroll",
+      description:
+        "When focus in TextInput will scroll the position, default is enabled",
+    }),
+    extraHeight: createStaticNumberProp({
+      label: "Extra Height",
+      description: "Adds an extra offset when focusing the TextInputs",
+    }),
+    extraScrollHeight: createStaticNumberProp({
+      label: "Extra Scroll Height",
+      description:
+        "Adds an extra offset to the keyboard. Useful if you want to stick elements above the keyboard",
+    }),
+    enableResetScrollToCoords: createStaticBoolProp({
+      label: "Enable Reset Scroll To Coordinates",
+      description:
+        "Lets the user enable or disable automatic resetScrollToCoords",
+    }),
+    keyboardOpeningTime: createStaticNumberProp({
+      label: "Keyboard Opening Time",
+      description:
+        "Sets the delay time before scrolling to new position, default is 250",
+    }),
+    enableOnAndroid: createStaticBoolProp({
+      label: "Enable On Android",
+      description: "Enable Android Support",
+    }),
+  },
+};