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

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

{"ast":null,"code":"import _taggedTemplateLiteral from \"/Users/kimvigren/Documents/git/react-kiwi-dropdown/test/node_modules/@babel/runtime/helpers/esm/taggedTemplateLiteral\";\nimport _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/examples/MultiSelect/MultiSelect.js\";\n\nfunction _templateObject4() {\n  const data = _taggedTemplateLiteral([\"\\n  .KIWI-button-indicator {\\n    &.selected {\\n      background: #f0fedf;\\n    }\\n  }\\n\\n  .KIWI-option {\\n    font-size: 40px;\\n\\n    &:focus,\\n    &:active {\\n      outline: none;\\n    }\\n\\n    &.selected {\\n      background: #f0fedf;\\n    }\\n\\n    &:hover {\\n      background: #ddd;\\n    }\\n  }\\n\"]);\n\n  _templateObject4 = function () {\n    return data;\n  };\n\n  return data;\n}\n\nfunction _templateObject3() {\n  const data = _taggedTemplateLiteral([\"\\n  display: flex;\\n  justify-content: center;\\n  align-items: center;\\n  height: 80px;\\n  width: 80px;\\n  font-size: 50px;\\n  margin: 5px;\\n  border-radius: 50%;\\n\"]);\n\n  _templateObject3 = function () {\n    return data;\n  };\n\n  return data;\n}\n\nfunction _templateObject2() {\n  const data = _taggedTemplateLiteral([\"\\n  flex: 1;\\n  display: flex;\\n  flex-wrap: wrap;\\n  list-style: none;\\n  margin: 0;\\n  padding: 0%;\\n\"]);\n\n  _templateObject2 = function () {\n    return data;\n  };\n\n  return data;\n}\n\nfunction _templateObject() {\n  const data = _taggedTemplateLiteral([\"\\n  display: flex;\\n\\n  aside {\\n    flex: 1;\\n  }\\n\"]);\n\n  _templateObject = function () {\n    return data;\n  };\n\n  return data;\n}\n\nimport React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { code } from './code';\nimport Dropdown from 'react-kiwi-dropdown';\nconst options = [{\n  value: 'kiwi',\n  content: '🥝'\n}, {\n  value: 'banana',\n  content: '🍌'\n}, {\n  value: 'pineapple',\n  content: '🍍'\n}];\nconst fruitBaskets = [{\n  type: 'kiwi',\n  text: '🥝'\n}, {\n  type: 'banana',\n  text: '🍌'\n}, {\n  type: 'pineapple',\n  text: '🍍'\n}, {\n  type: 'kiwi',\n  text: '🥝'\n}, {\n  type: 'banana',\n  text: '🍌'\n}, {\n  type: 'pineapple',\n  text: '🍍'\n}];\n\nfunction MultiSelect() {\n  const _useState = useState(false),\n        _useState2 = _slicedToArray(_useState, 2),\n        showCode = _useState2[0],\n        setShowCode = _useState2[1];\n\n  const _useState3 = useState([]),\n        _useState4 = _slicedToArray(_useState3, 2),\n        selectedOption = _useState4[0],\n        setSelectedOption = _useState4[1];\n\n  const onChange = option => {\n    if (!option) {\n      setSelectedOption([]);\n      return;\n    }\n\n    if (selectedOption.includes(option.value)) {\n      const newOptions = selectedOption.filter(oldOption => oldOption !== option.value);\n      setSelectedOption(newOptions);\n    } else {\n      setSelectedOption([...selectedOption, option.value]);\n    }\n  };\n\n  return React.createElement(\"article\", {\n    style: {\n      marginBottom: '80px'\n    },\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 42\n    },\n    __self: this\n  }, React.createElement(\"h2\", {\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 43\n    },\n    __self: this\n  }, \"Multi-select\"), React.createElement(Preview, {\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 45\n    },\n    __self: this\n  }, React.createElement(\"aside\", {\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 46\n    },\n    __self: this\n  }, React.createElement(StyledDropdown, {\n    options: options,\n    onChange: onChange,\n    resetValue: null,\n    buttonIndicator: true,\n    selectedOption: selectedOption,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 47\n    },\n    __self: this\n  })), React.createElement(BasketList, {\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 56\n    },\n    __self: this\n  }, fruitBaskets.map((basket, i) => React.createElement(Basket, {\n    key: i,\n    style: {\n      background: selectedOption.includes(basket.type) ? '#f0fedf' : '#ddd'\n    },\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 58\n    },\n    __self: this\n  }, basket.text)))), React.createElement(\"div\", {\n    style: {\n      fontSize: '20px',\n      fontWeight: 'bold',\n      color: '#88C747'\n    },\n    onClick: () => setShowCode(showCode => !showCode),\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 71\n    },\n    __self: this\n  }, \"Show code\"), React.createElement(\"div\", {\n    style: {\n      display: showCode ? 'block' : 'none'\n    },\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 77\n    },\n    __self: this\n  }, React.createElement(\"pre\", {\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 78\n    },\n    __self: this\n  }, React.createElement(\"code\", {\n    className: \"language-javascript\",\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 79\n    },\n    __self: this\n  }, code))));\n}\n\nexport default MultiSelect;\nconst Preview = styled.div(_templateObject());\nconst BasketList = styled.ul(_templateObject2());\nconst Basket = styled.li(_templateObject3());\nconst StyledDropdown = styled(Dropdown)(_templateObject4());","map":{"version":3,"sources":["/Users/kimvigren/Documents/git/react-kiwi-dropdown/test/src/examples/MultiSelect/MultiSelect.js"],"names":["React","useState","styled","code","Dropdown","options","value","content","fruitBaskets","type","text","MultiSelect","showCode","setShowCode","selectedOption","setSelectedOption","onChange","option","includes","newOptions","filter","oldOption","marginBottom","map","basket","i","background","fontSize","fontWeight","color","display","Preview","div","BasketList","ul","Basket","li","StyledDropdown"],"mappings":"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","sourcesContent":["import React, { useState } from 'react'\nimport styled from 'styled-components'\nimport { code } from './code'\nimport Dropdown from 'react-kiwi-dropdown'\n\nconst options = [\n  { value: 'kiwi', content: '🥝' },\n  { value: 'banana', content: '🍌' },\n  { value: 'pineapple', content: '🍍' }\n]\n\nconst fruitBaskets = [\n  { type: 'kiwi', text: '🥝' },\n  { type: 'banana', text: '🍌' },\n  { type: 'pineapple', text: '🍍' },\n  { type: 'kiwi', text: '🥝' },\n  { type: 'banana', text: '🍌' },\n  { type: 'pineapple', text: '🍍' }\n]\n\nfunction MultiSelect() {\n  const [showCode, setShowCode] = useState(false)\n  const [selectedOption, setSelectedOption] = useState([])\n\n  const onChange = option => {\n    if (!option) {\n      setSelectedOption([])\n      return\n    }\n\n    if (selectedOption.includes(option.value)) {\n      const newOptions = selectedOption.filter(\n        oldOption => oldOption !== option.value\n      )\n      setSelectedOption(newOptions)\n    } else {\n      setSelectedOption([...selectedOption, option.value])\n    }\n  }\n\n  return (\n    <article style={{ marginBottom: '80px' }}>\n      <h2>Multi-select</h2>\n\n      <Preview>\n        <aside>\n          <StyledDropdown\n            options={options}\n            onChange={onChange}\n            resetValue={null}\n            buttonIndicator\n            selectedOption={selectedOption}\n          />\n        </aside>\n\n        <BasketList>\n          {fruitBaskets.map((basket, i) => (\n            <Basket\n              key={i}\n              style={{\n                background: selectedOption.includes(basket.type)\n                  ? '#f0fedf'\n                  : '#ddd'\n              }}\n            >\n              {basket.text}\n            </Basket>\n          ))}\n        </BasketList>\n      </Preview>\n      <div\n        style={{ fontSize: '20px', fontWeight: 'bold', color: '#88C747' }}\n        onClick={() => setShowCode(showCode => !showCode)}\n      >\n        Show code\n      </div>\n      <div style={{ display: showCode ? 'block' : 'none' }}>\n        <pre>\n          <code className=\"language-javascript\">{code}</code>\n        </pre>\n      </div>\n    </article>\n  )\n}\n\nexport default MultiSelect\n\nconst Preview = styled.div`\n  display: flex;\n\n  aside {\n    flex: 1;\n  }\n`\n\nconst BasketList = styled.ul`\n  flex: 1;\n  display: flex;\n  flex-wrap: wrap;\n  list-style: none;\n  margin: 0;\n  padding: 0%;\n`\n\nconst Basket = styled.li`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 80px;\n  width: 80px;\n  font-size: 50px;\n  margin: 5px;\n  border-radius: 50%;\n`\n\nconst StyledDropdown = styled(Dropdown)`\n  .KIWI-button-indicator {\n    &.selected {\n      background: #f0fedf;\n    }\n  }\n\n  .KIWI-option {\n    font-size: 40px;\n\n    &:focus,\n    &:active {\n      outline: none;\n    }\n\n    &.selected {\n      background: #f0fedf;\n    }\n\n    &:hover {\n      background: #ddd;\n    }\n  }\n`\n"]},"metadata":{},"sourceType":"module"}