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

Display storybook controls on your device.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_native_theming_1 = require("@storybook/react-native-theming");
const react_native_1 = require("react-native");
const SelectModal_1 = require("../components/SelectModal");
const common_1 = require("./common");
const getOptions = ({ options, control: { labels } }) => {
    if (Array.isArray(options)) {
        if (labels) {
            return options.map((val) => ({ key: val, label: labels[val] || val }));
        }
        return options.map((val) => ({ key: val, label: val }));
    }
    return Object.keys(options).map((key) => ({
        label: key,
        key: options[key],
    }));
};
const SelectType = ({ arg, onChange }) => {
    const { value } = arg;
    const options = getOptions(arg);
    const theme = (0, react_native_theming_1.useTheme)();
    const active = options.find(({ key }) => value === key);
    const selected = active && active.label;
    if (react_native_1.Platform.OS === 'web') {
        const handleChange = (event) => {
            if (arg.type === 'multi-select') {
                const selectedOptions = Array.from(event.target.selectedOptions);
                const selectedValues = selectedOptions.map((option) => option.value);
                onChange(selectedValues);
            }
            else {
                onChange(event.target.value);
            }
        };
        return ((0, jsx_runtime_1.jsx)("select", { value: value, onChange: handleChange, multiple: arg.type === 'multi-select', 
            // @ts-ignore
            style: (0, common_1.inputStyle)({ theme }), children: options.map(({ label, key }) => ((0, jsx_runtime_1.jsx)("option", { value: key, children: label }, `${label}-${key}`))) }));
    }
    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { children: arg.type === 'multi-select' ? ((0, jsx_runtime_1.jsx)(SelectModal_1.SelectModal, { data: options, multiselect: true, initValue: Array.isArray(value) ? value.map((v) => String(v)) : [String(value)], onChange: (selectedOptions) => {
                if (Array.isArray(selectedOptions)) {
                    onChange(selectedOptions.map((option) => option.key));
                }
            }, animationType: "none", keyExtractor: ({ key, label }) => `${label}-${key}`, selectedSeparator: ", ", closeOnChange: false, children: (0, jsx_runtime_1.jsx)(common_1.Input, { editable: false, value: Array.isArray(value)
                    ? value.map((v) => options.find((opt) => opt.key === v)?.label || v).join(', ')
                    : String(selected), autoCapitalize: "none", underlineColorAndroid: "transparent" }) })) : ((0, jsx_runtime_1.jsx)(SelectModal_1.SelectModal, { data: options, initValue: String(value), onChange: (option) => onChange(option.key), animationType: "none", keyExtractor: ({ key, label }) => `${label}-${key}`, children: (0, jsx_runtime_1.jsx)(common_1.Input, { editable: false, value: String(selected), autoCapitalize: "none", underlineColorAndroid: "transparent" }) })) }));
};
exports.default = SelectType;