@enclavemoney/enclave-wallet-sdk
Version:
A simple enclave wallet SDK for React applications
145 lines (144 loc) • 7.08 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MultiSelect = void 0;
var react_1 = __importStar(require("react"));
var lucide_react_1 = require("lucide-react");
var MultiSelect = function (_a) {
var options = _a.options, value = _a.value, onChange = _a.onChange, _b = _a.placeholder, placeholder = _b === void 0 ? "Select options" : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.style, style = _d === void 0 ? {} : _d, _e = _a.singleSelect, singleSelect = _e === void 0 ? false : _e;
var _f = (0, react_1.useState)(false), isOpen = _f[0], setIsOpen = _f[1];
var _g = (0, react_1.useState)(null), hoveredOption = _g[0], setHoveredOption = _g[1];
var dropdownRef = (0, react_1.useRef)(null);
(0, react_1.useEffect)(function () {
var handleClickOutside = function (event) {
if (dropdownRef.current &&
!dropdownRef.current.contains(event.target)) {
setIsOpen(false);
}
};
document.addEventListener("mousedown", handleClickOutside);
return function () { return document.removeEventListener("mousedown", handleClickOutside); };
}, []);
var handleSelect = function (optionValue) {
if (singleSelect) {
onChange([optionValue]);
setIsOpen(false);
}
else {
if (value.includes(optionValue)) {
onChange(value.filter(function (v) { return v !== optionValue; }));
}
else {
onChange(__spreadArray(__spreadArray([], value, true), [optionValue], false));
}
}
};
var removeOption = function (optionValue) {
onChange(value.filter(function (v) { return v !== optionValue; }));
};
return (react_1.default.createElement("div", { ref: dropdownRef, style: __assign({ position: "relative", width: "100%", fontFamily: "Inter, sans-serif" }, style) },
react_1.default.createElement("div", { onClick: function () { return !disabled && setIsOpen(!isOpen); }, style: {
border: "1px solid #D5D7DA",
background: disabled ? "#F5F5F5" : "#fff",
borderRadius: 8,
minHeight: 48,
padding: "0px 16px",
cursor: disabled ? "not-allowed" : "pointer",
display: "flex",
flexWrap: "wrap",
gap: 8,
alignItems: "center",
} },
value.length === 0 ? (react_1.default.createElement("span", { style: { color: "#A0A4AB", fontSize: 16 } }, placeholder)) : (value.map(function (selectedValue) {
var _a;
return (react_1.default.createElement("div", { key: selectedValue, style: {
background: "#E7F4FE",
padding: "4px 8px",
borderRadius: 4,
display: "flex",
alignItems: "center",
gap: 4,
fontSize: 14,
color: "#3662E3",
} },
react_1.default.createElement("span", null, (_a = options.find(function (opt) { return opt.value === selectedValue; })) === null || _a === void 0 ? void 0 : _a.label),
!singleSelect && (react_1.default.createElement(lucide_react_1.X, { size: 14, style: { cursor: "pointer" }, onClick: function (e) {
e.stopPropagation();
removeOption(selectedValue);
} }))));
})),
react_1.default.createElement(lucide_react_1.ChevronDown, { size: 20, style: {
marginLeft: "auto",
color: "#A0A4AB",
transform: isOpen ? "rotate(180deg)" : "none",
transition: "transform 0.2s",
} })),
isOpen && (react_1.default.createElement("div", { style: {
position: "absolute",
top: "100%",
left: 0,
right: 0,
background: "#fff",
border: "1px solid #D5D7DA",
borderRadius: 8,
marginTop: 4,
maxHeight: 200,
overflowY: "auto",
zIndex: 1000,
boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
} }, options.map(function (option) { return (react_1.default.createElement("div", { key: option.value, onClick: function () { return handleSelect(option.value); }, onMouseEnter: function () { return setHoveredOption(option.value); }, onMouseLeave: function () { return setHoveredOption(null); }, style: {
padding: "12px 16px",
cursor: "pointer",
background: value.includes(option.value)
? "#F0F4FF"
: hoveredOption === option.value
? "#F5F5F5"
: "transparent",
color: value.includes(option.value) ? "#175CD3" : "#414651",
fontSize: 16,
fontWeight: value.includes(option.value) ? 500 : 400,
} }, option.label)); })))));
};
exports.MultiSelect = MultiSelect;