Merge branch 'prettier' of https://github.com/Domino987/material-table …

…into prettier
mbrn · Jun 21, 2020 · 1726cfe · 1726cfe
2 parents 0078a72 + d1919b5
commit 1726cfe
Show file tree

Hide file tree

Showing 17 changed files with 206 additions and 56 deletions.
diff --git a/.github/ROADMAP.md b/.github/ROADMAP.md
@@ -0,0 +1,44 @@
+<p
+  align="center" 
+  style="box-shadow: 2px 2px;"
+>
+  <a 
+    href="https://material-table.com" 
+    rel="noopener" 
+    target="_blank"
+  >
+    <img 
+      width="200" 
+      src="https://raw.githubusercontent.com/mbrn/material-table.com/master/docs/assets/logo-back.png" 
+      alt="material-table" 
+    />
+  </a>
+</p>
+
+<h1 align="center">
+  🛣️ Material Table Roadmap 🛣️
+</h1>
+
+<small>
+  last updated: June 6, 2020
+</small>
+
+<p align="center">
+  <i>
+    <b>
+    Currently, we would like to gain control of open issues and smaller pull requests. Once we have control of issues and PR's we will begin to entertain new features and enhancements.
+    </b>
+  </i>
+</p>
+
+---
+
+<h3 align="center">
+  🚧 Help Wanted 🚧
+</h3>
+
+<p align="center">
+  <i>
+  If you have some free time and would like to contribute, we always welcome help with open issues and/or pull requests to help resolve open issues.
+  </i>
+</p>
diff --git a/.github/stale.yml b/.github/stale.yml
@@ -0,0 +1,17 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 180
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 15
+# Issues with these labels will never be considered stale
+exemptLabels:
+  - pinned
+  - security
+# Label to use when marking an issue as stale
+staleLabel: wontfix
+# Comment to post when marking an issue as stale. Set to `false` to disable
+markComment: >
+  This issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed if no further activity occurs. Thank you
+  for your contributions. You can reopen it if it required.
+# Comment to post when closing a stale issue. Set to `false` to disable
+closeComment: false
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-<p align="center" style="box-shadow: 2px 2px; ">
+<p align="center" style="box-shadow: 2px 2px;">
   <a href="https://material-table.com" rel="noopener" target="_blank" ><img width="200" src="https://raw.githubusercontent.com/mbrn/material-table.com/master/docs/assets/logo-back.png" alt="material-table"></a></p>
 </p>
 
