@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
48 lines • 2.31 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useLayoutEffect, useState } from 'react';
import { useMergeRefs } from '@awsui/component-toolkit/internal';
import InternalInput from '../../../input/internal';
import { getBaseProps } from '../../base-component';
import { useFormFieldContext } from '../../context/form-field-context';
import { fireCancelableEvent, fireNonCancelableEvent } from '../../events';
import { processAttributes } from '../../utils/with-native-attributes';
import useMask from './use-mask';
import MaskFormat from './utils/mask-format';
const MaskedInput = React.forwardRef(({ value, onBlur, onChange, onKeyDown, mask, autofix = false, disableAutocompleteOnBlur = false, showUnmaskedValue = false, nativeInputAttributes, ...rest }, ref) => {
const baseProps = getBaseProps(rest);
const formFieldContext = useFormFieldContext(rest);
const inputRef = React.useRef(null);
const [cursorPosition, setCursorPosition] = useState(null);
useLayoutEffect(() => {
var _a;
if (cursorPosition !== null) {
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(cursorPosition, cursorPosition);
}
}, [cursorPosition, inputRef]);
const { onPaste, ...maskProps } = useMask({
format: new MaskFormat(mask),
value,
inputRef,
autofix,
disableAutocompleteOnBlur,
onChange: (value) => !rest.readOnly && fireNonCancelableEvent(onChange, { value }),
onKeyDown: (event) => !rest.readOnly && onKeyDown && fireCancelableEvent(onKeyDown, event.detail, event),
onBlur: () => fireNonCancelableEvent(onBlur),
setPosition: setCursorPosition,
showUnmaskedValue,
});
const inputProps = {
...rest,
...baseProps,
...formFieldContext,
...maskProps,
value: showUnmaskedValue ? value : maskProps.value,
};
const mergedRef = useMergeRefs(ref, inputRef);
return (React.createElement(InternalInput, { ...inputProps, ref: mergedRef, nativeInputAttributes: processAttributes({
onPaste,
}, nativeInputAttributes, 'MaskedInput') }));
});
export default MaskedInput;
//# sourceMappingURL=index.js.map