-
Notifications
You must be signed in to change notification settings - Fork 2
/
IconInput.tsx
60 lines (55 loc) · 2.24 KB
/
IconInput.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
/*---------------------------------------------------------------------------------------------
* 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 "./IconInput.scss";
import classnames from "classnames";
import * as React from "react";
import type { InputProps } from "../Input";
import { Input } from "../Input"; // NEEDSWORK - for nativeKeyHandler
/** Properties for the [[IconInput]] component
* @public
* @deprecated in 4.12.x. Props of deprecated component {@link IconInput}.
*/
export interface IconInputProps extends Omit<InputProps, "size"> {
/** Icon displayed to the left of the Input field within the IconInput component */
icon: React.ReactNode;
/** CSS class name for the IconInput component container div */
containerClassName?: string;
/** Provides ability to return reference to HTMLInputElement */
ref?: React.Ref<HTMLInputElement>;
/** Modify size of the input. */
size?: "small" | "large";
}
/** Input component with icon to the left of the input field
* @public
*/
// eslint-disable-next-line deprecation/deprecation
const ForwardRefIconInput = React.forwardRef<HTMLInputElement, IconInputProps>(
function ForwardRefIconInput(props, ref) {
const { className, icon, containerClassName, size, ...otherProps } = props;
// NEEDSWORK: still using core-react Input component because of `nativeKeyHandler` prop
return (
<div
className={classnames("core-iconInput-container", containerClassName)}
>
<Input
ref={ref}
className={classnames("core-input", className)}
{...otherProps}
/>
<div className="core-iconInput-icon">{icon}</div>
</div>
);
}
);
/** Input component with icon to the left of the input field
* @public
* @deprecated in 4.12.x. Use {@link https://itwinui.bentley.com/docs/inputwithdecorations iTwinUI input decorations} instead.
*/
// eslint-disable-next-line deprecation/deprecation
export const IconInput: (props: IconInputProps) => React.ReactElement | null =
ForwardRefIconInput;