@kwiz/fluentui 1.0.70 → 1.0.73

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -194,13 +194,13 @@ module.exports = {
194
194
  {
195
195
  name: "no-import-from-controls",
196
196
  severity: "error",
197
- comment: "do not import controls into helpers, except for prompt control - by full path not from index",
197
+ comment: "do not import controls into helpers, except for prompt/please-wait control - by full path not from index",
198
198
  from: {
199
199
  path: "src/helpers/"
200
200
  },
201
201
  to: {
202
202
  path: "src/controls",
203
- pathNot: "src/controls/prompt"
203
+ pathNot: ["src/controls/prompt", "src/controls/please-wait"]
204
204
  }
205
205
  }
206
206
  ],
@@ -4,4 +4,5 @@ export * from './drag-drop';
4
4
  export * from './hooks';
5
5
  export * from './hooks-events';
6
6
  export * from './use-alerts';
7
+ export * from './use-editable-control';
7
8
  export * from './use-toast';
@@ -4,5 +4,6 @@ export * from './drag-drop';
4
4
  export * from './hooks';
5
5
  export * from './hooks-events';
6
6
  export * from './use-alerts';
7
+ export * from './use-editable-control';
7
8
  export * from './use-toast';
8
9
  //# sourceMappingURL=index.js.map
@@ -1 +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"}
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,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC"}
@@ -0,0 +1,10 @@
1
+ export declare function useEditableControl(): {
2
+ hasChanges: boolean;
3
+ hasChangesRef: import("react").MutableRefObject<boolean>;
4
+ setHasChanges: (newValue: import("react").SetStateAction<boolean>) => Promise<boolean>;
5
+ onSaveChanges: (worker: () => Promise<{
6
+ success: boolean;
7
+ message: string;
8
+ }>) => Promise<void>;
9
+ editablePageElement: import("react/jsx-runtime").JSX.Element;
10
+ };
@@ -0,0 +1,37 @@
1
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
+ return new (P || (P = Promise))(function (resolve, reject) {
4
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
8
+ });
9
+ };
10
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
11
+ import { Toast, ToastTitle, Toaster, useId, useToastController } from "@fluentui/react-components";
12
+ import { useCallback, useState } from "react";
13
+ import { PleaseWait } from "../controls/please-wait";
14
+ import { useEffectOnlyOnMount, useStateEX } from "./hooks";
15
+ /* Provides useful helpers for tracking if control has changes, and handling the save changes with progress bar and on success/fail messages. */
16
+ export function useEditableControl() {
17
+ const [showProgress, setShowProgress] = useState(false);
18
+ const [hasChanges, setHasChanges, hasChangesRef] = useStateEX(false, { skipUpdateIfSame: true });
19
+ const toasterId = useId("toaster");
20
+ const { dispatchToast } = useToastController(toasterId);
21
+ const onSaveChanges = useCallback((worker) => __awaiter(this, void 0, void 0, function* () {
22
+ setShowProgress(true);
23
+ const success = yield worker();
24
+ setShowProgress(false);
25
+ if (success.success !== true) {
26
+ dispatchToast(_jsx(Toast, { children: _jsx(ToastTitle, { children: success.message || "Could not save your changes." }) }), { intent: "warning", timeout: 10000 });
27
+ }
28
+ else {
29
+ setHasChanges(false);
30
+ dispatchToast(_jsx(Toast, { children: _jsx(ToastTitle, { children: success.message || "Changes saved!" }) }), { intent: "success", timeout: 2000 });
31
+ }
32
+ }), useEffectOnlyOnMount);
33
+ return {
34
+ hasChanges, hasChangesRef, setHasChanges, onSaveChanges, editablePageElement: _jsxs(_Fragment, { children: [showProgress && _jsx(PleaseWait, {}), _jsx(Toaster, { toasterId: toasterId })] })
35
+ };
36
+ }
37
+ //# sourceMappingURL=use-editable-control.js.map
@@ -0,0 +1 @@
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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kwiz/fluentui",
3
- "version": "1.0.70",
3
+ "version": "1.0.73",
4
4
  "description": "KWIZ common controls for FluentUI",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -4,5 +4,5 @@ export * from './drag-drop';
4
4
  export * from './hooks';
5
5
  export * from './hooks-events';
6
6
  export * from './use-alerts';
7
+ export * from './use-editable-control';
7
8
  export * from './use-toast';
8
-
@@ -0,0 +1,38 @@
1
+ import { Toast, ToastTitle, Toaster, useId, useToastController } from "@fluentui/react-components";
2
+ import { useCallback, useState } from "react";
3
+ import { PleaseWait } from "../controls/please-wait";
4
+ import { useEffectOnlyOnMount, useStateEX } from "./hooks";
5
+
6
+ /* Provides useful helpers for tracking if control has changes, and handling the save changes with progress bar and on success/fail messages. */
7
+ export function useEditableControl() {
8
+ const [showProgress, setShowProgress] = useState(false);
9
+ const [hasChanges, setHasChanges, hasChangesRef] = useStateEX(false, { skipUpdateIfSame: true });
10
+
11
+ const toasterId = useId("toaster");
12
+ const { dispatchToast } = useToastController(toasterId);
13
+
14
+ const onSaveChanges = useCallback(async (worker: () => Promise<{ success: boolean; message: string; }>) => {
15
+ setShowProgress(true);
16
+ const success = await worker();
17
+ setShowProgress(false);
18
+
19
+ if (success.success !== true) {
20
+ dispatchToast(<Toast>
21
+ <ToastTitle>{success.message || "Could not save your changes."}</ToastTitle>
22
+ </Toast>, { intent: "warning", timeout: 10000 });
23
+ }
24
+ else {
25
+ setHasChanges(false);
26
+ dispatchToast(<Toast>
27
+ <ToastTitle>{success.message || "Changes saved!"}</ToastTitle>
28
+ </Toast>, { intent: "success", timeout: 2000 });
29
+ }
30
+ }, useEffectOnlyOnMount);
31
+
32
+ return {
33
+ hasChanges, hasChangesRef, setHasChanges, onSaveChanges, editablePageElement: <>
34
+ {showProgress && <PleaseWait />}
35
+ <Toaster toasterId={toasterId} />
36
+ </>
37
+ };
38
+ }