@opengeoweb/shared 4.2.0 → 4.4.0
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/index.esm.js +137 -105
- package/index.umd.js +98 -66
- package/lib/components/Avatar/Avatar.stories.d.ts +12 -16
- package/lib/components/CustomToggleButton/CustomToggleButton.d.ts +1 -1
- package/lib/components/DraggableResizable/Draggable.d.ts +3 -3
- package/lib/components/StatusTag/StatusTag.d.ts +2 -1
- package/lib/components/StatusTag/StatusTag.stories.d.ts +21 -1
- package/lib/components/ToolButton/ToolButton.d.ts +1 -0
- package/lib/components/WithEggs/WithEggs.d.ts +3 -0
- package/lib/components/WithEggs/WithEggs.spec.d.ts +1 -0
- package/lib/components/WithEggs/index.d.ts +1 -0
- package/lib/components/index.d.ts +1 -0
- package/lib/hooks/index.d.ts +1 -0
- package/lib/hooks/useMakeSureContainerStaysInsideWindow/useMakeSureContainerStaysInsideWindow.d.ts +3 -0
- package/lib/hooks/useMakeSureContainerStaysInsideWindow/useMakeSureContainerStaysInsideWindow.spec.d.ts +1 -0
- package/package.json +9 -7
package/index.esm.js
CHANGED
|
@@ -4,72 +4,10 @@ import { Box, Typography, Dialog, DialogTitle, IconButton, DialogContent, Dialog
|
|
|
4
4
|
import { Close, Exclamation, Success, Info, ChevronRight, GeoWebLogo, Resize, useThemeContext, DragHandle, ArrowLeft, ArrowRight, KeyOption, ArrowUp, ArrowDown, KeyCommand, Options, Delete, VisibilityOff, Visibility } from '@opengeoweb/theme';
|
|
5
5
|
import { useFormContext } from 'react-hook-form';
|
|
6
6
|
import { isEmpty, errorMessages } from '@opengeoweb/form-fields';
|
|
7
|
+
import { throttle } from 'lodash';
|
|
7
8
|
import Draggable from 'react-draggable';
|
|
8
9
|
import { Resizable } from 're-resizable';
|
|
9
|
-
import {
|
|
10
|
-
|
|
11
|
-
/* *
|
|
12
|
-
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
13
|
-
* you may not use this file except in compliance with the License.
|
|
14
|
-
* You may obtain a copy of the License at
|
|
15
|
-
*
|
|
16
|
-
* http://www.apache.org/licenses/LICENSE-2.0
|
|
17
|
-
*
|
|
18
|
-
* Unless required by applicable law or agreed to in writing, software
|
|
19
|
-
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
20
|
-
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
21
|
-
* See the License for the specific language governing permissions and
|
|
22
|
-
* limitations under the License.
|
|
23
|
-
*
|
|
24
|
-
* Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
|
|
25
|
-
* Copyright 2021 - Finnish Meteorological Institute (FMI)
|
|
26
|
-
* */
|
|
27
|
-
var bgColors = {
|
|
28
|
-
green: '#fcffeb',
|
|
29
|
-
grey: '#f8f9f9',
|
|
30
|
-
purple: '#f8f9f9',
|
|
31
|
-
red: '#f9e8ea',
|
|
32
|
-
yellow: '#fff8eb'
|
|
33
|
-
};
|
|
34
|
-
var borderColors = {
|
|
35
|
-
green: '#72bb23',
|
|
36
|
-
grey: '#9b9fb0',
|
|
37
|
-
purple: '#9d9df2',
|
|
38
|
-
red: '#f24a00',
|
|
39
|
-
yellow: '#ffa800'
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
var tagStyle = function tagStyle(color) {
|
|
43
|
-
// Set color to grey for summary
|
|
44
|
-
var bgcolor = bgColors[color];
|
|
45
|
-
var borderColor = borderColors[color];
|
|
46
|
-
return {
|
|
47
|
-
backgroundColor: bgcolor,
|
|
48
|
-
m: 0,
|
|
49
|
-
p: 0.5,
|
|
50
|
-
border: "2px solid ".concat(borderColor),
|
|
51
|
-
borderRadius: '4px',
|
|
52
|
-
width: '85px',
|
|
53
|
-
height: '20px',
|
|
54
|
-
color: '#051039',
|
|
55
|
-
maxHeight: '1em',
|
|
56
|
-
boxSizing: 'content-box'
|
|
57
|
-
};
|
|
58
|
-
};
|
|
59
|
-
|
|
60
|
-
var StatusTag = function StatusTag(_ref) {
|
|
61
|
-
var content = _ref.content,
|
|
62
|
-
color = _ref.color;
|
|
63
|
-
return /*#__PURE__*/React.createElement(Box, {
|
|
64
|
-
display: "flex",
|
|
65
|
-
alignItems: "center",
|
|
66
|
-
justifyContent: "center",
|
|
67
|
-
sx: Object.assign({}, tagStyle(color)),
|
|
68
|
-
"data-testid": "statusTag"
|
|
69
|
-
}, /*#__PURE__*/React.createElement(Typography, {
|
|
70
|
-
variant: "caption"
|
|
71
|
-
}, content));
|
|
72
|
-
};
|
|
10
|
+
import { useStore } from 'react-redux';
|
|
73
11
|
|
|
74
12
|
/*! *****************************************************************************
|
|
75
13
|
Copyright (c) Microsoft Corporation.
|
|
@@ -98,6 +36,58 @@ function __rest(s, e) {
|
|
|
98
36
|
return t;
|
|
99
37
|
}
|
|
100
38
|
|
|
39
|
+
var bgColors = {
|
|
40
|
+
green: 'geowebColors.functional.successOutline.fill',
|
|
41
|
+
grey: 'geowebColors.functional.disabledOutline.fill',
|
|
42
|
+
purple: 'geowebColors.functional.summaryOutline.fill',
|
|
43
|
+
red: 'geowebColors.functional.errorOutline.fill',
|
|
44
|
+
yellow: 'geowebColors.functional.warningOutline.fill',
|
|
45
|
+
blue: 'geowebColors.functional.notificationOutline.fill'
|
|
46
|
+
};
|
|
47
|
+
var borderColors = {
|
|
48
|
+
green: 'geowebColors.functional.successOutline.borderColor',
|
|
49
|
+
grey: 'geowebColors.functional.disabledOutline.borderColor',
|
|
50
|
+
purple: 'geowebColors.functional.summaryOutline.borderColor',
|
|
51
|
+
red: 'geowebColors.functional.errorOutline.borderColor',
|
|
52
|
+
yellow: 'geowebColors.functional.warningOutline.borderColor',
|
|
53
|
+
blue: 'geowebColors.functional.notificationOutline.borderColor'
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
var tagStyle = function tagStyle(color) {
|
|
57
|
+
// Set color to grey for summary
|
|
58
|
+
var backgroundColor = bgColors[color];
|
|
59
|
+
var borderColor = borderColors[color];
|
|
60
|
+
return {
|
|
61
|
+
backgroundColor: backgroundColor,
|
|
62
|
+
m: 0,
|
|
63
|
+
p: 0,
|
|
64
|
+
border: '1px solid',
|
|
65
|
+
borderColor: borderColor,
|
|
66
|
+
borderRadius: '4px',
|
|
67
|
+
width: '120px',
|
|
68
|
+
height: '18px',
|
|
69
|
+
lineHeight: '16px',
|
|
70
|
+
color: 'geowebColors.captions.captionStatus.rgba'
|
|
71
|
+
};
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
var StatusTag = function StatusTag(_a) {
|
|
75
|
+
var content = _a.content,
|
|
76
|
+
color = _a.color,
|
|
77
|
+
props = __rest(_a, ["content", "color"]);
|
|
78
|
+
|
|
79
|
+
return /*#__PURE__*/React.createElement(Box, {
|
|
80
|
+
display: "flex",
|
|
81
|
+
alignItems: "center",
|
|
82
|
+
justifyContent: "center",
|
|
83
|
+
"data-testid": "statusTag",
|
|
84
|
+
className: "statusTag",
|
|
85
|
+
sx: Object.assign(Object.assign({}, tagStyle(color)), props.sx)
|
|
86
|
+
}, /*#__PURE__*/React.createElement(Typography, {
|
|
87
|
+
variant: "caption"
|
|
88
|
+
}, content));
|
|
89
|
+
};
|
|
90
|
+
|
|
101
91
|
var confirmStyle = {
|
|
102
92
|
width: {
|
|
103
93
|
xs: '100%',
|
|
@@ -624,6 +614,65 @@ var useDraftFormHelpers = function useDraftFormHelpers() {
|
|
|
624
614
|
};
|
|
625
615
|
};
|
|
626
616
|
|
|
617
|
+
/* *
|
|
618
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
619
|
+
* you may not use this file except in compliance with the License.
|
|
620
|
+
* You may obtain a copy of the License at
|
|
621
|
+
*
|
|
622
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
623
|
+
*
|
|
624
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
625
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
626
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
627
|
+
* See the License for the specific language governing permissions and
|
|
628
|
+
* limitations under the License.
|
|
629
|
+
*
|
|
630
|
+
* Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
|
|
631
|
+
* Copyright 2022 - Finnish Meteorological Institute (FMI)
|
|
632
|
+
* */
|
|
633
|
+
var useMakeSureContainerStaysInsideWindow = function useMakeSureContainerStaysInsideWindow(nodeRef, position, setPosition) {
|
|
634
|
+
var onResizeWindow = React__default.useCallback(function (event) {
|
|
635
|
+
if (!nodeRef.current) return;
|
|
636
|
+
var bbox = nodeRef.current.firstChild.getBoundingClientRect();
|
|
637
|
+
var windowTarget = event.currentTarget;
|
|
638
|
+
if (!windowTarget) return;
|
|
639
|
+
var innerHeight = windowTarget.innerHeight,
|
|
640
|
+
innerWidth = windowTarget.innerWidth;
|
|
641
|
+
var isHorizontallyLarger = bbox.width > innerWidth;
|
|
642
|
+
var isVerticallyLarger = bbox.height > innerHeight; // left screen
|
|
643
|
+
|
|
644
|
+
if (bbox.x < 0 || isHorizontallyLarger) {
|
|
645
|
+
setPosition(Object.assign(Object.assign({}, position), {
|
|
646
|
+
x: position.x - bbox.x
|
|
647
|
+
}));
|
|
648
|
+
} // right screen
|
|
649
|
+
else if (bbox.x + bbox.width >= innerWidth) {
|
|
650
|
+
var diffX = innerWidth - bbox.x - bbox.width;
|
|
651
|
+
setPosition(Object.assign(Object.assign({}, position), {
|
|
652
|
+
x: position.x + diffX
|
|
653
|
+
}));
|
|
654
|
+
} // top screen
|
|
655
|
+
else if (bbox.y < 0 || isVerticallyLarger) {
|
|
656
|
+
setPosition(Object.assign(Object.assign({}, position), {
|
|
657
|
+
y: position.y - bbox.y
|
|
658
|
+
}));
|
|
659
|
+
} // bottom screen
|
|
660
|
+
else if (bbox.y + bbox.height >= innerHeight) {
|
|
661
|
+
var diffY = innerHeight - bbox.y - bbox.height;
|
|
662
|
+
setPosition(Object.assign(Object.assign({}, position), {
|
|
663
|
+
y: position.y + diffY
|
|
664
|
+
}));
|
|
665
|
+
}
|
|
666
|
+
}, [nodeRef, position, setPosition]);
|
|
667
|
+
React__default.useEffect(function () {
|
|
668
|
+
var throttledResize = throttle(onResizeWindow, 100);
|
|
669
|
+
window.addEventListener('resize', throttledResize);
|
|
670
|
+
return function () {
|
|
671
|
+
window.removeEventListener('resize', throttledResize);
|
|
672
|
+
};
|
|
673
|
+
}, [onResizeWindow]);
|
|
674
|
+
};
|
|
675
|
+
|
|
627
676
|
var ConfirmationServiceContext = /*#__PURE__*/React.createContext(Promise.reject);
|
|
628
677
|
var useConfirmationDialog = function useConfirmationDialog() {
|
|
629
678
|
return React.useContext(ConfirmationServiceContext);
|
|
@@ -1681,46 +1730,7 @@ var DraggableComponent = function DraggableComponent(_a) {
|
|
|
1681
1730
|
height: height
|
|
1682
1731
|
});
|
|
1683
1732
|
}, [onChangeSize]);
|
|
1684
|
-
|
|
1685
|
-
if (!nodeRef.current) return;
|
|
1686
|
-
var bbox = nodeRef.current.firstChild.getBoundingClientRect();
|
|
1687
|
-
var windowTarget = event.currentTarget;
|
|
1688
|
-
if (!windowTarget) return;
|
|
1689
|
-
var innerHeight = windowTarget.innerHeight,
|
|
1690
|
-
innerWidth = windowTarget.innerWidth;
|
|
1691
|
-
var isHorizontallyLarger = bbox.width > innerWidth;
|
|
1692
|
-
var isVerticallyLarger = bbox.height > innerHeight; // left screen
|
|
1693
|
-
|
|
1694
|
-
if (bbox.x < 0 || isHorizontallyLarger) {
|
|
1695
|
-
setPosition(Object.assign(Object.assign({}, position), {
|
|
1696
|
-
x: position.x - bbox.x
|
|
1697
|
-
}));
|
|
1698
|
-
} // right screen
|
|
1699
|
-
else if (bbox.x + bbox.width >= innerWidth) {
|
|
1700
|
-
var diffX = innerWidth - bbox.x - bbox.width;
|
|
1701
|
-
setPosition(Object.assign(Object.assign({}, position), {
|
|
1702
|
-
x: position.x + diffX
|
|
1703
|
-
}));
|
|
1704
|
-
} // top screen
|
|
1705
|
-
else if (bbox.y < 0 || isVerticallyLarger) {
|
|
1706
|
-
setPosition(Object.assign(Object.assign({}, position), {
|
|
1707
|
-
y: position.y - bbox.y
|
|
1708
|
-
}));
|
|
1709
|
-
} // bottom screen
|
|
1710
|
-
else if (bbox.y + bbox.height >= innerHeight) {
|
|
1711
|
-
var diffY = innerHeight - bbox.y - bbox.height;
|
|
1712
|
-
setPosition(Object.assign(Object.assign({}, position), {
|
|
1713
|
-
y: position.y + diffY
|
|
1714
|
-
}));
|
|
1715
|
-
}
|
|
1716
|
-
}, [position]);
|
|
1717
|
-
React__default.useEffect(function () {
|
|
1718
|
-
var throttledResize = throttle(onResizeWindow, 100);
|
|
1719
|
-
window.addEventListener('resize', throttledResize);
|
|
1720
|
-
return function () {
|
|
1721
|
-
window.removeEventListener('resize', throttledResize);
|
|
1722
|
-
};
|
|
1723
|
-
}, [onResizeWindow]);
|
|
1733
|
+
useMakeSureContainerStaysInsideWindow(nodeRef, position, setPosition);
|
|
1724
1734
|
var toolcontainerId = React__default.useRef(Date.now().toString()).current;
|
|
1725
1735
|
var headerClassName = "header-".concat(toolcontainerId);
|
|
1726
1736
|
return isOpen ? /*#__PURE__*/React__default.createElement(DraggableComponent$1, {
|
|
@@ -2835,6 +2845,28 @@ var TooltipSelect = function TooltipSelect(_a) {
|
|
|
2835
2845
|
}, otherProps)));
|
|
2836
2846
|
};
|
|
2837
2847
|
|
|
2848
|
+
function withEggs(eggs) {
|
|
2849
|
+
return function (Component) {
|
|
2850
|
+
var WithEggs = function WithEggs(props) {
|
|
2851
|
+
var store = useStore();
|
|
2852
|
+
|
|
2853
|
+
var _React$useState = React.useState(function () {
|
|
2854
|
+
return store.addEggs(eggs);
|
|
2855
|
+
}),
|
|
2856
|
+
_React$useState2 = _slicedToArray(_React$useState, 1),
|
|
2857
|
+
remover = _React$useState2[0];
|
|
2858
|
+
|
|
2859
|
+
React.useEffect(function () {
|
|
2860
|
+
return remover;
|
|
2861
|
+
}, [remover]);
|
|
2862
|
+
return /*#__PURE__*/React.createElement(Component, Object.assign({}, props));
|
|
2863
|
+
};
|
|
2864
|
+
|
|
2865
|
+
WithEggs.displayName = "withEggs(".concat(Component.displayName || Component.name || 'Component', ")");
|
|
2866
|
+
return WithEggs;
|
|
2867
|
+
};
|
|
2868
|
+
}
|
|
2869
|
+
|
|
2838
2870
|
/* *
|
|
2839
2871
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
2840
2872
|
* you may not use this file except in compliance with the License.
|
|
@@ -2897,4 +2929,4 @@ var getWarningMessage = function getWarningMessage(error) {
|
|
|
2897
2929
|
return '';
|
|
2898
2930
|
};
|
|
2899
2931
|
|
|
2900
|
-
export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, ConfirmationDialog, ConfirmationServiceProvider, CustomSlider, CustomToggleButton, DEFAULT_ERROR_MESSAGE, DraggableComponent$1 as Draggable, EnableButton, ErrorBoundary, HIDDEN_INPUT_HELPER_IS_DRAFT, ManagerButton, ManagerDeleteButton, ResizeComponent as Resizable, StatusTag, ToggleMenu, ToolButton, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, calculateDialogSizeAndPosition, getAxiosErrorMessage, getAxiosWarningMessage, getErrorMessage, getInitials, getPosition, getWarningMessage, isAxiosError, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useDialogActions, useDraftFormHelpers, useIsMounted, usePoller, usePreventBrowserClose, usePrevious, useUserMenu };
|
|
2932
|
+
export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, ConfirmationDialog, ConfirmationServiceProvider, CustomSlider, CustomToggleButton, DEFAULT_ERROR_MESSAGE, DraggableComponent$1 as Draggable, EnableButton, ErrorBoundary, HIDDEN_INPUT_HELPER_IS_DRAFT, ManagerButton, ManagerDeleteButton, ResizeComponent as Resizable, StatusTag, ToggleMenu, ToolButton, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, calculateDialogSizeAndPosition, getAxiosErrorMessage, getAxiosWarningMessage, getErrorMessage, getInitials, getPosition, getWarningMessage, isAxiosError, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useDialogActions, useDraftFormHelpers, useIsMounted, useMakeSureContainerStaysInsideWindow, usePoller, usePreventBrowserClose, usePrevious, useUserMenu, withEggs };
|
package/index.umd.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('@opengeoweb/theme'), require('react-hook-form'), require('@opengeoweb/form-fields'), require('react-draggable'), require('re-resizable'), require('
|
|
3
|
-
typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', '@opengeoweb/theme', 'react-hook-form', '@opengeoweb/form-fields', 'react-draggable', 're-resizable', '
|
|
4
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Shared = {}, global.React, global.material, global.theme, global.reactHookForm, global.formFields, global.Draggable, global.reResizable, global.
|
|
5
|
-
})(this, (function (exports, React, material, theme, reactHookForm, formFields, Draggable, reResizable,
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('@opengeoweb/theme'), require('react-hook-form'), require('@opengeoweb/form-fields'), require('lodash'), require('react-draggable'), require('re-resizable'), require('react-redux')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', '@opengeoweb/theme', 'react-hook-form', '@opengeoweb/form-fields', 'lodash', 'react-draggable', 're-resizable', 'react-redux'], factory) :
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Shared = {}, global.React, global.material, global.theme, global.reactHookForm, global.formFields, global.lodash, global.Draggable, global.reResizable, global.reactRedux));
|
|
5
|
+
})(this, (function (exports, React, material, theme, reactHookForm, formFields, lodash, Draggable, reResizable, reactRedux) { 'use strict';
|
|
6
6
|
|
|
7
7
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
8
8
|
|
|
@@ -110,47 +110,52 @@
|
|
|
110
110
|
}
|
|
111
111
|
|
|
112
112
|
var bgColors = {
|
|
113
|
-
green: '
|
|
114
|
-
grey: '
|
|
115
|
-
purple: '
|
|
116
|
-
red: '
|
|
117
|
-
yellow: '
|
|
113
|
+
green: 'geowebColors.functional.successOutline.fill',
|
|
114
|
+
grey: 'geowebColors.functional.disabledOutline.fill',
|
|
115
|
+
purple: 'geowebColors.functional.summaryOutline.fill',
|
|
116
|
+
red: 'geowebColors.functional.errorOutline.fill',
|
|
117
|
+
yellow: 'geowebColors.functional.warningOutline.fill',
|
|
118
|
+
blue: 'geowebColors.functional.notificationOutline.fill'
|
|
118
119
|
};
|
|
119
120
|
var borderColors = {
|
|
120
|
-
green: '
|
|
121
|
-
grey: '
|
|
122
|
-
purple: '
|
|
123
|
-
red: '
|
|
124
|
-
yellow: '
|
|
121
|
+
green: 'geowebColors.functional.successOutline.borderColor',
|
|
122
|
+
grey: 'geowebColors.functional.disabledOutline.borderColor',
|
|
123
|
+
purple: 'geowebColors.functional.summaryOutline.borderColor',
|
|
124
|
+
red: 'geowebColors.functional.errorOutline.borderColor',
|
|
125
|
+
yellow: 'geowebColors.functional.warningOutline.borderColor',
|
|
126
|
+
blue: 'geowebColors.functional.notificationOutline.borderColor'
|
|
125
127
|
};
|
|
126
128
|
|
|
127
129
|
var tagStyle = function tagStyle(color) {
|
|
128
130
|
// Set color to grey for summary
|
|
129
|
-
var
|
|
131
|
+
var backgroundColor = bgColors[color];
|
|
130
132
|
var borderColor = borderColors[color];
|
|
131
133
|
return {
|
|
132
|
-
backgroundColor:
|
|
134
|
+
backgroundColor: backgroundColor,
|
|
133
135
|
m: 0,
|
|
134
|
-
p: 0
|
|
135
|
-
border:
|
|
136
|
+
p: 0,
|
|
137
|
+
border: '1px solid',
|
|
138
|
+
borderColor: borderColor,
|
|
136
139
|
borderRadius: '4px',
|
|
137
|
-
width: '
|
|
138
|
-
height: '
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
boxSizing: 'content-box'
|
|
140
|
+
width: '120px',
|
|
141
|
+
height: '18px',
|
|
142
|
+
lineHeight: '16px',
|
|
143
|
+
color: 'geowebColors.captions.captionStatus.rgba'
|
|
142
144
|
};
|
|
143
145
|
};
|
|
144
146
|
|
|
145
147
|
var StatusTag = function StatusTag(_a) {
|
|
146
148
|
var content = _a.content,
|
|
147
|
-
color = _a.color
|
|
149
|
+
color = _a.color,
|
|
150
|
+
props = __rest(_a, ["content", "color"]);
|
|
151
|
+
|
|
148
152
|
return /*#__PURE__*/React__namespace.createElement(material.Box, {
|
|
149
153
|
display: "flex",
|
|
150
154
|
alignItems: "center",
|
|
151
155
|
justifyContent: "center",
|
|
152
|
-
|
|
153
|
-
|
|
156
|
+
"data-testid": "statusTag",
|
|
157
|
+
className: "statusTag",
|
|
158
|
+
sx: __assign(__assign({}, tagStyle(color)), props.sx)
|
|
154
159
|
}, /*#__PURE__*/React__namespace.createElement(material.Typography, {
|
|
155
160
|
variant: "caption"
|
|
156
161
|
}, content));
|
|
@@ -478,6 +483,49 @@
|
|
|
478
483
|
};
|
|
479
484
|
};
|
|
480
485
|
|
|
486
|
+
var useMakeSureContainerStaysInsideWindow = function useMakeSureContainerStaysInsideWindow(nodeRef, position, setPosition) {
|
|
487
|
+
var onResizeWindow = React__default["default"].useCallback(function (event) {
|
|
488
|
+
if (!nodeRef.current) return;
|
|
489
|
+
var bbox = nodeRef.current.firstChild.getBoundingClientRect();
|
|
490
|
+
var windowTarget = event.currentTarget;
|
|
491
|
+
if (!windowTarget) return;
|
|
492
|
+
var innerHeight = windowTarget.innerHeight,
|
|
493
|
+
innerWidth = windowTarget.innerWidth;
|
|
494
|
+
var isHorizontallyLarger = bbox.width > innerWidth;
|
|
495
|
+
var isVerticallyLarger = bbox.height > innerHeight; // left screen
|
|
496
|
+
|
|
497
|
+
if (bbox.x < 0 || isHorizontallyLarger) {
|
|
498
|
+
setPosition(__assign(__assign({}, position), {
|
|
499
|
+
x: position.x - bbox.x
|
|
500
|
+
}));
|
|
501
|
+
} // right screen
|
|
502
|
+
else if (bbox.x + bbox.width >= innerWidth) {
|
|
503
|
+
var diffX = innerWidth - bbox.x - bbox.width;
|
|
504
|
+
setPosition(__assign(__assign({}, position), {
|
|
505
|
+
x: position.x + diffX
|
|
506
|
+
}));
|
|
507
|
+
} // top screen
|
|
508
|
+
else if (bbox.y < 0 || isVerticallyLarger) {
|
|
509
|
+
setPosition(__assign(__assign({}, position), {
|
|
510
|
+
y: position.y - bbox.y
|
|
511
|
+
}));
|
|
512
|
+
} // bottom screen
|
|
513
|
+
else if (bbox.y + bbox.height >= innerHeight) {
|
|
514
|
+
var diffY = innerHeight - bbox.y - bbox.height;
|
|
515
|
+
setPosition(__assign(__assign({}, position), {
|
|
516
|
+
y: position.y + diffY
|
|
517
|
+
}));
|
|
518
|
+
}
|
|
519
|
+
}, [nodeRef, position, setPosition]);
|
|
520
|
+
React__default["default"].useEffect(function () {
|
|
521
|
+
var throttledResize = lodash.throttle(onResizeWindow, 100);
|
|
522
|
+
window.addEventListener('resize', throttledResize);
|
|
523
|
+
return function () {
|
|
524
|
+
window.removeEventListener('resize', throttledResize);
|
|
525
|
+
};
|
|
526
|
+
}, [onResizeWindow]);
|
|
527
|
+
};
|
|
528
|
+
|
|
481
529
|
var ConfirmationServiceContext = /*#__PURE__*/React__namespace.createContext(Promise.reject);
|
|
482
530
|
var useConfirmationDialog = function useConfirmationDialog() {
|
|
483
531
|
return React__namespace.useContext(ConfirmationServiceContext);
|
|
@@ -1544,46 +1592,7 @@
|
|
|
1544
1592
|
height: height
|
|
1545
1593
|
});
|
|
1546
1594
|
}, [onChangeSize]);
|
|
1547
|
-
|
|
1548
|
-
if (!nodeRef.current) return;
|
|
1549
|
-
var bbox = nodeRef.current.firstChild.getBoundingClientRect();
|
|
1550
|
-
var windowTarget = event.currentTarget;
|
|
1551
|
-
if (!windowTarget) return;
|
|
1552
|
-
var innerHeight = windowTarget.innerHeight,
|
|
1553
|
-
innerWidth = windowTarget.innerWidth;
|
|
1554
|
-
var isHorizontallyLarger = bbox.width > innerWidth;
|
|
1555
|
-
var isVerticallyLarger = bbox.height > innerHeight; // left screen
|
|
1556
|
-
|
|
1557
|
-
if (bbox.x < 0 || isHorizontallyLarger) {
|
|
1558
|
-
setPosition(__assign(__assign({}, position), {
|
|
1559
|
-
x: position.x - bbox.x
|
|
1560
|
-
}));
|
|
1561
|
-
} // right screen
|
|
1562
|
-
else if (bbox.x + bbox.width >= innerWidth) {
|
|
1563
|
-
var diffX = innerWidth - bbox.x - bbox.width;
|
|
1564
|
-
setPosition(__assign(__assign({}, position), {
|
|
1565
|
-
x: position.x + diffX
|
|
1566
|
-
}));
|
|
1567
|
-
} // top screen
|
|
1568
|
-
else if (bbox.y < 0 || isVerticallyLarger) {
|
|
1569
|
-
setPosition(__assign(__assign({}, position), {
|
|
1570
|
-
y: position.y - bbox.y
|
|
1571
|
-
}));
|
|
1572
|
-
} // bottom screen
|
|
1573
|
-
else if (bbox.y + bbox.height >= innerHeight) {
|
|
1574
|
-
var diffY = innerHeight - bbox.y - bbox.height;
|
|
1575
|
-
setPosition(__assign(__assign({}, position), {
|
|
1576
|
-
y: position.y + diffY
|
|
1577
|
-
}));
|
|
1578
|
-
}
|
|
1579
|
-
}, [position]);
|
|
1580
|
-
React__default["default"].useEffect(function () {
|
|
1581
|
-
var throttledResize = lodash.throttle(onResizeWindow, 100);
|
|
1582
|
-
window.addEventListener('resize', throttledResize);
|
|
1583
|
-
return function () {
|
|
1584
|
-
window.removeEventListener('resize', throttledResize);
|
|
1585
|
-
};
|
|
1586
|
-
}, [onResizeWindow]);
|
|
1595
|
+
useMakeSureContainerStaysInsideWindow(nodeRef, position, setPosition);
|
|
1587
1596
|
var toolcontainerId = React__default["default"].useRef(Date.now().toString()).current;
|
|
1588
1597
|
var headerClassName = "header-" + toolcontainerId;
|
|
1589
1598
|
return isOpen ? /*#__PURE__*/React__default["default"].createElement(DraggableComponent$1, {
|
|
@@ -2715,6 +2724,27 @@
|
|
|
2715
2724
|
}, otherProps)));
|
|
2716
2725
|
};
|
|
2717
2726
|
|
|
2727
|
+
function withEggs(eggs) {
|
|
2728
|
+
return function (Component) {
|
|
2729
|
+
var WithEggs = function WithEggs(props) {
|
|
2730
|
+
var store = reactRedux.useStore();
|
|
2731
|
+
|
|
2732
|
+
var _a = __read(React__namespace.useState(function () {
|
|
2733
|
+
return store.addEggs(eggs);
|
|
2734
|
+
}), 1),
|
|
2735
|
+
remover = _a[0];
|
|
2736
|
+
|
|
2737
|
+
React__namespace.useEffect(function () {
|
|
2738
|
+
return remover;
|
|
2739
|
+
}, [remover]);
|
|
2740
|
+
return /*#__PURE__*/React__namespace.createElement(Component, __assign({}, props));
|
|
2741
|
+
};
|
|
2742
|
+
|
|
2743
|
+
WithEggs.displayName = "withEggs(" + (Component.displayName || Component.name || 'Component') + ")";
|
|
2744
|
+
return WithEggs;
|
|
2745
|
+
};
|
|
2746
|
+
}
|
|
2747
|
+
|
|
2718
2748
|
/* *
|
|
2719
2749
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
2720
2750
|
* you may not use this file except in compliance with the License.
|
|
@@ -2820,10 +2850,12 @@
|
|
|
2820
2850
|
exports.useDialogActions = useDialogActions;
|
|
2821
2851
|
exports.useDraftFormHelpers = useDraftFormHelpers;
|
|
2822
2852
|
exports.useIsMounted = useIsMounted;
|
|
2853
|
+
exports.useMakeSureContainerStaysInsideWindow = useMakeSureContainerStaysInsideWindow;
|
|
2823
2854
|
exports.usePoller = usePoller;
|
|
2824
2855
|
exports.usePreventBrowserClose = usePreventBrowserClose;
|
|
2825
2856
|
exports.usePrevious = usePrevious;
|
|
2826
2857
|
exports.useUserMenu = useUserMenu;
|
|
2858
|
+
exports.withEggs = withEggs;
|
|
2827
2859
|
|
|
2828
2860
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
2829
2861
|
|
|
@@ -5,25 +5,21 @@ declare const _default: {
|
|
|
5
5
|
export default _default;
|
|
6
6
|
export declare const AvatarLight: {
|
|
7
7
|
(): React.ReactElement;
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
}[];
|
|
15
|
-
};
|
|
8
|
+
storyName: string;
|
|
9
|
+
parameters: {
|
|
10
|
+
zeplinLink: {
|
|
11
|
+
name: string;
|
|
12
|
+
link: string;
|
|
13
|
+
}[];
|
|
16
14
|
};
|
|
17
15
|
};
|
|
18
16
|
export declare const AvatarDark: {
|
|
19
17
|
(): React.ReactElement;
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}[];
|
|
27
|
-
};
|
|
18
|
+
storyName: string;
|
|
19
|
+
parameters: {
|
|
20
|
+
zeplinLink: {
|
|
21
|
+
name: string;
|
|
22
|
+
link: string;
|
|
23
|
+
}[];
|
|
28
24
|
};
|
|
29
25
|
};
|
|
@@ -3,6 +3,6 @@ import { ToggleButtonProps } from '@mui/material';
|
|
|
3
3
|
import { ButtonVariant } from '@opengeoweb/theme';
|
|
4
4
|
export interface CustomToggleButtonProps extends Omit<ToggleButtonProps, 'value'> {
|
|
5
5
|
variant?: ButtonVariant;
|
|
6
|
-
value?:
|
|
6
|
+
value?: any;
|
|
7
7
|
}
|
|
8
8
|
export declare const CustomToggleButton: React.FC<CustomToggleButtonProps>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
declare type
|
|
2
|
+
export declare type DraggablePosition = {
|
|
3
3
|
x: number;
|
|
4
4
|
y: number;
|
|
5
5
|
};
|
|
@@ -7,8 +7,8 @@ interface DraggableComponentProps {
|
|
|
7
7
|
nodeRef?: React.RefObject<HTMLElement>;
|
|
8
8
|
children?: React.ReactNode;
|
|
9
9
|
bounds?: 'parent' | string;
|
|
10
|
-
position?:
|
|
11
|
-
onStop?: (event: React.MouseEvent<HTMLElement>, pos:
|
|
10
|
+
position?: DraggablePosition;
|
|
11
|
+
onStop?: (event: React.MouseEvent<HTMLElement>, pos: DraggablePosition) => void;
|
|
12
12
|
onMouseDown?: (event: MouseEvent) => void;
|
|
13
13
|
handle?: string;
|
|
14
14
|
}
|
|
@@ -3,7 +3,27 @@ declare const _default: {
|
|
|
3
3
|
title: string;
|
|
4
4
|
};
|
|
5
5
|
export default _default;
|
|
6
|
-
export declare const
|
|
6
|
+
export declare const StatusTagsGWTheme: {
|
|
7
7
|
(): React.ReactElement;
|
|
8
8
|
storyName: string;
|
|
9
9
|
};
|
|
10
|
+
export declare const StatusTagsLight: {
|
|
11
|
+
(): React.ReactElement;
|
|
12
|
+
storyName: string;
|
|
13
|
+
parameters: {
|
|
14
|
+
zeplinLink: {
|
|
15
|
+
name: string;
|
|
16
|
+
link: string;
|
|
17
|
+
}[];
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
export declare const StatusTagsDark: {
|
|
21
|
+
(): React.ReactElement;
|
|
22
|
+
storyName: string;
|
|
23
|
+
parameters: {
|
|
24
|
+
zeplinLink: {
|
|
25
|
+
name: string;
|
|
26
|
+
link: string;
|
|
27
|
+
}[];
|
|
28
|
+
};
|
|
29
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { withEggs } from './WithEggs';
|
package/lib/hooks/index.d.ts
CHANGED
|
@@ -3,3 +3,4 @@ export * from './usePoller/usePoller';
|
|
|
3
3
|
export * from './usePrevious/usePrevious';
|
|
4
4
|
export * from './useIsMounted/useIsMounted';
|
|
5
5
|
export * from './useDraftFormHelpers/useDraftFormHelpers';
|
|
6
|
+
export * from './useMakeSureContainerStaysInsideWindow/useMakeSureContainerStaysInsideWindow';
|
package/lib/hooks/useMakeSureContainerStaysInsideWindow/useMakeSureContainerStaysInsideWindow.d.ts
ADDED
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { DraggablePosition } from '../../components/DraggableResizable/Draggable';
|
|
3
|
+
export declare const useMakeSureContainerStaysInsideWindow: (nodeRef: React.RefObject<HTMLDivElement>, position: DraggablePosition, setPosition: (position: DraggablePosition) => void) => void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@opengeoweb/shared",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.4.0",
|
|
4
4
|
"description": "GeoWeb shared library with shared components and utils for the opengeoweb project",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -13,16 +13,18 @@
|
|
|
13
13
|
"dependencies": {},
|
|
14
14
|
"peerDependencies": {
|
|
15
15
|
"react": "^17.0.2",
|
|
16
|
-
"@mui/material": "^5.
|
|
17
|
-
"@opengeoweb/theme": "4.
|
|
18
|
-
"react-draggable": "^4.4.
|
|
16
|
+
"@mui/material": "^5.10.8",
|
|
17
|
+
"@opengeoweb/theme": "4.4.0",
|
|
18
|
+
"react-draggable": "^4.4.5",
|
|
19
19
|
"re-resizable": "^6.9.0",
|
|
20
|
-
"
|
|
21
|
-
"
|
|
20
|
+
"@redux-eggs/core": "^2.2.0",
|
|
21
|
+
"react-redux": "^8.0.4",
|
|
22
|
+
"@opengeoweb/form-fields": "4.4.0",
|
|
22
23
|
"react-hook-form": "^6.12.1",
|
|
23
24
|
"moment": "^2.29.0",
|
|
24
25
|
"moment-timezone": "^0.5.31",
|
|
25
|
-
"@mui/
|
|
26
|
+
"@mui/x-date-pickers": "^5.0.4",
|
|
27
|
+
"lodash": "^4.17.20",
|
|
26
28
|
"axios": "^0.25.0"
|
|
27
29
|
}
|
|
28
30
|
}
|