@heycar-uikit/core/slider-with-histogram/modern/SliderWithHistogram.js

The React UI library from HeyCar

import React, { useRef, useState, useEffect } from 'react';
import Slider from '../../slider/modern';
import Histogram from './components/Histogram.js';
import { sanitiseRangeIndexes, debounce } from './utils/histogramHelpers.js';
import { DEFAULT_LOADING_STR, SLIDER_HEIGHT, HISTOGRAM_HEIGHT } from './SliderWithHistogram.constants.js';

var styles = {"wrapper":"slider-with-histogram__wrapper_uhjsd","sliderWrapper":"slider-with-histogram__sliderWrapper_uhjsd","histogramWrapper":"slider-with-histogram__histogramWrapper_uhjsd","loader":"slider-with-histogram__loader_uhjsd","blink":"slider-with-histogram__blink_uhjsd"};
 require('./styles/default.css');

/* eslint-disable @typescript-eslint/ban-ts-comment */
const SliderWithHistogram = ({ dataTestId, className, onChange, onAfterChange, locale, minDistance, selectedRangeIndexes, ariaValueText, data, hide, isLoading, ...rest }) => {
    const internalRef = useRef(null);
    const [width, setWidth] = useState(0);
    const [height, setHeight] = useState(0);
    const [rangeIndexes, setRangeIndexes] = useState(sanitiseRangeIndexes(selectedRangeIndexes, data));
    const handleOnChange = (values, thumbIndex) => {
        setRangeIndexes([values[0], values[1]]);
        if (onChange)
            onChange([values[0], values[1]], thumbIndex);
    };
    const updateCanvasSize = debounce(() => {
        if (internalRef.current) {
            // @ts-ignore
            const rect = internalRef.current.getBoundingClientRect();
            const newWidth = rect.width - SLIDER_HEIGHT;
            const newHeight = HISTOGRAM_HEIGHT;
            setWidth(newWidth);
            setHeight(newHeight);
        }
    });
    useEffect(() => {
        updateCanvasSize();
        window.addEventListener('resize', updateCanvasSize);
        return () => {
            window.removeEventListener('resize', updateCanvasSize);
        };
    }, []);
    useEffect(() => {
        setRangeIndexes(sanitiseRangeIndexes(selectedRangeIndexes, data));
    }, [selectedRangeIndexes, setRangeIndexes, data]);
    return (React.createElement("div", { className: `${styles.wrapper} ${className}`, "data-test-id": dataTestId, ref: internalRef, ...rest },
        !hide && (React.createElement("div", { "aria-busy": isLoading, className: styles.histogramWrapper }, isLoading ? (React.createElement("div", { "aria-busy": "true", "aria-label": locale?.loading || DEFAULT_LOADING_STR, "aria-live": "polite", className: styles.loader },
            React.createElement("div", null),
            React.createElement("div", null),
            React.createElement("div", null))) : (React.createElement(Histogram, { height: height, selectedRangeIndexes: rangeIndexes, selectedRangeMinWidth: 4, values: data, width: width })))),
        React.createElement(Slider, { ariaValueText: ariaValueText, className: styles.sliderWrapper, isWithHistogram: true, locale: locale, minDistance: minDistance, onAfterChange: onAfterChange, onChange: handleOnChange, selectedRangeIndexes: selectedRangeIndexes, stepCount: data.length })));
};

export { SliderWithHistogram, SliderWithHistogram as default };