nice-ui
Version:
React design system, components, and utilities
83 lines (82 loc) • 3.94 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CommandPaletteInput = void 0;
const React = require("react");
const useWindowSize_1 = require("react-use/lib/useWindowSize");
const use_t_1 = require("use-t");
const nano_theme_1 = require("nano-theme");
const BasicButton_1 = require("../../2-inline-block/BasicButton");
const SpinnerCircle_1 = require("../../2-inline-block/SpinnerCircle");
const Typeahead_1 = require("../../2-inline-block/Typeahead");
const Progress_1 = require("../../3-list-item/Progress");
const BasicTooltip_1 = require("../../4-card/BasicTooltip");
const Iconista_1 = require("../../icons/Iconista");
const height = 64;
const blockClass = (0, nano_theme_1.rule)({
...nano_theme_1.theme.font.ui3.mid,
fz: '16px',
d: 'flex',
flex: `0 0 ${height}px`,
h: `${height}px`,
w: '100%',
bxz: 'border-box',
});
const iconLeftClass = (0, nano_theme_1.rule)({
d: 'flex',
justifyContent: 'center',
alignItems: 'center',
w: '54px',
marl: '8px',
});
const iconRightClass = (0, nano_theme_1.rule)({
d: 'flex',
flexDirection: 'row-reverse',
alignItems: 'center',
w: '54px',
marr: '8px',
});
const beforeClass = (0, nano_theme_1.rule)({
d: 'flex',
alignItems: 'center',
});
const contentClass = (0, nano_theme_1.rule)({
d: 'flex',
flex: '1 1 auto',
alignItems: 'center',
});
const CommandPaletteInput = ({ progress, icon, before, value, children, placeholder, loading, disabled, onChange, onDeleteBefore, onKeyUp, onKeyDown, onClear, onComplete, onEnter, }) => {
const [t] = (0, use_t_1.useT)();
const theme = (0, nano_theme_1.useTheme)();
const { width } = (0, useWindowSize_1.default)();
const handleClearKeyDown = (e) => {
switch (e.key) {
case 'ArrowUp':
case 'ArrowRight':
case 'ArrowDown':
case 'ArrowLeft': {
e.preventDefault();
if (typeof e.target?.blur === 'function')
e.target.blur();
}
}
};
const handleClearClick = (e) => {
if (typeof e.target?.blur === 'function')
e.target.blur();
onClear?.();
};
const isSmall = width < 500;
const progressElement = typeof progress === 'number' && (React.createElement("div", { style: { position: 'absolute', top: 0, left: 0, right: 0 } },
React.createElement(Progress_1.Progress, { value: progress, glow: true })));
return (React.createElement("div", { className: blockClass, style: { borderBottom: `1px solid ${theme.g(0.1, 0.2)}` } },
progressElement,
isSmall ? (React.createElement("div", { style: { width: 24 } })) : (React.createElement("div", { className: iconLeftClass }, loading ? React.createElement(SpinnerCircle_1.SpinnerCircle, null) : icon ? icon : React.createElement(Iconista_1.Iconista, { set: "ibm_16", icon: "search", width: 20, height: 20 }))),
!!before && React.createElement("div", { className: beforeClass },
before,
"\u00A0"),
React.createElement("div", { className: contentClass }, children ? (children) : (React.createElement(Typeahead_1.Typeahead, { value: value || '', placeholder: placeholder, disabled: disabled, onChange: onChange, onDeleteBefore: onDeleteBefore, onKeyUp: onKeyUp, onKeyDown: onKeyDown, onTab: onComplete, onEnter: onEnter }))),
React.createElement("div", { className: iconRightClass }, !!onClear && (React.createElement(BasicTooltip_1.BasicTooltip, { renderTooltip: () => t('Clear selection'), nowrap: true },
React.createElement(BasicButton_1.default, { size: 48, round: true, disabled: disabled, onClick: handleClearClick, onKeyDown: handleClearKeyDown },
React.createElement(Iconista_1.Iconista, { set: "ibm_16", icon: "misuse", width: 20, height: 20 })))))));
};
exports.CommandPaletteInput = CommandPaletteInput;