@draftbit/core 46.4.4-fe82de.2 → 47.0.0-alpha.0

package/src/components/RadioButton/RadioButtonGroup.js

@@ -1,43 +0,0 @@
-import * as React from "react";
-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",
-        });
-    }
-    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,76 +0,0 @@
-import * as React from "react";
-import { StyleSheet, View, Platform, } from "react-native";
-import RadioButton from "./RadioButton";
-import Text from "../Text";
-import { useRadioButtonGroupContext } from "./context";
-import { Direction as GroupDirection } from "./context";
-import Touchable from "../Touchable";
-import { extractStyles, getValueForRadioButton } from "../../utilities";
-export var Direction;
-(function (Direction) {
-    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";
-    }
-};
-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);
-    }
-};
-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,
-    },
-});
-export default RadioButtonRow;

package/src/components/RadioButton/context.js

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

package/src/components/RadioButton/index.js

@@ -1,4 +0,0 @@
-export { default as RadioButton } from "./RadioButton";
-export { default as RadioButtonGroup } from "./RadioButtonGroup";
-export { default as RadioButtonRow } from "./RadioButtonRow";
-export { default as RadioButtonFieldGroup } from "./RadioButtonFieldGroup";

package/src/components/ResizeMode.js

@@ -1 +0,0 @@
-export {};

package/src/components/ResizeMode.ts

@@ -1,7 +0,0 @@
-export type ResizeModeType =
-  | "cover"
-  | "contain"
-  | "stretch"
-  | "repeat"
-  | "center"
-  | undefined;

package/src/components/Row.js

@@ -1,48 +0,0 @@
-import * as React from "react";
-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 styles = StyleSheet.create({
-    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/Row.tsx

@@ -1,108 +0,0 @@
-import * as React from "react";
-import {
-  View,
-  Text,
-  Image,
-  ImageSourcePropType,
-  StyleSheet,
-  StyleProp,
-  TextStyle,
-  ViewStyle,
-} from "react-native";
-import { withTheme } from "../theming";
-import Config from "./Config";
-import theme from "../styles/DefaultTheme";
-
-type Props = {
-  titleTypeStyle?: StyleProp<TextStyle>;
-  titleColor?: string;
-  subtitleTypeStyle?: StyleProp<TextStyle>;
-  subtitleColor?: string;
-  title?: string;
-  subtitle?: string;
-  multilineSubtitle?: boolean;
-  image?: string | ImageSourcePropType;
-  right?: () => React.ReactNode;
-  style?: StyleProp<ViewStyle>;
-  theme: typeof theme;
-};
-
-const Row: React.FC<React.PropsWithChildren<Props>> = ({
-  titleTypeStyle,
-  titleColor,
-  subtitleTypeStyle,
-  subtitleColor,
-  title,
-  subtitle,
-  multilineSubtitle,
-  image,
-  right,
-  style,
-}) => {
-  return (
-    <View style={[styles.container, { padding: 16 }, style]}>
-      <View style={styles.leftContainer}>
-        {image && (
-          <Image
-            source={typeof image === "string" ? { uri: image } : image}
-            style={{
-              marginRight: 12,
-              width: subtitle
-                ? Config.rowMultiLineImageSize
-                : Config.rowSingleLineImageSize,
-              height: subtitle
-                ? Config.rowMultiLineImageSize
-                : Config.rowSingleLineImageSize,
-            }}
-          />
-        )}
-        <View style={styles.textContainer}>
-          <Text
-            style={[
-              titleTypeStyle,
-              {
-                color: titleColor,
-              },
-            ]}
-            numberOfLines={1}
-          >
-            {title}
-          </Text>
-          {subtitle ? (
-            <Text
-              style={[
-                subtitleTypeStyle,
-                {
-                  color: subtitleColor,
-                  marginTop: 4,
-                },
-              ]}
-              numberOfLines={multilineSubtitle ? undefined : 1}
-            >
-              {subtitle}
-            </Text>
-          ) : null}
-        </View>
-      </View>
-      {right && right()}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  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

@@ -1,8 +0,0 @@
-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 }));
-};
-export default withTheme(RowBodyIcon);

package/src/components/RowBodyIcon.tsx

@@ -1,47 +0,0 @@
-import * as React from "react";
-import { withTheme } from "../theming";
-import type { Theme } from "../styles/DefaultTheme";
-import type { IconSlot } from "../interfaces/Icon";
-
-import Row from "./Row";
-import Config from "./Config";
-import { StyleProp, ViewStyle } from "react-native";
-
-type Props = {
-  title?: string;
-  subtitle?: string;
-  icon: string;
-  style?: StyleProp<ViewStyle>;
-  theme: Theme;
-} & IconSlot;
-
-const RowBodyIcon: React.FC<React.PropsWithChildren<Props>> = ({
-  Icon,
-  title,
-  subtitle,
-  icon,
-  style,
-  theme: { colors, typography },
-}) => {
-  return (
-    <Row
-      titleTypeStyle={typography.body1}
-      titleColor={colors.medium}
-      subtitleTypeStyle={typography.subtitle2}
-      subtitleColor={colors.light}
-      title={title}
-      subtitle={subtitle}
-      right={() => (
-        <Icon
-          name={icon}
-          size={Config.rowSingleLineIconSize}
-          color={colors.light}
-          style={{ marginLeft: 16 }}
-        />
-      )}
-      style={style}
-    />
-  );
-};
-
-export default withTheme(RowBodyIcon);

