Fixed components!

griddle-react/griddle-react.d.ts

@@ -1,100 +1,121 @@
 import * as React from 'react';
 
+type ReactClass<T> = React.ComponentClass<T> | React.StatelessComponent<T>
+
 export interface CustomColumnComponentProps<T> {
-    data: any,
-    rowData: T,
-    metaData: ColumnMetaData
+  data: any;
+  rowData: T;
+  metaData: ColumnMetaData<T>;
 }
 
-export interface ColumnMetaData {
-    columnName: string;
-    order?: number;
-    locked?: boolean;
-    cssClassName?: string;
-    displayName?: string;
-    customComponent?: any; //TODO: should be React.Component, but getting weird error.
+export interface CustomRowComponentProps<T> {
+  data: T;
+}
+
+export interface CustomGridComponentProps<T> {
+  data: T[];
+}
+
+export interface CustomPagerComponentProps {
+  currentPage: number;
+  maxPage: number;
+  nextText: string;
+  previousText: string;
+  next(): void;
+  previous(): void;
+  setPage(number: number): void;
+}
+
+export interface ColumnMetaData<T> {
+  columnName: string;
+  order?: number;
+  locked?: boolean;
+  cssClassName?: string;
+  displayName?: string;
+  customComponent?: ReactClass<CustomColumnComponentProps<T>>;
 }
 
 export interface BodyCssClassNameFunction<T> {
-    (rowData:T): string;
+  (rowData: T): string;
 }
 
 export interface RowMetaData<T> {
-    bodyCssClassName?: BodyCssClassNameFunction<T> | string;
+  bodyCssClassName?: BodyCssClassNameFunction<T> | string;
 }
 
 export interface GriddleProps<T> {
-    columns?: string[];
-    columnMetadata?: ColumnMetaData[];
-    rowMetadata?: RowMetaData<T>;
-    results?: T[];
-    resultsPerPage?: number;
-    initialSort?: string;
-    initialSortAscending?: boolean;
-    gridClassName?: string;
-    tableClassName?: string;
-    customFormatClassName?: string;
-    settingsText?: string;
-    filterPlaceholderText?: string;
-    nextText?: string;
-    previousText?: string;
-    maxRowsText?: string;
-    enableCustomFormatText?: string;
-    childrenColumnName?: string;
-    metadataColumns?: string[];
-    showFilter?: boolean;
-    showSettings?: boolean;
-    useCustomRowComponent?: boolean;
-    useCustomGridComponent?: boolean;
-    useCustomPagerComponent?: boolean;
-    useGriddleStyles?: boolean;
-    customRowComponent?: any; //TODO: should be React.Component, but getting weird error.
-    customGridComponent?: any; //TODO: should be React.Component, but getting weird error.
-    customPagerComponent?: any; //TODO: should be React.Component, but getting weird error.
-    enableToggleCustom?: boolean;
-    noDataMessage?: string;
-    noDataClassName?: string;
-    customNoDataComponent?: any; //TODO: should be React.Component, but getting weird error.
-    showTableHeading?: boolean;
-    showPager?: boolean;
-    useFixedHeader?: boolean;
-    useExternal?: boolean;
-    externalSetPage?(index: number): void;
-    externalChangeSort?(sort: string, sortAscending: boolean): void;
-    externalSetFilter?(filter: string): void;
-    externalSetPageSize?(size: number): void;
-    externalMaxPage?: number;
-    externalCurrentPage?: number;
-    externalSortColumn?: string;
-    externalSortAscending?: boolean;
-    externalLoadingComponent?: any; //TODO: should be React.Component, but getting weird error.
-    externalIsLoading?: boolean;
-    enableInfiniteScroll?: boolean;
-    bodyHeight?: number;
-    paddingHeight?: number;
-    rowHeight?: number;
-    infiniteScrollLoadTreshold?: number;
-    useFixedLayout?: boolean;
-    isSubGriddle?: boolean;
-    enableSort?: boolean;
-    sortAscendingClassName?: string;
-    sortDescendingClassName?: string;
-    parentRowCollapsedClassName?: string;
-    parentRowExpandedClassName?: string;
-    settingsToggleClassName?: string;
-    nextClassName?: string;
-    previousClassName?: string;
-    sortAscendingComponent?: string | React.ReactElement<any>;
-    sortDescendingComponent?: string | React.ReactElement<any>;
-    sortDefaultComponent?: string | React.ReactElement<any>;
-    parentRowCollapsedComponent?: string | React.ReactElement<any>;
-    parentRowExpandedComponent?: string | React.ReactElement<any>;
-    settingsIconComponent?: string | React.ReactElement<any>;
-    nextIconComponent?: string | React.ReactElement<any>;
-    previousIconComponent?: string | React.ReactElement<any>;
-    onRowClick?(): void;
+  columns?: string[];
+  columnMetadata?: ColumnMetaData<T>[];
+  rowMetadata?: RowMetaData<T>;
+  results?: T[];
+  resultsPerPage?: number;
+  initialSort?: string;
+  initialSortAscending?: boolean;
+  gridClassName?: string;
+  tableClassName?: string;
+  customFormatClassName?: string;
+  settingsText?: string;
+  filterPlaceholderText?: string;
+  nextText?: string;
+  previousText?: string;
+  maxRowsText?: string;
+  enableCustomFormatText?: string;
+  childrenColumnName?: string;
+  metadataColumns?: string[];
+  showFilter?: boolean;
+  showSettings?: boolean;
+  useCustomRowComponent?: boolean;
+  useCustomGridComponent?: boolean;
+  useCustomPagerComponent?: boolean;
+  useGriddleStyles?: boolean;
+  customRowComponent?: ReactClass<CustomRowComponentProps<T>>
+  customGridComponent?: ReactClass<CustomGridComponentProps<T>>
+  customPagerComponent?: ReactClass<CustomPagerComponentProps>
+  enableToggleCustom?: boolean;
+  noDataMessage?: string;
+  noDataClassName?: string;
+  customNoDataComponent?: ReactClass<void>
+  showTableHeading?: boolean;
+  showPager?: boolean;
+  useFixedHeader?: boolean;
+  useExternal?: boolean;
+  externalSetPage?(index: number): void;
+  externalChangeSort?(sort: string, sortAscending: boolean): void;
+  externalSetFilter?(filter: string): void;
+  externalSetPageSize?(size: number): void;
+  externalMaxPage?: number;
+  externalCurrentPage?: number;
+  externalSortColumn?: string;
+  externalSortAscending?: boolean;
+  externalLoadingComponent?: ReactClass<void>
+  externalIsLoading?: boolean;
+  enableInfiniteScroll?: boolean;
+  bodyHeight?: number;
+  paddingHeight?: number;
+  rowHeight?: number;
+  infiniteScrollLoadTreshold?: number;
+  useFixedLayout?: boolean;
+  isSubGriddle?: boolean;
+  enableSort?: boolean;
+  sortAscendingClassName?: string;
+  sortDescendingClassName?: string;
+  parentRowCollapsedClassName?: string;
+  parentRowExpandedClassName?: string;
+  settingsToggleClassName?: string;
+  nextClassName?: string;
+  previousClassName?: string;
+  sortAscendingComponent?: string | React.ReactElement<any>;
+  sortDescendingComponent?: string | React.ReactElement<any>;
+  sortDefaultComponent?: string | React.ReactElement<any>;
+  parentRowCollapsedComponent?: string | React.ReactElement<any>;
+  parentRowExpandedComponent?: string | React.ReactElement<any>;
+  settingsIconComponent?: string | React.ReactElement<any>;
+  nextIconComponent?: string | React.ReactElement<any>;
+  previousIconComponent?: string | React.ReactElement<any>;
+  onRowClick?(): void;
 }
 
-declare class Griddle<T> extends React.Component<GriddleProps<T>, any> {}
+declare class Griddle<T> extends React.Component<GriddleProps<T>, any> {
+}
 
 export default Griddle;

griddle-react/test/test.tsx

@@ -1,66 +1,63 @@
 import * as React from 'react';
-import {render} from 'react-dom';
-import {default as Griddle, CustomColumnComponentProps} from 'griddle-react';
-
-class TestComponent extends React.Component<any, any> {
-    render() {
-        return (
-            <div></div>
-        );
-    }
-}
+import { render } from 'react-dom';
+import Griddle, { CustomColumnComponentProps } from 'griddle-react';
 
 interface MyCustomResult {
-    name: string,
-    test: string
+  name: string,
+  test: string
 }
 
 class LinkComponent extends React.Component<CustomColumnComponentProps<MyCustomResult>, any> {
-    render() {
-        var url = "speakers/" + this.props.rowData.test + "/" + this.props.data;
-        return <a href={url}>{this.props.data}</a>
-    }
+  render() {
+    var url = "speakers/" + this.props.rowData.test + "/" + this.props.data;
+    return <a href={url}>{this.props.data}</a>
+  }
 }
 
-var columnMeta = [
-    {
-        columnName: "name",
-        order: 1,
-        locked: false,
-        visible: true,
-        customComponent: LinkComponent
-    }];
+const StatelessFunctionComponent = (props: CustomColumnComponentProps<MyCustomResult>) => {
+  var url = "speakers/" + props.rowData.test + "/" + props.data;
+  return <a href={url}>{props.data}</a>
+};
 
-var results = [
-    {
-        name: 'David Hara',
-        test: 'blah'   
-    },
-    {
-        name: 'Hara, David',
-        test: 'blah2'
-    }
+var columnMeta = [
+  {
+    columnName: "name",
+    order: 1,
+    locked: false,
+    visible: true,
+    customComponent: StatelessFunctionComponent
+  }];
+
+var results: MyCustomResult[] = [
+  {
+    name: 'David Hara',
+    test: 'blah'
+  },
+  {
+    name: 'Hara, David',
+    test: 'blah2'
+  }
 ];
 
 var rowMetaData = {
-    bodyCssClassName: (rowData: MyCustomResult) => {
-        return rowData.test;
-    }
+  bodyCssClassName: (rowData: MyCustomResult) => {
+    return rowData.test;
+  }
 };
 
 type TypedGriddle = new () => Griddle<MyCustomResult>;
 const TypedGriddle = Griddle as TypedGriddle;
 
 render(
-    <div>
-        <TypedGriddle
-            results={results}
-            columnMetadata={columnMeta}
-            rowMetadata={rowMetaData}
-            sortAscendingComponent={<span className="fa fa-sort-alpha-asc"/>}
-            sortDescendingComponent={<TestComponent className="fa fa-sort-alpha-desc"/>}
-            customRowComponent={LinkComponent}
-            />
-    </div>,
-    document.getElementById('root')
+  <div>
+    <TypedGriddle
+      results={results}
+      columnMetadata={columnMeta}
+      rowMetadata={rowMetaData}
+      sortAscendingComponent={<span className="fa fa-sort-alpha-asc"/>}
+      sortDescendingComponent={<span className="fa fa-sort-alpha-desc"/>}
+      customRowComponent={LinkComponent}
+    />
+  </div>,
+  document.getElementById('root')
 );