Sha256: d6e721f898bd9b8355855daf398cad1dedeed99f9939518201004a250de59d7f

Contents?: true

Size: 1.96 KB

Versions: 948

Compression:

Stored size: 1.96 KB

Contents

import React from 'react'
import { Dropdown, User, Badge, FlexItem } from 'playbook-ui'

const DropdownWithAutocomplete = (props) => {

  const options = [
    {
      label: "Jasper Furniss",
      value: "Jasper Furniss",
      territory: "PHL",
      title: "Senior UX Engineer",
      id: "jasper-furniss",
      status: "Offline"
    },
    {
      label: "Ramon Ruiz",
      value: "Ramon Ruiz",
      territory: "PHL",
      title: "Senior UX Designer",
      id: "ramon-ruiz",
      status: "Away"
    },
    {
      label: "Jason Cypret",
      value: "Jason Cypret",
      territory: "PHL",
      title: "VP of User Experience",
      id: "jason-cypret",
      status: "Online"
    },
    {
      label: "Courtney Long",
      value: "Courtney Long",
      territory: "PHL",
      title: "UX Design Mentor",
      id: "courtney-long",
      status: "Online"
    }
  ];


  return (
  <div>
    <Dropdown autocomplete
        options={options}
        {...props}
    >
        {options.map((option) => (
          <Dropdown.Option key={option.id} 
              option={option}
          >
            <>
              <FlexItem>
                <User
                    align="left"
                    avatar
                    name={option.label}
                    orientation="horizontal"
                    territory={option.territory}
                    title={option.title}
                />
              </FlexItem>
              <FlexItem>
                <Badge
                    rounded
                    text={option.status}
                    variant={`${
                        option.status === "Offline"
                        ? "neutral"
                        : option.status === "Online"
                        ? "success"
                        : "warning"
                    }`}
                />
              </FlexItem>
            </>
          </Dropdown.Option>
        ))}
    </Dropdown>
  </div>
  )
}

export default  DropdownWithAutocomplete

Version data entries

948 entries across 948 versions & 2 rubygems

Version Path
playbook_ui_docs-14.11.1.pre.alpha.play1724darkmodeauditmap5437 app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx
playbook_ui-14.11.1.pre.alpha.play1724darkmodeauditmap5437 app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx
playbook_ui_docs-14.11.1.pre.alpha.PBNTR719listdraggablesimple5432 app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx
playbook_ui-14.11.1.pre.alpha.PBNTR719listdraggablesimple5432 app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx
playbook_ui_docs-14.11.1.pre.alpha.PBNTR768stickyrightcolumn5431 app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx
playbook_ui-14.11.1.pre.alpha.PBNTR768stickyrightcolumn5431 app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx
playbook_ui_docs-14.12.0.pre.rc.6 app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx
playbook_ui-14.12.0.pre.rc.6 app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx
playbook_ui_docs-14.11.1.pre.alpha.PBNTR718simiplifieddraggablereact5415 app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx
playbook_ui-14.11.1.pre.alpha.PBNTR718simiplifieddraggablereact5415 app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx
playbook_ui_docs-14.11.1.pre.alpha.play1724darkmodeauditmap5413 app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx
playbook_ui-14.11.1.pre.alpha.play1724darkmodeauditmap5413 app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx
playbook_ui_docs-14.12.0.pre.rc.5 app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx
playbook_ui-14.12.0.pre.rc.5 app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx
playbook_ui_docs-14.11.1.pre.alpha.play1724darkmodeauditmap5409 app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx
playbook_ui-14.11.1.pre.alpha.play1724darkmodeauditmap5409 app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx
playbook_ui_docs-14.11.1.pre.alpha.PBNTR718simiplifieddraggablereact5400 app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx
playbook_ui-14.11.1.pre.alpha.PBNTR718simiplifieddraggablereact5400 app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx
playbook_ui_docs-14.11.1.pre.alpha.PBNTR718simiplifieddraggablereact5392 app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx
playbook_ui-14.11.1.pre.alpha.PBNTR718simiplifieddraggablereact5392 app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx