Sha256: 3ae1d85faff087e4da17f1cbe47d6c0135d6b9304da0faa9f3b0d87d0f881b25
Contents?: true
Size: 1.83 KB
Versions: 4
Compression:
Stored size: 1.83 KB
Contents
import React, { useState } from 'react'
import { Dropdown, Icon, Body, FlexItem, Flex, IconCircle } from '../..'
const DropdownWithCustomTrigger = (props) => {
const [selectedOption, setSelectedOption] = useState();
const options = [
{
label: "United States",
value: "United States",
areaCode: "+1",
icon: "πΊπΈ",
id: "United-states"
},
{
label: "Ukraine",
value: "Ukraine",
areaCode: "+380",
icon: "πΊπ¦",
id: "ukraine"
},
{
label: "Pakistan",
value: "Pakistan",
areaCode: "+92",
icon: "π΅π°",
id: "pakistan"
}
];
return (
<div>
<Dropdown
onSelect={(selectedItem) => setSelectedOption(selectedItem)}
options={options}
{...props}
>
<Dropdown.Trigger>
<div key={selectedOption ? selectedOption.icon : "flag"}>
<IconCircle
cursor="pointer"
icon={selectedOption ? selectedOption.icon : "flag"}
variant="royal"
/>
</div>
</Dropdown.Trigger>
<Dropdown.Container maxWidth="xs">
{options.map((option) => (
<Dropdown.Option key={option.id}
option={option}
>
<>
<FlexItem>
<Flex>
<Icon icon={option.icon}
paddingRight="xs"
/>
<Body text={option.label} />
</Flex>
</FlexItem>
<FlexItem>
<Body color="light"
text={option.areaCode}
/>
</FlexItem>
</>
</Dropdown.Option>
))}
</Dropdown.Container>
</Dropdown>
</div>
)
}
export default DropdownWithCustomTrigger
Version data entries
4 entries across 4 versions & 2 rubygems