@draftbit/core 43.4.11-d2edf8.3 → 43.4.13-33318c.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/Container.js

@@ -5,6 +5,19 @@ import Elevation from "./Elevation";
 const Container = ({ useThemeGutterPadding, borderColor, borderWidth, backgroundColor, backgroundImage, backgroundImageResizeMode, elevation, style, children, theme, // eslint-disable-line @typescript-eslint/no-unused-vars
 ...rest }) => {
     const { flex, flexGrow, flexWrap, flexBasis, flexShrink, flexDirection, alignContent, justifyContent, alignItems, padding, paddingTop, paddingBottom, paddingLeft, paddingRight, paddingVertical, paddingHorizontal, ...styleProp } = StyleSheet.flatten(style) || {};
+    console.log("Container props", {
+        useThemeGutterPadding,
+        borderColor,
+        borderWidth,
+        backgroundColor,
+        backgroundImage,
+        backgroundImageResizeMode,
+        elevation,
+        style,
+        children,
+        theme,
+        rest: { ...rest },
+    });
     const containerStyle = {
         backgroundColor,
         borderColor,

package/src/components/Container.tsx

@@ -59,6 +59,20 @@ const Container: React.FC<Props> = ({
     ...styleProp
   } = StyleSheet.flatten(style) || {};
 
+  console.log("Container props", {
+    useThemeGutterPadding,
+    borderColor,
+    borderWidth,
+    backgroundColor,
+    backgroundImage,
+    backgroundImageResizeMode,
+    elevation,
+    style,
+    children,
+    theme,
+    rest: { ...rest },
+  });
+
   const containerStyle: StyleProp<ViewStyle> = {
     backgroundColor,
     borderColor,

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

@@ -133,6 +133,7 @@ class TextField extends React.Component {
         return this._root && this._root.blur();
     }
     render() {
+        console.log("TextFielf props", this.props);
         const { Icon, type = "underline", disabled = false, label, error = false, leftIconName, leftIconMode, rightIconName, assistiveText, underlineColor: underlineColorProp, multiline = false, numberOfLines = 4, style, theme: { colors, typography, roundness, disabledOpacity }, render = (props) => React.createElement(NativeTextInput, { ...props }), ...rest } = this.props;
         const MINIMIZED_LABEL_Y_OFFSET = -(typography.caption.lineHeight + 4);
         const OUTLINE_MINIMIZED_LABEL_Y_OFFSET = -(16 * 0.5 + 4);

package/src/components/TextField.tsx

@@ -226,6 +226,8 @@ class TextField extends React.Component<Props, State> {
   }
 
   render() {
+    console.log("TextFielf props", this.props);
+
     const {
       Icon,
       type = "underline",

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