feat(Table): Implement 'Table' composed component

Composes StateParamsControlledTable and ResourceTable into a single component
fountainhead · Sep 19, 2017 · d48039c · d48039c
1 parent e7fd0d4
commit d48039c
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 12 deletions.
diff --git a/src/components/Table.ts b/src/components/Table.ts
@@ -0,0 +1,4 @@
+import { ResourceTable, Props as ResourceTableProps } from './ResourceTable';
+import { stateParamsControlledTable, Props as SPCTProps } from '../hoc/stateParamsControlledTable';
+
+export const Table: React.ComponentClass<SPCTProps> = stateParamsControlledTable<ResourceTableProps>(ResourceTable);
diff --git a/src/hoc/stateParamsControlledTable.tsx b/src/hoc/stateParamsControlledTable.tsx
@@ -18,7 +18,7 @@ const ORDER_TO_SORT = {
   desc: 'descend'
 };
 
-export interface Props<T> extends TableProps<T> {
+export interface Props {
   defaultPageSize: number;
 }
 
@@ -49,10 +49,6 @@ export interface Context {
   router: UIRouterReact
 }
 
-export type StateParamsControlledTable =
-  <T>(Component: React.ComponentType<TableProps<T>>) =>
-    React.ComponentClass<Props<T>>;
-
 export const filtersToWhereParam = (columns: ColumnProps<any>[] | undefined, filters: { [key: string]: string | string[] }) => {
   if (!columns) {
     return;
@@ -86,9 +82,9 @@ export const sorterToOrderParam = (sorter: Sorter) => {
   }
 }
 
-export const stateParamsControlledTable: StateParamsControlledTable =
-  (Component) => {
-    class StateParamsControlledTable extends React.Component<Props<any> & StateParamsProps> {
+export const stateParamsControlledTable =
+  <P extends TableProps<any>>(Component: React.ComponentType<P>): React.ComponentClass<P & Props> => {
+    class StateParamsControlledTable extends React.Component<TableProps<any> & Props & StateParamsProps> {
       static contextTypes = {
         router: PropTypes.object
       }
@@ -124,7 +120,7 @@ export const stateParamsControlledTable: StateParamsControlledTable =
         );
       }
 
-      componentWillReceiveProps(nextProps: Props<any> & StateParamsProps) {
+      componentWillReceiveProps(nextProps: Props & StateParamsProps) {
         if (!nextProps.stateParams || !nextProps.stateParams.page) {
           return;
         }
@@ -216,7 +212,7 @@ export const stateParamsControlledTable: StateParamsControlledTable =
     }
 
     return stateParamsObserver(
-      StateParamsControlledTable,
+      StateParamsControlledTable as any,
       (stateParams, props: any) => ({
         ...props,
         stateParams

diff --git a/stories/index.tsx b/stories/index.tsx
@@ -4,14 +4,16 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { UIRouter, UISref, Transition } from '@uirouter/react';
 import { Resource } from '@optics/hal-client';
-import { Input, Icon, Table, LocaleProvider, Card, Button } from 'antd';
+import { Input, Icon, Table as AntTable, LocaleProvider, Card, Button } from 'antd';
+import { TableProps } from 'antd/lib/table/Table';
 import enUS from 'antd/lib/locale-provider/en_US';
 
 import { buildRouter } from '../src/ui-router';
 import { CredentialStore } from '../src/CredentialStore';
 import { Login } from '../src/containers/Login';
 import { SchemaField } from '../src/components/SchemaField';
 import { ResourceTable } from '../src/components/ResourceTable';
+import { Table } from '../src/components/Table';
 import { stateParamsObserver } from '../src/hoc/stateParamsObserver';
 import { stateParamsControlledTable } from '../src/hoc/stateParamsControlledTable';
 
@@ -146,6 +148,10 @@ storiesOf('Login', module)
   });
 
 const router = buildRouter();
+router.transitionService.onStart({}, transition => {
+  action('transitionService.onStart')(transition.params('to'))
+});
+
 router.stateRegistry.register({
   name: 'main',
   url: '/iframe.html',
@@ -178,7 +184,7 @@ const StateObservingStateParams = stateParamsObserver(DisplayStateParams);
 
 const StateObservingPaginator = stateParamsObserver(Paginator);
 
-const StateParamsControlledTable = stateParamsControlledTable(Table as any);
+const StateParamsControlledTable = stateParamsControlledTable(AntTable as any as React.ComponentClass<TableProps<any>>);
 
 const COLUMNS = [{
   title: 'Forename',
@@ -260,3 +266,17 @@ storiesOf('ResourceTable', module)
       />
     </LocaleProvider>
   ));
+
+storiesOf('Table', module)
+  .add('Default', () => (
+    <UIRouter router={router}>
+      <LocaleProvider locale={enUS}>
+        <Table
+          defaultPageSize={15}
+          resource={mockApiResource}
+          rel="customers"
+          columns={COLUMNS}
+        />
+      </LocaleProvider>
+    </UIRouter>
+  ));