init project

nhabuiduc · Jun 14, 2016 · 2003de7 · 2003de7
commit 2003de7
Show file tree

Hide file tree

Showing 23 changed files with 1,530 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "stage-0", "react"]
+}
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,21 @@
+{
+  "ecmaFeatures": {
+    "jsx": true,
+    "modules": true
+  },
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "parser": "babel-eslint",
+  "rules": {
+    "quotes": [2, "single"],
+    "strict": [2, "never"],
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 2,
+    "react/react-in-jsx-scope": 2
+  },
+  "plugins": [
+    "react"
+  ]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+npm-debug.log
+.DS_Store
+dist
diff --git a/.jshintrc b/.jshintrc
@@ -0,0 +1,6 @@
+{
+  "node": true,
+  "browser": true,
+  "esnext": true,
+  "newcap": false
+}
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Dan Abramov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,2 @@
+>## React Filter Box
+
diff --git a/index.html b/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Sample App</title>
+  </head>
+  <body>
+    <div id='root'>
+    </div>
+    <script src="/static/bundle.js"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,56 @@
+{
+  "name": "react-filter-box",
+  "version": "1.0.0",
+  "description": "simple filter support OR AND, with condition compose by Category operator value",
+  "scripts": {
+    "start": "node server.js",
+    "lint": "eslint src"
+  },
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "keywords": [
+    "react",
+    "reactjs",
+    "filter",
+    "condition",
+    "search",
+    "hmr",
+    "live",
+    "edit",
+    "webpack"
+  ],
+  "author": "nha bui duc <[email protected]> (http://github.com/nhabuiduc)",
+  "license": "MIT",
+  "bugs": {
+    "url": ""
+  },
+  "homepage": "",
+  "devDependencies": {
+    "babel-core": "^6.0.20",
+    "babel-eslint": "^4.1.3",
+    "babel-loader": "^6.0.1",
+    "babel-preset-es2015": "^6.0.15",
+    "babel-preset-react": "^6.0.15",
+    "babel-preset-stage-0": "^6.0.15",
+    "css-loader": "^0.23.1",
+    "eslint": "^1.10.3",
+    "eslint-plugin-react": "^3.6.2",
+    "fixed-data-table": "^0.6.0",
+    "less": "^2.7.1",
+    "less-loader": "^2.2.3",
+    "pegjs-loader": "^0.4.0",
+    "react-hot-loader": "^1.3.0",
+    "style-loader": "^0.13.1",
+    "webpack": "^1.12.2",
+    "webpack-dev-server": "^1.12.1"
+  },
+  "dependencies": {
+    "lodash": "^4.13.1",
+    "pegjs": "^0.9.0",
+    "react": "^0.14.6",
+    "react-codemirror": "^0.2.6",
+    "react-dom": "^0.14.6"
+  }
+}
diff --git a/server.js b/server.js
@@ -0,0 +1,15 @@
+var webpack = require('webpack');
+var WebpackDevServer = require('webpack-dev-server');
+var config = require('./webpack.config');
+
+new WebpackDevServer(webpack(config), {
+  publicPath: config.output.publicPath,
+  hot: true,
+  historyApiFallback: true
+}).listen(3000, 'localhost', function (err, result) {
+  if (err) {
+    return console.log(err);
+  }
+
+  console.log('Listening at http://localhost:3000/');
+});
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,113 @@
+import React, { Component } from 'react';
+import _ from "lodash";
+import FilterQueryParser from "./FilterQueryParser";
+import BaseAutoCompleteHandler from "./BaseAutoCompleteHandler";
+import FilterInput from "./FilterInput";
+import {Table, Column, Cell} from 'fixed-data-table';
+import "fixed-data-table/dist/fixed-data-table.min.css";
+import data from "./data";
+import SimpleResultProcessing from "./SimpleResultProcessing";
+
+import GridDataAutoCompleteHandler from "./GridDataAutoCompleteHandler";
+
+export default class App extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            query: `Status == Divorced AND (Description contains "t")`,
+            data: data
+        }
+
+        var parser = new FilterQueryParser();
+        parser.setAutoCompleteHandler(new GridDataAutoCompleteHandler(data));
+        this.parser = parser;
+        this.parsedResult = null;
+    }
+
+    onChange(text) {
+        this.setState({ query: text });
+        this.parsedResult = this.parser.parse(text);
+
+    }
+
+    needAutoCompleteValues(codeMirror, text) {
+        return this.parser.getSugessions(text);
+    }
+
+    onSubmit(){
+        this.parsedResult = this.parser.parse(this.state.query);
+        if(!this.parsedResult){
+            console.log("no result");
+            return;
+        }
+
+        console.log(this.parsedResult);
+
+        var processing = new SimpleResultProcessing();
+        var newData = processing.process(data, this.parsedResult);
+        this.setState({data:newData});
+    }
+
+    render() {
+        // var result = parser.parse(`nha == nhat AND (nhat == nha or "nhat " contains t) AND  `);
+        var rows = this.state.data;
+        return (
+            <div>
+
+                <FilterInput value={this.state.query}
+                    onSubmit={this.onSubmit.bind(this)}
+                    onChange={this.onChange.bind(this) }
+                    needAutoCompleteValues={this.needAutoCompleteValues.bind(this) }/>
+
+                <Table
+                    rowHeight={50}
+                    rowsCount={rows.length}
+                    width={800}
+                    height={800}
+                    headerHeight={50}>
+                    <Column
+                        header={<Cell>Name</Cell>}
+                        cell={({ rowIndex, ...props}) => (
+                            <Cell {...props}>
+                                {rows[rowIndex].Name}
+                            </Cell>
+                            ) }
+                        width={200}
+                    />
+                    <Column
+                        header={<Cell>Description</Cell>}
+                        cell={({ rowIndex, ...props}) => (
+                            <Cell {...props}>
+                                {rows[rowIndex].Description}
+                            </Cell>
+                            ) }
+                        width={200}
+                    />
+                    <Column
+                        header={<Cell>Status</Cell>}
+                        cell={({ rowIndex, ...props}) => (
+                            <Cell {...props}>
+                                {rows[rowIndex].Status}
+                            </Cell>
+                            ) }
+                        width={200}
+                    />
+                    <Column
+                        header={<Cell>Email</Cell>}
+                        cell={({ rowIndex, ...props}) => (
+                            <Cell {...props}>
+                                {rows[rowIndex].Email}
+                            </Cell>
+                            ) }
+                        width={200}
+                    />
+                </Table>,
+            </div>
+
+
+        );
+    }
+}
+
+
diff --git a/src/BaseAutoCompleteHandler.js b/src/BaseAutoCompleteHandler.js
@@ -0,0 +1,45 @@
+export default class BaseAutoCompleteHandler{
+  constructor(){
+
+  }
+
+  handleParseError(parser, error){
+
+    var trace = parser.parseTrace;
+    return _.flatMap(error.expected, f=>{
+      if(f.type == "literal"){
+        return [f.value];
+      }
+
+      if(f.type == "other"){
+          var lastTokenType = trace.getLastTokenType() || "value";
+          if(lastTokenType == "value") {
+            return this.needCategories();
+          }
+
+          if(lastTokenType == "category"){
+            return this.needOperators(trace.getLastCategory());
+          }
+
+          if(lastTokenType == "operator"){
+            return this.needValues(trace.getLastCategory(), trace.getLastOperator());
+          }
+      }
+
+      return[];
+    })
+  }
+
+  needCategories(){
+    return []
+  }
+
+  needOperators(lastOperator){
+    return []
+  }
+
+  needValues(lastCategory, lastOperator){
+    return []
+  }
+
+}
diff --git a/src/BaseResultProcessing.js b/src/BaseResultProcessing.js
@@ -0,0 +1,50 @@
+import _ from "lodash";
+
+export default class BaseResultProcessing {
+    constructor(){
+
+    }   
+
+    process(data,parsedResult){
+        return _.filter(data, f => {
+            return this.predicate(f, parsedResult);
+        })
+    }
+
+    predicateSingle(item, parsedResult){
+        return this.filter(item,parsedResult.category,parsedResult.operator,parsedResult.value);
+    }
+
+    predicate(item,parsedResult){
+
+        var expressions= null;
+        if(_.isArray(parsedResult)){
+            expressions = parsedResult;
+        } else if(_.isArray(parsedResult.expressions)){
+            expressions = parsedResult.expressions;
+        }else{
+            return  this.predicateSingle(item, parsedResult);  
+        }
+
+        var result = null;
+
+        expressions.forEach(f=> {
+            if(result == null){
+                result = this.predicateSingle(item, f);
+            }else{
+                if(f.conditionType.toLowerCase() == "and"){
+                    result = result && this.predicate(item, f);
+                }
+                if(f.conditionType.toLowerCase() == "or"){
+                    result = result || this.predicate(item, f);
+                }
+            }
+        })
+
+        return result;
+    }
+
+    filter(row, field, operator, value){
+        return true;
+    }
+}