@grandlinex/react-components
Version:
91 lines (90 loc) • 4.52 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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const react_icons_1 = require("@grandlinex/react-icons");
const UserBadge_1 = __importDefault(require("./UserBadge"));
const hooks_1 = require("../../../util/hooks");
const FormElement_1 = require("../../form/FormElement");
const UserSelector = ({ value, onChange, searchFC, placeholder, disabled, list, limit = 20, }) => {
const field = (0, FormElement_1.useFormElContext)();
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 filteredList = (0, react_1.useMemo)(() => list
?.filter((x) => {
if (search === '') {
return true;
}
return (x.userId.includes(search) ||
x.gravatarEmail?.includes(search) ||
x.firstName?.toLowerCase()?.includes(search.toLowerCase()) ||
x.lastName?.toLowerCase().includes(search.toLowerCase()));
})
.slice(0, limit), [list, search, limit]);
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.userId === search) || null;
}
else if (searchFC) {
el = await searchFC(search);
}
else {
el = null;
}
setSelected(el);
onChange?.(el);
}
}
return (react_1.default.createElement("div", { ref: ref, className: "glx-user-block" },
selected ? (react_1.default.createElement("div", { className: "glx-flex-grow-1 glx-pb-8" },
react_1.default.createElement(UserBadge_1.default, { small: true, item: selected, size: "50px" }))) : (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("input", { type: "text", disabled: !!selected || disabled, value: search, placeholder: placeholder, onFocus: () => {
setOpen(true);
field.setFocus(true);
}, onBlur: () => {
field.setFocus(false);
}, onChange: (e) => {
const vol = e.target.value;
setSearch(vol);
} }),
open && filteredList && filteredList.length > 0 ? (react_1.default.createElement("div", { className: "glx-user-block--drawer" }, filteredList.map((e) => (react_1.default.createElement("div", { onClick: () => {
setSelected(e);
onChange?.(e);
} },
react_1.default.createElement(UserBadge_1.default, { small: true, item: e, size: "50px" })))))) : null)),
!filteredList || 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));
};
exports.default = UserSelector;