@kwiz/fluentui 1.0.56 → 1.0.59
Sign up to get free protection for your applications and to get access to all the features.
- package/.dependency-cruiser.js +399 -0
- package/dist/controls/ColorPickerDialog.js +1 -1
- package/dist/controls/ColorPickerDialog.js.map +1 -1
- package/dist/controls/button.js +1 -1
- package/dist/controls/button.js.map +1 -1
- package/dist/controls/canvas/DrawPad.js +1 -1
- package/dist/controls/canvas/DrawPad.js.map +1 -1
- package/dist/controls/date.js +2 -2
- package/dist/controls/date.js.map +1 -1
- package/dist/controls/diagram-picker.js +2 -2
- package/dist/controls/diagram-picker.js.map +1 -1
- package/dist/controls/dropdown.js +1 -1
- package/dist/controls/dropdown.js.map +1 -1
- package/dist/controls/file-upload.js +16 -10
- package/dist/controls/file-upload.js.map +1 -1
- package/dist/controls/index.d.ts +31 -0
- package/dist/controls/index.js +32 -0
- package/dist/controls/index.js.map +1 -0
- package/dist/controls/input.js +1 -1
- package/dist/controls/input.js.map +1 -1
- package/dist/controls/kwizoverflow.js +1 -1
- package/dist/controls/kwizoverflow.js.map +1 -1
- package/dist/controls/menu.js +2 -2
- package/dist/controls/menu.js.map +1 -1
- package/dist/controls/prompt.js +2 -2
- package/dist/controls/prompt.js.map +1 -1
- package/dist/controls/search.js +1 -1
- package/dist/controls/search.js.map +1 -1
- package/dist/controls/section.js +1 -1
- package/dist/controls/section.js.map +1 -1
- package/dist/controls/vertical-content.js +1 -1
- package/dist/controls/vertical-content.js.map +1 -1
- package/dist/helpers/block-nav.d.ts +11 -0
- package/dist/helpers/block-nav.js +79 -0
- package/dist/helpers/block-nav.js.map +1 -0
- package/dist/helpers/{context.d.ts → context-export.d.ts} +4 -3
- package/dist/helpers/context-export.js +23 -0
- package/dist/helpers/context-export.js.map +1 -0
- package/dist/helpers/context-internal.d.ts +4 -0
- package/dist/helpers/{context.js → context-internal.js} +1 -1
- package/dist/helpers/context-internal.js.map +1 -0
- package/dist/helpers/drag-drop/drag-drop-container.d.ts +1 -2
- package/dist/helpers/drag-drop/drag-drop-container.js.map +1 -1
- package/dist/helpers/drag-drop/drag-drop-context-internal.d.ts +4 -0
- package/dist/helpers/drag-drop/drag-drop-context-internal.js +9 -0
- package/dist/helpers/drag-drop/drag-drop-context-internal.js.map +1 -0
- package/dist/helpers/drag-drop/drag-drop-context.d.ts +1 -9
- package/dist/helpers/drag-drop/drag-drop-context.js +2 -9
- package/dist/helpers/drag-drop/drag-drop-context.js.map +1 -1
- package/dist/helpers/drag-drop/drag-drop.types.d.ts +19 -0
- package/dist/helpers/drag-drop/drag-drop.types.js +2 -0
- package/dist/helpers/drag-drop/drag-drop.types.js.map +1 -0
- package/dist/helpers/drag-drop/{exports.d.ts → index.d.ts} +2 -4
- package/dist/helpers/drag-drop/{exports.js → index.js} +1 -1
- package/dist/helpers/drag-drop/index.js.map +1 -0
- package/dist/helpers/drag-drop/use-draggable.d.ts +1 -8
- package/dist/helpers/drag-drop/use-draggable.js +1 -1
- package/dist/helpers/drag-drop/use-draggable.js.map +1 -1
- package/dist/helpers/drag-drop/use-droppable.d.ts +2 -9
- package/dist/helpers/drag-drop/use-droppable.js +1 -2
- package/dist/helpers/drag-drop/use-droppable.js.map +1 -1
- package/dist/helpers/hooks-events.d.ts +21 -0
- package/dist/helpers/hooks-events.js +146 -0
- package/dist/helpers/hooks-events.js.map +1 -0
- package/dist/helpers/hooks.d.ts +0 -69
- package/dist/helpers/hooks.js +1 -310
- package/dist/helpers/hooks.js.map +1 -1
- package/dist/helpers/index.d.ts +7 -0
- package/dist/helpers/index.js +8 -0
- package/dist/helpers/index.js.map +1 -0
- package/dist/helpers/use-alerts.d.ts +14 -0
- package/dist/helpers/use-alerts.js +65 -0
- package/dist/helpers/use-alerts.js.map +1 -0
- package/dist/helpers/use-toast.d.ts +18 -0
- package/dist/helpers/use-toast.js +17 -0
- package/dist/helpers/use-toast.js.map +1 -0
- package/dist/index.d.ts +3 -36
- package/dist/index.js +3 -35
- package/dist/index.js.map +1 -1
- package/dist/styles/index.d.ts +1 -0
- package/dist/styles/index.js +2 -0
- package/dist/styles/index.js.map +1 -0
- package/package.json +5 -3
- package/src/controls/ColorPickerDialog.tsx +1 -1
- package/src/controls/button.tsx +1 -1
- package/src/controls/canvas/DrawPad.tsx +1 -1
- package/src/controls/date.tsx +2 -2
- package/src/controls/diagram-picker.tsx +2 -2
- package/src/controls/dropdown.tsx +1 -1
- package/src/controls/file-upload.tsx +18 -11
- package/src/controls/index.ts +31 -0
- package/src/controls/input.tsx +1 -1
- package/src/controls/kwizoverflow.tsx +1 -1
- package/src/controls/menu.tsx +2 -2
- package/src/controls/prompt.tsx +2 -2
- package/src/controls/search.tsx +1 -1
- package/src/controls/section.tsx +1 -1
- package/src/controls/vertical-content.tsx +1 -1
- package/src/helpers/block-nav.tsx +89 -0
- package/src/helpers/context-export.ts +53 -0
- package/src/helpers/context-internal.ts +17 -0
- package/src/helpers/drag-drop/drag-drop-container.tsx +1 -2
- package/src/helpers/drag-drop/drag-drop-context-internal.tsx +10 -0
- package/src/helpers/drag-drop/drag-drop-context.tsx +5 -15
- package/src/helpers/drag-drop/drag-drop.types.ts +21 -0
- package/src/helpers/drag-drop/{exports.ts → index.ts} +2 -4
- package/src/helpers/drag-drop/use-draggable.ts +2 -10
- package/src/helpers/drag-drop/use-droppable.ts +3 -12
- package/src/helpers/hooks-events.ts +153 -0
- package/src/helpers/hooks.tsx +1 -360
- package/src/helpers/index.ts +8 -0
- package/src/helpers/use-alerts.tsx +75 -0
- package/src/helpers/use-toast.tsx +30 -0
- package/src/index.ts +3 -37
- package/src/styles/index.ts +1 -0
- package/dist/helpers/context.js.map +0 -1
- package/dist/helpers/drag-drop/exports.js.map +0 -1
- package/src/helpers/context.ts +0 -40
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"drag-drop-context.js","sourceRoot":"","sources":["../../../src/helpers/drag-drop/drag-drop-context.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;
|
1
|
+
{"version":3,"file":"drag-drop-context.js","sourceRoot":"","sources":["../../../src/helpers/drag-drop/drag-drop-context.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEjD,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAE3F,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,UAAU,kBAAkB,CAGhC,IAGD;IACG,MAAM,eAAe,GAAG,0BAA0B,EAAE,CAAC;IACrD,MAAM,WAAW,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACtD,MAAM,WAAW,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACtD,MAAM,IAAI,GAAG,YAAY,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,CAAC,CAAC;IAC1C,MAAM,IAAI,GAAG,YAAY,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,CAAC,CAAC;IAC1C,MAAM,aAAa,GAAG,WAAW,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,eAAe,CAAC,UAAU;QAC/E,2DAA2D;WACxD,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,eAAe,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAE7E,OAAO;QACH,eAAe;QACf,IAAI;QACJ,IAAI;QACJ,6DAA6D;QAC7D,aAAa;QACb,WAAW,EAAE,WAAW,IAAI,CAAC,WAAW;YACpC,CAAC,CAAC,IAAI,CAAC,OAAO;YACd,CAAC,CAAC,CAAC,WAAW,IAAI,WAAW;gBACzB,CAAC,CAAC,IAAI,CAAC,OAAO;gBACd,4BAA4B;gBAC5B,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO;KACxD,CAAC;AACN,CAAC;AACD,MAAM,UAAU,0BAA0B;IACtC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,UAAU,CAA2B,IAAI,CAAC,CAAC;IAE3E,eAAe;IACf,MAAM,GAAG,GAAqB;QAC1B,UAAU,EAAE,CAAC,iBAAiB,CAAC,QAAQ,CAAC;QACxC,QAAQ,EAAE,WAAW;KACxB,CAAC;IAEF,OAAO,GAAG,CAAC;AACf,CAAC;AAID,MAAM,CAAC,MAAM,uBAAuB,GAA6D,CAAC,KAAK,EAAE,EAAE;IACvG,MAAM,QAAQ,GAAG,0BAA0B,EAAE,CAAC;IAC9C,OAAO,KAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,YAC5C,KAAC,WAAW,IAAC,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,YAC9C,KAAK,CAAC,QAAQ,GACL,GACS,CAAC;AAChC,CAAC,CAAA"}
|
@@ -0,0 +1,19 @@
|
|
1
|
+
export interface iDraggedItemType<DragType extends string> {
|
2
|
+
type: DragType;
|
3
|
+
}
|
4
|
+
export interface iDraggableProps<ItemType extends iDraggedItemType<string>> {
|
5
|
+
item: ItemType;
|
6
|
+
onBeginDrag?: () => void;
|
7
|
+
onEndDrag?: (dropResult: any) => void;
|
8
|
+
}
|
9
|
+
export interface iDroppableProps<DropTypes extends string, ItemTypes extends iDraggedItemType<DropTypes>> {
|
10
|
+
acceptTypes: DropTypes[];
|
11
|
+
onItemDrop: (item: ItemTypes) => void;
|
12
|
+
onHover?: (item: ItemTypes) => void;
|
13
|
+
onDrop?: () => void;
|
14
|
+
}
|
15
|
+
export interface iDragDropContext {
|
16
|
+
isDragging: boolean;
|
17
|
+
dragItem: iDraggedItemType<string>;
|
18
|
+
setDragItem: (value: iDraggedItemType<string>) => void;
|
19
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"drag-drop.types.js","sourceRoot":"","sources":["../../../src/helpers/drag-drop/drag-drop.types.ts"],"names":[],"mappings":""}
|
@@ -1,10 +1,8 @@
|
|
1
1
|
import { NativeTypes } from 'react-dnd-html5-backend';
|
2
|
-
import { iDraggedItemType } from './
|
3
|
-
import { iDroppableProps } from './use-droppable';
|
2
|
+
import { iDraggedItemType, iDroppableProps } from './drag-drop.types';
|
4
3
|
export { DragDropContainer } from './drag-drop-container';
|
5
4
|
export { DragDropContextProvider, useDragDropContext } from "./drag-drop-context";
|
6
|
-
export type { iDraggedItemType } from "./
|
7
|
-
export type { iDroppableProps } from "./use-droppable";
|
5
|
+
export type { iDraggedItemType, iDroppableProps } from "./drag-drop.types";
|
8
6
|
type fileNativeType = typeof NativeTypes.FILE;
|
9
7
|
interface dragFiles extends iDraggedItemType<fileNativeType> {
|
10
8
|
files: FileList;
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/helpers/drag-drop/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC"}
|
@@ -1,12 +1,5 @@
|
|
1
1
|
import { ConnectDragSource } from 'react-dnd';
|
2
|
-
|
3
|
-
type: DragType;
|
4
|
-
}
|
5
|
-
export interface iDraggableProps<ItemType extends iDraggedItemType<string>> {
|
6
|
-
item: ItemType;
|
7
|
-
onBeginDrag?: () => void;
|
8
|
-
onEndDrag?: (dropResult: any) => void;
|
9
|
-
}
|
2
|
+
import { iDraggableProps, iDraggedItemType } from './drag-drop.types';
|
10
3
|
export declare function useDraggable<ItemType extends iDraggedItemType<string>>(props?: iDraggableProps<ItemType>): {
|
11
4
|
isDragging: boolean;
|
12
5
|
dragRef: ConnectDragSource;
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { useEffect } from 'react';
|
2
2
|
import { useDrag } from 'react-dnd';
|
3
|
-
import { useDragDropContextInternal } from './drag-drop-context';
|
3
|
+
import { useDragDropContextInternal } from './drag-drop-context-internal';
|
4
4
|
export function useDraggable(props) {
|
5
5
|
const { item, onBeginDrag, onEndDrag, } = props || {
|
6
6
|
item: {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"use-draggable.js","sourceRoot":"","sources":["../../../src/helpers/drag-drop/use-draggable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAwC,OAAO,EAAE,MAAM,WAAW,CAAC;AAC1E,OAAO,EAAE,0BAA0B,EAAE,MAAM,
|
1
|
+
{"version":3,"file":"use-draggable.js","sourceRoot":"","sources":["../../../src/helpers/drag-drop/use-draggable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAwC,OAAO,EAAE,MAAM,WAAW,CAAC;AAC1E,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAG1E,MAAM,UAAU,YAAY,CAA4C,KAAiC;IAIrG,MAAM,EACF,IAAI,EACJ,WAAW,EACX,SAAS,GACZ,GAAG,KAAK,IAAI;QACT,IAAI,EAAE;YACF,IAAI,EAAE,WAAW;SACpB;KACJ,CAAC;IAEF,MAAM,eAAe,GAAG,0BAA0B,EAAE,CAAC;IAErD,MAAM,CAAC,EAAE,UAAU,EAAE,EAAE,OAAO,CAAC,GAAG,OAAO,CACrC,GAAG,EAAE,CAAC,CAAC;QACH,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,IAAI;QACJ,OAAO,EAAE,CAAC,OAA0B,EAAE,EAAE,CAAC,CAAC;YACtC,UAAU,EAAE,OAAO,CAAC,UAAU,EAAE;SACnC,CAAC;QACF,GAAG,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE;YACnB,eAAe,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;YAClC,SAAS,IAAI,SAAS,CAAC,OAAO,CAAC,aAAa,EAAE,CAAC,CAAC;QACpD,CAAC;KACJ,CAAC,EACF,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CACpB,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,UAAU,EAAE,CAAC;YACb,eAAe,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;YAClC,WAAW,IAAI,WAAW,EAAE,CAAC;QACjC,CAAC;IACL,CAAC,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,CAAA;IAE7B,OAAO;QACH,UAAU;QACV,OAAO;KACV,CAAC;AACN,CAAC"}
|
@@ -1,14 +1,7 @@
|
|
1
1
|
import { ConnectDropTarget } from 'react-dnd';
|
2
|
-
import { iDraggedItemType } from './
|
3
|
-
export
|
4
|
-
acceptTypes: DropTypes[];
|
5
|
-
onItemDrop: (item: ItemTypes) => void;
|
6
|
-
onHover?: (item: ItemTypes) => void;
|
7
|
-
onDrop?: () => void;
|
8
|
-
}
|
9
|
-
declare function useDroppable<DropType extends string, ItemType extends iDraggedItemType<DropType>>(props?: iDroppableProps<DropType, ItemType>): {
|
2
|
+
import { iDraggedItemType, iDroppableProps } from './drag-drop.types';
|
3
|
+
export declare function useDroppable<DropType extends string, ItemType extends iDraggedItemType<DropType>>(props?: iDroppableProps<DropType, ItemType>): {
|
10
4
|
canDrop: boolean;
|
11
5
|
isOver: boolean;
|
12
6
|
dropRef: ConnectDropTarget;
|
13
7
|
};
|
14
|
-
export default useDroppable;
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { useDrop } from 'react-dnd';
|
2
|
-
function useDroppable(props) {
|
2
|
+
export function useDroppable(props) {
|
3
3
|
const { acceptTypes, onItemDrop, onHover, onDrop, } = props || {
|
4
4
|
acceptTypes: [],
|
5
5
|
onItemDrop: () => { }
|
@@ -24,5 +24,4 @@ function useDroppable(props) {
|
|
24
24
|
dropRef,
|
25
25
|
};
|
26
26
|
}
|
27
|
-
export default useDroppable;
|
28
27
|
//# sourceMappingURL=use-droppable.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"use-droppable.js","sourceRoot":"","sources":["../../../src/helpers/drag-drop/use-droppable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwC,OAAO,EAAE,MAAM,WAAW,CAAC;
|
1
|
+
{"version":3,"file":"use-droppable.js","sourceRoot":"","sources":["../../../src/helpers/drag-drop/use-droppable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwC,OAAO,EAAE,MAAM,WAAW,CAAC;AAG1E,MAAM,UAAU,YAAY,CAAuE,KAA2C;IAK1I,MAAM,EACF,WAAW,EACX,UAAU,EACV,OAAO,EACP,MAAM,GACT,GAAG,KAAK,IAAI;QACT,WAAW,EAAE,EAAE;QACf,UAAU,EAAE,GAAG,EAAE,GAAG,CAAC;KACxB,CAAC;IAEF,MAAM,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC;QAC3C,MAAM,EAAE,WAAW;QACnB,IAAI,EAAE,CAAC,IAAc,EAAE,EAAE;YACrB,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,MAAM,aAAN,MAAM,uBAAN,MAAM,EAAI,CAAC;QACf,CAAC;QACD,KAAK,EAAE,CAAC,IAAc,EAAE,EAAE;YACtB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,IAAI,CAAC,CAAC;QACpB,CAAC;QACD,OAAO,EAAE,CAAC,OAA0B,EAAE,EAAE,CAAC,CAAC;YACtC,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE;YAC1B,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE;SAC3B,CAAC;KACL,CAAC,CAAC;IAEH,OAAO;QACH,OAAO;QACP,MAAM;QACN,OAAO;KACV,CAAC;AACN,CAAC"}
|
@@ -0,0 +1,21 @@
|
|
1
|
+
import { MutableRefObject } from "react";
|
2
|
+
export declare function useTrackFocus(props: {
|
3
|
+
onFocus: () => void;
|
4
|
+
onLoseFocus: () => void;
|
5
|
+
ref?: MutableRefObject<HTMLElement>;
|
6
|
+
}): MutableRefObject<HTMLElement>;
|
7
|
+
export declare function useWindowSize(): {
|
8
|
+
width: number;
|
9
|
+
height: number;
|
10
|
+
};
|
11
|
+
export declare function useElementSize(elm: HTMLElement): {
|
12
|
+
width: number;
|
13
|
+
height: number;
|
14
|
+
};
|
15
|
+
export declare function useIsInPrint(): boolean;
|
16
|
+
export declare function useKeyDown(options: {
|
17
|
+
elm?: HTMLElement | Document;
|
18
|
+
onEnter?: (e: KeyboardEvent) => void;
|
19
|
+
onEscape?: (e: KeyboardEvent) => void;
|
20
|
+
onKeyDown?: (e: KeyboardEvent) => void;
|
21
|
+
}): void;
|
@@ -0,0 +1,146 @@
|
|
1
|
+
import { isDebug, isFunction } from "@kwiz/common";
|
2
|
+
import { useEffect, useRef, useState } from "react";
|
3
|
+
import { KnownClassNames } from "../styles/styles";
|
4
|
+
import { useEffectOnlyOnMount } from "./hooks";
|
5
|
+
export function useTrackFocus(props) {
|
6
|
+
const wrapperDiv = props.ref || useRef(null);
|
7
|
+
useEffect(() => {
|
8
|
+
function focusIn(e) {
|
9
|
+
let elm = e.target; //document.activeElement;
|
10
|
+
if (wrapperDiv.current) {
|
11
|
+
while (elm && elm !== wrapperDiv.current) {
|
12
|
+
elm = elm.parentElement;
|
13
|
+
}
|
14
|
+
}
|
15
|
+
else
|
16
|
+
elm = null;
|
17
|
+
if (wrapperDiv.current && elm === wrapperDiv.current)
|
18
|
+
props.onFocus();
|
19
|
+
else
|
20
|
+
props.onLoseFocus();
|
21
|
+
}
|
22
|
+
if (wrapperDiv.current) {
|
23
|
+
if (wrapperDiv.current)
|
24
|
+
wrapperDiv.current.tabIndex = 1;
|
25
|
+
window.addEventListener("focusin", focusIn);
|
26
|
+
// Remove event listener on cleanup
|
27
|
+
return () => window.removeEventListener("focusin", focusIn);
|
28
|
+
}
|
29
|
+
}, [wrapperDiv.current]);
|
30
|
+
return wrapperDiv;
|
31
|
+
}
|
32
|
+
export function useWindowSize() {
|
33
|
+
// Initialize state with undefined width/height so server and client renders match
|
34
|
+
// Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
|
35
|
+
const [windowSize, setWindowSize] = useState({
|
36
|
+
width: undefined,
|
37
|
+
height: undefined
|
38
|
+
});
|
39
|
+
useEffect(() => {
|
40
|
+
// Handler to call on window resize
|
41
|
+
function handleResize() {
|
42
|
+
// Set window width/height to state
|
43
|
+
setWindowSize({
|
44
|
+
width: window.innerWidth,
|
45
|
+
height: window.innerHeight
|
46
|
+
});
|
47
|
+
}
|
48
|
+
// Add event listener
|
49
|
+
window.addEventListener("resize", handleResize);
|
50
|
+
// Call handler right away so state gets updated with initial window size
|
51
|
+
handleResize();
|
52
|
+
// Remove event listener on cleanup
|
53
|
+
return () => window.removeEventListener("resize", handleResize);
|
54
|
+
}, useEffectOnlyOnMount);
|
55
|
+
return windowSize;
|
56
|
+
}
|
57
|
+
export function useElementSize(elm) {
|
58
|
+
// Initialize state with undefined width/height so server and client renders match
|
59
|
+
// Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
|
60
|
+
const [elmSize, setELmSize] = useState({
|
61
|
+
width: undefined,
|
62
|
+
height: undefined
|
63
|
+
});
|
64
|
+
useEffect(() => {
|
65
|
+
if (elm) {
|
66
|
+
// Handler to call on elm resize
|
67
|
+
function handleResize() {
|
68
|
+
// Set elm width/height to state
|
69
|
+
setELmSize({
|
70
|
+
width: (elm instanceof Window) ? elm.innerWidth : elm.clientWidth,
|
71
|
+
height: (elm instanceof Window) ? elm.innerHeight : elm.clientHeight,
|
72
|
+
});
|
73
|
+
}
|
74
|
+
// Add event listener
|
75
|
+
const observer = new ResizeObserver(handleResize);
|
76
|
+
observer.observe(elm);
|
77
|
+
// Call handler right away so state gets updated with initial elm size
|
78
|
+
handleResize();
|
79
|
+
// Remove event listener on cleanup
|
80
|
+
return () => observer.disconnect();
|
81
|
+
}
|
82
|
+
}, [elm]);
|
83
|
+
return elmSize;
|
84
|
+
}
|
85
|
+
export function useIsInPrint() {
|
86
|
+
// Initialize state with false
|
87
|
+
const [printMode, setPrintMode] = useState(false);
|
88
|
+
useEffect(() => {
|
89
|
+
function forcePrint(e) {
|
90
|
+
if (e.ctrlKey && e.shiftKey && e.altKey) {
|
91
|
+
if (e.key.toLocaleLowerCase() === "q") {
|
92
|
+
document.body.classList.remove(KnownClassNames.print);
|
93
|
+
handlePrint(e, false);
|
94
|
+
}
|
95
|
+
else {
|
96
|
+
console.warn('forced print mode - to exit refresh to ctrl+shift+alt+q');
|
97
|
+
document.body.classList.add(KnownClassNames.print);
|
98
|
+
handlePrint(e, true);
|
99
|
+
}
|
100
|
+
}
|
101
|
+
}
|
102
|
+
// Handler to call on printing
|
103
|
+
function handlePrint(e, force) {
|
104
|
+
if (force === true)
|
105
|
+
setPrintMode(true);
|
106
|
+
else if (window.matchMedia) {
|
107
|
+
var mediaQueryList = window.matchMedia('print');
|
108
|
+
if (mediaQueryList.matches) {
|
109
|
+
setPrintMode(true);
|
110
|
+
}
|
111
|
+
else {
|
112
|
+
setPrintMode(false);
|
113
|
+
}
|
114
|
+
}
|
115
|
+
}
|
116
|
+
// Add event listener
|
117
|
+
window.addEventListener("print", handlePrint);
|
118
|
+
if (isDebug())
|
119
|
+
window.addEventListener("keydown", forcePrint);
|
120
|
+
// Call handler right away so state gets updated with initial printing state
|
121
|
+
handlePrint();
|
122
|
+
// Remove event listener on cleanup
|
123
|
+
return () => {
|
124
|
+
window.removeEventListener("print", handlePrint);
|
125
|
+
if (isDebug())
|
126
|
+
window.removeEventListener("keydown", forcePrint);
|
127
|
+
};
|
128
|
+
}, useEffectOnlyOnMount);
|
129
|
+
return printMode;
|
130
|
+
}
|
131
|
+
export function useKeyDown(options) {
|
132
|
+
let elm = options.elm || document;
|
133
|
+
useEffect(() => {
|
134
|
+
let handler = (e) => {
|
135
|
+
if (e.key === "Enter" && isFunction(options.onEnter))
|
136
|
+
options.onEnter(e);
|
137
|
+
else if (e.key === "Escape" && isFunction(options.onEscape))
|
138
|
+
options.onEscape(e);
|
139
|
+
if (isFunction(options.onKeyDown))
|
140
|
+
options.onKeyDown(e);
|
141
|
+
};
|
142
|
+
elm.addEventListener("keydown", handler);
|
143
|
+
return () => elm.removeEventListener("keydown", handler);
|
144
|
+
}, [elm, options.onEnter, options.onEscape, options.onKeyDown]);
|
145
|
+
}
|
146
|
+
//# sourceMappingURL=hooks-events.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"hooks-events.js","sourceRoot":"","sources":["../../src/helpers/hooks-events.ts"],"names":[],"mappings":"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"}
|
package/dist/helpers/hooks.d.ts
CHANGED
@@ -1,7 +1,4 @@
|
|
1
|
-
import { ToastIntent } from "@fluentui/react-components";
|
2
1
|
import { MutableRefObject, SetStateAction } from "react";
|
3
|
-
import { IPrompterProps } from "../controls/prompt";
|
4
|
-
import { iKWIZFluentContext } from "./context";
|
5
2
|
/** Empty array ensures that effect is only run on mount */
|
6
3
|
export declare const useEffectOnlyOnMount: any[];
|
7
4
|
/** set state on steroids. provide promise callback after render, onChange transformer and automatic skip-set when value not changed */
|
@@ -14,69 +11,3 @@ export declare function useStateEX<ValueType>(initialValue: ValueType, options?:
|
|
14
11
|
(newValue: SetStateAction<ValueType>) => Promise<ValueType>,
|
15
12
|
MutableRefObject<ValueType>
|
16
13
|
];
|
17
|
-
export declare function useTrackFocus(props: {
|
18
|
-
onFocus: () => void;
|
19
|
-
onLoseFocus: () => void;
|
20
|
-
ref?: MutableRefObject<HTMLElement>;
|
21
|
-
}): MutableRefObject<HTMLElement>;
|
22
|
-
export declare function useWindowSize(): {
|
23
|
-
width: number;
|
24
|
-
height: number;
|
25
|
-
};
|
26
|
-
export declare function useElementSize(elm: HTMLElement): {
|
27
|
-
width: number;
|
28
|
-
height: number;
|
29
|
-
};
|
30
|
-
export declare function useIsInPrint(): boolean;
|
31
|
-
export interface iBlockNav {
|
32
|
-
setMessage: (id: string, message?: string) => void;
|
33
|
-
onNav: (nav: () => void) => void;
|
34
|
-
navPrompt?: JSX.Element;
|
35
|
-
}
|
36
|
-
/** set block message if you want to block nav.
|
37
|
-
* - call setMessage to add a blocker message
|
38
|
-
* - call onNav when you have internal navigation (open / close popups)
|
39
|
-
* - render the navPrompt control to your page
|
40
|
-
* FYI for page unload, most modern browsers won't show your message but a generic one instead. */
|
41
|
-
export declare function useBlockNav(): iBlockNav;
|
42
|
-
export declare function useKeyDown(options: {
|
43
|
-
elm?: HTMLElement | Document;
|
44
|
-
onEnter?: (e: KeyboardEvent) => void;
|
45
|
-
onEscape?: (e: KeyboardEvent) => void;
|
46
|
-
onKeyDown?: (e: KeyboardEvent) => void;
|
47
|
-
}): void;
|
48
|
-
export declare function useToast(): {
|
49
|
-
control: import("react/jsx-runtime").JSX.Element;
|
50
|
-
dispatch: (info: {
|
51
|
-
title?: string;
|
52
|
-
body?: string;
|
53
|
-
subtitle?: string;
|
54
|
-
titleAction?: {
|
55
|
-
text: string;
|
56
|
-
onClick: () => void;
|
57
|
-
};
|
58
|
-
footerActions?: {
|
59
|
-
text: string;
|
60
|
-
onClick: () => void;
|
61
|
-
}[];
|
62
|
-
intent?: ToastIntent;
|
63
|
-
}) => void;
|
64
|
-
};
|
65
|
-
export declare const useContextStyles: () => Record<"root", string>;
|
66
|
-
export declare function useKWIZFluentContextProvider(options: {
|
67
|
-
root?: React.MutableRefObject<HTMLDivElement>;
|
68
|
-
ctx?: iKWIZFluentContext;
|
69
|
-
}): iKWIZFluentContext;
|
70
|
-
export interface iAlerts {
|
71
|
-
promptEX: (info: IPrompterProps) => void;
|
72
|
-
confirmEX: (message: string | JSX.Element, onOK?: () => void, onCancel?: () => void) => Promise<boolean>;
|
73
|
-
alertEX: (message: string | JSX.Element, onOK?: () => void) => Promise<void>;
|
74
|
-
alertPrompt?: JSX.Element;
|
75
|
-
close: () => void;
|
76
|
-
}
|
77
|
-
/** set block message if you want to block nav.
|
78
|
-
* - call setMessage to add a blocker message
|
79
|
-
* - call onNav when you have internal navigation (open / close popups)
|
80
|
-
* - render the navPrompt control to your page
|
81
|
-
* FYI for page unload, most modern browsers won't show your message but a generic one instead. */
|
82
|
-
export declare function useAlerts(): iAlerts;
|