@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
197 lines • 7.42 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["forceCallingCode", "onlyCountries", "excludedCountries", "defaultCountry", "onDoubleClick", "onFocus", "onCopy", "value", "inputProps", "InputProps", "inputRef", "disabled", "onChange", "disableDropdown", "disableFormatting", "focusOnSelectCountry", "langOfCountryName", "continents", "preferredCountries", "MenuProps", "className", "placeholder"],
_excluded2 = ["readOnly"];
import React from 'react';
import { useTheme } from '@mui/material';
import InputAdornment from '@mui/material/InputAdornment';
import { usePhoneDigits, useMismatchProps } from './hooks';
import { putCursorAtEndOfInput } from './helpers';
import { assocRefToPropRef } from '../../utils/ref';
import { FlagButton, FlagsMenu } from './components';
import { TextFieldV5LabelOut } from '../TextFieldV5LabelOut';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
export { isValidPhoneNumber as matchIsValidPhone, AsYouType } from 'libphonenumber-js';
var InputPhone = /*#__PURE__*/React.forwardRef(function (props, propRef) {
var theme = useTheme();
var forceCallingCode = props.forceCallingCode,
onlyCountries = props.onlyCountries,
excludedCountries = props.excludedCountries,
defaultCountry = props.defaultCountry,
onDoubleClick = props.onDoubleClick,
onFocus = props.onFocus,
onCopy = props.onCopy,
_props$value = props.value,
value = _props$value === void 0 ? '' : _props$value,
inputProps = props.inputProps,
InputProps = props.InputProps,
inputRefFromProps = props.inputRef,
disabled = props.disabled,
onChange = props.onChange,
disableDropdown = props.disableDropdown,
disableFormatting = props.disableFormatting,
focusOnSelectCountry = props.focusOnSelectCountry,
langOfCountryName = props.langOfCountryName,
continents = props.continents,
preferredCountries = props.preferredCountries,
MenuProps = props.MenuProps,
className = props.className,
_props$placeholder = props.placeholder,
placeholder = _props$placeholder === void 0 ? '+15122223455' : _props$placeholder,
restTextFieldProps = _objectWithoutProperties(props, _excluded);
var textFieldRef = React.useRef(null);
var _React$useState = React.useState(null),
_React$useState2 = _slicedToArray(_React$useState, 2),
anchorEl = _React$useState2[0],
setAnchorEl = _React$useState2[1];
var _ref = inputProps || {},
readOnly = _ref.readOnly,
restinputProps = _objectWithoutProperties(_ref, _excluded2);
useMismatchProps(props);
var _usePhoneDigits = usePhoneDigits({
defaultCountry: defaultCountry,
value: value != null ? value : '',
onChange: onChange,
forceCallingCode: forceCallingCode,
excludedCountries: excludedCountries,
onlyCountries: onlyCountries,
disableFormatting: disableFormatting,
continents: continents
}),
onInputChange = _usePhoneDigits.onInputChange,
onCountryChange = _usePhoneDigits.onCountryChange,
inputRef = _usePhoneDigits.inputRef,
isoCode = _usePhoneDigits.isoCode,
inputValue = _usePhoneDigits.inputValue;
var handleOpenFlagsMenu = function handleOpenFlagsMenu(event) {
event.preventDefault();
if (!disabled || !disableDropdown || !readOnly) {
setAnchorEl(textFieldRef.current);
}
};
var focusInputElement = function focusInputElement() {
if (inputRef.current) {
inputRef.current.focus();
}
};
var handleChangeCountry = function handleChangeCountry(newCountry) {
setAnchorEl(null);
onCountryChange(newCountry);
if (focusOnSelectCountry) {
focusInputElement();
}
};
var handleFocus = function handleFocus(event) {
queueMicrotask(function () {
if (inputRef.current) {
putCursorAtEndOfInput(inputRef.current);
}
});
onFocus == null || onFocus(event);
};
var handleDoubleClick = function handleDoubleClick(event) {
var inputElement = inputRef.current;
inputElement.setSelectionRange(0, inputElement.value.length);
onDoubleClick == null || onDoubleClick(event);
};
var handleCopy = function handleCopy(event) {
if (onCopy) {
onCopy(event);
return;
}
var currentSelection = window.getSelection();
if (currentSelection) {
var valueWithoutSpaces = currentSelection.toString().replaceAll(' ', '');
event.clipboardData.setData('text/plain', valueWithoutSpaces);
event.preventDefault();
}
};
var handleRefInput = function handleRefInput(ref) {
// @ts-ignore
inputRef.current = ref;
if (InputProps != null && InputProps.inputRef) {
assocRefToPropRef(ref, InputProps.inputRef);
}
if (inputRefFromProps) {
assocRefToPropRef(ref, inputRefFromProps);
}
};
var handleRef = function handleRef(ref) {
// @ts-ignore
textFieldRef.current = ref;
if (propRef) {
assocRefToPropRef(ref, propRef);
}
};
var handleCloseFlagsMenu = function handleCloseFlagsMenu() {
setAnchorEl(null);
};
return /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(TextFieldV5LabelOut, Object.assign({
type: "tel",
disabled: disabled,
value: inputValue,
ref: handleRef,
onDoubleClick: handleDoubleClick,
inputRef: handleRefInput,
className: "InputPhone-TextField ".concat(className || ''),
onChange: onInputChange,
inputProps: Object.assign({
onCopy: handleCopy,
readOnly: readOnly
}, restinputProps),
onFocus: handleFocus
// eslint-disable-next-line react/jsx-no-duplicate-props
,
InputProps: Object.assign({}, InputProps, {
startAdornment: /*#__PURE__*/_jsx(InputAdornment, {
position: "start",
children: /*#__PURE__*/_jsx(FlagButton, {
isFlagsMenuOpened: Boolean(anchorEl),
isoCode: isoCode,
onClick: handleOpenFlagsMenu,
disabled: disabled,
disableDropdown: Boolean(disableDropdown),
size: "small",
disableFocusRipple: true,
disableTouchRipple: true
})
})
}),
placeholder: placeholder
}, restTextFieldProps)), !disableDropdown ? /*#__PURE__*/_jsx(FlagsMenu, Object.assign({
onlyCountries: onlyCountries,
excludedCountries: excludedCountries,
continents: continents,
anchorEl: anchorEl,
isoCode: isoCode,
preferredCountries: preferredCountries,
onClose: handleCloseFlagsMenu,
langOfCountryName: langOfCountryName,
onSelectCountry: handleChangeCountry,
PaperProps: {
sx: {
'& .MuiList-root': {
padding: 0
},
maxHeight: 60 * 4.5,
backgroundColor: theme.palette.background["default"],
padding: '10px',
borderRadius: '15px',
border: "1px solid ".concat(theme.palette.background.paper),
boxShadow: theme.shadows[2],
marginTop: theme.spacing(1.25)
}
},
anchorOrigin: {
vertical: 'bottom',
horizontal: 'left'
},
transformOrigin: {
vertical: 'top',
horizontal: 'left'
}
}, MenuProps)) : null]
});
});
export default InputPhone;