react-base-guide/lib/components/select/index.js

react ui components

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const label_1 = __importDefault(require("../label"));
const dropdown_menu_1 = __importDefault(require("../dropdown-menu"));
const wrapper_1 = __importDefault(require("./wrapper"));
const row_1 = __importDefault(require("./row"));
const selected_1 = __importDefault(require("./selected"));
const scrollToHovered = (menu) => {
    let hovered = menu.current && menu.current.querySelector(".hovered");
    if (hovered && menu.current) {
        hovered && (menu.current.scrollTop = (hovered.offsetTop - (hovered.offsetHeight + 4)));
    }
};
const selectByKey = ({ e, rows, hoverIndex, setOpen, setHoverIndex, menu }) => {
    e.preventDefault();
    switch (e.key) {
        case "Enter": {
            rows[hoverIndex].onClick();
            return;
        }
        case "Escape": {
            setOpen(false);
            return;
        }
        case "ArrowDown":
        case "ArrowUp": {
            let newHoverIndex = e.key === "ArrowDown" ? hoverIndex + 1 : hoverIndex - 1;
            if (newHoverIndex < 0) {
                newHoverIndex = 0;
            }
            if (newHoverIndex >= rows.length - 1) {
                newHoverIndex = rows.length - 1;
            }
            if (hoverIndex !== newHoverIndex) {
                setHoverIndex(newHoverIndex);
                scrollToHovered(menu);
            }
            return;
        }
    }
};
const onBlur = (e, setOpen, containerRef) => {
    if (!e.relatedTarget || !containerRef.current.contains(e.relatedTarget)) {
        setOpen(false);
    }
};
const Select = (props) => {
    const [open, setOpen] = (0, react_1.useState)(false);
    const [hoverIndex, setHoverIndex] = (0, react_1.useState)(0);
    const containerRef = (0, react_1.useRef)(null);
    const menu = (0, react_1.useRef)(null);
    return ((0, jsx_runtime_1.jsx)(label_1.default, Object.assign({ variant: "standard", label: props.label, className: props.className, styled: props.styled }, { children: (0, jsx_runtime_1.jsxs)(wrapper_1.default, Object.assign({ ref: containerRef, tabIndex: props.tabIndex || 0, onClick: () => props.disabled ? null : setOpen(true), onKeyDown: (e) => selectByKey({ e, rows: props.rows, hoverIndex, setHoverIndex, setOpen, menu }), onBlur: e => onBlur(e, setOpen, containerRef) }, { children: [(0, jsx_runtime_1.jsx)(selected_1.default, { rows: props.rows, disabled: props.disabled }), (0, jsx_runtime_1.jsx)(dropdown_menu_1.default, Object.assign({ forwardRef: menu, open: open, menuWidth: props.menuWidth || "100%", menuHeight: props.menuHeight, right: props.right, up: props.up }, { children: props.rows && props.rows.map((row, key) => ((0, jsx_runtime_1.jsx)(row_1.default, { selected: row.selected, hovered: key === hoverIndex, onClick: row.onClick, onMouseEnter: () => setHoverIndex(key), value: row.value }, key))) }))] })) })));
};
exports.default = Select;
//# sourceMappingURL=index.js.map