From 38dc86e9841b4c4754f7a177e617ef33baa2acde Mon Sep 17 00:00:00 2001 From: David Hara Date: Wed, 2 Mar 2016 22:40:59 -0800 Subject: [PATCH] Improve testability, and update results type to fix #2 --- griddle-react/.babelrc | 3 ++ griddle-react/README.md | 10 ++++- griddle-react/griddle-react.d.ts | 2 +- griddle-react/package.json | 32 ++++++++++++++++ griddle-react/test/index.html | 9 +++++ griddle-react/test/test.tsx | 66 ++++++++++++++++++++++++++++++++ griddle-react/tsconfig.json | 9 +++-- griddle-react/webpack.config.js | 17 ++++++++ 8 files changed, 143 insertions(+), 5 deletions(-) create mode 100644 griddle-react/.babelrc create mode 100644 griddle-react/package.json create mode 100644 griddle-react/test/index.html create mode 100644 griddle-react/test/test.tsx create mode 100644 griddle-react/webpack.config.js diff --git a/griddle-react/.babelrc b/griddle-react/.babelrc new file mode 100644 index 0000000000..facd180928 --- /dev/null +++ b/griddle-react/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["es2015", "react"] +} \ No newline at end of file diff --git a/griddle-react/README.md b/griddle-react/README.md index 2fa98f3157..c5479bfd3b 100644 --- a/griddle-react/README.md +++ b/griddle-react/README.md @@ -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/ \ No newline at end of file diff --git a/griddle-react/griddle-react.d.ts b/griddle-react/griddle-react.d.ts index 090640e5ed..e5815153bd 100644 --- a/griddle-react/griddle-react.d.ts +++ b/griddle-react/griddle-react.d.ts @@ -28,7 +28,7 @@ interface GriddleProps { columns?: string[]; columnMetadata?: ColumnMetaData[]; rowMetadata?: RowMetaData; - results?: T; + results?: T[]; resultsPerPage?: number; initialSort?: string; initialSortAscending?: boolean; diff --git a/griddle-react/package.json b/griddle-react/package.json new file mode 100644 index 0000000000..66d209bd20 --- /dev/null +++ b/griddle-react/package.json @@ -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" + } +} diff --git a/griddle-react/test/index.html b/griddle-react/test/index.html new file mode 100644 index 0000000000..2ce79ad3c7 --- /dev/null +++ b/griddle-react/test/index.html @@ -0,0 +1,9 @@ + + + + + +
+ + + \ No newline at end of file diff --git a/griddle-react/test/test.tsx b/griddle-react/test/test.tsx new file mode 100644 index 0000000000..2e688014e1 --- /dev/null +++ b/griddle-react/test/test.tsx @@ -0,0 +1,66 @@ +import * as React from 'react'; +import {render} from 'react-dom'; +import Griddle from 'griddle-react'; + +class TestComponent extends React.Component { + render() { + return ( +
+ ); + } +} + +interface MyCustomResult { + name: string, + test: string +} + +class LinkComponent extends React.Component { + render() { + var url = "speakers/" + this.props.rowData.test + "/" + this.props.data; + return {this.props.data} + } +} + +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; +const TypedGriddle = Griddle as TypedGriddle; + +render( +
+ } + sortDescendingComponent={} + customRowComponent={LinkComponent} + /> +
, + document.getElementById('root') +); \ No newline at end of file diff --git a/griddle-react/tsconfig.json b/griddle-react/tsconfig.json index bb0f92d33a..7f01a8e329 100644 --- a/griddle-react/tsconfig.json +++ b/griddle-react/tsconfig.json @@ -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" ] } \ No newline at end of file diff --git a/griddle-react/webpack.config.js b/griddle-react/webpack.config.js new file mode 100644 index 0000000000..f2f79ea1e4 --- /dev/null +++ b/griddle-react/webpack.config.js @@ -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" +}; \ No newline at end of file