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

A minimal, easy-to-use and highly adjustable dropdown component made with ReactJS.

{"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/SingleSelect/SingleSelect.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'; // import Dropdown from 'react-kiwi-dropdown'\n\nimport Dropdown from '../../../../src/Dropdown/index';\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 SingleSelect() {\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.value === selectedOption) {\n      setSelectedOption('');\n    } else {\n      setSelectedOption(option.value);\n    }\n  };\n\n  return React.createElement(\"article\", {\n    style: {\n      marginBottom: '80px'\n    },\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 35\n    },\n    __self: this\n  }, React.createElement(\"h2\", {\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 36\n    },\n    __self: this\n  }, \"Single-select\"), React.createElement(Preview, {\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 38\n    },\n    __self: this\n  }, React.createElement(\"aside\", {\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 39\n    },\n    __self: this\n  }, React.createElement(StyledDropdown, {\n    options: options,\n    onChange: onChange,\n    resetValue: '',\n    buttonIndicator: true,\n    selectedOption: selectedOption,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 40\n    },\n    __self: this\n  })), React.createElement(BasketList, {\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 49\n    },\n    __self: this\n  }, fruitBaskets.map((basket, i) => React.createElement(Basket, {\n    key: i,\n    style: {\n      background: selectedOption === basket.type ? '#f0fedf' : '#ddd'\n    },\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 51\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: 62\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: 68\n    },\n    __self: this\n  }, React.createElement(\"pre\", {\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 69\n    },\n    __self: this\n  }, React.createElement(\"code\", {\n    className: \"language-javascript\",\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 70\n    },\n    __self: this\n  }, code))));\n}\n\nexport default SingleSelect;\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/SingleSelect/SingleSelect.js"],"names":["React","useState","styled","code","Dropdown","options","value","content","fruitBaskets","type","text","SingleSelect","showCode","setShowCode","selectedOption","setSelectedOption","onChange","option","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'\n// import Dropdown from 'react-kiwi-dropdown'\nimport Dropdown from '../../../../src/Dropdown/index'\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 SingleSelect() {\n  const [showCode, setShowCode] = useState(false)\n  const [selectedOption, setSelectedOption] = useState('')\n\n  const onChange = option => {\n    if (option.value === selectedOption) {\n      setSelectedOption('')\n    } else {\n      setSelectedOption(option.value)\n    }\n  }\n\n  return (\n    <article style={{ marginBottom: '80px' }}>\n      <h2>Single-select</h2>\n\n      <Preview>\n        <aside>\n          <StyledDropdown\n            options={options}\n            onChange={onChange}\n            resetValue={''}\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 === basket.type ? '#f0fedf' : '#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 SingleSelect\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"}