64 lines
2.1 KiB
TypeScript
64 lines
2.1 KiB
TypeScript
import React from "react";
|
|
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
|
|
import { ReactNode } from "react";
|
|
import BaseField, { IProps as IBaseFieldProps } from "../BaseField";
|
|
import classes from "./classes.module.scss";
|
|
import classnames from "classnames";
|
|
import { XMarkIcon, Square2StackIcon } from "@heroicons/react/24/outline";
|
|
export type IProps = IBaseFieldProps & {
|
|
canCopy?: boolean;
|
|
password?: boolean;
|
|
};
|
|
|
|
export default class TextField extends BaseField<IProps> {
|
|
constructor(props: IProps) {
|
|
super(props);
|
|
this.state = this.getDefaultState();
|
|
}
|
|
|
|
public override render(): ReactNode {
|
|
const value = this.state.value ?? "";
|
|
return (
|
|
<div className={classes["root"]} data-is-disabled={this.props.disabled}>
|
|
<label>
|
|
{this.props.label && (
|
|
<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.INPUT_LABEL} className={classes["label"]}>
|
|
{this.props.label}
|
|
</Typography>
|
|
)}
|
|
<div className={classes["input-container"]} data-value={value} data-is-errored={this.hasError().toString()}>
|
|
<input
|
|
onChange={this.onChange}
|
|
className={classnames(classes["input"], this.props.className)}
|
|
placeholder={this.props.placeholder}
|
|
value={value}
|
|
onFocus={this.onFocus}
|
|
onBlur={this.onBlur}
|
|
name={this.props.name}
|
|
disabled={this.props.disabled}
|
|
type={this.props.password ? "password" : "text"}
|
|
/>
|
|
{this.props.canCopy && !this.hasError() && (
|
|
<div className={classes["copy-icon"]} onClick={this.onCopyClick}>
|
|
<Square2StackIcon height="24px" width="24px" color={"var(--color-neutral-700)"} />
|
|
</div>
|
|
)}
|
|
{this.hasError() && (
|
|
<div className={classes["cross-icon"]} onClick={this.onCopyClick}>
|
|
<XMarkIcon height="24px" width="24px" color="var(--input-error)" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</label>
|
|
{this.hasError() && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
private onCopyClick = (): void => {
|
|
if (this.props.canCopy) {
|
|
navigator.clipboard.writeText(this.state.value ?? "");
|
|
}
|
|
};
|
|
}
|