292 lines
11 KiB
TypeScript
292 lines
11 KiB
TypeScript
"use client";
|
|
/*
|
|
* Documentation:
|
|
* Text Input — https://app.subframe.com/f023064a5ca0/library?component=Text+Input_be48ca43-f8e7-4c0e-8870-d219ea11abfe
|
|
*/
|
|
|
|
import React from "react";
|
|
import { FeatherEye } from "@subframe/core";
|
|
import { FeatherEyeOff } from "@subframe/core";
|
|
import { FeatherLock } from "@subframe/core";
|
|
import { FeatherPlus } from "@subframe/core";
|
|
import { FeatherSearch } from "@subframe/core";
|
|
import * as SubframeCore from "@subframe/core";
|
|
import * as SubframeUtils from "../../utils";
|
|
|
|
// @subframe/sync-disable -- local fix: Context, ueber den der PasswordEyeButton (im Root) die Sichtbarkeit
|
|
// des Passworts steuert. Davids Komponente hatte den Eye-Button rein dekorativ (kein Toggle).
|
|
const TextInputContext = React.createContext<{
|
|
showPassword: boolean;
|
|
togglePassword: () => void;
|
|
}>({ showPassword: false, togglePassword: () => {} });
|
|
|
|
export interface InputProps
|
|
extends Omit<
|
|
React.InputHTMLAttributes<HTMLInputElement>,
|
|
"type" | "placeholder" | "value"
|
|
> {
|
|
type?: "text" | "password" | "email" | "number" | "tel" | "url" | "search";
|
|
placeholder?: React.ReactNode;
|
|
variant?: "regular" | "small" | "extra-small";
|
|
value?: React.ReactNode;
|
|
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
className?: string;
|
|
}
|
|
|
|
const Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(
|
|
{
|
|
type = "text",
|
|
placeholder,
|
|
variant = "regular",
|
|
value,
|
|
className,
|
|
...otherProps
|
|
}: InputProps,
|
|
ref
|
|
) {
|
|
// @subframe/sync-disable -- local fix: Password-Reveal via Context; boxShadow:none entfernt den geerbten
|
|
// nativen Fokus-Ring (der Fokus-Glow gehoert ans Feld, nicht an den Input -> kein Doppelrahmen).
|
|
const { showPassword } = React.useContext(TextInputContext);
|
|
const nativeType =
|
|
type === "password" && showPassword
|
|
? "text"
|
|
: type === "search"
|
|
? "search"
|
|
: type === "url"
|
|
? "url"
|
|
: type === "tel"
|
|
? "tel"
|
|
: type === "number"
|
|
? "number"
|
|
: type === "email"
|
|
? "email"
|
|
: type === "password"
|
|
? "password"
|
|
: "text";
|
|
return (
|
|
<input
|
|
className={SubframeUtils.twClassNames(
|
|
"group/b0d608f7 h-full w-full border-none bg-transparent px-0 py-0 text-body-default-regular-0 font-body-default-regular-0 text-text-neutral-secondary outline-none placeholder:text-text-neutral-subtle",
|
|
{
|
|
"text-body-extra-small-regular-0 font-body-extra-small-regular-0":
|
|
variant === "extra-small",
|
|
"text-body-small-regular-0 font-body-small-regular-0":
|
|
variant === "small",
|
|
},
|
|
className
|
|
)}
|
|
style={{ boxShadow: "none" }}
|
|
placeholder={placeholder as string}
|
|
value={value as string}
|
|
ref={ref}
|
|
type={nativeType}
|
|
{...otherProps}
|
|
/>
|
|
);
|
|
});
|
|
|
|
export interface PasswordEyeButtonProps
|
|
extends React.HTMLAttributes<HTMLDivElement> {
|
|
showPassword?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
const PasswordEyeButton = React.forwardRef<
|
|
HTMLDivElement,
|
|
PasswordEyeButtonProps
|
|
>(function PasswordEyeButton(
|
|
{ showPassword = false, className, ...otherProps }: PasswordEyeButtonProps,
|
|
ref
|
|
) {
|
|
return (
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"group/39db4fac flex h-5 w-5 cursor-pointer flex-col items-center justify-center gap-4",
|
|
className
|
|
)}
|
|
ref={ref}
|
|
{...otherProps}
|
|
>
|
|
{showPassword ? (
|
|
<FeatherEye className="text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-primary group-hover/39db4fac:text-body-large-0 group-hover/39db4fac:font-body-large-0 group-active/39db4fac:text-body-default-regular-0 group-active/39db4fac:font-body-default-regular-0" />
|
|
) : (
|
|
<FeatherEyeOff className="text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-primary group-hover/39db4fac:text-body-large-0 group-hover/39db4fac:font-body-large-0 group-active/39db4fac:text-body-default-regular-0 group-active/39db4fac:font-body-default-regular-0" />
|
|
)}
|
|
</div>
|
|
);
|
|
});
|
|
|
|
export interface TextInputRootProps
|
|
extends React.LabelHTMLAttributes<HTMLLabelElement> {
|
|
disabled?: boolean;
|
|
error?: boolean;
|
|
variant?: "outline" | "filled";
|
|
size?: "small" | "medium" | "large";
|
|
fillContainer?: boolean;
|
|
borderless?: boolean;
|
|
noPadding?: boolean;
|
|
showLabel?: boolean;
|
|
label?: React.ReactNode;
|
|
helpText?: React.ReactNode;
|
|
icon?: React.ReactNode;
|
|
iconRight?: React.ReactNode;
|
|
type?: "text" | "password" | "email" | "number" | "tel" | "url" | "search";
|
|
children?: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
const TextInputRoot = React.forwardRef<HTMLLabelElement, TextInputRootProps>(
|
|
function TextInputRoot(
|
|
{
|
|
disabled = false,
|
|
error = false,
|
|
variant = "outline",
|
|
size = "medium",
|
|
fillContainer = false,
|
|
borderless = false,
|
|
noPadding = false,
|
|
showLabel = false,
|
|
label,
|
|
helpText,
|
|
icon = null,
|
|
iconRight = null,
|
|
type = "text",
|
|
children,
|
|
className,
|
|
...otherProps
|
|
}: TextInputRootProps,
|
|
ref
|
|
) {
|
|
// @subframe/sync-disable -- local fix: Password-Sichtbarkeits-State; der Eye-Button toggelt, der Input liest via Context.
|
|
const [showPassword, setShowPassword] = React.useState(false);
|
|
return (
|
|
<TextInputContext.Provider value={{ showPassword, togglePassword: () => setShowPassword((v) => !v) }}>
|
|
<label
|
|
className={SubframeUtils.twClassNames(
|
|
"group/be48ca43 flex h-full w-full min-w-[192px] max-w-[320px] cursor-pointer flex-col items-start justify-center gap-4",
|
|
{ "max-w-none": fillContainer },
|
|
className
|
|
)}
|
|
ref={ref}
|
|
{...otherProps}
|
|
>
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"hidden flex-col items-start gap-3",
|
|
{ flex: showLabel }
|
|
)}
|
|
>
|
|
{label ? (
|
|
<span
|
|
className={SubframeUtils.twClassNames(
|
|
"text-body-default-medium-0 font-body-default-medium-0 text-text-neutral-secondary",
|
|
{
|
|
"text-text-feedback-negative": error,
|
|
"text-text-neutral-disabled": disabled,
|
|
}
|
|
)}
|
|
>
|
|
{label}
|
|
</span>
|
|
) : null}
|
|
{helpText ? (
|
|
<span
|
|
className={SubframeUtils.twClassNames(
|
|
"text-body-small-regular-0 font-body-small-regular-0 text-text-neutral-tertiary",
|
|
{
|
|
"text-text-feedback-negative": error,
|
|
"text-text-neutral-disabled": disabled,
|
|
}
|
|
)}
|
|
>
|
|
{helpText}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"flex h-9 w-full min-w-[80px] flex-none items-center gap-2 rounded-sm border border-solid border-border-strong bg-surface-neutral-primary px-3 group-hover/be48ca43:border group-hover/be48ca43:border-solid group-hover/be48ca43:border-brand-brand-border-solid-hover group-hover/be48ca43:bg-surface-neutral-secondary group-focus-within/be48ca43:bg-surface-neutral-secondary group-focus-within/be48ca43:shadow-focus",
|
|
{
|
|
"h-auto px-0 py-0": noPadding,
|
|
"border-none bg-transparent group-hover/be48ca43:border-none group-hover/be48ca43:bg-surface-neutral-modal":
|
|
borderless,
|
|
"h-12 min-w-[96px]": size === "large",
|
|
"h-8": size === "small",
|
|
"bg-surface-neutral-secondary": variant === "filled",
|
|
"border border-solid border-border-negative-solid group-hover/be48ca43:border group-hover/be48ca43:border-solid group-hover/be48ca43:border-border-negative-solid group-focus-within/be48ca43:border-2 group-focus-within/be48ca43:border-solid group-focus-within/be48ca43:border-border-negative-solid group-focus-within/be48ca43:shadow-none":
|
|
error,
|
|
"border border-solid border-border-disabled bg-surface-neutral-disabled group-hover/be48ca43:border group-hover/be48ca43:border-solid group-hover/be48ca43:border-border-disabled group-hover/be48ca43:bg-surface-neutral-disabled group-focus-within/be48ca43:bg-surface-neutral-disabled group-focus-within/be48ca43:shadow-none":
|
|
disabled,
|
|
}
|
|
)}
|
|
>
|
|
<div className="flex grow shrink-0 basis-0 items-center self-stretch">
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"hidden items-center gap-2 pr-2",
|
|
{ flex: type === "search" || type === "password" }
|
|
)}
|
|
>
|
|
{type === "search" ? (
|
|
<FeatherSearch className="text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary" />
|
|
) : type === "password" ? (
|
|
<FeatherLock className="text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary" />
|
|
) : (
|
|
<FeatherPlus className="text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary" />
|
|
)}
|
|
{icon ? (
|
|
<SubframeCore.IconWrapper
|
|
className={SubframeUtils.twClassNames(
|
|
"text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary",
|
|
{ "text-icon-neutral-disabled": disabled }
|
|
)}
|
|
>
|
|
{icon}
|
|
</SubframeCore.IconWrapper>
|
|
) : null}
|
|
</div>
|
|
{children ? (
|
|
<div className="flex grow shrink-0 basis-0 flex-col items-start self-stretch">
|
|
{children}
|
|
</div>
|
|
) : null}
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"hidden items-center gap-1 pl-2",
|
|
{ "px-0 py-0": noPadding, "pl-0 pr-2.5": size === "small" }
|
|
)}
|
|
>
|
|
{iconRight ? (
|
|
<SubframeCore.IconWrapper
|
|
className={SubframeUtils.twClassNames(
|
|
"text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary",
|
|
{
|
|
"text-icon-feedback-negative": error,
|
|
"text-icon-neutral-disabled": disabled,
|
|
}
|
|
)}
|
|
>
|
|
{iconRight}
|
|
</SubframeCore.IconWrapper>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
<PasswordEyeButton
|
|
showPassword={showPassword}
|
|
onClick={() => setShowPassword((v) => !v)}
|
|
className={SubframeUtils.twClassNames("hidden", {
|
|
flex: type === "password",
|
|
})}
|
|
/>
|
|
</div>
|
|
</label>
|
|
</TextInputContext.Provider>
|
|
);
|
|
}
|
|
);
|
|
|
|
export const TextInput = Object.assign(TextInputRoot, {
|
|
Input,
|
|
PasswordEyeButton,
|
|
});
|