92 lines
2.5 KiB
TypeScript
92 lines
2.5 KiB
TypeScript
import { FunctionComponent, Ref } from 'preact';
|
|
import { JSXInternal } from 'preact/src/jsx';
|
|
import { forwardRef } from 'preact/compat';
|
|
import { Icon } from './Icon';
|
|
import { IconButton } from './IconButton';
|
|
import { IconType } from '@standardnotes/snjs';
|
|
|
|
type ToggleProps = {
|
|
toggleOnIcon: IconType;
|
|
toggleOffIcon: IconType;
|
|
title: string;
|
|
toggled: boolean;
|
|
onClick: (toggled: boolean) => void;
|
|
};
|
|
|
|
type Props = {
|
|
icon: IconType;
|
|
inputType: 'text' | 'email' | 'password';
|
|
className?: string;
|
|
iconClassName?: string;
|
|
value: string | undefined;
|
|
onChange: JSXInternal.GenericEventHandler<HTMLInputElement>;
|
|
onFocus?: JSXInternal.GenericEventHandler<HTMLInputElement>;
|
|
onKeyDown?: JSXInternal.KeyboardEventHandler<HTMLInputElement>;
|
|
disabled?: boolean;
|
|
placeholder: string;
|
|
toggle?: ToggleProps;
|
|
};
|
|
|
|
const DISABLED_CLASSNAME = 'bg-grey-5 cursor-not-allowed';
|
|
|
|
export const InputWithIcon: FunctionComponent<Props> = forwardRef(
|
|
(
|
|
{
|
|
icon,
|
|
inputType,
|
|
className,
|
|
iconClassName,
|
|
value,
|
|
onChange,
|
|
onFocus,
|
|
onKeyDown,
|
|
disabled,
|
|
toggle,
|
|
placeholder,
|
|
}: Props,
|
|
ref: Ref<HTMLInputElement>
|
|
) => {
|
|
const handleToggle = () => {
|
|
if (toggle) toggle.onClick(!toggle?.toggled);
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`flex items-stretch position-relative bg-default border-1 border-solid border-main rounded focus-within:ring-info overflow-hidden ${
|
|
disabled ? DISABLED_CLASSNAME : ''
|
|
} ${className}`}
|
|
>
|
|
<div className="flex px-2 py-1.5">
|
|
<Icon type={icon} className={`color-grey-1 ${iconClassName}`} />
|
|
</div>
|
|
<input
|
|
type={inputType}
|
|
onFocus={onFocus}
|
|
onChange={onChange}
|
|
onKeyDown={onKeyDown}
|
|
value={value}
|
|
className={`pr-2 w-full border-0 focus:shadow-none ${
|
|
disabled ? DISABLED_CLASSNAME : ''
|
|
}`}
|
|
spellcheck={false}
|
|
disabled={disabled}
|
|
placeholder={placeholder}
|
|
ref={ref}
|
|
/>
|
|
{toggle ? (
|
|
<div className="flex items-center justify-center px-2">
|
|
<IconButton
|
|
className="w-5 h-5 justify-center sk-circle hover:bg-grey-4"
|
|
icon={toggle.toggled ? toggle.toggleOnIcon : toggle.toggleOffIcon}
|
|
iconClassName="sn-icon--small"
|
|
title={toggle.title}
|
|
onClick={handleToggle}
|
|
focusable={true}
|
|
/>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
);
|