[dev] update suite

Author: Sorokin-Oleg

src/dataview/DataviewEvents.js

@@ -24,12 +24,33 @@ class DataviewEvents extends Component {
 template: template,
 itemsInRow: 4,
 gap: 10,
+multiselection: true,
+dragMode: "both",
 });
 this.dataview && this.dataview.data.load(`${process.env.PUBLIC_URL}/static/dataview.json`);
 
-this.dataview.events.on("click", id => this.setState({ event: "click", id: id }));
-this.dataview.events.on("focuschange", id => this.setState({ event: "focuschange", id: id }));
-this.dataview.events.on("doubleclick", id => this.setState({ event: "doubleclick", id: id }));
+this.dataview.events.on("click", id => this.setState({ event: "click", id }));
+this.dataview.events.on("doubleclick", id => this.setState({ event: "doubleclick", id }));
+this.dataview.events.on("focuschange", id => this.setState({ event: "focuschange", id }));
+this.dataview.events.on("beforeDrag", () => this.setState({ event: "beforeDrag" }));
+this.dataview.events.on("beforeDrop", () => this.setState({ event: "beforeDrop" }));
+this.dataview.events.on("dragStart", () => this.setState({ event: "dragStart" }));
+this.dataview.events.on("afterDrag", () => this.setState({ event: "afterDrag" }));
+this.dataview.events.on("canDrop", () => this.setState({ event: "canDrop" }));
+this.dataview.events.on("cancelDrop", () => this.setState({ event: "cancelDrop" }));
+this.dataview.events.on("afterDrop", () => this.setState({ event: "afterDrop" }));
+this.dataview.events.on("dragOut", () => this.setState({ event: "dragOut" }));
+this.dataview.events.on("dragIn", () => this.setState({ event: "dragIn" }));
+this.dataview.events.on("beforeSelect", () => this.setState({ event: "beforeSelect" }));
+this.dataview.events.on("afterSelect", () => this.setState({ event: "afterSelect" }));
+this.dataview.events.on("beforeUnSelect", () => this.setState({ event: "beforeUnSelect" }));
+this.dataview.events.on("afterUnSelect", () => this.setState({ event: "afterUnSelect" }));
+this.dataview.events.on("beforeEditStart", () => this.setState({ event: "beforeEditStart" }));
+this.dataview.events.on("afterEditStart", () => this.setState({ event: "afterEditStart" }));
+this.dataview.events.on("beforeEditEnd", () => this.setState({ event: "beforeEditEnd" }));
+this.dataview.events.on("afterEditEnd", () => this.setState({ event: "afterEditEnd" }));
+this.dataview.events.on("itemRightClick", () => this.setState({ event: "itemRightClick" }));
+this.dataview.events.on("itemMouseOver", () => this.setState({ event: "itemMouseOver" }));
 }
 componentWillUnmount() {
 this.dataview && this.dataview.destructor();

src/form/Form.js

@@ -1,14 +1,13 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { Form as FormDHX } from "dhx-suite";
-import "dhx-suite/codebase/suite.min.css";
+
 import "@mdi/font/css/materialdesignicons.min.css";
 
 class Form extends Component {
 componentDidMount() {
 this.form = new FormDHX(this.el, {
 css: "dhx_widget--bordered",
-gravity: false,
 width: 400,
 rows: [
 {
@@ -30,14 +29,13 @@ class Form extends Component {
 },
 {
 type: "checkbox",
-label: "I agree",
+text: "I agree",
 name: "agree",
-labelPosition: "right",
 value: "checkboxvalue",
 },
 {
 type: "button",
-value: "Send",
+text: "Send",
 size: "medium",
 view: "flat",
 submit: true,
@@ -56,14 +54,13 @@ class Form extends Component {
 
 Form.propTypes = {
 css: PropTypes.string,
-width: PropTypes.string,
-height: PropTypes.string,
+width: PropTypes.string || PropTypes.number,
+height: PropTypes.string || PropTypes.number,
 rows: PropTypes.array,
 cols: PropTypes.array,
 title: PropTypes.string,
 align: PropTypes.oneOf(["start", "center", "end", "between", "around", "evenly"]),
-padding: PropTypes.string,
-gravity: PropTypes.bool,
+padding: PropTypes.string || PropTypes.number,
 disabled: PropTypes.bool,
 };
 

src/form/FormCdn.js

@@ -16,7 +16,6 @@ class FormCDN extends Component {
 /* global dhx */
 this.form = new dhx.Form(this.el, {
 css: "dhx_widget--bordered",
-gravity: false,
 width: 400,
 rows: [
 {
@@ -38,14 +37,13 @@ class FormCDN extends Component {
 },
 {
 type: "checkbox",
-label: "I agree",
+text: "I agree",
 name: "agree",
-labelPosition: "right",
 value: "checkboxvalue",
 },
 {
 type: "button",
-value: "Send",
+text: "Send",
 size: "medium",
 view: "flat",
 submit: true,
@@ -68,14 +66,13 @@ class FormCDN extends Component {
 
 FormCDN.propTypes = {
 css: PropTypes.string,
-width: PropTypes.string,
-height: PropTypes.string,
+width: PropTypes.string || PropTypes.number,
+height: PropTypes.string || PropTypes.number,
 rows: PropTypes.array,
 cols: PropTypes.array,
 title: PropTypes.string,
 align: PropTypes.oneOf(["start", "center", "end", "between", "around", "evenly"]),
-padding: PropTypes.string,
-gravity: PropTypes.bool,
+padding: PropTypes.string || PropTypes.number,
 disabled: PropTypes.bool,
 };
 

src/form/FormConfigured.js

@@ -8,7 +8,6 @@ class FormConfigured extends Component {
 this.form = new FormDHX(this.el, {
 css: "dhx_widget--bordered",
 title: "DHX Form",
-gravity: false,
 width: 400,
 rows: [
 {
@@ -37,15 +36,14 @@ class FormConfigured extends Component {
 },
 {
 type: "checkbox",
-label: "I agree",
+text: "I agree",
 name: "agree",
-labelInline: true,
 value: "checkboxvalue",
 required: true,
 },
 {
 type: "button",
-value: "Send",
+text: "Send",
 size: "medium",
 view: "flat",
 submit: true,
@@ -64,14 +62,13 @@ class FormConfigured extends Component {
 
 FormConfigured.propTypes = {
 css: PropTypes.string,
-width: PropTypes.string,
-height: PropTypes.string,
+width: PropTypes.string || PropTypes.number,
+height: PropTypes.string || PropTypes.number,
 rows: PropTypes.array,
 cols: PropTypes.array,
 title: PropTypes.string,
 align: PropTypes.oneOf(["start", "center", "end", "between", "around", "evenly"]),
-padding: PropTypes.string,
-gravity: PropTypes.bool,
+padding: PropTypes.string || PropTypes.number,
 disabled: PropTypes.bool,
 };
 

src/form/FormEvents.js

@@ -8,14 +8,13 @@ class FormEvents extends Component {
 super(props);
 this.state = {
 event: "",
-id: "",
+name: "",
 };
 }
 componentDidMount() {
 this.form = new FormDHX(this.el, {
 css: "dhx_widget--bordered",
 title: "DHX Form",
-gravity: false,
 width: 400,
 rows: [
 {
@@ -24,51 +23,53 @@ class FormEvents extends Component {
 icon: "dxi-magnify",
 placeholder: "John Doe",
 required: true,
-id: "name",
 name: "name",
 },
 {
 type: "datepicker",
 label: "Date",
 required: true,
-id: "date",
 name: "date",
 },
 {
 type: "timepicker",
 controls: "true",
 label: "Time",
 required: true,
-id: "time",
 name: "time",
 },
 {
 type: "colorpicker",
 label: "Color",
 required: true,
-id: "color",
 name: "color",
 },
 {
 type: "simpleVault",
 required: true,
 label: "Files",
-id: "simplevault",
 name: "simplevault",
 },
 {
 type: "button",
-value: "Send",
+text: "Send",
 size: "medium",
 view: "flat",
 submit: true,
 color: "primary",
 },
 ],
 });
-this.form.events.on("change", id => this.setState({ event: "change", id: id }));
-this.form.events.on("buttonclick", id => this.setState({ event: "buttonclick", id: id }));
-this.form.events.on("validationfail", id => this.setState({ event: "validationfail", id: id }));
+this.form.events.on("change", name => this.setState({ event: "change", name }));
+this.form.events.on("click", name => this.setState({ event: "click", name }));
+this.form.events.on("beforeHide", name => this.setState({ event: "beforeHide", name }));
+this.form.events.on("afterHide", name => this.setState({ event: "afterHide", name }));
+this.form.events.on("beforeShow", name => this.setState({ event: "beforeShow", name }));
+this.form.events.on("afterShow", name => this.setState({ event: "afterShow", name }));
+this.form.events.on("beforeValidate", name => this.setState({ event: "beforeValidate", name }));
+this.form.events.on("afterValidate", name => this.setState({ event: "afterValidate", name }));
+this.form.events.on("beforeChangeProperties", name => this.setState({ event: "beforeChangeProperties", name }));
+this.form.events.on("afterChangeProperties", name => this.setState({ event: "afterChangeProperties", name }));
 this.form.events.on("afterSend", () => this.setState({ event: "afterSend" }));
 this.form.events.on("beforeSend", () => this.setState({ event: "beforeSend" }));
 }
@@ -92,7 +93,7 @@ class FormEvents extends Component {
 {this.state.event ? `Event: ${this.state.event}` : "Click to widget"}
 </button>
 <button className="button button--bordered">
-Item: {this.state.id ? this.state.id : ""}
+Item: {this.state.name ? this.state.name : ""}
 </button>
 </div>
 </div>
@@ -102,14 +103,13 @@ class FormEvents extends Component {
 
 FormEvents.propTypes = {
 css: PropTypes.string,
-width: PropTypes.string,
-height: PropTypes.string,
+width: PropTypes.string || PropTypes.number,
+height: PropTypes.string || PropTypes.number,
 rows: PropTypes.array,
 cols: PropTypes.array,
 title: PropTypes.string,
 align: PropTypes.oneOf(["start", "center", "end", "between", "around", "evenly"]),
-padding: PropTypes.string,
-gravity: PropTypes.bool,
+padding: PropTypes.string || PropTypes.number,
 disabled: PropTypes.bool,
 };
 

src/form/FormProps.js

@@ -5,14 +5,13 @@ import "dhx-suite/codebase/suite.min.css";
 
 class Form extends Component {
 componentDidMount() {
-const { css, rows, gravity, padding, title, width } = this.props;
+const { css, rows, padding, title, width } = this.props;
 this.form = new FormDHX(this.el, {
-css: css,
-gravity: gravity,
-padding: padding,
-rows: rows,
-title: title,
-width: width,
+css,
+padding,
+rows,
+title,
+width,
 });
 }
 componentWillUnmount() {
@@ -52,15 +51,14 @@ class FormProps extends Component {
 },
 {
 type: "checkbox",
-label: "I agree",
+text: "I agree",
 name: "agree",
-labelInline: true,
 value: "checkboxvalue",
 required: true,
 },
 {
 type: "button",
-value: "Send",
+text: "Send",
 size: "medium",
 view: "flat",
 submit: true,
@@ -72,7 +70,6 @@ class FormProps extends Component {
 css={"dhx_widget--bordered"}
 width={400}
 rows={rows}
-gravity={false}
 padding={20}
 title={"DHX Form"}
 />
@@ -82,14 +79,13 @@ class FormProps extends Component {
 
 FormProps.propTypes = {
 css: PropTypes.string,
-width: PropTypes.string,
-height: PropTypes.string,
+width: PropTypes.string || PropTypes.number,
+height: PropTypes.string || PropTypes.number,
 rows: PropTypes.array,
 cols: PropTypes.array,
 title: PropTypes.string,
 align: PropTypes.oneOf(["start", "center", "end", "between", "around", "evenly"]),
-padding: PropTypes.string,
-gravity: PropTypes.bool,
+padding: PropTypes.string || PropTypes.number,
 disabled: PropTypes.bool,
 };
 

src/grid/GridData.js

@@ -14,15 +14,16 @@ class Grid extends Component {
 multiselection,
 selection,
 } = this.props;
+
 this.grid = new GridDHX(this.el, {
-rowHeight: rowHeight,
-adjust: adjust,
-autoWidth: autoWidth,
-columns: columns,
-data: data,
-editable: editable,
-multiselection: multiselection,
-selection: selection,
+rowHeight,
+adjust,
+autoWidth,
+columns,
+data,
+editable,
+multiselection,
+selection,
 });
 }
 componentWillUnmount() {