package/src/components/RowHeadlineImageCaption.js

@@ -1,12 +0,0 @@
-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 }));
-};
-export default withTheme(RowHeadlineImageCaption);

package/src/components/RowHeadlineImageCaption.tsx

@@ -1,49 +0,0 @@
-import * as React from "react";
-import { Text, ImageSourcePropType, StyleProp, ViewStyle } from "react-native";
-import { withTheme } from "../theming";
-import Row from "./Row";
-import theme from "../styles/DefaultTheme";
-
-type Props = {
-  title?: string;
-  subtitle?: string;
-  caption?: string;
-  image: string | ImageSourcePropType;
-  style?: StyleProp<ViewStyle>;
-  theme: typeof theme;
-};
-
-const RowHeadlineImageCaption: React.FC<React.PropsWithChildren<Props>> = ({
-  title,
-  subtitle,
-  caption,
-  image,
-  style,
-  theme: { colors, typography },
-}) => {
-  return (
-    <Row
-      titleTypeStyle={typography.headline6}
-      titleColor={colors.strong}
-      subtitleTypeStyle={typography.body2}
-      subtitleColor={colors.medium}
-      title={title}
-      subtitle={subtitle}
-      image={image}
-      right={() => (
-        <Text
-          style={{
-            ...typography.caption,
-            color: colors.strong,
-            marginLeft: 16,
-          }}
-        >
-          {caption}
-        </Text>
-      )}
-      style={style}
-    />
-  );
-};
-
-export default withTheme(RowHeadlineImageCaption);

package/src/components/RowHeadlineImageIcon.js

@@ -1,14 +0,0 @@
-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 }));
-};
-export default withTheme(RowHeadlineImageIcon);

package/src/components/RowHeadlineImageIcon.tsx

@@ -1,61 +0,0 @@
-import * as React from "react";
-import { withTheme } from "../theming";
-import type { Theme } from "../styles/DefaultTheme";
-import type { IconSlot } from "../interfaces/Icon";
-
-import Row from "./Row";
-import Config from "./Config";
-import { ImageSourcePropType, StyleProp, ViewStyle } from "react-native";
-
-type Props = {
-  title?: string;
-  image: string | ImageSourcePropType;
-  subtitle?: string;
-  multilineSubtitle?: boolean;
-  icon: string;
-  style?: StyleProp<ViewStyle>;
-  theme: Theme;
-} & IconSlot;
-
-const RowHeadlineImageIcon: React.FC<React.PropsWithChildren<Props>> = ({
-  Icon,
-  icon,
-  title,
-  image,
-  subtitle,
-  multilineSubtitle = false,
-  style,
-  theme: { colors, typography },
-}) => {
-  return (
-    <Row
-      titleTypeStyle={typography.headline6}
-      titleColor={colors.strong}
-      subtitleTypeStyle={typography.body2}
-      subtitleColor={colors.medium}
-      title={title}
-      subtitle={subtitle}
-      multilineSubtitle={multilineSubtitle}
-      image={image}
-      right={() => (
-        <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

@@ -1,13 +0,0 @@
-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 } }))));
-};
-export default SVG;

package/src/components/ScreenContainer.js

@@ -1,34 +0,0 @@
-import * as React from "react";
-import { StyleSheet, ScrollView, View, } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
-import { withTheme } from "../theming";
-function ScreenContainer({ scrollable = false, hasSafeArea = false, hasBottomSafeArea = false, hasTopSafeArea = false, theme, style, children, ...rest }) {
-    const backgroundColor = theme.colors.background;
-    const edges = ["left", "right"];
-    if (hasSafeArea || hasTopSafeArea) {
-        edges.push("top");
-    }
-    if (hasSafeArea || hasBottomSafeArea) {
-        edges.push("bottom");
-    }
-    return (React.createElement(SafeAreaView, { edges: edges, style: [
-            styles.container,
-            {
-                backgroundColor,
-            },
-        ], ...rest }, scrollable ? (React.createElement(ScrollView, { contentContainerStyle: [
-            styles.scrollViewContainer,
-            { backgroundColor },
-            style,
-        ] }, children)) : (React.createElement(View, { style: [styles.container, { backgroundColor }, style] }, children))));
-}
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-    scrollViewContainer: {
-        flexGrow: 1,
-        flex: undefined,
-    },
-});
-export default withTheme(ScreenContainer);

package/src/components/Slider.js

