nice-ui/lib/5-block/CommandPalette/CommandPaletteItem.js

React design system, components, and utilities

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CommandPaletteItem = void 0;
const React = require("react");
const useWindowSize_1 = require("react-use/lib/useWindowSize");
const Ripple_1 = require("../../misc/Ripple");
const Split_1 = require("../../3-list-item/Split");
const nano_theme_1 = require("nano-theme");
const iconSize = 24;
const blockClass = (0, nano_theme_1.rule)({
    ...nano_theme_1.lightTheme.font.ui1.mid,
    fz: '16px',
    d: 'flex',
    w: 'auto',
    alignItems: 'center',
    bd: '1px solid transparent',
    out: 0,
    bg: 'none',
    mar: '0 8px',
    pad: '12px 16px',
    bxz: 'border-box',
    bdrad: '8px',
    cur: 'pointer',
});
const buttonClass = (0, nano_theme_1.rule)({
    d: 'block',
    w: '100%',
    bxz: 'border-box',
    bd: 0,
    out: 0,
    pad: 0,
    mar: 0,
    bg: 'none',
    bdrad: '8px',
    [`& .${blockClass.trim()}`]: {
        mar: 0,
    },
    '&:focus': {
        // boxShadow: `0 0 0 2px ${theme.g(.1)}`,
        boxShadow: `0 0 0 1px ${nano_theme_1.lightTheme.g(0, 0.1)}`,
        // boxShadow: `0 0 0 1px ${theme.color.sem.positive[1]}`,
    },
});
const iconClass = (0, nano_theme_1.rule)({
    d: 'flex',
    flex: `0 0 ${iconSize}px`,
    alignItems: 'center',
    w: `${iconSize}px`,
    h: `${iconSize}px`,
    mar: '0 8px 0 0',
});
const contentClass = (0, nano_theme_1.rule)({
    d: 'flex',
    alignItems: 'center',
});
const nameClass = (0, nano_theme_1.rule)({
    d: 'flex',
    flex: '1 1 auto',
    alignItems: 'center',
});
const rightClass = (0, nano_theme_1.rule)({
    ...nano_theme_1.lightTheme.font.sans.mid,
    whiteSpace: 'nowrap',
    padl: '8px',
    fz: '.85em',
    userSelect: 'none',
});
const CommandPaletteItem = ({ button, autoFocus, icon, selected, disabled, actionLabel, children, onSelect, onClick, onDeleteBefore, onTabBack, }) => {
    const ref = React.useRef();
    const buttonRef = React.useRef();
    const { width } = (0, useWindowSize_1.default)();
    const theme = (0, nano_theme_1.useTheme)();
    // Show in viewport selected item.
    React.useEffect(() => {
        if (!selected)
            return;
        if (!ref.current)
            return;
        const el = ref.current;
        const rect1 = el.getBoundingClientRect();
        const rect2 = el.parentElement.getBoundingClientRect();
        if (rect1.y + rect1.height < rect2.y + 16 || rect1.y > rect2.y + rect2.height - 16) {
            el.scrollIntoView({ behavior: 'smooth' });
        }
    }, [selected]);
    const selectedBlockClass = (0, nano_theme_1.useRule)((theme) => ({
        bg: theme.g(0, 0.04),
        '&:hover': {
            bd: `1px solid ${theme.g(0, 0.08)}`,
        },
    }));
    React.useEffect(() => {
        const el = buttonRef.current;
        if (!el)
            return;
        if (autoFocus && typeof el.focus === 'function') {
            el.focus();
        }
    }, []);
    const isSmall = width < 700;
    let element = (React.createElement("span", { className: blockClass + (selected ? selectedBlockClass : ''), style: { opacity: disabled ? 0.5 : undefined, cursor: disabled ? 'default' : undefined }, onMouseEnter: onSelect ? () => onSelect() : undefined, onClick: onClick && !button ? () => onClick() : undefined },
        !!icon && React.createElement("span", { className: iconClass }, icon),
        React.createElement(Split_1.Split, { as: 'span', className: contentClass },
            React.createElement("span", { className: nameClass }, children),
            React.createElement("span", { className: rightClass, style: { color: theme.g(0.2, 0.7) } }, !isSmall && selected && actionLabel))));
    if (onClick)
        element = React.createElement(Ripple_1.Ripple, null, element);
    if (button) {
        const handleKeyDown = (e) => {
            if (onDeleteBefore && e.key === 'Backspace') {
                e.preventDefault();
                e.stopPropagation();
                onDeleteBefore();
                return;
            }
            if (onTabBack && e.key === 'Tab' && e.shiftKey) {
                e.preventDefault();
                e.stopPropagation();
                onTabBack();
                return;
            }
        };
        element = (React.createElement("div", { style: { padding: '0 8px' } },
            React.createElement("button", { ref: buttonRef, className: buttonClass, onClick: onClick ? () => onClick() : undefined, onKeyDown: handleKeyDown }, element)));
    }
    return React.createElement("div", { ref: ref }, element);
};
exports.CommandPaletteItem = CommandPaletteItem;