react-spatial 1.2.2 → 1.2.3-beta.3
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/LayerService.js +128 -184
- package/LayerService.js.map +7 -1
- package/components/BaseLayerSwitcher/BaseLayerSwitcher.js +163 -221
- package/components/BaseLayerSwitcher/BaseLayerSwitcher.js.map +7 -1
- package/components/BaseLayerSwitcher/index.js +1 -3
- package/components/BaseLayerSwitcher/index.js.map +7 -1
- package/components/BasicMap/BasicMap.js +147 -285
- package/components/BasicMap/BasicMap.js.map +7 -1
- package/components/BasicMap/index.js +1 -3
- package/components/BasicMap/index.js.map +7 -1
- package/components/CanvasSaveButton/CanvasSaveButton.js +165 -419
- package/components/CanvasSaveButton/CanvasSaveButton.js.map +7 -1
- package/components/CanvasSaveButton/index.js +1 -3
- package/components/CanvasSaveButton/index.js.map +7 -1
- package/components/Copyright/Copyright.js +29 -70
- package/components/Copyright/Copyright.js.map +7 -1
- package/components/Copyright/index.js +1 -3
- package/components/Copyright/index.js.map +7 -1
- package/components/FeatureExportButton/FeatureExportButton.js +40 -106
- package/components/FeatureExportButton/FeatureExportButton.js.map +7 -1
- package/components/FeatureExportButton/index.js +1 -3
- package/components/FeatureExportButton/index.js.map +7 -1
- package/components/FilterButton/FilterButton.js +41 -106
- package/components/FilterButton/FilterButton.js.map +7 -1
- package/components/FilterButton/index.js +1 -3
- package/components/FilterButton/index.js.map +7 -1
- package/components/FitExtent/FitExtent.js +17 -50
- package/components/FitExtent/FitExtent.js.map +7 -1
- package/components/FitExtent/index.js +1 -3
- package/components/FitExtent/index.js.map +7 -1
- package/components/FollowButton/FollowButton.js +41 -111
- package/components/FollowButton/FollowButton.js.map +7 -1
- package/components/FollowButton/index.js +1 -3
- package/components/FollowButton/index.js.map +7 -1
- package/components/Geolocation/Geolocation.js +104 -213
- package/components/Geolocation/Geolocation.js.map +7 -1
- package/components/Geolocation/index.js +1 -3
- package/components/Geolocation/index.js.map +7 -1
- package/components/LayerTree/LayerTree.js +204 -410
- package/components/LayerTree/LayerTree.js.map +7 -1
- package/components/LayerTree/index.js +1 -3
- package/components/LayerTree/index.js.map +7 -1
- package/components/MousePosition/MousePosition.js +61 -130
- package/components/MousePosition/MousePosition.js.map +7 -1
- package/components/MousePosition/index.js +1 -3
- package/components/MousePosition/index.js.map +7 -1
- package/components/NorthArrow/NorthArrow.js +22 -62
- package/components/NorthArrow/NorthArrow.js.map +7 -1
- package/components/NorthArrow/index.js +1 -3
- package/components/NorthArrow/index.js.map +7 -1
- package/components/Overlay/Overlay.js +83 -130
- package/components/Overlay/Overlay.js.map +7 -1
- package/components/Overlay/index.js +1 -3
- package/components/Overlay/index.js.map +7 -1
- package/components/Permalink/Permalink.js +150 -244
- package/components/Permalink/Permalink.js.map +7 -1
- package/components/Permalink/index.js +1 -3
- package/components/Permalink/index.js.map +7 -1
- package/components/Popup/Popup.js +106 -233
- package/components/Popup/Popup.js.map +7 -1
- package/components/Popup/index.js +1 -3
- package/components/Popup/index.js.map +7 -1
- package/components/ResizeHandler/ResizeHandler.js +58 -113
- package/components/ResizeHandler/ResizeHandler.js.map +7 -1
- package/components/ResizeHandler/index.js +1 -3
- package/components/ResizeHandler/index.js.map +7 -1
- package/components/RouteSchedule/RouteSchedule.js +150 -283
- package/components/RouteSchedule/RouteSchedule.js.map +7 -1
- package/components/RouteSchedule/index.js +1 -3
- package/components/RouteSchedule/index.js.map +7 -1
- package/components/ScaleLine/ScaleLine.js +21 -45
- package/components/ScaleLine/ScaleLine.js.map +7 -1
- package/components/ScaleLine/index.js +1 -3
- package/components/ScaleLine/index.js.map +7 -1
- package/components/Search/Search.js +122 -186
- package/components/Search/Search.js.map +7 -1
- package/components/Search/SearchService.js +45 -69
- package/components/Search/SearchService.js.map +7 -1
- package/components/Search/engines/Engine.js +18 -25
- package/components/Search/engines/Engine.js.map +7 -1
- package/components/Search/engines/StopFinder.js +21 -38
- package/components/Search/engines/StopFinder.js.map +7 -1
- package/components/Search/index.js +3 -6
- package/components/Search/index.js.map +7 -1
- package/components/StopsFinder/StopsFinder.js +123 -174
- package/components/StopsFinder/StopsFinder.js.map +7 -1
- package/components/StopsFinder/StopsFinderOption.js +37 -54
- package/components/StopsFinder/StopsFinderOption.js.map +7 -1
- package/components/StopsFinder/index.js +1 -3
- package/components/StopsFinder/index.js.map +7 -1
- package/components/TrackerControl/TrackerControl.js +73 -128
- package/components/TrackerControl/TrackerControl.js.map +7 -1
- package/components/TrackerControl/index.js +1 -3
- package/components/TrackerControl/index.js.map +7 -1
- package/components/Zoom/Zoom.js +69 -112
- package/components/Zoom/Zoom.js.map +7 -1
- package/components/Zoom/index.js +1 -3
- package/components/Zoom/index.js.map +7 -1
- package/package.json +10 -5
- package/propTypes.js +17 -23
- package/propTypes.js.map +7 -1
- package/setupTests.js +2 -4
- package/setupTests.js.map +7 -1
- package/themes/README.md +26 -0
- package/themes/default/components.scss +0 -1
- package/themes/default/examples.scss +0 -1
- package/utils/GlobalsForOle.js +63 -64
- package/utils/GlobalsForOle.js.map +7 -1
- package/utils/KML.js +178 -364
- package/utils/KML.js.map +7 -1
- package/utils/KMLFormat.js +37 -73
- package/utils/KMLFormat.js.map +7 -1
- package/utils/Styles.js +24 -32
- package/utils/Styles.js.map +7 -1
- package/utils/getPolygonPattern.js +11 -44
- package/utils/getPolygonPattern.js.map +7 -1
- package/utils/timeUtils.js +16 -35
- package/utils/timeUtils.js.map +7 -1
- package/LayerService.test.js +0 -160
- package/LayerService.test.js.map +0 -1
- package/Projections.js +0 -16
- package/Projections.js.map +0 -1
- package/components/BaseLayerSwitcher/BaseLayerSwitcher.test.js +0 -88
- package/components/BaseLayerSwitcher/BaseLayerSwitcher.test.js.map +0 -1
- package/components/BaseLayerToggler/BaseLayerToggler.js +0 -490
- package/components/BaseLayerToggler/BaseLayerToggler.js.map +0 -1
- package/components/BaseLayerToggler/BaseLayerToggler.md.scss +0 -9
- package/components/BaseLayerToggler/BaseLayerToggler.scss +0 -49
- package/components/BaseLayerToggler/BaseLayerToggler.test.js +0 -127
- package/components/BaseLayerToggler/BaseLayerToggler.test.js.map +0 -1
- package/components/BaseLayerToggler/index.js +0 -3
- package/components/BaseLayerToggler/index.js.map +0 -1
- package/components/BasicMap/BasicMap.test.js +0 -288
- package/components/BasicMap/BasicMap.test.js.map +0 -1
- package/components/CanvasSaveButton/CanvasSaveButton.test.js +0 -173
- package/components/CanvasSaveButton/CanvasSaveButton.test.js.map +0 -1
- package/components/Copyright/Copyright.test.js +0 -133
- package/components/Copyright/Copyright.test.js.map +0 -1
- package/components/FeatureExportButton/FeatureExportButton.test.js +0 -407
- package/components/FeatureExportButton/FeatureExportButton.test.js.map +0 -1
- package/components/FilterButton/FilterButton.test.js +0 -48
- package/components/FilterButton/FilterButton.test.js.map +0 -1
- package/components/FitExtent/FitExtent.test.js +0 -44
- package/components/FitExtent/FitExtent.test.js.map +0 -1
- package/components/FollowButton/FollowButton.test.js +0 -57
- package/components/FollowButton/FollowButton.test.js.map +0 -1
- package/components/Geolocation/Geolocation.test.js +0 -263
- package/components/Geolocation/Geolocation.test.js.map +0 -1
- package/components/LayerTree/LayerTree.test.js +0 -323
- package/components/LayerTree/LayerTree.test.js.map +0 -1
- package/components/MousePosition/MousePosition.test.js +0 -125
- package/components/MousePosition/MousePosition.test.js.map +0 -1
- package/components/NorthArrow/NorthArrow.test.js +0 -106
- package/components/NorthArrow/NorthArrow.test.js.map +0 -1
- package/components/Overlay/Overlay.test.js +0 -145
- package/components/Overlay/Overlay.test.js.map +0 -1
- package/components/Permalink/Permalink.test.js +0 -267
- package/components/Permalink/Permalink.test.js.map +0 -1
- package/components/Popup/Popup.test.js +0 -291
- package/components/Popup/Popup.test.js.map +0 -1
- package/components/ResizeHandler/ResizeHandler.test.js +0 -410
- package/components/ResizeHandler/ResizeHandler.test.js.map +0 -1
- package/components/RouteSchedule/RouteSchedule.test.js +0 -102
- package/components/RouteSchedule/RouteSchedule.test.js.map +0 -1
- package/components/ScaleLine/ScaleLine.test.js +0 -32
- package/components/ScaleLine/ScaleLine.test.js.map +0 -1
- package/components/Search/Search.test.js +0 -15
- package/components/Search/Search.test.js.map +0 -1
- package/components/StopsFinder/StopsFinder.test.js +0 -19
- package/components/StopsFinder/StopsFinder.test.js.map +0 -1
- package/components/TrackerControl/TrackerControl.test.js +0 -17
- package/components/TrackerControl/TrackerControl.test.js.map +0 -1
- package/components/Zoom/Zoom.test.js +0 -150
- package/components/Zoom/Zoom.test.js.map +0 -1
- package/styleguidist/ComponentsList.js +0 -52
- package/styleguidist/ComponentsList.js.map +0 -1
- package/styleguidist/StyleGuide.js +0 -253
- package/styleguidist/StyleGuide.js.map +0 -1
- package/utils/KML.test.js +0 -163
- package/utils/KML.test.js.map +0 -1
- package/utils/KMLFormat.test.js +0 -22
- package/utils/KMLFormat.test.js.map +0 -1
- package/utils/getPolygonPattern.test.js +0 -66
- package/utils/getPolygonPattern.test.js.map +0 -1
- package/utils/timeUtils.test.js +0 -32
- package/utils/timeUtils.test.js.map +0 -1
|
@@ -1,137 +1,101 @@
|
|
|
1
|
-
import ReactDOM from
|
|
2
|
-
import { PureComponent, Component } from
|
|
3
|
-
import PropTypes from
|
|
4
|
-
import ResizeObserver from
|
|
5
|
-
|
|
6
|
-
var propTypes = {
|
|
1
|
+
import ReactDOM from "react-dom";
|
|
2
|
+
import { PureComponent, Component } from "react";
|
|
3
|
+
import PropTypes from "prop-types";
|
|
4
|
+
import ResizeObserver from "resize-observer-polyfill";
|
|
5
|
+
const propTypes = {
|
|
7
6
|
observe: PropTypes.oneOfType([
|
|
8
7
|
PropTypes.string,
|
|
9
8
|
PropTypes.node,
|
|
10
9
|
PropTypes.instanceOf(Component),
|
|
11
10
|
PropTypes.shape({ current: PropTypes.node }),
|
|
12
|
-
PropTypes.shape({ current: PropTypes.instanceOf(Component) })
|
|
11
|
+
PropTypes.shape({ current: PropTypes.instanceOf(Component) })
|
|
12
|
+
]),
|
|
13
13
|
maxHeightBrkpts: PropTypes.objectOf(PropTypes.number),
|
|
14
14
|
maxWidthBrkpts: PropTypes.objectOf(PropTypes.number),
|
|
15
15
|
stylePropHeight: PropTypes.string,
|
|
16
16
|
onResize: PropTypes.func,
|
|
17
|
-
|
|
18
|
-
// This property is used to re-apply the classes, for example when the className of the observed node changes.
|
|
19
17
|
forceUpdate: PropTypes.oneOfType([
|
|
20
18
|
PropTypes.string,
|
|
21
19
|
PropTypes.number,
|
|
22
|
-
PropTypes.bool
|
|
20
|
+
PropTypes.bool
|
|
21
|
+
])
|
|
23
22
|
};
|
|
24
|
-
|
|
25
|
-
// Same as bootstrap
|
|
26
|
-
var defaultProps = {
|
|
23
|
+
const defaultProps = {
|
|
27
24
|
observe: null,
|
|
28
25
|
maxHeightBrkpts: {
|
|
29
26
|
xs: 576,
|
|
30
27
|
s: 768,
|
|
31
28
|
m: 992,
|
|
32
29
|
l: 1200,
|
|
33
|
-
xl: Infinity
|
|
30
|
+
xl: Infinity
|
|
34
31
|
},
|
|
35
32
|
maxWidthBrkpts: {
|
|
36
33
|
xs: 576,
|
|
37
34
|
s: 768,
|
|
38
35
|
m: 992,
|
|
39
36
|
l: 1200,
|
|
40
|
-
xl: Infinity
|
|
37
|
+
xl: Infinity
|
|
41
38
|
},
|
|
42
39
|
stylePropHeight: null,
|
|
43
40
|
onResize: null,
|
|
44
|
-
forceUpdate: null
|
|
41
|
+
forceUpdate: null
|
|
45
42
|
};
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
PureComponent.call(this, props);
|
|
54
|
-
this.observer = new ResizeObserver(function (entries) {
|
|
55
|
-
return this$1.onResize(entries);
|
|
56
|
-
});
|
|
57
|
-
this.nodes = [];
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
if ( PureComponent ) ResizeHandler.__proto__ = PureComponent;
|
|
61
|
-
ResizeHandler.prototype = Object.create( PureComponent && PureComponent.prototype );
|
|
62
|
-
ResizeHandler.prototype.constructor = ResizeHandler;
|
|
63
|
-
|
|
64
|
-
ResizeHandler.applyBreakpoints = function applyBreakpoints (entry, breakpoints, size, direction) {
|
|
65
|
-
var found = false;
|
|
66
|
-
var screenSize;
|
|
67
|
-
Object.entries(breakpoints).forEach(function (brkpt) {
|
|
68
|
-
var assign;
|
|
69
|
-
|
|
70
|
-
var cssClass = "rs-" + direction + "-" + (brkpt[0]);
|
|
43
|
+
class ResizeHandler extends PureComponent {
|
|
44
|
+
static applyBreakpoints(entry, breakpoints, size, direction) {
|
|
45
|
+
let found = false;
|
|
46
|
+
let screenSize;
|
|
47
|
+
Object.entries(breakpoints).forEach((brkpt) => {
|
|
48
|
+
const cssClass = `rs-${direction}-${brkpt[0]}`;
|
|
71
49
|
entry.target.classList.remove(cssClass);
|
|
72
50
|
if (!found && size <= brkpt[1]) {
|
|
73
51
|
found = true;
|
|
74
|
-
|
|
52
|
+
[screenSize] = brkpt;
|
|
75
53
|
entry.target.classList.add(cssClass);
|
|
76
54
|
}
|
|
77
55
|
});
|
|
78
56
|
return screenSize;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
|
|
57
|
+
}
|
|
58
|
+
constructor(props) {
|
|
59
|
+
super(props);
|
|
60
|
+
this.observer = new ResizeObserver((entries) => {
|
|
61
|
+
return this.onResize(entries);
|
|
62
|
+
});
|
|
63
|
+
this.nodes = [];
|
|
64
|
+
}
|
|
65
|
+
componentDidMount() {
|
|
82
66
|
this.observe();
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
var observe = ref.observe;
|
|
88
|
-
var forceUpdate = ref.forceUpdate;
|
|
89
|
-
|
|
90
|
-
if (
|
|
91
|
-
observe !== prevProps.observe ||
|
|
92
|
-
forceUpdate !== prevProps.forceUpdate
|
|
93
|
-
) {
|
|
67
|
+
}
|
|
68
|
+
componentDidUpdate(prevProps) {
|
|
69
|
+
const { observe, forceUpdate } = this.props;
|
|
70
|
+
if (observe !== prevProps.observe || forceUpdate !== prevProps.forceUpdate) {
|
|
94
71
|
this.observe();
|
|
95
72
|
}
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
ResizeHandler.prototype.componentWillUnmount = function componentWillUnmount () {
|
|
73
|
+
}
|
|
74
|
+
componentWillUnmount() {
|
|
99
75
|
this.observer.disconnect();
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
var ref =
|
|
104
|
-
this.props;
|
|
105
|
-
var maxHeightBrkpts = ref.maxHeightBrkpts;
|
|
106
|
-
var maxWidthBrkpts = ref.maxWidthBrkpts;
|
|
107
|
-
var stylePropHeight = ref.stylePropHeight;
|
|
108
|
-
var onResize = ref.onResize;
|
|
109
|
-
|
|
76
|
+
}
|
|
77
|
+
onResize(entries) {
|
|
78
|
+
const { maxHeightBrkpts, maxWidthBrkpts, stylePropHeight, onResize } = this.props;
|
|
110
79
|
if (stylePropHeight) {
|
|
111
|
-
|
|
112
|
-
document.documentElement.style.setProperty(stylePropHeight,
|
|
80
|
+
const vh = window.innerHeight * 0.01;
|
|
81
|
+
document.documentElement.style.setProperty(stylePropHeight, `${vh}px`);
|
|
113
82
|
}
|
|
114
|
-
|
|
115
83
|
if (!maxWidthBrkpts && !maxHeightBrkpts) {
|
|
116
84
|
onResize(entries);
|
|
117
85
|
return;
|
|
118
86
|
}
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
var rect = entry.contentRect;
|
|
126
|
-
var height = rect.height;
|
|
127
|
-
var width = rect.width;
|
|
128
|
-
|
|
87
|
+
let newScreenWidth;
|
|
88
|
+
let newScreenHeight;
|
|
89
|
+
for (let i = 0; i < entries.length; i += 1) {
|
|
90
|
+
const entry = entries[i];
|
|
91
|
+
const rect = entry.contentRect;
|
|
92
|
+
const { height, width } = rect;
|
|
129
93
|
if (maxWidthBrkpts) {
|
|
130
94
|
newScreenWidth = ResizeHandler.applyBreakpoints(
|
|
131
95
|
entry,
|
|
132
96
|
maxWidthBrkpts,
|
|
133
97
|
width,
|
|
134
|
-
|
|
98
|
+
"w"
|
|
135
99
|
);
|
|
136
100
|
}
|
|
137
101
|
if (maxHeightBrkpts) {
|
|
@@ -139,60 +103,41 @@ var ResizeHandler = /*@__PURE__*/(function (PureComponent) {
|
|
|
139
103
|
entry,
|
|
140
104
|
maxHeightBrkpts,
|
|
141
105
|
height,
|
|
142
|
-
|
|
106
|
+
"h"
|
|
143
107
|
);
|
|
144
108
|
}
|
|
145
109
|
}
|
|
146
|
-
|
|
147
110
|
if (onResize) {
|
|
148
111
|
onResize(entries, newScreenWidth, newScreenHeight);
|
|
149
112
|
}
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
ResizeHandler.prototype.observe = function observe () {
|
|
153
|
-
var this$1 = this;
|
|
154
|
-
|
|
113
|
+
}
|
|
114
|
+
observe() {
|
|
155
115
|
this.observer.disconnect();
|
|
156
|
-
|
|
157
|
-
var observe = ref.observe;
|
|
158
|
-
|
|
116
|
+
const { observe } = this.props;
|
|
159
117
|
if (!observe) {
|
|
160
118
|
return;
|
|
161
119
|
}
|
|
162
|
-
|
|
163
|
-
if (typeof observe === 'string' || observe instanceof String) {
|
|
120
|
+
if (typeof observe === "string" || observe instanceof String) {
|
|
164
121
|
this.nodes = document.querySelectorAll(observe);
|
|
165
122
|
} else if (observe instanceof Component) {
|
|
166
|
-
// eslint-disable-next-line react/no-find-dom-node
|
|
167
123
|
this.nodes.push(ReactDOM.findDOMNode(observe));
|
|
168
124
|
} else if (observe instanceof Element) {
|
|
169
125
|
this.nodes.push(observe);
|
|
170
126
|
} else if (observe.current instanceof Element) {
|
|
171
|
-
// observe value created with React.createRef() on a html node.
|
|
172
127
|
this.nodes.push(observe.current);
|
|
173
128
|
} else if (observe.current instanceof Component) {
|
|
174
|
-
// observe value created with React.createRef() on a React component.
|
|
175
|
-
// eslint-disable-next-line react/no-find-dom-node
|
|
176
129
|
this.nodes.push(ReactDOM.findDOMNode(observe.current));
|
|
177
130
|
}
|
|
178
|
-
|
|
179
131
|
if (this.nodes.length) {
|
|
180
|
-
this.nodes.forEach(
|
|
181
|
-
return this
|
|
132
|
+
this.nodes.forEach((node) => {
|
|
133
|
+
return this.observer.observe(node);
|
|
182
134
|
});
|
|
183
135
|
}
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
ResizeHandler.prototype.render = function render () {
|
|
136
|
+
}
|
|
137
|
+
render() {
|
|
187
138
|
return null;
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
return ResizeHandler;
|
|
191
|
-
}(PureComponent));
|
|
192
|
-
|
|
139
|
+
}
|
|
140
|
+
}
|
|
193
141
|
ResizeHandler.propTypes = propTypes;
|
|
194
142
|
ResizeHandler.defaultProps = defaultProps;
|
|
195
|
-
|
|
196
143
|
export default ResizeHandler;
|
|
197
|
-
|
|
198
|
-
//# sourceMappingURL=ResizeHandler.js.map
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/components/ResizeHandler/ResizeHandler.js"],
|
|
4
|
+
"sourcesContent": ["import ReactDOM from 'react-dom';\nimport { PureComponent, Component } from 'react';\nimport PropTypes from 'prop-types';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nconst propTypes = {\n observe: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.node,\n PropTypes.instanceOf(Component),\n PropTypes.shape({ current: PropTypes.node }),\n PropTypes.shape({ current: PropTypes.instanceOf(Component) }),\n ]),\n maxHeightBrkpts: PropTypes.objectOf(PropTypes.number),\n maxWidthBrkpts: PropTypes.objectOf(PropTypes.number),\n stylePropHeight: PropTypes.string,\n onResize: PropTypes.func,\n\n // This property is used to re-apply the classes, for example when the className of the observed node changes.\n forceUpdate: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number,\n PropTypes.bool,\n ]),\n};\n\n// Same as bootstrap\nconst defaultProps = {\n observe: null,\n maxHeightBrkpts: {\n xs: 576,\n s: 768,\n m: 992,\n l: 1200,\n xl: Infinity,\n },\n maxWidthBrkpts: {\n xs: 576,\n s: 768,\n m: 992,\n l: 1200,\n xl: Infinity,\n },\n stylePropHeight: null,\n onResize: null,\n forceUpdate: null,\n};\n/**\n * This component adds css class to an element depending on his size.\n */\nclass ResizeHandler extends PureComponent {\n static applyBreakpoints(entry, breakpoints, size, direction) {\n let found = false;\n let screenSize;\n Object.entries(breakpoints).forEach((brkpt) => {\n const cssClass = `rs-${direction}-${brkpt[0]}`;\n entry.target.classList.remove(cssClass);\n if (!found && size <= brkpt[1]) {\n found = true;\n [screenSize] = brkpt;\n entry.target.classList.add(cssClass);\n }\n });\n return screenSize;\n }\n\n constructor(props) {\n super(props);\n this.observer = new ResizeObserver((entries) => {\n return this.onResize(entries);\n });\n this.nodes = [];\n }\n\n componentDidMount() {\n this.observe();\n }\n\n componentDidUpdate(prevProps) {\n const { observe, forceUpdate } = this.props;\n\n if (\n observe !== prevProps.observe ||\n forceUpdate !== prevProps.forceUpdate\n ) {\n this.observe();\n }\n }\n\n componentWillUnmount() {\n this.observer.disconnect();\n }\n\n onResize(entries) {\n const { maxHeightBrkpts, maxWidthBrkpts, stylePropHeight, onResize } =\n this.props;\n\n if (stylePropHeight) {\n const vh = window.innerHeight * 0.01;\n document.documentElement.style.setProperty(stylePropHeight, `${vh}px`);\n }\n\n if (!maxWidthBrkpts && !maxHeightBrkpts) {\n onResize(entries);\n return;\n }\n\n let newScreenWidth;\n let newScreenHeight;\n\n for (let i = 0; i < entries.length; i += 1) {\n const entry = entries[i];\n const rect = entry.contentRect;\n const { height, width } = rect;\n\n if (maxWidthBrkpts) {\n newScreenWidth = ResizeHandler.applyBreakpoints(\n entry,\n maxWidthBrkpts,\n width,\n 'w',\n );\n }\n if (maxHeightBrkpts) {\n newScreenHeight = ResizeHandler.applyBreakpoints(\n entry,\n maxHeightBrkpts,\n height,\n 'h',\n );\n }\n }\n\n if (onResize) {\n onResize(entries, newScreenWidth, newScreenHeight);\n }\n }\n\n observe() {\n this.observer.disconnect();\n const { observe } = this.props;\n\n if (!observe) {\n return;\n }\n\n if (typeof observe === 'string' || observe instanceof String) {\n this.nodes = document.querySelectorAll(observe);\n } else if (observe instanceof Component) {\n // eslint-disable-next-line react/no-find-dom-node\n this.nodes.push(ReactDOM.findDOMNode(observe));\n } else if (observe instanceof Element) {\n this.nodes.push(observe);\n } else if (observe.current instanceof Element) {\n // observe value created with React.createRef() on a html node.\n this.nodes.push(observe.current);\n } else if (observe.current instanceof Component) {\n // observe value created with React.createRef() on a React component.\n // eslint-disable-next-line react/no-find-dom-node\n this.nodes.push(ReactDOM.findDOMNode(observe.current));\n }\n\n if (this.nodes.length) {\n this.nodes.forEach((node) => {\n return this.observer.observe(node);\n });\n }\n }\n\n render() {\n return null;\n }\n}\n\nResizeHandler.propTypes = propTypes;\nResizeHandler.defaultProps = defaultProps;\n\nexport default ResizeHandler;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/components/ResizeHandler/index.js"],
|
|
4
|
+
"sourcesContent": ["export { default } from './ResizeHandler';\n"],
|
|
5
|
+
"mappings": "AAAA,wBAAwB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|