From c749faa3614a051204e7dfab47c0617729d4a08e Mon Sep 17 00:00:00 2001
From: arieger <rieger@terrestris.de>
Date: Mon, 4 Sep 2023 17:36:20 +0200
Subject: [PATCH] refactor: remove Panel, Window and Titlebar components
BREAKING CHANGE: Panel, Window and Titlebar components are not existing anymore
---
package-lock.json | 63 +--
package.json | 4 +-
.../AddWmsPanel/AddWmsPanel.example.md | 2 +-
src/Container/AddWmsPanel/AddWmsPanel.less | 39 +-
.../AddWmsPanel/AddWmsPanel.spec.tsx | 3 -
src/Container/AddWmsPanel/AddWmsPanel.tsx | 109 ++---
src/Panel/Panel/Panel.example.md | 117 -----
src/Panel/Panel/Panel.less | 46 --
src/Panel/Panel/Panel.spec.tsx | 164 -------
src/Panel/Panel/Panel.tsx | 447 ------------------
src/Panel/Titlebar/Titlebar.example.md | 46 --
src/Panel/Titlebar/Titlebar.less | 21 -
src/Panel/Titlebar/Titlebar.spec.tsx | 51 --
src/Panel/Titlebar/Titlebar.tsx | 67 ---
src/Window/Window.example.md | 121 -----
src/Window/Window.less | 14 -
src/Window/Window.spec.tsx | 82 ----
src/Window/Window.tsx | 172 -------
src/index.ts | 6 -
styleguide.config.js | 6 -
20 files changed, 74 insertions(+), 1506 deletions(-)
delete mode 100644 src/Panel/Panel/Panel.example.md
delete mode 100644 src/Panel/Panel/Panel.less
delete mode 100644 src/Panel/Panel/Panel.spec.tsx
delete mode 100644 src/Panel/Panel/Panel.tsx
delete mode 100644 src/Panel/Titlebar/Titlebar.example.md
delete mode 100644 src/Panel/Titlebar/Titlebar.less
delete mode 100644 src/Panel/Titlebar/Titlebar.spec.tsx
delete mode 100644 src/Panel/Titlebar/Titlebar.tsx
delete mode 100644 src/Window/Window.example.md
delete mode 100644 src/Window/Window.less
delete mode 100644 src/Window/Window.spec.tsx
delete mode 100644 src/Window/Window.tsx
diff --git a/package-lock.json b/package-lock.json
index 0aaa7d8de2..304b8dce2d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
"@terrestris/ol-util": "^14.0.0",
"@types/geojson": "^7946.0.10",
"@types/lodash": "^4.14.197",
+ "@types/moment": "^2.13.0",
"ag-grid-community": "^28.2.1",
"ag-grid-react": "^28.2.1",
"jspdf": "^2.5.1",
@@ -26,8 +27,7 @@
"moment": "^2.29.4",
"proj4": "^2.9.0",
"prop-types": "^15.8.1",
- "react-dom": "^18.2.0",
- "react-rnd": "^10.3.5"
+ "react-dom": "^18.2.0"
},
"devDependencies": {
"@babel/cli": "^7.22.15",
@@ -7393,6 +7393,15 @@
"integrity": "sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag==",
"dev": true
},
+ "node_modules/@types/moment": {
+ "version": "2.13.0",
+ "resolved": "https://registry.npmjs.org/@types/moment/-/moment-2.13.0.tgz",
+ "integrity": "sha512-DyuyYGpV6r+4Z1bUznLi/Y7HpGn4iQ4IVcGn8zrr1P4KotKLdH0sbK1TFR6RGyX6B+G8u83wCzL+bpawKU/hdQ==",
+ "deprecated": "This is a stub types definition for Moment (https://github.com/moment/moment). Moment provides its own type definitions, so you don't need @types/moment installed!",
+ "dependencies": {
+ "moment": "*"
+ }
+ },
"node_modules/@types/node": {
"version": "20.11.5",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.5.tgz",
@@ -10478,6 +10487,7 @@
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
"integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+ "dev": true,
"engines": {
"node": ">=6"
}
@@ -14174,11 +14184,6 @@
"integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
"dev": true
},
- "node_modules/fast-memoize": {
- "version": "2.5.2",
- "resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.5.2.tgz",
- "integrity": "sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw=="
- },
"node_modules/fast-xml-parser": {
"version": "4.3.3",
"resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.3.3.tgz",
@@ -27888,18 +27893,6 @@
"node": ">=0.10.0"
}
},
- "node_modules/re-resizable": {
- "version": "6.9.6",
- "resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.9.6.tgz",
- "integrity": "sha512-0xYKS5+Z0zk+vICQlcZW+g54CcJTTmHluA7JUUgvERDxnKAnytylcyPsA+BSFi759s5hPlHmBRegFrwXs2FuBQ==",
- "dependencies": {
- "fast-memoize": "^2.5.1"
- },
- "peerDependencies": {
- "react": "^16.13.1 || ^17.0.0 || ^18.0.0",
- "react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0"
- }
- },
"node_modules/react": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@@ -28336,19 +28329,6 @@
"react": "^18.2.0"
}
},
- "node_modules/react-draggable": {
- "version": "4.4.5",
- "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.5.tgz",
- "integrity": "sha512-OMHzJdyJbYTZo4uQE393fHcqqPYsEtkjfMgvCHr6rejT+Ezn4OZbNyGH50vv+SunC1RMvwOTSWkEODQLzw1M9g==",
- "dependencies": {
- "clsx": "^1.1.1",
- "prop-types": "^15.8.1"
- },
- "peerDependencies": {
- "react": ">= 16.3.0",
- "react-dom": ">= 16.3.0"
- }
- },
"node_modules/react-error-overlay": {
"version": "6.0.11",
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
@@ -28388,25 +28368,6 @@
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
"dev": true
},
- "node_modules/react-rnd": {
- "version": "10.4.1",
- "resolved": "https://registry.npmjs.org/react-rnd/-/react-rnd-10.4.1.tgz",
- "integrity": "sha512-0m887AjQZr6p2ADLNnipquqsDq4XJu/uqVqI3zuoGD19tRm6uB83HmZWydtkilNp5EWsOHbLGF4IjWMdd5du8Q==",
- "dependencies": {
- "re-resizable": "6.9.6",
- "react-draggable": "4.4.5",
- "tslib": "2.3.1"
- },
- "peerDependencies": {
- "react": ">=16.3.0",
- "react-dom": ">=16.3.0"
- }
- },
- "node_modules/react-rnd/node_modules/tslib": {
- "version": "2.3.1",
- "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
- "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
- },
"node_modules/react-shallow-renderer": {
"version": "16.15.0",
"resolved": "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz",
diff --git a/package.json b/package.json
index 0ec924de60..846974f6cb 100644
--- a/package.json
+++ b/package.json
@@ -77,6 +77,7 @@
"@terrestris/ol-util": "^14.0.0",
"@types/geojson": "^7946.0.10",
"@types/lodash": "^4.14.197",
+ "@types/moment": "^2.13.0",
"ag-grid-community": "^28.2.1",
"ag-grid-react": "^28.2.1",
"jspdf": "^2.5.1",
@@ -84,8 +85,7 @@
"moment": "^2.29.4",
"proj4": "^2.9.0",
"prop-types": "^15.8.1",
- "react-dom": "^18.2.0",
- "react-rnd": "^10.3.5"
+ "react-dom": "^18.2.0"
},
"devDependencies": {
"@babel/cli": "^7.22.15",
diff --git a/src/Container/AddWmsPanel/AddWmsPanel.example.md b/src/Container/AddWmsPanel/AddWmsPanel.example.md
index e1b9508157..cd2114e0e5 100644
--- a/src/Container/AddWmsPanel/AddWmsPanel.example.md
+++ b/src/Container/AddWmsPanel/AddWmsPanel.example.md
@@ -49,7 +49,7 @@ class AddWmsPanelExample extends React.Component {
}
onClick() {
- CapabilitiesUtil.parseWmsCapabilities(WMS_CAPABILITIES_URL)
+ CapabilitiesUtil.getWmsCapabilities(WMS_CAPABILITIES_URL)
.then(CapabilitiesUtil.getLayersFromWmsCapabilities)
.then(layers => {
this.setState({
diff --git a/src/Container/AddWmsPanel/AddWmsPanel.less b/src/Container/AddWmsPanel/AddWmsPanel.less
index acd30a4978..51fbe2e778 100644
--- a/src/Container/AddWmsPanel/AddWmsPanel.less
+++ b/src/Container/AddWmsPanel/AddWmsPanel.less
@@ -1,33 +1,16 @@
.add-wms-panel {
- .body {
- display: flex;
- flex-direction: column;
-
- .ant-checkbox-group {
- flex: 1;
- height: 100%;
- overflow-y: auto;
- }
-
- .add-wms-layer-checkbox-line {
- padding: 5px;
- margin: 1px;
- display: flex;
- flex: 1;
- align-items: center;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
+ display: flex;
+ flex-direction: column;
- .add-wms-add-info-icon {
- margin-left: 5px;
- }
- }
+ .ant-checkbox-group {
+ flex: 1;
+ height: 100%;
+ overflow-y: auto;
+ }
- .react-geo-titlebar {
- .react-geo-simplebutton {
- margin-right: 5px;
- }
- }
+ .buttons {
+ display: flex;
+ gap: 5px;
+ justify-content: end;
}
}
diff --git a/src/Container/AddWmsPanel/AddWmsPanel.spec.tsx b/src/Container/AddWmsPanel/AddWmsPanel.spec.tsx
index e8b7441abe..a27a907328 100644
--- a/src/Container/AddWmsPanel/AddWmsPanel.spec.tsx
+++ b/src/Container/AddWmsPanel/AddWmsPanel.spec.tsx
@@ -64,9 +64,6 @@ describe('<AddWmsPanel />', () => {
const dialog = screen.getByRole('dialog');
expect(dialog).toBeVisible();
- const title = within(dialog).getByText(/add wms layer/i);
- expect(title).toBeVisible();
-
const list = within(dialog).getByRole('list');
expect(list).toBeVisible();
diff --git a/src/Container/AddWmsPanel/AddWmsPanel.tsx b/src/Container/AddWmsPanel/AddWmsPanel.tsx
index ce8b673100..da3b3d6081 100644
--- a/src/Container/AddWmsPanel/AddWmsPanel.tsx
+++ b/src/Container/AddWmsPanel/AddWmsPanel.tsx
@@ -4,8 +4,6 @@ import OlMap from 'ol/Map';
import _isFunction from 'lodash/isFunction';
-import Panel, { PanelProps } from '../../Panel/Panel/Panel';
-import Titlebar from '../../Panel/Titlebar/Titlebar';
import SimpleButton from '../../Button/SimpleButton/SimpleButton';
import Logger from '@terrestris/base-util/dist/Logger';
@@ -27,10 +25,6 @@ interface OwnProps {
* Optional text to be shown in cancel button
*/
cancelText: string;
- /**
- * Optional text to be shown in panel title
- */
- titleText: string;
/**
* Array containing layers (e.g. `Capability.Layer.Layer` of ol capabilities
* parser)
@@ -59,7 +53,7 @@ interface AddWmsLayerState {
selectedWmsLayers: string[];
}
-export type AddWmsPanelProps = OwnProps & PanelProps;
+export type AddWmsPanelProps = OwnProps;
/**
* Panel containing a (checkable) list of AddWmsLayerEntry instances.
@@ -79,7 +73,6 @@ export class AddWmsPanel extends React.Component<AddWmsPanelProps, AddWmsLayerSt
addAllLayersText: 'Add all layers',
addSelectedLayersText: 'Add selected layers',
cancelText: 'Cancel',
- titleText: 'Add WMS layer'
};
/**
@@ -118,7 +111,7 @@ export class AddWmsPanel extends React.Component<AddWmsPanelProps, AddWmsLayerSt
* state
*/
onAddSelectedLayers = () => {
- const {
+ const {
selectedWmsLayers
} = this.state;
@@ -136,7 +129,7 @@ export class AddWmsPanel extends React.Component<AddWmsPanelProps, AddWmsLayerSt
} else if (map) {
filteredLayers.forEach(layer => {
// Add layer to map if it is not added yet
- if (!map.getLayers().getArray().includes(layer) ) {
+ if (!map.getLayers().getArray().includes(layer)) {
map.addLayer(layer);
}
});
@@ -160,7 +153,7 @@ export class AddWmsPanel extends React.Component<AddWmsPanelProps, AddWmsLayerSt
} else if (map) {
wmsLayers.forEach(layer => {
// Add layer to map if it is not added yet
- if (!map.getLayers().getArray().includes(layer) ) {
+ if (!map.getLayers().getArray().includes(layer)) {
map.addLayer(layer);
}
});
@@ -172,70 +165,64 @@ export class AddWmsPanel extends React.Component<AddWmsPanelProps, AddWmsLayerSt
/**
* The render function.
*/
- render () {
+ render() {
const {
wmsLayers,
onCancel,
- titleText,
cancelText,
addAllLayersText,
- addSelectedLayersText,
- onLayerAddToMap,
- onSelectionChange,
- ...passThroughProps
+ addSelectedLayersText
} = this.props;
const {
selectedWmsLayers
- } = this.state;
+ } = this.state;
return (
- wmsLayers && wmsLayers.length > 0 ?
- <Panel
- title={titleText}
- bounds="#main"
- className="add-wms-panel"
- role="dialog"
- {...passThroughProps}
- >
- <div role="list" >
- <Checkbox.Group onChange={value => this.onSelectedLayersChange(value.map(v => v as string))}>
- {wmsLayers.map((layer, idx) =>
- <div role="listitem" key={idx}>
- <AddWmsLayerEntry
- wmsLayer={layer}
- />
- </div>
- )}
- </Checkbox.Group>
- </div>
- <Titlebar tools={[
- <SimpleButton
- size="small"
- key="useSelectedBtn"
- disabled={selectedWmsLayers.length === 0}
- onClick={this.onAddSelectedLayers}
- >
- {addSelectedLayersText}
- </SimpleButton>,
+ wmsLayers && wmsLayers.length > 0 &&
+ <div
+ className="add-wms-panel"
+ role="dialog"
+ >
+ <div role="list" >
+ <Checkbox.Group onChange={value => this.onSelectedLayersChange(value.map(v => v as string))}>
+ {wmsLayers.map((layer, idx) =>
+ <div role="listitem" key={idx}>
+ <AddWmsLayerEntry
+ wmsLayer={layer}
+ />
+ </div>
+ )}
+ </Checkbox.Group>
+ </div>
+ <div className="buttons">
+ <SimpleButton
+ size="small"
+ key="useSelectedBtn"
+ disabled={selectedWmsLayers.length === 0}
+ onClick={this.onAddSelectedLayers}
+ >
+ {addSelectedLayersText}
+ </SimpleButton>
+ <SimpleButton
+ size="small"
+ key="useAllBtn"
+ onClick={this.onAddAllLayers}
+ >
+ {addAllLayersText}
+ </SimpleButton>
+ {
+ onCancel &&
<SimpleButton
size="small"
- key="useAllBtn"
- onClick={this.onAddAllLayers}
+ key="cancelBtn"
+ onClick={onCancel}
>
- {addAllLayersText}
- </SimpleButton>,
- onCancel ?
- <SimpleButton
- size="small"
- key="cancelBtn"
- onClick={onCancel}
- >
- {cancelText}
- </SimpleButton> : null
- ]} />
- </Panel>
- : null
+ {cancelText}
+ </SimpleButton>
+ }
+ </div>
+ </div>
);
}
}
diff --git a/src/Panel/Panel/Panel.example.md b/src/Panel/Panel/Panel.example.md
deleted file mode 100644
index 22e75d4762..0000000000
--- a/src/Panel/Panel/Panel.example.md
+++ /dev/null
@@ -1,117 +0,0 @@
-This example demonstrates the use of Panels
-
-```jsx
-import Panel from '@terrestris/react-geo/dist/Panel/Panel/Panel';
-
-<Panel
- style={{position: 'relative'}}
- x={0}
- y={0}
- title="Children"
->
- <div style={{padding: '5px'}}>
- Im a div but i can be any node.
- </div>
-</Panel>
-```
-
-```jsx
-import Panel from '@terrestris/react-geo/dist/Panel/Panel/Panel';
-
-<div style={{display: 'flex'}}>
- <Panel
- style={{position: 'relative', paddingRight: '15px'}}
- x={0}
- y={0}
- title="Collapsible"
- collapsible={true}
- >
- <div style={{padding: '5px'}}>
- Content
- </div>
- </Panel>
- <Panel
- style={{position: 'relative'}}
- x={0}
- y={0}
- title="Initially collapsed"
- collapsible={true}
- collapsed={true}
- >
- <div style={{padding: '5px'}}>
- Content
- </div>
- </Panel>
-</div>
-```
-
-```jsx
-import Panel from '@terrestris/react-geo/dist/Panel/Panel/Panel';
-
-<Panel
- style={{position: 'relative'}}
- x={0}
- y={0}
- width={160}
- collapsible={true}
- title="Tooltip"
- collapseTooltip="Einklappen"
->
- <div style={{padding: '5px'}}>
- You can set the tooltip for the collapse icon with the prop `collapseTooltip`.
- </div>
-</Panel>
-```
-
-```jsx
-import Panel from '@terrestris/react-geo/dist/Panel/Panel/Panel';
-
-<Panel
- style={{position: 'relative'}}
- x={0}
- y={0}
- title="resizeopts (right & bottom)"
- resizeOpts={{
- bottom: true,
- bottomLeft: false,
- bottomRight: true,
- left: false,
- right: true,
- top: false,
- topLeft: false,
- topRight: false,
- }}
->
- <img src="https://www.koeln.de/files/images/Karnevalstrikot_Spieler_270.jpg" />
-</Panel>
-```
-
-```jsx
-import Panel from '@terrestris/react-geo/dist/Panel/Panel/Panel';
-
-<Panel
- style={{position: 'relative'}}
- x={0}
- y={0}
- title="resizeopts={true}"
- resizeOpts={true}
->
- <img src="https://www.koeln.de/files/images/Karnevalstrikot_Spieler_270.jpg" />
-</Panel>
-```
-
-```jsx
-import Panel from '@terrestris/react-geo/dist/Panel/Panel/Panel';
-
-<Panel
- style={{position: 'relative'}}
- title="Initial size (673 * 134)"
- resizeOpts={true}
- width={673}
- height={134}
- x={1}
- y={1}
->
- Panel with initial size.
-</Panel>
-```
diff --git a/src/Panel/Panel/Panel.less b/src/Panel/Panel/Panel.less
deleted file mode 100644
index d2e5357333..0000000000
--- a/src/Panel/Panel/Panel.less
+++ /dev/null
@@ -1,46 +0,0 @@
-@handlestyle: 5px solid var(--ant-primary-4);
-
-.react-geo-panel {
- z-index: 100;
-
- .body {
- background-color: white;
- &:focus {
- border: 0;
- outline: 0;
- }
- }
-
- .resize-handle {
- &:hover {
- &.resize-handle-right {
- border-right: @handlestyle;
- }
- &.resize-handle-left {
- border-left: @handlestyle;
- }
- &.resize-handle-top {
- border-top: @handlestyle;
- }
- &.resize-handle-bottom {
- border-top: @handlestyle;
- }
- &.resize-handle-bottom-right {
- border-bottom: @handlestyle;
- border-right: @handlestyle;
- }
- &.resize-handle-bottom-left {
- border-bottom: @handlestyle;
- border-left: @handlestyle;
- }
- &.resize-handle-top-right {
- border-top: @handlestyle;
- border-right: @handlestyle;
- }
- &.resize-handle-top-left {
- border-top: @handlestyle;
- border-left: @handlestyle;
- }
- }
- }
-}
diff --git a/src/Panel/Panel/Panel.spec.tsx b/src/Panel/Panel/Panel.spec.tsx
deleted file mode 100644
index 884db8df54..0000000000
--- a/src/Panel/Panel/Panel.spec.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-import TestUtil from '../../Util/TestUtil';
-
-import Panel from './Panel';
-
-import {
- act
-} from 'react-dom/test-utils';
-
-describe('<Panel />', () => {
-
- it('is defined', () => {
- expect(Panel).not.toBeUndefined();
- });
-
- it('can be rendered', () => {
- const wrapper = TestUtil.mountComponent(Panel);
- expect(wrapper).not.toBeUndefined();
- });
-
- it('passes props to Rnd', () => {
- const wrapper = TestUtil.mountComponent(Panel, {
- className: 'podolski',
- fc: 'koeln'
- });
- const rnd = wrapper.find('Rnd').getElements()[0];
- expect(rnd.props.className).toContain('podolski');
- expect(rnd.props.fc).toBe('koeln');
- });
-
- describe('#onKeyDown', () => {
-
- const wrapper = TestUtil.mountComponent(Panel);
-
- // Mock a DOM to play around
- document.body.className = 'react-geo-panel';
-
- const element = wrapper.instance()._rnd.getSelfElement();
-
- it('is defined', () => {
- expect(wrapper.instance().onKeyDown).not.toBeUndefined();
- });
-
- it('calls onEscape method if provided in props', () => {
- const mockEvt = {
- key: 'invalid_key'
- };
-
- wrapper.setProps({
- onEscape: jest.fn()
- });
-
- const onEscSpy = jest.spyOn(wrapper.props(), 'onEscape');
- const focusSpy = jest.spyOn(element, 'focus');
-
- wrapper.instance().onKeyDown(mockEvt);
- expect(onEscSpy).toHaveBeenCalledTimes(0);
- expect(focusSpy).toHaveBeenCalledTimes(0);
-
- // call once again with valid key and onEscape function
- mockEvt.key = 'Escape';
-
- wrapper.instance().onKeyDown(mockEvt);
- expect(onEscSpy).toHaveBeenCalledTimes(1);
- expect(focusSpy).toHaveBeenCalledTimes(1);
- expect(element.className).toContain(document.activeElement.className);
-
- onEscSpy.mockRestore();
- focusSpy.mockRestore();
- });
- });
-
- describe('#toggleCollapse', () => {
- const wrapper = TestUtil.mountComponent(Panel);
-
- it('is defined', () => {
- expect(wrapper.instance().toggleCollapse).not.toBeUndefined();
- });
-
- it('inverts the collapsed property on the state', () => {
- const oldState = wrapper.state();
- act(() => {
- wrapper.instance().toggleCollapse();
- });
- const newState = wrapper.state();
- expect(oldState.collapsed).toBe(!newState.collapsed);
- });
- });
-
- describe('#onResize', () => {
- const wrapper = TestUtil.mountComponent(Panel);
-
- it('is defined', () => {
- expect(wrapper.instance().onResize).not.toBeUndefined();
- });
-
- it('sets resizing on the state to true', () => {
- act(() => {
- wrapper.instance().onResize(null, null, {clientHeight: 1337});
- });
- expect(wrapper.state().height).toBe(1337);
- });
-
- it('calls corresponding function "onResize" of props if defined', () => {
- const onResizeMock = jest.fn();
- const wrapperWithMockedFunction = TestUtil.mountComponent(Panel, {
- onResize: onResizeMock
- });
- expect(wrapperWithMockedFunction.instance().onResizeStop).not.toBeUndefined();
- wrapperWithMockedFunction.instance().onResize(null, null, {clientHeight: 4711});
- expect(onResizeMock.mock.calls).toHaveLength(1);
- });
- });
-
- describe('#onResizeStart', () => {
- const wrapper = TestUtil.mountComponent(Panel);
-
- it('is defined', () => {
- expect(wrapper.instance().onResizeStart).not.toBeUndefined();
- });
-
- it('sets resizing on the state to true', () => {
- act(() => {
- wrapper.instance().onResizeStart();
- });
- const state = wrapper.state();
- expect(state.resizing).toBe(true);
- });
-
- it('calls corresponding function "onResizeStart" of props if defined', () => {
- const onResizeStartMock = jest.fn();
- const wrapperWithMockedFunction = TestUtil.mountComponent(Panel, {
- onResizeStart: onResizeStartMock
- });
- expect(wrapperWithMockedFunction.instance().onResizeStart).not.toBeUndefined();
- wrapperWithMockedFunction.instance().onResizeStart();
- expect(onResizeStartMock.mock.calls).toHaveLength(1);
- });
- });
-
- describe('#onResizeStop', () => {
- const wrapper = TestUtil.mountComponent(Panel);
-
- it('is defined', () => {
- expect(wrapper.instance().onResizeStop).not.toBeUndefined();
- });
-
- it('sets the el size on the state', () => {
- wrapper.instance().onResizeStop();
- const state = wrapper.state();
- expect(state.resizing).toBe(false);
- });
-
- it('calls corresponding function "onResizeStop" of props if defined', () => {
- const onResizeStopMock = jest.fn();
- const wrapperWithMockedFunction = TestUtil.mountComponent(Panel, {
- onResizeStop: onResizeStopMock
- });
- expect(wrapperWithMockedFunction.instance().onResizeStop).not.toBeUndefined();
- wrapperWithMockedFunction.instance().onResizeStop();
- expect(onResizeStopMock.mock.calls).toHaveLength(1);
- });
- });
-
-});
diff --git a/src/Panel/Panel/Panel.tsx b/src/Panel/Panel/Panel.tsx
deleted file mode 100644
index 85fa1454af..0000000000
--- a/src/Panel/Panel/Panel.tsx
+++ /dev/null
@@ -1,447 +0,0 @@
-import * as React from 'react';
-import {
- Rnd,
- ResizeEnable,
- ResizableDelta,
- Position,
- Props as RndProps
-} from 'react-rnd';
-import { ResizeDirection } from 're-resizable';
-
-import _uniqueId from 'lodash/uniqueId';
-import _isNumber from 'lodash/isNumber';
-import _isFunction from 'lodash/isFunction';
-
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCompress } from '@fortawesome/free-solid-svg-icons';
-
-import Titlebar from '../Titlebar/Titlebar';
-import SimpleButton from '../../Button/SimpleButton/SimpleButton';
-
-import { CSS_PREFIX } from '../../constants';
-
-import './Panel.less';
-
-interface OwnProps {
- /**
- * Whether to allow dragging or not. Default is false.
- */
- draggable: boolean;
- /**
- * Whether to allow collapsing or not. Default is false.
- */
- collapsible: boolean;
- /**
- * Whether to show panel collapsed initially or not. Default is false.
- */
- collapsed: boolean;
- /**
- * The height of the panel.
- */
- height: number | 'inherit' | 'initial' | 'auto';
- /**
- * The width of the panel.
- */
- width: number | 'inherit' | 'initial' | 'auto';
- /**
- * The height of the TitleBar.
- */
- titleBarHeight: number;
- /**
- * The tooltip of the collapse button.
- */
- collapseTooltip: string;
- /**
- *
- */
- tools: React.ReactElement[];
- /**
- * The enableResizing property is used to set the resizable permission of a
- * resizable component.
- * The permission of top, right, bottom, left, topRight, bottomRight,
- * bottomLeft, topLeft direction resizing. If omitted, all resizer are
- * enabled. If you want to permit only right direction resizing, set {
- * top:false,
- * right:true,
- * bottom:false,
- * left:false,
- * topRight:false,
- * bottomRight:false,
- * bottomLeft:false,
- * topLeft:false
- * }.
- */
- resizeOpts: ResizeEnable | boolean;
- id?: string;
- /**
- * The children to show in the Window.
- */
- children?: React.ReactNode;
- /**
- * The title text to be shown in the window Header.
- */
- title?: string;
- /**
- * Callback function on `keydown` keyboard event if `escape` key was pressed.
- */
- onEscape?: (evt: KeyboardEvent) => void;
-}
-
-interface PanelState {
- id?: string;
- /**
- * Whether to show panel collapsed initially or not. Default is false.
- */
- collapsed: boolean;
- /**
- * The height of the TitleBar.
- */
- titleBarHeight: number;
- /**
- * The height of the panel.
- */
- height: number | 'inherit' | 'initial' | 'auto';
- /**
- * The width of the panel.
- */
- width: number | 'inherit' | 'initial' | 'auto';
- /**
- *
- */
- resizing: boolean;
-}
-
-export type PanelProps = OwnProps & RndProps;
-
-/**
- * The Panel.
- *
- * @class The Panel
- * @extends React.Component
- */
-export class Panel extends React.Component<PanelProps, PanelState> {
-
- /**
- * The default properties.
- */
- static defaultProps = {
- draggable: false,
- collapsible: false,
- collapsed: false,
- resizeOpts: false,
- titleBarHeight: 37.5,
- tools: [],
- height: 'auto',
- width: 'auto',
- collapseTooltip: 'Collapse'
- };
-
- /**
- * The className added to this component.
- * @private
- */
- className = `${CSS_PREFIX}panel`;
-
- /**
- * Printed representation of the pressed escape keyboard key.
- * s. https://developer.mozilla.org/de/docs/Web/API/KeyboardEvent/key/Key_Values
- * @private
- */
- _escapeKeyboardEventKey = 'Esc';
-
- /**
- *
- *
- */
- _rnd: Rnd | null = null;
-
- /**
- * Create the Panel.
- *
- * @constructs Panel
- */
- constructor(props: PanelProps) {
- super(props);
- const id = props.id || _uniqueId('panel-');
- this.state = {
- id: id,
- collapsed: this.props.collapsible ? this.props.collapsed : false,
- titleBarHeight: this.props.title ? props.titleBarHeight : 0,
- height: props.height,
- width: props.width,
- resizing: false
- };
- }
-
- /**
- * componentDidMount life cycle method.
- * Registers `keydown` listener if `onEscape` function was provided via props.
- */
- componentDidMount() {
- if (this.props.onEscape) {
- document.addEventListener('keydown', this.onKeyDown, false);
- }
- }
-
- /**
- * componentWillUnmount life cycle method.
- * Unregisters `keydown` listener if `onEscape` function was provided via props.
- */
- componentWillUnmount() {
- if (this.props.onEscape) {
- document.removeEventListener('keydown', this.onKeyDown, false);
- }
- }
-
- /**
- * Calculates the height of the Panel and returns a number.
- */
- calculateHeight() {
- return this.state.collapsed
- ? this.state.titleBarHeight
- : this.state.height;
- }
-
- /**
- * Calculates the height of the Panel body and returns a valid css height
- * expression.
- */
- calculateBodyHeight() {
- if (this.state.collapsed) {
- return '0px';
- } else {
- return _isNumber(this.state.height)
- ? ((this.state.height as number) - this.state.titleBarHeight) + 'px'
- : this.state.height;
- }
- }
-
- /**
- * Toggles the collapse state of the panel.
- */
- toggleCollapse() {
- this.setState({
- collapsed: !this.state.collapsed
- }, () => {
- this._rnd?.updateSize({
- height: this.calculateHeight(),
- width: this.state.width
- });
- });
- }
-
- /**
- * Function called while resizing.
- *
- * @param evt The MouseEvent event.
- * @param direction A string discribing where the element was grabed.
- * @param el The element which gets resized.
- * @param delta The delta of the resizing.
- * @param position The position of the resizing.
- */
- onResize(
- evt: MouseEvent | TouchEvent,
- direction: ResizeDirection,
- el: HTMLElement,
- delta: ResizableDelta,
- position: Position
- ) {
- const { onResize } = this.props;
- if (_isFunction(onResize)) {
- onResize(evt, direction, el, delta, position);
- }
- this.setState({
- height: el.clientHeight,
- width: el.clientWidth
- });
- }
-
- /**
- * Function called when resizing is started.
- *
- * @param evt The MouseEvent event.
- * @param direction A string discribing where the element was grabed.
- * @param el The element which gets resized.
- */
- onResizeStart(
- evt: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>,
- direction: ResizeDirection,
- el: HTMLElement
- ) {
- const { onResizeStart } = this.props;
- if (_isFunction(onResizeStart)) {
- onResizeStart(evt, direction, el);
- }
- this.setState({
- resizing: true
- });
- }
-
- /**
- * Function called when resizing is stopped.
- *
- * @param evt The MouseEvent event.
- * @param direction A string discribing where the element was grabed.
- * @param el The element which gets resized.
- * @param delta The delta of the resizing.
- * @param position The position of the resizing.
- */
- onResizeStop(
- evt: MouseEvent | TouchEvent,
- direction: ResizeDirection,
- el: HTMLElement,
- delta: ResizableDelta,
- position: Position
- ) {
- const { onResizeStop } = this.props;
- if (_isFunction(onResizeStop)) {
- onResizeStop(evt, direction, el, delta, position);
- }
- this.setState({
- resizing: false
- });
- }
-
- /**
- * Called on keyboard `keydown` event. Will be only triggered if pressed key
- * is `Escape` key and `onEscape` function is provided via props.
- * @param evt `keydown` event.
- */
- onKeyDown = (evt: KeyboardEvent) => {
- const {
- onEscape
- } = this.props;
- if (evt && evt.key.startsWith(this._escapeKeyboardEventKey) && onEscape) {
- this._rnd?.getSelfElement()?.focus();
- onEscape(evt);
- }
- };
-
- /**
- * The render function.
- */
- render() {
- const {
- id,
- className,
- children,
- title,
- resizeOpts,
- onResize,
- onResizeStart,
- onResizeStop,
- onEscape,
- draggable,
- collapsible,
- collapsed,
- height,
- width,
- titleBarHeight,
- collapseTooltip,
- tools,
- ...rndOpts
- } = this.props;
-
- const toolsClone = tools.map(tool => React.cloneElement(tool));
-
- const finalClassName = className
- ? `${className} ${this.className}`
- : this.className;
-
- const rndClassName = `${finalClassName} ${this.state.id}`;
- const enableResizing = resizeOpts === true ? undefined : resizeOpts;
-
- if (collapsible) {
- toolsClone.unshift(<SimpleButton
- icon={
- <FontAwesomeIcon
- icon={faCompress}
- />
- }
- key="collapse-tool"
- onClick={this.toggleCollapse.bind(this)}
- tooltip={collapseTooltip}
- size="small"
- />);
- }
-
- const titleBarClassName = draggable ?
- 'drag-handle ant-modal-header' :
- 'ant-modal-header';
-
- const titleBar = title ? <Titlebar
- className={titleBarClassName}
- tools={toolsClone}
- style={{
- height: this.state.titleBarHeight,
- cursor: draggable ? 'move' : 'default'
- }}
- >
- {title}
- </Titlebar> : null;
-
- const defaultWidth = this.state.width;
- const defaultHeight = this.calculateHeight();
- const {
- x,
- y
- } = rndOpts;
- const defX = x && _isNumber(x)
- ? x
- : _isNumber(defaultWidth)
- ? window.innerWidth / 2 - (defaultWidth as number) / 2
- : 0;
- const defY = y && _isNumber(y)
- ? y
- : _isNumber(defaultHeight)
- ? window.innerHeight / 2 - (defaultHeight as number) / 2
- : 0;
-
- return (
- <Rnd
- className={rndClassName}
- ref={rnd => this._rnd = rnd}
- default={{
- x: defX,
- y: defY,
- width: defaultWidth,
- height: defaultHeight
- }}
- dragHandleClassName="drag-handle"
- disableDragging={!draggable}
- enableResizing={enableResizing as ResizeEnable}
- resizeHandleClasses={{
- bottom: 'resize-handle resize-handle-bottom',
- bottomLeft: 'resize-handle resize-handle-bottom-left',
- bottomRight: 'resize-handle resize-handle-bottom-right',
- left: 'resize-handle resize-handle-left',
- right: 'resize-handle resize-handle-right',
- top: 'resize-handle resize-handle-top',
- topLeft: 'resize-handle resize-handle-top-left',
- topRight: 'resize-handle resize-handle-top-right'
- }}
- onResize={this.onResize.bind(this)}
- onResizeStart={this.onResizeStart.bind(this)}
- onResizeStop={this.onResizeStop.bind(this)}
- cancel='.react-geo-titlebar .controls'
- {...rndOpts}
- >
- {titleBar}
- <div
- className="body"
- tabIndex={0}
- style={{
- cursor: 'default',
- overflow: 'hidden',
- height: this.calculateBodyHeight(),
- transition: this.state.resizing ? '' : 'height 0.25s',
- }}
- >
- {children}
- </div>
- </Rnd>
- );
- }
-}
-
-export default Panel;
diff --git a/src/Panel/Titlebar/Titlebar.example.md b/src/Panel/Titlebar/Titlebar.example.md
deleted file mode 100644
index 948ac25526..0000000000
--- a/src/Panel/Titlebar/Titlebar.example.md
+++ /dev/null
@@ -1,46 +0,0 @@
-This example demonstrates the Titlebar.
-
-Just a Titlebar:
-
-```jsx
-import Titlebar from '@terrestris/react-geo/dist/Panel/Titlebar/Titlebar';
-
-<Titlebar />
-```
-
-A Titlebar with a title:
-
-```jsx
-import Titlebar from '@terrestris/react-geo/dist/Panel/Titlebar/Titlebar';
-
-<Titlebar>
- Title
-</Titlebar>
-```
-
-A Titlebar with a title and tools
-
-```jsx
-import SimpleButton from '@terrestris/react-geo/dist/Button/SimpleButton/SimpleButton';
-import Titlebar from '@terrestris/react-geo/dist/Panel/Titlebar/Titlebar';
-
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faGlobe } from '@fortawesome/free-solid-svg-icons';
-
-<Titlebar
- tools={[
- <SimpleButton
- icon={
- <FontAwesomeIcon
- icon={faGlobe}
- />
- }
- tooltip="globe-tool"
- key="globe-tool"
- size="small"
- />
- ]}
->
- A Titlebar with a title and tools
-</Titlebar>
-```
diff --git a/src/Panel/Titlebar/Titlebar.less b/src/Panel/Titlebar/Titlebar.less
deleted file mode 100644
index 898658f641..0000000000
--- a/src/Panel/Titlebar/Titlebar.less
+++ /dev/null
@@ -1,21 +0,0 @@
-.react-geo-titlebar {
- padding: 0;
- display: flex;
- align-items: center;
- background-color: #E6E6E6;
- font-weight: bold;
-
- .title {
- margin: 5px;
- flex: 1;
- }
-
- .controls {
- margin: 5px;
- display: flex;
-
- >button {
- margin-right: 2px;
- }
- }
-}
diff --git a/src/Panel/Titlebar/Titlebar.spec.tsx b/src/Panel/Titlebar/Titlebar.spec.tsx
deleted file mode 100644
index 894cc42b44..0000000000
--- a/src/Panel/Titlebar/Titlebar.spec.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import * as React from 'react';
-
-import TestUtil from '../../Util/TestUtil';
-
-import Titlebar from './Titlebar';
-import SimpleButton from '../../Button/SimpleButton/SimpleButton';
-
-describe('<Titlebar />', () => {
-
- it('is defined', () => {
- expect(Titlebar).not.toBeUndefined();
- });
-
- it('can be rendered', () => {
- const wrapper = TestUtil.mountComponent(Titlebar);
- expect(wrapper).not.toBeUndefined();
- });
-
- it('adds a passed className', () => {
- const wrapper = TestUtil.mountComponent(Titlebar, {
- className: 'podolski'
- });
- expect(wrapper.instance().props.className).toContain('podolski');
- });
-
- it('renders the title', () => {
- const wrapper = TestUtil.mountComponent(Titlebar, {
- children: 'Testtitle'
- });
- const title = wrapper.find('span.title');
- expect(title.length).toBe(1);
- });
-
- it('renders the controls (if set)', () => {
- const wrapper = TestUtil.mountComponent(Titlebar, {
- children: 'Testtitle'
- });
- expect(wrapper.find('span.controls').length).toBe(0);
- const wrapperWithTools = TestUtil.mountComponent(Titlebar, {
- children: 'Testtitle',
- tools: [
- <SimpleButton
- key="close-tool"
- size="small"
- />
- ]
- });
- expect(wrapperWithTools.find('span.controls').length).toBe(1);
- });
-
-});
diff --git a/src/Panel/Titlebar/Titlebar.tsx b/src/Panel/Titlebar/Titlebar.tsx
deleted file mode 100644
index 223e946e93..0000000000
--- a/src/Panel/Titlebar/Titlebar.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import * as React from 'react';
-import _isEmpty from 'lodash/isEmpty';
-
-import { CSS_PREFIX } from '../../constants';
-
-import './Titlebar.less';
-
-export interface BaseProps {
- /**
- * An optional CSS class which should be added.
- */
- className?: string;
- /**
- * Additional elements to show at the right side of the Titlebar.
- */
- tools?: React.ReactNode[];
-}
-
-export type TitlebarProps = BaseProps & React.HTMLAttributes<HTMLDivElement>;
-
-/**
- * Class representing the titlebar. Usually used in a panel.
- *
- * @class The TitleBar
- * @extends React.Component
- */
-export class Titlebar extends React.Component<TitlebarProps> {
-
- /**
- * The className added to this component.
- * @private
- */
- className = `${CSS_PREFIX}titlebar`;
-
- /**
- * The render function.
- */
- render() {
- const {
- className,
- tools,
- children,
- ...passThroughProps
- } = this.props;
-
- const finalClassName = className
- ? `${className} ${this.className}`
- : this.className;
-
- return (
- <div className={finalClassName} {...passThroughProps} >
- <span className="title">
- {children}
- </span>
- {
- !_isEmpty(tools) ?
- <span className="controls">
- {tools}
- </span> :
- null
- }
- </div>
- );
- }
-}
-
-export default Titlebar;
diff --git a/src/Window/Window.example.md b/src/Window/Window.example.md
deleted file mode 100644
index e260dee3ce..0000000000
--- a/src/Window/Window.example.md
+++ /dev/null
@@ -1,121 +0,0 @@
-This example demonstrates the usage of a Window component.
-
-Click to open window:
-
-```jsx
-import * as React from 'react';
-
-import SimpleButton from '@terrestris/react-geo/dist/Button/SimpleButton/SimpleButton';
-import Window from '@terrestris/react-geo/dist/Window/Window';
-
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTimes } from '@fortawesome/free-solid-svg-icons';
-
-class WindowExample extends React.Component {
-
- constructor(props) {
-
- super(props);
-
- this.state = {
- simpleWinIsVisible: false,
- escWinIsVisible: false
- };
- }
-
- onClickSimple() {
- this.setState({
- simpleWinIsVisible: !this.state.simpleWinIsVisible
- });
- }
-
- onClickEsc() {
- this.setState({
- escWinIsVisible: !this.state.escWinIsVisible
- });
- }
-
- render() {
- return (
- <div>
- <SimpleButton
- onClick={this.onClickSimple.bind(this)}
- >
- {`${this.state.simpleWinIsVisible ? 'Hide' : 'Show'} a window`}
- </SimpleButton>
- <SimpleButton
- onClick={this.onClickEsc.bind(this)}
- >
- {`${this.state.escWinIsVisible ? 'Hide' : 'Show'} a window with bound 'keydown' listener`}
- </SimpleButton>
-
- {
- this.state.simpleWinIsVisible ?
- <Window
- parentId="rsg-root"
- title="This is the window title"
- width={300}
- height={150}
- x={(window.innerWidth / 2 - 150) / 2}
- y={(window.innerHeight / 2 - 75) / 2}
- style={{
- position: 'fixed',
- boxShadow: '5px 5px 5px 0px #888888'
- }}
- tools={[
- <SimpleButton
- key="closeButton"
- icon={
- <FontAwesomeIcon
- icon={faTimes}
- />
- }
- size="small"
- tooltip="Close"
- onClick={this.onClickSimple.bind(this)}
- />
- ]}
- >
- This is the content of the window.
- </Window> :
- null
- }
- {
- this.state.escWinIsVisible ?
- <Window
- parentId="rsg-root"
- title="This is the window title"
- onEscape={this.onClickEsc.bind(this)}
- width={300}
- height={150}
- x={(window.innerWidth / 2 - 150) / 2}
- y={(window.innerHeight / 2 - 75) / 2}
- style={{
- position: 'fixed',
- boxShadow: '5px 5px 5px 0px #888888'
- }}
- tools={[
- <SimpleButton
- key="closeButton"
- icon={
- <FontAwesomeIcon
- icon={faTimes}
- />
- }
- size="small"
- tooltip="Close"
- onClick={this.onClickEsc.bind(this)}
- />
- ]}
- >
- Press <b>escape</b> to close me.
- </Window> :
- null
- }
- </div>
- );
- }
-}
-
-<WindowExample />;
-```
diff --git a/src/Window/Window.less b/src/Window/Window.less
deleted file mode 100644
index 46695e521a..0000000000
--- a/src/Window/Window.less
+++ /dev/null
@@ -1,14 +0,0 @@
-.react-geo-window-portal {
- z-index: 1000; // see @zindex-modal
- position: inherit !important;
-
- .ant-modal-header {
- padding: 1px;
-
- .title {
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- }
- }
-}
diff --git a/src/Window/Window.spec.tsx b/src/Window/Window.spec.tsx
deleted file mode 100644
index f233288f65..0000000000
--- a/src/Window/Window.spec.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import Window from './Window';
-import TestUtil from '../Util/TestUtil';
-
-import Logger from '@terrestris/base-util/dist/Logger';
-
-describe('<Window />', () => {
-
- it('is defined', () => {
- expect(Window).not.toBeUndefined();
- });
-
- it('can be rendered', () => {
- const testIdToMountIn = 'testAppId';
- const divToBeRenderedIn = document.createElement('div');
- divToBeRenderedIn.id = testIdToMountIn;
- document.body.appendChild(divToBeRenderedIn);
- const wrapper = TestUtil.mountComponent(Window, {
- parentId: testIdToMountIn
- });
- expect(wrapper).not.toBeUndefined();
- });
-
- it('warns if no parentId is provided', () => {
-
- const loggerSpy = jest.spyOn(Logger, 'warn');
-
- TestUtil.mountComponent(Window, {});
-
- expect(loggerSpy).toHaveBeenCalled();
- expect(loggerSpy).toHaveBeenCalledWith('No parent element was found! ' +
- 'Please ensure that parentId parameter was set correctly (default ' +
- 'value is `app`)');
-
- loggerSpy.mockRestore();
- });
-
- it('is completely removed from parent if component is unmounted', () => {
- const testIdToMountIn = 'testAppId';
- const windowId = 'nice-window';
- const otherId = 'other';
- const divToBeRenderedIn = document.createElement('div');
- const divContainingOtherContent = document.createElement('div');
- divContainingOtherContent.id = otherId;
- divToBeRenderedIn.id = testIdToMountIn;
- document.body.appendChild(divToBeRenderedIn);
- document.body.appendChild(divContainingOtherContent);
- const wrapper = TestUtil.mountComponent(Window, {
- parentId: testIdToMountIn,
- id: windowId
- });
-
- expect(document.getElementById(windowId)).toBeDefined();
- expect(document.getElementById(windowId).id).toBe(windowId);
-
- // unmount
- wrapper.instance().componentWillUnmount();
-
- expect(document.getElementById(windowId)).toBeNull();
- });
-
- it('changes class of component when className is changed in props', () => {
- const testIdToMountIn = 'testAppId';
- const windowId = 'testId1';
- let className = 'test1';
- const divToBeRenderedIn = document.createElement('div');
- divToBeRenderedIn.id = testIdToMountIn;
- document.body.appendChild(divToBeRenderedIn);
- const wrapper = TestUtil.mountComponent(Window, {
- parentId: testIdToMountIn,
- className: className,
- id: windowId
- });
- expect(document.getElementById(windowId)).toBeDefined();
- expect(document.getElementById(windowId).className).toEqual(expect.stringContaining(className));
- className = 'test2';
- wrapper.setProps({
- className: className
- });
- expect(document.getElementById(windowId).className).toEqual(expect.stringContaining(className));
- });
-
-});
diff --git a/src/Window/Window.tsx b/src/Window/Window.tsx
deleted file mode 100644
index 260d86bb2c..0000000000
--- a/src/Window/Window.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-import * as React from 'react';
-import ReactDOM from 'react-dom';
-
-import _uniqueId from 'lodash/uniqueId';
-
-import Panel, { PanelProps } from '../Panel/Panel/Panel';
-import Logger from '@terrestris/base-util/dist/Logger';
-
-import { CSS_PREFIX } from '../constants';
-
-import './Window.less';
-import { ResizeEnable } from 'react-rnd';
-
-interface OwnProps {
- /**
- * Id of the component
- */
- id: string;
- /**
- * The id of the parent component
- * default: app
- */
- parentId: string;
- /**
- * The title text to be shown in the window header.
- */
- title: string;
- /**
- * The resize options.
- */
- resizeOpts: ResizeEnable | boolean;
- /**
- * Wheter the Window should be collapsible or not.
- */
- collapsible: boolean;
- /**
- * Wheter the Window should be draggable or not.
- */
- draggable: boolean;
- /**
- * An optional CSS class which should be added.
- */
- className?: string;
-}
-
-interface WindowState {
- /**
- * The user aname.
- */
- resizing: boolean;
- /**
- * The id of the Window.
- */
- id: string;
-}
-
-export type WindowProps = OwnProps & PanelProps;
-
-/**
- * Window component that creates a React portal that renders children into a DOM
- * node that exists outside the DOM hierarchy of the parent component. By default,
- * Window Component is draggable.
- *
- * @class Window
- * @extends React.Component
- */
-export class Window extends React.Component<WindowProps, WindowState> {
-
- static defaultProps = {
- parentId: 'app',
- title: 'Window',
- resizeOpts: true,
- collapsible: true,
- draggable: true,
- id: _uniqueId('window-')
- };
-
- /**
- * The parent Element of the Window.
- * @private
- */
- _parent: HTMLElement | null;
-
- /**
- * The Element of the Window.
- * @private
- */
- _elementDiv: HTMLDivElement;
-
- /**
- * The className added to this component.
- * @private
- */
- className: string = `${CSS_PREFIX}window-portal`;
-
- /**
- * Create a Window.
- * @constructs Window
- */
- constructor(props: WindowProps) {
- super(props);
-
- const { parentId } = this.props;
- this._parent = document.getElementById(parentId);
-
- if (!this._parent) {
- Logger.warn('No parent element was found! Please ensure that parentId ' +
- 'parameter was set correctly (default value is `app`)');
- }
-
- const div = document.createElement('div');
- div.id = props.id;
- this._elementDiv = div;
-
- this.state = {
- id: props.id,
- resizing: false
- };
- }
-
- /**
- * The portal element is inserted in the DOM tree after
- * the Windows's children are mounted, meaning that children
- * will be mounted on a detached DOM node. If a child
- * component requires to be attached to the DOM tree
- * immediately when mounted, for example to measure a
- * DOM node, or uses 'autoFocus' in a descendant, add
- * state to Window and only render the children when Window
- * is inserted in the DOM tree.
- */
- componentDidMount() {
- if (this._parent) {
- this._parent.appendChild(this._elementDiv);
- }
- }
-
- /**
- * componentWillUnmount - remove child from parent element
- */
- componentWillUnmount() {
- if (this._parent) {
- this._parent.removeChild(this._elementDiv);
- }
- }
-
- /**
- * The render function.
- */
- render() {
- const {
- className,
- children,
- parentId,
- ...passThroughProps
- } = this.props;
-
- const finalClassName = className
- ? `${className} ${this.className}`
- : this.className;
-
- this._elementDiv.className = finalClassName;
-
- return ReactDOM.createPortal(
- <Panel {...passThroughProps} >
- {children}
- </Panel>,
- this._elementDiv,
- );
- }
-}
-
-export default Window;
diff --git a/src/index.ts b/src/index.ts
index 4622d5e4cf..77cacf95a5 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -34,15 +34,12 @@ import LayerTreeNode from './LayerTree/LayerTreeNode/LayerTreeNode';
import Legend from './Legend/Legend';
import FloatingMapLogo from './Map/FloatingMapLogo/FloatingMapLogo';
import MapComponent from './Map/MapComponent/MapComponent';
-import Panel from './Panel/Panel/Panel';
import TimeLayerSliderPanel from './Panel/TimeLayerSliderPanel/TimeLayerSliderPanel';
-import Titlebar from './Panel/Titlebar/Titlebar';
import LayerTransparencySlider from './Slider/LayerTransparencySlider/LayerTransparencySlider';
import MultiLayerSlider from './Slider/MultiLayerSlider/MultiLayerSlider';
import TimeSlider from './Slider/TimeSlider/TimeSlider';
import Toolbar from './Toolbar/Toolbar';
import UserChip from './UserChip/UserChip';
-import Window from './Window/Window';
import SearchResultsPanel from './Panel/SearchResultsPanel/SearchResultsPanel';
import ClickAwayListener from './Util/ClickAwayListener/ClickAwayListener';
import BackgroundLayerChooser from './BackgroundLayerChooser/BackgroundLayerChooser';
@@ -77,7 +74,6 @@ export {
MultiLayerSlider,
NominatimSearch,
onDropAware,
- Panel,
PropertyGrid,
ScaleCombo,
SearchResultsPanel,
@@ -86,7 +82,6 @@ export {
timeLayerAware,
TimeLayerSliderPanel,
TimeSlider,
- Titlebar,
ToggleButton,
ToggleGroup,
Toolbar,
@@ -95,7 +90,6 @@ export {
UserChip,
WfsSearch,
WfsSearchInput,
- Window,
ZoomButton,
ZoomToExtentButton
};
diff --git a/styleguide.config.js b/styleguide.config.js
index aece6d17e0..6edf8aec85 100644
--- a/styleguide.config.js
+++ b/styleguide.config.js
@@ -102,9 +102,6 @@ module.exports = {
}, {
name: 'Map',
components: 'src/Map/**/*.tsx'
- }, {
- name: 'Panel',
- components: 'src/Panel/**/*.tsx'
}, {
name: 'Slider',
components: 'src/Slider/**/*.tsx'
@@ -114,9 +111,6 @@ module.exports = {
}, {
name: 'UserChip',
components: 'src/UserChip/**/*.tsx'
- }, {
- name: 'Window',
- components: 'src/Window/**/*.tsx'
}]
}]
};