@opengeoweb/soundings 20.1.0 → 20.2.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/dist/index.esm.js +8 -470
- package/dist/src/lib/components/SoundingsPanels/SoundingsPanelConnect.d.ts +1 -1
- package/dist/src/lib/components/SoundingsPanels/SoundingsPanels.d.ts +1 -1
- package/dist/src/lib/components/index.d.ts +0 -6
- package/package.json +9 -10
- package/dist/src/lib/components/ResizablePanel/MultipleResizablePanelsDemo.d.ts +0 -2
- package/dist/src/lib/components/ResizablePanel/ResizablePanel.d.ts +0 -18
- package/dist/src/lib/components/ResizablePanel/ResizablePanelStandalone.d.ts +0 -25
- package/dist/src/lib/components/SortablePanels/SortablePanels.d.ts +0 -30
package/dist/index.esm.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
|
-
import { Stack, Box, Tooltip, Typography, styled,
|
|
2
|
+
import { Stack, Box, Tooltip, Typography, styled, Menu, ListSubheader, MenuItem, LinearProgress, Card, IconButton, List as List$1, ListItem, ListItemIcon, Checkbox, ListItemText, Grid, ListItemButton, Switch, ToggleButtonGroup, ToggleButton } from '@mui/material';
|
|
3
3
|
import { range, isEqual } from 'lodash';
|
|
4
4
|
import React, { useMemo, useRef, useEffect, useId, useCallback, useState, Fragment as Fragment$1 } from 'react';
|
|
5
5
|
import { useDispatch, useSelector, shallowEqual } from 'react-redux';
|
|
6
|
-
import { dateUtils, referenceTimeUtils, safelyInitI18nForTestsAndStories, sharedTranslations, SHARED_NAMESPACE, SwitchButton, CustomToggleButton, LegendToggleButton, useScrollingInIsolation, CustomSlider, AlertBanner, ToolContainerDraggable, TooltipSelect, AlertIcon, useResizeObserver, SearchField, CustomAccordion } from '@opengeoweb/shared';
|
|
6
|
+
import { dateUtils, referenceTimeUtils, safelyInitI18nForTestsAndStories, sharedTranslations, SHARED_NAMESPACE, SwitchButton, CustomToggleButton, LegendToggleButton, ResizablePanel, useScrollingInIsolation, CustomSlider, SortablePanels, AlertBanner, ToolContainerDraggable, TooltipSelect, AlertIcon, useResizeObserver, SearchField, CustomAccordion } from '@opengeoweb/shared';
|
|
7
7
|
import { selectorMemoizationOptions, uiSelectors, uiTypes, uiActions, syncGroupsSelectors, genericActions, useSyncgroupTimeState, useRegisterFeatureSyncSource, genericSelectors, mapSelectors, mapActions, useUpdateFeatureSyncLayers, layerActions, useSetupDialog, storeReducerMap, storeMiddlewares } from '@opengeoweb/store';
|
|
8
|
-
import { Layers, Sources, Location, Equalizer,
|
|
8
|
+
import { Layers, Sources, Location, Equalizer, Close, DragHandle, Visibility, VisibilityOff } from '@opengeoweb/theme';
|
|
9
9
|
import { ParseISOTimeRangeDuration, parseISO8601IntervalToDateInterval, handleDateUtilsISOString, webmapUtils } from '@opengeoweb/webmap';
|
|
10
10
|
import { MapFeatureClass } from '@opengeoweb/webmap-react';
|
|
11
11
|
import * as d3 from 'd3';
|
|
@@ -17,9 +17,8 @@ import i18n from 'i18next';
|
|
|
17
17
|
export { default as i18n } from 'i18next';
|
|
18
18
|
import { useTranslation } from 'react-i18next';
|
|
19
19
|
import { timesliderTranslations, TIME_SLIDER_NAMESPACE, BackwardForwardStepButton, HideSliderButton } from '@opengeoweb/time-slider';
|
|
20
|
-
import { useResizable } from 'react-resizable-layout';
|
|
21
|
-
import { ReactSortable } from 'react-sortablejs';
|
|
22
20
|
import { List } from 'react-window';
|
|
21
|
+
import { ReactSortable } from 'react-sortablejs';
|
|
23
22
|
|
|
24
23
|
var en = {
|
|
25
24
|
sources: "Sources",
|
|
@@ -3493,350 +3492,6 @@ var MenuBarConnect = function MenuBarConnect(_ref) {
|
|
|
3493
3492
|
});
|
|
3494
3493
|
};
|
|
3495
3494
|
|
|
3496
|
-
var PANEL_MIN_WIDTH = 24;
|
|
3497
|
-
var ResizablePanel = /*#__PURE__*/React.forwardRef(function (_ref, contentRef) {
|
|
3498
|
-
var name = _ref.name,
|
|
3499
|
-
_ref$minWidth = _ref.minWidth,
|
|
3500
|
-
minWidth = _ref$minWidth === void 0 ? PANEL_MIN_WIDTH : _ref$minWidth,
|
|
3501
|
-
maxWidth = _ref.maxWidth,
|
|
3502
|
-
isOpen = _ref.isOpen,
|
|
3503
|
-
headerAction = _ref.headerAction,
|
|
3504
|
-
handleButtonComponent = _ref.handleButtonComponent,
|
|
3505
|
-
children = _ref.children,
|
|
3506
|
-
onSetIsOpen = _ref.onSetIsOpen,
|
|
3507
|
-
onSetCustomWidth = _ref.onSetCustomWidth,
|
|
3508
|
-
_onResizeStart = _ref.onResizeStart,
|
|
3509
|
-
_onResizeEnd = _ref.onResizeEnd,
|
|
3510
|
-
customWidth = _ref.customWidth,
|
|
3511
|
-
isDisplayed = _ref.isDisplayed,
|
|
3512
|
-
resizeOnViewCloseSignal = _ref.resizeOnViewCloseSignal;
|
|
3513
|
-
var containerRef = React.useRef(null);
|
|
3514
|
-
var widthRef = React.useRef(null);
|
|
3515
|
-
var isDraggingRef = React.useRef(false);
|
|
3516
|
-
var _React$useState = React.useState(false),
|
|
3517
|
-
autoSizing = _React$useState[0],
|
|
3518
|
-
setAutoSizing = _React$useState[1];
|
|
3519
|
-
var _React$useState2 = React.useState(false),
|
|
3520
|
-
growing = _React$useState2[0],
|
|
3521
|
-
setGrowing = _React$useState2[1];
|
|
3522
|
-
var growBasisRef = React.useRef(minWidth);
|
|
3523
|
-
var previousResizeSignalRef = React.useRef(resizeOnViewCloseSignal);
|
|
3524
|
-
var _useResizable = useResizable({
|
|
3525
|
-
containerRef: containerRef,
|
|
3526
|
-
axis: 'x',
|
|
3527
|
-
min: minWidth,
|
|
3528
|
-
max: maxWidth || undefined,
|
|
3529
|
-
initial: customWidth != null ? customWidth : minWidth,
|
|
3530
|
-
onResizeStart: function onResizeStart() {
|
|
3531
|
-
isDraggingRef.current = true;
|
|
3532
|
-
setAutoSizing(false);
|
|
3533
|
-
_onResizeStart == null || _onResizeStart();
|
|
3534
|
-
},
|
|
3535
|
-
onResizeEnd: function onResizeEnd(_ref2) {
|
|
3536
|
-
var position = _ref2.position;
|
|
3537
|
-
isDraggingRef.current = false;
|
|
3538
|
-
if (position <= minWidth) {
|
|
3539
|
-
widthRef.current = null;
|
|
3540
|
-
onSetIsOpen == null || onSetIsOpen(false);
|
|
3541
|
-
} else {
|
|
3542
|
-
widthRef.current = position;
|
|
3543
|
-
onSetIsOpen == null || onSetIsOpen(true);
|
|
3544
|
-
onSetCustomWidth == null || onSetCustomWidth(position);
|
|
3545
|
-
}
|
|
3546
|
-
// Fire after the open/close calls so consumers tracking the drag
|
|
3547
|
-
// lifecycle (e.g. a "resizing" flag) reset only once the close above
|
|
3548
|
-
// has been handled.
|
|
3549
|
-
_onResizeEnd == null || _onResizeEnd();
|
|
3550
|
-
}
|
|
3551
|
-
}),
|
|
3552
|
-
containerWidth = _useResizable.position,
|
|
3553
|
-
setContainerWidth = _useResizable.setPosition,
|
|
3554
|
-
separatorProps = _useResizable.separatorProps;
|
|
3555
|
-
var openPanel = function openPanel() {
|
|
3556
|
-
var _ref3, _widthRef$current;
|
|
3557
|
-
var targetWidth = (_ref3 = (_widthRef$current = widthRef.current) != null ? _widthRef$current : customWidth) != null ? _ref3 : null;
|
|
3558
|
-
if (targetWidth != null) {
|
|
3559
|
-
setAutoSizing(false);
|
|
3560
|
-
setContainerWidth(Math.max(targetWidth, minWidth));
|
|
3561
|
-
onSetIsOpen == null || onSetIsOpen(true);
|
|
3562
|
-
return;
|
|
3563
|
-
}
|
|
3564
|
-
setAutoSizing(true);
|
|
3565
|
-
onSetIsOpen == null || onSetIsOpen(true);
|
|
3566
|
-
};
|
|
3567
|
-
var closePanel = React.useCallback(function () {
|
|
3568
|
-
setContainerWidth(minWidth);
|
|
3569
|
-
onSetIsOpen == null || onSetIsOpen(false);
|
|
3570
|
-
setAutoSizing(false);
|
|
3571
|
-
}, [minWidth, setContainerWidth, onSetIsOpen]);
|
|
3572
|
-
React.useEffect(function () {
|
|
3573
|
-
// While dragging, useResizable owns containerWidth based on the pointer.
|
|
3574
|
-
// Running the width-syncing branches here would jump away from the user's
|
|
3575
|
-
// drag position, so skip this effect until the drag ends.
|
|
3576
|
-
if (isDraggingRef.current) {
|
|
3577
|
-
return;
|
|
3578
|
-
}
|
|
3579
|
-
if (isOpen) {
|
|
3580
|
-
var _ref4, _widthRef$current2;
|
|
3581
|
-
var targetWidth = (_ref4 = (_widthRef$current2 = widthRef.current) != null ? _widthRef$current2 : customWidth) != null ? _ref4 : null;
|
|
3582
|
-
if (targetWidth != null) {
|
|
3583
|
-
setAutoSizing(false);
|
|
3584
|
-
setContainerWidth(Math.max(targetWidth, minWidth));
|
|
3585
|
-
} else {
|
|
3586
|
-
setAutoSizing(true);
|
|
3587
|
-
}
|
|
3588
|
-
} else {
|
|
3589
|
-
setContainerWidth(minWidth);
|
|
3590
|
-
setAutoSizing(false);
|
|
3591
|
-
}
|
|
3592
|
-
}, [isOpen, minWidth, setContainerWidth, customWidth]);
|
|
3593
|
-
// Flip open/closed state during an active drag as the width crosses the
|
|
3594
|
-
// minWidth threshold, so the panel can close and re-open within a
|
|
3595
|
-
// single drag gesture without waiting for pointer release.
|
|
3596
|
-
React.useEffect(function () {
|
|
3597
|
-
if (!isDraggingRef.current) {
|
|
3598
|
-
return;
|
|
3599
|
-
}
|
|
3600
|
-
if (isOpen && containerWidth <= minWidth) {
|
|
3601
|
-
onSetIsOpen == null || onSetIsOpen(false);
|
|
3602
|
-
} else if (!isOpen && containerWidth > minWidth) {
|
|
3603
|
-
onSetIsOpen == null || onSetIsOpen(true);
|
|
3604
|
-
}
|
|
3605
|
-
}, [isOpen, containerWidth, minWidth, onSetIsOpen]);
|
|
3606
|
-
React.useEffect(function () {
|
|
3607
|
-
var viewCloseSignalChanged = previousResizeSignalRef.current !== resizeOnViewCloseSignal;
|
|
3608
|
-
if (!viewCloseSignalChanged) {
|
|
3609
|
-
return;
|
|
3610
|
-
}
|
|
3611
|
-
previousResizeSignalRef.current = resizeOnViewCloseSignal;
|
|
3612
|
-
var panelCanReclaimFreedSpace = isOpen && !autoSizing && !isDraggingRef.current;
|
|
3613
|
-
if (panelCanReclaimFreedSpace) {
|
|
3614
|
-
growBasisRef.current = Math.max(containerWidth, minWidth);
|
|
3615
|
-
setGrowing(true);
|
|
3616
|
-
}
|
|
3617
|
-
}, [resizeOnViewCloseSignal, isOpen, autoSizing, containerWidth, minWidth]);
|
|
3618
|
-
React.useLayoutEffect(function () {
|
|
3619
|
-
if (autoSizing) {
|
|
3620
|
-
return;
|
|
3621
|
-
}
|
|
3622
|
-
if (isDraggingRef.current) {
|
|
3623
|
-
return;
|
|
3624
|
-
}
|
|
3625
|
-
if (!isOpen && containerWidth > minWidth) {
|
|
3626
|
-
setContainerWidth(minWidth);
|
|
3627
|
-
return;
|
|
3628
|
-
}
|
|
3629
|
-
if (isOpen && containerWidth <= minWidth) {
|
|
3630
|
-
setAutoSizing(true);
|
|
3631
|
-
}
|
|
3632
|
-
}, [autoSizing, containerWidth, isOpen, minWidth, setContainerWidth]);
|
|
3633
|
-
React.useLayoutEffect(function () {
|
|
3634
|
-
if (!autoSizing || !containerRef.current) {
|
|
3635
|
-
return;
|
|
3636
|
-
}
|
|
3637
|
-
var raf1 = 0;
|
|
3638
|
-
var raf2 = 0;
|
|
3639
|
-
var measureContainerWidth = function measureContainerWidth() {
|
|
3640
|
-
if (!containerRef.current) {
|
|
3641
|
-
return;
|
|
3642
|
-
}
|
|
3643
|
-
var _containerRef$current = containerRef.current.getBoundingClientRect(),
|
|
3644
|
-
width = _containerRef$current.width;
|
|
3645
|
-
var calculatedWidth = Math.max(Math.round(width), minWidth);
|
|
3646
|
-
setContainerWidth(calculatedWidth);
|
|
3647
|
-
widthRef.current = calculatedWidth;
|
|
3648
|
-
setAutoSizing(false);
|
|
3649
|
-
};
|
|
3650
|
-
raf1 = requestAnimationFrame(function () {
|
|
3651
|
-
raf2 = requestAnimationFrame(measureContainerWidth);
|
|
3652
|
-
});
|
|
3653
|
-
// eslint-disable-next-line consistent-return
|
|
3654
|
-
return function () {
|
|
3655
|
-
cancelAnimationFrame(raf1);
|
|
3656
|
-
cancelAnimationFrame(raf2);
|
|
3657
|
-
};
|
|
3658
|
-
}, [autoSizing, minWidth, setContainerWidth]);
|
|
3659
|
-
React.useLayoutEffect(function () {
|
|
3660
|
-
if (!growing || !containerRef.current) {
|
|
3661
|
-
return;
|
|
3662
|
-
}
|
|
3663
|
-
var growRaf1 = 0;
|
|
3664
|
-
var growRaf2 = 0;
|
|
3665
|
-
var lockGrownWidth = function lockGrownWidth() {
|
|
3666
|
-
if (!containerRef.current) {
|
|
3667
|
-
return;
|
|
3668
|
-
}
|
|
3669
|
-
var _containerRef$current2 = containerRef.current.getBoundingClientRect(),
|
|
3670
|
-
width = _containerRef$current2.width;
|
|
3671
|
-
var lockedWidth = Math.max(Math.round(width), minWidth);
|
|
3672
|
-
setContainerWidth(lockedWidth);
|
|
3673
|
-
widthRef.current = lockedWidth;
|
|
3674
|
-
setGrowing(false);
|
|
3675
|
-
};
|
|
3676
|
-
growRaf1 = requestAnimationFrame(function () {
|
|
3677
|
-
growRaf2 = requestAnimationFrame(lockGrownWidth);
|
|
3678
|
-
});
|
|
3679
|
-
// eslint-disable-next-line consistent-return
|
|
3680
|
-
return function () {
|
|
3681
|
-
cancelAnimationFrame(growRaf1);
|
|
3682
|
-
cancelAnimationFrame(growRaf2);
|
|
3683
|
-
};
|
|
3684
|
-
}, [growing, minWidth, setContainerWidth]);
|
|
3685
|
-
var cardStyleWhenAuto = {
|
|
3686
|
-
display: isDisplayed ? 'block' : 'none',
|
|
3687
|
-
width: 'auto',
|
|
3688
|
-
flex: '1 1 100%',
|
|
3689
|
-
minWidth: 0,
|
|
3690
|
-
maxWidth: maxWidth || '100%',
|
|
3691
|
-
boxSizing: 'border-box'
|
|
3692
|
-
};
|
|
3693
|
-
var cardStyleWhenLocked = {
|
|
3694
|
-
display: isDisplayed ? 'block' : 'none',
|
|
3695
|
-
width: containerWidth,
|
|
3696
|
-
flex: '0 1 auto',
|
|
3697
|
-
minWidth: minWidth,
|
|
3698
|
-
maxWidth: maxWidth || '100%',
|
|
3699
|
-
boxSizing: 'border-box'
|
|
3700
|
-
};
|
|
3701
|
-
var cardStyleWhenGrowing = {
|
|
3702
|
-
display: isDisplayed ? 'block' : 'none',
|
|
3703
|
-
width: 'auto',
|
|
3704
|
-
flex: growBasisRef.current + " 1 0px",
|
|
3705
|
-
minWidth: minWidth,
|
|
3706
|
-
maxWidth: maxWidth || '100%',
|
|
3707
|
-
boxSizing: 'border-box'
|
|
3708
|
-
};
|
|
3709
|
-
var getActiveCardStyle = function getActiveCardStyle() {
|
|
3710
|
-
if (growing) {
|
|
3711
|
-
return cardStyleWhenGrowing;
|
|
3712
|
-
}
|
|
3713
|
-
if (autoSizing) {
|
|
3714
|
-
return cardStyleWhenAuto;
|
|
3715
|
-
}
|
|
3716
|
-
return cardStyleWhenLocked;
|
|
3717
|
-
};
|
|
3718
|
-
return jsx(Card, {
|
|
3719
|
-
className: "sortable-item",
|
|
3720
|
-
"data-autosizing": autoSizing ? 'true' : 'false',
|
|
3721
|
-
"data-growing": growing ? 'true' : 'false',
|
|
3722
|
-
"data-testid": "resizable-panel",
|
|
3723
|
-
ref: containerRef,
|
|
3724
|
-
sx: Object.assign({
|
|
3725
|
-
height: '100%',
|
|
3726
|
-
position: 'relative'
|
|
3727
|
-
}, getActiveCardStyle()),
|
|
3728
|
-
children: jsxs(Box, {
|
|
3729
|
-
ref: contentRef,
|
|
3730
|
-
sx: {
|
|
3731
|
-
height: '100%',
|
|
3732
|
-
width: '100%'
|
|
3733
|
-
},
|
|
3734
|
-
children: [!isOpen && jsxs(Box, {
|
|
3735
|
-
"data-testid": "closed-panel-header",
|
|
3736
|
-
onClick: openPanel,
|
|
3737
|
-
sx: {
|
|
3738
|
-
display: 'flex',
|
|
3739
|
-
justifyContent: 'center',
|
|
3740
|
-
alignItems: 'center',
|
|
3741
|
-
writingMode: 'vertical-lr',
|
|
3742
|
-
transform: 'rotate(180deg)',
|
|
3743
|
-
paddingBottom: '10px',
|
|
3744
|
-
cursor: 'pointer'
|
|
3745
|
-
},
|
|
3746
|
-
children: [name, jsx(ArrowDropDownDown, {
|
|
3747
|
-
sx: {
|
|
3748
|
-
transform: 'rotate(90deg)'
|
|
3749
|
-
}
|
|
3750
|
-
}), jsx(Box, {
|
|
3751
|
-
onClick: function onClick(event) {
|
|
3752
|
-
return event.stopPropagation();
|
|
3753
|
-
},
|
|
3754
|
-
children: handleButtonComponent
|
|
3755
|
-
})]
|
|
3756
|
-
}), !!isOpen && jsx(Box, {
|
|
3757
|
-
"data-testid": "open-panel-header",
|
|
3758
|
-
sx: {
|
|
3759
|
-
display: 'flex',
|
|
3760
|
-
flexDirection: 'column',
|
|
3761
|
-
height: '100%'
|
|
3762
|
-
},
|
|
3763
|
-
children: jsxs(Stack, {
|
|
3764
|
-
sx: {
|
|
3765
|
-
height: '100%'
|
|
3766
|
-
},
|
|
3767
|
-
children: [jsxs(Box, {
|
|
3768
|
-
sx: {
|
|
3769
|
-
width: '100%',
|
|
3770
|
-
display: 'flex',
|
|
3771
|
-
justifyContent: 'space-between',
|
|
3772
|
-
flex: '0 0 auto'
|
|
3773
|
-
},
|
|
3774
|
-
children: [jsx(Box, {
|
|
3775
|
-
onClick: function onClick(event) {
|
|
3776
|
-
return event.stopPropagation();
|
|
3777
|
-
},
|
|
3778
|
-
sx: {
|
|
3779
|
-
paddingTop: '8px'
|
|
3780
|
-
},
|
|
3781
|
-
children: handleButtonComponent
|
|
3782
|
-
}), jsxs(Box, {
|
|
3783
|
-
onClick: closePanel,
|
|
3784
|
-
sx: {
|
|
3785
|
-
width: '100%',
|
|
3786
|
-
display: 'flex',
|
|
3787
|
-
alignItems: 'center',
|
|
3788
|
-
justifyContent: 'flex-end',
|
|
3789
|
-
paddingRight: '10px',
|
|
3790
|
-
overflow: 'hidden',
|
|
3791
|
-
marginTop: '4px',
|
|
3792
|
-
cursor: 'pointer'
|
|
3793
|
-
},
|
|
3794
|
-
children: [jsx(Box, {
|
|
3795
|
-
onClick: function onClick(event) {
|
|
3796
|
-
return event.stopPropagation();
|
|
3797
|
-
},
|
|
3798
|
-
children: !!headerAction && headerAction
|
|
3799
|
-
}), jsx(Box, {
|
|
3800
|
-
sx: {
|
|
3801
|
-
textOverflow: 'ellipsis',
|
|
3802
|
-
overflow: 'hidden',
|
|
3803
|
-
whiteSpace: 'nowrap',
|
|
3804
|
-
marginLeft: '16px',
|
|
3805
|
-
height: '100%',
|
|
3806
|
-
paddingTop: '3px'
|
|
3807
|
-
},
|
|
3808
|
-
children: name
|
|
3809
|
-
}), jsx(ArrowDropDownDown, {})]
|
|
3810
|
-
})]
|
|
3811
|
-
}), jsx(Box, {
|
|
3812
|
-
sx: {
|
|
3813
|
-
display: 'flex',
|
|
3814
|
-
justifyContent: 'center',
|
|
3815
|
-
alignItems: 'stretch',
|
|
3816
|
-
flex: 1,
|
|
3817
|
-
minHeight: 0,
|
|
3818
|
-
overflow: 'hidden'
|
|
3819
|
-
},
|
|
3820
|
-
children: children
|
|
3821
|
-
})]
|
|
3822
|
-
})
|
|
3823
|
-
}), jsx(Box, Object.assign({
|
|
3824
|
-
"data-testid": "resizable-panel-drag-handle"
|
|
3825
|
-
}, separatorProps, {
|
|
3826
|
-
sx: {
|
|
3827
|
-
height: '100%',
|
|
3828
|
-
position: 'absolute',
|
|
3829
|
-
right: 0,
|
|
3830
|
-
top: 0,
|
|
3831
|
-
width: '5px',
|
|
3832
|
-
cursor: 'col-resize'
|
|
3833
|
-
}
|
|
3834
|
-
}))]
|
|
3835
|
-
})
|
|
3836
|
-
});
|
|
3837
|
-
});
|
|
3838
|
-
ResizablePanel.displayName = 'ResizablePanel';
|
|
3839
|
-
|
|
3840
3495
|
var SoundingsPanelConnect = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
3841
3496
|
var panelId = _ref.panelId,
|
|
3842
3497
|
viewId = _ref.viewId,
|
|
@@ -3849,7 +3504,8 @@ var SoundingsPanelConnect = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3849
3504
|
handleButtonComponent = _ref.handleButtonComponent,
|
|
3850
3505
|
onOpenChange = _ref.onOpenChange,
|
|
3851
3506
|
onResizeStart = _ref.onResizeStart,
|
|
3852
|
-
onResizeEnd = _ref.onResizeEnd
|
|
3507
|
+
onResizeEnd = _ref.onResizeEnd,
|
|
3508
|
+
direction = _ref.direction;
|
|
3853
3509
|
if (!panelId || !viewId) {
|
|
3854
3510
|
throw new Error('SoundingsPanelConnect requires both `panelId` and `viewId` props. ' + 'Use it inside a SortablePanels that has `viewId` set, or pass both directly.');
|
|
3855
3511
|
}
|
|
@@ -3880,6 +3536,7 @@ var SoundingsPanelConnect = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3880
3536
|
}, [dispatch, viewId, panelId]);
|
|
3881
3537
|
return jsx(ResizablePanel, {
|
|
3882
3538
|
customWidth: customWidth,
|
|
3539
|
+
direction: direction,
|
|
3883
3540
|
handleButtonComponent: handleButtonComponent,
|
|
3884
3541
|
headerAction: headerAction,
|
|
3885
3542
|
isDisplayed: isDisplayed,
|
|
@@ -4171,125 +3828,6 @@ var HodographCollection = function HodographCollection(_ref) {
|
|
|
4171
3828
|
});
|
|
4172
3829
|
};
|
|
4173
3830
|
|
|
4174
|
-
var ResizablePanelStandalone = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
4175
|
-
var name = _ref.name,
|
|
4176
|
-
children = _ref.children,
|
|
4177
|
-
headerAction = _ref.headerAction,
|
|
4178
|
-
isDisplayed = _ref.isDisplayed,
|
|
4179
|
-
maxWidth = _ref.maxWidth,
|
|
4180
|
-
minWidth = _ref.minWidth,
|
|
4181
|
-
handleButtonComponent = _ref.handleButtonComponent,
|
|
4182
|
-
onOpenChange = _ref.onOpenChange,
|
|
4183
|
-
onResizeStart = _ref.onResizeStart,
|
|
4184
|
-
onResizeEnd = _ref.onResizeEnd;
|
|
4185
|
-
var _React$useState = React.useState(true),
|
|
4186
|
-
isOpen = _React$useState[0],
|
|
4187
|
-
setIsOpen = _React$useState[1];
|
|
4188
|
-
var _React$useState2 = React.useState(undefined),
|
|
4189
|
-
customWidth = _React$useState2[0],
|
|
4190
|
-
setCustomWidth = _React$useState2[1];
|
|
4191
|
-
var handleSetIsOpen = React.useCallback(function (open) {
|
|
4192
|
-
setIsOpen(open);
|
|
4193
|
-
onOpenChange == null || onOpenChange(open);
|
|
4194
|
-
}, [onOpenChange]);
|
|
4195
|
-
return jsx(ResizablePanel, {
|
|
4196
|
-
customWidth: customWidth,
|
|
4197
|
-
handleButtonComponent: handleButtonComponent,
|
|
4198
|
-
headerAction: headerAction,
|
|
4199
|
-
isDisplayed: isDisplayed,
|
|
4200
|
-
isOpen: isOpen,
|
|
4201
|
-
maxWidth: maxWidth,
|
|
4202
|
-
minWidth: minWidth,
|
|
4203
|
-
name: name,
|
|
4204
|
-
onResizeEnd: onResizeEnd,
|
|
4205
|
-
onResizeStart: onResizeStart,
|
|
4206
|
-
onSetCustomWidth: setCustomWidth,
|
|
4207
|
-
onSetIsOpen: handleSetIsOpen,
|
|
4208
|
-
ref: ref,
|
|
4209
|
-
children: children
|
|
4210
|
-
});
|
|
4211
|
-
});
|
|
4212
|
-
ResizablePanelStandalone.displayName = 'ResizablePanelStandalone';
|
|
4213
|
-
|
|
4214
|
-
var SortablePanels = function SortablePanels(_ref) {
|
|
4215
|
-
var panels = _ref.panels,
|
|
4216
|
-
onOrderChange = _ref.onOrderChange,
|
|
4217
|
-
_ref$panelComponent = _ref.panelComponent,
|
|
4218
|
-
PanelComponent = _ref$panelComponent === void 0 ? ResizablePanelStandalone : _ref$panelComponent,
|
|
4219
|
-
viewId = _ref.viewId;
|
|
4220
|
-
return jsx(Box, {
|
|
4221
|
-
sx: {
|
|
4222
|
-
display: 'flex',
|
|
4223
|
-
flexDirection: 'row',
|
|
4224
|
-
width: '100%',
|
|
4225
|
-
height: '100%',
|
|
4226
|
-
padding: 1
|
|
4227
|
-
},
|
|
4228
|
-
children: jsx(ReactSortable, {
|
|
4229
|
-
animation: 200,
|
|
4230
|
-
direction: "horizontal",
|
|
4231
|
-
draggable: ".sortable-item",
|
|
4232
|
-
handle: ".drag-handle",
|
|
4233
|
-
list: panels.map(function (_ref2) {
|
|
4234
|
-
var id = _ref2.id,
|
|
4235
|
-
name = _ref2.name,
|
|
4236
|
-
isDisplayed = _ref2.isDisplayed;
|
|
4237
|
-
return {
|
|
4238
|
-
id: id,
|
|
4239
|
-
name: name,
|
|
4240
|
-
isDisplayed: isDisplayed
|
|
4241
|
-
};
|
|
4242
|
-
}),
|
|
4243
|
-
setList: function setList(list) {
|
|
4244
|
-
return onOrderChange(list.map(function (_ref3) {
|
|
4245
|
-
var id = _ref3.id,
|
|
4246
|
-
name = _ref3.name,
|
|
4247
|
-
isDisplayed = _ref3.isDisplayed;
|
|
4248
|
-
return {
|
|
4249
|
-
id: id,
|
|
4250
|
-
name: name,
|
|
4251
|
-
isDisplayed: isDisplayed
|
|
4252
|
-
};
|
|
4253
|
-
}));
|
|
4254
|
-
},
|
|
4255
|
-
style: {
|
|
4256
|
-
display: 'flex',
|
|
4257
|
-
gap: 4,
|
|
4258
|
-
width: '100%'
|
|
4259
|
-
},
|
|
4260
|
-
tag: "div",
|
|
4261
|
-
children: panels.map(function (panel) {
|
|
4262
|
-
return jsx(PanelComponent, {
|
|
4263
|
-
handleButtonComponent: jsx(IconButton, {
|
|
4264
|
-
"aria-label": "drag-handle",
|
|
4265
|
-
className: "drag-handle",
|
|
4266
|
-
size: "small",
|
|
4267
|
-
sx: {
|
|
4268
|
-
width: '24px',
|
|
4269
|
-
height: '24px'
|
|
4270
|
-
},
|
|
4271
|
-
children: jsx(DragHandle, {
|
|
4272
|
-
fontSize: "small"
|
|
4273
|
-
})
|
|
4274
|
-
}),
|
|
4275
|
-
headerAction: panel.headerAction,
|
|
4276
|
-
isDisplayed: panel.isDisplayed,
|
|
4277
|
-
maxWidth: panel.maxWidth,
|
|
4278
|
-
minWidth: panel.minWidth,
|
|
4279
|
-
name: panel.name,
|
|
4280
|
-
onOpenChange: panel.onOpenChange,
|
|
4281
|
-
onResizeEnd: panel.onResizeEnd,
|
|
4282
|
-
onResizeStart: panel.onResizeStart,
|
|
4283
|
-
panelId: panel.id,
|
|
4284
|
-
ref: panel.panelRef,
|
|
4285
|
-
viewId: viewId,
|
|
4286
|
-
children: panel.render()
|
|
4287
|
-
}, panel.id);
|
|
4288
|
-
})
|
|
4289
|
-
})
|
|
4290
|
-
});
|
|
4291
|
-
};
|
|
4292
|
-
|
|
4293
3831
|
var soundingDiagrams = ['SKEWT', 'BIJVOET', 'EMAGRAM'];
|
|
4294
3832
|
|
|
4295
3833
|
var DiagramTypeButton = function DiagramTypeButton(_ref) {
|
|
@@ -8400,4 +7938,4 @@ var createMockStore = function createMockStore(mockState) {
|
|
|
8400
7938
|
});
|
|
8401
7939
|
};
|
|
8402
7940
|
|
|
8403
|
-
export { DiagramTypeButton, HodographCollection, LocationsMenuConnect,
|
|
7941
|
+
export { DiagramTypeButton, HodographCollection, LocationsMenuConnect, SOUNDINGS_NAMESPACE, SharedMouseYProvider, Soundings, SoundingsActionOrigin, SoundingsConnect, SoundingsManagerConnect, SoundingsPanelConnect, SoundingsPanels, SoundingsProfileDataDialogConnect, SoundingsProfileDataTable, SoundingsSourceDialogConnect, types as SoundingsTypes, WindBarbs, createMockStore, initSoundingsI18n, initialSoundingsViewState, soundingDiagrams, soundingsActions, soundingsLookUp, soundingsReducer, soundingsReducersMap, selectors as soundingsSelectors, soundingsTranslations, translateInTestsAndStories, useSoundingsTranslation };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type { ResizablePanelWrapperProps } from '
|
|
2
|
+
import type { ResizablePanelWrapperProps } from '@opengeoweb/shared';
|
|
3
3
|
export declare const SoundingsPanelConnect: React.ForwardRefExoticComponent<ResizablePanelWrapperProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import type { ResizablePanelComponent } from '@opengeoweb/shared';
|
|
2
3
|
import type { SoundingFeature } from '../../api/edr-api/types';
|
|
3
4
|
import type { SoundingPanel } from '../../store/types';
|
|
4
5
|
import type { SoundingsProfileDataPreferences } from '../../utils/profileDataPreferences';
|
|
5
|
-
import type { ResizablePanelComponent } from '../ResizablePanel/ResizablePanelStandalone';
|
|
6
6
|
export interface SoundingsPanelsProps {
|
|
7
7
|
viewId: string;
|
|
8
8
|
soundingPanelsInOrder: SoundingPanel[];
|
|
@@ -4,12 +4,6 @@ export * from './MenuBar/SoundingsSourceDialogConnect';
|
|
|
4
4
|
export * from './MenuBar/LocationsMenuConnect';
|
|
5
5
|
export * from './MenuBar/SoundingsProfileDataDialogConnect';
|
|
6
6
|
export * from './SoundingsManager/SoundingsManagerConnect';
|
|
7
|
-
export { ResizablePanel } from './ResizablePanel/ResizablePanel';
|
|
8
|
-
export type { ResizablePanelProps } from './ResizablePanel/ResizablePanel';
|
|
9
|
-
export { ResizablePanelStandalone } from './ResizablePanel/ResizablePanelStandalone';
|
|
10
|
-
export type { ResizablePanelWrapperProps, ResizablePanelComponent, } from './ResizablePanel/ResizablePanelStandalone';
|
|
11
|
-
export { SortablePanels } from './SortablePanels/SortablePanels';
|
|
12
|
-
export type { SortablePanelsProps, SortablePanelItem, } from './SortablePanels/SortablePanels';
|
|
13
7
|
export { SoundingsPanels } from './SoundingsPanels/SoundingsPanels';
|
|
14
8
|
export type { SoundingsPanelsProps } from './SoundingsPanels/SoundingsPanels';
|
|
15
9
|
export { SoundingsPanelConnect } from './SoundingsPanels/SoundingsPanelConnect';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@opengeoweb/soundings",
|
|
3
|
-
"version": "20.
|
|
3
|
+
"version": "20.2.0",
|
|
4
4
|
"description": "GeoWeb soundings library for the opengeoweb project",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -20,25 +20,24 @@
|
|
|
20
20
|
}
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@opengeoweb/api": "20.
|
|
24
|
-
"@opengeoweb/authentication": "20.
|
|
23
|
+
"@opengeoweb/api": "20.2.0",
|
|
24
|
+
"@opengeoweb/authentication": "20.2.0",
|
|
25
25
|
"@tanstack/react-query": "^5.85.5",
|
|
26
26
|
"d3": "^7.9.0",
|
|
27
27
|
"react-i18next": "^15.1.1",
|
|
28
28
|
"i18next": "^25.0.1",
|
|
29
|
-
"@opengeoweb/shared": "20.
|
|
29
|
+
"@opengeoweb/shared": "20.2.0",
|
|
30
30
|
"@mui/material": "^9.0.1",
|
|
31
|
-
"@opengeoweb/store": "20.
|
|
31
|
+
"@opengeoweb/store": "20.2.0",
|
|
32
32
|
"react-redux": "^9.2.0",
|
|
33
|
-
"@opengeoweb/theme": "20.
|
|
33
|
+
"@opengeoweb/theme": "20.2.0",
|
|
34
34
|
"@reduxjs/toolkit": "^2.6.1",
|
|
35
|
-
"@opengeoweb/time-slider": "20.
|
|
35
|
+
"@opengeoweb/time-slider": "20.2.0",
|
|
36
36
|
"react-window": "^2.2.6",
|
|
37
|
-
"@opengeoweb/webmap": "20.
|
|
37
|
+
"@opengeoweb/webmap": "20.2.0",
|
|
38
38
|
"lodash": "^4.18.1",
|
|
39
39
|
"@types/geojson": "^7946.0.14",
|
|
40
|
-
"@opengeoweb/webmap-react": "20.
|
|
41
|
-
"react-resizable-layout": "^0.7.3",
|
|
40
|
+
"@opengeoweb/webmap-react": "20.2.0",
|
|
42
41
|
"react-sortablejs": "^6.1.4"
|
|
43
42
|
},
|
|
44
43
|
"devDependencies": {
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export interface ResizablePanelProps {
|
|
3
|
-
name: string;
|
|
4
|
-
minWidth?: number;
|
|
5
|
-
maxWidth?: number;
|
|
6
|
-
isOpen?: boolean;
|
|
7
|
-
headerAction?: React.ReactElement;
|
|
8
|
-
handleButtonComponent?: React.ReactElement;
|
|
9
|
-
children?: React.ReactNode;
|
|
10
|
-
onSetIsOpen?: (isOpen: boolean) => void;
|
|
11
|
-
onSetCustomWidth?: (width: number) => void;
|
|
12
|
-
onResizeStart?: () => void;
|
|
13
|
-
onResizeEnd?: () => void;
|
|
14
|
-
customWidth?: number;
|
|
15
|
-
isDisplayed?: boolean;
|
|
16
|
-
resizeOnViewCloseSignal?: number;
|
|
17
|
-
}
|
|
18
|
-
export declare const ResizablePanel: React.ForwardRefExoticComponent<ResizablePanelProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export interface ResizablePanelWrapperProps {
|
|
3
|
-
name: string;
|
|
4
|
-
children: React.ReactNode;
|
|
5
|
-
isDisplayed: boolean;
|
|
6
|
-
/**
|
|
7
|
-
* Optional. Only used by redux-aware panel components (e.g.
|
|
8
|
-
* SoundingsPanelConnect) to key external state. Standalone usage ignores it.
|
|
9
|
-
*/
|
|
10
|
-
panelId?: string;
|
|
11
|
-
/**
|
|
12
|
-
* Optional. Only used by redux-aware panel components to key external state
|
|
13
|
-
* by parent view. Standalone usage ignores it.
|
|
14
|
-
*/
|
|
15
|
-
viewId?: string;
|
|
16
|
-
headerAction?: React.ReactElement;
|
|
17
|
-
handleButtonComponent?: React.ReactElement;
|
|
18
|
-
maxWidth?: number;
|
|
19
|
-
minWidth?: number;
|
|
20
|
-
onOpenChange?: (isOpen: boolean) => void;
|
|
21
|
-
onResizeStart?: () => void;
|
|
22
|
-
onResizeEnd?: () => void;
|
|
23
|
-
}
|
|
24
|
-
export type ResizablePanelComponent = React.ForwardRefExoticComponent<ResizablePanelWrapperProps & React.RefAttributes<HTMLDivElement>>;
|
|
25
|
-
export declare const ResizablePanelStandalone: React.ForwardRefExoticComponent<ResizablePanelWrapperProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { ResizablePanelComponent } from '../ResizablePanel/ResizablePanelStandalone';
|
|
3
|
-
export interface SortablePanelItem {
|
|
4
|
-
id: string;
|
|
5
|
-
name: string;
|
|
6
|
-
isDisplayed: boolean;
|
|
7
|
-
minWidth?: number;
|
|
8
|
-
maxWidth?: number;
|
|
9
|
-
headerAction?: React.ReactElement;
|
|
10
|
-
render: () => React.ReactNode;
|
|
11
|
-
panelRef?: React.Ref<HTMLDivElement>;
|
|
12
|
-
onOpenChange?: (isOpen: boolean) => void;
|
|
13
|
-
onResizeStart?: () => void;
|
|
14
|
-
onResizeEnd?: () => void;
|
|
15
|
-
}
|
|
16
|
-
export interface SortablePanelsProps {
|
|
17
|
-
panels: SortablePanelItem[];
|
|
18
|
-
onOrderChange: (newOrder: {
|
|
19
|
-
id: string;
|
|
20
|
-
name: string;
|
|
21
|
-
isDisplayed: boolean;
|
|
22
|
-
}[]) => void;
|
|
23
|
-
panelComponent?: ResizablePanelComponent;
|
|
24
|
-
/**
|
|
25
|
-
* Optional. Forwarded to each rendered panel component. Redux-aware panel
|
|
26
|
-
* components use it to scope their external state by parent view.
|
|
27
|
-
*/
|
|
28
|
-
viewId?: string;
|
|
29
|
-
}
|
|
30
|
-
export declare const SortablePanels: ({ panels, onOrderChange, panelComponent: PanelComponent, viewId, }: SortablePanelsProps) => React.ReactElement;
|