@draftbit/core 46.4.4-c5d4b3.2 → 46.4.4-caab07.0

package/src/components/DeprecatedFAB.js

@@ -1,115 +1,160 @@
 import * as React from "react";
-import { ActivityIndicator, View, StyleSheet, } from "react-native";
+import { ActivityIndicator, View, StyleSheet } from "react-native";
 import color from "color";
 import Config from "./Config";
 import Text from "./Text";
 import Touchable from "./Touchable";
 import Elevation from "./Elevation";
 import { withTheme } from "../theming";
-const FAB = ({ Icon, icon, disabled = false, type = "solid", loading = false, color: colorOverride, label, onPress, elevation = 0, style, theme: { colors, disabledOpacity, roundness, typography }, ...rest }) => {
-    let backgroundColor, borderColor, textColor, borderWidth;
-    const buttonColor = colorOverride || colors.primary;
-    if (type === "standard" || type === "extended" || type === "fixed") {
-        backgroundColor = buttonColor;
-        if (disabled) {
-            textColor = color(colors.surface).alpha(disabledOpacity).rgb().string();
-        }
-        else {
-            textColor = colors.surface;
-        }
+const FAB = ({
+  Icon,
+  icon,
+  disabled = false,
+  type = "solid",
+  loading = false,
+  color: colorOverride,
+  label,
+  onPress,
+  elevation = 0,
+  style,
+  theme: { colors, disabledOpacity, roundness, typography },
+  ...rest
+}) => {
+  let backgroundColor, borderColor, textColor, borderWidth;
+  const buttonColor = colorOverride || colors.primary;
+  if (type === "standard" || type === "extended" || type === "fixed") {
+    backgroundColor = buttonColor;
+    if (disabled) {
+      textColor = color(colors.surface).alpha(disabledOpacity).rgb().string();
+    } else {
+      textColor = colors.surface;
     }
-    else {
-        backgroundColor = "transparent";
-        if (disabled) {
-            textColor = color(buttonColor).alpha(disabledOpacity).rgb().string();
-        }
-        else {
-            textColor = buttonColor;
-        }
+  } else {
+    backgroundColor = "transparent";
+    if (disabled) {
+      textColor = color(buttonColor).alpha(disabledOpacity).rgb().string();
+    } else {
+      textColor = buttonColor;
     }
-    if (type === "outline") {
-        if (disabled) {
-            borderColor = color(buttonColor).alpha(disabledOpacity).rgb().string();
-        }
-        else {
-            borderColor = buttonColor;
-        }
-        borderWidth = StyleSheet.hairlineWidth;
+  }
+  if (type === "outline") {
+    if (disabled) {
+      borderColor = color(buttonColor).alpha(disabledOpacity).rgb().string();
+    } else {
+      borderColor = buttonColor;
     }
-    else {
-        borderColor = "transparent";
-        borderWidth = 0;
-    }
-    const buttonStyle = {
-        backgroundColor,
-        borderColor,
-        borderWidth,
-        borderRadius: roundness,
-        alignItems: "center",
-        justifyContent: "center",
-    };
-    const buttonStyles = [styles.button, buttonStyle];
-    const contentStyle = [styles.content];
-    const textStyle = {
-        textAlign: "center",
-        color: textColor,
-    };
-    const iconStyle = [
-        styles.icon,
-        {
-            width: Config.buttonIconSize,
-        },
-    ];
-    if (type === "standard" || type === "outline") {
-        buttonStyle.width = Config.FABSize;
-        buttonStyle.height = Config.FABSize;
-        buttonStyle.borderRadius = Config.FABBorderRadius;
-        contentStyle.push({
-            width: Config.FABSize,
-            height: Config.FABSize,
-        });
-    }
-    if (type === "extended" || type === "fixed") {
-        iconStyle.push({
-            marginLeft: 16,
-            marginRight: -8,
-        });
-        textStyle.margin = 16;
-    }
-    if (type === "fixed") {
-        buttonStyles.push({
-            height: Config.FABFixedHeight,
-            alignSelf: "stretch",
-        });
-    }
-    return (React.createElement(Elevation, { style: [{ elevation }, style] },
-        React.createElement(Touchable, { ...rest, onPress: onPress, accessibilityState: { disabled }, accessibilityRole: "button", disabled: disabled || loading, style: buttonStyles },
-            React.createElement(View, { style: styles.content },
-                icon && loading !== true ? (React.createElement(View, { style: iconStyle },
-                    React.createElement(Icon, { name: icon, size: Config.buttonIconSize, color: textColor }))) : null,
-                loading ? (React.createElement(ActivityIndicator, { size: "small", color: textColor, style: iconStyle })) : null,
-                label ? (React.createElement(Text, { numberOfLines: 1, style: [textStyle, typography.button] }, label)) : null))));
+    borderWidth = StyleSheet.hairlineWidth;
+  } else {
+    borderColor = "transparent";
+    borderWidth = 0;
+  }
+  const buttonStyle = {
+    backgroundColor,
+    borderColor,
+    borderWidth,
+    borderRadius: roundness,
+    alignItems: "center",
+    justifyContent: "center",
+  };
+  const buttonStyles = [styles.button, buttonStyle];
+  const contentStyle = [styles.content];
+  const textStyle = {
+    textAlign: "center",
+    color: textColor,
+  };
+  const iconStyle = [
+    styles.icon,
+    {
+      width: Config.buttonIconSize,
+    },
+  ];
+  if (type === "standard" || type === "outline") {
+    buttonStyle.width = Config.FABSize;
+    buttonStyle.height = Config.FABSize;
+    buttonStyle.borderRadius = Config.FABBorderRadius;
+    contentStyle.push({
+      width: Config.FABSize,
+      height: Config.FABSize,
+    });
+  }
+  if (type === "extended" || type === "fixed") {
+    iconStyle.push({
+      marginLeft: 16,
+      marginRight: -8,
+    });
+    textStyle.margin = 16;
+  }
+  if (type === "fixed") {
+    buttonStyles.push({
+      height: Config.FABFixedHeight,
+      alignSelf: "stretch",
+    });
+  }
+  return React.createElement(
+    Elevation,
+    { style: [{ elevation }, style] },
+    React.createElement(
+      Touchable,
+      {
+        ...rest,
+        onPress: onPress,
+        accessibilityState: { disabled },
+        accessibilityRole: "button",
+        disabled: disabled || loading,
+        style: buttonStyles,
+      },
+      React.createElement(
+        View,
+        { style: styles.content },
+        icon && loading !== true
+          ? React.createElement(
+              View,
+              { style: iconStyle },
+              React.createElement(Icon, {
+                name: icon,
+                size: Config.buttonIconSize,
+                color: textColor,
+              })
+            )
+          : null,
+        loading
+          ? React.createElement(ActivityIndicator, {
+              size: "small",
+              color: textColor,
+              style: iconStyle,
+            })
+          : null,
+        label
+          ? React.createElement(
+              Text,
+              { numberOfLines: 1, style: [textStyle, typography.button] },
+              label
+            )
+          : null
+      )
+    )
+  );
 };
 const styles = StyleSheet.create({
-    button: {
-        borderStyle: "solid",
-    },
-    content: {
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    icon: {
-        alignItems: "center",
-        justifyContent: "center",
-        width: Config.buttonIconSize,
-    },
-    fixed: {
-        left: 0,
-        right: 0,
-        bottom: 0,
-        height: 64,
-        borderRadius: 0,
-    },
+  button: {
+    borderStyle: "solid",
+  },
+  content: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  icon: {
+    alignItems: "center",
+    justifyContent: "center",
+    width: Config.buttonIconSize,
+  },
+  fixed: {
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: 64,
+    borderRadius: 0,
+  },
 });
 export default withTheme(FAB);

package/src/components/Divider.js

@@ -2,12 +2,15 @@ import * as React from "react";
 import { StyleSheet, View } from "react-native";
 import { withTheme } from "../theming";
 const Divider = ({ style, color, theme: { colors }, ...rest }) => {
-    return (React.createElement(View, { style: [
-            {
-                backgroundColor: color || colors.divider,
-                height: StyleSheet.hairlineWidth,
-            },
-            style,
-        ], ...rest }));
+  return React.createElement(View, {
+    style: [
+      {
+        backgroundColor: color || colors.divider,
+        height: StyleSheet.hairlineWidth,
+      },
+      style,
+    ],
+    ...rest,
+  });
 };
 export default withTheme(Divider);

package/src/components/Elevation.js

@@ -1,20 +1,31 @@
 import * as React from "react";
-import { Animated, StyleSheet, View, } from "react-native";
+import { Animated, StyleSheet, View } from "react-native";
 import shadow from "../styles/shadow";
 import { withTheme } from "../theming";
 /* directly copied from https://github.com/callstack/react-native-paper/blob/main/src/components/Surface.tsx#L62 */
 const Elevation = ({ style, theme, children, ...rest }) => {
-    const { elevation = 4, borderRadius: radius } = StyleSheet.flatten(style) || {};
-    const { colors } = theme;
-    const borderRadius = radius;
-    return (React.createElement(Animated.View, { ...rest, style: [
-            {
-                borderRadius,
-                backgroundColor: colors.surface,
-            },
-            elevation ? shadow(elevation) : null,
-            style,
-        ] },
-        React.createElement(View, { style: { overflow: "hidden", borderRadius } }, children)));
+  const { elevation = 4, borderRadius: radius } =
+    StyleSheet.flatten(style) || {};
+  const { colors } = theme;
+  const borderRadius = radius;
+  return React.createElement(
+    Animated.View,
+    {
+      ...rest,
+      style: [
+        {
+          borderRadius,
+          backgroundColor: colors.surface,
+        },
+        elevation ? shadow(elevation) : null,
+        style,
+      ],
+    },
+    React.createElement(
+      View,
+      { style: { overflow: "hidden", borderRadius } },
+      children
+    )
+  );
 };
 export default withTheme(Elevation);

package/src/components/FAB.js

@@ -1,46 +1,92 @@
 import * as React from "react";
-import { View, StyleSheet, Pressable, ActivityIndicator, Platform, } from "react-native";
+import {
+  View,
+  StyleSheet,
+  Pressable,
+  ActivityIndicator,
+  Platform,
+} from "react-native";
 import { withTheme } from "../theming";
-const FAB = ({ onPress, disabled, loading, iconName = "MaterialIcons/add", style, theme, iconColor, bgColor, size = 50, Icon, ...props }) => {
-    const backgroundColor = bgColor || theme.colors.primary;
-    const color = iconColor || "#FFF";
-    return (React.createElement(View, { style: [
+const FAB = ({
+  onPress,
+  disabled,
+  loading,
+  iconName = "MaterialIcons/add",
+  style,
+  theme,
+  iconColor,
+  bgColor,
+  size = 50,
+  Icon,
+  ...props
+}) => {
+  const backgroundColor = bgColor || theme.colors.primary;
+  const color = iconColor || "#FFF";
+  return React.createElement(
+    View,
+    {
+      style: [
+        {
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          overflow: "hidden",
+        },
+        style,
+      ],
+    },
+    React.createElement(
+      Pressable,
+      {
+        onPress: onPress,
+        disabled: loading || disabled,
+        android_ripple: {
+          color: "#333",
+          radius: size / 4,
+        },
+        style: ({ pressed }) => {
+          return [
+            styles.button,
             {
-                width: size,
-                height: size,
-                borderRadius: size / 2,
-                overflow: "hidden",
+              opacity: pressed || disabled ? 0.75 : 1,
+              width: size,
+              height: size,
+              borderRadius: size / 2,
+              backgroundColor,
             },
-            style,
-        ] },
-        React.createElement(Pressable, { onPress: onPress, disabled: loading || disabled, android_ripple: {
-                color: "#333",
-                radius: size / 4,
-            }, style: ({ pressed }) => {
-                return [
-                    styles.button,
-                    {
-                        opacity: pressed || disabled ? 0.75 : 1,
-                        width: size,
-                        height: size,
-                        borderRadius: size / 2,
-                        backgroundColor,
-                    },
-                ];
-            }, ...props },
-            React.createElement(View, null, loading ? (React.createElement(ActivityIndicator, { style: size > 50 ? { marginTop: 2, marginLeft: 2 } : undefined, size: size <= 50 ? "small" : "large", color: color })) : (React.createElement(Icon, { name: iconName, size: size, color: color }))))));
+          ];
+        },
+        ...props,
+      },
+      React.createElement(
+        View,
+        null,
+        loading
+          ? React.createElement(ActivityIndicator, {
+              style: size > 50 ? { marginTop: 2, marginLeft: 2 } : undefined,
+              size: size <= 50 ? "small" : "large",
+              color: color,
+            })
+          : React.createElement(Icon, {
+              name: iconName,
+              size: size,
+              color: color,
+            })
+      )
+    )
+  );
 };
 const styles = StyleSheet.create({
-    button: {
-        backgroundColor: "#5a45ff",
-        justifyContent: "center",
-        alignItems: "center",
-        ...Platform.select({
-            web: {
-                cursor: "pointer",
-                userSelect: "none",
-            },
-        }),
-    },
+  button: {
+    backgroundColor: "#5a45ff",
+    justifyContent: "center",
+    alignItems: "center",
+    ...Platform.select({
+      web: {
+        cursor: "pointer",
+        userSelect: "none",
+      },
+    }),
+  },
 });
 export default withTheme(FAB);

package/src/components/FieldSearchBarFull.js

@@ -1,53 +1,90 @@
 import * as React from "react";
-import { View, TextInput, StyleSheet, } from "react-native";
+import { View, TextInput, StyleSheet } from "react-native";
 import { withTheme } from "../theming";
 import Config from "./Config";
-const FieldSearchBarFull = ({ showIcon, Icon, icon = "search", placeholder = "", style, theme: { colors, typography }, onChange: changeOverride, onSubmit: submitOverride, value, defaultValue, }) => {
-    const [focused, setIsFocused] = React.useState(false);
-    const onBlur = () => {
-        setIsFocused(false);
-    };
-    const [internalValue, setInternalValue] = React.useState(value || defaultValue);
-    React.useEffect(() => {
-        if (value != null) {
-            setInternalValue(value);
-        }
-    }, [value]);
-    React.useEffect(() => {
-        if (defaultValue != null) {
-            setInternalValue(defaultValue);
-        }
-    }, [defaultValue]);
-    const onChange = React.useCallback((text) => {
-        changeOverride && changeOverride(text);
-    }, [changeOverride]);
-    const onFocus = () => {
-        setIsFocused(true);
-    };
-    const onSubmit = (e) => {
-        submitOverride && submitOverride(e);
-    };
-    const { lineHeight, ...typeStyles } = typography.body2; // eslint-disable-line @typescript-eslint/no-unused-vars
-    const handleChangeText = (newValue) => {
-        setInternalValue(newValue);
-        if (onChange) {
-            onChange(newValue);
-        }
-    };
-    return (React.createElement(View, { style: [styles.container, style] },
-        showIcon && (React.createElement(Icon, { name: icon, size: Config.fieldSearchBarFullIconSize, color: focused ? colors.primary : colors.light })),
-        React.createElement(View, { style: { marginLeft: showIcon ? 12 : 0, flex: 1 } },
-            React.createElement(TextInput, { clearButtonMode: "while-editing", placeholder: placeholder, value: internalValue, onBlur: onBlur, onFocus: onFocus, onChangeText: handleChangeText, onSubmitEditing: onSubmit, placeholderTextColor: colors.light, style: [
-                    {
-                        color: colors.medium,
-                    },
-                    typeStyles,
-                ] }))));
+const FieldSearchBarFull = ({
+  showIcon,
+  Icon,
+  icon = "search",
+  placeholder = "",
+  style,
+  theme: { colors, typography },
+  onChange: changeOverride,
+  onSubmit: submitOverride,
+  value,
+  defaultValue,
+}) => {
+  const [focused, setIsFocused] = React.useState(false);
+  const onBlur = () => {
+    setIsFocused(false);
+  };
+  const [internalValue, setInternalValue] = React.useState(
+    value || defaultValue
+  );
+  React.useEffect(() => {
+    if (value != null) {
+      setInternalValue(value);
+    }
+  }, [value]);
+  React.useEffect(() => {
+    if (defaultValue != null) {
+      setInternalValue(defaultValue);
+    }
+  }, [defaultValue]);
+  const onChange = React.useCallback(
+    (text) => {
+      changeOverride && changeOverride(text);
+    },
+    [changeOverride]
+  );
+  const onFocus = () => {
+    setIsFocused(true);
+  };
+  const onSubmit = (e) => {
+    submitOverride && submitOverride(e);
+  };
+  const { lineHeight, ...typeStyles } = typography.body2; // eslint-disable-line @typescript-eslint/no-unused-vars
+  const handleChangeText = (newValue) => {
+    setInternalValue(newValue);
+    if (onChange) {
+      onChange(newValue);
+    }
+  };
+  return React.createElement(
+    View,
+    { style: [styles.container, style] },
+    showIcon &&
+      React.createElement(Icon, {
+        name: icon,
+        size: Config.fieldSearchBarFullIconSize,
+        color: focused ? colors.primary : colors.light,
+      }),
+    React.createElement(
+      View,
+      { style: { marginLeft: showIcon ? 12 : 0, flex: 1 } },
+      React.createElement(TextInput, {
+        clearButtonMode: "while-editing",
+        placeholder: placeholder,
+        value: internalValue,
+        onBlur: onBlur,
+        onFocus: onFocus,
+        onChangeText: handleChangeText,
+        onSubmitEditing: onSubmit,
+        placeholderTextColor: colors.light,
+        style: [
+          {
+            color: colors.medium,
+          },
+          typeStyles,
+        ],
+      })
+    )
+  );
 };
 const styles = StyleSheet.create({
-    container: {
-        flexDirection: "row",
-        alignItems: "center",
-    },
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
 });
 export default withTheme(FieldSearchBarFull);

package/src/components/FormRow.js

@@ -2,18 +2,34 @@ import * as React from "react";
 import { Text, StyleSheet } from "react-native";
 import { extractStyles } from "../utilities";
 import Touchable from "./Touchable";
-export default function FormRow({ disabled, direction, children, label, style, onPress, ...rest }) {
-    const { textStyles, viewStyles } = extractStyles(style);
-    return (React.createElement(Touchable, { disabled: disabled, onPress: onPress, style: [styles.row, { flexDirection: direction }, viewStyles], ...rest },
-        React.createElement(Text, { style: textStyles }, label),
-        children));
+export default function FormRow({
+  disabled,
+  direction,
+  children,
+  label,
+  style,
+  onPress,
+  ...rest
+}) {
+  const { textStyles, viewStyles } = extractStyles(style);
+  return React.createElement(
+    Touchable,
+    {
+      disabled: disabled,
+      onPress: onPress,
+      style: [styles.row, { flexDirection: direction }, viewStyles],
+      ...rest,
+    },
+    React.createElement(Text, { style: textStyles }, label),
+    children
+  );
 }
 const styles = StyleSheet.create({
-    row: {
-        marginLeft: 8,
-        marginRight: 8,
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-    },
+  row: {
+    marginLeft: 8,
+    marginRight: 8,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
 });