react-kiwi-dropdown
Version:
| Name | Type | Description | | --------------------------- | -------------------- | ----------- | | options | array | | selectedOption | string | | onCha
1 lines • 3.42 kB
JSON
{"ast":null,"code":"\"use strict\";\n\nvar __importStar = this && this.__importStar || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];\n result[\"default\"] = mod;\n return result;\n};\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar react_1 = __importStar(require(\"react\"));\n\nrequire(\"./Dropdown.css\");\n\nrequire(\"./arrows.css\");\n\nvar Dropdown = function (_a) {\n var options = _a.options,\n selectedOption = _a.selectedOption,\n resetValue = _a.resetValue,\n onChange = _a.onChange,\n buttonLabel = _a.buttonLabel,\n buttonIndicator = _a.buttonIndicator,\n buttonIndicatorContent = _a.buttonIndicatorContent,\n buttonArrow = _a.buttonArrow,\n selectedOptionIcon = _a.selectedOptionIcon,\n className = _a.className;\n\n var _b = react_1.useState(false),\n showOptions = _b[0],\n setShowOptions = _b[1];\n\n var refDropdown = react_1.useRef(null);\n var refButtonIndicator = react_1.useRef(null);\n react_1.useEffect(function () {\n if (showOptions) {\n document.addEventListener('click', handleClick);\n return function () {\n document.removeEventListener('click', handleClick);\n };\n }\n }, [showOptions]);\n\n var handleClick = function (e) {\n if (refDropdown && refDropdown.current && refDropdown.current.contains(e.target)) {\n return;\n }\n\n setShowOptions(false);\n };\n\n var toggleOptions = function (e) {\n if (selectedOption && refButtonIndicator && refButtonIndicator.current && refButtonIndicator.current.contains(e.target)) {\n return;\n }\n\n setShowOptions(function (prevShowOptions) {\n return !prevShowOptions;\n });\n };\n\n return react_1.default.createElement(\"div\", {\n className: className\n }, react_1.default.createElement(\"button\", {\n onClick: function (e) {\n return toggleOptions(e);\n },\n id: \"KIWI-button\"\n }, buttonIndicator && react_1.default.createElement(\"span\", {\n ref: refButtonIndicator,\n className: \"KIWI-button-indicator \" + (selectedOption ? 'selected' : ''),\n onClick: function () {\n return selectedOption && onChange(resetValue);\n }\n }, buttonIndicatorContent), buttonLabel && buttonLabel, buttonArrow === 'double' && react_1.default.createElement(\"span\", {\n className: \"KIWI-double-arrow\"\n }), !buttonArrow && react_1.default.createElement(\"span\", {\n className: \"KIWI-single-arrow\"\n })), showOptions && react_1.default.createElement(\"ul\", {\n ref: refDropdown,\n id: \"KIWI-option-list\"\n }, options.map(function (option) {\n return react_1.default.createElement(\"li\", {\n key: option.value\n }, react_1.default.createElement(\"button\", {\n className: \"KIWI-option \" + (selectedOption === option.value || selectedOption && selectedOption.length && selectedOption.includes(option.value) ? 'selected' : ''),\n onClick: function () {\n return onChange(option);\n }\n }, option.icon, react_1.default.createElement(\"span\", {\n style: {\n opacity: selectedOption === option.value ? 1 : 0\n }\n }, selectedOptionIcon), option.content));\n })));\n};\n\nexports.default = Dropdown;","map":null,"metadata":{},"sourceType":"script"}