@draftbit/core 43.4.10 → 43.4.11-ba6514.0

package/src/components/Switch.js

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { Switch as NativeSwitch, } from "react-native";
+import { withTheme } from "../theming";
+import FormRow from "./FormRow";
+import { RowDirection } from "@draftbit/types";
+import { usePrevious } from "../hooks";
+function Switch({ value, defaultValue, disabled, onValueChange, activeTrackColor, inactiveTrackColor, activeThumbColor, inactiveThumbColor, theme, style, ...rest }) {
+    const activeTrackThemeColor = activeTrackColor || theme.colors.primary;
+    const inactiveTrackThemeColor = inactiveTrackColor || "#EEE";
+    const activeThumbThemeColor = activeThumbColor || "#FFF";
+    const inactiveThumbThemeColor = inactiveThumbColor || "#FFF";
+    const [checked, setChecked] = React.useState(value || defaultValue);
+    React.useEffect(() => {
+        if (value != null && value !== checked) {
+            setChecked(value);
+        }
+    }, [value, checked]);
+    // This special logic is to handle weird APIs like Airtable that return
+    // true or undefined for a boolean
+    const previousDefaultValue = usePrevious(defaultValue);
+    React.useEffect(() => {
+        if (defaultValue !== previousDefaultValue) {
+            setChecked(Boolean(defaultValue));
+        }
+    }, [defaultValue, previousDefaultValue]);
+    return (React.createElement(NativeSwitch, { value: checked, disabled: disabled, trackColor: {
+            false: inactiveTrackThemeColor,
+            true: activeTrackThemeColor,
+        }, thumbColor: value ? activeThumbThemeColor : inactiveThumbThemeColor, 
+        // @ts-ignore react-native-web only
+        activeThumbColor: activeThumbThemeColor, ios_backgroundColor: inactiveTrackThemeColor, style: style, onValueChange: (bool) => {
+            setChecked(bool);
+            onValueChange && onValueChange(bool);
+        }, ...rest }));
+}
+function Row({ label = "Label", direction = RowDirection.Row, style, value, defaultValue, disabled, onValueChange, activeTrackColor, inactiveTrackColor, activeThumbColor, inactiveThumbColor, theme, ...rest }) {
+    const [checked, setChecked] = React.useState(value != null ? value : defaultValue);
+    React.useEffect(() => {
+        if (value != null) {
+            setChecked(value);
+        }
+    }, [value]);
+    React.useEffect(() => {
+        if (defaultValue != null) {
+            setChecked(defaultValue);
+        }
+    }, [defaultValue]);
+    return (React.createElement(FormRow, { disabled: disabled, onPress: () => {
+            setChecked(!checked);
+            onValueChange && onValueChange(!checked);
+        }, label: label, direction: direction, style: style, ...rest },
+        React.createElement(Switch, { theme: theme, value: checked, disabled: disabled, onValueChange: onValueChange, activeTrackColor: activeTrackColor, inactiveTrackColor: inactiveTrackColor, activeThumbColor: activeThumbColor, inactiveThumbColor: inactiveThumbColor })));
+}
+const SwitchRow = withTheme(Row);
+export { SwitchRow };
+export default withTheme(Switch);

package/src/components/Text.js

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { Text as NativeText, I18nManager } from "react-native";
+import { withTheme } from "../theming";
+class Text extends React.Component {
+    _root;
+    setNativeProps(args) {
+        return this._root && this._root.setNativeProps(args);
+    }
+    render() {
+        const { style, ...rest } = this.props;
+        const writingDirection = I18nManager.isRTL ? "rtl" : "ltr";
+        return (React.createElement(NativeText, { ...rest, ref: (c) => {
+                this._root = c;
+            }, style: [
+                {
+                    textAlign: "left",
+                    writingDirection,
+                },
+                style,
+            ] }));
+    }
+}
+export const BaseLink = ({ style, theme, title, ...props }) => {
+    return (React.createElement(Text, { hitSlop: 8, style: [{ color: theme.colors.primary, alignSelf: "flex-start" }, style], theme: theme, ...props }, title));
+};
+const Link = withTheme(BaseLink);
+export { Link };
+export default withTheme(Text);

