Merge pull request #103 from komarovalexander/dev

Fix search by multiple columns with the same values

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ka-table",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "license": "MIT",
   "repository": "github:komarovalexander/ka-table",
   "homepage": "https://komarovalexander.github.io/ka-table/#/overview",

src/Demos/Demos.tsx

@@ -105,7 +105,7 @@ const demos: Demo[] = [
   new Demo(SelectionDemo, '/selection', 'Selection - Multiple', 'SelectionDemo', 'https://stackblitz.com/edit/table-selection-js', 'https://stackblitz.com/edit/table-selection-ts', 'Selection'),
   new Demo(SelectionSingleDemo, '/selection-single', 'Selection - Single', 'SelectionSingleDemo', 'https://stackblitz.com/edit/table-selection-single-js', 'https://stackblitz.com/edit/table-selection-single-ts', 'Selection'),
   new Demo(SortingDemo, '/sorting', 'Sorting', 'SortingDemo', 'https://stackblitz.com/edit/table-sorting-js', 'https://stackblitz.com/edit/table-sorting-ts', ''),
-  new Demo(StateStoringDemo, '/state-storing', 'State Storing', 'StateStoringDemo', 'https://stackblitz.com/edit/table-state-storing-js', '', 'Miscellaneous'),
+  new Demo(StateStoringDemo, '/state-storing', 'State Storing', 'StateStoringDemo', 'https://stackblitz.com/edit/table-state-storing-js', 'https://stackblitz.com/edit/table-state-storing-ts', 'Miscellaneous'),
   new Demo(ValidationDemo, '/validation', 'Validation', 'ValidationDemo', 'https://stackblitz.com/edit/table-validation-js', 'https://stackblitz.com/edit/table-validation-ts', 'Editing'),
 ];
 

src/Demos/ExportDemo/ExportDemo.tsx

@@ -51,13 +51,6 @@ const ExportDemo: React.FC = () => {
       <Table
         {...tableProps}
         dispatch={dispatch}
-        childComponents={{
-          table: {
-            elementAttributes: () => ({
-              id: 'table-to-xls'
-            })
-          }
-        }}
       />
     </div>
   );

src/Demos/ExportToPdfDemo/ExportToPdfDemo.tsx

@@ -65,13 +65,6 @@ const ExportToPdfDemo: React.FC = () => {
       <Table
         {...tableProps}
         dispatch={dispatch}
-        childComponents={{
-          table: {
-            elementAttributes: () => ({
-              id: 'table-to-xls'
-            })
-          }
-        }}
       />
     </div >
   );

src/lib/Utils/FilterUtils.test.ts

