@wonderflow/react-components
Version:
UI components from Wonderflow's Wanda design system
34 lines (33 loc) • 3.05 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*
* Copyright 2022-2023 Wonderflow Design Team
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import clsx from 'clsx';
import { forwardRef, useCallback, useMemo, useState, } from 'react';
import { useUIDSeed } from 'react-uid';
import { Stack, Symbol, Text, Textfield, } from '../..';
import * as styles from './slider.module.css';
export const Slider = forwardRef(({ min = 0, max = 100, step, onInput, className, defaultValue = 0, dimension = 'regular', showValues, iconMin, iconMax, disabled, label, id, ...otherProps }, forwardedRef) => {
const [value, setValue] = useState(defaultValue);
const isSmall = dimension === 'small';
const handleInput = useCallback(({ currentTarget }) => {
onInput?.(currentTarget.valueAsNumber);
setValue(currentTarget.valueAsNumber);
}, [onInput]);
const seedID = useUIDSeed();
const fieldID = useMemo(() => id ?? seedID('slider'), [id, seedID]);
return (_jsxs(Stack, { direction: "column", rowGap: 4, children: [label && _jsx(Text, { as: "label", variant: isSmall ? 'body-2' : 'body-1', className: styles.Label, "aria-disabled": disabled, htmlFor: fieldID, children: label }), _jsxs(Stack, { direction: "row", vAlign: "center", columnGap: 8, className: clsx(styles.Slider, className), "data-slider-dimension": dimension, children: [showValues && _jsx(Text, { as: "span", variant: isSmall ? 'body-2' : 'body-1', textAlign: "end", className: styles.Value, "aria-disabled": disabled, children: _jsx("b", { children: min }) }), (iconMin && !showValues) && (_jsx(Symbol, { source: iconMin, dimension: isSmall ? 16 : 24, className: styles.Icon, "aria-disabled": disabled })), _jsx("input", { ref: forwardedRef, className: styles.Input, type: "range", min: min, max: max, defaultValue: value, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-disabled": disabled, step: step, onInput: handleInput, disabled: disabled, id: fieldID, "data-testid": "SliderInput", ...otherProps }), showValues && _jsx(Text, { as: "span", variant: isSmall ? 'body-2' : 'body-1', className: styles.Value, "aria-disabled": disabled, children: _jsx("b", { children: max }) }), showValues && _jsx(Textfield, { readOnly: true, dimension: "small", size: String(max).length, value: value, disabled: disabled }), (iconMax && !showValues) && (_jsx(Symbol, { source: iconMax, dimension: isSmall ? 16 : 24, className: styles.Icon, "aria-disabled": disabled }))] })] }));
});
Slider.displayName = 'Slider';