@storybook/addon-ondevice-controls
Version:
Display storybook controls on your device.
46 lines (45 loc) • 2 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const common_1 = require("./common");
const useResyncValue_1 = require("./useResyncValue");
const ObjectType = ({ arg, onChange, isPristine }) => {
const getJsonString = (0, react_1.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] = (0, react_1.useState)(false);
const { key, setCurrentValue } = (0, useResyncValue_1.useResyncValue)(arg.value, isPristine);
const [focused, setFocused] = (0, react_1.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 ((0, jsx_runtime_1.jsx)(common_1.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) : {});
exports.default = ObjectType;