Merge pull request DHTMLX#10 from DHTMLX/fix/DHX-1538

Fix/dhx 1538

Author: Sorokin-Oleg

public/static/dataview.json

@@ -2,73 +2,73 @@
  {
  "title": "Izzy",
  "short": "This is our most beloved kingfisher bird Izzy.",
- "full": "This is our most beloved kingfisher bird Izzy, who adores eating fish and even hunts on its own. Izzy and Ben have the most intimate relationship. Izzy often sits on the head of Ben during a walk",
+ "value": "This is our most beloved kingfisher bird Izzy, who adores eating fish and even hunts on its own. Izzy and Ben have the most intimate relationship. Izzy often sits on the head of Ben during a walk",
  "img": "images/02.jpg"
  },
  {
  "title": "Momo",
  "short": "Momo is a 25-year-old elephant with a big heart.",
- "full": "Momo is a 25-year-old elephant with a big heart. Momo came from another zoo in New Zealand but soon got accustomed to the new surroundings. Despite being grown-up, Momo still loves messing around.",
+ "value": "Momo is a 25-year-old elephant with a big heart. Momo came from another zoo in New Zealand but soon got accustomed to the new surroundings. Despite being grown-up, Momo still loves messing around.",
  "img": "images/03.jpg"
  },
  {
  "title": "Kevin",
  "short": "And here is Kevin, our old-timer who saw how everything started here.",
- "full": "And here is Kevin, our old-timer who saw how everything started here. Kevin loves attention and being taken pictures of, especially while chewing delicious leaves.",
+ "value": "And here is Kevin, our old-timer who saw how everything started here. Kevin loves attention and being taken pictures of, especially while chewing delicious leaves.",
  "img": "images/04.jpg"
  },
  {
  "title": "Lucy",
  "short": "Lucy is a beautiful Siamese cat.",
- "full": "Lucy is a beautiful Siamese cat. She considers herself the Queen of the zoo and competes with Ben for the territory. However, you can often find her sleeping on Ben’s back.",
+ "value": "Lucy is a beautiful Siamese cat. She considers herself the Queen of the zoo and competes with Ben for the territory. However, you can often find her sleeping on Ben’s back.",
  "img": "images/05.jpg"
  },
  {
  "title": "Christy",
  "short": "Christy is the most extravert bird you’ve ever seen.",
- "full": "Christy is the most extravert bird you’ve ever seen. She never stops murmuring, mumbling, and chattering. Sometimes she’s allowed to fly all over the zoo to spend all her energy and communicate with others.",
+ "value": "Christy is the most extravert bird you’ve ever seen. She never stops murmuring, mumbling, and chattering. Sometimes she’s allowed to fly all over the zoo to spend all her energy and communicate with others.",
  "img": "images/06.jpg"
  },
  {
  "title": "Philip",
  "short": "Philip is a Chinese panda, temporarily living with us.",
- "full": "Philip is a Chinese panda, temporarily living with us. In a couple of months he’ll be transported to another zoo in Australia, where there is a big panda family waiting for him.",
+ "value": "Philip is a Chinese panda, temporarily living with us. In a couple of months he’ll be transported to another zoo in Australia, where there is a big panda family waiting for him.",
  "img": "images/07.jpg"
  },
  {
  "title": "Clark",
  "short": "Clark is one of the dogs of our zookeeper.",
- "full": "Clark is one of the dogs of our zookeeper. He loves running around and having fun with everyone.",
+ "value": "Clark is one of the dogs of our zookeeper. He loves running around and having fun with everyone.",
  "img": "images/08.jpg"
  },
  {
  "title": "Ed",
  "short": "Ed has the sharpest eye and always knows what’s happening around.",
- "full": "Ed has the sharpest eye and always knows what’s happening around. He is a good friend of Christy, when he’s in a positive frame of mind.",
+ "value": "Ed has the sharpest eye and always knows what’s happening around. He is a good friend of Christy, when he’s in a positive frame of mind.",
  "img": "images/09.jpg"
  },
  {
  "title": "Max",
  "short": "Max is a tiger with a very calm and wise character.",
- "full": "Max is a tiger with a very calm and wise character. I guess he’s pondering over some universal wisdom secrets. However, he adores rabbits, chicken, and, surprisingly, carrots!",
+ "value": "Max is a tiger with a very calm and wise character. I guess he’s pondering over some universal wisdom secrets. However, he adores rabbits, chicken, and, surprisingly, carrots!",
  "img": "images/10.jpg"
  },
  {
  "title": "Michelle",
  "short": "This is our couch potato raccoon Michelle.",
- "full": "This is our couch potato raccoon Michelle. She prefers to stay in her cozy bed all day long and comes out only at night to have a stroll around the Zoo.",
+ "value": "This is our couch potato raccoon Michelle. She prefers to stay in her cozy bed all day long and comes out only at night to have a stroll around the Zoo.",
  "img": "images/11.jpg"
  },
  {
  "title": "Shelly",
  "short": "Shelly is the dog of my parents who lives with us when they’re travelling.",
- "full": "Shelly is the dog of my parents who lives with us when they’re travelling. She’s a bit scared of some of the zoo’s inhabitants, but has an intimate relationship with Steven.",
+ "value": "Shelly is the dog of my parents who lives with us when they’re travelling. She’s a bit scared of some of the zoo’s inhabitants, but has an intimate relationship with Steven.",
  "img": "images/12.jpg"
  },
  {
  "title": "Steven",
  "short": "Steven is a 6-year old fox, whom we found in the forest with a broken leg.",
- "full": "Steven is a 6-year old fox, whom we found in the forest with a broken leg. Luckily, Steven soon recovered his strength, but we became so attached to him that decided to leave him with other animals.",
+ "value": "Steven is a 6-year old fox, whom we found in the forest with a broken leg. Luckily, Steven soon recovered his strength, but we became so attached to him that decided to leave him with other animals.",
  "img": "images/13.jpg"
  }
 ]

