Dropdown

render(
  <Dropdown icon={{ name: 'cog' }} title="Folder settings" variant="outline">
    <Dropdown.Item onSelect={() => console.log('edit folder')}>
      Edit Folder
    </Dropdown.Item>
    <Dropdown.Item onSelect={() => console.log('add folder')}>
      Add Folder
    </Dropdown.Item>
  </Dropdown>
)

render(
  <Dropdown title="Links" size="sm" variant="outline">
    <Dropdown.Link to="http://planning.center" external>
      Planning Center
    </Dropdown.Link>
    <Dropdown.Link to="https://reactjs.org" external>
      React Docs
    </Dropdown.Link>
  </Dropdown>
)

render(() => {
  const [previous, setPrevious] = React.useState(0)
  const [future, setFuture] = React.useState(4)
  return (
    <Group>
      <Button title="Matrix" size="xs" />
      <Dropdown aria-label="Matrix options" size="xs">
        <StackView width={28} padding={1} spacing={1}>
          <StackView
            as="label"
            axis="horizontal"
            alignment="center"
            distribution="space-between"
            spacing={1}
          >
            <Text>Past plans to load</Text>
            <NumberField
              size="xs"
              minWidth="49px"
              value={previous}
              min={0}
              onChange={(value) => setPrevious(value)}
            />
          </StackView>
          <StackView
            as="label"
            axis="horizontal"
            alignment="center"
            distribution="space-between"
            spacing={1}
          >
            <Text>Future plans to load</Text>
            <NumberField
              size="xs"
              minWidth="49px"
              value={future}
              min={0}
              onChange={(value) => setFuture(value)}
            />
          </StackView>
        </StackView>
      </Dropdown>
    </Group>
  )
})

render(() => {
  const [loading, setLoading] = React.useState(false)
  return (
    <Dropdown
      title="Lazy Items"
      spinner={loading}
      onOpen={() => {
        setLoading(true)
        setTimeout(() => {
          setLoading(false)
        }, 2000)
      }}
      onSelect={(value) => console.log(`Item "${value}" selected`)}
    >
      {loading
        ? null
        : [1, 2, 3].map((value) => (
            <Dropdown.Item key={value} value={value}>
              Item {value}
            </Dropdown.Item>
          ))}
    </Dropdown>
  )
})

render(
  <StackView width={16}>
    <Dropdown
      iconRight={undefined}
      title={<Text truncate>Supercalifragilisticexpialidocious</Text>}
      variant="outline"
    >
      <Dropdown.Item value="item-1">Item 1</Dropdown.Item>
      <Dropdown.Item value="item-2">Item 2</Dropdown.Item>
      <Dropdown.Item value="item-3">Item 3</Dropdown.Item>
    </Dropdown>
  </StackView>
)

function GuitarIcon({ fill }) {
  return (
    <svg width="28" height="28" fill="none" viewBox="0 0 28 28">
      <path
        fill={fill}
        fillRule="evenodd"
        d="M27.349 2.657L24.887.237c-.32-.32-.88-.319-1.183.023l-3.38 3.46a1.607 1.607 0 00-.423.863l-.123.722c-.041.321-.182.622-.424.863l-5.072 5.37-.04.046c-2.081-1.322-4.576-1.324-6.055.155l-.127.127c-1.356 1.358-3.226 3.23-4.953 3.951-.68.285-1.312.7-1.858 1.246-2.443 2.443-.991 5.328 1.684 8.004 2.675 2.675 5.56 4.127 8.004 1.684a5.764 5.764 0 001.246-1.859c.721-1.726 2.592-3.596 3.95-4.952l.127-.127c1.479-1.479 1.478-3.972.157-6.052.037-.033.073-.067.108-.104l5.051-5.347c.241-.242.523-.403.844-.444l.722-.123c.32-.041.622-.222.843-.444l3.38-3.46a.83.83 0 00-.016-1.182zM8.584 19.415a2.284 2.284 0 103.23-3.23 2.284 2.284 0 00-3.23 3.23z"
      />
    </svg>
  )
}
const colors = [
  '#714dd8',
  '#3c8bf7',
  '#72bb52',
  '#ff6767',
  '#ffa833',
  '#000000',
]
render(() => {
  const [activeColor, setActiveColor] = React.useState('#000000')
  return (
    <Dropdown
      triggerElement={
        <StackView
          width={10}
          height={10}
          alignment="center"
          distribution="center"
          stroke={activeColor === '#000000' ? 'separator' : activeColor}
          strokeWeight={2}
          spacing={1}
          radius={5}
        >
          <GuitarIcon fill={activeColor} />
          <Text size={4} weight={600} letterSpacing="0.05em">
            Guitar
          </Text>
        </StackView>
      }
      title="Drums"
      popoverProps={{
        paddingHorizontal: 1,
        paddingVertical: 1,
      }}
    >
      <GridView columns="1fr 1fr 1fr" spacing={1}>
        {colors.map((color, index) => (
          <Dropdown.Item
            key={color}
            index={index}
            width={4}
            height={4}
            backgroundColor={color}
            highlightedColor={color + 'd1'}
            stroke={color === activeColor ? color + '75' : undefined}
            strokeWeight={2}
            onSelect={() => setActiveColor(color)}
          />
        ))}
      </GridView>
    </Dropdown>
  )
})