react-kiwi-dropdown
Version:
| Name | Type | Description | | --------------------------- | -------------------- | ----------- | | options | array | | selectedOption | string | | onCha
1 lines • 4.74 kB
JSON
{"ast":null,"code":"export const code = \"import React, { useState } from 'react'\\nimport styled from 'styled-components'\\nimport Dropdown from 'react-kiwi-dropdown'\\n\\nconst options = [\\n { value: 'kiwi', content: '\\uD83E\\uDD5D' },\\n { value: 'banana', content: '\\uD83C\\uDF4C' },\\n { value: 'pineapple', content: '\\uD83C\\uDF4D' }\\n]\\n\\nconst fruitBaskets = [\\n { type: 'kiwi', text: '\\uD83E\\uDD5D' },\\n { type: 'banana', text: '\\uD83C\\uDF4C' },\\n { type: 'pineapple', text: '\\uD83C\\uDF4D' },\\n { type: 'kiwi', text: '\\uD83E\\uDD5D' },\\n { type: 'banana', text: '\\uD83C\\uDF4C' },\\n { type: 'pineapple', text: '\\uD83C\\uDF4D' }\\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 <StyledDropdown\\n options={options}\\n onChange={onChange}\\n resetValue={''}\\n buttonIndicator\\n selectedOption={selectedOption}\\n />\\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 )\\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\";","map":{"version":3,"sources":["/Users/kimvigren/Documents/git/react-kiwi-dropdown/test/src/examples/SingleSelect/code.js"],"names":["code"],"mappings":"AAAA,OAAO,MAAMA,IAAI,0oEAAV","sourcesContent":["export const code = `import React, { useState } from 'react'\nimport styled from 'styled-components'\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 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 <StyledDropdown\n options={options}\n onChange={onChange}\n resetValue={''}\n buttonIndicator\n selectedOption={selectedOption}\n />\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 )\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`\n"]},"metadata":{},"sourceType":"module"}