feat(react-grid-bootstrap4): support the bootstrap4 theme (DevExpress…

…#681)

packages/dx-react-demos/package.json

@@ -48,6 +48,7 @@
     "@devexpress/dx-react-core": "1.1.0-beta.1",
     "@devexpress/dx-react-grid": "1.1.0-beta.1",
     "@devexpress/dx-react-grid-bootstrap3": "1.1.0-beta.1",
+    "@devexpress/dx-react-grid-bootstrap4": "1.1.0-beta.1",
     "@devexpress/dx-react-grid-material-ui": "1.1.0-beta.1",
     "@types/react": "^16.0.39",
     "@types/react-dom": "^16.0.4",
@@ -58,6 +59,7 @@
     "prop-types": "^15.6.1",
     "react": "^16.2.0",
     "react-bootstrap": "^0.32.1",
+    "reactstrap": "5.0.0-beta",
     "react-dom": "^16.2.0",
     "react-frame-component": "^2.0.2",
     "react-redux": "^5.0.7",

packages/dx-react-demos/src/demo-sources/grid-column-chooser/disable-toggling-column-visibility.jsxt

@@ -1,4 +1,4 @@
-import React from 'react';<%&additionalImports%>
+import * as React from 'react';<%&additionalImports%>
 import {
   Grid,
   Table,

packages/dx-react-demos/src/demo-sources/grid-data-types/bootstrap4/editors.jsx

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import {
+  DataTypeProvider,
+  EditingState,
+} from '@devexpress/dx-react-grid';
+import {
+  Grid,
+  Table,
+  TableHeaderRow,
+  TableEditRow,
+  TableEditColumn,
+} from '@devexpress/dx-react-grid-bootstrap4';
+
+import {
+  generateRows,
+  globalSalesValues,
+} from '../../../demo-data/generator';
+
+const getRowId = row => row.id;
+
+const BooleanFormatter = ({ value }) =>
+  <span className="badge badge-secondary">{value ? 'Yes' : 'No'}</span>;
+
+const BooleanEditor = ({ value, onValueChange }) => (
+  <select
+    className="form-control"
+    value={value}
+    onChange={e => onValueChange(e.target.value === 'true')}
+  >
+    <option value={false}>No</option>
+    <option value>Yes</option>
+  </select>
+);
+
+const BooleanTypeProvider = props => (
+  <DataTypeProvider
+    formatterComponent={BooleanFormatter}
+    editorComponent={BooleanEditor}
+    {...props}
+  />
+);
+
+export default class Demo extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      columns: [
+        { name: 'customer', title: 'Customer' },
+        { name: 'product', title: 'Product' },
+        { name: 'units', title: 'Units' },
+        { name: 'shipped', title: 'Shipped' },
+      ],
+      booleanColumns: ['shipped'],
+      rows: generateRows({
+        columnValues: { id: ({ index }) => index, ...globalSalesValues },
+        length: 8,
+      }),
+    };
+
+    this.commitChanges = ({ added, changed, deleted }) => {
+      let { rows } = this.state;
+      if (added) {
+        const startingAddedId = (rows.length - 1) > 0 ? rows[rows.length - 1].id + 1 : 0;
+        rows = [
+          ...rows,
+          ...added.map((row, index) => ({
+            id: startingAddedId + index,
+            ...row,
+          })),
+        ];
+      }
+      if (changed) {
+        rows = rows.map(row => (changed[row.id] ? { ...row, ...changed[row.id] } : row));
+      }
+      if (deleted) {
+        const deletedSet = new Set(deleted);
+        rows = rows.filter(row => !deletedSet.has(row.id));
+      }
+      this.setState({ rows });
+    };
+  }
+  render() {
+    const { rows, columns, booleanColumns } = this.state;
+
+    return (
+      <div className="card">
+        <Grid
+          rows={rows}
+          columns={columns}
+          getRowId={getRowId}
+        >
+          <BooleanTypeProvider
+            for={booleanColumns}
+          />
+          <EditingState
+            onCommitChanges={this.commitChanges}
+            defaultEditingRowIds={[0]}
+          />
+          <Table />
+          <TableHeaderRow />
+          <TableEditRow />
+          <TableEditColumn
+            showAddCommand
+            showEditCommand
+            showDeleteCommand
+          />
+        </Grid>
+      </div>
+    );
+  }
+}