@draftbit/core 42.1.5 → 42.1.7-71d4c6.1

package/src/components/ProgressCircle.js

@@ -0,0 +1,121 @@
+import * as React from "react";
+import { COMPONENT_TYPES, FORM_TYPES, GROUPS, PROP_TYPES, } from "@draftbit/types";
+import { Text } from "react-native";
+import AnimatedCircularProgress from "./AnimatedCircularProgress";
+import { withTheme } from "../theming";
+const ProgressCircle = ({ progress = 0.5, style, color = "primary", size = 100, showsText = true, unfilledColor, strokeCap = "butt", textStyle, thickness = 1, theme, }) => {
+    const progressNum = Math.round(progress * 100);
+    const tintColor = color || theme.colors.primary;
+    const backgroundColor = unfilledColor || theme.colors.secondary;
+    return (React.createElement(AnimatedCircularProgress, { size: size, width: thickness, backgroundWidth: thickness, fill: progressNum, tintColor: tintColor, backgroundColor: backgroundColor, rotation: 0, lineCap: strokeCap, style: style }, (fill) => showsText ? (React.createElement(Text, { style: [{ fontSize: size * 0.275, color: tintColor }, textStyle] },
+        Math.round(fill),
+        "%")) : null));
+};
+export default withTheme(ProgressCircle);
+export const SEED_DATA = {
+    name: "Progress Circle",
+    tag: "ProgressCircle",
+    description: "A circle used to show completed progress",
+    category: COMPONENT_TYPES.deprecated,
+    preview_image_url: "{CLOUDINARY_URL}/Status_Progress.png",
+    supports_list_render: false,
+    props: {
+        progress: {
+            group: GROUPS.data,
+            label: "Progress",
+            description: "The amount of progress to display. A number 0-1.",
+            formType: FORM_TYPES.number,
+            propType: PROP_TYPES.NUMBER,
+            defaultValue: 0.5,
+            min: 0,
+            max: 1,
+            step: 0.01,
+            precision: 2,
+            editable: true,
+            required: true,
+        },
+        color: {
+            group: GROUPS.basic,
+            label: "Color",
+            description: "Color for the progress shown",
+            editable: true,
+            defaultValue: "primary",
+            required: true,
+            formType: FORM_TYPES.color,
+            propType: PROP_TYPES.THEME,
+        },
+        unfilledColor: {
+            group: GROUPS.basic,
+            label: "Unfilled Color",
+            description: "The color of the unfilled portion of the progress bar(eg. if at 50% then this is the color of the other 50%)",
+            editable: true,
+            defaultValue: null,
+            required: true,
+            formType: FORM_TYPES.color,
+            propType: PROP_TYPES.THEME,
+        },
+        size: {
+            group: GROUPS.basic,
+            label: "Size",
+            description: "The size of the circle",
+            formType: FORM_TYPES.number,
+            propType: PROP_TYPES.NUMBER,
+            defaultValue: 100,
+            min: 0,
+            max: 300,
+            step: 1,
+            precision: 1,
+            editable: true,
+            required: true,
+        },
+        showsText: {
+            group: GROUPS.basic,
+            label: "Show Progress Text",
+            description: "Shows progress in the middle of the circle",
+            formType: FORM_TYPES.boolean,
+            propType: PROP_TYPES.BOOLEAN,
+            defaultValue: true,
+            editable: true,
+            required: true,
+        },
+        textStyle: {
+            group: GROUPS.basic,
+            label: "Text Style",
+            description: "Text Style of the inner circle",
+            editable: true,
+            required: true,
+            formType: FORM_TYPES.typeStyle,
+            propType: PROP_TYPES.THEME,
+            defaultValue: null,
+        },
+        thickness: {
+            group: GROUPS.basic,
+            label: "Thickness",
+            description: "Thickness of the inner circle",
+            formType: FORM_TYPES.number,
+            propType: PROP_TYPES.NUMBER,
+            defaultValue: 1,
+            min: 0,
+            max: 15,
+            step: 1,
+            precision: 1,
+            editable: true,
+            required: true,
+        },
+        strokeCap: {
+            group: GROUPS.basic,
+            label: "Stroke Cap",
+            description: "The style of the stroke",
+            formType: FORM_TYPES.flatArray,
+            propType: PROP_TYPES.STRING,
+            defaultValue: "butt",
+            options: ["butt", "square", "round"],
+            editable: true,
+            required: true,
+        },
+    },
+    layout: {
+        width: 250,
+        height: 250,
+    },
+};

package/src/components/ProgressIndicator.js

