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

UI Components Library for React.js

import React, { forwardRef, useRef, useEffect, useCallback } from 'react';
import PropTypes from 'prop-types';
import classNames from '../../_virtual/index.js';
import '../../node_modules/tslib/tslib.es6.js';
import '@popperjs/core';
import getNextActiveElement from '../../utils/getNextActiveElement.js';
import isRTL from '../../utils/isRTL.js';
import { useForkedRef } from '../../hooks/useForkedRef.js';
import { useIsVisible } from '../../hooks/useIsVisible.js';

const CTimePickerRollCol = forwardRef(({ ariaLabel, columnIndex, columnRefs, elements, onClick, selected }, ref) => {
    const colRef = useRef(null);
    const firstRender = useRef(true);
    const forkedRef = useForkedRef(ref, colRef);
    const isVisible = useIsVisible(colRef);
    useEffect(() => {
        if (isVisible) {
            setRoll(firstRender.current ? 'instant' : 'smooth');
            firstRender.current = false;
        }
    }, [isVisible, selected]);
    const moveFocusToNextColumn = 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 = 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 = 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 = 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(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(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) => {
        const isSelected = element.value === selected;
        return (React.createElement("div", { className: classNames('time-picker-roll-cell', {
                selected: isSelected,
            }), key: index, 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 === 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';

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