@razorpay/blade
Version:
The Design System that powers Razorpay
247 lines (243 loc) • 11.4 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import { getFlagsForAllCountries, formatPhoneNumber, getDialCodeByCountryCode } from '@razorpay/i18nify-js';
import React__default from 'react';
import { countryNameFormatter, CountrySelector } from './CountrySelector.web.js';
import '../BaseInput/index.js';
import '../../Button/IconButton/index.js';
import isEmpty from '../../../utils/lodashButBetter/isEmpty.js';
import { getKeyboardAndAutocompleteProps } from '../BaseInput/utils.js';
import '../../../utils/assignWithoutSideEffects/index.js';
import { useMergeRefs } from '../../../utils/useMergeRefs.js';
import '../../Icons/index.js';
import '../../../utils/metaAttribute/index.js';
import { useControllableState } from '../../../utils/useControllable.js';
import { jsx } from 'react/jsx-runtime';
import { IconButton } from '../../Button/IconButton/IconButton.js';
import CloseIcon from '../../Icons/CloseIcon/CloseIcon.js';
import { BaseInput } from '../BaseInput/BaseInput.js';
import { MetaConstants } from '../../../utils/metaAttribute/metaConstants.js';
import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
var _excluded = ["defaultCountry", "country", "onCountryChange", "label", "labelPosition", "defaultValue", "value", "name", "onChange", "necessityIndicator", "isRequired", "isDisabled", "leadingIcon", "trailingIcon", "validationState", "errorText", "helpText", "successText", "size", "onClearButtonClick", "showCountrySelector", "showDialCode", "onClick", "onBlur", "onFocus", "accessibilityLabel", "autoFocus", "testID", "keyboardReturnKeyType", "autoCompleteSuggestionType", "allowedCountries", "placeholder"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var _PhoneNumberInput = function _PhoneNumberInput(_ref, ref) {
var _ref$defaultCountry = _ref.defaultCountry,
defaultCountry = _ref$defaultCountry === void 0 ? 'IN' : _ref$defaultCountry,
country = _ref.country,
onCountryChange = _ref.onCountryChange,
label = _ref.label,
labelPosition = _ref.labelPosition,
defaultValue = _ref.defaultValue,
value = _ref.value,
name = _ref.name,
onChange = _ref.onChange,
necessityIndicator = _ref.necessityIndicator,
isRequired = _ref.isRequired,
isDisabled = _ref.isDisabled,
leadingIcon = _ref.leadingIcon,
trailingIcon = _ref.trailingIcon,
validationState = _ref.validationState,
errorText = _ref.errorText,
helpText = _ref.helpText,
successText = _ref.successText,
_ref$size = _ref.size,
size = _ref$size === void 0 ? 'medium' : _ref$size,
onClearButtonClick = _ref.onClearButtonClick,
_ref$showCountrySelec = _ref.showCountrySelector,
showCountrySelector = _ref$showCountrySelec === void 0 ? true : _ref$showCountrySelec,
_ref$showDialCode = _ref.showDialCode,
showDialCode = _ref$showDialCode === void 0 ? true : _ref$showDialCode,
onClick = _ref.onClick,
onBlur = _ref.onBlur,
onFocus = _ref.onFocus,
_ref$accessibilityLab = _ref.accessibilityLabel,
accessibilityLabel = _ref$accessibilityLab === void 0 ? 'Enter phone number' : _ref$accessibilityLab,
autoFocus = _ref.autoFocus,
testID = _ref.testID,
_ref$keyboardReturnKe = _ref.keyboardReturnKeyType,
keyboardReturnKeyType = _ref$keyboardReturnKe === void 0 ? 'done' : _ref$keyboardReturnKe,
autoCompleteSuggestionType = _ref.autoCompleteSuggestionType,
allowedCountries = _ref.allowedCountries,
placeholder = _ref.placeholder,
rest = _objectWithoutProperties(_ref, _excluded);
var inputRef = React__default.useRef(null);
var mergedRef = useMergeRefs(ref, inputRef);
var inputWrapperRef = React__default.useRef(null);
var _React$useState = React__default.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
shouldShowClearButton = _React$useState2[0],
setShouldShowClearButton = _React$useState2[1];
var _useControllableState = useControllableState({
defaultValue: defaultCountry,
value: country,
onChange: function onChange(country) {
return onCountryChange === null || onCountryChange === void 0 ? void 0 : onCountryChange({
country: country
});
}
}),
_useControllableState2 = _slicedToArray(_useControllableState, 2),
selectedCountry = _useControllableState2[0],
setSelectedCountry = _useControllableState2[1];
React__default.useEffect(function () {
setShouldShowClearButton(Boolean(defaultValue !== null && defaultValue !== void 0 ? defaultValue : value));
}, [defaultValue, value]);
var renderTrailingInteractionElement = function renderTrailingInteractionElement() {
if (!shouldShowClearButton) return null;
return /*#__PURE__*/jsx(IconButton, {
size: "medium",
icon: CloseIcon,
onClick: function onClick() {
var _inputRef$current;
if (isEmpty(value) && inputRef.current) {
// when the input field is uncontrolled take the ref and clear the input and then call the onClearButtonClick function
if (inputRef.current instanceof HTMLInputElement) {
inputRef.current.value = '';
inputRef.current.focus();
}
}
// if the input field is controlled just call the click handler and the value change shall be left upto the consumer
onClearButtonClick === null || onClearButtonClick === void 0 ? void 0 : onClearButtonClick();
inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
setShouldShowClearButton(false);
},
isDisabled: isDisabled,
accessibilityLabel: "Clear Input Content"
});
};
var flags = React__default.useMemo(function () {
return getFlagsForAllCountries();
}, []);
var countryData = React__default.useMemo(function () {
if (allowedCountries) {
return allowedCountries.map(function (countryCode) {
return {
code: countryCode,
name: countryNameFormatter.of(countryCode)
};
});
}
return Object.keys(flags).filter(function (countryCode) {
return !countryCode.includes('-');
}) // remove the non ISO 3166-1 alpha-2 country codes
.map(function (countryCode) {
return {
code: countryCode,
name: countryNameFormatter.of(countryCode)
};
}).sort(function (a, b) {
return a.name.localeCompare(b.name);
});
}, [allowedCountries, flags]);
var handleOnChange = function handleOnChange(_ref2) {
var name = _ref2.name,
value = _ref2.value,
selectedCountry = _ref2.selectedCountry;
onChange === null || onChange === void 0 ? void 0 : onChange({
name: name,
value: value,
phoneNumber: value ? formatPhoneNumber(value, selectedCountry) : undefined,
dialCode: getDialCodeByCountryCode(selectedCountry),
country: selectedCountry
});
};
var onItemClick = function onItemClick(_ref3) {
var _inputRef$current2, _inputRef$current3, _inputRef$current4;
var name = _ref3.name;
var selectedCountry = name;
setSelectedCountry(function () {
return selectedCountry;
});
handleOnChange({
selectedCountry: selectedCountry,
name: (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.name,
value: (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.value
});
(_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : _inputRef$current4.focus();
};
return /*#__PURE__*/jsx(BaseInput, _objectSpread(_objectSpread({
setInputWrapperRef: function setInputWrapperRef(node) {
inputWrapperRef.current = node;
},
ref: mergedRef,
id: "phone-number-input",
componentName: MetaConstants.PhoneNumberInput,
label: label,
hideLabelText: !Boolean(label),
labelPosition: labelPosition,
defaultValue: defaultValue,
value: value,
name: name,
placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : formatPhoneNumber('1234567890', selectedCountry),
trailingIcon: trailingIcon,
leadingIcon: leadingIcon,
prefix: showDialCode ? getDialCodeByCountryCode(selectedCountry) : undefined,
trailingInteractionElement: renderTrailingInteractionElement(),
leadingInteractionElement: showCountrySelector ? /*#__PURE__*/jsx(CountrySelector, {
size: size,
countryData: countryData,
flags: flags,
inputWrapperRef: inputWrapperRef,
isDisabled: isDisabled,
selectedCountry: selectedCountry,
onItemClick: onItemClick
}) : null,
onChange: function onChange(_ref4) {
var name = _ref4.name,
value = _ref4.value;
if (value !== null && value !== void 0 && value.length) {
// show the clear button when the user starts typing in
setShouldShowClearButton(true);
}
if (shouldShowClearButton && !(value !== null && value !== void 0 && value.length)) {
// hide the clear button when the input field is empty
setShouldShowClearButton(false);
}
handleOnChange({
name: name,
value: value,
selectedCountry: selectedCountry
});
},
onClick: onClick,
onFocus: onFocus,
onBlur: onBlur,
isDisabled: isDisabled,
accessibilityLabel: accessibilityLabel,
necessityIndicator: necessityIndicator,
isRequired: isRequired,
validationState: validationState,
errorText: errorText,
helpText: helpText,
successText: successText
// eslint-disable-next-line jsx-a11y/no-autofocus
,
autoFocus: autoFocus,
testID: testID,
size: size
}, getKeyboardAndAutocompleteProps({
type: 'number',
keyboardReturnKeyType: keyboardReturnKeyType,
autoCompleteSuggestionType: autoCompleteSuggestionType,
autoCapitalize: 'none'
})), {}, {
type: "telephone"
}, rest));
};
/**
* PhoneNumberInput is a component that allows users to input phone numbers.
* It provides a country selector dropdown to select the country code.
*
* @example
*
* ```ts
* <PhoneNumberInput />
* ```
*/
var PhoneNumberInput = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.forwardRef(_PhoneNumberInput), {
displayName: 'PhoneNumberInput'
});
export { PhoneNumberInput };
//# sourceMappingURL=PhoneNumberInput.web.js.map