@@ -0,0 +1,207 @@
+import * as React from "react";
+import StepIndicator from "./StepIndicator";
+import { withTheme } from "../theming";
+import { COMPONENT_TYPES, FORM_TYPES, GROUPS, PROP_TYPES, } from "@draftbit/types";
+const ProgressIndicator = ({ numberOfSteps, currentStep, currentStepStrokeWidth = 3, stepStrokeCurrentColor = "primary", stepIndicatorSize, currentStepIndicatorSize, stepIndicatorCurrentColor, stepIndicatorLabelCurrentColor, stepIndicatorLabelFontSize = 12, stepNumberFinishedColor = "strongInverse", stepNumberUnfinishedColor = "primary", unfinishedColor = "light", finishedColor = "primary", theme, }) => {
+    const currentPosition = currentStep - 1;
+    return (React.createElement(StepIndicator, { stepCount: numberOfSteps, currentPosition: currentPosition, customStyles: {
+            stepIndicatorSize,
+            currentStepIndicatorSize: currentStepIndicatorSize
+                ? currentStepIndicatorSize
+                : stepIndicatorSize,
+            stepStrokeFinishedColor: finishedColor,
+            stepStrokeUnFinishedColor: unfinishedColor,
+            separatorFinishedColor: finishedColor,
+            separatorUnFinishedColor: unfinishedColor,
+            stepIndicatorFinishedColor: finishedColor,
+            stepIndicatorUnFinishedColor: unfinishedColor,
+            currentStepStrokeWidth,
+            stepStrokeCurrentColor: stepStrokeCurrentColor || stepIndicatorCurrentColor,
+            stepIndicatorLabelUnFinishedColor: stepNumberUnfinishedColor,
+            stepIndicatorLabelFinishedColor: stepNumberFinishedColor,
+            stepIndicatorCurrentColor: stepIndicatorCurrentColor || unfinishedColor,
+            stepIndicatorLabelCurrentColor: stepIndicatorLabelCurrentColor || stepNumberUnfinishedColor,
+            stepIndicatorLabelFontSize,
+            labelFontFamily: theme.typography.body1.fontFamily,
+        } }));
+};
+export default withTheme(ProgressIndicator);
+export const SEED_DATA = {
+    name: "Progress Indicator",
+    tag: "ProgressIndicator",
+    description: "A component used to show current Step in a process",
+    category: COMPONENT_TYPES.deprecated,
+    preview_image_url: "{CLOUDINARY_URL}/Control_Slider.png",
+    supports_list_render: false,
+    layout: {},
+    props: {
+        numberOfSteps: {
+            group: GROUPS.data,
+            label: "Number of Steps",
+            description: "The border radius for the thumb",
+            editable: true,
+            required: false,
+            formType: FORM_TYPES.number,
+            propType: PROP_TYPES.NUMBER,
+            min: 0,
+            max: 10,
+            step: 1,
+            precision: 0,
+            defaultValue: 5,
+        },
+        currentStep: {
+            group: GROUPS.data,
+            label: "Current Step",
+            description: "The step that the user is on",
+            editable: true,
+            required: false,
+            formType: FORM_TYPES.number,
+            propType: PROP_TYPES.NUMBER,
+            min: 0,
+            max: 10,
+            step: 1,
+            precision: 0,
+            defaultValue: 5,
+        },
+        stepIndicatorSize: {
+            group: GROUPS.basic,
+            label: "Step Size",
+            description: "The size of the step circle",
+            editable: true,
+            required: false,
+            formType: FORM_TYPES.number,
+            propType: PROP_TYPES.NUMBER,
+            min: 10,
+            max: 100,
+            step: 5,
+            precision: 0,
+            defaultValue: 25,
+        },
+        stepIndicatorLabelFontSize: {
+            group: GROUPS.basic,
+            label: "Step Font Size",
+            description: "The font size of the step number",
+            editable: true,
+            required: false,
+            formType: FORM_TYPES.number,
+            propType: PROP_TYPES.NUMBER,
+            min: 6,
+            max: 36,
+            step: 1,
+            precision: 0,
+            defaultValue: 15,
+        },
+        currentStepIndicatorLabelFontSize: {
+            group: GROUPS.basic,
+            label: "Current Step Font Size",
+            description: "The font size of the current step number",
+            editable: true,
+            required: false,
+            formType: FORM_TYPES.number,
+            propType: PROP_TYPES.NUMBER,
+            min: 6,
+            max: 36,
+            step: 1,
+            precision: 0,
+            defaultValue: 15,
+        },
+        unfinishedColor: {
+            group: GROUPS.basic,
+            label: "Unfinished Color",
+            description: "The color of the step and divider when the step is either not the current step or not finished",
+            editable: true,
+            required: false,
+            formType: FORM_TYPES.color,
+            propType: PROP_TYPES.THEME,
+            defaultValue: null,
+        },
+        finishedColor: {
+            group: GROUPS.basic,
+            label: "Finished Color",
+            description: "The color of the step and divider when the step is the current step or finished",
+            editable: true,
+            required: false,
+            formType: FORM_TYPES.color,
+            propType: PROP_TYPES.THEME,
+            defaultValue: null,
+        },
+        stepNumberUnfinishedColor: {
+            group: GROUPS.basic,
+            label: "Unfinished Number Color",
+            description: "The color of the number within the step when unfinished",
+            editable: true,
+            required: false,
+            formType: FORM_TYPES.color,
+            propType: PROP_TYPES.THEME,
+            defaultValue: null,
+        },
+        stepNumberFinishedColor: {
+            group: GROUPS.basic,
+            label: "Finished Number Color",
+            description: "The color of the number within the step when finished",
+            editable: true,
+            required: false,
+            formType: FORM_TYPES.color,
+            propType: PROP_TYPES.THEME,
+            defaultValue: null,
+        },
+        stepIndicatorCurrentColor: {
+            group: GROUPS.basic,
+            label: "Current Step Color",
+            description: "The color of current step circle",
+            editable: true,
+            required: false,
+            formType: FORM_TYPES.color,
+            propType: PROP_TYPES.THEME,
+            defaultValue: null,
+        },
+        stepIndicatorLabelCurrentColor: {
+            group: GROUPS.basic,
+            label: "Current Step Number Color",
+            description: "The color of current number within the step circle",
+            editable: true,
+            required: false,
+            formType: FORM_TYPES.color,
+            propType: PROP_TYPES.THEME,
+            defaultValue: null,
+        },
+        stepStrokeCurrentColor: {
+            group: GROUPS.basic,
+            label: "Current Step Border Color",
+            description: "The color of current border color of the step",
+            editable: true,
+            required: false,
+            formType: FORM_TYPES.color,
+            propType: PROP_TYPES.THEME,
+            defaultValue: null,
+        },
+        currentStepStrokeWidth: {
+            group: GROUPS.basic,
+            label: "Current Step Border Width",
+            description: "The width of the border for the current step",
+            editable: true,
+            required: false,
+            formType: FORM_TYPES.number,
+            propType: PROP_TYPES.NUMBER,
+            min: 1,
+            max: 20,
+            step: 1,
+            precision: 0,
+            defaultValue: 0,
+        },
+        currentStepIndicatorSize: {
+            group: GROUPS.basic,
+            label: "Current Step Size",
+            description: "The size of the current step circle",
+            editable: true,
+            required: false,
+            formType: FORM_TYPES.number,
+            propType: PROP_TYPES.NUMBER,
+            min: 10,
+            max: 100,
+            step: 5,
+            precision: 0,
+            defaultValue: null,
+        },
+    },
+};

