@awsui/components-react
Version:
AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A
34 lines (33 loc) • 1.95 kB
JavaScript
import { __assign, __rest } from "tslib";
import React from 'react';
import mergeRefs from 'react-merge-refs';
import { getBaseProps } from '../../base-component';
import { fireCancelableEvent, fireNonCancelableEvent } from '../../events';
import { useFormFieldContext } from '../../context/form-field-context';
import InternalInput from '../../../input/internal';
import useMask from './use-mask';
import MaskFormat from './utils/mask-format';
var MaskedInput = React.forwardRef(function (_a, ref) {
var value = _a.value, onBlur = _a.onBlur, onChange = _a.onChange, onKeyDown = _a.onKeyDown, mask = _a.mask, _b = _a.autofix, autofix = _b === void 0 ? false : _b, _c = _a.disableAutocompleteOnBlur, disableAutocompleteOnBlur = _c === void 0 ? false : _c, rest = __rest(_a, ["value", "onBlur", "onChange", "onKeyDown", "mask", "autofix", "disableAutocompleteOnBlur"]);
var baseProps = getBaseProps(rest);
var formFieldContext = useFormFieldContext(rest);
var inputRef = React.useRef(null);
var _d = useMask({
format: new MaskFormat(mask),
value: value,
inputRef: inputRef,
autofix: autofix,
disableAutocompleteOnBlur: disableAutocompleteOnBlur,
onChange: function (value) { return !rest.readOnly && fireNonCancelableEvent(onChange, { value: value }); },
onKeyDown: function (event) {
return !rest.readOnly && onKeyDown && fireCancelableEvent(onKeyDown, event.detail, event);
},
onBlur: function () { return fireNonCancelableEvent(onBlur); }
}), onPaste = _d.onPaste, maskProps = __rest(_d, ["onPaste"]);
var inputProps = __assign(__assign(__assign(__assign({}, baseProps), formFieldContext), maskProps), rest);
return (React.createElement(InternalInput, __assign({}, inputProps, { ref: mergeRefs([ref, inputRef]), nativeAttributes: {
onPaste: onPaste
} })));
});
export { useMask };
export default MaskedInput;