@grandlinex/react-components
Version:
146 lines (145 loc) • 6.27 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SmartInput = SmartInput;
const react_1 = __importStar(require("react"));
const react_icons_1 = require("@grandlinex/react-icons");
const lib_1 = require("../lib");
const hooks_1 = require("../../util/hooks");
const Grid_1 = require("../Grid/Grid");
function SmartInput(prop) {
const { value, max, onChange, searchFC, placeholder, disabled, list, className, style, onType, } = prop;
const [selected, setSelected] = (0, react_1.useState)(value || null);
const [search, setSearch] = (0, react_1.useState)('');
const [open, setOpen] = (0, react_1.useState)(false);
const [pos, setPos] = (0, react_1.useState)(-1);
const iRef = (0, react_1.createRef)();
let filteredList = list?.filter((x) => {
if (search === '') {
return true;
}
return (x.key.includes(search) ||
x.title?.toLowerCase().includes(search.toLowerCase()) ||
x.detail?.toLowerCase().includes(search.toLowerCase()));
}) || [];
if (max !== undefined && filteredList) {
filteredList = filteredList.slice(0, max);
}
const ref = (0, hooks_1.useAutoClose)(() => setOpen(false), false);
async function selectFc() {
if (selected) {
setSelected(null);
onChange?.(null);
}
else {
let el;
if (list) {
el = list.find((e) => e.key === search) || null;
}
else if (searchFC) {
el = await searchFC(search);
}
else {
el = null;
}
setSelected(el);
onChange?.(el);
}
}
function keyListener(e) {
if (selected) {
return;
}
if (e.key === 'Escape') {
iRef.current?.blur();
setOpen(false);
}
else if (e.key === 'Enter') {
if (pos >= 0 && pos < filteredList.length) {
setSelected(filteredList[pos]);
onChange?.(filteredList[pos]);
setPos(-1);
}
if (pos === -1 && filteredList.length > 0) {
setSelected(filteredList[0]);
onChange?.(filteredList[0]);
}
}
else if (e.key === 'ArrowDown') {
e.preventDefault();
if (pos < filteredList.length - 1) {
if (pos === -1) {
iRef.current?.blur();
}
setPos(pos + 1);
}
}
else if (e.key === 'ArrowUp') {
e.preventDefault();
if (pos >= 0) {
if (pos === 0) {
iRef.current?.focus();
}
setPos(pos - 1);
}
}
}
(0, react_1.useEffect)(() => {
if (!searchFC) {
document.addEventListener('keydown', keyListener);
}
return () => {
if (!searchFC) {
document.removeEventListener('keydown', keyListener);
}
};
});
return (react_1.default.createElement("div", { ref: ref, style: (0, lib_1.styleM)(style), className: (0, lib_1.classN)([
'glx-smart-input',
'glx-default-text',
[!!searchFC, 'glx-smart-input--search'],
], className) },
selected ? (react_1.default.createElement(Grid_1.Grid, { className: "glx-flex-grow-1", flex: true, flexR: true, gap: 8, vCenter: true },
(0, lib_1.renderIcon)(selected.icon),
" ",
selected.title)) : (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("input", { ref: iRef, type: "text", disabled: !!selected || disabled, value: search, placeholder: placeholder, onFocus: () => {
setPos(-1);
setOpen(true);
}, onChange: (e) => {
const vol = e.target.value;
setSearch(vol);
onType?.(vol);
} }),
open && filteredList && filteredList.length > 0 ? (react_1.default.createElement("div", { className: "glx-user-block--drawer" }, filteredList.map((e, i) => (react_1.default.createElement(Grid_1.Grid, { className: [[i === pos, 'option-element-active']], flex: true, flexR: true, gap: 8, vCenter: true, onClick: () => {
setSelected(e);
onChange?.(e);
} },
(0, lib_1.renderIcon)(e.icon),
react_1.default.createElement(Grid_1.Grid, { flex: true, flexC: true, gap: 4 },
react_1.default.createElement("div", null, e.title),
e.detail ? (react_1.default.createElement("div", { className: "smart-detail" }, e.detail)) : null)))))) : null)),
searchFC || selected ? (react_1.default.createElement("button", { type: "button", className: "glx-icon-button", onClick: selectFc }, selected ? (react_1.default.createElement(react_icons_1.IOClose, { size: react_icons_1.ISize.SL })) : (react_1.default.createElement(react_icons_1.IOSearch, { size: react_icons_1.ISize.SL })))) : null));
}