49 lines
1.2 KiB
JavaScript
49 lines
1.2 KiB
JavaScript
import React, { forwardRef, useCallback, useRef, useEffect } from "react";
|
|
import css from "./TInput.module.less";
|
|
import { InputField } from "@enact/sandstone/Input";
|
|
import Spottable from "@enact/spotlight/Spottable";
|
|
import classNames from "classnames";
|
|
import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
|
|
|
|
const Container = SpotlightContainerDecorator("div");
|
|
|
|
const SpottableInputIcon = Spottable("div");
|
|
|
|
const KINDS = { withIcon: "withIcon" };
|
|
const ICONS = { search: "search" };
|
|
const BORDER = { none: "none" };
|
|
const COLOR = { transparent: "transparent" };
|
|
|
|
export default function TInput({
|
|
kind,
|
|
icon,
|
|
border,
|
|
color,
|
|
className,
|
|
spotlightDisabled,
|
|
...rest
|
|
}) {
|
|
const handleIconClick = useCallback(() => {}, []);
|
|
|
|
return (
|
|
<Container
|
|
className={classNames(css.container, className ? className : null)}
|
|
>
|
|
<InputField
|
|
{...rest}
|
|
spotlightDisabled={spotlightDisabled}
|
|
className={classNames(css.input)}
|
|
spotlightId="input"
|
|
/>
|
|
{kind === "withIcon" && (
|
|
<SpottableInputIcon
|
|
className={classNames(icon && css[icon])}
|
|
onClick={handleIconClick}
|
|
/>
|
|
)}
|
|
</Container>
|
|
);
|
|
}
|
|
|
|
export { KINDS, ICONS, BORDER, COLOR };
|