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

package/src/components/Header.js

@@ -1,44 +1,88 @@
 import * as React from "react";
-import { View, Text, StyleSheet, } from "react-native";
+import { View, Text, StyleSheet } from "react-native";
 import { withTheme } from "../theming";
 import Divider from "./Divider";
 import Touchable from "./Touchable";
 import Config from "./Config";
-const Header = ({ Icon, titleTypeStyle, titleColor, title, buttonText, dividerTopMargin, icon, onPress, style, theme: { colors, typography }, }) => {
-    return (React.createElement(View, { style: [styles.container, style] },
-        React.createElement(View, { style: styles.topContainer },
-            React.createElement(Text, { style: [
-                    titleTypeStyle,
-                    {
-                        color: titleColor,
-                        flex: 1,
-                    },
-                ], numberOfLines: 1 }, title),
-            onPress && (React.createElement(Touchable, { style: { alignSelf: "center", marginLeft: 12 }, onPress: onPress },
-                React.createElement(View, { style: styles.buttonContainer },
-                    React.createElement(Text, { style: [
-                            typography.subtitle2,
-                            {
-                                color: colors.light,
-                                marginRight: 8,
-                            },
-                        ], numberOfLines: 1 }, buttonText),
-                    React.createElement(Icon, { name: icon, size: Config.headerIconSize, color: colors.light }))))),
-        React.createElement(Divider, { style: { marginTop: dividerTopMargin || 16 } })));
+const Header = ({
+  Icon,
+  titleTypeStyle,
+  titleColor,
+  title,
+  buttonText,
+  dividerTopMargin,
+  icon,
+  onPress,
+  style,
+  theme: { colors, typography },
+}) => {
+  return React.createElement(
+    View,
+    { style: [styles.container, style] },
+    React.createElement(
+      View,
+      { style: styles.topContainer },
+      React.createElement(
+        Text,
+        {
+          style: [
+            titleTypeStyle,
+            {
+              color: titleColor,
+              flex: 1,
+            },
+          ],
+          numberOfLines: 1,
+        },
+        title
+      ),
+      onPress &&
+        React.createElement(
+          Touchable,
+          { style: { alignSelf: "center", marginLeft: 12 }, onPress: onPress },
+          React.createElement(
+            View,
+            { style: styles.buttonContainer },
+            React.createElement(
+              Text,
+              {
+                style: [
+                  typography.subtitle2,
+                  {
+                    color: colors.light,
+                    marginRight: 8,
+                  },
+                ],
+                numberOfLines: 1,
+              },
+              buttonText
+            ),
+            React.createElement(Icon, {
+              name: icon,
+              size: Config.headerIconSize,
+              color: colors.light,
+            })
+          )
+        )
+    ),
+    React.createElement(Divider, {
+      style: { marginTop: dividerTopMargin || 16 },
+    })
+  );
 };
 const styles = StyleSheet.create({
-    container: {
-        alignSelf: "stretch",
-    },
-    topContainer: {
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-    },
-    buttonContainer: {
-        flexDirection: "row",
-        justifyContent: "center",
-        alignItems: "center",
-    },
+  container: {
+    alignSelf: "stretch",
+  },
+  topContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  buttonContainer: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+  },
 });
 export default withTheme(Header);

package/src/components/HeaderLarge.js

@@ -1,7 +1,24 @@
 import * as React from "react";
 import { withTheme } from "../theming";
 import Header from "./Header";
