allaw-ui 4.0.0 → 4.0.2

package/dist/components/atoms/datepickers/Datepicker.d.ts

@@ -9,6 +9,7 @@ export interface DatepickerProps {
     yearDropdownItemNumber?: number;
     maxDaysInPast?: number;
     minDate?: Date;
+    maxDate?: Date;
     disableFutur?: Boolean;
 }
 declare const Datepicker: React.FC<DatepickerProps>;

package/dist/components/atoms/datepickers/Datepicker.js

@@ -48,7 +48,7 @@ var CustomInput = forwardRef(function (_a, ref) {
 });
 CustomInput.displayName = "CustomInput";
 var Datepicker = function (_a) {
-    var value = _a.value, onChange = _a.onChange, _b = _a.placeholder, placeholder = _b === void 0 ? "Sélectionner une date" : _b, _c = _a.yearDropdownItemNumber, yearDropdownItemNumber = _c === void 0 ? 10 : _c, maxDaysInPast = _a.maxDaysInPast, minDate = _a.minDate, _d = _a.disableFutur, disableFutur = _d === void 0 ? true : _d;
+    var value = _a.value, onChange = _a.onChange, _b = _a.placeholder, placeholder = _b === void 0 ? "Sélectionner une date" : _b, _c = _a.yearDropdownItemNumber, yearDropdownItemNumber = _c === void 0 ? 10 : _c, maxDaysInPast = _a.maxDaysInPast, minDate = _a.minDate, maxDate = _a.maxDate, _d = _a.disableFutur, disableFutur = _d === void 0 ? true : _d;
     var _e = useState(value), selectedDate = _e[0], setSelectedDate = _e[1];
     var _f = useState(false), isOpen = _f[0], setIsOpen = _f[1];
     var _g = useState({ top: 0, left: 0 }), position = _g[0], setPosition = _g[1];
@@ -146,6 +146,6 @@ var Datepicker = function (_a) {
             ReactDOM.createPortal(React.createElement("div", { ref: calendarRef, className: "datepicker-portal ".concat(placement), style: __assign({ left: "".concat(position.left, "px") }, (placement === "bottom"
                     ? { top: "".concat(position.top, "px") }
                     : { top: "".concat(position.top, "px") })) },
-                React.createElement(ReactDatePicker, { selected: selectedDate, onChange: handleDateChange, locale: fr, inline: true, dateFormat: "dd MMMM yyyy", calendarClassName: "custom-calendar", showMonthDropdown: true, showYearDropdown: true, dropdownMode: "select", maxDate: disableFutur ? new Date() : undefined, minDate: calculatedMinDate })), document.body)));
+                React.createElement(ReactDatePicker, { selected: selectedDate, onChange: handleDateChange, locale: fr, inline: true, dateFormat: "dd MMMM yyyy", calendarClassName: "custom-calendar", showMonthDropdown: true, showYearDropdown: true, dropdownMode: "select", maxDate: maxDate || (disableFutur ? new Date() : undefined), minDate: calculatedMinDate })), document.body)));
 };
 export default Datepicker;

package/dist/components/molecules/contactCard/ContactCardEdit.d.ts

