react-kiwi-dropdown/test/node_modules/.cache/babel-loader/b851779cd6963aff5a38fefe766043a2.json

| Name | Type | Description | | --------------------------- | -------------------- | ----------- | | options | array | | selectedOption | string | | onCha

{"ast":null,"code":"import _slicedToArray from \"/Users/kimvigren/Documents/git/react-kiwi-dropdown/test/node_modules/@babel/runtime/helpers/esm/slicedToArray\";\nvar _jsxFileName = \"/Users/kimvigren/Documents/git/react-kiwi-dropdown/test/src/Dropdown/index.tsx\";\nimport React, { useState, useEffect, useRef } from 'react';\nimport './Dropdown.css';\nimport './arrows.css';\n\nconst Dropdown = ({\n  options,\n  selectedOption,\n  resetValue,\n  onChange,\n  buttonLabel,\n  buttonIndicator,\n  buttonIndicatorContent,\n  buttonArrow,\n  selectedOptionIcon,\n  className\n}) => {\n  const _useState = useState(false),\n        _useState2 = _slicedToArray(_useState, 2),\n        showOptions = _useState2[0],\n        setShowOptions = _useState2[1];\n\n  const refDropdown = useRef(null);\n  const refButtonIndicator = useRef(null);\n  useEffect(() => {\n    if (showOptions) {\n      document.addEventListener('click', handleClick);\n      return () => {\n        document.removeEventListener('click', handleClick);\n      };\n    }\n  }, [showOptions]);\n\n  const handleClick = e => {\n    if (refDropdown && refDropdown.current && refDropdown.current.contains(e.target)) {\n      return;\n    }\n\n    setShowOptions(false);\n  };\n\n  const toggleOptions = e => {\n    if (selectedOption && refButtonIndicator && refButtonIndicator.current && refButtonIndicator.current.contains(e.target)) {\n      return;\n    }\n\n    setShowOptions(prevShowOptions => !prevShowOptions);\n  };\n\n  return React.createElement(\"div\", {\n    className: className,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 74\n    },\n    __self: this\n  }, React.createElement(\"button\", {\n    onClick: e => toggleOptions(e),\n    className: \"KIWI-button\",\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 75\n    },\n    __self: this\n  }, buttonIndicator && React.createElement(\"span\", {\n    ref: refButtonIndicator,\n    className: \"KIWI-button-indicator \".concat(selectedOption && selectedOption.length ? 'selected' : ''),\n    onClick: () => selectedOption && onChange(resetValue),\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 77\n    },\n    __self: this\n  }, buttonIndicatorContent), buttonLabel && buttonLabel, buttonArrow === 'double' && React.createElement(\"span\", {\n    className: \"KIWI-double-arrow\",\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 88\n    },\n    __self: this\n  }), !buttonArrow && React.createElement(\"span\", {\n    className: \"KIWI-single-arrow\",\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 89\n    },\n    __self: this\n  })), showOptions && React.createElement(\"ul\", {\n    ref: refDropdown,\n    className: \"KIWI-option-list\",\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 92\n    },\n    __self: this\n  }, options.map(option => React.createElement(\"li\", {\n    key: option.value,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 94\n    },\n    __self: this\n  }, React.createElement(\"button\", {\n    className: \"KIWI-option \".concat(selectedOption === option.value || selectedOption && selectedOption.length && selectedOption.includes(option.value) ? 'selected' : ''),\n    onClick: () => onChange(option),\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 95\n    },\n    __self: this\n  }, option.icon, React.createElement(\"span\", {\n    style: {\n      opacity: selectedOption === option.value ? 1 : 0\n    },\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 107\n    },\n    __self: this\n  }, selectedOptionIcon), option.content)))));\n};\n\nexport default Dropdown;","map":{"version":3,"sources":["/Users/kimvigren/Documents/git/react-kiwi-dropdown/test/src/Dropdown/index.tsx"],"names":["React","useState","useEffect","useRef","Dropdown","options","selectedOption","resetValue","onChange","buttonLabel","buttonIndicator","buttonIndicatorContent","buttonArrow","selectedOptionIcon","className","showOptions","setShowOptions","refDropdown","refButtonIndicator","document","addEventListener","handleClick","removeEventListener","e","current","contains","target","toggleOptions","prevShowOptions","length","map","option","value","includes","icon","opacity","content"],"mappings":"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","sourcesContent":["import React, { useState, useEffect, useRef } from 'react'\nimport './Dropdown.css'\nimport './arrows.css'\n\ninterface Option {\n  value: string\n  content: any\n  icon?: any\n}\n\ninterface Dropdown {\n  options: Option[]\n  selectedOption?: string | string[]\n  resetValue?: any\n  onChange: (selectedOption: any) => void\n  buttonLabel?: string\n  buttonIndicator?: boolean\n  buttonIndicatorContent?: any\n  buttonArrow?: 'single' | 'double'\n  selectedOptionIcon?: any\n  className?: string\n}\n\nconst Dropdown: React.FC<Dropdown> = ({\n  options,\n  selectedOption,\n  resetValue,\n  onChange,\n  buttonLabel,\n  buttonIndicator,\n  buttonIndicatorContent,\n  buttonArrow,\n  selectedOptionIcon,\n  className\n}) => {\n  const [showOptions, setShowOptions] = useState<boolean>(false)\n  const refDropdown = useRef<HTMLUListElement>(null)\n  const refButtonIndicator = useRef<HTMLSpanElement>(null)\n\n  useEffect(() => {\n    if (showOptions) {\n      document.addEventListener('click', handleClick)\n      return () => {\n        document.removeEventListener('click', handleClick)\n      }\n    }\n  }, [showOptions])\n\n  const handleClick = (e: any) => {\n    if (\n      refDropdown &&\n      refDropdown.current &&\n      refDropdown.current.contains(e.target)\n    ) {\n      return\n    }\n\n    setShowOptions(false)\n  }\n\n  const toggleOptions = (e: any) => {\n    if (\n      selectedOption &&\n      refButtonIndicator &&\n      refButtonIndicator.current &&\n      refButtonIndicator.current.contains(e.target)\n    ) {\n      return\n    }\n    setShowOptions(prevShowOptions => !prevShowOptions)\n  }\n\n  return (\n    <div className={className}>\n      <button onClick={e => toggleOptions(e)} className=\"KIWI-button\">\n        {buttonIndicator && (\n          <span\n            ref={refButtonIndicator}\n            className={`KIWI-button-indicator ${\n              selectedOption && selectedOption.length ? 'selected' : ''\n            }`}\n            onClick={() => selectedOption && onChange(resetValue)}\n          >\n            {buttonIndicatorContent}\n          </span>\n        )}\n        {buttonLabel && buttonLabel}\n        {buttonArrow === 'double' && <span className=\"KIWI-double-arrow\" />}\n        {!buttonArrow && <span className=\"KIWI-single-arrow\" />}\n      </button>\n      {showOptions && (\n        <ul ref={refDropdown} className=\"KIWI-option-list\">\n          {options.map(option => (\n            <li key={option.value}>\n              <button\n                className={`KIWI-option ${\n                  selectedOption === option.value ||\n                  (selectedOption &&\n                    selectedOption.length &&\n                    selectedOption.includes(option.value))\n                    ? 'selected'\n                    : ''\n                }`}\n                onClick={() => onChange(option)}\n              >\n                {option.icon}\n                <span\n                  style={{\n                    opacity: selectedOption === option.value ? 1 : 0\n                  }}\n                >\n                  {selectedOptionIcon}\n                </span>\n\n                {option.content}\n              </button>\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  )\n}\n\nexport default Dropdown\n"]},"metadata":{},"sourceType":"module"}