Improve testability, and update results type to fix #2

2026-08-11 12:30:18 +00:00 · 2016-03-02 22:40:59 -08:00
parent 464edcaa2b
commit 38dc86e984
8 changed files with 143 additions and 5 deletions
@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "react"]
+}
@@ -2,8 +2,16 @@
 Type definition for https://griddlegriddle.github.io/Griddle/

 Depends upon the [ambient react type definitions](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/c2c22c3b953fe9730d4802022d5e0d18d083909e/react) (github:DefinitelyTyped/DefinitelyTyped/react/react.d.ts#f407264835650f5f38d4bb2c515a79e7a835916b)
-which you can install with
+which you can install with:

 ```
 typings install react --ambient
 ```
+## Testing
+run:
+```
+npm install
+npm test
+```
+
+then open your browser to http://localhost:8080/webpack-dev-server/test/
@@ -28,7 +28,7 @@ interface GriddleProps<T> {
    columns?: string[];
    columnMetadata?: ColumnMetaData[];
    rowMetadata?: RowMetaData<T>;
-    results?: T;
+    results?: T[];
    resultsPerPage?: number;
    initialSort?: string;
    initialSortAscending?: boolean;
@@ -0,0 +1,32 @@
+{
+  "name": "griddle-react-typings",
+  "version": "1.0.0",
+  "description": "",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hodavidhara/griddle-react-typings.git"
+  },
+  "main": "griddle-react.d.ts",
+  "scripts": {
+    "test": "typings install file:$(npm root)/../griddle-react.d.ts --name griddle-react && webpack-dev-server"
+  },
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "griddle-react": "^0.3.1",
+    "react": "^0.14.7",
+    "react-dom": "^0.14.7",
+    "underscore": "^1.8.3"
+  },
+  "devDependencies": {
+    "babel-core": "^6.6.4",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.5.0",
+    "ts-loader": "^0.8.1",
+    "typescript": "^1.8.7",
+    "typings": "^0.6.9",
+    "webpack": "^1.12.14",
+    "webpack-dev-server": "^1.14.1"
+  }
+}
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+<div id="root"></div>
+<script src="/bundle.js"></script>
+</body>
+</html>
@@ -0,0 +1,66 @@
+import * as React from 'react';
+import {render} from 'react-dom';
+import Griddle from 'griddle-react';
+
+class TestComponent extends React.Component<any, any> {
+    render() {
+        return (
+            <div></div>
+        );
+    }
+}
+
+interface MyCustomResult {
+    name: string,
+    test: string
+}
+
+class LinkComponent extends React.Component<any, any> {
+    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
+    }];
+
+var results = [
+    {
+        name: 'David Hara',
+        test: 'blah'   
+    },
+    {
+        name: 'Hara, David',
+        test: 'blah2'
+    }
+];
+
+var rowMetaData = {
+    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')
+);
@@ -1,11 +1,14 @@
 {
  "compilerOptions": {
-    "module": "commonjs",
+    "module": "es2015",
    "outDir": "./target",
-    "jsx": "react",
+    "jsx": "preserve",
    "target": "es6"
  },
  "exclude": [
-    "node_modules"
+    "node_modules",
+    "griddle-react.d.ts",
+    "typings/main",
+    "typings/main.d.ts"
  ]
 }
@@ -0,0 +1,17 @@
+module.exports = {
+    entry: ['./test/test.tsx'],
+    output: {
+        path: '/',
+        filename: 'bundle.js'
+    },
+    module: {
+        loaders: [
+            {
+                test: /.tsx?$/,
+                loaders: ['babel-loader', 'ts-loader'],
+                exclude: /node_modules/
+            }
+        ]
+    },
+    devtool: "#source-map"
+};