react-kiwi-dropdown
Version:
| Name | Type | Description | | --------------------------- | -------------------- | ----------- | | options | array | | selectedOption | string | | onCha
2 lines • 8.04 kB
JavaScript
(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{12:function(e,t){e.exports="data:image/png;base64,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"},16:function(e,t,n){e.exports=n(30)},21:function(e,t,n){},22:function(e,t,n){},30:function(e,t,n){"use strict";n.r(t);var a=n(0),i=n.n(a),l=n(7),o=n.n(l),c=(n(21),n(13)),s=n(8),r=n.n(s),x=(n(22),"import React, { useState, useEffect } from 'react'\nimport Dropdown from 'react-kiwi-dropdown'\nimport logo from './images/icons8-kiwi-80.png'\n\nconst options = [\n { value: 'kiwi', text: 'Select kiwis' },\n { value: 'banana', text: 'Select bananas' },\n { value: 'pineapple', text: 'Select pineapples' }\n]\n\nconst fruitBaskets = [\n { type: 'kiwi', text: 'Basket #1' },\n { type: 'banana', text: 'Basket #2' },\n { type: 'pineapple', text: 'Basket #3' },\n { type: 'kiwi', text: 'Basket #4' },\n { type: 'banana', text: 'Basket #5' },\n { type: 'pineapple', text: 'Basket #6' }\n]\n\nfunction App() {\n const [selectedOption, setSelectedOption] = useState('')\n\n useEffect(() => {\n Prism.highlightAll()\n }, [])\n\n const onChange = selectedOption => {\n setSelectedOption(selectedOption)\n }\n\n return (\n <div style={{ width: '1000px', margin: '0 auto' }}>\n <header style={{ display: 'flex', alignItems: 'baseline' }}>\n <img alt=\"icons8-kiwi-80.png\" src={logo} />\n <h1>react-kiwi-dropdown</h1>\n </header>\n\n <h2>Example #1</h2>\n <section style={{ display: 'flex' }}>\n <section style={{ display: 'flex' }}>\n <aside style={{ marginRight: '40px' }}>\n <Dropdown\n options={options}\n onChange={onChange}\n buttonIndicator\n selectedOption={selectedOption}\n checkedButtonIndicatorStyle={`background: #000;`}\n />\n </aside>\n <main>\n <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>\n {fruitBaskets.map((basket, i) => (\n <li\n key={i}\n style={{\n fontWeight:\n selectedOption === basket.type ? 'bold' : 'normal'\n }}\n >\n {basket.text}\n </li>\n ))}\n </ul>\n </main>\n </section>\n </section>\n </div>\n )\n}\n\nexport default App\n"),p=n(9),y=n.n(p),m=n(12),I=n.n(m),u=[{value:"kiwi",text:"Select kiwis"},{value:"banana",text:"Select bananas"},{value:"pineapple",text:"Select pineapples"}],k=[{type:"kiwi",text:"Basket #1"},{type:"banana",text:"Basket #2"},{type:"pineapple",text:"Basket #3"},{type:"kiwi",text:"Basket #4"},{type:"banana",text:"Basket #5"},{type:"pineapple",text:"Basket #6"}];var d=function(){var e=Object(a.useState)(""),t=Object(c.a)(e,2),n=t[0],l=t[1];return Object(a.useEffect)(function(){r.a.highlightAll()},[]),i.a.createElement("div",{style:{width:"1000px",margin:"0 auto"}},i.a.createElement("header",{style:{display:"flex",alignItems:"baseline"}},i.a.createElement("img",{alt:"icons8-kiwi-80.png",src:I.a}),i.a.createElement("h1",null,"react-kiwi-dropdown")),i.a.createElement("h2",null,"Example #1"),i.a.createElement("section",{style:{display:"flex"}},i.a.createElement("aside",{style:{marginRight:"40px"}},i.a.createElement(y.a,{options:u,onChange:function(e){l(e)},buttonIndicator:!0,selectedOption:n,checkedButtonIndicatorStyle:"background: #000;"})),i.a.createElement("main",null,i.a.createElement("ul",{style:{listStyle:"none",margin:0,padding:0}},k.map(function(e,t){return i.a.createElement("li",{key:t,style:{fontWeight:n===e.type?"bold":"normal"}},e.text)})))),i.a.createElement("pre",null,i.a.createElement("code",{className:"language-javascript"},x)))};Boolean("localhost"===window.location.hostname||"[::1]"===window.location.hostname||window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/));o.a.render(i.a.createElement(d,null),document.getElementById("root")),"serviceWorker"in navigator&&navigator.serviceWorker.ready.then(function(e){e.unregister()})}},[[16,1,2]]]);
//# sourceMappingURL=main.cf96c180.chunk.js.map