nice-ui
Version:
React design system, components, and utilities
34 lines (33 loc) • 2.71 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CommandArgSelect = void 0;
const React = require("react");
const use_t_1 = require("use-t");
const nano_theme_1 = require("nano-theme");
const Typeahead_1 = require("../../../2-inline-block/Typeahead");
const SpinnerSquare_1 = require("../../../3-list-item/SpinnerSquare");
const EmptyState_1 = require("../../../4-card/EmptyState");
const Scrollbox_1 = require("../../../4-card/Scrollbox");
const CommandPaletteItem_1 = require("../CommandPaletteItem");
const ItemText_1 = require("../CommandPaletteList/ItemText");
const CommandArg_1 = require("./CommandArg");
const CommandParameter_1 = require("./CommandParameter");
const inputClass = (0, nano_theme_1.rule)({
...nano_theme_1.theme.font.ui3.mid,
fz: '16px',
pad: '4px 24px 20px',
});
const CommandArgSelect = ({ value, list, highlight, initializing, selected, title, label, labelValue = value, placeholder, readonly, onChange, onSubmit, onClick, onTabBack, onDeleteBefore, onSelect, onOptionClick, onKeyDown, onKeyUp, }) => {
const [t] = (0, use_t_1.useT)();
const active = !readonly;
return (React.createElement(CommandArg_1.CommandArg, { title: title, right: React.createElement("span", { style: { fontSize: '1.1em' } },
React.createElement(CommandParameter_1.CommandParameter, { value: labelValue, label: label, active: active })), active: active, onClick: onClick },
!!initializing && React.createElement(SpinnerSquare_1.SpinnerSquare, null),
!initializing && !readonly && (React.createElement(React.Fragment, null,
React.createElement("div", { className: inputClass },
React.createElement(Typeahead_1.Typeahead, { autoFocus: true, value: value, placeholder: placeholder, onChange: onChange, onEnter: onSubmit, onTab: onSubmit, onTabBack: onTabBack, onDeleteBefore: onDeleteBefore, onKeyDown: onKeyDown, onKeyUp: onKeyUp })),
!list.length && React.createElement(EmptyState_1.EmptyState, { emoji: ' ', title: t('No options') }),
!!list.length && (React.createElement(Scrollbox_1.Scrollbox, { style: { maxHeight: '400px', overflowY: 'auto' } }, list.map((item) => (React.createElement(CommandPaletteItem_1.CommandPaletteItem, { key: item.id, selected: selected === item.id, icon: item.icon, actionLabel: t('Select'), onSelect: onSelect ? () => onSelect(item.id) : undefined, onClick: onOptionClick ? () => onOptionClick(item.id) : undefined },
React.createElement(ItemText_1.ItemText, { name: item.name || item.id, highlight: highlight, id: selected === item.id ? item.id : undefined }))))))))));
};
exports.CommandArgSelect = CommandArgSelect;