@configura/web-ui 2.2.0-alpha.1 → 2.2.0-alpha.2
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/.eslintrc.json +5 -5
- package/.postcssrc.json +8 -8
- package/LICENSE +201 -201
- package/README.md +1 -1
- package/dist/components/CanvasWrapper.d.ts +9 -9
- package/dist/components/CanvasWrapper.js +8 -8
- package/dist/components/CfgPriceView.d.ts +6 -6
- package/dist/components/CfgPriceView.js +13 -13
- package/dist/components/ConfigurationActionsButtonRow.d.ts +14 -14
- package/dist/components/ConfigurationActionsButtonRow.js +16 -16
- package/dist/components/Configurator.d.ts +12 -12
- package/dist/components/Configurator.js +15 -15
- package/dist/components/ConfiguratorWrapper.d.ts +8 -8
- package/dist/components/ConfiguratorWrapper.js +5 -5
- package/dist/components/CurrencyPrice.d.ts +9 -9
- package/dist/components/CurrencyPrice.js +7 -7
- package/dist/components/ErrorContext.d.ts +2 -2
- package/dist/components/ErrorContext.js +2 -2
- package/dist/components/ExpandableHeadingRow.d.ts +15 -15
- package/dist/components/ExpandableHeadingRow.js +23 -23
- package/dist/components/Loading.d.ts +13 -13
- package/dist/components/Loading.js +20 -20
- package/dist/components/ProductInformation.d.ts +13 -13
- package/dist/components/ProductInformation.js +14 -14
- package/dist/components/ResetButton.d.ts +8 -8
- package/dist/components/ResetButton.js +7 -7
- package/dist/components/ShareView.d.ts +3 -3
- package/dist/components/ShareView.js +21 -21
- package/dist/components/TaskListView.d.ts +8 -8
- package/dist/components/TaskListView.js +69 -69
- package/dist/components/TaskStartView.d.ts +12 -12
- package/dist/components/TaskStartView.js +29 -29
- package/dist/components/icons/Checkmark.d.ts +6 -6
- package/dist/components/icons/Checkmark.js +12 -12
- package/dist/components/icons/Chevron.d.ts +7 -7
- package/dist/components/icons/Chevron.js +18 -18
- package/dist/components/icons/CircleXmarkIcon.d.ts +3 -3
- package/dist/components/icons/CircleXmarkIcon.js +8 -8
- package/dist/components/icons/DownloadIcon.d.ts +3 -3
- package/dist/components/icons/DownloadIcon.js +8 -8
- package/dist/components/icons/ErrorIcon.d.ts +3 -3
- package/dist/components/icons/ErrorIcon.js +8 -8
- package/dist/components/productConfiguration/CfgAdditionalProductView.d.ts +3 -3
- package/dist/components/productConfiguration/CfgAdditionalProductView.js +46 -46
- package/dist/components/productConfiguration/CfgCheckboxView.d.ts +4 -4
- package/dist/components/productConfiguration/CfgCheckboxView.js +7 -7
- package/dist/components/productConfiguration/CfgCheckboxesView.d.ts +4 -4
- package/dist/components/productConfiguration/CfgCheckboxesView.js +20 -20
- package/dist/components/productConfiguration/CfgConfigurationCommonView.d.ts +7 -7
- package/dist/components/productConfiguration/CfgConfigurationCommonView.js +8 -8
- package/dist/components/productConfiguration/CfgDropdownOptionView.d.ts +4 -4
- package/dist/components/productConfiguration/CfgDropdownOptionView.js +23 -23
- package/dist/components/productConfiguration/CfgDropdownView.d.ts +4 -4
- package/dist/components/productConfiguration/CfgDropdownView.js +23 -23
- package/dist/components/productConfiguration/CfgFeatureView.d.ts +72 -72
- package/dist/components/productConfiguration/CfgFeatureView.js +77 -77
- package/dist/components/productConfiguration/CfgGroupView.d.ts +4 -4
- package/dist/components/productConfiguration/CfgGroupView.js +7 -7
- package/dist/components/productConfiguration/CfgMiscFile.d.ts +4 -4
- package/dist/components/productConfiguration/CfgMiscFile.js +9 -9
- package/dist/components/productConfiguration/CfgMiscFiles.d.ts +4 -4
- package/dist/components/productConfiguration/CfgMiscFiles.js +5 -5
- package/dist/components/productConfiguration/CfgNote.d.ts +4 -4
- package/dist/components/productConfiguration/CfgNote.js +15 -15
- package/dist/components/productConfiguration/CfgNotes.d.ts +4 -4
- package/dist/components/productConfiguration/CfgNotes.js +5 -5
- package/dist/components/productConfiguration/CfgOptionCommonView.d.ts +6 -6
- package/dist/components/productConfiguration/CfgOptionCommonView.js +53 -53
- package/dist/components/productConfiguration/CfgOptionNumericView.d.ts +29 -29
- package/dist/components/productConfiguration/CfgOptionNumericView.js +132 -132
- package/dist/components/productConfiguration/CfgOptionPriceView.d.ts +9 -9
- package/dist/components/productConfiguration/CfgOptionPriceView.js +31 -31
- package/dist/components/productConfiguration/CfgProductConfigurationView.d.ts +24 -24
- package/dist/components/productConfiguration/CfgProductConfigurationView.js +50 -50
- package/dist/css/web-ui.css +1 -1
- package/dist/css/web-ui.css.map +1 -1
- package/dist/index.d.ts +29 -29
- package/dist/index.js +29 -29
- package/dist/scss/_button.scss +52 -52
- package/dist/scss/_configurator.scss +132 -132
- package/dist/scss/_expandable.scss +38 -38
- package/dist/scss/_feature-item.scss +146 -146
- package/dist/scss/_forms.scss +44 -44
- package/dist/scss/_hr.scss +16 -16
- package/dist/scss/_loading.scss +98 -98
- package/dist/scss/_misc-file-and-note.scss +44 -44
- package/dist/scss/_mixins.scss +56 -56
- package/dist/scss/_option-tree.scss +29 -29
- package/dist/scss/_product-information.scss +63 -63
- package/dist/scss/_range-view.scss +39 -39
- package/dist/scss/_slider.scss +70 -70
- package/dist/scss/_tasks.scss +72 -72
- package/dist/scss/_themed.scss +156 -156
- package/dist/scss/_utilities.scss +22 -22
- package/dist/scss/_variables.scss +6 -6
- package/dist/scss/icons/_checkmark.scss +46 -46
- package/dist/scss/icons/_chevron.scss +62 -62
- package/dist/scss/icons/_circle-xmark-icon.scss +24 -24
- package/dist/scss/icons/_download-icon.scss +24 -24
- package/dist/scss/icons/_error-icon.scss +24 -24
- package/dist/scss/web-ui.scss +11 -11
- package/dist/useCatParams.d.ts +17 -17
- package/dist/useCatParams.js +29 -29
- package/dist/useObservable.d.ts +4 -4
- package/dist/useObservable.js +18 -18
- package/dist/useRerender.d.ts +1 -1
- package/dist/useRerender.js +5 -5
- package/dist/useResize.d.ts +6 -6
- package/dist/useResize.js +47 -47
- package/dist/useSelected.d.ts +2 -2
- package/dist/useSelected.js +13 -13
- package/dist/useUniqueId.d.ts +1 -1
- package/dist/useUniqueId.js +3 -3
- package/dist/utilities.d.ts +5 -5
- package/dist/utilities.js +1 -1
- package/package.json +3 -3
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
@use "../mixins";
|
|
2
|
-
|
|
3
|
-
@mixin classes($color) {
|
|
4
|
-
.cfgErrorIcon {
|
|
5
|
-
/* The distance-units inside the icon are px even though everything
|
|
6
|
-
else is relative units. The SVG has its own coordinate space. */
|
|
7
|
-
|
|
8
|
-
@include mixins.cfgRootStyles;
|
|
9
|
-
|
|
10
|
-
display: inline-block;
|
|
11
|
-
width: 100%;
|
|
12
|
-
height: 100%;
|
|
13
|
-
|
|
14
|
-
path,
|
|
15
|
-
circle {
|
|
16
|
-
stroke: $color;
|
|
17
|
-
stroke-linecap: round;
|
|
18
|
-
stroke-linejoin: round;
|
|
19
|
-
stroke-width: 1.5;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
@content;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
1
|
+
@use "../mixins";
|
|
2
|
+
|
|
3
|
+
@mixin classes($color) {
|
|
4
|
+
.cfgErrorIcon {
|
|
5
|
+
/* The distance-units inside the icon are px even though everything
|
|
6
|
+
else is relative units. The SVG has its own coordinate space. */
|
|
7
|
+
|
|
8
|
+
@include mixins.cfgRootStyles;
|
|
9
|
+
|
|
10
|
+
display: inline-block;
|
|
11
|
+
width: 100%;
|
|
12
|
+
height: 100%;
|
|
13
|
+
|
|
14
|
+
path,
|
|
15
|
+
circle {
|
|
16
|
+
stroke: $color;
|
|
17
|
+
stroke-linecap: round;
|
|
18
|
+
stroke-linejoin: round;
|
|
19
|
+
stroke-width: 1.5;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
@content;
|
|
23
|
+
}
|
|
24
|
+
}
|
package/dist/scss/web-ui.scss
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Web UI Styling
|
|
3
|
-
*/
|
|
4
|
-
|
|
5
|
-
@use "themed";
|
|
6
|
-
|
|
7
|
-
@include themed.themed(themed.$lightTheme);
|
|
8
|
-
|
|
9
|
-
.cfgDarkTheme {
|
|
10
|
-
@include themed.themed(themed.$darkTheme);
|
|
11
|
-
}
|
|
1
|
+
/**
|
|
2
|
+
* Web UI Styling
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
@use "themed";
|
|
6
|
+
|
|
7
|
+
@include themed.themed(themed.$lightTheme);
|
|
8
|
+
|
|
9
|
+
.cfgDarkTheme {
|
|
10
|
+
@include themed.themed(themed.$darkTheme);
|
|
11
|
+
}
|
package/dist/useCatParams.d.ts
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import { DtoCatalogueParamsWithCid, DtoCatalogueParamsWithCidAndLang, DtoProductParamsWithCid, DtoProductParamsWithCidAndLang } from "@configura/web-api";
|
|
2
|
-
/**
|
|
3
|
-
* Returns a memozied version of the catParams
|
|
4
|
-
*/
|
|
5
|
-
export declare function useMemoCatalogueParams(catParams: DtoCatalogueParamsWithCid): DtoCatalogueParamsWithCid;
|
|
6
|
-
/**
|
|
7
|
-
* Returns a memozied version of the catParams
|
|
8
|
-
*/
|
|
9
|
-
export declare function useMemoCatalogueParamsWithLang(catParams: DtoCatalogueParamsWithCidAndLang): DtoCatalogueParamsWithCidAndLang;
|
|
10
|
-
/**
|
|
11
|
-
* Returns a memozied version of the prodParams
|
|
12
|
-
*/
|
|
13
|
-
export declare function useMemoProductParams(prodParams: DtoProductParamsWithCid): DtoProductParamsWithCid;
|
|
14
|
-
/**
|
|
15
|
-
* Returns a memozied version of the prodParams
|
|
16
|
-
*/
|
|
17
|
-
export declare function useMemoProductParamsWithLang(prodParams: DtoProductParamsWithCidAndLang): DtoProductParamsWithCidAndLang;
|
|
1
|
+
import { DtoCatalogueParamsWithCid, DtoCatalogueParamsWithCidAndLang, DtoProductParamsWithCid, DtoProductParamsWithCidAndLang } from "@configura/web-api";
|
|
2
|
+
/**
|
|
3
|
+
* Returns a memozied version of the catParams
|
|
4
|
+
*/
|
|
5
|
+
export declare function useMemoCatalogueParams(catParams: DtoCatalogueParamsWithCid): DtoCatalogueParamsWithCid;
|
|
6
|
+
/**
|
|
7
|
+
* Returns a memozied version of the catParams
|
|
8
|
+
*/
|
|
9
|
+
export declare function useMemoCatalogueParamsWithLang(catParams: DtoCatalogueParamsWithCidAndLang): DtoCatalogueParamsWithCidAndLang;
|
|
10
|
+
/**
|
|
11
|
+
* Returns a memozied version of the prodParams
|
|
12
|
+
*/
|
|
13
|
+
export declare function useMemoProductParams(prodParams: DtoProductParamsWithCid): DtoProductParamsWithCid;
|
|
14
|
+
/**
|
|
15
|
+
* Returns a memozied version of the prodParams
|
|
16
|
+
*/
|
|
17
|
+
export declare function useMemoProductParamsWithLang(prodParams: DtoProductParamsWithCidAndLang): DtoProductParamsWithCidAndLang;
|
|
18
18
|
//# sourceMappingURL=useCatParams.d.ts.map
|
package/dist/useCatParams.js
CHANGED
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
import { useMemo } from "react";
|
|
2
|
-
/**
|
|
3
|
-
* Returns a memozied version of the catParams
|
|
4
|
-
*/
|
|
5
|
-
export function useMemoCatalogueParams(catParams) {
|
|
6
|
-
const { cid, enterprise, prdCat, prdCatVersion, vendor, priceList } = catParams;
|
|
7
|
-
return useMemo(() => ({ cid, enterprise, prdCat, prdCatVersion, vendor, priceList }), [cid, enterprise, prdCat, prdCatVersion, priceList, vendor]);
|
|
8
|
-
}
|
|
9
|
-
/**
|
|
10
|
-
* Returns a memozied version of the catParams
|
|
11
|
-
*/
|
|
12
|
-
export function useMemoCatalogueParamsWithLang(catParams) {
|
|
13
|
-
const { lang, cid, enterprise, prdCat, prdCatVersion, vendor, priceList } = catParams;
|
|
14
|
-
return useMemo(() => ({ lang, cid, enterprise, prdCat, prdCatVersion, vendor, priceList }), [lang, cid, enterprise, prdCat, prdCatVersion, priceList, vendor]);
|
|
15
|
-
}
|
|
16
|
-
/**
|
|
17
|
-
* Returns a memozied version of the prodParams
|
|
18
|
-
*/
|
|
19
|
-
export function useMemoProductParams(prodParams) {
|
|
20
|
-
const { cid, enterprise, prdCat, prdCatVersion, vendor, priceList, partNumber } = prodParams;
|
|
21
|
-
return useMemo(() => ({ cid, enterprise, prdCat, prdCatVersion, vendor, priceList, partNumber }), [cid, enterprise, prdCat, prdCatVersion, priceList, vendor, partNumber]);
|
|
22
|
-
}
|
|
23
|
-
/**
|
|
24
|
-
* Returns a memozied version of the prodParams
|
|
25
|
-
*/
|
|
26
|
-
export function useMemoProductParamsWithLang(prodParams) {
|
|
27
|
-
const { lang, cid, enterprise, prdCat, prdCatVersion, vendor, priceList, partNumber } = prodParams;
|
|
28
|
-
return useMemo(() => ({ lang, cid, enterprise, prdCat, prdCatVersion, vendor, priceList, partNumber }), [lang, cid, enterprise, prdCat, prdCatVersion, priceList, vendor, partNumber]);
|
|
29
|
-
}
|
|
1
|
+
import { useMemo } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* Returns a memozied version of the catParams
|
|
4
|
+
*/
|
|
5
|
+
export function useMemoCatalogueParams(catParams) {
|
|
6
|
+
const { cid, enterprise, prdCat, prdCatVersion, vendor, priceList } = catParams;
|
|
7
|
+
return useMemo(() => ({ cid, enterprise, prdCat, prdCatVersion, vendor, priceList }), [cid, enterprise, prdCat, prdCatVersion, priceList, vendor]);
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Returns a memozied version of the catParams
|
|
11
|
+
*/
|
|
12
|
+
export function useMemoCatalogueParamsWithLang(catParams) {
|
|
13
|
+
const { lang, cid, enterprise, prdCat, prdCatVersion, vendor, priceList } = catParams;
|
|
14
|
+
return useMemo(() => ({ lang, cid, enterprise, prdCat, prdCatVersion, vendor, priceList }), [lang, cid, enterprise, prdCat, prdCatVersion, priceList, vendor]);
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* Returns a memozied version of the prodParams
|
|
18
|
+
*/
|
|
19
|
+
export function useMemoProductParams(prodParams) {
|
|
20
|
+
const { cid, enterprise, prdCat, prdCatVersion, vendor, priceList, partNumber } = prodParams;
|
|
21
|
+
return useMemo(() => ({ cid, enterprise, prdCat, prdCatVersion, vendor, priceList, partNumber }), [cid, enterprise, prdCat, prdCatVersion, priceList, vendor, partNumber]);
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* Returns a memozied version of the prodParams
|
|
25
|
+
*/
|
|
26
|
+
export function useMemoProductParamsWithLang(prodParams) {
|
|
27
|
+
const { lang, cid, enterprise, prdCat, prdCatVersion, vendor, priceList, partNumber } = prodParams;
|
|
28
|
+
return useMemo(() => ({ lang, cid, enterprise, prdCat, prdCatVersion, vendor, priceList, partNumber }), [lang, cid, enterprise, prdCat, prdCatVersion, priceList, vendor, partNumber]);
|
|
29
|
+
}
|
package/dist/useObservable.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { Observable } from "@configura/web-utilities";
|
|
2
|
-
import { Dispatch, SetStateAction } from "react";
|
|
3
|
-
export declare function useObservableWithCallback<T>(o: Observable<T> | undefined | null | false, callback: ((x: T) => void) | undefined): void;
|
|
4
|
-
export declare function useObservableState<T>(o: Observable<T> | undefined, initValue: T): [T, Dispatch<SetStateAction<T>>];
|
|
1
|
+
import { Observable } from "@configura/web-utilities";
|
|
2
|
+
import { Dispatch, SetStateAction } from "react";
|
|
3
|
+
export declare function useObservableWithCallback<T>(o: Observable<T> | undefined | null | false, callback: ((x: T) => void) | undefined): void;
|
|
4
|
+
export declare function useObservableState<T>(o: Observable<T> | undefined, initValue: T): [T, Dispatch<SetStateAction<T>>];
|
|
5
5
|
//# sourceMappingURL=useObservable.d.ts.map
|
package/dist/useObservable.js
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import { useEffect, useState } from "react";
|
|
2
|
-
export function useObservableWithCallback(o, callback) {
|
|
3
|
-
useEffect(() => {
|
|
4
|
-
if (o === undefined || o === null || o === false || callback === undefined) {
|
|
5
|
-
return;
|
|
6
|
-
}
|
|
7
|
-
o.listen(callback);
|
|
8
|
-
return () => {
|
|
9
|
-
o.stopListen(callback);
|
|
10
|
-
};
|
|
11
|
-
}, [o, callback]);
|
|
12
|
-
}
|
|
13
|
-
export function useObservableState(o, initValue) {
|
|
14
|
-
const state = useState(initValue);
|
|
15
|
-
const [, set] = state;
|
|
16
|
-
useObservableWithCallback(o, set);
|
|
17
|
-
return state;
|
|
18
|
-
}
|
|
1
|
+
import { useEffect, useState } from "react";
|
|
2
|
+
export function useObservableWithCallback(o, callback) {
|
|
3
|
+
useEffect(() => {
|
|
4
|
+
if (o === undefined || o === null || o === false || callback === undefined) {
|
|
5
|
+
return;
|
|
6
|
+
}
|
|
7
|
+
o.listen(callback);
|
|
8
|
+
return () => {
|
|
9
|
+
o.stopListen(callback);
|
|
10
|
+
};
|
|
11
|
+
}, [o, callback]);
|
|
12
|
+
}
|
|
13
|
+
export function useObservableState(o, initValue) {
|
|
14
|
+
const state = useState(initValue);
|
|
15
|
+
const [, set] = state;
|
|
16
|
+
useObservableWithCallback(o, set);
|
|
17
|
+
return state;
|
|
18
|
+
}
|
package/dist/useRerender.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare function useRerender(): () => void;
|
|
1
|
+
export declare function useRerender(): () => void;
|
|
2
2
|
//# sourceMappingURL=useRerender.d.ts.map
|
package/dist/useRerender.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { useCallback, useState } from "react";
|
|
2
|
-
export function useRerender() {
|
|
3
|
-
const [, updateState] = useState({});
|
|
4
|
-
return useCallback(() => updateState({}), []);
|
|
5
|
-
}
|
|
1
|
+
import { useCallback, useState } from "react";
|
|
2
|
+
export function useRerender() {
|
|
3
|
+
const [, updateState] = useState({});
|
|
4
|
+
return useCallback(() => updateState({}), []);
|
|
5
|
+
}
|
package/dist/useResize.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
interface Size {
|
|
2
|
-
width: number;
|
|
3
|
-
height: number;
|
|
4
|
-
}
|
|
5
|
-
export declare function useResize(element?: Element): [Size, () => void];
|
|
6
|
-
export {};
|
|
1
|
+
interface Size {
|
|
2
|
+
width: number;
|
|
3
|
+
height: number;
|
|
4
|
+
}
|
|
5
|
+
export declare function useResize(element?: Element): [Size, () => void];
|
|
6
|
+
export {};
|
|
7
7
|
//# sourceMappingURL=useResize.d.ts.map
|
package/dist/useResize.js
CHANGED
|
@@ -1,47 +1,47 @@
|
|
|
1
|
-
import { useCallback, useEffect, useMemo, useState } from "react";
|
|
2
|
-
function getSize(element) {
|
|
3
|
-
let { innerWidth, innerHeight } = window;
|
|
4
|
-
if (element) {
|
|
5
|
-
const rect = element.getBoundingClientRect();
|
|
6
|
-
innerHeight = rect.height;
|
|
7
|
-
innerWidth = rect.width;
|
|
8
|
-
}
|
|
9
|
-
return { width: innerWidth, height: innerHeight };
|
|
10
|
-
}
|
|
11
|
-
export function useResize(element) {
|
|
12
|
-
const [size, setSize] = useState(() => getSize(element));
|
|
13
|
-
const refresh = useCallback(() => {
|
|
14
|
-
const current = getSize(element);
|
|
15
|
-
if (current.height === size.height && current.width === size.width) {
|
|
16
|
-
return;
|
|
17
|
-
}
|
|
18
|
-
setSize(current);
|
|
19
|
-
}, [element, size.height, size.width]);
|
|
20
|
-
useEffect(refresh, [element, refresh]);
|
|
21
|
-
const resizeObserver = useMemo(() => {
|
|
22
|
-
if ("ResizeObserver" in window) {
|
|
23
|
-
return new ResizeObserver(refresh);
|
|
24
|
-
}
|
|
25
|
-
return undefined;
|
|
26
|
-
}, [refresh]);
|
|
27
|
-
useEffect(() => {
|
|
28
|
-
if (element === undefined) {
|
|
29
|
-
return;
|
|
30
|
-
}
|
|
31
|
-
if (resizeObserver === undefined) {
|
|
32
|
-
window.addEventListener("resize", refresh);
|
|
33
|
-
}
|
|
34
|
-
else {
|
|
35
|
-
resizeObserver.observe(element);
|
|
36
|
-
}
|
|
37
|
-
return () => {
|
|
38
|
-
if (resizeObserver === undefined) {
|
|
39
|
-
window.removeEventListener("resize", refresh);
|
|
40
|
-
}
|
|
41
|
-
else {
|
|
42
|
-
resizeObserver.unobserve(element);
|
|
43
|
-
}
|
|
44
|
-
};
|
|
45
|
-
}, [resizeObserver, element, refresh]);
|
|
46
|
-
return [size, refresh];
|
|
47
|
-
}
|
|
1
|
+
import { useCallback, useEffect, useMemo, useState } from "react";
|
|
2
|
+
function getSize(element) {
|
|
3
|
+
let { innerWidth, innerHeight } = window;
|
|
4
|
+
if (element) {
|
|
5
|
+
const rect = element.getBoundingClientRect();
|
|
6
|
+
innerHeight = rect.height;
|
|
7
|
+
innerWidth = rect.width;
|
|
8
|
+
}
|
|
9
|
+
return { width: innerWidth, height: innerHeight };
|
|
10
|
+
}
|
|
11
|
+
export function useResize(element) {
|
|
12
|
+
const [size, setSize] = useState(() => getSize(element));
|
|
13
|
+
const refresh = useCallback(() => {
|
|
14
|
+
const current = getSize(element);
|
|
15
|
+
if (current.height === size.height && current.width === size.width) {
|
|
16
|
+
return;
|
|
17
|
+
}
|
|
18
|
+
setSize(current);
|
|
19
|
+
}, [element, size.height, size.width]);
|
|
20
|
+
useEffect(refresh, [element, refresh]);
|
|
21
|
+
const resizeObserver = useMemo(() => {
|
|
22
|
+
if ("ResizeObserver" in window) {
|
|
23
|
+
return new ResizeObserver(refresh);
|
|
24
|
+
}
|
|
25
|
+
return undefined;
|
|
26
|
+
}, [refresh]);
|
|
27
|
+
useEffect(() => {
|
|
28
|
+
if (element === undefined) {
|
|
29
|
+
return;
|
|
30
|
+
}
|
|
31
|
+
if (resizeObserver === undefined) {
|
|
32
|
+
window.addEventListener("resize", refresh);
|
|
33
|
+
}
|
|
34
|
+
else {
|
|
35
|
+
resizeObserver.observe(element);
|
|
36
|
+
}
|
|
37
|
+
return () => {
|
|
38
|
+
if (resizeObserver === undefined) {
|
|
39
|
+
window.removeEventListener("resize", refresh);
|
|
40
|
+
}
|
|
41
|
+
else {
|
|
42
|
+
resizeObserver.unobserve(element);
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
}, [resizeObserver, element, refresh]);
|
|
46
|
+
return [size, refresh];
|
|
47
|
+
}
|
package/dist/useSelected.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { CfgOption } from "@configura/web-api";
|
|
2
|
-
export declare function useSelected(option: CfgOption): boolean;
|
|
1
|
+
import { CfgOption } from "@configura/web-api";
|
|
2
|
+
export declare function useSelected(option: CfgOption): boolean;
|
|
3
3
|
//# sourceMappingURL=useSelected.d.ts.map
|
package/dist/useSelected.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { useEffect, useState } from "react";
|
|
2
|
-
export function useSelected(option) {
|
|
3
|
-
const [selected, setSelected] = useState(option.selected);
|
|
4
|
-
useEffect(() => {
|
|
5
|
-
setSelected(option.selected);
|
|
6
|
-
}, [option]);
|
|
7
|
-
useEffect(() => {
|
|
8
|
-
const listener = () => setSelected(option.selected);
|
|
9
|
-
option.listenForChange(listener);
|
|
10
|
-
return () => option.stopListenForChange(listener);
|
|
11
|
-
}, [option]);
|
|
12
|
-
return selected;
|
|
13
|
-
}
|
|
1
|
+
import { useEffect, useState } from "react";
|
|
2
|
+
export function useSelected(option) {
|
|
3
|
+
const [selected, setSelected] = useState(option.selected);
|
|
4
|
+
useEffect(() => {
|
|
5
|
+
setSelected(option.selected);
|
|
6
|
+
}, [option]);
|
|
7
|
+
useEffect(() => {
|
|
8
|
+
const listener = () => setSelected(option.selected);
|
|
9
|
+
option.listenForChange(listener);
|
|
10
|
+
return () => option.stopListenForChange(listener);
|
|
11
|
+
}, [option]);
|
|
12
|
+
return selected;
|
|
13
|
+
}
|
package/dist/useUniqueId.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const useUuid: () => string;
|
|
1
|
+
export declare const useUuid: () => string;
|
|
2
2
|
//# sourceMappingURL=useUniqueId.d.ts.map
|
package/dist/useUniqueId.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { useMemo } from "react";
|
|
2
|
-
import { v4 } from "uuid";
|
|
3
|
-
export const useUuid = () => useMemo(() => `${v4()}`, []);
|
|
1
|
+
import { useMemo } from "react";
|
|
2
|
+
import { v4 } from "uuid";
|
|
3
|
+
export const useUuid = () => useMemo(() => `${v4()}`, []);
|
package/dist/utilities.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { CSSProperties } from "react";
|
|
2
|
-
export declare type CssProps = {
|
|
3
|
-
className?: string;
|
|
4
|
-
style?: CSSProperties;
|
|
5
|
-
};
|
|
1
|
+
import { CSSProperties } from "react";
|
|
2
|
+
export declare type CssProps = {
|
|
3
|
+
className?: string;
|
|
4
|
+
style?: CSSProperties;
|
|
5
|
+
};
|
|
6
6
|
//# sourceMappingURL=utilities.d.ts.map
|
package/dist/utilities.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@configura/web-ui",
|
|
3
|
-
"version": "2.2.0-alpha.
|
|
3
|
+
"version": "2.2.0-alpha.2",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
]
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@configura/web-api": "2.2.0-alpha.
|
|
35
|
+
"@configura/web-api": "2.2.0-alpha.2",
|
|
36
36
|
"uuid": "^8.3.2"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
@@ -64,5 +64,5 @@
|
|
|
64
64
|
"publishConfig": {
|
|
65
65
|
"access": "public"
|
|
66
66
|
},
|
|
67
|
-
"gitHead": "
|
|
67
|
+
"gitHead": "5f45900d6b4fcda8f13a33f9ffdcba8a0a5b6c95"
|
|
68
68
|
}
|