From b90f39f00cd9b43e5a768327995d305c056fe4b7 Mon Sep 17 00:00:00 2001 From: Martin Karkowski Date: Wed, 2 Sep 2020 17:00:03 +0200 Subject: [PATCH] Creating Inital Layout Element --- pages/test/test.tsx | 199 ++++++++++++++++------------------ pages/ui/layout/layout.tsx | 95 +++++++++++----- pages/ui/layout/selection.tsx | 135 +++++++++++++++++++++++ pages/ui/layout/toolbar.tsx | 18 +++ 4 files changed, 315 insertions(+), 132 deletions(-) create mode 100644 pages/ui/layout/selection.tsx create mode 100644 pages/ui/layout/toolbar.tsx diff --git a/pages/test/test.tsx b/pages/test/test.tsx index 18ea5d2..0abaa3a 100644 --- a/pages/test/test.tsx +++ b/pages/test/test.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import * as vis from '../../resources/visjs/vis'; -import LocalNavbar from '../ui/navbar'; -import { Container, Row, Col, InputGroup, FormControl, ListGroup } from 'react-bootstrap'; +import Layout from '../ui/layout/layout'; export interface TestComponentProps { @@ -21,119 +20,111 @@ const sidebarStyle = { } const contentStyle = { - padding: '10px', + padding: '10px', } class TestComponent extends React.Component { - ref: React.RefObject; - - - componentDidMount() { - const data = { "edges": [{ "id": "event_000", "from": "state_000", "to": "state_001", "label": "Human Leaves", "color": { "color": "gray", "inherit": "none" }, "dashes": true }, { "id": "event_001", "from": "state_000", "to": "state_002", "label": "Stop (1)", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_002", "from": "state_001", "to": "state_000", "label": "Human enters", "color": { "color": "gray", "inherit": "none" }, "dashes": true }, { "id": "event_003", "from": "state_001", "to": "state_002", "label": "Stop (2)", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_004", "from": "state_001", "to": "state_003", "label": "Target Reached", "color": { "color": "gray", "inherit": "none" }, "dashes": true }, { "id": "event_005", "from": "state_003", "to": "state_002", "label": "Stop (3)", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_006", "from": "state_002", "to": "state_001", "label": "Move Axis to Target Position", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_007", "from": "state_002", "to": "state_004", "label": "TE ausschwenken", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_008", "from": "state_004", "to": "state_005", "label": "Synchronize Axis (2)", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_009", "from": "state_004", "to": "state_002", "label": "TE einschwenken", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_010", "from": "state_004", "to": "state_006", "label": "Zylinder ausfahren", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_011", "from": "state_005", "to": "state_007", "label": "Synchronization Lost", "color": { "color": "gray", "inherit": "none" }, "dashes": true }, { "id": "event_012", "from": "state_005", "to": "state_008", "label": "TE einschwenken", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_013", "from": "state_005", "to": "state_006", "label": "Unsynchronize Axis", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_014", "from": "state_005", "to": "state_009", "label": "Zylinder einfahren", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_015", "from": "state_007", "to": "state_004", "label": "Stop (4)", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_016", "from": "state_007", "to": "state_005", "label": "Synchronize Axis (1)", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_017", "from": "state_007", "to": "state_010", "label": "TE einschwenken", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_018", "from": "state_007", "to": "state_011", "label": "Zylinder ausfahren", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_019", "from": "state_010", "to": "state_002", "label": "Stop (4)", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_020", "from": "state_011", "to": "state_006", "label": "Stop (4)", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_021", "from": "state_011", "to": "state_012", "label": "TE einschwenken", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_022", "from": "state_011", "to": "state_007", "label": "Zylinder einfahren", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_023", "from": "state_012", "to": "state_013", "label": "Stop (4)", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_024", "from": "state_012", "to": "state_010", "label": "Zylinder einfahren", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_025", "from": "state_013", "to": "state_002", "label": "Zylinder einfahren", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_026", "from": "state_008", "to": "state_010", "label": "Synchronization Lost", "color": { "color": "gray", "inherit": "none" }, "dashes": true }, { "id": "event_027", "from": "state_008", "to": "state_013", "label": "Unsynchronize Axis", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_028", "from": "state_008", "to": "state_014", "label": "Zylinder einfahren", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_029", "from": "state_014", "to": "state_010", "label": "Synchronization Lost", "color": { "color": "gray", "inherit": "none" }, "dashes": true }, { "id": "event_030", "from": "state_014", "to": "state_002", "label": "Unsynchronize Axis", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_031", "from": "state_009", "to": "state_007", "label": "Synchronization Lost", "color": { "color": "gray", "inherit": "none" }, "dashes": true }, { "id": "event_032", "from": "state_009", "to": "state_014", "label": "TE einschwenken", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_033", "from": "state_009", "to": "state_004", "label": "Unsynchronize Axis", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_034", "from": "state_009", "to": "state_005", "label": "Zylinder ausfahren", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_035", "from": "state_006", "to": "state_013", "label": "TE einschwenken", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_036", "from": "state_006", "to": "state_004", "label": "Zylinder einfahren", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }], "nodes": [{ "id": "state_000", "label": "Axis is stopped (2)\nTransportposition\nZylinder eingefahren", "shape": "box", "color": "yellow", "level": 0 }, { "id": "state_001", "label": "Axis is moving to Target\nTransportposition\nZylinder eingefahren", "shape": "box", "color": "yellow", "level": 1 }, { "id": "state_002", "label": "Axis is stopped (1)\nTransportposition\nZylinder eingefahren", "shape": "box", "color": "yellow", "level": 1 }, { "id": "state_003", "label": "Axis at Target Position\nTransportposition\nZylinder eingefahren", "shape": "box", "color": "yellow", "level": 2 }, { "id": "state_004", "label": "Arbeitsposition\nAxis is stopped (1)\nZylinder eingefahren", "shape": "box", "color": "yellow", "level": 2 }, { "id": "state_005", "label": "Arbeitsposition\nAxis is moving sync\nZylinder ausgefahren", "shape": "box", "color": "yellow", "level": 3 }, { "id": "state_006", "label": "Arbeitsposition\nAxis is stopped (1)\nZylinder ausgefahren", "shape": "box", "color": "yellow", "level": 3 }, { "id": "state_007", "label": "Arbeitsposition\nAxis is moving unsync.\nZylinder eingefahren", "shape": "box", "color": "yellow", "level": 4 }, { "id": "state_008", "label": "Axis is moving sync\nTransportposition\nZylinder ausgefahren", "shape": "box", "color": "yellow", "level": 4 }, { "id": "state_009", "label": "Arbeitsposition\nAxis is moving sync\nZylinder eingefahren", "shape": "box", "color": "yellow", "level": 4 }, { "id": "state_010", "label": "Axis is moving unsync.\nTransportposition\nZylinder eingefahren", "shape": "box", "color": "yellow", "level": 5 }, { "id": "state_011", "label": "Arbeitsposition\nAxis is moving unsync.\nZylinder ausgefahren", "shape": "box", "color": "yellow", "level": 5 }, { "id": "state_012", "label": "Axis is moving unsync.\nTransportposition\nZylinder ausgefahren", "shape": "box", "color": "yellow", "level": 6 }, { "id": "state_013", "label": "Axis is stopped (1)\nTransportposition\nZylinder ausgefahren", "shape": "box", "color": "yellow", "level": 7 }, { "id": "state_014", "label": "Axis is moving sync\nTransportposition\nZylinder eingefahren", "shape": "box", "color": "yellow", "level": 5 }] } - const options = { - physics: { enabled: true }, - layout: { - hierarchical: { - enabled: true, - levelSeparation: 300, - nodeSpacing: 300, - treeSpacing: 500, - blockShifting: false, - edgeMinimization: false, - parentCentralization: false, - direction: 'UD', // UD, DU, LR, RL - sortMethod: 'directed' // hubsize, directed - } - }, - nodes: { - font: { - multi: 'md' - } - }, - edges: { - arrows: 'to', - smooth: true, - shadow: false, - font: { - background: 'white' - } - }, - autoResize: false, - height: this.ref.current.parentElement.offsetHeight.toString() + 'px' - } - console.log(options.height) - this.network = new vis.Network(this.ref.current, data, options); - this.network.on('click', e => console.log(e)) - - const _this = this; - function handleResize() { - _this.network.setSize(undefined,undefined); - _this.network.redraw(); - } - - // handleResize(); - - this.handleResize = handleResize; - window.addEventListener('resize', this.handleResize) - - } - - handleResize: any - - componentWillUnmount(){ - window.removeEventListener('resize', this.handleResize) - } - - network: any; + network: any; constructor(props) { super(props); - this.ref = React.createRef(); } render() { + const template: { + groupName: string, + items: { + label: string, + keywords: string, + item: string, + id: string | number, + }[] + }[] = [ + { + groupName: 'GRP 1', + items: [ + { + item: 'hello', + keywords: '1', + label: 'Hello', + id: 1, + }, + { + item: 'world', + keywords: '2', + label: 'world', + id: 2, + + }, { + item: '!', + keywords: '3', + label: '!', + id: 3, + } + + ] + }, + { + groupName: 'GRP 2', + items: [ + { + item: 'world', + keywords: '4', + label: 'world', + id: 4, + } + ] + } + ]; + return ( - <> - - - - - {/* A Search Field. */} - - - Search - - - -
-

Group1

-
- - Cras justo odio - Dapibus ac facilisis in - Morbi leo risus - Porta ac consectetur ac - Vestibulum at eros - -
-

Group 2

-
- - Cras justo odio - Dapibus ac facilisis in - Morbi leo risus - Porta ac consectetur ac - Vestibulum at eros - - - - {/* style={{height: '100%'}} */} -
- - - - ) + <> + { + const data = { "edges": [{ "id": "event_000", "from": "state_000", "to": "state_001", "label": "Human Leaves", "color": { "color": "gray", "inherit": "none" }, "dashes": true }, { "id": "event_001", "from": "state_000", "to": "state_002", "label": "Stop (1)", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_002", "from": "state_001", "to": "state_000", "label": "Human enters", "color": { "color": "gray", "inherit": "none" }, "dashes": true }, { "id": "event_003", "from": "state_001", "to": "state_002", "label": "Stop (2)", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_004", "from": "state_001", "to": "state_003", "label": "Target Reached", "color": { "color": "gray", "inherit": "none" }, "dashes": true }, { "id": "event_005", "from": "state_003", "to": "state_002", "label": "Stop (3)", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_006", "from": "state_002", "to": "state_001", "label": "Move Axis to Target Position", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_007", "from": "state_002", "to": "state_004", "label": "TE ausschwenken", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_008", "from": "state_004", "to": "state_005", "label": "Synchronize Axis (2)", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_009", "from": "state_004", "to": "state_002", "label": "TE einschwenken", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_010", "from": "state_004", "to": "state_006", "label": "Zylinder ausfahren", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_011", "from": "state_005", "to": "state_007", "label": "Synchronization Lost", "color": { "color": "gray", "inherit": "none" }, "dashes": true }, { "id": "event_012", "from": "state_005", "to": "state_008", "label": "TE einschwenken", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_013", "from": "state_005", "to": "state_006", "label": "Unsynchronize Axis", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_014", "from": "state_005", "to": "state_009", "label": "Zylinder einfahren", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_015", "from": "state_007", "to": "state_004", "label": "Stop (4)", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_016", "from": "state_007", "to": "state_005", "label": "Synchronize Axis (1)", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_017", "from": "state_007", "to": "state_010", "label": "TE einschwenken", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_018", "from": "state_007", "to": "state_011", "label": "Zylinder ausfahren", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_019", "from": "state_010", "to": "state_002", "label": "Stop (4)", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_020", "from": "state_011", "to": "state_006", "label": "Stop (4)", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_021", "from": "state_011", "to": "state_012", "label": "TE einschwenken", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_022", "from": "state_011", "to": "state_007", "label": "Zylinder einfahren", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_023", "from": "state_012", "to": "state_013", "label": "Stop (4)", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_024", "from": "state_012", "to": "state_010", "label": "Zylinder einfahren", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_025", "from": "state_013", "to": "state_002", "label": "Zylinder einfahren", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_026", "from": "state_008", "to": "state_010", "label": "Synchronization Lost", "color": { "color": "gray", "inherit": "none" }, "dashes": true }, { "id": "event_027", "from": "state_008", "to": "state_013", "label": "Unsynchronize Axis", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_028", "from": "state_008", "to": "state_014", "label": "Zylinder einfahren", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_029", "from": "state_014", "to": "state_010", "label": "Synchronization Lost", "color": { "color": "gray", "inherit": "none" }, "dashes": true }, { "id": "event_030", "from": "state_014", "to": "state_002", "label": "Unsynchronize Axis", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_031", "from": "state_009", "to": "state_007", "label": "Synchronization Lost", "color": { "color": "gray", "inherit": "none" }, "dashes": true }, { "id": "event_032", "from": "state_009", "to": "state_014", "label": "TE einschwenken", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_033", "from": "state_009", "to": "state_004", "label": "Unsynchronize Axis", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_034", "from": "state_009", "to": "state_005", "label": "Zylinder ausfahren", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_035", "from": "state_006", "to": "state_013", "label": "TE einschwenken", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_036", "from": "state_006", "to": "state_004", "label": "Zylinder einfahren", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }], "nodes": [{ "id": "state_000", "label": "Axis is stopped (2)\nTransportposition\nZylinder eingefahren", "shape": "box", "color": "yellow", "level": 0 }, { "id": "state_001", "label": "Axis is moving to Target\nTransportposition\nZylinder eingefahren", "shape": "box", "color": "yellow", "level": 1 }, { "id": "state_002", "label": "Axis is stopped (1)\nTransportposition\nZylinder eingefahren", "shape": "box", "color": "yellow", "level": 1 }, { "id": "state_003", "label": "Axis at Target Position\nTransportposition\nZylinder eingefahren", "shape": "box", "color": "yellow", "level": 2 }, { "id": "state_004", "label": "Arbeitsposition\nAxis is stopped (1)\nZylinder eingefahren", "shape": "box", "color": "yellow", "level": 2 }, { "id": "state_005", "label": "Arbeitsposition\nAxis is moving sync\nZylinder ausgefahren", "shape": "box", "color": "yellow", "level": 3 }, { "id": "state_006", "label": "Arbeitsposition\nAxis is stopped (1)\nZylinder ausgefahren", "shape": "box", "color": "yellow", "level": 3 }, { "id": "state_007", "label": "Arbeitsposition\nAxis is moving unsync.\nZylinder eingefahren", "shape": "box", "color": "yellow", "level": 4 }, { "id": "state_008", "label": "Axis is moving sync\nTransportposition\nZylinder ausgefahren", "shape": "box", "color": "yellow", "level": 4 }, { "id": "state_009", "label": "Arbeitsposition\nAxis is moving sync\nZylinder eingefahren", "shape": "box", "color": "yellow", "level": 4 }, { "id": "state_010", "label": "Axis is moving unsync.\nTransportposition\nZylinder eingefahren", "shape": "box", "color": "yellow", "level": 5 }, { "id": "state_011", "label": "Arbeitsposition\nAxis is moving unsync.\nZylinder ausgefahren", "shape": "box", "color": "yellow", "level": 5 }, { "id": "state_012", "label": "Axis is moving unsync.\nTransportposition\nZylinder ausgefahren", "shape": "box", "color": "yellow", "level": 6 }, { "id": "state_013", "label": "Axis is stopped (1)\nTransportposition\nZylinder ausgefahren", "shape": "box", "color": "yellow", "level": 7 }, { "id": "state_014", "label": "Axis is moving sync\nTransportposition\nZylinder eingefahren", "shape": "box", "color": "yellow", "level": 5 }] } + const options = { + physics: { enabled: true }, + layout: { + hierarchical: { + enabled: true, + levelSeparation: 300, + nodeSpacing: 300, + treeSpacing: 500, + blockShifting: false, + edgeMinimization: false, + parentCentralization: false, + direction: 'UD', // UD, DU, LR, RL + sortMethod: 'directed' // hubsize, directed + } + }, + nodes: { + font: { + multi: 'md' + } + }, + edges: { + arrows: 'to', + smooth: true, + shadow: false, + font: { + background: 'white' + } + }, + autoResize: false, + height: ref.current.parentElement.offsetHeight.toString() + 'px' + } + this.network = new vis.Network(ref.current, data, options); + this.network.on('click', e => console.log(e)) + } + } onResize={() => { + if (this.network) { + this.network.setSize(undefined, undefined); + this.network.redraw(); + } + } + }> + + ) } } diff --git a/pages/ui/layout/layout.tsx b/pages/ui/layout/layout.tsx index 9aed087..a71d624 100644 --- a/pages/ui/layout/layout.tsx +++ b/pages/ui/layout/layout.tsx @@ -7,8 +7,9 @@ */ import React from 'react'; +import { Col, Container, Row } from 'react-bootstrap'; import LocalNavbar from '../navbar'; -import { ListGroup, Container, Row, Col, InputGroup, FormControl } from 'react-bootstrap'; +import Selection, { SelecitonProps } from './selection'; const mainStyle = { minHeight: '90vh', @@ -20,32 +21,70 @@ const sidebarStyle = { } const contentStyle = { - padding: '10px', + padding: '10px', } -export default () => ( - <> - - - - - {/* A Search Field. */} - - - Search - - - - - Cras justo odio - Dapibus ac facilisis in - Morbi leo risus - Porta ac consectetur ac - Vestibulum at eros - - - Content - - - -); +export interface LayoutProps extends SelecitonProps { + onResize?: () => void; + onMount?: (_ref: React.RefObject) => void; + onUnmount?: () => void; +} + +export interface LayoutState { +} + +class Layout extends React.Component, LayoutState> { + + protected _ref: React.RefObject; + protected _handleResize: () => void; + + componentDidMount() { + const _this = this; + + function handleResize() { + if (typeof _this.props.onResize === 'function') { + _this.props.onResize(); + } + } + + if (typeof this.props.onMount === 'function') { + this.props.onMount(this._ref); + } + + this._handleResize = handleResize; + window.addEventListener('resize', this._handleResize); + } + + componentWillUnmount() { + window.removeEventListener('resize', this._handleResize); + + // Call the unmount + if (typeof this.props.onUnmount === 'function') { + this.props.onUnmount(); + } + } + + constructor(props) { + super(props); + this._ref = React.createRef(); + } + + public render() { + return (<> + + + + + + + + {/* style={{height: '100%'}} */} +
+ + + + ); + } +} + +export default Layout; \ No newline at end of file diff --git a/pages/ui/layout/selection.tsx b/pages/ui/layout/selection.tsx new file mode 100644 index 0000000..b08102f --- /dev/null +++ b/pages/ui/layout/selection.tsx @@ -0,0 +1,135 @@ +import React from 'react'; +import { FormControl, InputGroup, ListGroup } from 'react-bootstrap'; +import { deepClone } from '../../../lib/helpers/objectMethods'; + +export interface SelecitonProps { + selection: { + groupName: string, + items: SelectionItem[] + }[], + onSelect?: (item: T) => void; +} + +export interface SelectionItem { + label: string, + keywords: string, + item: T, + id: string | number, +} + +export interface LayoutState { + selected: string | number; + search: string; +} + +class Selection extends React.Component, LayoutState> { + + constructor(props) { + super(props); + this.state = { + search: '', + selected: null + } + } + + /** + * Function to Filter the Selection. + * @param search The Search Term. + */ + protected _filter(search: string) { + this.setState({ + search: search.toLocaleLowerCase(), + selected: this.state.selected + }); + } + + /** + * Function used to Select an item + * @param item which will be selected + */ + protected _select(item: SelectionItem) { + this.setState({ + search: this.state.search, + selected: item.id + }); + + if (typeof this.props.onSelect === "function") { + this.props.onSelect(item.item); + } + } + + public render() { + const _this = this; + + // Filter only Valid items. + // Therefore iterate over the Groups and + // Filter the Items with the Search String + // and there Labels / Keywords. + // Afterwards filter the groups and remove + // Empty Groups + const items = deepClone(this.props).selection.map(item => { + // Filter the Items, that match the Selection + item.items = item.items.filter(value => + // Filter the Keywords + value.keywords.toLowerCase().includes(_this.state.search) || + // Filter the Lable. + value.label.toLowerCase().includes(_this.state.search) + ); + // Return the Item + return item; + }).filter( + item => + // Filter the Element by the lenght of the contained elements. + item.items.length > 0 + ); + + let idx = 0; + return (<> + {/* A Search Field. */} + + + Search + + { + _this._filter(event.currentTarget.value); + }} /> + + { + items.length > 0 ? + items.map(item => { + idx++; + return ( +
+
+

{item.groupName}

+
+ + {item.items.map(template => { + // Raise the ID + idx++; + // Store the Item Index + const idxOfItem = idx; + + // Based on the selected Item assign the Color + // dark = selected + // light = unselected + const variant = template.id === _this.state.selected ? "dark" : "light"; + + // Return the Template variant={variant} + return ( + { + _this._select(template) + }}>{template.label} + ); + })} + +
+ ); + }) : + Nothing Found + } + ); + } +} + +export default Selection; \ No newline at end of file diff --git a/pages/ui/layout/toolbar.tsx b/pages/ui/layout/toolbar.tsx new file mode 100644 index 0000000..d1e44c9 --- /dev/null +++ b/pages/ui/layout/toolbar.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; + +export interface ToolbarProps { + +} + +export interface ToolbarState { + +} + +class Toolbar extends React.Component { + + render() { + return ( ); + } +} + +export default Toolbar; \ No newline at end of file