diff --git a/src/front/Components/DesignSystem/MultiSelect/index.tsx b/src/front/Components/DesignSystem/MultiSelect/index.tsx index 516ab2ac..7c7b3cf3 100644 --- a/src/front/Components/DesignSystem/MultiSelect/index.tsx +++ b/src/front/Components/DesignSystem/MultiSelect/index.tsx @@ -15,24 +15,25 @@ type IProps = { defaultValue?: PropsValue; value?: PropsValue; isMulti?: boolean; - shouldCloseMenuOnSelect?: boolean; + shouldCloseMenuOnSelect: boolean; isOptionDisabled?: (option: IOption, selectValue: Options) => boolean; }; type IState = { - isSelectedOption: boolean; isFocused: boolean; + selectedOptions: MultiValue; }; export default class MultiSelect extends React.Component { public static defaultProps: Partial = { placeholder: "Sélectionner une option...", + shouldCloseMenuOnSelect: false, }; constructor(props: IProps) { super(props); this.state = { - isSelectedOption: this.props.defaultValue ? true : false, isFocused: false, + selectedOptions: [], }; this.onChange = this.onChange.bind(this); this.onEmptyResearch = this.onEmptyResearch.bind(this); @@ -42,12 +43,12 @@ export default class MultiSelect extends React.Component { public override render(): JSX.Element { return (
-
+
= 1 && classes["active"])}> {this.props.label &&
{this.props.label}
} {this.props.placeholder && (
+ data-selected={(this.state.isFocused || this.state.selectedOptions.length >= 1).toString()}> {this.props.placeholder}
)} @@ -72,6 +73,17 @@ export default class MultiSelect extends React.Component { ); } + public override componentDidMount(): void { + if (this.props.defaultValue) { + if (Array.isArray(this.props.defaultValue)) { + this.setState({ selectedOptions: this.props.defaultValue }); + } + if ("label" in this.props.defaultValue) { + this.setState({ selectedOptions: [this.props.defaultValue] }); + } + } + } + private onFocus() { this.setState({ isFocused: true }); } @@ -82,10 +94,15 @@ export default class MultiSelect extends React.Component { private onChange(newValue: MultiValue, actionMeta: ActionMeta) { this.props.onChange && this.props.onChange(newValue, actionMeta); - this.setState({ isSelectedOption: newValue.length > 0 }); + this.setState({ + selectedOptions: newValue, + }); } private onEmptyResearch() { - return "Aucune option correspondante"; + if (this.state.selectedOptions.length === this.props.options.length) { + return null; + } + return "Aucune option trouvée"; } } diff --git a/src/front/Components/Layouts/Folder/CreateFolder/index.tsx b/src/front/Components/Layouts/Folder/CreateFolder/index.tsx index 34b16b16..6025b7e1 100644 --- a/src/front/Components/Layouts/Folder/CreateFolder/index.tsx +++ b/src/front/Components/Layouts/Folder/CreateFolder/index.tsx @@ -112,6 +112,10 @@ export default class CreateFolder extends BasePage { options={this.collaboratorsOptions} placeholder="Sélectionner les collaborateurs pouvant accéder au dossier" onChange={this.onCollaboratorsChange} + defaultValue={{ + label: "John Doe", + value: "john_doe", + }} />
)}