@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
191 lines • 7.66 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { AsYouType } from 'libphonenumber-js';
import React from 'react';
import { COUNTRIES } from '../constants';
import { getCallingCodeOfCountry, matchContinentsIncludeCountry, matchIsArray } from '../helpers';
export function getInitialState(params) {
var _COUNTRIES$defaultCou;
var defaultCountry = params.defaultCountry,
initialValue = params.initialValue,
disableFormatting = params.disableFormatting;
var fallbackValue = defaultCountry ? "+".concat((_COUNTRIES$defaultCou = COUNTRIES[defaultCountry]) == null ? void 0 : _COUNTRIES$defaultCou[0]) : '';
var asYouType = new AsYouType(defaultCountry);
var inputValue = asYouType.input(initialValue);
var phoneNumberValue = asYouType.getNumberValue();
if (defaultCountry && asYouType.getCountry() === undefined) {
inputValue = fallbackValue;
} else if (disableFormatting && phoneNumberValue) {
inputValue = phoneNumberValue;
}
return {
inputValue: inputValue || fallbackValue,
isoCode: asYouType.getCountry() || defaultCountry || null
};
}
function matchIsIsoCodeAccepted(isoCode, filters) {
var excludedCountries = filters.excludedCountries,
onlyCountries = filters.onlyCountries,
continents = filters.continents;
if (matchIsArray(excludedCountries, true) && excludedCountries.includes(isoCode)) {
return false;
}
if (matchIsArray(onlyCountries) && !onlyCountries.includes(isoCode)) {
return false;
}
if (matchIsArray(continents) && !matchContinentsIncludeCountry(continents, isoCode)) {
return false;
}
return true;
}
export function usePhoneDigits(_ref) {
var value = _ref.value,
onChange = _ref.onChange,
defaultCountry = _ref.defaultCountry,
forceCallingCode = _ref.forceCallingCode,
onlyCountries = _ref.onlyCountries,
excludedCountries = _ref.excludedCountries,
continents = _ref.continents,
disableFormatting = _ref.disableFormatting;
var previousCountryRef = React.useRef(defaultCountry || null);
var asYouTypeRef = React.useRef(new AsYouType(defaultCountry));
var inputRef = React.useRef(null);
// eslint-disable-next-line max-len
var _React$useState = React.useState(defaultCountry),
_React$useState2 = _slicedToArray(_React$useState, 2),
previousDefaultCountry = _React$useState2[0],
setPreviousDefaultCountry = _React$useState2[1];
var _React$useState3 = React.useState(function () {
return getInitialState({
initialValue: value,
defaultCountry: defaultCountry,
disableFormatting: disableFormatting
});
}),
_React$useState4 = _slicedToArray(_React$useState3, 2),
state = _React$useState4[0],
setState = _React$useState4[1];
var _React$useState5 = React.useState(value),
_React$useState6 = _slicedToArray(_React$useState5, 2),
previousValue = _React$useState6[0],
setPreviousValue = _React$useState6[1];
var buildOnChangeInfo = function buildOnChangeInfo(reason) {
return {
countryCallingCode: asYouTypeRef.current.getCallingCode() || null,
countryCode: asYouTypeRef.current.getCountry() || null,
nationalNumber: asYouTypeRef.current.getNationalNumber(),
numberValue: asYouTypeRef.current.getNumberValue() || null,
reason: reason
};
};
var matchIsIsoCodeValid = function matchIsIsoCodeValid(isoCode) {
return isoCode && matchIsIsoCodeAccepted(isoCode, {
onlyCountries: onlyCountries,
excludedCountries: excludedCountries,
continents: continents
});
};
var typeNewValue = function typeNewValue(inputValue) {
asYouTypeRef.current.reset();
return asYouTypeRef.current.input(inputValue);
};
var onInputChange = function onInputChange(event) {
var inputVal = event.target.value;
inputVal = inputVal.startsWith('+') || inputVal === '' ? inputVal : "+".concat(inputVal);
var formattedValue = typeNewValue(inputVal);
var country = inputVal === '+' || !inputVal ? null : asYouTypeRef.current.getCountry() || previousCountryRef.current || null;
previousCountryRef.current = country;
var phoneNumber = asYouTypeRef.current.getNumber() || null;
var numberValue = asYouTypeRef.current.getNumberValue() || '';
if (forceCallingCode && !phoneNumber && (state.isoCode || defaultCountry)) {
var inputValueIsoCode = "+".concat(getCallingCodeOfCountry(state.isoCode || defaultCountry));
onChange == null || onChange(inputValueIsoCode, buildOnChangeInfo('input'));
setPreviousValue(inputValueIsoCode);
setState({
isoCode: state.isoCode || defaultCountry || null,
inputValue: inputValueIsoCode
});
} else if (numberValue && (!country || !matchIsIsoCodeValid(country))) {
// Do not format when isoCode is not valid
onChange == null || onChange(numberValue, Object.assign({}, buildOnChangeInfo('input'), {
countryCode: null,
countryCallingCode: null,
nationalNumber: null
}));
setPreviousValue(numberValue);
setState({
isoCode: null,
inputValue: numberValue
});
} else if (disableFormatting) {
onChange == null || onChange(numberValue, buildOnChangeInfo('input'));
setPreviousValue(numberValue);
setState({
isoCode: country || null,
inputValue: numberValue
});
} else {
onChange == null || onChange(formattedValue, buildOnChangeInfo('input'));
setPreviousValue(formattedValue);
setState({
isoCode: country || null,
inputValue: formattedValue
});
}
};
React.useEffect(function () {
if (value !== previousValue) {
setPreviousValue(value);
var newState = getInitialState({
initialValue: value,
defaultCountry: defaultCountry
});
previousCountryRef.current = newState.isoCode;
setState(newState);
}
}, [value, previousValue, defaultCountry]);
React.useEffect(function () {
if (defaultCountry !== previousDefaultCountry) {
setPreviousDefaultCountry(defaultCountry);
asYouTypeRef.current = new AsYouType(defaultCountry);
var _getInitialState = getInitialState({
initialValue: '',
defaultCountry: defaultCountry
}),
inputValue = _getInitialState.inputValue,
isoCode = _getInitialState.isoCode;
setPreviousValue(inputValue);
asYouTypeRef.current.input(inputValue);
previousCountryRef.current = asYouTypeRef.current.getCountry() || null;
onChange == null || onChange(inputValue, buildOnChangeInfo('country'));
setState({
inputValue: inputValue,
isoCode: isoCode
});
}
}, [defaultCountry, previousDefaultCountry, onChange]);
var onCountryChange = function onCountryChange(newCountry) {
var _COUNTRIES$newCountry;
if (newCountry === state.isoCode) {
return;
}
var callingCode = (_COUNTRIES$newCountry = COUNTRIES[newCountry]) == null ? void 0 : _COUNTRIES$newCountry[0];
var formattedValue = typeNewValue("+".concat(callingCode));
onChange == null || onChange(formattedValue, Object.assign({}, buildOnChangeInfo('country'), {
// Some country have the same calling code, so we choose what the user has selected
countryCode: newCountry
}));
previousCountryRef.current = newCountry;
setPreviousValue(formattedValue);
setState({
isoCode: newCountry,
inputValue: formattedValue
});
};
return {
inputValue: state.inputValue,
isoCode: state.isoCode,
onInputChange: onInputChange,
onCountryChange: onCountryChange,
inputRef: inputRef
};
}