Sha256: 67e6096eef6b3e5934d37f15ca0ad4616af62be04b962c4fa8d9bedb1e5f7615
Contents?: true
Size: 1.82 KB
Versions: 2
Compression:
Stored size: 1.82 KB
Contents
import React, { useState, useRef } from 'react'
import { Dropdown, useDropdown, CircleIconButton, Icon, Body, FlexItem, Flex } from '../..'
const DropdownWithHook = (props) => {
// eslint-disable-next-line no-unused-vars
const [selectedOption, setSelectedOption] = useState();
const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);
const buttonRef = useRef(null);
const options = [
{
label: "United States",
value: "United States",
areaCode: "+1",
icon: "πΊπΈ",
id: "United-states"
},
{
label: "Canada",
value: "Canada",
areaCode: "+1",
icon: "π¨π¦",
id: "canada"
},
{
label: "Pakistan",
value: "Pakistan",
areaCode: "+92",
icon: "π΅π°",
id: "pakistan"
}
];
return (
<div>
<CircleIconButton
htmlOptions={{ref: buttonRef}}
icon={"flag"}
onClick={() => setIsDropdownClosed(!isDropDownClosed)}
variant="secondary"
/>
<Dropdown
isClosed={isDropDownClosed}
onSelect={(selectedItem) => setSelectedOption(selectedItem)}
options={options}
triggerRef={buttonRef}
{...props}
>
{options.map((option) => (
<Dropdown.Option key={option.id}
option={option}
>
<>
<FlexItem>
<Flex paddingRight='md'>
<Icon icon={option.icon}
paddingRight="xs"
/>
<Body text={option.label} />
</Flex>
</FlexItem>
<FlexItem>
<Body color="light"
text={option.areaCode}
/>
</FlexItem>
</>
</Dropdown.Option>
))}
</Dropdown>
</div>
)
}
export default DropdownWithHook
Version data entries
2 entries across 2 versions & 2 rubygems