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

UI Components Library for React.js

'use strict';

var React = require('react');
var PropTypes = require('prop-types');
var index = require('../../_virtual/index.js');
require('../../node_modules/tslib/tslib.es6.js');
require('@popperjs/core');
var getNextActiveElement = require('../../utils/getNextActiveElement.js');
var isRTL = require('../../utils/isRTL.js');
var useForkedRef = require('../../hooks/useForkedRef.js');
var useIsVisible = require('../../hooks/useIsVisible.js');

const CTimePickerRollCol = React.forwardRef(({ ariaLabel, columnIndex, columnRefs, elements, onClick, selected }, ref) => {
    const colRef = React.useRef(null);
    const firstRender = React.useRef(true);
    const forkedRef = useForkedRef.useForkedRef(ref, colRef);
    const isVisible = useIsVisible.useIsVisible(colRef);
    React.useEffect(() => {
        if (isVisible) {
            setRoll(firstRender.current ? 'instant' : 'smooth');
            firstRender.current = false;
        }
    }, [isVisible, selected]);
    const moveFocusToNextColumn = React.useCallback(() => {
        const columns = columnRefs;
        if ((columns === null || columns === void 0 ? void 0 : columns.length) === 0) {
            return;
        }
        if (columnIndex < columns.length - 1) {
            const column = columns[columnIndex + 1];
            (column === null || column === void 0 ? void 0 : column.querySelector('.time-picker-roll-cell[tabindex="0"')).focus();
        }
    }, [columnIndex, columnRefs]);
    const moveFocusToPreviousColumn = React.useCallback(() => {
        const columns = columnRefs;
        if ((columns === null || columns === void 0 ? void 0 : columns.length) === 0) {
            return;
        }
        if (columnIndex > 0) {
            const column = columns[columnIndex - 1];
            (column === null || column === void 0 ? void 0 : column.querySelector('.time-picker-roll-cell[tabindex="0"')).focus();
        }
    }, [columnIndex, columnRefs]);
    const setRoll = React.useCallback((behavior) => {
        var _a, _b;
        const nodeEl = (_a = colRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.selected');
        if (nodeEl && nodeEl instanceof HTMLElement) {
            (_b = colRef.current) === null || _b === void 0 ? void 0 : _b.scrollTo({
                top: nodeEl.offsetTop,
                behavior: behavior,
            });
        }
    }, []);
    const handleKeyDown = React.useCallback((event, value) => {
        if (event.code === 'Space' || event.key === 'Enter') {
            event.preventDefault();
            onClick === null || onClick === void 0 ? void 0 : onClick(value);
            moveFocusToNextColumn();
            return;
        }
        if (colRef.current && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
            event.preventDefault();
            const target = event.target;
            const items = [
                ...colRef.current.querySelectorAll('.time-picker-roll-cell'),
            ];
            getNextActiveElement.default(items, target, event.key === 'ArrowDown', true).focus();
            return;
        }
        if (colRef.current && (event.key === 'Home' || event.key === 'End')) {
            event.preventDefault();
            const items = [
                ...colRef.current.querySelectorAll('.time-picker-roll-cell'),
            ];
            const index = event.key === 'Home' ? 0 : items.length - 1;
            items[index].focus();
            return;
        }
        if (colRef.current && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
            event.preventDefault();
            const rtl = isRTL.default(colRef.current);
            const shouldGoLeft = (event.key === 'ArrowLeft' && !rtl) || (event.key === 'ArrowRight' && rtl);
            if (shouldGoLeft) {
                moveFocusToPreviousColumn();
            }
            else {
                moveFocusToNextColumn();
            }
        }
    }, [onClick, moveFocusToNextColumn, moveFocusToPreviousColumn]);
    return (React.createElement("div", { className: "time-picker-roll-col", onBlur: (event) => {
            if (!event.currentTarget.contains(event.relatedTarget)) {
                setRoll('smooth');
            }
        }, role: "listbox", "aria-label": ariaLabel, ref: forkedRef }, elements.map((element, index$1) => {
        const isSelected = element.value === selected;
        return (React.createElement("div", { className: index.default('time-picker-roll-cell', {
                selected: isSelected,
            }), key: index$1, onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(element.value), onKeyDown: (event) => handleKeyDown(event, element.value), role: "option", tabIndex: isSelected ? 0 : selected ? -1 : index$1 === 0 ? 0 : -1, "aria-label": element.label.toString(), "aria-selected": isSelected }, element.label));
    })));
});
CTimePickerRollCol.propTypes = {
    elements: PropTypes.array.isRequired,
    onClick: PropTypes.func,
    selected: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
};
CTimePickerRollCol.displayName = 'CTimePickerRollCol';

exports.CTimePickerRollCol = CTimePickerRollCol;
//# sourceMappingURL=CTimePickerRollCol.js.map