diff --git a/src/front/Components/DesignSystem/AutocompleteMultiSelect/Chip/classes.module.scss b/src/front/Components/DesignSystem/AutocompleteMultiSelect/Chip/classes.module.scss index 9ebc273e..f27024cd 100644 --- a/src/front/Components/DesignSystem/AutocompleteMultiSelect/Chip/classes.module.scss +++ b/src/front/Components/DesignSystem/AutocompleteMultiSelect/Chip/classes.module.scss @@ -17,4 +17,10 @@ background-color: var(--input-chip-hovered-background); border-color: var(--input-chip-hovered-border); } + + .label{ + display: flex; + align-items: center; + gap: 4px; + } } diff --git a/src/front/Components/DesignSystem/AutocompleteMultiSelect/Chip/index.tsx b/src/front/Components/DesignSystem/AutocompleteMultiSelect/Chip/index.tsx index 2bcfa230..42b792f8 100644 --- a/src/front/Components/DesignSystem/AutocompleteMultiSelect/Chip/index.tsx +++ b/src/front/Components/DesignSystem/AutocompleteMultiSelect/Chip/index.tsx @@ -5,22 +5,44 @@ import React from "react"; import IconButton from "../../IconButton"; import Typography, { ETypo, ETypoColor } from "../../Typography"; import classes from "./classes.module.scss"; +import { IOption } from "../../Dropdown/DropdownMenu/DropdownOption"; type IProps = { - text: string; + option: IOption; className?: string; onDelete?: () => void; }; export default function Chip(props: IProps) { - const { className, text, onDelete } = props; + const { className, option, onDelete } = props; return (
- {text} + {getLabelContent(option)} } onClick={onDelete} />
); } + +function getLabelContent(option: IOption) { + if (typeof option.label === "string") { + return ( + + {option.label} + + ); + } + + return ( + + + {`${option.label.text} , `} + + + {option.label.subtext} + + + ); +} diff --git a/src/front/Components/DesignSystem/AutocompleteMultiSelect/ChipContainer/classes.module.scss b/src/front/Components/DesignSystem/AutocompleteMultiSelect/ChipContainer/classes.module.scss index fa4937cd..c242d71a 100644 --- a/src/front/Components/DesignSystem/AutocompleteMultiSelect/ChipContainer/classes.module.scss +++ b/src/front/Components/DesignSystem/AutocompleteMultiSelect/ChipContainer/classes.module.scss @@ -2,7 +2,7 @@ .root { border-radius: var(--input-radius, 0px); - border: 1px solid var(--input-main-border-filled, #6d7e8a); + border: 1px solid var(--input-main-border-default, #6d7e8a); background: var(--input-background, #fff); svg { @@ -10,21 +10,15 @@ } &:hover { - border-radius: var(--input-radius, 0px); border: 1px solid var(--input-main-border-hovered, #b4bec5); - background: var(--input-background, #fff); } &[data-has-value="true"] { - border-radius: var(--input-radius, 0px); border: 1px solid var(--input-main-border-filled, #6d7e8a); - background: var(--input-background, #fff); } &[data-is-focused="true"] { - border-radius: var(--input-radius, 0px); border: 1px solid var(--input-main-border-focused, #005bcb); - background: var(--input-background, #fff); } &[data-is-disabled="true"] { diff --git a/src/front/Components/DesignSystem/AutocompleteMultiSelect/ChipContainer/index.tsx b/src/front/Components/DesignSystem/AutocompleteMultiSelect/ChipContainer/index.tsx index 5e926fdc..ba9472f2 100644 --- a/src/front/Components/DesignSystem/AutocompleteMultiSelect/ChipContainer/index.tsx +++ b/src/front/Components/DesignSystem/AutocompleteMultiSelect/ChipContainer/index.tsx @@ -1,6 +1,5 @@ import React, { useCallback, useEffect } from "react"; -import { getLabel } from "../../Dropdown"; import { IOption } from "../../Dropdown/DropdownMenu/DropdownOption"; import Chip from "../Chip"; import classes from "./classes.module.scss"; @@ -9,7 +8,7 @@ type IProps = { selectedOptions: IOption[]; onSelectedOptionsChange: (options: IOption[]) => void; onChange?: (input: string) => void; - value?: string; + searchValue?: string; placeholder?: string; disabled?: boolean; onClear?: () => void; @@ -21,7 +20,7 @@ export default function ChipContainer(props: IProps) { const { selectedOptions, onChange, - value: propValue, + searchValue, placeholder = "Rechercher", disabled = false, onFocus, @@ -30,7 +29,7 @@ export default function ChipContainer(props: IProps) { } = props; const [isFocused, setIsFocused] = React.useState(false); - const [value, setValue] = React.useState(propValue || ""); + const [value, setValue] = React.useState(searchValue || ""); const changeValue = useCallback( (value: string) => { @@ -64,16 +63,20 @@ export default function ChipContainer(props: IProps) { ); useEffect(() => { - if (propValue !== undefined) { - setValue(propValue); + if (searchValue !== undefined) { + setValue(searchValue); } - }, [propValue]); + }, [searchValue]); return ( -
+
0} + data-is-disabled={disabled}>
{selectedOptions.map((option) => ( - onChipDelete(option)} /> + onChipDelete(option)} /> ))} handleChange(null)} onFocus={openable.open} selectedOptions={selectedOptions ?? []} @@ -92,4 +92,4 @@ export default function AutocompleteMultiSelect(props: IProps) { /> ); -} +} \ No newline at end of file diff --git a/src/front/Components/DesignSystem/Dropdown/classes.module.scss b/src/front/Components/DesignSystem/Dropdown/classes.module.scss index d2b3d7b3..0ce12d9d 100644 --- a/src/front/Components/DesignSystem/Dropdown/classes.module.scss +++ b/src/front/Components/DesignSystem/Dropdown/classes.module.scss @@ -29,8 +29,8 @@ display: flex; padding: 0px var(--spacing-2, 16px); align-items: center; - flex: 1 0 0; gap: 4px; + flex: 1 0 0; } svg {