react-icons/hi#HiChevronRight JavaScript Examples

The following examples show how to use react-icons/hi#HiChevronRight. 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: LineageTree.jsx From covince with MIT License

5 votes

LineageTreeBranch = memo(({ node, ...props }) => {
  const {
    checked,
    colour,
    colourPalette,
    children,
    hasChildren,
    isDisabled,
    isOpen,
    Menu = DefaultMenu,
    renderChildren,
    setColour,
    toggleOpen,
    toggleSelect
  } = props

  const {
    altName,
    lineage,
    sum,
    sumOfClade
  } = node

  const Chevron = isOpen ? HiChevronDown : HiChevronRight
  return (
    <li className='flex items-start mt-1.5'>
      <span className='mt-1 w-5 h-5 mr-2 text-gray-400 dark:text-gray-300' onClick={e => e.stopPropagation()}>
        { hasChildren &&
          <Button className='!p-0' onClick={() => toggleOpen(node.name, isOpen)}>
            <Chevron className='w-5 h-5' />
          </Button> }
      </span>
      <LineageCheckbox
        checked={checked}
        colour={colour}
        disabled={isDisabled}
        id={`lineage_selector_${node.name}`}
        label={
          <>
            <span className={classNames('text-gray-700 dark:text-gray-100 lg:ml-0.5 leading-5')}>
              {lineage}
            </span>
            { altName &&
              <span className='ml-1 font-normal'>
                / {altName}
              </span> }
            { (!!sum || !!sumOfClade) &&
              <span className='ml-2 italic font-normal text-xs tracking-wide text-subheading'>
                {!!sum && sum.toLocaleString()} {!!sumOfClade && `+ ${sumOfClade.toLocaleString()}`}
              </span> }
          </>
        }
        menu={
          <Menu
            enabled={checked}
            colour={colour}
            lineage={lineage}
            palette={colourPalette}
            setColour={setColour}
          />
        }
        onChange={() => toggleSelect(lineage)}
      >
        {renderChildren ? renderChildren() : children}
      </LineageCheckbox>
    </li>
  )
})