package/src/components/TextField.js

@@ -0,0 +1,419 @@
+import * as React from "react";
+import { View, Animated, TextInput as NativeTextInput, StyleSheet, Text, I18nManager, } from "react-native";
+import { withTheme } from "../theming";
+import { applyStyles, extractStyles } from "../utilities";
+const AnimatedText = Animated.createAnimatedComponent(Text);
+const FOCUS_ANIMATION_DURATION = 150;
+const BLUR_ANIMATION_DURATION = 180;
+const ICON_SIZE = 24;
+class TextField extends React.Component {
+    static getDerivedStateFromProps(nextProps, prevState) {
+        return {
+            value: typeof nextProps.value !== "undefined"
+                ? nextProps.value
+                : prevState.value,
+        };
+    }
+    state = {
+        labeled: new Animated.Value(this.props.value || this.props.error ? 0 : 1),
+        focused: false,
+        placeholder: this.props.error ? this.props.placeholder : "",
+        labelLayout: {
+            measured: false,
+            width: 0,
+        },
+    };
+    componentDidMount() {
+        if (this.props.defaultValue) {
+            this._handleChangeText(this.props.defaultValue);
+        }
+        if (this.props.placeholder) {
+            this._minmizeLabel();
+        }
+    }
+    componentDidUpdate(prevProps, prevState) {
+        if (prevState.focused !== this.state.focused ||
+            prevState.value !== this.state.value) {
+            // The label should be minimized if the text input is focused, or has text
+            // In minimized mode, the label moves up and becomes small
+            if (this.state.value ||
+                this.state.focused ||
+                this.props.error ||
+                this.props.placeholder) {
+                this._minmizeLabel();
+            }
+            else {
+                this._restoreLabel();
+            }
+        }
+        if (prevState.focused !== this.state.focused ||
+            prevProps.label !== this.props.label) {
+            // Show placeholder text only if the input is focused, or has error, or there's no label
+            // We don't show placeholder if there's a label because the label acts as placeholder
+            // When focused, the label moves up, so we can show a placeholder
+            if (this.state.focused || this.props.error || !this.props.label) {
+                this._showPlaceholder();
+            }
+            else {
+                this._hidePlaceholder();
+            }
+        }
+    }
+    _timer = setTimeout(() => { }, 0);
+    componentWillUnmount() {
+        clearTimeout(this._timer);
+    }
+    _showPlaceholder = () => {
+        clearTimeout(this._timer);
+        // Set the placeholder in a delay to offset the label animation
+        // If we show it immediately, they'll overlap and look ugly
+        this._timer = setTimeout(() => this.setState({
+            placeholder: this.props.placeholder,
+        }), 50);
+    };
+    _hidePlaceholder = () => this.setState({
+        placeholder: "",
+    });
+    _restoreLabel = () => Animated.timing(this.state.labeled, {
+        toValue: 1,
+        duration: FOCUS_ANIMATION_DURATION,
+        useNativeDriver: true,
+    }).start();
+    _minmizeLabel = () => Animated.timing(this.state.labeled, {
+        toValue: 0,
+        duration: BLUR_ANIMATION_DURATION,
+        useNativeDriver: true,
+    }).start();
+    _handleFocus = () => {
+        if (this.props.disabled) {
+            return;
+        }
+        this.setState({ focused: true });
+    };
+    _handleBlur = () => {
+        if (this.props.disabled) {
+            return;
+        }
+        this.setState({ focused: false });
+    };
+    _handleChangeText = (value) => {
+        if (this.props.disabled) {
+            return;
+        }
+        if (typeof value === "string") {
+            this.setState({ value });
+            this.props.onChangeText && this.props.onChangeText(value);
+        }
+        else {
+            this.setState({ value: value.nativeEvent.text });
+            this.props.onChangeText &&
+                this.props.onChangeText(value.nativeEvent.text);
+        }
+    };
+    toggleFocus() {
+        this.setState((prevState) => ({ focused: !prevState.focused }));
+    }
+    _root = undefined;
+    /**
+     * @internal
+     */
+    setNativeProps(args) {
+        return this._root && this._root.setNativeProps(args);
+    }
+    isFocused() {
+        return this._root && this._root.isFocused();
+    }
+    clear() {
+        return this._root && this._root.clear();
+    }
+    focus() {
+        return this._root && this._root.focus();
+    }
+    blur() {
+        return this._root && this._root.blur();
+    }
+    render() {
+        const { Icon, type = "underline", disabled = false, label, error = false, leftIconName, leftIconMode, rightIconName, assistiveText, underlineColor: underlineColorProp, multiline = false, numberOfLines = 4, style, theme: { colors, typography, roundness, disabledOpacity }, render = (props) => React.createElement(NativeTextInput, { ...props }), ...rest } = this.props;
+        const MINIMIZED_LABEL_Y_OFFSET = -(typography.caption.lineHeight + 4);
+        const OUTLINE_MINIMIZED_LABEL_Y_OFFSET = -(16 * 0.5 + 4);
+        const MAXIMIZED_LABEL_FONT_SIZE = typography.subtitle1.fontSize;
+        const MINIMIZED_LABEL_FONT_SIZE = typography.caption.fontSize;
+        const hasActiveOutline = this.state.focused || error;
+        let inputTextColor, activeColor, underlineColor, borderColor, placeholderColor, containerStyle, backgroundColor, inputStyle;
+        inputTextColor = colors.strong;
+        if (disabled) {
+            activeColor = colors.light;
+            placeholderColor = colors.light;
+            borderColor = "transparent";
+            underlineColor = "transparent";
+            backgroundColor = colors.divider;
+        }
+        else {
+            activeColor = error ? colors.error : colors.primary;
+            placeholderColor = borderColor = colors.light;
+            underlineColor = underlineColorProp;
+            backgroundColor = colors.background;
+        }
+        if (rest.placeholderTextColor) {
+            placeholderColor = rest.placeholderTextColor;
+        }
+        const { lineHeight, ...subtitle1 } = typography.subtitle1;
+        inputStyle = {
+            paddingVertical: 0,
+            color: inputTextColor,
+            paddingLeft: leftIconName && leftIconMode === "inset"
+                ? ICON_SIZE + 12 + (type === "solid" ? 16 : 0)
+                : 0,
+            paddingRight: rightIconName ? ICON_SIZE + 16 + 4 : 12,
+            ...subtitle1,
+        };
+        if (!multiline) {
+            inputStyle.height = lineHeight;
+        }
+        let assistiveTextLeftMargin;
+        if (type === "underline") {
+            containerStyle = {
+                borderTopLeftRadius: roundness,
+                borderTopRightRadius: roundness,
+                paddingBottom: 12,
+                marginTop: 16,
+            };
+            if (leftIconName && leftIconMode === "outset") {
+                assistiveTextLeftMargin = ICON_SIZE + 8;
+            }
+            else {
+                assistiveTextLeftMargin = 0;
+            }
+        }
+        else {
+            containerStyle = {
+                borderRadius: roundness,
+                borderColor: hasActiveOutline ? activeColor : borderColor,
+                borderWidth: 1,
+                paddingTop: label ? 16 * 1.5 : 16,
+                paddingBottom: label ? 16 * 0.5 : 16,
+                opacity: disabled ? disabledOpacity : 1,
+                backgroundColor,
+            };
+            if (leftIconName && leftIconMode === "inset") {
+                assistiveTextLeftMargin = 16 + 4;
+            }
+            else if (leftIconName && leftIconMode === "outset") {
+                assistiveTextLeftMargin = ICON_SIZE + 8 + 12;
+            }
+            else {
+                assistiveTextLeftMargin = 12;
+            }
+            inputStyle.paddingHorizontal = 12;
+        }
+        if (leftIconName && leftIconMode === "outset") {
+            containerStyle.marginLeft = ICON_SIZE + 8;
+        }
+        let leftIconColor;
+        if (error) {
+            leftIconColor = colors.error;
+        }
+        else if (this.state.focused) {
+            leftIconColor = colors.primary;
+        }
+        else {
+            leftIconColor = colors.light;
+        }
+        const leftIconProps = {
+            size: 24,
+            color: leftIconColor,
+            name: leftIconName || "",
+        };
+        const leftIconStyle = {
+            position: "absolute",
+            marginTop: type === "solid"
+                ? MINIMIZED_LABEL_FONT_SIZE + 4
+                : leftIconMode === "outset"
+                    ? 16
+                    : 0,
+        };
+        const labelStyle = {
+            ...typography.subtitle1,
+            top: type === "solid" ? 16 : 0,
+            left: leftIconName && leftIconMode === "inset"
+                ? ICON_SIZE + (type === "solid" ? 16 : 12)
+                : 0,
+            transform: [
+                {
+                    // Move label to top
+                    translateY: this.state.labeled.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: [
+                            type === "solid"
+                                ? OUTLINE_MINIMIZED_LABEL_Y_OFFSET
+                                : MINIMIZED_LABEL_Y_OFFSET,
+                            0,
+                        ],
+                    }),
+                },
+                {
+                    // Make label smaller
+                    scale: this.state.labeled.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: [
+                            MINIMIZED_LABEL_FONT_SIZE / MAXIMIZED_LABEL_FONT_SIZE,
+                            1,
+                        ],
+                    }),
+                },
+                {
+                    // Offset label scale since RN doesn't support transform origin
+                    translateX: this.state.labeled.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: [
+                            -(1 - MINIMIZED_LABEL_FONT_SIZE / MAXIMIZED_LABEL_FONT_SIZE) *
+                                (this.state.labelLayout.width / 2),
+                            0,
+                        ],
+                    }),
+                },
+            ],
+        };
+        const { textStyles } = extractStyles(style);
+        const inputStyles = applyStyles([
+            styles.input,
+            inputStyle,
+            type === "solid" ? { marginHorizontal: 12 } : {},
+        ], textStyles);
+        const { backgroundColor: bgColor, padding, paddingTop, paddingBottom, paddingLeft, paddingRight, borderRadius, borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth, borderColor: borderCol, ...styleProp } = StyleSheet.flatten(style || {});
+        return (React.createElement(View, { style: [styles.container, styleProp] },
+            leftIconName && leftIconMode === "outset" ? (React.createElement(Icon, { ...leftIconProps, style: leftIconStyle })) : null,
+            React.createElement(View, { style: applyStyles([containerStyle], {
+                    height: style?.height,
+                    backgroundColor: bgColor,
+                    padding,
+                    paddingTop,
+                    paddingBottom,
+                    paddingLeft,
+                    paddingRight,
+                    borderRadius,
+                    borderWidth,
+                    borderTopWidth,
+                    borderRightWidth,
+                    borderBottomWidth,
+                    borderLeftWidth,
+                    borderColor: borderCol,
+                }) },
+                type === "underline" ? (
+                // When type === 'flat', render an underline
+                React.createElement(Animated.View, { style: [
+                        styles.underline,
+                        {
+                            backgroundColor: bgColor ||
+                                (error
+                                    ? colors.error
+                                    : this.state.focused
+                                        ? activeColor
+                                        : underlineColor),
+                            // Underlines is thinner when input is not focused
+                            transform: [{ scaleY: this.state.focused ? 1 : 0.5 }],
+                        },
+                    ] })) : null,
+                label ? (
+                // Position colored placeholder and gray placeholder on top of each other and crossfade them
+                // This gives the effect of animating the color, but allows us to use native driver
+                React.createElement(View, { pointerEvents: "none", style: [
+                        StyleSheet.absoluteFill,
+                        {
+                            opacity: 
+                            // Hide the label in minimized state until we measure its width
+                            this.state.value || this.state.focused
+                                ? this.state.labelLayout.measured
+                                    ? 1
+                                    : 0
+                                : 1,
+                        },
+                    ] },
+                    React.createElement(AnimatedText, { onLayout: (e) => this.setState({
+                            labelLayout: {
+                                width: e.nativeEvent.layout.width,
+                                measured: true,
+                            },
+                        }), style: [
+                            styles.placeholder,
+                            type === "solid" ? { paddingHorizontal: 12 } : {},
+                            labelStyle,
+                            {
+                                color: placeholderColor,
+                                opacity: this.state.labeled.interpolate({
+                                    inputRange: [0, 1],
+                                    outputRange: [hasActiveOutline ? 1 : 0, 0],
+                                }),
+                            },
+                        ], numberOfLines: 1 }, label),
+                    React.createElement(AnimatedText, { style: [
+                            styles.placeholder,
+                            type === "solid" ? { paddingHorizontal: 12 } : {},
+                            labelStyle,
+                            {
+                                color: placeholderColor,
+                                opacity: hasActiveOutline ? this.state.labeled : 1,
+                            },
+                        ], numberOfLines: 1 }, label))) : null,
+                leftIconName && leftIconMode === "inset" ? (React.createElement(Icon, { ...leftIconProps, style: {
+                        ...leftIconStyle,
+                        marginLeft: type === "solid" ? 16 : 0,
+                    } })) : null,
+                render({
+                    ref: (c) => {
+                        this._root = c;
+                    },
+                    onChange: this._handleChangeText,
+                    placeholder: label
+                        ? this.state.placeholder
+                        : this.props.placeholder,
+                    placeholderTextColor: placeholderColor,
+                    editable: !disabled,
+                    selectionColor: activeColor,
+                    multiline,
+                    numberOfLines,
+                    onFocus: this._handleFocus,
+                    onBlur: this._handleBlur,
+                    underlineColorAndroid: "transparent",
+                    style: inputStyles,
+                    ...rest,
+                    value: this.state.value,
+                })),
+            rightIconName ? (React.createElement(Icon, { name: rightIconName, size: ICON_SIZE, color: colors.light, style: {
+                    position: "absolute",
+                    right: 16,
+                    marginTop: type === "solid" ? MINIMIZED_LABEL_FONT_SIZE + 4 : 16,
+                } })) : null,
+            assistiveText ? (React.createElement(Text, { style: [
+                    {
+                        color: error ? colors.error : colors.light,
+                        marginTop: 8,
+                        marginLeft: assistiveTextLeftMargin,
+                    },
+                ] }, assistiveText)) : null));
+    }
+}
+export default withTheme(TextField);
+const styles = StyleSheet.create({
+    container: {
+        alignSelf: "stretch",
+    },
+    placeholder: {
+        position: "absolute",
+        left: 0,
+    },
+    underline: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        bottom: 0,
+        height: 2,
+    },
+    input: {
+        flexGrow: 1,
+        justifyContent: "center",
+        textAlignVertical: "center",
+        margin: 0,
+        textAlign: I18nManager.isRTL ? "right" : "left",
+    },
+});

