@activecollab/components
Version:
ActiveCollab Components
138 lines • 6.22 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["size", "disabled", "value", "onChange", "defaultCountry"];
import React, { forwardRef, useCallback, useEffect, useRef, useState } from "react";
import { callingCodeToCountryCodeMap, countriesArraySortedByName, getCountryCallingCode, getCountryFlag } from "country-explorer";
import { Input } from "./Input";
import { InputSelect } from "./InputSelect";
import { StyledFlagTriggerLabel, StyledOptionCode, StyledOptionFlag, StyledOptionName, StyledOptionRowEnd, StyledOptionWrapper } from "./Styles";
import { useForkRef } from "../../utils";
import { RadioButton } from "../RadioButton";
const renderOption = (option, data) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledOptionWrapper, null, /*#__PURE__*/React.createElement(StyledOptionFlag, null, getCountryFlag(option.id)), /*#__PURE__*/React.createElement(StyledOptionName, null, option.name)), /*#__PURE__*/React.createElement(StyledOptionRowEnd, null, /*#__PURE__*/React.createElement(StyledOptionCode, null, option.additionalInfo), /*#__PURE__*/React.createElement(RadioButton, {
checked: data.checked,
onChange: data.onChange
})));
export const InputPhone = /*#__PURE__*/forwardRef((_ref, ref) => {
let _ref$size = _ref.size,
size = _ref$size === void 0 ? "regular" : _ref$size,
disabled = _ref.disabled,
_ref$value = _ref.value,
defaultValue = _ref$value === void 0 ? "" : _ref$value,
onChange = _ref.onChange,
_ref$defaultCountry = _ref.defaultCountry,
defaultCountry = _ref$defaultCountry === void 0 ? "US" : _ref$defaultCountry,
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
const inputRef = useRef(null);
const handleRef = useForkRef(ref, inputRef);
const _useState = useState(defaultCountry),
prefix = _useState[0],
setPrefix = _useState[1];
const _useState2 = useState(""),
value = _useState2[0],
setValue = _useState2[1];
const options = countriesArraySortedByName.map(country => ({
id: country.countryCode,
name: country.name,
additionalInfo: "+" + country.callingCode
}));
const separatePrefixFromValue = fullValue => {
let newPrefix = prefix;
let newValue = fullValue;
if (fullValue.startsWith("+") || fullValue.startsWith("00")) {
const prefixLength = fullValue.startsWith("+") ? 1 : 2;
const digits = fullValue.slice(prefixLength);
for (let i = digits.length; i >= 1; i--) {
const code = digits.slice(0, i);
if (callingCodeToCountryCodeMap[code]) {
newPrefix = callingCodeToCountryCodeMap[code];
const dialCode = getCountryCallingCode(newPrefix);
newValue = fullValue.slice(prefixLength + dialCode.length);
break;
}
}
}
return {
newPrefix,
newValue
};
};
useEffect(() => {
const _separatePrefixFromVa = separatePrefixFromValue(defaultValue),
newPrefix = _separatePrefixFromVa.newPrefix,
newValue = _separatePrefixFromVa.newValue;
setPrefix(newPrefix);
setValue(newValue);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [defaultValue]);
const handleChange = useCallback(e => {
const inputValue = e.target.value;
if (/[^0-9+]/.test(inputValue)) {
return;
}
const _separatePrefixFromVa2 = separatePrefixFromValue(inputValue),
newPrefix = _separatePrefixFromVa2.newPrefix,
newValue = _separatePrefixFromVa2.newValue;
setPrefix(newPrefix);
setValue(newValue);
typeof onChange === "function" && onChange("+" + getCountryCallingCode(newPrefix) + newValue);
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[onChange, prefix]);
const handleSelectChange = val => {
setPrefix(val);
setTimeout(() => {
var _inputRef$current;
(_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
}, 200);
typeof onChange === "function" && onChange("+" + getCountryCallingCode(val) + value);
};
const handlePaste = e => {
e.preventDefault();
const paste = e.clipboardData.getData("text");
const filteredPaste = paste.replace(/[^0-9+]/g, "");
const inputElement = e.currentTarget;
const selectionStart = inputElement.selectionStart,
selectionEnd = inputElement.selectionEnd;
if (selectionStart !== null && selectionEnd !== null) {
const currentValue = inputElement.value;
const beforeSelection = currentValue.slice(0, selectionStart);
const afterSelection = currentValue.slice(selectionEnd);
const newValueAfterPaste = beforeSelection + filteredPaste + afterSelection;
const _separatePrefixFromVa3 = separatePrefixFromValue(newValueAfterPaste),
newPrefix = _separatePrefixFromVa3.newPrefix,
newValue = _separatePrefixFromVa3.newValue;
setPrefix(newPrefix);
setValue(newValue);
typeof onChange === "function" && onChange("+" + getCountryCallingCode(newPrefix) + newValue);
}
};
return /*#__PURE__*/React.createElement(Input, _extends({}, rest, {
ref: handleRef,
size: size,
value: value,
disabled: disabled,
type: "text",
onPaste: handlePaste,
onChange: handleChange,
"data-testid": "InputPhone",
startAdornment: /*#__PURE__*/React.createElement(InputSelect, {
size: size,
onChange: handleSelectChange,
options: options,
selected: prefix,
filterCriteria: (option, filter) => {
var _option$additionalInf;
return !!(option != null && (_option$additionalInf = option.additionalInfo) != null && _option$additionalInf.toLowerCase().includes(filter));
},
selectedLabel: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledFlagTriggerLabel, {
$size: size
}, getCountryFlag(prefix)), "+", getCountryCallingCode(prefix)),
disabled: disabled,
keepSameOptionsOrder: false,
search: true,
renderOption: renderOption
})
}));
});
InputPhone.displayName = "InputPhone";
//# sourceMappingURL=InputPhone.js.map