Merge pull request #9 from komarovalexander/release-2.0

Release 2.0: TS support & Update dependencies

.eslintrc.js

@@ -3,7 +3,12 @@ module.exports = {
     "parser": "babel-eslint",
     "rules":{
         "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
-        "no-shadow": "off"
+        "no-shadow": "off",
+        "linebreak-style": 0,
+        "object-curly-spacing": 0,
+        "comma-dangle": 0,
+        "jsx-a11y/click-events-have-key-events": 0,
+        "arrow-body-style": 0
     },
     "env": {
         "jest": true,

.npmignore

@@ -0,0 +1,17 @@
+src
+public
+static
+.vscode
+.github
+node_modules
+.babelrc
+.eslintignore
+.eslintrc.js
+.gitignore
+.npmignore
+.travis.yml
+CONTRIBUTING.md
+jest.config.js
+package-lock.json
+README.md
+rollup.config.js

README.md

@@ -3,7 +3,7 @@
 # React Filter Control
 The React component for building the composite filter criteria
 
-[Demo](https://codesandbox.io/s/4xk994jovw)
+[Demo (JS)](https://codesandbox.io/s/4xk994jovw)    |    [Demo (TS)](https://codesandbox.io/s/react-typescript-uhtxt)
 
 ## Overview
 ![Filter Control](https://github.com/komarovalexander/react-filter-control/raw/master/static/filter-control.png)
@@ -90,7 +90,7 @@ ReactDOM.render(<App />, document.querySelector("#root"));
 | key | <code>key</code> | Item key |
 | field | <code>string</code> | Field |
 | operator | <code>string</code> | Operator |
-| value | <code>string</code> | Value |
+| value | <code>any</code> | Value |
 
 <a name="Field"></a>
 

index.d.ts

@@ -0,0 +1,5 @@
+import { IFilterControlProps } from "./interfaces";
+
+declare const FilterControl: React.FunctionComponent<IFilterControlProps> = (props: IFilterControlProps) => {};
+
+export default FilterControl;

interfaces.d.ts

@@ -0,0 +1,40 @@
+export declare interface IField {
+    name: string;
+    caption: string;
+    operators: any;
+  }
+
+  export declare interface IGroup {
+    name: string;
+    caption: string;
+  }
+
+  export declare interface IOperator {
+    name: string;
+    caption: string;
+  }
+
+  export declare interface IFilterValueItem {
+    key: any;
+    field: string;
+    operator: string;
+    value: any;
+  }
+
+  export declare interface IFilterControlFilterValueGroup {
+    key: any;
+    groupName: string;
+    items: Array<IFilterControlFilterValue | IFilterValueItem>;
+  }
+
+  export declare interface IFilterControlFilterValue {
+    groupName: string;
+    items: Array<IFilterControlFilterValue | IFilterValueItem>;
+  }
+
+  export declare interface IFilterControlProps {
+    fields: IField[];
+    groups?: IGroup[];
+    filterValue: IFilterControlFilterValue;
+    onFilterValueChanged: (value: any) => void;
+  }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-filter-control",
-  "version": "1.0.0",
+  "version": "2.1.0",
   "main": "dist/react-filter-control.min.js",
   "author": {
     "name": "Alexander Komarov",
@@ -12,41 +12,39 @@
     "url": "https://github.com/komarovalexander/react-filter-control"
   },
   "devDependencies": {
-    "@babel/core": "^7.1.2",
-    "@babel/plugin-proposal-class-properties": "^7.0.0",
-    "@babel/plugin-proposal-decorators": "^7.0.0",
-    "@babel/plugin-proposal-export-default-from": "^7.0.0",
-    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
-    "@babel/plugin-proposal-function-sent": "^7.0.0",
-    "@babel/plugin-proposal-json-strings": "^7.0.0",
-    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
-    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
-    "@babel/plugin-syntax-import-meta": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
-    "@babel/preset-react": "^7.0.0",
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "^9.0.0",
-    "babel-jest": "^23.4.2",
-    "babel-loader": "8.0.4",
+    "@babel/core": "^7.6.4",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-proposal-decorators": "^7.6.0",
+    "@babel/plugin-proposal-export-default-from": "^7.5.2",
+    "@babel/plugin-proposal-export-namespace-from": "^7.5.2",
+    "@babel/plugin-proposal-function-sent": "^7.5.0",
+    "@babel/plugin-proposal-json-strings": "^7.2.0",
+    "@babel/plugin-proposal-numeric-separator": "^7.2.0",
+    "@babel/plugin-proposal-throw-expressions": "^7.2.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/plugin-syntax-import-meta": "^7.2.0",
+    "@babel/preset-env": "^7.6.3",
+    "@babel/preset-react": "^7.6.3",
+    "babel-jest": "^24.9.0",
+    "coveralls": "^3.0.2",
     "enzyme": "^3.7.0",
     "enzyme-adapter-react-16": "^1.6.0",
-    "eslint": "5.6.0",
+    "eslint": "^6.5.1",
     "eslint-config-airbnb": "^17.1.0",
-    "eslint-plugin-babel": "^5.2.1",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "^6.1.2",
-    "eslint-plugin-react": "^7.11.1",
-    "jest": "^23.6.0",
-    "react-scripts": "^2.1.3",
+    "eslint-plugin-babel": "^5.3.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.16.0",
+    "jest-transform-css": "^2.0.0",
+    "react-scripts": "^3.2.0",
     "react-test-renderer": "^16.6.1",
     "rollup": "^0.66.6",
-    "rollup-plugin-babel": "^4.0.3",
-    "rollup-plugin-commonjs": "^9.2.0",
+    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-commonjs": "^9.3.4",
     "rollup-plugin-node-resolve": "^3.4.0",
-    "rollup-plugin-postcss": "^1.6.2",
+    "rollup-plugin-postcss": "^2.0.3",
     "rollup-plugin-strip-prop-types": "^1.0.2",
-    "rollup-plugin-uglify": "^6.0.0"
+    "rollup-plugin-uglify": "^6.0.3"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -59,8 +57,6 @@
     "eject": "react-scripts eject"
   },
   "dependencies": {
-    "coveralls": "^3.0.2",
-    "jest-transform-css": "^2.0.0",
     "prop-types": "^15.6.2",
     "react": "^16.5.2",
     "react-dom": "^16.6.0"

src/components/FilterControl/FilterControl.js

@@ -94,7 +94,7 @@ FilterControl.defaultProps = {
  * @property {key} key - Item key
  * @property {string} field - Field
  * @property {string} operator - Operator
- * @property {string} value - Value
+ * @property {any} value - Value
  */
 
 /**

src/context.js

@@ -7,7 +7,6 @@ const AddButton = ({ onClick }) => (
     <div
       className="fc-group-button-icon fc-button-add"
       onClick={onClick}
-      onKeyDown={onClick}
       tabIndex="0"
       aria-label="Add"
       role="button"
@@ -25,7 +24,6 @@ const RemoveButton = ({ onClick }) => (
   <div
     className="fc-group-button-icon fc-button-remove"
     onClick={onClick}
-    onKeyDown={onClick}
     tabIndex="0"
     aria-label="Remove"
     role="button"
@@ -40,7 +38,6 @@ const Button = ({ text, color, onClick }) => (
     className={`fc-dropdownmenu-button fc-button-color-${color || 'default'}`}
     aria-haspopup="true"
     onClick={onClick}
-    onKeyDown={onClick}
     tabIndex="0"
     role="button"
   >
@@ -81,7 +78,6 @@ const Menu = ({
             key={keyField ? item[keyField] : index}
             selected={index === activeIndex}
             onClick={onClick}
-            onKeyDown={onClick}
             tabIndex="0"
             role="button"
           >
@@ -93,7 +89,6 @@ const Menu = ({
     <div
       className="fc-dropdownmenu-contextmenu-background"
       onClick={handleClose}
-      onKeyDown={handleClose}
       role="button"
       tabIndex="0"
     />

src/controls.css

@@ -6,7 +6,7 @@
     margin-top: 3px;
 }
 .fc-dropdownmenu-contextmenu {
-    position: fixed;
+    position: absolute;
     background-color: white;
     z-index: 20002;
     padding: 5px;