Sha256: c56178fe7cb946a579a8df3efbe961f5ff3835b106ccfb1cc8c986bc01dd479b

Contents?: true

Size: 1.82 KB

Versions: 2

Compression:

Stored size: 1.82 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>
        {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

2 entries across 2 versions & 2 rubygems

Version Path
playbook_ui_docs-13.24.0.pre.alpha.PBNTR261NewKitDropdown2681 app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx
playbook_ui-13.24.0.pre.alpha.PBNTR261NewKitDropdown2681 app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx