@storybook/addon-ondevice-controls
Version:
Display storybook controls on your device.
73 lines (72 loc) • 3.27 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const slider_1 = __importDefault(require("@react-native-community/slider"));
const react_native_theming_1 = require("@storybook/react-native-theming");
const react_1 = require("react");
const react_native_1 = require("react-native");
const useResyncValue_1 = require("./useResyncValue");
const common_1 = require("./common");
const ValueContainer = react_native_theming_1.styled.View({ flexDirection: 'row' });
const LabelText = react_native_theming_1.styled.Text(({ theme }) => ({
color: theme.color.mediumdark,
fontSize: theme.typography.size.s1,
}));
const ValueText = react_native_theming_1.styled.Text(({ theme }) => ({
color: theme.color.defaultText,
fontSize: theme.typography.size.s1,
}));
const getRangeOptions = (arg) => {
if (arg.type === 'range') {
return {
min: arg.control?.min ?? 0,
max: arg.control?.max ?? 100,
step: arg.control?.step ?? 1,
};
}
if (arg.range === true) {
return {
min: arg.min ?? 0,
max: arg.max ?? 100,
step: arg.step ?? 1,
};
}
return {
min: 0,
max: 100,
step: 1,
};
};
const NumberType = ({ arg, isPristine, onChange = (value) => value }) => {
const showError = Number.isNaN(arg.value);
const [numStr, setNumStr] = (0, react_1.useState)(arg.value?.toString());
const updateNumstr = (0, react_1.useCallback)((value) => setNumStr(value?.toString()), []);
const { key, setCurrentValue } = (0, useResyncValue_1.useResyncValue)(arg.value, isPristine, updateNumstr);
const [focused, setFocused] = (0, react_1.useState)(false);
const handleNormalChangeText = (text) => {
const commaReplaced = text.trim().replace(/,/, '.');
setNumStr(commaReplaced);
if (commaReplaced === '-') {
onChange(-1);
setCurrentValue(-1);
}
else {
onChange(Number(commaReplaced));
setCurrentValue(Number(commaReplaced));
}
};
if (arg.range || arg.type === 'range') {
const { min, max, step } = getRangeOptions(arg);
return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(ValueContainer, { children: [(0, jsx_runtime_1.jsx)(LabelText, { children: "Value: " }), (0, jsx_runtime_1.jsx)(ValueText, { children: arg.value })] }), (0, jsx_runtime_1.jsx)(slider_1.default, { minimumValue: min, maximumValue: max, step: step, value: arg.value, onSlidingComplete: (val) => {
onChange(val);
setCurrentValue(val);
} })] }, key));
}
else {
return ((0, jsx_runtime_1.jsx)(common_1.Input, { autoCapitalize: "none", underlineColorAndroid: "transparent", value: numStr, keyboardType: "numeric", onChangeText: handleNormalChangeText, hasError: showError, focused: focused, onFocus: () => setFocused(true), onBlur: () => setFocused(false) }));
}
};
exports.default = NumberType;