-const HeaderLarge = ({ Icon, title, buttonText, icon, onPress = () => { }, style, theme: { colors, typography }, }) => {
-    return (React.createElement(Header, { Icon: Icon, titleTypeStyle: typography.headline4, titleColor: colors.strong, title: title, buttonText: buttonText, icon: icon, onPress: onPress, style: style }));
+const HeaderLarge = ({
+  Icon,
+  title,
+  buttonText,
+  icon,
+  onPress = () => {},
+  style,
+  theme: { colors, typography },
+}) => {
+  return React.createElement(Header, {
+    Icon: Icon,
+    titleTypeStyle: typography.headline4,
+    titleColor: colors.strong,
+    title: title,
+    buttonText: buttonText,
+    icon: icon,
+    onPress: onPress,
+    style: style,
+  });
 };
 export default withTheme(HeaderLarge);

package/src/components/HeaderMedium.js

@@ -1,7 +1,24 @@
 import * as React from "react";
 import { withTheme } from "../theming";
 import Header from "./Header";
-const HeaderMedium = ({ Icon, title, buttonText, icon, onPress = () => { }, style, theme: { colors, typography }, }) => {
-    return (React.createElement(Header, { Icon: Icon, titleTypeStyle: typography.headline6, titleColor: colors.strong, title: title, buttonText: buttonText, icon: icon, onPress: onPress, style: style }));
+const HeaderMedium = ({
+  Icon,
+  title,
+  buttonText,
+  icon,
+  onPress = () => {},
+  style,
+  theme: { colors, typography },
+}) => {
+  return React.createElement(Header, {
+    Icon: Icon,
+    titleTypeStyle: typography.headline6,
+    titleColor: colors.strong,
+    title: title,
+    buttonText: buttonText,
+    icon: icon,
+    onPress: onPress,
+    style: style,
+  });
 };
 export default withTheme(HeaderMedium);

package/src/components/HeaderOverline.js

@@ -1,7 +1,25 @@
 import * as React from "react";
 import { withTheme } from "../theming";
 import Header from "./Header";
-const HeaderOverline = ({ Icon, title, buttonText, icon, onPress = () => { }, style, theme: { colors, typography }, }) => {
-    return (React.createElement(Header, { Icon: Icon, titleTypeStyle: typography.overline, titleColor: colors.light, title: title && title.toUpperCase(), buttonText: buttonText, icon: icon, dividerTopMargin: 12, onPress: onPress, style: style }));
+const HeaderOverline = ({
+  Icon,
+  title,
+  buttonText,
+  icon,
+  onPress = () => {},
+  style,
+  theme: { colors, typography },
+}) => {
+  return React.createElement(Header, {
+    Icon: Icon,
+    titleTypeStyle: typography.overline,
+    titleColor: colors.light,
+    title: title && title.toUpperCase(),
+    buttonText: buttonText,
+    icon: icon,
+    dividerTopMargin: 12,
+    onPress: onPress,
+    style: style,
+  });
 };
 export default withTheme(HeaderOverline);

package/src/components/IconButton.js

@@ -1,35 +1,74 @@
 import * as React from "react";
-import { View, StyleSheet, ActivityIndicator, Pressable, Platform, } from "react-native";
+import {
+  View,
+  StyleSheet,
+  ActivityIndicator,
+  Pressable,
+  Platform,
+} from "react-native";
 import { withTheme } from "../theming";
-const IconButton = ({ Icon, icon, color: customColor, size = 32, disabled = false, loading = false, onPress, theme, style, ...props }) => {
-    const iconColor = customColor || theme.colors.primary;
-    return (React.createElement(Pressable, { onPress: onPress, disabled: disabled || loading, style: ({ pressed }) => {
-            return [
-                styles.container,
-                {
-                    opacity: pressed || disabled ? 0.75 : 1,
-                    width: size,
-                    height: size,
-                    alignItems: "center",
-                    justifyContent: "center",
-                },
-                style,
-            ];
-        }, ...props },
-        React.createElement(View, null,
-            icon && !loading ? (React.createElement(Icon, { name: icon, size: size - 2, color: iconColor })) : null,
-            loading ? React.createElement(ActivityIndicator, { size: "small", color: iconColor }) : null)));
+const IconButton = ({
+  Icon,
+  icon,
+  color: customColor,
+  size = 32,
+  disabled = false,
+  loading = false,
+  onPress,
+  theme,
+  style,
+  ...props
+}) => {
+  const iconColor = customColor || theme.colors.primary;
+  return React.createElement(
+    Pressable,
+    {
+      onPress: onPress,
+      disabled: disabled || loading,
+      style: ({ pressed }) => {
+        return [
+          styles.container,
+          {
+            opacity: pressed || disabled ? 0.75 : 1,
+            width: size,
+            height: size,
+            alignItems: "center",
+            justifyContent: "center",
+          },
+          style,
+        ];
+      },
+      ...props,
+    },
+    React.createElement(
+      View,
+      null,
+      icon && !loading
+        ? React.createElement(Icon, {
+            name: icon,
+            size: size - 2,
+            color: iconColor,
+          })
+        : null,
+      loading
+        ? React.createElement(ActivityIndicator, {
+            size: "small",
+            color: iconColor,
+          })
+        : null
+    )
+  );
 };
 const styles = StyleSheet.create({
-    container: {
-        alignItems: "center",
-        justifyContent: "center",
-        ...Platform.select({
-            web: {
-                cursor: "pointer",
-                userSelect: "none",
-            },
-        }),
-    },
+  container: {
+    alignItems: "center",
+    justifyContent: "center",
+    ...Platform.select({
+      web: {
+        cursor: "pointer",
+        userSelect: "none",
+      },
+    }),
+  },
 });
 export default withTheme(IconButton);

package/src/components/Image.js

@@ -1,47 +1,61 @@
 /* README: Internal Image component used for stuff like Card. DO NOT EXPORT! */
 import React from "react";
-import { Image as NativeImage, StyleSheet, } from "react-native";
+import { Image as NativeImage, StyleSheet } from "react-native";
 import Config from "./Config";
 import AspectRatio from "./AspectRatio";
 const generateDimensions = ({ aspectRatio, width, height }) => {
-    if (aspectRatio && !width && !height) {
-        return {
-            aspectRatio,
-            width: "100%",
-        };
-    }
-    if (aspectRatio && height) {
-        return {
-            aspectRatio,
-            height,
-            width: aspectRatio * height,
-        };
-    }
-    if (aspectRatio && width) {
-        return {
-            aspectRatio,
-            width,
-            height: width / aspectRatio,
-        };
-    }
-    return { width, height };
+  if (aspectRatio && !width && !height) {
+    return {
+      aspectRatio,
+      width: "100%",
+    };
+  }
+  if (aspectRatio && height) {
+    return {
+      aspectRatio,
+      height,
+      width: aspectRatio * height,
+    };
+  }
+  if (aspectRatio && width) {
+    return {
+      aspectRatio,
+      width,
+      height: width / aspectRatio,
+    };
+  }
+  return { width, height };
 };
 const Image = ({ source, resizeMode = "cover", style, ...props }) => {
-    let imageSource = source === null || source === undefined
-        ? Config.placeholderImageURL
-        : source;
-    const styles = StyleSheet.flatten(style || {});
-    const { aspectRatio, width, height } = generateDimensions(styles);
-    if (aspectRatio) {
-        return (React.createElement(AspectRatio, { style: [style, { width, height, aspectRatio }] },
-            React.createElement(NativeImage, { ...props, source: imageSource, resizeMode: resizeMode, style: [
-                    style,
-                    {
-                        height: "100%",
-                        width: "100%",
-                    },
-                ] })));
-    }
-    return (React.createElement(NativeImage, { ...props, source: source, resizeMode: resizeMode, style: style }));
+  let imageSource =
+    source === null || source === undefined
+      ? Config.placeholderImageURL
+      : source;
+  const styles = StyleSheet.flatten(style || {});
+  const { aspectRatio, width, height } = generateDimensions(styles);
+  if (aspectRatio) {
+    return React.createElement(
+      AspectRatio,
+      { style: [style, { width, height, aspectRatio }] },
+      React.createElement(NativeImage, {
+        ...props,
+        source: imageSource,
+        resizeMode: resizeMode,
+        style: [
+          style,
+          {
+            height: "100%",
+            width: "100%",
+          },
+        ],
+      })
+    );
+  }
+  return React.createElement(NativeImage, {
+    ...props,
+    source: source,
+    resizeMode: resizeMode,
+    style: style,
+  });
 };
 export default Image;

package/src/components/Layout.js

@@ -1,50 +1,111 @@
 import * as React from "react";
 import { View } from "react-native";
-export function Center({ width = 240, height = 200, children, bgColor, style, ...rest }) {
-    return (React.createElement(View, { style: [
-            {
-                justifyContent: "center",
-                alignItems: "center",
-                width,
-                height,
-                backgroundColor: bgColor,
-            },
-            style,
-        ], ...rest }, children));
+export function Center({
+  width = 240,
+  height = 200,
+  children,
+  bgColor,
+  style,
+  ...rest
+}) {
+  return React.createElement(
+    View,
+    {
+      style: [
+        {
+          justifyContent: "center",
+          alignItems: "center",
+          width,
+          height,
+          backgroundColor: bgColor,
+        },
+        style,
+      ],
+      ...rest,
+    },
+    children
+  );
 }
 export function Circle({ size = 50, bgColor, children, style, ...rest }) {
-    const borderRadius = 1000;
-    return (React.createElement(Center, { width: size, height: size, bgColor: bgColor, style: [
-            style,
-            { backgroundColor: bgColor, borderRadius, overflow: "hidden" },
-        ], ...rest }, children));
+  const borderRadius = 1000;
+  return React.createElement(
+    Center,
+    {
+      width: size,
+      height: size,
+      bgColor: bgColor,
+      style: [
+        style,
+        { backgroundColor: bgColor, borderRadius, overflow: "hidden" },
+      ],
+      ...rest,
+    },
+    children
+  );
 }
 export function Square({ size = 50, bgColor, children, style, ...rest }) {
-    return (React.createElement(Center, { style: style, width: size, height: size, bgColor: bgColor, ...rest }, children));
+  return React.createElement(
+    Center,
+    { style: style, width: size, height: size, bgColor: bgColor, ...rest },
+    children
+  );
 }
 export function Row({ justifyContent, alignItems, children, style, ...rest }) {
-    return (React.createElement(View, { style: [
-            style,
-            {
-                alignItems,
-                flexDirection: "row",
-                justifyContent: justifyContent,
-            },
-        ], ...rest }, children));
+  return React.createElement(
+    View,
+    {
+      style: [
+        style,
+        {
+          alignItems,
+          flexDirection: "row",
+          justifyContent: justifyContent,
+        },
+      ],
+      ...rest,
+    },
+    children
+  );
 }
-export function Spacer({ top = 8, right = 8, bottom = 8, left = 8, children, style, ...rest }) {
-    return (React.createElement(View, { style: [
-            style,
-            {
-                paddingRight: right,
-                paddingTop: top,
-                paddingLeft: left,
-                paddingBottom: bottom,
-            },
-        ], ...rest }, children));
+export function Spacer({
+  top = 8,
+  right = 8,
+  bottom = 8,
+  left = 8,
+  children,
+  style,
+  ...rest
+}) {
+  return React.createElement(
+    View,
+    {
+      style: [
+        style,
+        {
+          paddingRight: right,
+          paddingTop: top,
+          paddingLeft: left,
+          paddingBottom: bottom,
+        },
+      ],
+      ...rest,
+    },
+    children
+  );
 }
-export function Stack({ children, justifyContent = "flex-start", alignItems = "flex-start", style, ...rest }) {
-    return (
+export function Stack({
+  children,
+  justifyContent = "flex-start",
+  alignItems = "flex-start",
+  style,
+  ...rest
+}) {
+  return (
     // style must go first since we don't want justifyContent, alignItems overridden
-    React.createElement(View, { style: [style, { justifyContent, alignItems }], ...rest }, children));
+    React.createElement(
+      View,
+      { style: [style, { justifyContent, alignItems }], ...rest },
+      children
+    )
+  );
 }

package/src/components/NumberInput.js

@@ -2,48 +2,52 @@ import React, { useEffect, useState } from "react";
 import { TextInput } from "react-native";
 import { isString, isNumber, isNaN } from "lodash";
 const NumberInput = ({ onChangeText, value, defaultValue, ...props }) => {
-    const [currentStringNumberValue, setCurrentStringNumberValue] = useState("0");
-    const formatValueToStringNumber = (valueToFormat) => {
-        if (valueToFormat != null) {
-            if (isString(valueToFormat) && valueToFormat !== "") {
-                if (/^0[1-9]$/.test(valueToFormat)) {
-                    return valueToFormat.slice(1);
-                }
-                else if (/^[+-]?([0-9]+\.?[0-9]*|\.[0-9]+)$/.test(valueToFormat)) {
-                    return valueToFormat;
-                }
-                else {
-                    return currentStringNumberValue;
-                }
-            }
-            else if (isNumber(valueToFormat) && !isNaN(valueToFormat)) {
-                return valueToFormat.toString();
-            }
+  const [currentStringNumberValue, setCurrentStringNumberValue] = useState("0");
+  const formatValueToStringNumber = (valueToFormat) => {
+    if (valueToFormat != null) {
+      if (isString(valueToFormat) && valueToFormat !== "") {
+        if (/^0[1-9]$/.test(valueToFormat)) {
+          return valueToFormat.slice(1);
+        } else if (/^[+-]?([0-9]+\.?[0-9]*|\.[0-9]+)$/.test(valueToFormat)) {
+          return valueToFormat;
+        } else {
+          return currentStringNumberValue;
         }
-        return "0";
-    };
-    // set currentStringNumberValue as defaultValue prop if there is a differnce on first render only
-    useEffect(() => {
-        const defaultStringNumberValue = formatValueToStringNumber(defaultValue);
-        if (currentStringNumberValue !== defaultStringNumberValue) {
-            setCurrentStringNumberValue(defaultStringNumberValue);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    const handleChangeText = (newValue) => {
-        const newStringNumberValue = formatValueToStringNumber(newValue);
-        const number = parseFloat(newStringNumberValue);
-        setCurrentStringNumberValue(newStringNumberValue);
-        onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(number);
-    };
-    // run handleChangeText with value prop only when value prop changes (and first render to reset currentStringNumberValue)
-    useEffect(() => {
-        const nextStringNumberValue = formatValueToStringNumber(value);
-        if (currentStringNumberValue !== nextStringNumberValue) {
-            handleChangeText(nextStringNumberValue);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [value]);
-    return (React.createElement(TextInput, { keyboardType: "numeric", value: currentStringNumberValue, onChangeText: handleChangeText, ...props }));
+      } else if (isNumber(valueToFormat) && !isNaN(valueToFormat)) {
+        return valueToFormat.toString();
+      }
+    }
+    return "0";
+  };
+  // set currentStringNumberValue as defaultValue prop if there is a differnce on first render only
+  useEffect(() => {
+    const defaultStringNumberValue = formatValueToStringNumber(defaultValue);
+    if (currentStringNumberValue !== defaultStringNumberValue) {
+      setCurrentStringNumberValue(defaultStringNumberValue);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const handleChangeText = (newValue) => {
+    const newStringNumberValue = formatValueToStringNumber(newValue);
+    const number = parseFloat(newStringNumberValue);
+    setCurrentStringNumberValue(newStringNumberValue);
+    onChangeText === null || onChangeText === void 0
+      ? void 0
+      : onChangeText(number);
+  };
+  // run handleChangeText with value prop only when value prop changes (and first render to reset currentStringNumberValue)
+  useEffect(() => {
+    const nextStringNumberValue = formatValueToStringNumber(value);
+    if (currentStringNumberValue !== nextStringNumberValue) {
+      handleChangeText(nextStringNumberValue);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+  return React.createElement(TextInput, {
+    keyboardType: "numeric",
+    value: currentStringNumberValue,
+    onChangeText: handleChangeText,
+    ...props,
+  });
 };
 export default NumberInput;