package/src/components/RadioButton/RadioButton.js

@@ -0,0 +1,66 @@
+import * as React from "react";
+import Config from "../Config";
+import IconButton from "../IconButton";
+import { useRadioButtonGroupContext } from "./context";
+import { GROUPS, COMPONENT_TYPES, createBoolProp, createColorProp, createNumberProp, createIconProp, createTextProp, Triggers, } from "@draftbit/types";
+const RadioButton = ({ Icon, disabled = false, color, value, selected, unselectedColor, onPress = () => { }, size = Config.radioButtonSize, selectedIcon = "MaterialIcons/radio-button-checked", unselectedIcon = "MaterialIcons/radio-button-unchecked", style, ...rest }) => {
+    const { value: contextValue, onValueChange } = useRadioButtonGroupContext();
+    const handlePress = () => {
+        onPress && onPress();
+        if (onValueChange && value) {
+            onValueChange(value);
+        }
+    };
+    const isSelected = selected || (contextValue != null && contextValue === value);
+    return (React.createElement(IconButton, { Icon: Icon, icon: isSelected ? selectedIcon : unselectedIcon, color: isSelected ? color : unselectedColor, disabled: disabled, onPress: handlePress, size: size, style: style, ...rest }));
+};
+export default RadioButton;
+export const SEED_DATA = {
+    name: "Radio Button",
+    tag: "RadioButton",
+    category: COMPONENT_TYPES.input,
+    triggers: [Triggers.OnPress],
+    props: {
+        value: createTextProp({
+            label: "Value",
+            description: "Value of the radio button",
+            defaultValue: null,
+            required: true,
+        }),
+        color: createColorProp({
+            group: GROUPS.basic,
+            description: "Color for the button",
+            defaultValue: "primary",
+        }),
+        unselectedColor: createColorProp({
+            group: GROUPS.basic,
+            label: "Unselected Color",
+            description: "Unselected Color for the button",
+            defaultValue: "primary",
+        }),
+        disabled: createBoolProp({
+            label: "Disabled",
+            description: "Whether radio button is disabled",
+        }),
+        size: createNumberProp({
+            group: GROUPS.basic,
+            label: "Size",
+            description: "Specifies the size of the button",
+            defaultValue: 24,
+            min: 16,
+            max: 128,
+            step: 1,
+            precision: 0,
+        }),
+        selectedIcon: createIconProp({
+            label: "Selected Icon",
+            description: "Icon to show when the radio button is selected",
+            defaultValue: "MaterialIcons/radio-button-checked",
+        }),
+        unselectedIcon: createIconProp({
+            label: "Unselected Icon",
+            description: "Icon to show when the radio button is unselected",
+            defaultValue: "MaterialIcons/radio-button-unchecked",
+        }),
+    },
+};