package/src/components/ToggleButton.js

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { withTheme } from "../theming";
+import { StyleSheet } from "react-native";
+import IconButton from "./IconButton";
+const ToggleButton = ({ Icon, icon, toggled = false, onPress = () => { }, defaultValue, disabled = false, color = "primary", colorSecondary = "surface", borderColor = "divider", iconSize = 25, width = 50, height = 50, theme: { colors }, style, ...rest }) => {
+    const [internalValue, setInternalValue] = React.useState(toggled || defaultValue || false);
+    React.useEffect(() => {
+        if (toggled != null) {
+            setInternalValue(toggled);
+        }
+    }, [toggled]);
+    React.useEffect(() => {
+        if (defaultValue != null) {
+            setInternalValue(defaultValue);
+        }
+    }, [defaultValue]);
+    const handlePress = () => {
+        setInternalValue(!internalValue);
+        onPress(!internalValue);
+    };
+    return (React.createElement(IconButton, { Icon: Icon, icon: icon, size: iconSize, color: internalValue ? colors[color] : colors[colorSecondary], onPress: handlePress, disabled: disabled, style: [
+            styles.mainContainer,
+            {
+                width,
+                height,
+                backgroundColor: internalValue
+                    ? colors[colorSecondary]
+                    : colors[color],
+                borderColor: colors[borderColor],
+            },
+            style,
+        ], ...rest }));
+};
+const styles = StyleSheet.create({
+    mainContainer: {
+        borderWidth: 1,
+    },
+});
+export default withTheme(ToggleButton);

