@wix/design-system/dist/esm/AngleInput/AngleInput.story.js

@wix/design-system

import React, { useState } from 'react';
import AngleInput from './AngleInput';
import NumberInput from '../NumberInput';
import Input from '../Input/Input';
import Box from '../Box';
import { Text } from '..';
const meta = {
    component: AngleInput,
};
export default meta;
const BasicAngleInput = () => {
    const [angle, setAngle] = useState(0);
    const handleAngleChange = (newAngle) => {
        setAngle(newAngle);
    };
    const props = {
        step: 1,
        value: angle,
        onChange: handleAngleChange,
    };
    return React.createElement(AngleInput, { ...props });
};
const WithNumberInputAngleInput = () => {
    const [angle, setAngle] = useState(0);
    const [callbackHistory, setCallbackHistory] = useState([]);
    const logCallback = (callbackName, value = null) => {
        setCallbackHistory(prev => {
            const updatedHistory = [...prev, { name: callbackName, value }];
            return updatedHistory.length > 10
                ? updatedHistory.slice(-10)
                : updatedHistory;
        });
    };
    const handleAngleChange = (newAngle) => {
        logCallback('onChange', newAngle);
        setAngle(newAngle);
    };
    const handleFocus = () => {
        logCallback('onFocus');
    };
    const handleBlur = () => {
        logCallback('onBlur');
    };
    const props = {
        step: 1,
        value: angle,
        onChange: handleAngleChange,
        onFocus: handleFocus,
        onBlur: handleBlur,
    };
    return (React.createElement(Box, { direction: "vertical", gap: "2", border: "thin dashed black", borderRadius: 3, padding: "2", width: "fit-content" },
        React.createElement(Box, { width: "150px", gap: "2", verticalAlign: "middle" },
            React.createElement(AngleInput, { ...props }),
            React.createElement(NumberInput, { size: "small", suffix: React.createElement(Input.Affix, null, "\u00B0"), value: angle, onChange: handleAngleChange })),
        React.createElement(Box, { direction: "vertical", gap: "1" },
            React.createElement(Text, null, "Last 10 calls (callback, value):"),
            callbackHistory.map((callback, index) => (React.createElement(Text, { key: index },
                callback.name,
                ": ",
                callback.value !== null ? callback.value : 'N/A'))))));
};
const DisabledAngleInput = () => {
    const [angle, setAngle] = useState(0);
    const handleAngleChange = (newAngle) => {
        setAngle(newAngle);
    };
    const props = {
        step: 1,
        value: angle,
        onChange: handleAngleChange,
        disabled: true,
    };
    return React.createElement(AngleInput, { ...props });
};
export const Basic = {
    render: () => React.createElement(BasicAngleInput, null),
};
export const WithNumberInput = {
    render: () => React.createElement(WithNumberInputAngleInput, null),
};
export const Disabled = {
    render: () => React.createElement(DisabledAngleInput, null),
};
//# sourceMappingURL=AngleInput.story.js.map