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 (
{!isOpen && ( )} {!isOpen && leftValue && (
≈ {leftValue}
)}
); } 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, };