react-icons/bs#BsThreeDotsVertical JavaScript Examples

The following examples show how to use react-icons/bs#BsThreeDotsVertical. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: MobileLineageTree.jsx    From covince with MIT License 4 votes vote down vote up 
MobileLineageTree = (props) => {
  const {
    darkMode,
    info,
    initialValues,
    lineageTree,
    // nextColourIndex,
    onClose
  } = props

  const [tempValues, setTempValues] = React.useState(initialValues)
  const [, updateQuery] = useQueryAsState()

  const numberSelected = React.useMemo(() => Object.keys(tempValues).length, [tempValues])
  const submit = React.useCallback((lineages, queryUpdate) => {
    updateQuery(queryUpdate)
    setTempValues(lineages)
  }, [tempValues])

  const nextColourIndex = React.useMemo(() =>
    getNextColourIndex(tempValues, lineageTree.colourPalette)
  , [tempValues])

  return (
    <>
    { <lineageTree.TreeComponent
        className='flex-grow px-3'
        lineageToColourIndex={tempValues}
        submit={submit}
        maxLineages={info.maxLineages}
        nextColourIndex={nextColourIndex}
        {...lineageTree}
        darkMode={darkMode}
        isMobile
        numberSelected={numberSelected}
        action={
          <div className='space-x-3 flex items-center'>
            <LineageLimit
              className='text-base my-2.5'
              numberSelected={numberSelected}
              maxLineages={info.maxLineages}
            />
            <Menu as='div' className='relative z-10'>
              <Menu.Button as={Button} className='!p-2'>
                <BsThreeDotsVertical className='w-6 h-6' />
              </Menu.Button>
              {/* Use the Transition component. */}
              <Transition
                enter="transition duration-100 ease-out"
                enterFrom="transform scale-95 opacity-0"
                enterTo="transform scale-100 opacity-100"
                leave="transition duration-75 ease-out"
                leaveFrom="transform scale-100 opacity-100"
                leaveTo="transform scale-95 opacity-0"
              >
                <Menu.Items
                  className={`
                    w-48
                    absolute z-20 top-full right-0 mt-2 origin-top-right
                    bg-white rounded-md shadow-xl ring-1 ring-black ring-opacity-5
                    divide-y divide-gray-200 focus:outline-none 
                    dark:bg-gray-600 dark:text-white dark:ring-gray-500 dark:divide-gray-500
                  `}
                >
                  <div className='py-1'>
                    {lineagePresets.map(({ value, label }) => (
                      <Menu.Item key={value}>
                        <button
                          className={classNames(
                            'px-4 py-2 whitespace-nowrap w-full text-right flex items-center justify-end',
                            'no-webkit-tap focus:outline-none active:bg-gray-100 dark:active:bg-gray-700',
                            { 'font-bold': value === lineageTree.preset }
                          )}
                          onClick={() => lineageTree.setPreset(value)}
                        >
                          { value === lineageTree.preset &&
                            <BsCheckCircle className='flex-shrink-0 fill-current text-primary w-5 h-5 mr-2' /> }
                          {label}
                        </button>
                      </Menu.Item>
                    ))}
                  </div>
                  <div className='py-1'>
                    <Menu.Item>
                      <button
                        className={`
                          px-4 py-2 whitespace-nowrap w-full text-right
                          no-webkit-tap focus:outline-none active:bg-gray-100 dark:active:bg-gray-700
                        `}
                        onClick={() => setTempValues({})}
                      >
                        Clear selection
                      </button>
                    </Menu.Item>
                  </div>
                </Menu.Items>
              </Transition>
            </Menu>
          </div>
        }
      /> }
      <footer className='absolute bottom-4 right-3'>
        <PrimaryPillButton className='shadow-lg' onClick={() => onClose(tempValues)}>Continue</PrimaryPillButton>
      </footer>
    </>
  )
}