react-bootstrap#DropdownButton TypeScript Examples

Searchbar: React.FC<IProps> = ({ isHeaderSearchbar, isISSearchbar }) => {

  const history = useHistory()
  const location = useLocation()
  const [input, setInput] = useState("")
  const [searchType, setSearchType] = useState('Txn/Addr')

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => (
    setInput(e.target.value)
  )

  const handleSubmit = (e: React.SyntheticEvent) => {
    e.preventDefault()
    const trimmedInput = input.trim()
    switch (searchType) {
      case 'Txn/Addr':
        if (isValidAddr(trimmedInput))
          history.push({
            pathname: `/address/${trimmedInput}`,
            search: location.search
          })
        else
          history.push({
            pathname: `/tx/${trimmedInput}`,
            search: location.search
          })
        break
      case 'Tx Block':
        history.push({
          pathname: `/txbk/${trimmedInput}`,
          search: location.search
        })
        break
      case 'DS Block':
        history.push({
          pathname: `/dsbk/${trimmedInput}`,
          search: location.search
        })
        break
    }
    setInput('')
  }

  return <>
    <Form onSubmit={handleSubmit}>
      <InputGroup className="searchbar-ig" id={isHeaderSearchbar ? "header-searchbar-ig" : "searchbar-ig"}>
        {isISSearchbar
          ? <InputGroup.Prepend>
            <DropdownButton id='searchbar-dropdown' title={searchType}>
              <Dropdown.Item onClick={() => setSearchType('Txn/Addr')}>Txn/Addr</Dropdown.Item>
              <Dropdown.Item onClick={() => setSearchType('Tx Block')}>Tx Block</Dropdown.Item>
            </DropdownButton>
          </InputGroup.Prepend>
          :
          <InputGroup.Prepend>
            <DropdownButton id='searchbar-dropdown' title={searchType}>
              <Dropdown.Item onClick={() => setSearchType('Txn/Addr')}>Txn/Addr</Dropdown.Item>
              <Dropdown.Item onClick={() => setSearchType('Tx Block')}>Tx Block</Dropdown.Item>
              <Dropdown.Item onClick={() => setSearchType('DS Block')}>DS Block</Dropdown.Item>
            </DropdownButton>
          </InputGroup.Prepend>
        }
        <Form.Control type="text" value={input} autoFocus={!isHeaderSearchbar}
          placeholder={
            searchType === 'Txn/Addr'
              ? 'Search for a transaction or an address'
              : searchType === 'Tx Block'
                ? 'Search by Tx Block height'
                : 'Search by DS Block height'}
          onChange={handleChange} />
        <InputGroup.Append>
          <Button type="submit">
            {isHeaderSearchbar ? <FontAwesomeIcon icon={faSearch} /> : <div>Search</div>}
          </Button>
        </InputGroup.Append>
      </InputGroup>
    </Form>
  </>
}

FormGroupInput = (props: any) => {

    return (!props ? <></> :
        <Form.Group as={Row} controlId={props.controlId} hidden={props.hidden} className='mb-1'>
            <Form.Label className={`'input-label' ${props.lableAlign && 'align-self-'+props.lableAlign}`} column xs='5' sm='3'>{props.title + (props.required ? '*' : '')}</Form.Label>

            <Col xs='7' sm='9' className='d-flex'>
                <Row className='m-0 w-100'>
                    {props.infoText ? <Form.Label className='text-justify'>{props.infoText}</Form.Label> : <></>}
                    <InputGroup>
                        {!props.dropdown
                            ? <></>
                            : <DropdownButton
                                as={InputGroup.Prepend}
                                variant="outline-secondary"
                                title={props.dropdownTitle}
                                id="input-group-dropdown-1"
                            >
                                {props.dropdown}
                            </DropdownButton>
                        }
                        <Form.Control
                            className={!props.prepend ? 'qt-input' : 'qt-input-prepend'}
                            value={props.value}
                            readOnly={props.readOnly}
                            disabled={props.disabled}
                            onClick={props.onClick}
                            onChange={props.onChange}
                            placeholder={props.placeholder ? props.placeholder : props.title}
                            type={props.type ? props.type : 'text'}
                            required={props.required}
                            maxLength={props.maxLength}
                            minLength={props.minLength}
                            min={props.min}
                            max={props.max}
                            pattern={props.pattern}
                            list={props.datalistId}
                            isInvalid={props.isInvalid}
                        />
                        {
                            !(props.datalist && props.datalistId)
                                ? <></>
                                : <datalist id={props.datalistId}>
                                    {props.datalist}
                                </datalist>
                        }
                        {
                            !props.prepend
                                ? <></>
                                : <OverlayTrigger
                                    placement='top-end'
                                    overlay={
                                        <Tooltip id='prepend-tooltip'>
                                            {props.tooltip}
                                        </Tooltip>
                                    }
                                ><InputGroup.Text className='prepend px-3' >{props.prepend}</InputGroup.Text>
                                </OverlayTrigger>
                        }
                        <Form.Control.Feedback type="invalid">
                            {props.InvalidText}
                        </Form.Control.Feedback>
                    </InputGroup>
                </Row>
            </Col>
        </Form.Group>
    )
}