src/About.js

@@ -4,7 +4,6 @@ export default class About extends Component {
 componentDidMount() {
 this.props.handleToolbarNavItems([]);
 }
-
 render() {
 return (
 <div style={{textAlign: "center"}}>

src/App.css

@@ -1,7 +1,6 @@
 .logo-button {
  text-align: center;
 }
-
 .logo-button button {
  cursor: pointer;
  background: transparent;
@@ -10,17 +9,14 @@
  width: 100%;
  padding: 24px;
 }
-
 .logo-button img {
  width: 100%;
  height: auto;
 }
-
 .button:disabled {
  pointer-events: none;
  opacity: 0.6;
 }
-
 .trial-button button, .button {
  flex: 0 0 auto;
  -webkit-box-sizing: border-box;
@@ -45,41 +41,35 @@
  text-decoration: none;
  transition: background 0.2s ease-in-out;
 }
-
 .trial-button button:hover, .button:hover {
  background: #027abc;
 }
-
 .trial-button button:focus, .button:focus {
  outline: none;
 }
-
 .button.button--bordered {
  background: #fff;
  color: #027abc;
  border: 2px solid #027abc;
 }
-
 .hgroup {
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
- padding: 24px 24px;
+ padding: 24px;
  background-color: #fff;
  color: rgba(0, 0, 0, .7);
  transition: background-color 0.2s ease;
- min-height: 90vh;
+ min-height: calc(100vh - 60px);
 }
-
 .hgroup a {
  cursor: pointer;
  text-decoration: none;
  display: block;
  color: #0288D1;
  margin-bottom: 12px;
 }
-
 .hgroup .anchor {
  display: none;
  width: 22px;
@@ -92,32 +82,26 @@
  transition: opacity 0.2s ease-in;
  transform: translateY(-50%);
 }
-
 .hgroup p {
  margin: 0;
  margin-bottom: 24px;
 }
-
 .hgroup h3:not([class*="dhx_"]) {
  margin-top: 0;
  padding: 0 30px;
  position: relative;
  display: inline-block;
 }
-
 .hgroup h3:hover .anchor {
  opacity: 1;
 }
-
 .dhx_navbar-title.dhx_navbar-title--toolbar {
  font-size: 18px;
  margin-right: 12px !important;
 }
-
 .active {
  background-color: rgba(0, 0, 0, .07);
 }
-
 .dock-button button {
  cursor: pointer;
  border: none;
@@ -127,19 +111,15 @@
  color: #0288D1;
  background-color: #fff;
 }
-
 .dock-button button:focus {
  outline: none;
 }
-
 .data-form-buttons button {
  margin: 20px;
 }
-
 .button:not(:last-child) {
  margin-right: 20px;
 }
-
 main {
  width: 100%;
  height: calc(100vh - 57px);
@@ -148,7 +128,6 @@ main {
  flex-direction: column;
  scroll-snap-type: y mandatory;
 }
-
 main > section {
  scroll-snap-align: start;
 }

src/App.js

@@ -1,5 +1,5 @@
-import React, {PureComponent} from "react";
-import {Route, HashRouter, Switch} from "react-router-dom";
+import React, { PureComponent } from "react";
+import { Route, HashRouter, Switch } from "react-router-dom";
 import smoothscroll from "smoothscroll-polyfill";
 import "./App.css";
 import "dhx-suite/codebase/suite.min.css";
@@ -25,9 +25,7 @@ import FormPage from "./form/FormPage";
 import TabbarPage from "./tabbar/TabbarPage";
 import ComboboxPage from "./combobox/ComboboxPage";
 import TreePage from "./tree/TreePage";
-// import TreegridPage from './treegrid/TreegridPage';
 import ChartPage from "./chart/ChartPage";
-// import LayoutPage from './layout/LayoutPage';
 import WindowPage from "./window/WindowPage";
 import MessagePage from "./message/MessagePage";
 import PopupPage from "./popup/PopupPage";
@@ -43,7 +41,6 @@ class App extends PureComponent {
 activeExampleId: ""
 };
 }
-
 componentDidUpdate() {
 let activeHrefPart = window.location.href.split("/").pop();
 let activeHrefPartCapitalize = activeHrefPart.charAt(0).toUpperCase() + activeHrefPart.slice(1);
@@ -53,7 +50,6 @@ class App extends PureComponent {
 });
 }
 }
-
 setActiveWidget(activeWidget) {
 this.setState({
 activeWidget: activeWidget.charAt(0).toUpperCase() + activeWidget.slice(1)
@@ -64,15 +60,13 @@ class App extends PureComponent {
 inline: "center"
 });
 }
-
 setToolBarNavItems(array) {
 if (!isEqual(array, this.state.toolbarNav)) {
 this.setState({
 toolbarNav: array
 });
 }
 }
-
 setActiveExapmle(id) {
 let elHash = "#" + id;
 const el = this.el.querySelector(elHash);
@@ -83,15 +77,14 @@ class App extends PureComponent {
 inline: "center"
 });
 }
-
 render() {
 return (
 <HashRouter hashType={"slash"}>
 <div className='app-screen'
  style={{minHeight: "100vh", maxHeight: "100vh", display: "flex", overflow: "hidden"}}>
 <Sidebar activeWidget={this.state.activeWidget}
  handleActiveWidgetChange={(activeWidget) => this.setActiveWidget(activeWidget)}/>
-<div className="app-screen__inner" style={{flexBasis: "auto", flexGrow: 1}}>
+<div className="app-screen__inner" style={{width: "calc(100% - 200px)"}}>
 <Toolbar
 // ref={(el) => this.toolbar = el}
 activeWidget={this.state.activeWidget}
@@ -100,7 +93,6 @@ class App extends PureComponent {
 toolbarNav={this.state.toolbarNav}/>
 <div className='app-content'
  ref={(el) => this.el = el}>
-
 <Switch>
 <Route path={`/calendar`} component={() => (
 <CalendarPage
@@ -255,7 +247,6 @@ class App extends PureComponent {
 )}
 />
 </Switch>
-
 </div>
 </div>
 </div>
@@ -264,5 +255,4 @@ class App extends PureComponent {
 }
 }
 
-export default App;
-
+export default App;

src/Dataview.js

@@ -1,6 +1,6 @@
-import React, {PureComponent} from "react";
-import {DataView as DataviewDHX} from "dhx-suite";
-import {withRouter} from "react-router-dom";
+import React, { PureComponent } from "react";
+import { DataView as DataviewDHX } from "dhx-suite";
+import { withRouter } from "react-router-dom";
 
 import "./dataview.css";
 
@@ -14,7 +14,7 @@ class Dataview extends PureComponent {
 <h3 class="app-card__header">${item.value}</h3>
 <img class="app-card__image" src=${process.env.PUBLIC_URL}/static/images/icons/${item.id.split("-")[0]}.svg alt="${item.id.split("-")[0]}"/>
 </div>
-`,
+`,
 gap: 20,
 data: [
 {
@@ -92,10 +92,6 @@ class Dataview extends PureComponent {
 {
 value: "Popup",
 id: "popup-link"
-},
-{
-value: "Pivot",
-id: "pivot-link"
 }
 ]
 });
@@ -105,16 +101,12 @@ class Dataview extends PureComponent {
 this.props.handleActiveWidgetChange(widgetName);
 });
 }
-
 componentWillUnmount() {
-this.dataview.destructor();
+this.dataview && this.dataview.destructor();
 }
-
 render() {
 return (
-<div style={{maxWidth: "800px", margin: "auto", flex: "1 0 auto"}} ref={el => this.el = el}>
-
-</div>
+<div style={{maxWidth: "800px", margin: "auto", flex: "1 0 auto"}} ref={el => this.el = el}></div>
 );
 }
 }