New Tubular Common 2.0 (#421)

* Update to Common 2.0 * Update doc * Fixed * Patching types usage
unosquare · Sep 11, 2019 · 3e673f2 · 3e673f2
1 parent 8299f36
commit 3e673f2
Show file tree

Hide file tree

Showing 37 changed files with 182 additions and 544 deletions.
diff --git a/README.md b/README.md
@@ -42,7 +42,6 @@ Table of contents
 
 ## Dependencies
 
-* [date-fns](https://date-fns.org/)
 * [Material UI](https://material-ui.com/)
 * [React](https://reactjs.org/)
 * [Tubular Common](https://github.com/unosquare/tubular-common)

diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<html><head><meta charSet="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=1"><meta name="description" content="Tubular React - Quick and reliable grids to build modern web applications in ReactJS"><meta name="keywords" content="application, html5, reactJS, responsive, web api"><meta name="author" content="Unosquare"><link rel="shortcut icon" href="/tubular-react/favicon.2af2dfd9.ico"><title>Tubular React | Unosquare Open Source</title><style>#app,body,html{height:100%;font-family:Roboto}body{margin:0}</style><link rel="stylesheet" href="/tubular-react/pages.750df968.css"></head><body> <div id="app"></div> <script src="/tubular-react/pages.4364571c.js" type="text/javascript"></script> </body><script>!function(e,a,n,t,c,g,o){e.GoogleAnalyticsObject=c,e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,g=a.createElement(n),o=a.getElementsByTagName(n)[0],g.async=1,g.src="//www.google-analytics.com/analytics.js",o.parentNode.insertBefore(g,o)}(window,document,"script",0,"ga"),ga("create","UA-8535255-1","unosquare.com"),ga("send","pageview");</script></html>
+<html><head><meta charSet="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=1"><meta name="description" content="Tubular React - Quick and reliable grids to build modern web applications in ReactJS"><meta name="keywords" content="application, html5, reactJS, responsive, web api"><meta name="author" content="Unosquare"><link rel="shortcut icon" href="/tubular-react/favicon.2af2dfd9.ico"><title>Tubular React | Unosquare Open Source</title><style>#app,body,html{height:100%;font-family:Roboto}body{margin:0}</style><link rel="stylesheet" href="/tubular-react/pages.750df968.css"></head><body> <div id="app"></div> <script src="/tubular-react/pages.27cf2e95.js" type="text/javascript"></script> </body><script>!function(e,a,n,t,c,g,o){e.GoogleAnalyticsObject=c,e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,g=a.createElement(n),o=a.getElementsByTagName(n)[0],g.async=1,g.src="//www.google-analytics.com/analytics.js",o.parentNode.insertBefore(g,o)}(window,document,"script",0,"ga"),ga("create","UA-8535255-1","unosquare.com"),ga("send","pageview");</script></html>
diff --git a/docs/pages.4364571c.js → docs/pages.27cf2e95.js b/docs/pages.4364571c.js → docs/pages.27cf2e95.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tubular-react",
-  "version": "1.3.1",
+  "version": "2.0.0",
   "description": "Unosquare Tubular React",
   "main": "dist/index.js",
   "scripts": {
@@ -69,7 +69,7 @@
     "@material-ui/icons": "^4.4.1",
     "@material-ui/styles": "^4.4.1",
     "date-fns": "^2.1.0",
-    "tubular-common": "^1.4.2",
+    "tubular-common": "^2.0.0",
     "uno-material-ui": "^1.5.0"
   },
   "devDependencies": {
@@ -95,7 +95,7 @@
     "ts-jest": "^24.0.2",
     "tslint": "^5.20.0",
     "tslint-react": "^4.0.0",
-    "typescript": "^3.6.2"
+    "typescript": "^3.6.3"
   },
   "parcelCleanPaths": [
     "docs/*.*",

diff --git a/sample/src/CustomHttpClient.ts b/sample/src/CustomHttpClient.ts
@@ -1,6 +1,4 @@
-import { GridRequest } from 'tubular-common';
-import ITubularHttpClient from '../../src/utils/ITubularHttpClient';
-import TubularHttpClient from '../../src/utils/TubularHttpClient';
+import { GridRequest, ITubularHttpClient, TubularHttpClient } from 'tubular-common';
 
 export default class CustomHttpClient implements ITubularHttpClient {
   public request: string | Request;

diff --git a/sample/src/CustomLayoutDataGrid.tsx b/sample/src/CustomLayoutDataGrid.tsx
@@ -10,7 +10,7 @@ import * as React from 'react';
 import { DataGridTable } from '../../src/DataGrid';
 import useDataGrid from '../../src/Hooks/useDataGrid';
 import { Paginator } from '../../src/Pagination';
-import { renderDateTimeCell } from '../../src/utils';
+import { formatDate } from 'tubular-common';
 import columns from './data/columns';
 import localData from './data/localData';
 
@@ -24,7 +24,7 @@ const CustomLayoutDataGrid: React.FunctionComponent = () => {
       <TableCell padding='default'>{row.OrderID}</TableCell>
       <TableCell padding='default'>{row.CustomerName}</TableCell>
       <TableCell padding='default'>
-        {renderDateTimeCell(row.ShippedDate, 'M/d/yyyy h:mm a')}
+        {formatDate(row.ShippedDate, 'M/d/yyyy h:mm a')}
       </TableCell>
       <TableCell padding='default'>{row.ShipperCity}</TableCell>
       <TableCell padding='default' align={'right'}>

diff --git a/sample/src/RemoteGridList.tsx b/sample/src/RemoteGridList.tsx
@@ -12,13 +12,12 @@ import TableCell from '@material-ui/core/TableCell';
 import TableFooter from '@material-ui/core/TableFooter';
 import TableRow from '@material-ui/core/TableRow';
 import Typography from '@material-ui/core/Typography';
-import format from 'date-fns/format';
-import parseISO from 'date-fns/parseISO';
 import * as React from 'react';
-import { LocalStorage, Paginator, SearchTextInput } from '../../src';
+import { Paginator, SearchTextInput } from '../../src';
 import useDataGrid from '../../src/Hooks/useDataGrid';
 import CustomHttpClient from './CustomHttpClient';
 import columns from './data/columns';
+import { formatDate, LocalStorage } from 'tubular-common';
 
 const styles: any = {
   progress: {
@@ -66,7 +65,7 @@ const RemoteGridList: React.FunctionComponent = () => {
                           {row.ShipperCity}
                         </Typography>
                         <Typography component='p'>
-                          {format(parseISO(row.ShippedDate), 'M/d/yyyy h:mm a')}
+                          {formatDate(row.ShippedDate, 'M/d/yyyy h:mm a')}
                         </Typography>
                       </CardContent>
                       <CardActions>

diff --git a/sample/src/localDataGrid.tsx b/sample/src/localDataGrid.tsx
@@ -2,7 +2,8 @@ import * as React from 'react';
 
 import Button from '@material-ui/core/Button';
 import Snackbar from '@material-ui/core/Snackbar';
-import { DataGrid, LocalStorage } from '../../src';
+import { LocalStorage} from 'tubular-common';
+import { DataGrid } from '../../src';
 import { ToolbarOptions } from '../../src/Toolbar/ToolbarOptions';
 import columns from './data/columns';
 import localData from './data/localData';

diff --git a/sample/src/remoteDataGrid.tsx b/sample/src/remoteDataGrid.tsx
@@ -3,11 +3,9 @@ import TableCell from '@material-ui/core/TableCell';
 import TableRow from '@material-ui/core/TableRow';
 import CheckBox from '@material-ui/icons/CheckBox';
 import CheckBoxOutlineBlank from '@material-ui/icons/CheckBoxOutlineBlank';
-import format from 'date-fns/format';
-import parseISO from 'date-fns/parseISO';
 import * as React from 'react';
-import { ColumnModel } from 'tubular-common';
-import { DataGrid, LocalStorage, ToolbarOptions } from '../../src';
+import { ColumnModel, formatDate, LocalStorage } from 'tubular-common';
+import { DataGrid, ToolbarOptions } from '../../src';
 import useGridRefresh from '../../src/Hooks/useGridRefresh';
 import columns from './data/columns';
 
@@ -24,7 +22,7 @@ const RemoteDataGrid: React.FunctionComponent = () => {
       <TableCell padding='default'>{row.OrderID}</TableCell>
       <TableCell padding='default'>{row.CustomerName}</TableCell>
       <TableCell padding='default'>
-        {format(parseISO(row.ShippedDate), 'M/d/yyyy h:mm a')}
+        {formatDate(row.ShippedDate, 'M/d/yyyy h:mm a')}
       </TableCell>
       <TableCell padding='default'>{row.ShipperCity}</TableCell>
       <TableCell padding='default' align={'right'}>
@@ -53,17 +51,17 @@ const RemoteDataGrid: React.FunctionComponent = () => {
   });
 
   return (
-      <DataGrid
-        gridName='Tubular-React'
-        columns={[...columns]}
-        dataSource='https://tubular.azurewebsites.net/api/orders/paged'
-        deps={[refresh]}
-        bodyRenderer={bodyRenderer}
-        onRowClick={rowClick}
-        footerRenderer={footerRenderer}
-        storage={new LocalStorage()}
-        toolbarOptions={toolbarButton}
-      />
+    <DataGrid
+      gridName='Tubular-React'
+      columns={[...columns]}
+      dataSource='https://tubular.azurewebsites.net/api/orders/paged'
+      deps={[refresh]}
+      bodyRenderer={bodyRenderer}
+      onRowClick={rowClick}
+      footerRenderer={footerRenderer}
+      storage={new LocalStorage()}
+      toolbarOptions={toolbarButton}
+    />
   );
 };
 

diff --git a/src/DataGrid/DataGrid.tsx b/src/DataGrid/DataGrid.tsx
@@ -5,16 +5,14 @@ import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
 import makeStyles from '@material-ui/styles/makeStyles';
 import * as React from 'react';
-import { ColumnModel } from 'tubular-common';
+import { ColumnModel, IDataGridStorage, ITubularHttpClient } from 'tubular-common';
 import { FixedLinearProgress } from 'uno-material-ui';
 import { useResolutionSwitch } from 'uno-react';
-import { IDataGridStorage } from '../DataGridInterfaces';
 import { IDataGridConfig } from '../DataGridInterfaces/IDataGridConfig';
 import useDataGrid from '../Hooks/useDataGrid';
 import { Paginator } from '../Pagination';
 import { GridToolbar } from '../Toolbar/GridToolbar';
 import { ToolbarOptions } from '../Toolbar/ToolbarOptions';
-import ITubularHttpClient from '../utils/ITubularHttpClient';
 import { DataGridCard, DataGridTable } from './';
 
 const useStyles = makeStyles({

diff --git a/src/DataGrid/GridHeader.tsx b/src/DataGrid/GridHeader.tsx
@@ -1,8 +1,7 @@
 import TableRow from '@material-ui/core/TableRow';
 import * as React from 'react';
-import { ColumnModel } from 'tubular-common';
+import { ColumnModel, IFilterWrapper } from 'tubular-common';
 import { IDataGrid } from '../DataGridInterfaces/IDataGrid';
-import { IFilterWrapper } from '../DataGridInterfaces/IFilterWrapper';
 import { DialogModal } from '../Filtering/DialogModal';
 import { GridHeaderCell } from './GridHeaderCell';
 

diff --git a/src/DataGridInterfaces/IDataGridApi.ts b/src/DataGridInterfaces/IDataGridApi.ts
@@ -1,5 +1,4 @@
-import { ColumnModel, GridResponse } from 'tubular-common';
-import { IFilterWrapper } from './IFilterWrapper';
+import { ColumnModel, IFilterWrapper } from 'tubular-common';
 
 export interface IDataGridApi {
     exportTo: (allRows: boolean, exportFunc: (payload: any[], columns: ColumnModel[]) => void) => void;

diff --git a/src/DataGridInterfaces/IDataGridConfig.ts b/src/DataGridInterfaces/IDataGridConfig.ts
@@ -1,4 +1,4 @@
-import { IDataGridStorage } from './IDataGridStorage';
+import { IDataGridStorage } from 'tubular-common';
 
 export interface IDataGridConfig {
     itemsPerPage: number;

diff --git a/src/DataGridInterfaces/IDataGridState.ts b/src/DataGridInterfaces/IDataGridState.ts
@@ -1,5 +1,4 @@
-import { ColumnModel } from 'tubular-common';
-import { IDataGridStorage } from './IDataGridStorage';
+import { ColumnModel, IDataGridStorage } from 'tubular-common';
 
 export interface IDataGridState {
     activeColumn: ColumnModel;

diff --git a/src/DataGridInterfaces/IDataGridStorage.ts b/src/DataGridInterfaces/IDataGridStorage.ts
diff --git a/src/DataGridInterfaces/IFilterWrapper.ts b/src/DataGridInterfaces/IFilterWrapper.ts
diff --git a/src/DataGridInterfaces/index.ts b/src/DataGridInterfaces/index.ts
diff --git a/src/Filtering/DialogInput.tsx b/src/Filtering/DialogInput.tsx
@@ -1,9 +1,7 @@
 import MenuItem from '@material-ui/core/MenuItem';
 import TextField from '@material-ui/core/TextField';
-import format from 'date-fns/format';
-import parseISO from 'date-fns/parseISO';
 import * as React from 'react';
-import { ColumnDataType, ColumnModel, CompareOperators } from 'tubular-common';
+import { ColumnDataType, ColumnModel, CompareOperators, formatDate } from 'tubular-common';
 
 const dropdown = {
   marginLeft: '10%',
@@ -40,16 +38,16 @@ const getValue = (
   switch (dataType) {
     case ColumnDataType.DATE:
       if (value) {
-        return format(parseISO(value), 'yyyy-MM-DD');
+        return formatDate(value, 'yyyy-MM-DD');
       }
-      handleTextFieldChange(format(new Date(), 'YYYY-MM-DD'));
+      handleTextFieldChange(formatDate(new Date().toISOString(), 'YYYY-MM-DD'));
       return '';
     case ColumnDataType.DATE_TIME:
     case ColumnDataType.DATE_TIME_UTC:
       if (value) {
-        return format(parseISO(value), 'yyyy-MM-DD[T]HH:mm');
+        return formatDate(value, 'yyyy-MM-DD[T]HH:mm');
       }
-      handleTextFieldChange(format(new Date(), 'yyyy-MM-DD[T]HH:mm'));
+      handleTextFieldChange(formatDate(new Date().toISOString(), 'yyyy-MM-DD[T]HH:mm'));
       return '';
     case ColumnDataType.BOOLEAN:
       return operator === CompareOperators.NONE
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<html><head><meta charSet="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=1"><meta name="description" content="Tubular React - Quick and reliable grids to build modern web applications in ReactJS"><meta name="keywords" content="application, html5, reactJS, responsive, web api"><meta name="author" content="Unosquare"><link rel="shortcut icon" href="/tubular-react/favicon.2af2dfd9.ico"><title>Tubular React \| Unosquare Open Source</title><style>#app,body,html{height:100%;font-family:Roboto}body{margin:0}</style><link rel="stylesheet" href="/tubular-react/pages.750df968.css"></head><body> <div id="app"></div> <script src="/tubular-react/pages.4364571c.js" type="text/javascript"></script> </body><script>!function(e,a,n,t,c,g,o){e.GoogleAnalyticsObject=c,e.ga=e.ga\|\|function(){(e.ga.q=e.ga.q\|\|[]).push(arguments)},e.ga.l=1*new Date,g=a.createElement(n),o=a.getElementsByTagName(n)[0],g.async=1,g.src="//www.google-analytics.com/analytics.js",o.parentNode.insertBefore(g,o)}(window,document,"script",0,"ga"),ga("create","UA-8535255-1","unosquare.com"),ga("send","pageview");</script></html>
		<html><head><meta charSet="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=1"><meta name="description" content="Tubular React - Quick and reliable grids to build modern web applications in ReactJS"><meta name="keywords" content="application, html5, reactJS, responsive, web api"><meta name="author" content="Unosquare"><link rel="shortcut icon" href="/tubular-react/favicon.2af2dfd9.ico"><title>Tubular React \| Unosquare Open Source</title><style>#app,body,html{height:100%;font-family:Roboto}body{margin:0}</style><link rel="stylesheet" href="/tubular-react/pages.750df968.css"></head><body> <div id="app"></div> <script src="/tubular-react/pages.27cf2e95.js" type="text/javascript"></script> </body><script>!function(e,a,n,t,c,g,o){e.GoogleAnalyticsObject=c,e.ga=e.ga\|\|function(){(e.ga.q=e.ga.q\|\|[]).push(arguments)},e.ga.l=1*new Date,g=a.createElement(n),o=a.getElementsByTagName(n)[0],g.async=1,g.src="//www.google-analytics.com/analytics.js",o.parentNode.insertBefore(g,o)}(window,document,"script",0,"ga"),ga("create","UA-8535255-1","unosquare.com"),ga("send","pageview");</script></html>