epn-ui/umd/dist/components/ItemsSlider/itemsSlider.js

Дизайн система кабинета ВМ

import React, { useRef, useState, useEffect } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faAngleLeft } from '@fortawesome/pro-regular-svg-icons/faAngleLeft';
import { faAngleRight } from '@fortawesome/pro-regular-svg-icons/faAngleRight';
import debounce from 'lodash/debounce';
import Button from '../Button/index.js';

var IconButton = function (_a) {
    var icon = _a.icon, onClick = _a.onClick, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
    return (React.createElement(Button, { type: "default", onClick: onClick, disabled: disabled, className: "epn-slider-button" },
        React.createElement(FontAwesomeIcon, { icon: icon })));
};
var ITEMS_MARGIN = 24;
var DEBOUNCE_VALUE = 100;
var ItemsSlider = function (_a) {
    var title = _a.title, children = _a.children;
    var containerRef = useRef(null);
    var childRefs = useRef([]);
    var _b = useState(true), leftButtonDisabled = _b[0], setLeftButtonDisabled = _b[1];
    var _c = useState(false), rightButtonDisabled = _c[0], setRightButtonDisabled = _c[1];
    var scrollRight = function () {
        if (containerRef.current && childRefs.current[0]) {
            containerRef.current.scrollLeft += childRefs.current[0].clientWidth + ITEMS_MARGIN;
        }
    };
    var scrollLeft = function () {
        if (containerRef.current && childRefs.current[0]) {
            containerRef.current.scrollLeft -= childRefs.current[0].clientWidth + ITEMS_MARGIN;
        }
    };
    useEffect(function () {
        if (containerRef.current) {
            if (containerRef.current.offsetWidth + containerRef.current.scrollLeft ===
                containerRef.current.scrollWidth) {
                setRightButtonDisabled(true);
            }
            else {
                setRightButtonDisabled(false);
            }
        }
    }, [children]);
    var handleScroll = debounce(function () {
        if (containerRef.current) {
            if (containerRef.current.scrollLeft === 0) {
                setLeftButtonDisabled(true);
            }
            else {
                setLeftButtonDisabled(false);
            }
            if (containerRef.current.offsetWidth + containerRef.current.scrollLeft ===
                containerRef.current.scrollWidth) {
                setRightButtonDisabled(true);
            }
            else {
                setRightButtonDisabled(false);
            }
        }
    }, DEBOUNCE_VALUE);
    return (React.createElement("div", { className: "epn-slider" },
        React.createElement("div", { className: "epn-slider__head" },
            React.createElement("h2", { className: "epn-slider__title" }, title),
            React.createElement("div", { className: "epn-slider__buttons" },
                React.createElement(IconButton, { disabled: leftButtonDisabled, icon: faAngleLeft, onClick: scrollLeft }),
                React.createElement(IconButton, { disabled: rightButtonDisabled, icon: faAngleRight, onClick: scrollRight }))),
        React.createElement("div", { ref: containerRef, className: "epn-slider__body smooth hide-scrollbar", onScroll: handleScroll }, React.Children.map(children, function (child, index) {
            return (React.createElement("div", { ref: function (el) {
                    childRefs.current[index] = el;
                }, className: "epn-slider__item" }, child));
        }))));
};

export { ItemsSlider as default };