@@ -1,63 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet } from "react-native";
-import NativeSlider from "@react-native-community/slider";
-import isNumber from "lodash.isnumber";
-import toNumber from "lodash.tonumber";
-import { withTheme } from "../theming";
-function maybeParseValue(value) {
-    if (value === undefined) {
-        return undefined;
-    }
-    if (isNumber(value)) {
-        return value;
-    }
-    try {
-        const maybe = toNumber(value);
-        if (isNumber(maybe)) {
-            return maybe;
-        }
-    }
-    catch {
-        return undefined;
-    }
-    return undefined;
-}
-function Slider({ Icon, leftIcon, rightIcon, leftIconColor, rightIconColor, value, defaultValue, minimumTrackTintColor, maximumTrackTintColor, thumbTintColor, minimumValue = 0, maximumValue = 100, tapToSeek, step = 1, onValueChange = () => { }, style, theme, ...rest }) {
-    const [internalValue, setInternalValue] = React.useState(value || defaultValue);
-    React.useEffect(() => {
-        if (value != null) {
-            setInternalValue(value);
-        }
-    }, [value]);
-    React.useEffect(() => {
-        if (defaultValue != null) {
-            setInternalValue(defaultValue);
-        }
-    }, [defaultValue]);
-    const minTrackColor = minimumTrackTintColor || theme.colors.primary;
-    const maxTrackColor = maximumTrackTintColor || theme.colors.light;
-    const thumbColor = thumbTintColor || theme.colors.primary;
-    const leftIconThemeColor = leftIconColor || theme.colors.light;
-    const rightIconThemeColor = rightIconColor || theme.colors.light;
-    const parsedValue = maybeParseValue(internalValue);
-    const handleSlidingComplete = (newValue) => {
-        setInternalValue(newValue);
-        onValueChange(newValue);
-    };
-    return (React.createElement(View, { style: [styles.container, style], ...rest },
-        leftIcon ? (React.createElement(Icon, { color: leftIconThemeColor, name: leftIcon, size: 24 })) : null,
-        React.createElement(NativeSlider, { value: parsedValue, step: step, minimumValue: minimumValue, maximumValue: maximumValue, tapToSeek: tapToSeek, minimumTrackTintColor: minTrackColor, maximumTrackTintColor: maxTrackColor, thumbTintColor: thumbColor, onSlidingComplete: handleSlidingComplete, style: styles.slider }),
-        rightIcon ? (React.createElement(Icon, { color: rightIconThemeColor, name: rightIcon, size: 24 })) : null));
-}
-const styles = StyleSheet.create({
-    container: {
-        height: 40,
-        flexDirection: "row",
-        alignItems: "center",
-    },
-    slider: {
-        flex: 1,
-        marginHorizontal: 12,
-    },
-});
-export default withTheme(Slider);

package/src/components/StarRating.js

@@ -1,50 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet, Pressable, } from "react-native";
-import { withTheme } from "../theming";
-const StarRating = ({ Icon, starSize = 16, maxStars = 5, rating = 0, defaultValue, isEditable = false, activeColor, inactiveColor, style, onPress, ...rest }) => {
-    const [localRating, setLocalRating] = React.useState(rating || defaultValue || 0);
-    React.useEffect(() => {
-        if (rating != null) {
-            setLocalRating(rating);
-        }
-    }, [rating]);
-    React.useEffect(() => {
-        if (defaultValue != null) {
-            setLocalRating(defaultValue);
-        }
-    }, [defaultValue]);
-    const ratingHandler = React.useCallback((r) => {
-        setLocalRating(r);
-        !!onPress && onPress(r);
-    }, [onPress]);
-    const ratingRounded = Math.round(localRating * 2) / 2;
-    return (React.createElement(View, { style: [styles.container, style], ...rest }, [...Array(maxStars)].map((_, i) => (React.createElement(View, { key: i, style: { display: "flex" } },
-        React.createElement(Icon, { name: ratingRounded - i === 0.5
-                ? "MaterialIcons/star-half"
-                : "MaterialIcons/star", size: starSize, color: ratingRounded > i ? activeColor : inactiveColor }),
-        isEditable && (React.createElement(View, { style: styles.touchContainer },
-            React.createElement(Pressable, { style: styles.pressable, onPress: () => ratingHandler(i + 0.5) }),
-            React.createElement(Pressable, { style: styles.pressable, onPress: () => ratingHandler(i + 1) }))))))));
-};
-const styles = StyleSheet.create({
-    container: {
-        flexDirection: "row",
-        alignItems: "center",
-    },
-    touchContainer: {
-        display: "flex",
-        flexDirection: "row",
-        position: "absolute",
-        top: 0,
-        right: 0,
-        left: 0,
-        bottom: 0,
-        zIndex: 1,
-    },
-    pressable: {
-        flex: 1,
-        height: "100%",
-        width: "50%",
-    },
-});
-export default withTheme(StarRating);