metamask-extension/ui/app/pages/swaps/dropdown-input-pair/dropdown-input-pair.js

import React, { useState, useRef, useEffect } from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import DropdownSearchList from '../dropdown-search-list'
import TextField from '../../../components/ui/text-field'

const characterWidthMap = {
  '1': 5.86,
  '2': 10.05,
  '3': 10.45,
  '4': 11.1,
  '5': 10,
  '6': 10.06,
  '7': 9.17,
  '8': 10.28,
  '9': 10.06,
  '0': 11.22,
  '.': 4.55,
}

const getInputWidth = (value) => {
  const valueString = String(value)
  const charArray = valueString.split('')
  return charArray.reduce((inputWidth, _char) => inputWidth + characterWidthMap[_char], 12)
}
export default function DropdownInputPair ({
  itemsToSearch = [],
  onInputChange,
  inputValue = '',
  onSelect,
  leftValue,
  selectedItem,
  SearchListPlaceholder,
  maxListItems,
  selectPlaceHolderText,
  loading,
  hideItemIf,
  listContainerClassName,
  autoFocus,
}) {
  const [isOpen, setIsOpen] = useState(false)
  const open = () => setIsOpen(true)
  const close = () => setIsOpen(false)
  const inputRef = useRef()
  const onTextFieldChange = (event) => {
    event.stopPropagation()
    // Automatically prefix value with 0. if user begins typing .
    const valueToUse = event.target.value === '.' ? '0.' : event.target.value

    // Regex that validates strings with only numbers, 'x.', '.x', and 'x.x'
    const regexp = /^(\.\d+|\d+(\.\d+)?|\d+\.)$/u
    // If the value is either empty or contains only numbers and '.' and only has one '.', update input to match
    if (valueToUse === '' || regexp.test(valueToUse)) {
      onInputChange(valueToUse)
    } else {
      // otherwise, use the previously set inputValue (effectively denying the user from inputting the last char)
      // or an empty string if we do not yet have an inputValue
      onInputChange(inputValue || '')
    }
  }
  const [applyTwoLineStyle, setApplyTwoLineStyle] = useState(null)
  useEffect(() => {
    setApplyTwoLineStyle((inputRef?.current?.getBoundingClientRect()?.width || 0) + getInputWidth(inputValue || '') > 137)
  }, [inputValue, inputRef])

  return (
    <div className="dropdown-input-pair">
      <DropdownSearchList
        itemsToSearch={itemsToSearch}
        SearchListPlaceholder={SearchListPlaceholder}
        fuseSearchKeys={[{ name: 'name', weight: 0.499 }, { name: 'symbol', weight: 0.499 }, { name: 'address', weight: 0.002 }]}
        maxListItems={maxListItems}
        onOpen={open}
        onClose={close}
        onSelect={onSelect}
        className={isOpen ? 'dropdown-input-pair__list--full-width' : ''}
        externallySelectedItem={selectedItem}
        selectPlaceHolderText={selectPlaceHolderText}
        selectorClosedClassName="dropdown-input-pair__selector--closed"
        listContainerClassName={listContainerClassName}
        loading={loading}
        hideItemIf={hideItemIf}
        defaultToAll
      />
      {!isOpen && (
        <TextField
          className={classnames('dropdown-input-pair__input', {
            'dropdown-input-pair__two-line-input': applyTwoLineStyle,
          })}
          type="text"
          placeholder="0"
          onChange={onTextFieldChange}
          fullWidth
          margin="dense"
          value={inputValue}
          autoFocus={autoFocus}
        />
      )}
      {
        !isOpen && leftValue && (
          <div
            className={classnames('dropdown-input-pair__left-value', {
              'dropdown-input-pair__left-value--two-lines': applyTwoLineStyle,
            })}
            ref={inputRef}
          >
            ≈ {leftValue}
          </div>
        )
      }
    </div>
  )
}

DropdownInputPair.propTypes = {
  itemsToSearch: PropTypes.array,
  onInputChange: PropTypes.func,
  inputValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  onSelect: PropTypes.func,
  leftValue: PropTypes.string,
  selectedItem: PropTypes.object,
  SearchListPlaceholder: PropTypes.func,
  maxListItems: PropTypes.number,
  selectPlaceHolderText: PropTypes.string,
  loading: PropTypes.bool,
  hideItemIf: PropTypes.func,
  listContainerClassName: PropTypes.string,
  autoFocus: PropTypes.bool,
}