4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Maxime Lalo 2023-05-16 17:51:17 +02:00
parent b06d9bf0ec
commit 65dee0696e
7 changed files with 81 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/front/Components/DesignSystem/Form/BaseField.tsx
View File

@ -90,8 +90,10 @@ export default abstract class BaseField<P extends IProps, S extends IState = ISt
} }
protected hasError(): boolean { protected hasError(): boolean {
if(!this.context) return false; return this.state.validationError !== null;
return this.state.validationError !== null && this.context.isInputFocused(this.props.name); // if(!this.context) return false;
// if(!this.context.hasOneFocusedInput() && this.state.validationError !== null) return true;
// return this.state.validationError !== null && this.context.isInputFocused(this.props.name);
} }
protected renderErrors(): JSX.Element[] | null { protected renderErrors(): JSX.Element[] | null {

115
src/front/Components/DesignSystem/Form/SelectField/index.tsx
View File

@ -15,7 +15,7 @@ type IProps = {
hasBorderRightCollapsed?: boolean; hasBorderRightCollapsed?: boolean;
placeholder?: string; placeholder?: string;
className?: string; className?: string;
name?: string; name: string;
disabled: boolean; disabled: boolean;
errors?: ValidationError; errors?: ValidationError;
}; };
@ -60,53 +60,58 @@ export default class SelectField extends React.Component<IProps, IState> {
public override render(): JSX.Element { public override render(): JSX.Element {
const selectedOption = this.state.selectedOption ?? this.props.selectedOption; const selectedOption = this.state.selectedOption ?? this.props.selectedOption;
return ( return (
<div <div className={classes["container"]}>
className={classNames(classes["root"], this.props.className)} <div
ref={this.rootRef} className={classNames(classes["root"], this.props.className)}
data-disabled={this.props.disabled.toString()} ref={this.rootRef}
data-errored={(this.state.errors !== null).toString()}> data-disabled={this.props.disabled.toString()}
{selectedOption && <input type="text" defaultValue={selectedOption.value as string} name={this.props.name} hidden />} data-errored={(this.state.errors !== null).toString()}>
<label {selectedOption && <input type="text" defaultValue={selectedOption.value as string} name={this.props.name} hidden />}
className={classNames(classes["container-label"])} <label
data-open={this.state.isOpen} className={classNames(classes["container-label"])}
onClick={this.toggle} data-open={this.state.isOpen}
data-border-right-collapsed={this.props.hasBorderRightCollapsed}> onClick={this.toggle}
<div className={classNames(classes["container-input"])}> data-border-right-collapsed={this.props.hasBorderRightCollapsed}>
{selectedOption && ( <div className={classNames(classes["container-input"])}>
<> {selectedOption && (
<span className={classNames(classes["icon"], classes["token-icon"])}>{selectedOption?.icon}</span> <>
<Typography typo={ITypo.P_18}> <span className={classNames(classes["icon"], classes["token-icon"])}>{selectedOption?.icon}</span>
<span className={classes["text"]}>{selectedOption?.label}</span> <Typography typo={ITypo.P_18}>
</Typography> <span className={classes["text"]}>{selectedOption?.label}</span>
</> </Typography>
)} </>
{!selectedOption && ( )}
<div className={classes["placeholder"]} data-open={(selectedOption ? true : false).toString()}> {!selectedOption && (
<Typography typo={ITypo.NAV_INPUT_16}> <div className={classes["placeholder"]} data-open={(selectedOption ? true : false).toString()}>
<span className={classes["text"]}>{this.props.placeholder ?? ""}</span> <Typography typo={ITypo.NAV_INPUT_16}>
</Typography> <span className={classes["text"]}>{this.props.placeholder ?? ""}</span>
</div> </Typography>
)} </div>
</div> )}
<Image className={classes["chevron-icon"]} data-open={this.state.isOpen} src={ChevronIcon} alt="chevron icon" /> </div>
</label> <Image className={classes["chevron-icon"]} data-open={this.state.isOpen} src={ChevronIcon} alt="chevron icon" />
</label>
<ul <ul
className={classes["container-ul"]} className={classes["container-ul"]}
data-open={this.state.isOpen} data-open={this.state.isOpen}
ref={this.contentRef} ref={this.contentRef}
style={{ style={{
height: this.state.listHeight + "px", height: this.state.listHeight + "px",
}}> }}>
{this.props.options.map((option, index) => ( {this.props.options.map((option, index) => (
<li key={`${index}-${option.value}`} className={classes["container-li"]} onClick={(e) => this.onSelect(option, e)}> <li
<div className={classes["token-icon"]}>{option.icon}</div> key={`${index}-${option.value}`}
<Typography typo={ITypo.P_18}>{option.label}</Typography> className={classes["container-li"]}
</li> onClick={(e) => this.onSelect(option, e)}>
))} <div className={classes["token-icon"]}>{option.icon}</div>
</ul> <Typography typo={ITypo.P_18}>{option.label}</Typography>
</li>
))}
</ul>
{this.state.isOpen && <div className={classes["backdrop"]} onClick={this.toggle} />} {this.state.isOpen && <div className={classes["backdrop"]} onClick={this.toggle} />}
</div>
{this.state.errors !== null && <div className={classes["errors-container"]}>{this.renderErrors()}</div>} {this.state.errors !== null && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
</div> </div>
); );
@ -172,16 +177,12 @@ export default class SelectField extends React.Component<IProps, IState> {
this.toggle(e); this.toggle(e);
} }
private renderErrors(): JSX.Element[] | null { private renderErrors(): JSX.Element | null {
if (!this.state.errors || !this.state.errors.constraints) return null; if (!this.state.errors) return null;
let errors: JSX.Element[] = []; return (
Object.entries(this.state.errors.constraints).forEach(([key, value]) => { <Typography typo={ITypo.CAPTION_14} color={ITypoColor.RED_FLASH}>
errors.push( {this.props.placeholder} est requis
<Typography key={key} typo={ITypo.CAPTION_14} color={ITypoColor.RED_FLASH}> </Typography>
{value} );
</Typography>,
);
});
return errors;
} }
} }

17
src/front/Components/DesignSystem/Form/index.tsx
View File

@ -10,6 +10,7 @@ export type IFormContext = {
onFieldChange: (name: string, field: IBaseField) => void; onFieldChange: (name: string, field: IBaseField) => void;
onFieldFocusChange: (name: string, field: IBaseField, focused: boolean) => void; onFieldFocusChange: (name: string, field: IBaseField, focused: boolean) => void;
isInputFocused: (name: string) => boolean; isInputFocused: (name: string) => boolean;
hasOneFocusedInput: () => boolean;
}; };
type IFields = { type IFields = {
@ -32,7 +33,14 @@ export type IProps = {
children?: ReactNode; children?: ReactNode;
}; };
export const FormContext = React.createContext<IFormContext>({ setField: () => {}, unSetField: () => {}, onFieldChange: () => {}, onFieldFocusChange: () => {}, isInputFocused: () => false}); export const FormContext = React.createContext<IFormContext>({
setField: () => {},
unSetField: () => {},
onFieldChange: () => {},
onFieldFocusChange: () => {},
isInputFocused: () => false,
hasOneFocusedInput: () => false,
});
export default class Form extends React.Component<IProps, IState> { export default class Form extends React.Component<IProps, IState> {
protected fields: IFields = {}; protected fields: IFields = {};
@ -56,6 +64,7 @@ export default class Form extends React.Component<IProps, IState> {
this.formRef = React.createRef(); this.formRef = React.createRef();
this.onFieldFocusChange = this.onFieldFocusChange.bind(this); this.onFieldFocusChange = this.onFieldFocusChange.bind(this);
this.isInputFocused = this.isInputFocused.bind(this); this.isInputFocused = this.isInputFocused.bind(this);
this.hasOneFocusedInput = this.hasOneFocusedInput.bind(this);
} }
public override render() { public override render() {
@ -67,6 +76,7 @@ export default class Form extends React.Component<IProps, IState> {
onFieldChange: this.onFieldChange, onFieldChange: this.onFieldChange,
onFieldFocusChange: this.onFieldFocusChange, onFieldFocusChange: this.onFieldFocusChange,
isInputFocused: this.isInputFocused, isInputFocused: this.isInputFocused,
hasOneFocusedInput: this.hasOneFocusedInput,
}}> }}>
<form className={this.props.className} ref={this.formRef} onSubmit={this.onSubmit}> <form className={this.props.className} ref={this.formRef} onSubmit={this.onSubmit}>
{this.props.children} {this.props.children}
@ -125,8 +135,11 @@ export default class Form extends React.Component<IProps, IState> {
delete this.fields[name]; delete this.fields[name];
} }
protected hasOneFocusedInput() {
return this.state.inputFocused.focused;
}
protected isInputFocused(name: string) { protected isInputFocused(name: string) {
console.log(this.state.inputFocused);
return this.state.inputFocused.name === name && this.state.inputFocused.focused; return this.state.inputFocused.name === name && this.state.inputFocused.focused;
} }

1
src/front/Components/Layouts/DesignSystem/index.tsx
View File

@ -200,6 +200,7 @@ export default class DesignSystem extends BasePage<IProps, IState> {
<div className={classes["sub-section"]}> <div className={classes["sub-section"]}>
<div className={classes["folder-conatainer"]}> <div className={classes["folder-conatainer"]}>
<SelectField <SelectField
name="select"
options={selectOptions} options={selectOptions}
onChange={this.onSelectedOption} onChange={this.onSelectedOption}
placeholder={"Type d'acte"} placeholder={"Type d'acte"}

1
src/front/Components/Layouts/Folder/CreateFolder/index.tsx
View File

@ -102,6 +102,7 @@ class CreateFolderClass extends BasePage<IPropsClass, IState> {
/> />
<SelectField <SelectField
options={this.state.deedTypesOptions} options={this.state.deedTypesOptions}
name="deed"
placeholder={"Type d'acte"} placeholder={"Type d'acte"}
onChange={this.onActTypeChange} onChange={this.onActTypeChange}
errors={this.state.validationError.find((error) => error.property === "deed")} errors={this.state.validationError.find((error) => error.property === "deed")}

2
src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx
View File

@ -58,7 +58,7 @@ class UpdateFolderMetadataClass extends BasePage<IPropsClass, IState> {
placeholder="Numéro de dossier" placeholder="Numéro de dossier"
defaultValue={this.state.selectedFolder?.folder_number} defaultValue={this.state.selectedFolder?.folder_number}
/> />
<Select options={[]} placeholder={"Type d'acte"} selectedOption={deedOption} disabled /> <Select name="deed" options={[]} placeholder={"Type d'acte"} selectedOption={deedOption} disabled />
<TextField placeholder="Ouverture du dossier" defaultValue={openingDate.toLocaleDateString("fr-FR")} disabled /> <TextField placeholder="Ouverture du dossier" defaultValue={openingDate.toLocaleDateString("fr-FR")} disabled />
</div> </div>

1
src/front/Components/Layouts/FolderArchived/UpdateFolderMetadata/index.tsx
View File

@ -50,6 +50,7 @@ class UpdateFolderMetadataClass extends BasePage<IProps, IState> {
<TextField name="input field" placeholder="Intitulé du dossier" /> <TextField name="input field" placeholder="Intitulé du dossier" />
<TextField name="input field" placeholder="Numéro de dossier" /> <TextField name="input field" placeholder="Numéro de dossier" />
<Select <Select
name="deed"
options={selectOptions} options={selectOptions}
onChange={this.onSelectedOption} onChange={this.onSelectedOption}
placeholder={"Type d'acte"} placeholder={"Type d'acte"}