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

package/src/components/RadioButton/RadioButtonFieldGroup.js

@@ -3,15 +3,31 @@ import { View } from "react-native";
 import Text from "../Text";
 import { withTheme } from "../../theming";
 import RadioButtonGroup from "./RadioButtonGroup";
-const RadioButtonFieldGroup = ({ label, children, theme, labelStyle, style, ...rest }) => {
-    return (React.createElement(View, { style: style },
-        React.createElement(Text, { style: [
-                {
-                    fontSize: theme.typography.headline4.fontSize,
-                    color: theme.typography.headline4.color,
-                },
-                labelStyle,
-            ] }, label),
-        React.createElement(RadioButtonGroup, { theme: theme, ...rest }, children)));
+const RadioButtonFieldGroup = ({
+  label,
+  children,
+  theme,
+  labelStyle,
+  style,
+  ...rest
+}) => {
+  return React.createElement(
+    View,
+    { style: style },
+    React.createElement(
+      Text,
+      {
+        style: [
+          {
+            fontSize: theme.typography.headline4.fontSize,
+            color: theme.typography.headline4.color,
+          },
+          labelStyle,
+        ],
+      },
+      label
+    ),
+    React.createElement(RadioButtonGroup, { theme: theme, ...rest }, children)
+  );
 };
 export default withTheme(RadioButtonFieldGroup);

package/src/components/RadioButton/RadioButtonGroup.js

@@ -3,41 +3,59 @@ import { View } from "react-native";
 import { getValueForRadioButton } from "../../utilities";
 import { radioButtonGroupContext, Direction } from "./context";
 const { Provider } = radioButtonGroupContext;
-const RadioButtonGroup = ({ direction = Direction.Vertical, value = "", onValueChange, defaultValue, style, children, ...rest }) => {
-    const [internalValue, setInternalValue] = React.useState("");
-    React.useEffect(() => {
-        if (value != null) {
-            const realValue = getValueForRadioButton(value);
-            setInternalValue(realValue);
-        }
-    }, [value]);
-    React.useEffect(() => {
-        if (defaultValue != null) {
-            const realDefaultValue = getValueForRadioButton(defaultValue);
-            setInternalValue(realDefaultValue);
-        }
-    }, [defaultValue]);
-    const handleValueChange = (newValue) => {
-        const realNewValue = getValueForRadioButton(newValue);
-        setInternalValue(realNewValue);
-        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(realNewValue);
-    };
-    const _containerStyle = [
-        {
-            flexDirection: direction === Direction.Horizontal ? "row" : "column",
-        },
-    ];
-    if (direction !== Direction.Vertical) {
-        _containerStyle.push({
-            alignItems: "center",
-        });
+const RadioButtonGroup = ({
+  direction = Direction.Vertical,
+  value = "",
+  onValueChange,
+  defaultValue,
+  style,
+  children,
+  ...rest
+}) => {
+  const [internalValue, setInternalValue] = React.useState("");
+  React.useEffect(() => {
+    if (value != null) {
+      const realValue = getValueForRadioButton(value);
+      setInternalValue(realValue);
+    }
+  }, [value]);
+  React.useEffect(() => {
+    if (defaultValue != null) {
+      const realDefaultValue = getValueForRadioButton(defaultValue);
+      setInternalValue(realDefaultValue);
     }
-    return (React.createElement(View, { style: [{ minHeight: 40 }, style], ...rest },
-        React.createElement(Provider, { value: {
-                value: internalValue,
-                onValueChange: handleValueChange,
-                direction,
-            } },
-            React.createElement(View, { style: _containerStyle }, children))));
+  }, [defaultValue]);
+  const handleValueChange = (newValue) => {
+    const realNewValue = getValueForRadioButton(newValue);
+    setInternalValue(realNewValue);
+    onValueChange === null || onValueChange === void 0
+      ? void 0
+      : onValueChange(realNewValue);
+  };
+  const _containerStyle = [
+    {
+      flexDirection: direction === Direction.Horizontal ? "row" : "column",
+    },
+  ];
+  if (direction !== Direction.Vertical) {
+    _containerStyle.push({
+      alignItems: "center",
+    });
+  }
+  return React.createElement(
+    View,
+    { style: [{ minHeight: 40 }, style], ...rest },
+    React.createElement(
+      Provider,
+      {
+        value: {
+          value: internalValue,
+          onValueChange: handleValueChange,
+          direction,
+        },
+      },
+      React.createElement(View, { style: _containerStyle }, children)
+    )
+  );
 };
 export default RadioButtonGroup;

package/src/components/RadioButton/RadioButtonRow.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { StyleSheet, View, Platform, } from "react-native";
+import { StyleSheet, View, Platform } from "react-native";
 import RadioButton from "./RadioButton";
 import Text from "../Text";
 import { useRadioButtonGroupContext } from "./context";
@@ -8,69 +8,116 @@ import Touchable from "../Touchable";
 import { extractStyles, getValueForRadioButton } from "../../utilities";
 export var Direction;
 (function (Direction) {
-    Direction["Row"] = "row";
-    Direction["RowReverse"] = "row-reverse";
+  Direction["Row"] = "row";
+  Direction["RowReverse"] = "row-reverse";
 })(Direction || (Direction = {}));
 const getRadioButtonAlignment = (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";
-    }
+  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);
-    }
+  if (typeof value === "string") {
+    return React.createElement(Text, { style: [labelStyle, textStyle] }, value);
+  } else {
+    return React.createElement(React.Fragment, null, value);
+  }
 };