package/src/components/RadioButton/RadioButtonFieldGroup.js

@@ -0,0 +1,17 @@
+import React from "react";
+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)));
+};
+export default withTheme(RadioButtonFieldGroup);

package/src/components/RadioButton/RadioButtonGroup.js

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { View } from "react-native";
+import { COMPONENT_TYPES, createFieldNameProp, createDirectionProp, Triggers, } from "@draftbit/types";
+import { radioButtonGroupContext, Direction } from "./context";
+import { usePrevious } from "../../hooks";
+const { Provider } = radioButtonGroupContext;
+const RadioButtonGroup = ({ direction = Direction.Vertical, value, onValueChange = () => { }, initialValue, style, children, ...rest }) => {
+    const previousInitialValue = usePrevious(initialValue);
+    React.useEffect(() => {
+        if (initialValue !== previousInitialValue) {
+            onValueChange(initialValue);
+        }
+    }, [initialValue, previousInitialValue, onValueChange]);
+    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, onValueChange, direction } },
+            React.createElement(View, { style: _containerStyle }, children))));
+};
+export default RadioButtonGroup;
+export const SEED_DATA = {
+    name: "Radio Button Group",
+    tag: "RadioButtonGroup",
+    category: COMPONENT_TYPES.input,
+    layout: {},
+    triggers: [Triggers.OnValueChange],
+    props: {
+        direction: createDirectionProp(),
+        fieldName: createFieldNameProp({
+            handlerPropName: "onValueChange",
+            valuePropName: "value",
+            defaultValue: "radioButtonGroupValue",
+        }),
+    },
+};

package/src/components/RadioButton/RadioButtonRow.js

@@ -0,0 +1,111 @@
+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 { createTextProp, createTextEnumProp, COMPONENT_TYPES, createColorProp, GROUPS, } from "@draftbit/types";
+import { Direction as GroupDirection } from "./context";
+import Touchable from "../Touchable";
+import { extractStyles } 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 handlePress = () => {
+        onPress(value);
+        onValueChange && onValueChange(value);
+    };
+    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: selected || (contextValue != null && contextValue === value), color: color, unselectedColor: unselectedColor, onPress: handlePress, style: radioButtonStyle }))));
+};
+const styles = StyleSheet.create({
+    mainParent: {
+        alignItems: "center",
+        justifyContent: "space-around",
+        paddingStart: 20,
+        minHeight: 50,
+        paddingEnd: 20,
+        flex: 1,
+        ...Platform.select({
+            web: {
+                cursor: "pointer",
+                userSelect: "none",
+            },
+        }),
+    },
+    label: {
+        flex: 3,
+    },
+});
+export default RadioButtonRow;
+export const SEED_DATA = {
+    name: "Radio Button Row",
+    tag: "RadioButtonRow",
+    category: COMPONENT_TYPES.input,
+    layout: {},
+    props: {
+        label: createTextProp({
+            label: "Label",
+            description: "Label to show with the radio button",
+            required: true,
+            defaultValue: "First Option",
+        }),
+        direction: createTextEnumProp({
+            label: "Direction",
+            description: "Whether the checkbox will appear on the left or on the right",
+            options: ["row", "row-reverse"],
+        }),
+        value: createTextProp({
+            label: "Value",
+            description: "Value of the radio button",
+            defaultValue: null,
+            required: true,
+        }),
+        color: createColorProp({
+            group: GROUPS.basic,
+            description: "Color for the button",
+            defaultValue: "primary",
+        }),
+        unselectedColor: createColorProp({
+            group: GROUPS.basic,
+            label: "Unselected Color",
+            description: "Unselected Color for the button",
+            defaultValue: "primary",
+        }),
+    },
+};
+// TODO comment testing

package/src/components/RadioButton/context.js

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,4 @@
+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

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

package/src/components/Row.js

@@ -0,0 +1,48 @@
+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);