@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.
- package/.dependency-cruiser.js +2 -2
- package/dist/helpers/index.d.ts +1 -0
- package/dist/helpers/index.js +1 -0
- package/dist/helpers/index.js.map +1 -1
- package/dist/helpers/use-editable-control.d.ts +10 -0
- package/dist/helpers/use-editable-control.js +37 -0
- package/dist/helpers/use-editable-control.js.map +1 -0
- package/package.json +1 -1
- package/src/helpers/index.ts +1 -1
- package/src/helpers/use-editable-control.tsx +38 -0
package/.dependency-cruiser.js
CHANGED
@@ -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
|
],
|
package/dist/helpers/index.d.ts
CHANGED
package/dist/helpers/index.js
CHANGED
@@ -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
package/src/helpers/index.ts
CHANGED
@@ -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
|
+
}
|