1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 07:24:56 +01:00
metamask-extension/ui/pages/swaps/dropdown-input-pair/dropdown-input-pair.js

139 lines
4.1 KiB
JavaScript
Raw Normal View History

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';
2020-10-06 20:28:38 +02:00
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,
2020-10-06 20:28:38 +02:00
'.': 4.55,
};
2020-10-06 20:28:38 +02:00
const getInputWidth = (value) => {
const valueString = String(value);
const charArray = valueString.split('');
2020-11-03 00:41:28 +01:00
return charArray.reduce(
(inputWidth, _char) => inputWidth + characterWidthMap[_char],
12,
);
};
2020-11-03 00:41:28 +01:00
export default function DropdownInputPair({
2020-10-06 20:28:38 +02:00
itemsToSearch = [],
onInputChange,
inputValue = '',
onSelect,
leftValue,
selectedItem,
SearchListPlaceholder,
maxListItems,
selectPlaceHolderText,
loading,
hideItemIf,
listContainerClassName,
autoFocus,
2020-10-06 20:28:38 +02:00
}) {
const [isOpen, setIsOpen] = useState(false);
const open = () => setIsOpen(true);
const close = () => setIsOpen(false);
const inputRef = useRef();
2020-10-06 20:28:38 +02:00
const onTextFieldChange = (event) => {
event.stopPropagation();
2020-10-06 20:28:38 +02:00
// Automatically prefix value with 0. if user begins typing .
const valueToUse = event.target.value === '.' ? '0.' : event.target.value;
2020-10-06 20:28:38 +02:00
// Regex that validates strings with only numbers, 'x.', '.x', and 'x.x'
const regexp = /^(\.\d+|\d+(\.\d+)?|\d+\.)$/u;
2020-10-06 20:28:38 +02:00
// 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);
2020-10-06 20:28:38 +02:00
} 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 || '');
2020-10-06 20:28:38 +02:00
}
};
const [applyTwoLineStyle, setApplyTwoLineStyle] = useState(null);
2020-10-06 20:28:38 +02:00
useEffect(() => {
2020-11-03 00:41:28 +01:00
setApplyTwoLineStyle(
(inputRef?.current?.getBoundingClientRect()?.width || 0) +
getInputWidth(inputValue || '') >
137,
);
}, [inputValue, inputRef]);
2020-10-06 20:28:38 +02:00
return (
<div className="dropdown-input-pair">
<DropdownSearchList
itemsToSearch={itemsToSearch}
SearchListPlaceholder={SearchListPlaceholder}
2020-11-03 00:41:28 +01:00
fuseSearchKeys={[
{ name: 'name', weight: 0.499 },
{ name: 'symbol', weight: 0.499 },
{ name: 'address', weight: 0.002 },
]}
2020-10-06 20:28:38 +02:00
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}
2020-10-06 20:28:38 +02:00
/>
)}
2020-11-03 00:41:28 +01:00
{!isOpen && leftValue && (
<div
className={classnames('dropdown-input-pair__left-value', {
'dropdown-input-pair__left-value--two-lines': applyTwoLineStyle,
})}
ref={inputRef}
>
{leftValue}
</div>
)}
2020-10-06 20:28:38 +02:00
</div>
);
2020-10-06 20:28:38 +02:00
}
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,
};