@@ -9,6 +9,12 @@ export interface ContactCardEditProps {
     birthDate?: Date;
     hideActions?: boolean;
     controlled?: boolean;
+    hasExternalChanges?: boolean;
+    datepickerYearDropdownItemNumber?: number;
+    datepickerMaxDaysInPast?: number;
+    datepickerMinDate?: Date;
+    datepickerMaxDate?: Date;
+    datepickerDisableFutur?: boolean;
     editData?: {
         firstName: string;
         lastName: string;

package/dist/components/molecules/contactCard/ContactCardEdit.js

@@ -16,8 +16,8 @@ import Select from "../../atoms/selects/Select";
 import Datepicker from "../../atoms/datepickers/Datepicker";
 import IconButton from "../../atoms/buttons/IconButton";
 var ContactCardEdit = function (_a) {
-    var name = _a.name, status = _a.status, phone = _a.phone, email = _a.email, _b = _a.clientOfStudy, clientOfStudy = _b === void 0 ? false : _b, _c = _a.officeName, officeName = _c === void 0 ? "du cabinet" : _c, birthDate = _a.birthDate, _d = _a.hideActions, hideActions = _d === void 0 ? false : _d, _e = _a.controlled, controlled = _e === void 0 ? false : _e, externalEditData = _a.editData, onEditDataChange = _a.onEditDataChange, onSave = _a.onSave, onCancel = _a.onCancel;
-    var _f = useState({
+    var name = _a.name, status = _a.status, phone = _a.phone, email = _a.email, _b = _a.clientOfStudy, clientOfStudy = _b === void 0 ? false : _b, _c = _a.officeName, officeName = _c === void 0 ? "du cabinet" : _c, birthDate = _a.birthDate, _d = _a.hideActions, hideActions = _d === void 0 ? false : _d, _e = _a.controlled, controlled = _e === void 0 ? false : _e, _f = _a.hasExternalChanges, hasExternalChanges = _f === void 0 ? false : _f, _g = _a.datepickerYearDropdownItemNumber, datepickerYearDropdownItemNumber = _g === void 0 ? 10 : _g, datepickerMaxDaysInPast = _a.datepickerMaxDaysInPast, datepickerMinDate = _a.datepickerMinDate, datepickerMaxDate = _a.datepickerMaxDate, _h = _a.datepickerDisableFutur, datepickerDisableFutur = _h === void 0 ? true : _h, externalEditData = _a.editData, onEditDataChange = _a.onEditDataChange, onSave = _a.onSave, onCancel = _a.onCancel;
+    var _j = useState({
         firstName: "",
         lastName: "",
         status: status,
@@ -25,7 +25,9 @@ var ContactCardEdit = function (_a) {
         phone: phone,
         email: email,
         birthDate: birthDate,
-    }), internalEditData = _f[0], setInternalEditData = _f[1];
+    }), internalEditData = _j[0], setInternalEditData = _j[1];
+    // État pour suivre les modifications
+    var _k = useState(false), hasChanges = _k[0], setHasChanges = _k[1];
     // Utiliser les données externes si contrôlé, sinon les données internes
     var editData = controlled && externalEditData ? externalEditData : internalEditData;
     var updateEditData = function (updater) {
@@ -59,6 +61,41 @@ var ContactCardEdit = function (_a) {
         officeName,
         controlled,
     ]);
+    // Détection des changements
+    useEffect(function () {
+        var _a, _b;
+        if (!controlled) {
+            var nameParts = name.split(" ");
+            var originalData = {
+                firstName: nameParts[0] || "",
+                lastName: nameParts.slice(1).join(" ") || "",
+                status: status,
+                clientType: clientOfStudy ? "Client ".concat(officeName) : "Non client",
+                phone: phone,
+                email: email,
+                birthDate: birthDate,
+            };
+            var currentData = editData;
+            var changed = originalData.firstName !== currentData.firstName ||
+                originalData.lastName !== currentData.lastName ||
+                originalData.status !== currentData.status ||
+                originalData.clientType !== currentData.clientType ||
+                originalData.phone !== currentData.phone ||
+                originalData.email !== currentData.email ||
+                ((_a = originalData.birthDate) === null || _a === void 0 ? void 0 : _a.getTime()) !== ((_b = currentData.birthDate) === null || _b === void 0 ? void 0 : _b.getTime());
+            setHasChanges(changed);
+        }
+    }, [
+        editData,
+        name,
+        status,
+        phone,
+        email,
+        birthDate,
+        clientOfStudy,
+        officeName,
+        controlled,
+    ]);
     var handleSave = function () {
         onSave === null || onSave === void 0 ? void 0 : onSave(editData);
     };
@@ -78,7 +115,7 @@ var ContactCardEdit = function (_a) {
         }
         onCancel === null || onCancel === void 0 ? void 0 : onCancel();
     };
-    return (React.createElement("div", { className: styles.contactCardEdit },
+    return (React.createElement("div", { className: "".concat(styles.contactCardEdit, " ").concat((controlled ? hasExternalChanges : hasChanges) ? styles.modified : "") },
         React.createElement("div", { className: styles.contentContainer },
             React.createElement("div", { className: styles.nameTagContainer },
                 React.createElement("div", { className: styles.nameInputsContainer },
@@ -111,7 +148,7 @@ var ContactCardEdit = function (_a) {
                         React.createElement("i", { className: "allaw-icon-user ".concat(styles.infoIcon) }),
                         React.createElement(Datepicker, { value: editData.birthDate, onChange: function (date) {
                                 return updateEditData(function (prev) { return (__assign(__assign({}, prev), { birthDate: date })); });
-                            }, placeholder: "Date de naissance" })))))),
+                            }, placeholder: "Date de naissance", yearDropdownItemNumber: datepickerYearDropdownItemNumber, maxDaysInPast: datepickerMaxDaysInPast, minDate: datepickerMinDate, maxDate: datepickerMaxDate, disableFutur: datepickerDisableFutur })))))),
         !hideActions && (React.createElement("div", { className: styles.actionsContainer },
             React.createElement("div", { className: styles.editActionsContainer },
                 React.createElement(IconButton, { style: "largeFilled", iconName: "allaw-icon-check", onClick: handleSave, color: "#29a36a" }),

package/dist/components/molecules/contactCard/ContactCardEdit.stories.d.ts

@@ -33,6 +33,22 @@ declare namespace _default {
             let control_6: string;
             export { control_6 as control };
         }
+        namespace datepickerYearDropdownItemNumber {
+            let control_7: string;
+            export { control_7 as control };
+        }
+        namespace datepickerMinDate {
+            let control_8: string;
+            export { control_8 as control };
+        }
+        namespace datepickerMaxDate {
+            let control_9: string;
+            export { control_9 as control };
+        }
+        namespace datepickerDisableFutur {
+            let control_10: string;
+            export { control_10 as control };
+        }
     }
     export namespace args {
         let name_1: string;

package/dist/components/molecules/contactCard/ContactCardEdit.stories.js

@@ -29,6 +29,10 @@ export default {
             },
         },
         birthDate: { control: "date" },
+        datepickerYearDropdownItemNumber: { control: "number" },
+        datepickerMinDate: { control: "date" },
+        datepickerMaxDate: { control: "date" },
+        datepickerDisableFutur: { control: "boolean" },
     },
     args: {
         name: "Jane DOE",
@@ -63,6 +67,18 @@ export var Default = Template.bind({});
 export var WithBirthDate = Template.bind({});
 WithBirthDate.args = {
     birthDate: new Date("1990-05-15"),
+    datepickerYearDropdownItemNumber: 120,
+    datepickerMinDate: (function () {
+        var date = new Date();
+        date.setFullYear(date.getFullYear() - 120);
+        return date;
+    })(),
+    datepickerMaxDate: (function () {
+        var date = new Date();
+        date.setFullYear(date.getFullYear() - 10);
+        return date;
+    })(),
+    datepickerDisableFutur: false,
 };
 export var WithoutBirthDate = Template.bind({});
 WithoutBirthDate.args = {

package/dist/components/molecules/contactCard/contactCardEdit.module.css

@@ -11,6 +11,11 @@
   justify-content: space-between;
   align-items: stretch;
   align-self: stretch;
+  transition: border-color 0.3s ease;
+}
+
+.contactCardEdit.modified {
+  border-color: #25beeb;
 }
 
 .contentContainer {

package/package.json

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