@storybook/addon-ondevice-controls/dist/types/common.js

Display storybook controls on your device.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Input = void 0;
exports.inputStyle = inputStyle;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_native_theming_1 = require("@storybook/react-native-theming");
const react_native_ui_common_1 = require("@storybook/react-native-ui-common");
const react_1 = require("react");
const react_native_1 = require("react-native");
function inputStyle({ theme, focused = false, hasError = false, }) {
    return {
        backgroundColor: theme.input.background,
        // TODO: border?
        borderWidth: 1,
        borderRadius: theme.input.borderRadius,
        borderColor: hasError
            ? theme.color.negative
            : focused
                ? theme.color.secondary
                : theme.input.border,
        fontSize: theme.typography.size.s2 - 1,
        color: theme.input.color,
        paddingHorizontal: theme.input.paddingHorizontal,
        ...react_native_1.Platform.select({
            android: {
                paddingVertical: theme.input.paddingVertical,
            },
            web: {
                // The web (that isn't RNW) doesn't understand `paddingHorizontal` etc.
                paddingLeft: theme.input.paddingHorizontal,
                paddingRight: theme.input.paddingHorizontal,
                paddingTop: theme.input.paddingVertical,
                paddingBottom: theme.input.paddingVertical,
                borderStyle: 'solid',
            },
            default: {
                paddingVertical: theme.input.paddingVertical,
            },
        }),
        margin: 0,
    };
}
let BottomSheetTextInput = react_native_1.TextInput;
let useBottomSheetInternal = (b) => null;
try {
    const { BottomSheetTextInput: BottomSheetTextInput_, useBottomSheetInternal: useBottomSheetInternal_, } = require('@gorhom/bottom-sheet');
    BottomSheetTextInput = BottomSheetTextInput_;
    useBottomSheetInternal = useBottomSheetInternal_;
}
catch { }
const TextInputWithSwitcher = (0, react_1.forwardRef)((props, ref) => {
    const { isMobile } = (0, react_native_ui_common_1.useLayout)();
    const context = useBottomSheetInternal(true);
    const isBottomSheet = context !== null;
    return isMobile && isBottomSheet ? (
    // @ts-ignore
    (0, jsx_runtime_1.jsx)(BottomSheetTextInput, { ref: ref, ...props })) : ((0, jsx_runtime_1.jsx)(react_native_1.TextInput, { ref: ref, ...props }));
});
TextInputWithSwitcher.displayName = 'TextInputWithSwitcher';
exports.Input = (0, react_native_theming_1.styled)(TextInputWithSwitcher)(({ theme, focused, hasError }) => ({
    ...inputStyle({ theme, focused, hasError }),
}));