-const RadioButtonRow = ({ Icon, label, value = "", color, unselectedColor, onPress, labelContainerStyle, labelStyle, radioButtonStyle, direction = Direction.Row, selected, disabled, style, ...rest }) => {
-    const { value: contextValue, onValueChange, direction: parentDirection, } = useRadioButtonGroupContext();
-    const realValue = getValueForRadioButton(value);
-    const realContextValue = getValueForRadioButton(contextValue);
-    const isSelected = selected !== null && selected !== void 0 ? selected : realContextValue === realValue;
-    const handlePress = () => {
-        onPress === null || onPress === void 0 ? void 0 : onPress(realValue);
-        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(realValue);
-    };
-    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: getRadioButtonAlignment(parentDirection, direction),
-            } },
-            React.createElement(RadioButton, { Icon: Icon, selected: isSelected, value: realValue, color: color, unselectedColor: unselectedColor, style: radioButtonStyle }))));
+const RadioButtonRow = ({
+  Icon,
+  label,
+  value = "",
+  color,
+  unselectedColor,
+  onPress,
+  labelContainerStyle,
+  labelStyle,
+  radioButtonStyle,
+  direction = Direction.Row,
+  selected,
+  disabled,
+  style,
+  ...rest
+}) => {
+  const {
+    value: contextValue,
+    onValueChange,
+    direction: parentDirection,
+  } = useRadioButtonGroupContext();
+  const realValue = getValueForRadioButton(value);
+  const realContextValue = getValueForRadioButton(contextValue);
+  const isSelected =
+    selected !== null && selected !== void 0
+      ? selected
+      : realContextValue === realValue;
+  const handlePress = () => {
+    onPress === null || onPress === void 0 ? void 0 : onPress(realValue);
+    onValueChange === null || onValueChange === void 0
+      ? void 0
+      : onValueChange(realValue);
+  };
+  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: getRadioButtonAlignment(parentDirection, direction),
+        },
+      },
+      React.createElement(RadioButton, {
+        Icon: Icon,
+        selected: isSelected,
+        value: realValue,
+        color: color,
+        unselectedColor: unselectedColor,
+        style: radioButtonStyle,
+      })
+    )
+  );
 };
 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,
-    },
+  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 RadioButtonRow;

package/src/components/RadioButton/context.js

@@ -1,14 +1,14 @@
 import { createContext, useContext } from "react";
 export var Direction;
 (function (Direction) {
-    Direction["Horizontal"] = "horizontal";
-    Direction["Vertical"] = "vertical";
+  Direction["Horizontal"] = "horizontal";
+  Direction["Vertical"] = "vertical";
 })(Direction || (Direction = {}));
 export const radioButtonGroupContext = createContext({
-    onValueChange: () => { },
-    value: "",
-    direction: undefined,
+  onValueChange: () => {},
+  value: "",
+  direction: undefined,
 });
 export function useRadioButtonGroupContext() {
-    return useContext(radioButtonGroupContext);
+  return useContext(radioButtonGroupContext);
 }

package/src/components/Row.js

@@ -1,48 +1,88 @@
 import * as React from "react";
-import { View, Text, Image, StyleSheet, } from "react-native";
+import { View, Text, Image, StyleSheet } from "react-native";
 import { withTheme } from "../theming";
 import Config from "./Config";
