import React from 'react' import classNames from 'classnames' import { Menu, Transition } from '@headlessui/react' import { BsThreeDotsVertical, BsCheckCircle } from 'react-icons/bs' import Button, { PrimaryPillButton } from './Button' import { LineageLimit, lineagePresets } from '../hooks/useDynamicComponents' import useQueryAsState from '../hooks/useQueryAsState' import { getNextColourIndex } from '../hooks/useDynamicLineages' const 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> </> ) } export default MobileLineageTree