@coreui/react-pro/dist/esm/components/time-picker/CTimePickerRollCol.js

UI Components Library for React.js

import React, { forwardRef, useRef, useEffect } from 'react';
import PropTypes from 'prop-types';
import classNames from '../../node_modules/classnames/index.js';
import { useForkedRef } from '../../hooks/useForkedRef.js';
import { useIsVisible } from '../../hooks/useIsVisible.js';
import '@popperjs/core';

var CTimePickerRollCol = forwardRef(function (_a, ref) {
    var elements = _a.elements, onClick = _a.onClick, selected = _a.selected;
    var init = useRef(true);
    var colRef = useRef(null);
    var forkedRef = useForkedRef(ref, colRef);
    var isVisible = useIsVisible(colRef);
    useEffect(function () {
        var _a, _b;
        var nodeEl = (_a = colRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.selected');
        if (isVisible && nodeEl && nodeEl instanceof HTMLElement) {
            (_b = colRef.current) === null || _b === void 0 ? void 0 : _b.scrollTo({
                top: nodeEl.offsetTop,
                behavior: init.current ? 'auto' : 'smooth',
            });
        }
        if (isVisible) {
            init.current = false;
        }
    }, [isVisible, selected]);
    var handleKeyDown = function (event, value) {
        if (event.code === 'Space' || event.key === 'Enter') {
            event.preventDefault();
            onClick && onClick(value);
        }
    };
    return (React.createElement("div", { className: "time-picker-roll-col", ref: forkedRef }, elements.map(function (element, index) {
        return (React.createElement("div", { className: classNames('time-picker-roll-cell', {
                selected: element.value === selected,
            }), key: index, onClick: function () { return onClick && onClick(element.value); }, onKeyDown: function (event) { return handleKeyDown(event, element.value); }, role: "button", tabIndex: 0 }, element.label));
    })));
});
CTimePickerRollCol.propTypes = {
    elements: PropTypes.array.isRequired,
    onClick: PropTypes.func,
    selected: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
};
CTimePickerRollCol.displayName = 'CTimePickerRollCol';

export { CTimePickerRollCol };
//# sourceMappingURL=CTimePickerRollCol.js.map