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

Display storybook controls on your device.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { styled } from '@storybook/react-native-theming';
import { useCallback, useState } from 'react';
import { View } from 'react-native';
import { useResyncValue } from './useResyncValue';
import { Input } from './common';
import SliderWrapper from '../components/SliderWrapper';
const ValueContainer = styled.View({ flexDirection: 'row' });
const LabelText = styled.Text(({ theme }) => ({
    color: theme.color.mediumdark,
    fontSize: theme.typography.size.s1,
}));
const ValueText = 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] = useState(arg.value?.toString());
    const updateNumstr = useCallback((value) => setNumStr(value?.toString()), []);
    const { key, setCurrentValue } = useResyncValue(arg.value, isPristine, updateNumstr);
    const [focused, setFocused] = 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 (_jsxs(View, { children: [_jsxs(ValueContainer, { children: [_jsx(LabelText, { children: "Value: " }), _jsx(ValueText, { children: arg.value })] }), _jsx(SliderWrapper, { minimumValue: min, maximumValue: max, step: step, value: arg.value, onSlidingComplete: (val) => {
                        onChange(val);
                        setCurrentValue(val);
                    } })] }, key));
    }
    else {
        return (_jsx(Input, { autoCapitalize: "none", underlineColorAndroid: "transparent", value: numStr, keyboardType: "numeric", onChangeText: handleNormalChangeText, hasError: showError, focused: focused, onFocus: () => setFocused(true), onBlur: () => setFocused(false) }));
    }
};
export default NumberType;