95 lines
2.8 KiB
TypeScript
95 lines
2.8 KiB
TypeScript
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
|
|
import { ReactNode } from "react";
|
|
|
|
import Validators from "../../Validators/Validators";
|
|
import BaseField, { IProps as IBaseFieldProps } from "../BaseField";
|
|
import classes from "./classes.module.scss";
|
|
|
|
export type IProps = IBaseFieldProps & {
|
|
fakeplaceholder: string;
|
|
textarea?: boolean;
|
|
};
|
|
|
|
// @ts-ignore TODO: typing error on IProps (validator class?? cf Massi 22/02/23)
|
|
export default class InputField extends BaseField<IProps> {
|
|
public override render(): ReactNode {
|
|
let pattern;
|
|
|
|
if (this.props.type === "number") {
|
|
pattern = "(^[0-9]*)(\\.{0,1})([0-9]*)$";
|
|
}
|
|
|
|
if (this.props.pattern) {
|
|
pattern = this.props.pattern;
|
|
}
|
|
|
|
if (this.props.fieldRef) {
|
|
this.fieldRef = this.props.fieldRef;
|
|
}
|
|
|
|
// we always need to control the input so we need to set the value as "" by default
|
|
const value = this.state.value ?? "";
|
|
|
|
if (this.props.textarea === true) {
|
|
return (
|
|
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
|
|
<div className={classes["root"]}>
|
|
<textarea
|
|
maxLength={this.props.maxLength}
|
|
name={this.props.name}
|
|
required={this.props.required}
|
|
ref={this.props.fieldRef}
|
|
rows={4}
|
|
data-value={value}
|
|
onChange={this.onChange}
|
|
data-has-validation-errors={this.state.errors.length > 0}
|
|
className={
|
|
this.props.className ? [classes["textarea"], classes[this.props.className]].join(" ") : classes["textarea"]
|
|
}
|
|
/>
|
|
<div className={classes["fake-placeholder"]}>{this.props.fakeplaceholder}</div>
|
|
</div>
|
|
</Typography>
|
|
);
|
|
} else {
|
|
return (
|
|
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
|
|
<div className={classes["root"]}>
|
|
<input
|
|
{...this.getHtmlAttributes()}
|
|
ref={this.props.fieldRef}
|
|
pattern={pattern}
|
|
onChange={this.onChange}
|
|
onBlur={this.onBlur}
|
|
data-value={value}
|
|
data-has-validation-errors={this.state.errors.length > 0}
|
|
className={
|
|
this.props.className ? [classes["input"], classes[this.props.className]].join(" ") : classes["input"]
|
|
}
|
|
/>
|
|
<div className={classes["fake-placeholder"]}>{this.props.fakeplaceholder}</div>
|
|
</div>
|
|
</Typography>
|
|
);
|
|
}
|
|
}
|
|
|
|
// We filter the props we'll pass to the primitive input as they're useless for it
|
|
// It also avoids the console warning because of passing useless props to a primitive DOM element
|
|
private getHtmlAttributes() {
|
|
const htmlAttributes = { ...this.props };
|
|
|
|
delete htmlAttributes.disableValidation;
|
|
delete htmlAttributes.onErrors;
|
|
delete htmlAttributes.fieldRef;
|
|
delete htmlAttributes.className;
|
|
delete htmlAttributes.defaultValue;
|
|
|
|
for (const validator in Validators) {
|
|
delete (htmlAttributes as { [key: string]: any })[validator];
|
|
}
|
|
|
|
return htmlAttributes;
|
|
}
|
|
}
|