@kwiz/fluentui 1.0.70 → 1.0.73

package/.dependency-cruiser.js

@@ -194,13 +194,13 @@ module.exports = {
     {
       name: "no-import-from-controls",
       severity: "error",
-      comment: "do not import controls into helpers, except for prompt control - by full path not from index",
+      comment: "do not import controls into helpers, except for prompt/please-wait control - by full path not from index",
       from: {
         path: "src/helpers/"
       },
       to: {
         path: "src/controls",
-        pathNot: "src/controls/prompt"
+        pathNot: ["src/controls/prompt", "src/controls/please-wait"]
       }
     }
   ],

package/dist/helpers/index.d.ts

@@ -4,4 +4,5 @@ export * from './drag-drop';
 export * from './hooks';
 export * from './hooks-events';
 export * from './use-alerts';
+export * from './use-editable-control';
 export * from './use-toast';

package/dist/helpers/index.js

@@ -4,5 +4,6 @@ export * from './drag-drop';
 export * from './hooks';
 export * from './hooks-events';
 export * from './use-alerts';
+export * from './use-editable-control';
 export * from './use-toast';
 //# sourceMappingURL=index.js.map

package/dist/helpers/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/helpers/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/helpers/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC"}

package/dist/helpers/use-editable-control.d.ts

@@ -0,0 +1,10 @@
+export declare function useEditableControl(): {
+    hasChanges: boolean;
+    hasChangesRef: import("react").MutableRefObject<boolean>;
+    setHasChanges: (newValue: import("react").SetStateAction<boolean>) => Promise<boolean>;
+    onSaveChanges: (worker: () => Promise<{
+        success: boolean;
+        message: string;
+    }>) => Promise<void>;
+    editablePageElement: import("react/jsx-runtime").JSX.Element;
+};

package/dist/helpers/use-editable-control.js

@@ -0,0 +1,37 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Toast, ToastTitle, Toaster, useId, useToastController } from "@fluentui/react-components";
+import { useCallback, useState } from "react";
+import { PleaseWait } from "../controls/please-wait";
+import { useEffectOnlyOnMount, useStateEX } from "./hooks";
+/* Provides useful helpers for tracking if control has changes, and handling the save changes with progress bar and on success/fail messages. */
+export function useEditableControl() {
+    const [showProgress, setShowProgress] = useState(false);
+    const [hasChanges, setHasChanges, hasChangesRef] = useStateEX(false, { skipUpdateIfSame: true });
+    const toasterId = useId("toaster");
+    const { dispatchToast } = useToastController(toasterId);
+    const onSaveChanges = useCallback((worker) => __awaiter(this, void 0, void 0, function* () {
+        setShowProgress(true);
+        const success = yield worker();
+        setShowProgress(false);
+        if (success.success !== true) {
+            dispatchToast(_jsx(Toast, { children: _jsx(ToastTitle, { children: success.message || "Could not save your changes." }) }), { intent: "warning", timeout: 10000 });
+        }
+        else {
+            setHasChanges(false);
+            dispatchToast(_jsx(Toast, { children: _jsx(ToastTitle, { children: success.message || "Changes saved!" }) }), { intent: "success", timeout: 2000 });
+        }
+    }), useEffectOnlyOnMount);
+    return {
+        hasChanges, hasChangesRef, setHasChanges, onSaveChanges, editablePageElement: _jsxs(_Fragment, { children: [showProgress && _jsx(PleaseWait, {}), _jsx(Toaster, { toasterId: toasterId })] })
+    };
+}
+//# sourceMappingURL=use-editable-control.js.map

