@draftbit/core 47.0.0-3bcd8b.2 → 47.0.0-alpha.1

package/src/components/Portal/PortalHost.js

@@ -1,107 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet } from "react-native";
-import PortalManager from "./PortalManager";
-export const PortalContext = React.createContext(null);
-/**
- * Portal host renders all of its children `Portal` elements.
- * For example, you can wrap a screen in `Portal.Host` to render items above the screen.
- * If you're using the `Provider` component, it already includes `Portal.Host`.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { Text } from 'react-native';
- * import { Portal } from 'react-native-paper';
- *
- * export default class MyComponent extends React.Component {
- *   render() {
- *     return (
- *       <Portal.Host>
- *         <Text>Content of the app</Text>
- *       </Portal.Host>
- *     );
- *   }
- * }
- * ```
- *
- * Here any `Portal` elements under `<App />` are rendered alongside `<App />` and will appear above `<App />` like a `Modal`.
- */
-export default class PortalHost extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.setManager = (manager) => {
-            this.manager = manager;
-        };
-        this.mount = (children) => {
-            const key = this.nextKey++;
-            if (this.manager) {
-                this.manager.mount(key, children);
-            }
-            else {
-                this.queue.push({ type: "mount", key, children });
-            }
-            return key;
-        };
-        this.update = (key, children) => {
-            if (this.manager) {
-                this.manager.update(key, children);
-            }
-            else {
-                const op = { type: "mount", key, children };
-                const index = this.queue.findIndex((o) => o.type === "mount" || (o.type === "update" && o.key === key));
-                if (index > -1) {
-                    // @ts-ignore
-                    this.queue[index] = op;
-                }
-                else {
-                    this.queue.push(op);
-                }
-            }
-        };
-        this.unmount = (key) => {
-            if (this.manager) {
-                this.manager.unmount(key);
-            }
-            else {
-                this.queue.push({ type: "unmount", key });
-            }
-        };
-        this.nextKey = 0;
-        this.queue = [];
-    }
-    componentDidMount() {
-        const manager = this.manager;
-        const queue = this.queue;
-        while (queue.length && manager) {
-            const action = queue.pop();
-            if (action) {
-                switch (action.type) {
-                    case "mount":
-                        manager.mount(action.key, action.children);
-                        break;
-                    case "update":
-                        manager.update(action.key, action.children);
-                        break;
-                    case "unmount":
-                        manager.unmount(action.key);
-                        break;
-                }
-            }
-        }
-    }
-    render() {
-        return (React.createElement(PortalContext.Provider, { value: {
-                mount: this.mount,
-                update: this.update,
-                unmount: this.unmount,
-            } },
-            React.createElement(View, { style: styles.container, collapsable: false, pointerEvents: "box-none" }, this.props.children),
-            React.createElement(PortalManager, { ref: this.setManager })));
-    }
-}
-PortalHost.displayName = "Portal.Host";
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
-});

package/src/components/Portal/PortalManager.js

@@ -1,32 +0,0 @@
-import * as React from "react";
-import { View, StyleSheet } from "react-native";
-/**
- * Portal host is the component which actually renders all Portals.
- */
-export default class PortalManager extends React.PureComponent {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            portals: [],
-        };
-        this.mount = (key, children) => {
-            this.setState((state) => ({
-                portals: [...state.portals, { key, children }],
-            }));
-        };
-        this.update = (key, children) => this.setState((state) => ({
-            portals: state.portals.map((item) => {
-                if (item.key === key) {
-                    return { ...item, children };
-                }
-                return item;
-            }),
-        }));
-        this.unmount = (key) => this.setState((state) => ({
-            portals: state.portals.filter((item) => item.key !== key),
-        }));
-    }
-    render() {
-        return this.state.portals.map(({ key, children }) => (React.createElement(View, { key: key, collapsable: false /* Need collapsable=false here to clip the elevations, otherwise they appear above sibling components */, pointerEvents: "box-none", style: StyleSheet.absoluteFill }, children)));
-    }
-}

package/src/components/RadioButton/RadioButton.js

@@ -1,17 +0,0 @@
-import * as React from "react";
-import Config from "../Config";
-import IconButton from "../IconButton";
-import { getValueForRadioButton } from "../../utilities";
-import { useRadioButtonGroupContext } from "./context";
-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 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);
-    };
-    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;

package/src/components/RadioButton/RadioButtonFieldGroup.js

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

@@ -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/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);

package/src/components/Stepper.js

