react-icons/hi#HiChevronDown JavaScript Examples

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

6 votes

Select = ({ chevronClass = 'text-gray-500 dark:text-gray-300', responsive = false, ...props }) =>
  <span className='relative flex items-center'>
    <select
      {...props}
      className={classnames(
        props.className,
        responsive ? 'md:text-sm h-11' : 'text-sm',
        'block w-full py-2 bg-none md:h-10 md:leading-5 pl-2 lg:pl-3 pr-6 lg:pr-10',
        'border border-gray-300 bg-white rounded-md shadow-sm',
        'focus:outline-none focus:border-primary focus:ring focus:ring-offset-0 focus:ring-primary focus:ring-opacity-40',
        'dark:border-gray-500 dark:bg-gray-600 dark:focus:border-dark-primary dark:focus:ring-dark-primary dark:focus:ring-opacity-40'
      )}
    />
    <HiChevronDown
      className={classnames(
        'h-5 w-5 absolute right-1.5 lg:right-2.5 fill-current pointer-events-none',
        chevronClass
      )}
    />
  </span>

Example #2

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>
  )
})