package/dist/helpers/use-editable-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-editable-control.js","sourceRoot":"","sources":["../../src/helpers/use-editable-control.tsx"],"names":[],"mappings":";;;;;;;;;;AAAA,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACnG,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE3D,gJAAgJ;AAChJ,MAAM,UAAU,kBAAkB;IAC9B,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,CAAC,UAAU,EAAE,aAAa,EAAE,aAAa,CAAC,GAAG,UAAU,CAAC,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE,CAAC,CAAC;IAEjG,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC;IACnC,MAAM,EAAE,aAAa,EAAE,GAAG,kBAAkB,CAAC,SAAS,CAAC,CAAC;IAExD,MAAM,aAAa,GAAG,WAAW,CAAC,CAAO,MAA6D,EAAE,EAAE;QACtG,eAAe,CAAC,IAAI,CAAC,CAAC;QACtB,MAAM,OAAO,GAAG,MAAM,MAAM,EAAE,CAAC;QAC/B,eAAe,CAAC,KAAK,CAAC,CAAC;QAEvB,IAAI,OAAO,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;YAC3B,aAAa,CAAC,KAAC,KAAK,cAChB,KAAC,UAAU,cAAE,OAAO,CAAC,OAAO,IAAI,8BAA8B,GAAc,GACxE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;QACrD,CAAC;aACI,CAAC;YACF,aAAa,CAAC,KAAK,CAAC,CAAC;YACrB,aAAa,CAAC,KAAC,KAAK,cAChB,KAAC,UAAU,cAAE,OAAO,CAAC,OAAO,IAAI,gBAAgB,GAAc,GAC1D,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACpD,CAAC;IACL,CAAC,CAAA,EAAE,oBAAoB,CAAC,CAAC;IAEzB,OAAO;QACH,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,aAAa,EAAE,mBAAmB,EAAE,8BACzE,YAAY,IAAI,KAAC,UAAU,KAAG,EAC/B,KAAC,OAAO,IAAC,SAAS,EAAE,SAAS,GAAI,IAClC;KACN,CAAC;AACN,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kwiz/fluentui",
-    "version": "1.0.70",
+    "version": "1.0.73",
     "description": "KWIZ common controls for FluentUI",
     "module": "dist/index.js",
     "types": "dist/index.d.ts",

package/src/helpers/index.ts

@@ -4,5 +4,5 @@ export * from './drag-drop';
 export * from './hooks';
 export * from './hooks-events';
 export * from './use-alerts';
+export * from './use-editable-control';
 export * from './use-toast';
-

package/src/helpers/use-editable-control.tsx

@@ -0,0 +1,38 @@
+import { Toast, ToastTitle, Toaster, useId, useToastController } from "@fluentui/react-components";
+import { useCallback, useState } from "react";
+import { PleaseWait } from "../controls/please-wait";
+import { useEffectOnlyOnMount, useStateEX } from "./hooks";
+
+/* Provides useful helpers for tracking if control has changes, and handling the save changes with progress bar and on success/fail messages. */
+export function useEditableControl() {
+    const [showProgress, setShowProgress] = useState(false);
+    const [hasChanges, setHasChanges, hasChangesRef] = useStateEX(false, { skipUpdateIfSame: true });
+
+    const toasterId = useId("toaster");
+    const { dispatchToast } = useToastController(toasterId);
+
+    const onSaveChanges = useCallback(async (worker: () => Promise<{ success: boolean; message: string; }>) => {
+        setShowProgress(true);
+        const success = await worker();
+        setShowProgress(false);
+
+        if (success.success !== true) {
+            dispatchToast(<Toast>
+                <ToastTitle>{success.message || "Could not save your changes."}</ToastTitle>
+            </Toast>, { intent: "warning", timeout: 10000 });
+        }
+        else {
+            setHasChanges(false);
+            dispatchToast(<Toast>
+                <ToastTitle>{success.message || "Changes saved!"}</ToastTitle>
+            </Toast>, { intent: "success", timeout: 2000 });
+        }
+    }, useEffectOnlyOnMount);
+
+    return {
+        hasChanges, hasChangesRef, setHasChanges, onSaveChanges, editablePageElement: <>
+            {showProgress && <PleaseWait />}
+            <Toaster toasterId={toasterId} />
+        </>
+    };
+}