@@ -1,39 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { View, Text } from "react-native";
-import { isNumber } from "lodash";
-import { withTheme } from "../theming";
-import IconButton from "./IconButton";
-const Stepper = ({ min = -Infinity, max = Infinity, value: valueProp, defaultValue, style, typeStyle, iconSize = 24, iconColor, onChange, theme: { colors, typography }, Icon, }) => {
-    const [value, setValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : 0);
-    const isValidValue = (valueArg) => valueArg >= min && valueArg <= max;
-    const handlePlusOrMinus = (type) => {
-        const newValue = type === "plus" ? value + 1 : value - 1;
-        if (isValidValue(newValue)) {
-            setValue(newValue);
-            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-        }
-    };
-    useEffect(() => {
-        if (valueProp != null &&
-            isNumber(valueProp) &&
-            valueProp !== value &&
-            isValidValue(valueProp)) {
-            setValue(valueProp);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [valueProp]);
-    return (React.createElement(View, { style: [{ flexDirection: "row" }, style] },
-        React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/remove", onPress: () => handlePlusOrMinus("minus"), size: iconSize, color: iconColor, disabled: value === min, style: { opacity: value === min ? 0.5 : 1 } }),
-        React.createElement(Text, { style: [
-                typography.body1,
-                {
-                    textAlign: "center",
-                    alignSelf: "center",
-                    color: colors.medium,
-                    marginHorizontal: 8,
-                },
-                typeStyle,
-            ] }, value),
-        React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/add", onPress: () => handlePlusOrMinus("plus"), size: iconSize, color: iconColor, disabled: value === max, style: { opacity: value === max ? 0.5 : 1 } })));
-};
-export default withTheme(Stepper);

package/src/components/Surface.js

@@ -1,32 +0,0 @@
-/* Copied from https://github.com/callstack/react-native-paper/blob/main/src/components/Surface.tsx */
-import * as React from "react";
-import { Animated, StyleSheet, } from "react-native";
-import shadow from "../styles/shadow";
-import overlay from "../styles/overlay";
-import { withTheme } from "../theming";
-const Surface = ({ elevation: propElevation, style, theme, children, ...rest }) => {
-    const { elevation: styleElevation = 3, backgroundColor, ...restStyle } = (StyleSheet.flatten(style) || {});
-    const { dark: isDarkTheme, mode, colors } = theme;
-    const elevation = propElevation || styleElevation;
-    const evalationStyles = elevation ? shadow(elevation) : {};
-    const getBackgroundColor = () => {
-        if (backgroundColor) {
-            return backgroundColor;
-        }
-        else if (isDarkTheme && mode === "adaptive") {
-            return overlay(elevation, colors.surface);
-        }
-        else {
-            return colors.surface;
-        }
-    };
-    return (React.createElement(Animated.View, { ...rest, style: [
-            {
-                backgroundColor: getBackgroundColor(),
-                elevation,
-                ...evalationStyles,
-                ...restStyle,
-            },
-        ] }, children));
-};
-export default withTheme(Surface);

package/src/components/Swiper/Swiper.js

@@ -1,29 +0,0 @@
-import React from "react";
-import { View } from "react-native";
-import SwiperComponent from "react-native-web-swiper";
-const Swiper = ({ vertical = false, loop = false, timeout = 0, from = 0, prevTitle = "", nextTitle = "", prevTitleColor, nextTitleColor, dotsTouchable = true, dotColor, dotActiveColor, data, keyExtractor, renderItem, children, style, }) => (React.createElement(View, { style: style },
-    React.createElement(SwiperComponent, { from: from, loop: loop, timeout: timeout, vertical: vertical, controlsProps: {
-            prevTitle,
-            nextTitle,
-            prevTitleStyle: { color: prevTitleColor },
-            nextTitleStyle: { color: nextTitleColor },
-            dotsTouchable,
-            ...(dotColor
-                ? { dotProps: { badgeStyle: { backgroundColor: dotColor } } }
-                : {}),
-            ...(dotActiveColor
-                ? { dotActiveStyle: { backgroundColor: dotActiveColor } }
-                : {}),
-        } }, data && renderItem
-        ? data.map((item, index) => {
-            const component = renderItem({ item, index });
-            if (!component) {
-                return null;
-            }
-            const key = keyExtractor ? keyExtractor(item, index) : index;
-            return React.cloneElement(component, {
-                key,
-            });
-        })
-        : children)));
-export default Swiper;

package/src/components/Swiper/SwiperItem.js

@@ -1,9 +0,0 @@
-import React from "react";
-import { View, StyleSheet } from "react-native";
-const styles = StyleSheet.create({
-    wrapper: {
-        flex: 1,
-    },
-});
-const SwiperItem = ({ children, style }) => (React.createElement(View, { style: [styles.wrapper, style] }, children));
-export default SwiperItem;

package/src/components/Swiper/index.js

@@ -1,2 +0,0 @@
-export { default as Swiper } from "./Swiper";
-export { default as SwiperItem } from "./SwiperItem";

package/src/components/Switch.js

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