@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
216 lines (215 loc) • 8.22 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "AsYouType", {
enumerable: true,
get: function get() {
return _libphonenumberJs.AsYouType;
}
});
exports["default"] = void 0;
Object.defineProperty(exports, "matchIsValidPhone", {
enumerable: true,
get: function get() {
return _libphonenumberJs.isValidPhoneNumber;
}
});
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _material = require("@mui/material");
var _InputAdornment = _interopRequireDefault(require("@mui/material/InputAdornment"));
var _hooks = require("./hooks");
var _helpers = require("./helpers");
var _ref2 = require("../../utils/ref");
var _components = require("./components");
var _TextFieldV5LabelOut = require("../TextFieldV5LabelOut");
var _jsxRuntime = require("react/jsx-runtime");
var _libphonenumberJs = require("libphonenumber-js");
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"];
var InputPhone = /*#__PURE__*/_react["default"].forwardRef(function (props, propRef) {
var theme = (0, _material.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 = (0, _objectWithoutProperties2["default"])(props, _excluded);
var textFieldRef = _react["default"].useRef(null);
var _React$useState = _react["default"].useState(null),
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
anchorEl = _React$useState2[0],
setAnchorEl = _React$useState2[1];
var _ref = inputProps || {},
readOnly = _ref.readOnly,
restinputProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded2);
(0, _hooks.useMismatchProps)(props);
var _usePhoneDigits = (0, _hooks.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) {
(0, _helpers.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) {
(0, _ref2.assocRefToPropRef)(ref, InputProps.inputRef);
}
if (inputRefFromProps) {
(0, _ref2.assocRefToPropRef)(ref, inputRefFromProps);
}
};
var handleRef = function handleRef(ref) {
// @ts-ignore
textFieldRef.current = ref;
if (propRef) {
(0, _ref2.assocRefToPropRef)(ref, propRef);
}
};
var handleCloseFlagsMenu = function handleCloseFlagsMenu() {
setAnchorEl(null);
};
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextFieldV5LabelOut.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__*/(0, _jsxRuntime.jsx)(_InputAdornment["default"], {
position: "start",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlagButton, {
isFlagsMenuOpened: Boolean(anchorEl),
isoCode: isoCode,
onClick: handleOpenFlagsMenu,
disabled: disabled,
disableDropdown: Boolean(disableDropdown),
size: "small",
disableFocusRipple: true,
disableTouchRipple: true
})
})
}),
placeholder: placeholder
}, restTextFieldProps)), !disableDropdown ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.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]
});
});
var _default = exports["default"] = InputPhone;