package/src/components/Touchable.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { Pressable } from "react-native";
+export default function Touchable({ children, disabled, onPress, style, ...props }) {
+    return (React.createElement(Pressable, { onPress: onPress, disabled: disabled, hitSlop: 8, style: ({ pressed }) => {
+            return [
+                {
+                    opacity: pressed || disabled ? 0.75 : 1,
+                },
+                style,
+            ];
+        }, ...props }, children));
+}

package/src/components/Touchable.web.js

@@ -0,0 +1,2 @@
+import { TouchableOpacity } from "react-native";
+export default TouchableOpacity;

package/src/components/Typography.js

@@ -0,0 +1,36 @@
+import React from "react";
+import { Text } from "react-native";
+import { withTheme } from "../theming";
+export const Title = withTheme(({ text, theme, style }) => {
+    return (React.createElement(Text, { style: [
+            {
+                fontSize: 20,
+                letterSpacing: 0,
+                lineHeight: 26,
+                color: theme.colors.text,
+            },
+            style,
+        ] }, text));
+});
+export const Subtitle = withTheme(({ text, theme, style }) => {
+    return (React.createElement(Text, { style: [
+            {
+                fontSize: 14,
+                letterSpacing: 0,
+                lineHeight: 16,
+                color: theme.colors.medium,
+            },
+            style,
+        ] }, text));
+});
+export const Caption = withTheme(({ text, theme, style }) => {
+    return (React.createElement(Text, { style: [
+            {
+                fontSize: 12,
+                letterSpacing: 0,
+                lineHeight: 14,
+                color: theme.colors.light,
+            },
+            style,
+        ] }, text));
+});

