allaw-ui 4.9.1 → 4.9.3

package/dist/components/atoms/filters/SingleFilter.d.ts

@@ -1,16 +1,18 @@
 import React from "react";
 export type SingleFilterProps = {
-    defaultSelectedValue?: string;
+    defaultSelectedValue?: string | string[];
     filterData: {
         value: string;
         name: string;
     }[];
-    setFilter: (selectedValue: string) => void;
+    setFilter: (selectedValue: string | string[]) => void;
     children?: React.ReactNode;
     required?: boolean;
     showNumIndic?: boolean;
     showBackdrop?: boolean;
     isStatusTag?: boolean;
+    displaySelectedValue?: boolean;
+    multiSelect?: boolean;
 };
-declare const SingleFilter: ({ showNumIndic, required, defaultSelectedValue, filterData, setFilter, showBackdrop, children, ...props }: SingleFilterProps) => React.JSX.Element;
+declare const SingleFilter: ({ showNumIndic, required, defaultSelectedValue, filterData, setFilter, showBackdrop, children, displaySelectedValue, multiSelect, ...props }: SingleFilterProps) => React.JSX.Element;
 export default SingleFilter;

package/dist/components/atoms/filters/SingleFilter.js

@@ -20,20 +20,55 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import styles from "./SingleFilter.module.css";
 import { FilterButtonPrimary, PrimaryButton } from "../buttons";
 import { TinyInfo } from "../typography";
 import React, { useState, useEffect, useRef } from "react";
 var SingleFilter = function (_a) {
-    var _b = _a.showNumIndic, showNumIndic = _b === void 0 ? false : _b, _c = _a.required, required = _c === void 0 ? true : _c, defaultSelectedValue = _a.defaultSelectedValue, filterData = _a.filterData, setFilter = _a.setFilter, _d = _a.showBackdrop, showBackdrop = _d === void 0 ? false : _d, children = _a.children, props = __rest(_a, ["showNumIndic", "required", "defaultSelectedValue", "filterData", "setFilter", "showBackdrop", "children"]);
-    var _e = useState(false), isOpen = _e[0], setIsOpen = _e[1];
-    var _f = useState(defaultSelectedValue || ""), selectedValue = _f[0], setSelectedValue = _f[1];
+    var _b = _a.showNumIndic, showNumIndic = _b === void 0 ? false : _b, _c = _a.required, required = _c === void 0 ? true : _c, defaultSelectedValue = _a.defaultSelectedValue, filterData = _a.filterData, setFilter = _a.setFilter, _d = _a.showBackdrop, showBackdrop = _d === void 0 ? false : _d, children = _a.children, _e = _a.displaySelectedValue, displaySelectedValue = _e === void 0 ? false : _e, _f = _a.multiSelect, multiSelect = _f === void 0 ? false : _f, props = __rest(_a, ["showNumIndic", "required", "defaultSelectedValue", "filterData", "setFilter", "showBackdrop", "children", "displaySelectedValue", "multiSelect"]);
+    var _g = useState(false), isOpen = _g[0], setIsOpen = _g[1];
+    var _h = useState(defaultSelectedValue || (multiSelect ? [] : "")), selectedValue = _h[0], setSelectedValue = _h[1];
     var filterRef = useRef(null);
+    // Fonction pour obtenir le nom affiché basé sur la valeur sélectionnée
+    var getDisplayName = function () {
+        if (!displaySelectedValue) {
+            return children;
+        }
+        if (multiSelect && Array.isArray(selectedValue)) {
+            if (selectedValue.length === 0) {
+                return children;
+            }
+            var firstSelectedItem = filterData.find(function (item) { return item.value === selectedValue[0]; });
+            var firstName = firstSelectedItem
+                ? firstSelectedItem.name
+                : selectedValue[0];
+            if (selectedValue.length === 1) {
+                return firstName;
+            }
+            return "".concat(firstName, " (+").concat(selectedValue.length - 1, ")");
+        }
+        if (!selectedValue || selectedValue === "") {
+            return children;
+        }
+        var selectedItem = filterData.find(function (item) { return item.value === selectedValue; });
+        return selectedItem ? selectedItem.name : children;
+    };
     useEffect(function () {
-        if (selectedValue) {
+        if (multiSelect
+            ? Array.isArray(selectedValue) && selectedValue.length > 0
+            : selectedValue) {
             setFilter(selectedValue);
         }
-    }, [selectedValue, setFilter]);
+    }, [selectedValue, setFilter, multiSelect]);
     useEffect(function () {
         var handleClickOutside = function (event) {
             if (filterRef.current &&
@@ -61,26 +96,56 @@ var SingleFilter = function (_a) {
     };
     var Item = function (_a) {
         var name = _a.name, value = _a.value;
-        return (React.createElement("button", { className: styles.item, onClick: function () {
+        var isSelected = multiSelect
+            ? Array.isArray(selectedValue) && selectedValue.includes(value)
+            : selectedValue === value;
+        var handleItemClick = function () {
+            if (multiSelect) {
+                var currentValues = Array.isArray(selectedValue) ? selectedValue : [];
+                if (currentValues.includes(value)) {
+                    setSelectedValue(currentValues.filter(function (v) { return v !== value; }));
+                }
+                else {
+                    setSelectedValue(__spreadArray(__spreadArray([], currentValues, true), [value], false));
+                }
+            }
+            else {
                 setSelectedValue(value);
                 handleClose();
-            } },
+            }
+        };
+        return (React.createElement("button", { className: styles.item, onClick: handleItemClick },
             React.createElement("div", { className: styles.round },
-                React.createElement("div", { className: selectedValue === value ? styles.selected : styles.notSelected })),
+                React.createElement("div", { className: isSelected ? styles.selected : styles.notSelected })),
             React.createElement("span", null, name)));
     };
     var SmallItem = function (_a) {
         var name = _a.name, value = _a.value;
-        return (React.createElement("button", { className: styles.smallItem, onClick: function () {
+        var isSelected = multiSelect
+            ? Array.isArray(selectedValue) && selectedValue.includes(value)
+            : selectedValue === value;
+        var handleItemClick = function () {
+            if (multiSelect) {
+                var currentValues = Array.isArray(selectedValue) ? selectedValue : [];
+                if (currentValues.includes(value)) {
+                    setSelectedValue(currentValues.filter(function (v) { return v !== value; }));
+                }
+                else {
+                    setSelectedValue(__spreadArray(__spreadArray([], currentValues, true), [value], false));
+                }
+            }
+            else {
                 setSelectedValue(value);
-            } },
+            }
+        };
+        return (React.createElement("button", { className: styles.smallItem, onClick: handleItemClick },
             React.createElement("div", { className: styles.round },
-                React.createElement("div", { className: selectedValue === value ? styles.selected : styles.notSelected })),
+                React.createElement("div", { className: isSelected ? styles.selected : styles.notSelected })),
             React.createElement("span", null, name)));
     };
     return (React.createElement("div", __assign({ className: styles.baseFilter, ref: filterRef }, props),
         React.createElement(FilterButtonPrimary, { onClick: handleButtonTap },
-            children,
+            getDisplayName(),
             React.createElement("p", { style: {
                     color: "#25BEEB",
                     fontWeight: "600",

package/dist/components/atoms/filters/SingleFilter.stories.d.ts

@@ -4,4 +4,7 @@ declare namespace _default {
 }
 export default _default;
 export const Default: any;
+export const WithDisplaySelectedValue: any;
+export const MultiSelectWithDisplaySelected: any;
+export const MultiSelectEmpty: any;
 import SingleFilter from "./SingleFilter";

package/dist/components/atoms/filters/SingleFilter.stories.js

@@ -18,7 +18,7 @@ export default {
 var Template = function (args) { return React.createElement(SingleFilter, __assign({}, args)); };
 export var Default = Template.bind({});
 Default.args = {
-    defaultSelectedValue: "Option 1",
+    defaultSelectedValue: "option1",
     filterData: [
         { value: "option1", name: "Option 1" },
         { value: "option2", name: "Option 2" },
@@ -31,3 +31,54 @@ Default.args = {
     showBackdrop: true,
     isStatusTag: false,
 };
+export var WithDisplaySelectedValue = Template.bind({});
+WithDisplaySelectedValue.args = {
+    defaultSelectedValue: "option2",
+    filterData: [
+        { value: "option1", name: "Médecin généraliste" },
+        { value: "option2", name: "Cardiologue" },
+        { value: "option3", name: "Dermatologue" },
+    ],
+    setFilter: function (selectedValue) { return console.log("Selected value:", selectedValue); },
+    children: "Spécialité",
+    displaySelectedValue: true,
+    required: true,
+    showNumIndic: false,
+    showBackdrop: true,
+    isStatusTag: false,
+};
+export var MultiSelectWithDisplaySelected = Template.bind({});
+MultiSelectWithDisplaySelected.args = {
+    defaultSelectedValue: ["option1", "option3"],
+    filterData: [
+        { value: "option1", name: "Médecin généraliste" },
+        { value: "option2", name: "Cardiologue" },
+        { value: "option3", name: "Dermatologue" },
+        { value: "option4", name: "Pédiatre" },
+        { value: "option5", name: "Gynécologue" },
+    ],
+    setFilter: function (selectedValue) { return console.log("Selected values:", selectedValue); },
+    children: "Spécialités",
+    displaySelectedValue: true,
+    multiSelect: true,
+    required: true,
+    showNumIndic: true,
+    showBackdrop: true,
+    isStatusTag: false,
+};
+export var MultiSelectEmpty = Template.bind({});
+MultiSelectEmpty.args = {
+    filterData: [
+        { value: "option1", name: "Médecin généraliste" },
+        { value: "option2", name: "Cardiologue" },
+        { value: "option3", name: "Dermatologue" },
+    ],
+    setFilter: function (selectedValue) { return console.log("Selected values:", selectedValue); },
+    children: "Choisir spécialités",
+    displaySelectedValue: true,
+    multiSelect: true,
+    required: true,
+    showNumIndic: true,
+    showBackdrop: true,
+    isStatusTag: false,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "4.9.1",
+  "version": "4.9.3",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",