update readme

Author: jp-programmer1

README.md

@@ -1,37 +1,162 @@
-# React-Filter-Editor 🔎
-### Documentation
-[React Filter Editor Docs ](https://storybook--hilarious-dieffenbachia-334eae.netlify.app/?path=/story/installation--page)
 
-## Getting Started 🚀
+  
+
+#  React-Filter-Editor 🔎
+
+  
+
+###  Documentation
+
+  
+
+[React Filter Editor Docs V1.3.3 ](https://storybook--hilarious-dieffenbachia-334eae.netlify.app/?path=/story/installation--page)
+
+  
+
+  
+
+##  Getting Started 🚀
+
+  
+
 ```
 $ npm install react-filter-editor
-$ yarn add react-filter-editor
 ```
-## Integration
-```
-  import React, { useState } from 'react';
-  import FilterEditor from 'react-filter-editor';
+
 
-  const  options  = [{ name:"name", label:"Name", fieldType: "text" }];
+
+##  Integration
+
 
-  const App = () => {
+
+```
+import React, { useState } from 'react';
+import FilterEditor from 'react-filter-editor';
+
+ 
+const options = [{ name:"name", label:"Name", fieldType: "text" }];
+
+const App = () => {
 	const [values, setValues] = useState({name: ""});
-    return (
-	    <FilterEditor options={options} values={values} onChangeValues={setValues}/>
-    );
-  }
+
+	return (
+		<FilterEditor options={options} values={values} onChangeValues={setValues}/>
+	);
+}
 ```
-## Import component for Bootstrap v5
+
+##  Import component for Bootstrap v5
+
+  
+
 ```
-  import FilterEditor from 'react-filter-editor/lib/bootstrap'; 
+import FilterEditor from 'react-filter-editor/lib/bootstrap';
 ```
-## Contributors 👽
-### Code Contributors
+
+##  Documentation V2.0
+
+| attributes | type | description |
+|--|--|--|
+| values | object |
+| options | Array object |
+| onChangeValues | Function | function to return select value (data) => void; |
+| getData | Function | function to query all data |
+| setVisibleValue | Function Callback | function options to return tag value |
+| configButtons | Object |
+| className | String | parent ClassName |
+| optionsComponent | JSX Element | render options in dropdown |
+
+  
+
+###  values
+
+    {name: "", age: 30, pets: ["Firulais", "Toby", "Martita"]}
+
+###  options
+
+       [
+         {
+              label:"Person Name", 
+              styles: {color: "red"},
+              value:"name", 
+              icon: "fas fa-user", 
+              fieldType?: select || text || number || date, 
+              fieldComponent?:({onChange, data, onEditField, onDisabledEditMode}) => JSX.Element
+          }
+       ]
+
+###  setVisibleValue
+function callback
+
+    ({label, name, value, fieldType}) => return string;
+
+###  configButtons
+  
+icons work with [fontAwesome](https://fontawesome.com/icons)
+
+
+    {
+	    add: {
+		    icon: string
+		    text: string
+	    }, 
+	    remove: {
+		    icon?: string, 
+		    text?: string,
+		    removeComponent?: ({onAction}) => return JXS.Element
+	    }, 
+	    filterActive: {
+		    icon?: string
+		    filterActiveComponent?: ({onAction}) => return JXS.Element
+	    }, 
+	    filterDisabled: {
+		    icon?: string
+		    filterDisabledComponent?: ({onAction}) => return JXS.Element
+		}
+    }
+
+###  optionsComponent
+render options in dropdown
+the component brings the following properties: onAddFilter and options,
+to the **onAddFilter** function you have to pass the name as an attribute
+
+ 
+    const OptionsRender = ({onAddFilter, options}) => {
+     return (....)
+    }
+
+  
+
+##  Contributors 👽
+
+  
+
+###  Code Contributors
+
+  
+
 ![jpprogrammer](https://avatars.githubusercontent.com/u/52465504?s=56&)
+
+  
+
 ![andresceccoli](https://avatars.githubusercontent.com/u/7004266?s=56&)
-### Financial Contributors
-<img src="https://app.sitrack.io/static/media/sitrack_color.22c61360.svg" alt="drawing" style="width:200px;"/>
 
-## License
+  
+
+###  Financial Contributors
+
+  
+
+<img  src="https://app.sitrack.io/static/media/sitrack_color.22c61360.svg"  alt="drawing"  style="width:200px;"/>
+
+  
+
+  
+
+##  License
+
+  
+
+  
 
 Licensed under MIT

lib/hooks/useFilter.js

@@ -134,6 +134,7 @@ exports.useFilter = useFilter;
 //@ts-ignore
 const objectsEqual = (o1, o2) => (typeof o1 === 'object' && Object.keys(o1).length > 0
     ? Object.keys(o1).length === Object.keys(o2).length
+        //@ts-ignore
         && Object.keys(o1).every(p => objectsEqual(o1[p], o2[p]))
     : o1 === o2);
 const arraysEqual = (a1, a2) => a1.length === a2.length && a1.every((o, idx) => objectsEqual(o, a2[idx]));

src/hooks/useFilter.tsx

@@ -141,6 +141,7 @@ export const useFilter = ({ data, options, onChangeCallback, setVisibleValue }:
 const objectsEqual = (o1: any, o2: any) => (
   typeof o1 === 'object' && Object.keys(o1).length > 0
     ? Object.keys(o1).length === Object.keys(o2).length
+    //@ts-ignore
     && Object.keys(o1).every(p => objectsEqual(o1[p], o2[p]))
     : o1 === o2
 );