@itwin/core-react
Version:
A react component library of iTwin.js UI general purpose components
42 lines • 2.13 kB
JavaScript
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
/** @packageDocumentation
* @module Inputs
*/
import classnames from "classnames";
import * as React from "react";
import { Input as ITwinUI_Input } from "@itwin/itwinui-react";
import { useRefs } from "../utils/hooks/useRefs.js";
// Defined using following pattern (const Input at bottom) to ensure useful API documentation is extracted
const ForwardRefInput = React.forwardRef(function ForwardRefInput(props, ref) {
const { className, style, setFocus, nativeKeyHandler, size, ...otherProps } = props;
const inputElementRef = React.useRef(null);
const refs = useRefs(inputElementRef, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.
React.useEffect(() => {
const currentElement = inputElementRef.current;
const currentHandler = nativeKeyHandler;
if (currentElement && currentHandler) {
currentElement.addEventListener("keydown", currentHandler);
}
return () => {
if (currentHandler && currentElement) {
currentElement.removeEventListener("keydown", currentHandler);
}
};
}, [nativeKeyHandler]);
React.useEffect(() => {
if (inputElementRef.current && setFocus)
inputElementRef.current.focus();
}, [setFocus]);
const handleFocus = React.useCallback((event) => {
event.currentTarget.select();
}, []);
return (React.createElement(ITwinUI_Input, { ref: refs, type: "text", ...otherProps, onFocus: handleFocus, className: classnames("uicore-inputs-input", className), style: style }));
});
/** Basic text input, is a wrapper for the `<input type="text">` HTML element.
* @internal
*/
export const Input = ForwardRefInput;
//# sourceMappingURL=Input.js.map