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

Display storybook controls on your device.

import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback, useState } from 'react';
import { Input } from './common';
import { useResyncValue } from './useResyncValue';
const ObjectType = ({ arg, onChange, isPristine }) => {
    const getJsonString = useCallback(() => {
        try {
            return JSON.stringify(arg.value, null, 2);
            // eslint-disable-next-line @typescript-eslint/no-unused-vars
        }
        catch (_error) {
            return '';
        }
    }, [arg.value]);
    const [failed, setFailed] = useState(false);
    const { key, setCurrentValue } = useResyncValue(arg.value, isPristine);
    const [focused, setFocused] = useState(false);
    const handleChange = (value) => {
        const withReplacedQuotes = value
            .replace(/[\u2018\u2019]/g, "'")
            .replace(/[\u201C\u201D]/g, '"');
        try {
            const json = JSON.parse(withReplacedQuotes.trim());
            onChange(json);
            setCurrentValue(json);
            setFailed(false);
            // eslint-disable-next-line @typescript-eslint/no-unused-vars
        }
        catch (_err) {
            setFailed(true);
        }
    };
    const extraStyle = { minHeight: 60 };
    if (failed) {
        extraStyle.borderWidth = 1;
        extraStyle.borderColor = '#fadddd';
        extraStyle.backgroundColor = '#fff5f5';
    }
    return (_jsx(Input, { testID: arg.name, style: extraStyle, defaultValue: getJsonString(), onChangeText: handleChange, multiline: true, autoCapitalize: "none", underlineColorAndroid: "transparent", focused: focused, onFocus: () => setFocused(true), onBlur: () => setFocused(false) }, key));
};
ObjectType.serialize = (object) => JSON.stringify(object);
ObjectType.deserialize = (value) => (value ? JSON.parse(value) : {});
export default ObjectType;