-const Row = ({ titleTypeStyle, titleColor, subtitleTypeStyle, subtitleColor, title, subtitle, multilineSubtitle, image, right, style, }) => {
-    return (React.createElement(View, { style: [styles.container, { padding: 16 }, style] },
-        React.createElement(View, { style: styles.leftContainer },
-            image && (React.createElement(Image, { source: typeof image === "string" ? { uri: image } : image, style: {
-                    marginRight: 12,
-                    width: subtitle
-                        ? Config.rowMultiLineImageSize
-                        : Config.rowSingleLineImageSize,
-                    height: subtitle
-                        ? Config.rowMultiLineImageSize
-                        : Config.rowSingleLineImageSize,
-                } })),
-            React.createElement(View, { style: styles.textContainer },
-                React.createElement(Text, { style: [
-                        titleTypeStyle,
-                        {
-                            color: titleColor,
-                        },
-                    ], numberOfLines: 1 }, title),
-                subtitle ? (React.createElement(Text, { style: [
-                        subtitleTypeStyle,
-                        {
-                            color: subtitleColor,
-                            marginTop: 4,
-                        },
-                    ], numberOfLines: multilineSubtitle ? undefined : 1 }, subtitle)) : null)),
-        right && right()));
+const Row = ({
+  titleTypeStyle,
+  titleColor,
+  subtitleTypeStyle,
+  subtitleColor,
+  title,
+  subtitle,
+  multilineSubtitle,
+  image,
+  right,
+  style,
+}) => {
+  return React.createElement(
+    View,
+    { style: [styles.container, { padding: 16 }, style] },
+    React.createElement(
+      View,
+      { style: styles.leftContainer },
+      image &&
+        React.createElement(Image, {
+          source: typeof image === "string" ? { uri: image } : image,
+          style: {
+            marginRight: 12,
+            width: subtitle
+              ? Config.rowMultiLineImageSize
+              : Config.rowSingleLineImageSize,
+            height: subtitle
+              ? Config.rowMultiLineImageSize
+              : Config.rowSingleLineImageSize,
+          },
+        }),
+      React.createElement(
+        View,
+        { style: styles.textContainer },
+        React.createElement(
+          Text,
+          {
+            style: [
+              titleTypeStyle,
+              {
+                color: titleColor,
+              },
+            ],
+            numberOfLines: 1,
+          },
+          title
+        ),
+        subtitle
+          ? React.createElement(
+              Text,
+              {
+                style: [
+                  subtitleTypeStyle,
+                  {
+                    color: subtitleColor,
+                    marginTop: 4,
+                  },
+                ],
+                numberOfLines: multilineSubtitle ? undefined : 1,
+              },
+              subtitle
+            )
+          : null
+      )
+    ),
+    right && right()
+  );
 };
 const styles = StyleSheet.create({
-    leftContainer: {
-        flexDirection: "row",
-        flex: 1,
-    },
-    container: {
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-    },
-    textContainer: {
-        flex: 1,
-        justifyContent: "center",
-    },
+  leftContainer: {
+    flexDirection: "row",
+    flex: 1,
+  },
+  container: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  textContainer: {
+    flex: 1,
+    justifyContent: "center",
+  },
 });
 export default withTheme(Row);

package/src/components/RowBodyIcon.js

@@ -2,7 +2,29 @@ import * as React from "react";
 import { withTheme } from "../theming";
 import Row from "./Row";
 import Config from "./Config";
-const RowBodyIcon = ({ Icon, title, subtitle, icon, style, theme: { colors, typography }, }) => {
-    return (React.createElement(Row, { titleTypeStyle: typography.body1, titleColor: colors.medium, subtitleTypeStyle: typography.subtitle2, subtitleColor: colors.light, title: title, subtitle: subtitle, right: () => (React.createElement(Icon, { name: icon, size: Config.rowSingleLineIconSize, color: colors.light, style: { marginLeft: 16 } })), style: style }));
+const RowBodyIcon = ({
+  Icon,
+  title,
+  subtitle,
+  icon,
+  style,
+  theme: { colors, typography },
+}) => {
+  return React.createElement(Row, {
+    titleTypeStyle: typography.body1,
+    titleColor: colors.medium,
+    subtitleTypeStyle: typography.subtitle2,
+    subtitleColor: colors.light,
+    title: title,
+    subtitle: subtitle,
+    right: () =>
+      React.createElement(Icon, {
+        name: icon,
+        size: Config.rowSingleLineIconSize,
+        color: colors.light,
+        style: { marginLeft: 16 },
+      }),
+    style: style,
+  });
 };
 export default withTheme(RowBodyIcon);

package/src/components/RowHeadlineImageCaption.js

@@ -2,11 +2,35 @@ import * as React from "react";
 import { Text } from "react-native";
 import { withTheme } from "../theming";
 import Row from "./Row";
-const RowHeadlineImageCaption = ({ title, subtitle, caption, image, style, theme: { colors, typography }, }) => {
-    return (React.createElement(Row, { titleTypeStyle: typography.headline6, titleColor: colors.strong, subtitleTypeStyle: typography.body2, subtitleColor: colors.medium, title: title, subtitle: subtitle, image: image, right: () => (React.createElement(Text, { style: {
-                ...typography.caption,
-                color: colors.strong,
-                marginLeft: 16,
-            } }, caption)), style: style }));
+const RowHeadlineImageCaption = ({
+  title,
+  subtitle,
+  caption,
+  image,
+  style,
+  theme: { colors, typography },
+}) => {
+  return React.createElement(Row, {
+    titleTypeStyle: typography.headline6,
+    titleColor: colors.strong,
+    subtitleTypeStyle: typography.body2,
+    subtitleColor: colors.medium,
+    title: title,
+    subtitle: subtitle,
+    image: image,
+    right: () =>
+      React.createElement(
+        Text,
+        {
+          style: {
+            ...typography.caption,
+            color: colors.strong,
+            marginLeft: 16,
+          },
+        },
+        caption
+      ),
+    style: style,
+  });
 };
 export default withTheme(RowHeadlineImageCaption);

package/src/components/RowHeadlineImageIcon.js

@@ -2,13 +2,39 @@ import * as React from "react";
 import { withTheme } from "../theming";
 import Row from "./Row";
 import Config from "./Config";
-const RowHeadlineImageIcon = ({ Icon, icon, title, image, subtitle, multilineSubtitle = false, style, theme: { colors, typography }, }) => {
-    return (React.createElement(Row, { titleTypeStyle: typography.headline6, titleColor: colors.strong, subtitleTypeStyle: typography.body2, subtitleColor: colors.medium, title: title, subtitle: subtitle, multilineSubtitle: multilineSubtitle, image: image, right: () => (React.createElement(Icon, { name: icon, size: multilineSubtitle
-                ? Config.rowMultiLineIconSize
-                : Config.rowSingleLineIconSize, color: colors.light, style: {
-                marginLeft: 16,
-                alignSelf: multilineSubtitle ? "flex-start" : "center",
-                marginTop: multilineSubtitle ? 4 : 0,
-            } })), style: style }));
+const RowHeadlineImageIcon = ({
+  Icon,
+  icon,
+  title,
+  image,
+  subtitle,
+  multilineSubtitle = false,
+  style,
+  theme: { colors, typography },
+}) => {
+  return React.createElement(Row, {
+    titleTypeStyle: typography.headline6,
+    titleColor: colors.strong,
+    subtitleTypeStyle: typography.body2,
+    subtitleColor: colors.medium,
+    title: title,
+    subtitle: subtitle,
+    multilineSubtitle: multilineSubtitle,
+    image: image,
+    right: () =>
+      React.createElement(Icon, {
+        name: icon,
+        size: multilineSubtitle
+          ? Config.rowMultiLineIconSize
+          : Config.rowSingleLineIconSize,
+        color: colors.light,
+        style: {
+          marginLeft: 16,
+          alignSelf: multilineSubtitle ? "flex-start" : "center",
+          marginTop: multilineSubtitle ? 4 : 0,
+        },
+      }),
+    style: style,
+  });
 };
 export default withTheme(RowHeadlineImageIcon);

package/src/components/SVG.js

@@ -2,12 +2,32 @@ import * as React from "react";
 import { View, Platform, Image } from "react-native";
 import { SvgUri } from "react-native-svg";
 import Config from "./Config";
-const SVG = ({ source = Config.placeholderSvgURL, style, }) => {
-    return (React.createElement(React.Fragment, null,
-        Platform.OS === "ios" && (React.createElement(View, { style: style },
-            React.createElement(SvgUri, { width: "100%", height: "100%", uri: source }))),
-        Platform.OS === "android" && (React.createElement(View, { style: style },
-            React.createElement(SvgUri, { width: "100%", height: "100%", uri: source }))),
-        Platform.OS === "web" && (React.createElement(Image, { style: style, source: { uri: source } }))));
+const SVG = ({ source = Config.placeholderSvgURL, style }) => {
+  return React.createElement(
+    React.Fragment,
+    null,
+    Platform.OS === "ios" &&
+      React.createElement(
+        View,
+        { style: style },
+        React.createElement(SvgUri, {
+          width: "100%",
+          height: "100%",
+          uri: source,
+        })
+      ),
+    Platform.OS === "android" &&
+      React.createElement(
+        View,
+        { style: style },
+        React.createElement(SvgUri, {
+          width: "100%",
+          height: "100%",
+          uri: source,
+        })
+      ),
+    Platform.OS === "web" &&
+      React.createElement(Image, { style: style, source: { uri: source } })
+  );
 };
 export default SVG;