@@ -201,6 +201,7 @@ describe('FilterUtils', () => {
       { id: 4, name: 'Kurt Cobain', score: 75, passed: true },
       { id: 5, name: 'Marshall Bruce', score: 77, passed: true },
       { id: 6, name: 'Sunny Fox', score: 33, passed: false },
+      { id: 7, name: 'Falsey False', score: 33, passed: false },
     ];
     it('by string', () => {
       const result = searchData(columns, data, 'Mike', search);
@@ -219,6 +220,11 @@ describe('FilterUtils', () => {
       expect(result).toMatchSnapshot();
     });
 
+    it('should add item only once', () => {
+      const result = searchData(columns, data, 'false', search);
+      expect(result).toMatchSnapshot();
+    });
+
     it('should not find value by search handler', () => {
       const result = searchData(columns, data, 'tru', search);
       expect(result).toMatchSnapshot();

src/lib/Utils/FilterUtils.ts

@@ -15,15 +15,15 @@ export const getRowEditableCells = (rowKeyValue: any, editableCells: EditableCel
 };
 
 export const searchData = (columns: Column[], data: any[], searchText: string, search?: SearchFunc): any[] => {
-  return columns.reduce((initialData: any[], c: Column) => {
+  const searched = columns.reduce((initialData: any[], c: Column) => {
     const filterFunction = (item: any) => {
+      if (initialData.indexOf(item) >= 0) {
+        return false;
+      }
       const searchContent = search && search({ column: c, searchText, rowData: item });
       if (searchContent != null) {
         return searchContent;
       }
-      if (initialData.indexOf(item) >= 0) {
-        return false;
-      }
       const columnValue = getValueByColumn(item, c);
       if (columnValue == null) {
         return false;
@@ -32,6 +32,7 @@ export const searchData = (columns: Column[], data: any[], searchText: string, s
     };
     return initialData.concat(data.filter(filterFunction));
   }, []);
+  return data.filter(d => searched.indexOf(d) >= 0);
 };
 
 export const filterAndSearchData = (props: ITableProps) => {

src/lib/Utils/__snapshots__/FilterUtils.test.ts.snap

@@ -128,6 +128,35 @@ Array [
 ]
 `;
 
+exports[`FilterUtils searchData should add item only once 1`] = `
+Array [
+  Object {
+    "id": 2,
+    "name": "Billi Bob",
+    "passed": false,
+    "score": 55,
+  },
+  Object {
+    "id": 3,
+    "name": "Tom Williams",
+    "passed": false,
+    "score": 45,
+  },
+  Object {
+    "id": 6,
+    "name": "Sunny Fox",
+    "passed": false,
+    "score": 33,
+  },
+  Object {
+    "id": 7,
+    "name": "Falsey False",
+    "passed": false,
+    "score": 33,
+  },
+]
+`;
+
 exports[`FilterUtils searchData should find value by search handler 1`] = `
 Array [
   Object {

src/lib/style.scss

@@ -1,26 +1,48 @@
 @import './static/icons.scss';
 
-$ka-background-color: white;
-$ka-thead-background-color: #F1F5F7;
-$ka-thead-color: #747D86;
-$ka-cell-color: #353C44;
-$ka-input-validation-background-color: #FFE7E7;
-$ka-validation-background-color: #FF0C0C;
-$ka-validation-color: white;
-$ka-border-color: #F9FBFC;
-$ka-selecter-background-color: #F7FcFd;
-$ka-group-row-background-color: #F9FBFC;
-$ka-group-row-border-color: white;
-$ka-group-loading-backdrop-color: #ffffff88;
-$ka-selected-border-color: darken($ka-border-color, 7);
-$ka-column-resize-border-color: darken($ka-border-color, 10);
-$ka-paging-index-active-color: #747D86;
-$ka-paging-index-active-background-color: #F1F5F7;
+$ka-color-base: #353C44 !default;
+
+$ka-background-color: white !default;
+$ka-thead-background-color: #F1F5F7 !default;
+$ka-thead-color: #747D86 !default;
+$ka-cell-color: $ka-color-base !default;
+$ka-input-validation-background-color: #FFE7E7 !default;
+$ka-validation-background-color: #FF0C0C !default;
+$ka-validation-color: white !default;
+$ka-border-color: #F9FBFC !default;
+$ka-selecter-background-color: #F7FcFd !default;
+$ka-group-row-background-color: #F9FBFC !default;
+$ka-group-row-border-color: white !default;
+$ka-selected-border-color: darken($ka-border-color, 7) !default;
+$ka-column-resize-border-color: darken($ka-border-color, 10) !default;
+$ka-paging-index-active-color: #747D86 !default;
+$ka-paging-index-active-background-color: #F1F5F7 !default;
+$ka-loading-background-color-base: rgb(116,125,134) !default;
+$ka-loading-backdrop-color: #ffffff88 !default;
+
+$ka-font-size: 14px !default;
+
+$ka-thead-cell-padding: 15px 20px !default;
+
+$ka-cell-padding: 8px 20px !default;
+$ka-cell-line-height: 29px !default;
+
+$ka-icon-font-size: 10px !default;
+
+$ka-validation-message-font-size: 12px !default;
+$ka-validation-message-padding: 0 10px !default;
+
+$ka-row-border-size: 2px !default;
+
+$ka-group-row-border-size: 1px !default;
+$ka-group-cell-padding: 8px 10px !default;
+
+$ka-filter-row-cell-padding: 0 20px 15px 20px;
 
 .ka{
   overflow: hidden;
   background-color: $ka-background-color;
-  font-size: 14px;
+  font-size: $ka-font-size;
   display: flex;
   flex-direction: column;
 }
@@ -40,7 +62,7 @@ $ka-paging-index-active-background-color: #F1F5F7;
   top: 0;
 }
 .ka-thead-cell{
-  padding: 15px 20px;
+  padding: $ka-thead-cell-padding;
   color: $ka-thead-color;
 }
 .ka-thead-cell-wrapper {
@@ -59,13 +81,13 @@ $ka-paging-index-active-background-color: #F1F5F7;
   text-align: left;
 }
 .ka-cell{
-  padding: 8px 20px;
-  line-height: 29px;
+  padding: $ka-cell-padding;
+  line-height: $ka-cell-line-height;
   color: $ka-cell-color;
 }
 .ka-icon{
   font-weight: 100;
-  font-size: 10px;
+  font-size: $ka-icon-font-size;
   font-family: 'icons';
 }
 .ka-input{
@@ -81,10 +103,10 @@ $ka-paging-index-active-background-color: #F1F5F7;
   position: absolute;
 }
 .ka-validation-message{
-  font-size: 12px;
+  font-size: $ka-validation-message-font-size;
   color: $ka-validation-color;
   background-color: $ka-validation-background-color;
-  padding: 0 10px;
+  padding: $ka-validation-message-padding;
   max-width: 200px;
 }
 .ka-empty-cell{
@@ -100,8 +122,8 @@ $ka-paging-index-active-background-color: #F1F5F7;
 }
 .ka-row{
   box-sizing: border-box;
-  border-bottom: 2px solid $ka-border-color;
-  border-top: 2px solid $ka-border-color;
+  border-bottom: $ka-row-border-size solid $ka-border-color;
+  border-top: $ka-row-border-size solid $ka-border-color;
 }
 .ka-dragged-row{
   opacity: 0.5;
@@ -124,11 +146,11 @@ $ka-paging-index-active-background-color: #F1F5F7;
 .ka-group-row{
   background-color: $ka-group-row-background-color;
   box-sizing: border-box;
-  border-bottom: 1px solid $ka-group-row-border-color;
-  border-top: 1px solid $ka-group-row-border-color;
+  border-bottom: $ka-group-row-border-size solid $ka-group-row-border-color;
+  border-top: $ka-group-row-border-size solid $ka-group-row-border-color;
 }
 .ka-group-cell{
-  padding: 8px 10px;
+  padding: $ka-group-cell-padding;
 }
 .ka-group-cell-content{
   display: flex;
@@ -146,15 +168,15 @@ $ka-paging-index-active-background-color: #F1F5F7;
   cursor: pointer;
 }
 .ka-filter-row-cell{
-  padding: 0 20px 15px 20px;
+  padding: $ka-filter-row-cell-padding;
 }
 .ka-loading{
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
-  background-color: $ka-group-loading-backdrop-color;
+  background-color: $ka-loading-backdrop-color;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -182,26 +204,27 @@ $ka-paging-index-active-background-color: #F1F5F7;
 
 @keyframes typing{
   0%{
-    background-color: #747D86;
-    box-shadow: 20px 0px 0px 0px rgba(116,125,134,0.2),
-                40px 0px 0px 0px rgba(116,125,134,0.2);
+    background-color: $ka-loading-background-color-base;
+    box-shadow: 20px 0px 0px 0px transparentize($ka-loading-background-color-base, 0.8),
+                40px 0px 0px 0px transparentize($ka-loading-background-color-base, 0.8);
   }
   25%{
-    background-color: rgba(116,125,134, 0.4);
-    box-shadow: 20px 0px 0px 0px rgba(116,125,134,2),
-                40px 0px 0px 0px rgba(116,125,134,0.2);
+    background-color: transparentize($ka-loading-background-color-base, 0.6);
+    box-shadow: 20px 0px 0px 0px $ka-loading-background-color-base,
+                40px 0px 0px 0px transparentize($ka-loading-background-color-base, 0.8);
   }
   75%{
-    background-color: rgba(116,125,134, 0.4);
-    box-shadow: 20px 0px 0px 0px rgba(116,125,134,0.2),
-                40px 0px 0px 0px rgba(116,125,134,1);
+    background-color: transparentize($ka-loading-background-color-base, 0.6);
+    box-shadow: 20px 0px 0px 0px transparentize($ka-loading-background-color-base, 0.8),
+                40px 0px 0px 0px $ka-loading-background-color-base;
   }
   100%{
     box-shadow: none;
   }
 }
 .ka-loading-text{
   margin-top: 15px;
+  color: $ka-color-base;
 }
 
 .ka-paging-pages{