package/src/components/useAuthState.js

@@ -0,0 +1,31 @@
+import * as React from "react";
+export const useAuthState = (auth) => {
+    const [error, setError] = React.useState();
+    const [value, setValue] = React.useState(auth.currentUser);
+    React.useEffect(() => {
+        const list = auth.onAuthStateChanged(setValue, setError);
+        return () => {
+            list();
+        };
+    }, [auth]);
+    const signInWithEmailAndPassword = (user, password) => {
+        auth
+            .signInWithEmailAndPassword(user, password)
+            .then(setValue)
+            .catch(setError);
+    };
+    const createUserWithEmailAndPassword = (user, password) => {
+        auth
+            .signInWithEmailAndPassword(user, password)
+            .then(setValue)
+            .catch(setError);
+    };
+    const signOut = () => auth.signOut();
+    return [
+        value,
+        error,
+        signInWithEmailAndPassword,
+        signOut,
+        createUserWithEmailAndPassword,
+    ];
+};

package/src/constants.js

@@ -0,0 +1,10 @@
+import { Platform } from "react-native";
+// @ts-ignore
+const expo = global.__expo;
+const DEFAULT_STATUSBAR_HEIGHT_EXPO = expo?.Constants
+    ? expo.Constants.statusBarHeight
+    : 0;
+export const APPROX_STATUSBAR_HEIGHT = Platform.select({
+    android: DEFAULT_STATUSBAR_HEIGHT_EXPO,
+    ios: Platform.Version < 11 ? DEFAULT_STATUSBAR_HEIGHT_EXPO : 0,
+});

package/src/hooks.js

@@ -0,0 +1,12 @@
+import React from "react";
+export function usePrevious(value) {
+    // The ref object is a generic container whose current property is mutable
+    // and can hold any value, similar to an instance property on a class
+    const ref = React.useRef();
+    // Store current value in ref
+    React.useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    // Return previous value (happens before update in useEffect above)
+    return ref.current;
+}