@@ -12,7 +12,7 @@ A simple and powerful Datatable for React based on [Material-UI Table](https://m
 [![Financial Contributors on Open Collective](https://opencollective.com/material-table/all/badge.svg?label=financial+contributors)](https://opencollective.com/material-table) [![npm package](https://img.shields.io/npm/v/material-table/latest.svg)](https://www.npmjs.com/package/material-table)
 [![NPM Downloads](https://img.shields.io/npm/dm/material-table.svg?style=flat)](https://npmcharts.com/compare/material-table?minimal=true)
 [![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/mbrn/material-table.svg)](http://isitmaintained.com/project/mbrn/material-table "Average time to resolve an issue")
-[![xscode](https://img.shields.io/badge/Available%20on-xs%3Acode-blue?style=?style=plastic&logo=appveyor&logo=data:image/png; base64, iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF////////VXz1bAAAAAJ0Uk5T/wDltzBKAAAAlUlEQVR42uzXSwqAMAwE0Mn9L+3Ggtgkk35QwcnSJo9S+yGwM9DCooCbgn4YrJ4CIPUcQF7/XSBbx2TEz4sAZ2q1RAECBAiYBlCtvwN+KiYAlG7UDGj59MViT9hOwEqAhYCtAsUZvL6I6W8c2wcbd+LIWSCHSTeSAAECngN4xxIDSK9f4B9t377Wd7H5Nt7/Xz8eAgwAvesLRjYYPuUAAAAASUVORK5CYII=)](https://xscode.com/mbrn/material-table)
+[![xscode](https://img.shields.io/badge/Available%20on-xs%3Acode-blue?style=?style=plastic&logo=appveyor&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF////////VXz1bAAAAAJ0Uk5T/wDltzBKAAAAlUlEQVR42uzXSwqAMAwE0Mn9L+3Ggtgkk35QwcnSJo9S+yGwM9DCooCbgn4YrJ4CIPUcQF7/XSBbx2TEz4sAZ2q1RAECBAiYBlCtvwN+KiYAlG7UDGj59MViT9hOwEqAhYCtAsUZvL6I6W8c2wcbd+LIWSCHSTeSAAECngN4xxIDSK9f4B9t377Wd7H5Nt7/Xz8eAgwAvesLRjYYPuUAAAAASUVORK5CYII=)](https://xscode.com/mbrn/material-table)
 [![Follow on Twitter](https://img.shields.io/twitter/follow/baranmehmet.svg?label=follow+baranmehmet)](https://twitter.com/baranmehmet)
 [![Gitter chat](https://badges.gitter.im/gitterHQ/gitter.png)](https://gitter.im/material-table/Lobby)
 
@@ -57,23 +57,23 @@ Issues would be prioritized according reactions count. `is:issue is:open sort:re
 
 ## Prerequisites
 
-The minimum `React` version material-table supports is `^16.8.5` since material-table `v1.36.1` . This is due to utilising [ `react-beautiful-dnd` ](https://github.com/atlassian/react-beautiful-dnd) for drag & drop functionality which uses hooks.
+The minimum `React` version material-table supports is `^16.8.5` since material-table `v1.36.1`. This is due to utilising [`react-beautiful-dnd`](https://github.com/atlassian/react-beautiful-dnd) for drag & drop functionality which uses hooks.
 
-If you use an older version of react we suggest to upgrade your dependencies or use material-table `1.36.0` .
+If you use an older version of react we suggest to upgrade your dependencies or use material-table `1.36.0`.
 
 ## Installation
 
-#### 1. Install package
+#### 1.Install package
 
-To install material-table with `npm` :
+To install material-table with `npm`:
 
     npm install material-table @material-ui/core --save
 
-To install material-table with `yarn` :
+To install material-table with `yarn`:
 
     yarn add material-table @material-ui/core
 
-#### 2. Add material icons
+#### 2.Add material icons
 
 There are two ways to use icons in material-table either import the material icons font via html OR import material icons and use the material-table `icons` prop.
 
@@ -92,11 +92,11 @@ OR
 
 Icons can be imported to be used in material-table offering more flexibility for customising the look and feel of material table over using a font library.
 
-To install @material-ui/icons with `npm` :
+To install @material-ui/icons with `npm`:
 
     npm install @material-ui/icons --save
 
-To install @material-ui/icons with `yarn` :
+To install @material-ui/icons with `yarn`:
 
     yarn add @material-ui/icons
 
@@ -206,7 +206,7 @@ ReactDOM.render(<App />, document.getElementById("react-div"));
 
 ## Contributing
 
-We'd love to have your helping hand on `material-table` ! See [CONTRIBUTING.md](https://github.com/mbrn/material-table/blob/master/.github/CONTRIBUTING.md) for more information on what we're looking for and how to get started.
+We'd love to have your helping hand on `material-table`! See [CONTRIBUTING.md](https://github.com/mbrn/material-table/blob/master/.github/CONTRIBUTING.md) for more information on what we're looking for and how to get started.
 
 If you have any sort of doubt, idea or just want to talk about the project, feel free to join [our chat on Gitter](https://gitter.im/material-table/Lobby) :)
 

diff --git a/demo/demo.js b/demo/demo.js
@@ -427,6 +427,7 @@ class App extends Component {
         field: "name",
         filterPlaceholder: "Adı filter",
         tooltip: "This is tooltip text",
+        editPlaceholder: "This is placeholder",
       },
       {
         width: 200,
@@ -490,8 +491,14 @@ class App extends Component {
                   data={this.state.data}
                   title="Demo Title"
                   options={{
-                    pageSize: 50,
-                    pageSizeOptions: [5, 50, 100],
+                    selection: true,
+                    selectionProps: (rowData) => {
+                      rowData.tableData.disabled = rowData.name === "A1";
+
+                      return {
+                        disabled: rowData.name === "A1",
+                      };
+                    },
                   }}
                   editable={{
                     onRowAdd: (newData) =>
@@ -511,7 +518,7 @@ class App extends Component {
                           {
                             /* const data = this.state.data;
                             const index = data.indexOf(oldData);
-                            data[index] = newData;                
+                            data[index] = newData;
                             this.setState({ data }, () => resolve()); */
                           }
                           resolve();

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "material-table",
-  "version": "1.60.0",
+  "version": "1.62.0",
   "description": "Datatable for React based on https://material-ui.com/api/table/ with additional features",
   "main": "dist/index.js",
   "types": "types/index.d.ts",
@@ -83,7 +83,7 @@
     "fast-deep-equal": "2.0.1",
     "filefy": "0.1.10",
     "prop-types": "^15.6.2",
-    "react-beautiful-dnd": "11.0.3",
+    "react-beautiful-dnd": "^13.0.0",
     "react-double-scrollbar": "0.0.15"
   },
   "peerDependencies": {

diff --git a/src/components/m-table-body-row.js b/src/components/m-table-body-row.js
@@ -134,7 +134,11 @@ export default class MTableBodyRow extends React.Component {
           size={size}
           padding="none"
           key="key-detail-panel-column"
-          style={{ width: 42, textAlign: "center" }}
+          style={{
+            width: 42,
+            textAlign: "center",
+            ...this.props.options.detailPanelColumnStyle,
+          }}
         >
           <IconButton
             size={size}
@@ -164,6 +168,7 @@ export default class MTableBodyRow extends React.Component {
               width: 42 * this.props.detailPanel.length,
               textAlign: "center",
               display: "flex",
+              ...this.props.options.detailPanelColumnStyle,
             }}
           >
             {this.props.detailPanel.map((panel, index) => {

diff --git a/src/components/m-table-body.js b/src/components/m-table-body.js
@@ -49,7 +49,11 @@ class MTableBody extends React.Component {
         >
           <TableCell
             style={{ paddingTop: 0, paddingBottom: 0, textAlign: "center" }}
-            colSpan={this.props.columns.length + addColumn}
+            colSpan={this.props.columns.reduce(
+              (currentVal, columnDef) =>
+                columnDef.hidden ? currentVal : currentVal + 1,
+              addColumn
+            )}
             key="empty-"
           >
             {localization.emptyDataSourceMessage}
@@ -201,6 +205,7 @@ class MTableBody extends React.Component {
             hasDetailPanel={!!this.props.detailPanel}
             isTreeData={this.props.isTreeData}
             filterCellStyle={this.props.options.filterCellStyle}
+            filterRowStyle={this.props.options.filterRowStyle}
             hideFilterIcons={this.props.options.hideFilterIcons}
           />
         )}

diff --git a/src/components/m-table-cell.js b/src/components/m-table-cell.js
@@ -10,6 +10,11 @@ const isoDateRegex = /^\d{4}-(0[1-9]|1[0-2])-([12]\d|0[1-9]|3[01])([T\s](([01]\d
 
 export default class MTableCell extends React.Component {
   getRenderValue() {
+    const dateLocale =
+      this.props.columnDef.dateSetting &&
+      this.props.columnDef.dateSetting.locale
+        ? this.props.columnDef.dateSetting.locale
+        : undefined;
     if (
       this.props.columnDef.emptyValue !== undefined &&
       (this.props.value === undefined || this.props.value === null)
@@ -33,23 +38,23 @@ export default class MTableCell extends React.Component {
       if (this.props.value instanceof Date) {
         return this.props.value.toLocaleDateString();
       } else if (isoDateRegex.exec(this.props.value)) {
-        return new Date(this.props.value).toLocaleDateString();
+        return new Date(this.props.value).toLocaleDateString(dateLocale);
       } else {
         return this.props.value;
       }
     } else if (this.props.columnDef.type === "time") {
       if (this.props.value instanceof Date) {
         return this.props.value.toLocaleTimeString();
       } else if (isoDateRegex.exec(this.props.value)) {
-        return new Date(this.props.value).toLocaleTimeString();
+        return new Date(this.props.value).toLocaleTimeString(dateLocale);
       } else {
         return this.props.value;
       }
     } else if (this.props.columnDef.type === "datetime") {
       if (this.props.value instanceof Date) {
         return this.props.value.toLocaleString();
       } else if (isoDateRegex.exec(this.props.value)) {
-        return new Date(this.props.value).toLocaleString();
+        return new Date(this.props.value).toLocaleString(dateLocale);
       } else {
         return this.props.value;
       }
@@ -113,6 +118,9 @@ export default class MTableCell extends React.Component {
       color: "inherit",
       width: this.props.columnDef.tableData.width,
       boxSizing: "border-box",
+      fontSize: "inherit",
+      fontFamily: "inherit",
+      fontWeight: "inherit",
     };
 
     if (typeof this.props.columnDef.cellStyle === "function") {
@@ -133,17 +141,18 @@ export default class MTableCell extends React.Component {
 
   render() {
     const { icons, columnDef, rowData, ...cellProps } = this.props;
-
+    const cellAlignment =
+      columnDef.align !== undefined
+        ? columnDef.align
+        : ["numeric", "currency"].indexOf(this.props.columnDef.type) !== -1
+        ? "right"
+        : "left";
     return (
       <TableCell
         size={this.props.size}
         {...cellProps}
         style={this.getStyle()}
-        align={
-          ["numeric", "currency"].indexOf(this.props.columnDef.type) !== -1
-            ? "right"
-            : "left"
-        }
+        align={cellAlignment}
         onClick={this.handleClickCell}
       >
         {this.props.children}

diff --git a/src/components/m-table-edit-field.js b/src/components/m-table-edit-field.js
@@ -139,7 +139,9 @@ class MTableEditField extends React.Component {
           this.props.columnDef.type === "numeric" ? { float: "right" } : {}
         }
         type={this.props.columnDef.type === "numeric" ? "number" : "text"}
-        placeholder={this.props.columnDef.title}
+        placeholder={
+          this.props.columnDef.editPlaceholder || this.props.columnDef.title
+        }
         value={this.props.value === undefined ? "" : this.props.value}
         onChange={(event) => this.props.onChange(event.target.value)}
         InputProps={{
@@ -158,7 +160,9 @@ class MTableEditField extends React.Component {
     return (
       <TextField
         {...this.getProps()}
-        placeholder={this.props.columnDef.title}
+        placeholder={
+          this.props.columnDef.editPlaceholder || this.props.columnDef.title
+        }
         value={this.props.value === undefined ? "" : this.props.value}
         onChange={(event) => this.props.onChange(event.target.value)}
         inputProps={{

diff --git a/src/components/m-table-edit-row.js b/src/components/m-table-edit-row.js
@@ -5,6 +5,7 @@ import Typography from "@material-ui/core/Typography";
 import PropTypes from "prop-types";
 import * as React from "react";
 import { byString, setByString } from "../utils";
+import * as CommonValues from "../utils/common-values";
 /* eslint-enable no-unused-vars */
 
 export default class MTableEditRow extends React.Component {
@@ -32,6 +33,7 @@ export default class MTableEditRow extends React.Component {
   }
 
   renderColumns() {
+    const size = CommonValues.elementSize(this.props);
     const mapArr = this.props.columns
       .filter(
         (columnDef) =>
@@ -91,6 +93,7 @@ export default class MTableEditRow extends React.Component {
           );
           return (
             <this.props.components.Cell
+              size={size}
               icons={this.props.icons}
               columnDef={columnDef}
               value={readonlyValue}
@@ -106,6 +109,7 @@ export default class MTableEditRow extends React.Component {
 
           return (
             <TableCell
+              size={size}
               key={columnDef.tableData.id}
               align={
                 ["numeric"].indexOf(columnDef.type) !== -1 ? "right" : "left"
@@ -136,6 +140,7 @@ export default class MTableEditRow extends React.Component {
   }
 
   renderActions() {
+    const size = CommonValues.elementSize(this.props);
     const localization = {
       ...MTableEditRow.defaultProps.localization,
       ...this.props.localization,
@@ -164,15 +169,21 @@ export default class MTableEditRow extends React.Component {
     ];
     return (
       <TableCell
+        size={size}
         padding="none"
         key="key-actions-column"
-        style={{ width: 42 * actions.length, padding: "0px 5px" }}
+        style={{
+          width: 42 * actions.length,
+          padding: "0px 5px",
+          ...this.props.options.editCellStyle,
+        }}
       >
         <div style={{ display: "flex" }}>
           <this.props.components.Actions
             data={this.props.data}
             actions={actions}
             components={this.props.components}
+            size={size}
           />
         </div>
       </TableCell>
@@ -195,6 +206,7 @@ export default class MTableEditRow extends React.Component {
   };
 
   render() {
+    const size = CommonValues.elementSize(this.props);
     const localization = {
       ...MTableEditRow.defaultProps.localization,
       ...this.props.localization,
@@ -209,6 +221,7 @@ export default class MTableEditRow extends React.Component {
       ).length;
       columns = [
         <TableCell
+          size={size}
           padding={
             this.props.options.actionsColumnIndex === 0 ? "none" : undefined
           }