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

Display storybook controls on your device.

import { jsx as _jsx } from "react/jsx-runtime";
import { useTheme } from '@storybook/react-native-theming';
import { useMemo } from 'react';
import { Platform, View } from 'react-native';
import { SelectModal } from '../components/SelectModal';
import { Input, inputStyle } from './common';
const getOptions = (options, labels) => {
    if (Array.isArray(options)) {
        return options.map((val) => ({ key: val, label: String(labels?.[val] || val) }));
    }
    return Object.keys(options).map((key) => ({
        label: String(key),
        key: options[key],
    }));
};
const SelectType = ({ arg, onChange }) => {
    const { value } = arg;
    const options = useMemo(() => getOptions(arg.options, arg.control.labels), [arg.control.labels, arg.options]);
    const theme = useTheme();
    const active = options.find(({ key }) => value === key);
    const selected = active?.label ?? '';
    if (Platform.OS === 'web') {
        const handleChange = (event) => {
            const target = event.currentTarget;
            if (arg.type === 'multi-select') {
                const selectedOptions = Array.from(target.selectedOptions);
                const selectedValues = selectedOptions.map((option) => option.value);
                onChange(selectedValues);
            }
            else {
                onChange(target.value);
            }
        };
        return (_jsx("select", { value: value, onChange: handleChange, multiple: arg.type === 'multi-select', 
            // @ts-ignore
            style: inputStyle({ theme }), children: options.map(({ label, key }) => (_jsx("option", { value: key, children: label }, `${label}-${key}`))) }));
    }
    return (_jsx(View, { children: arg.type === 'multi-select' ? (_jsx(SelectModal, { options: options, value: value, multiple: true, onChange: onChange, children: _jsx(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" }) })) : (_jsx(SelectModal, { options: options, value: value, onChange: onChange, children: _jsx(Input, { editable: false, value: selected, autoCapitalize: "none", underlineColorAndroid: "transparent" }) })) }));
};
export default SelectType;