diff --git a/package.json b/package.json index 6c53186e..69c4544a 100644 --- a/package.json +++ b/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", diff --git a/public/static/icons/ExportToPdfDemo.svg b/public/static/icons/ExportToPdfDemo.svg new file mode 100644 index 00000000..e25d4201 --- /dev/null +++ b/public/static/icons/ExportToPdfDemo.svg @@ -0,0 +1,28 @@ + + + + + diff --git a/public/static/icons/ManyRowsMemoDemo.svg b/public/static/icons/ManyRowsMemoDemo.svg new file mode 100644 index 00000000..9f86eb1c --- /dev/null +++ b/public/static/icons/ManyRowsMemoDemo.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/public/static/icons/PrintDemo.svg b/public/static/icons/PrintDemo.svg new file mode 100644 index 00000000..e25d4201 --- /dev/null +++ b/public/static/icons/PrintDemo.svg @@ -0,0 +1,28 @@ + + + + + diff --git a/src/Demos/Demos.tsx b/src/Demos/Demos.tsx index 47c544bf..7d1f14db 100644 --- a/src/Demos/Demos.tsx +++ b/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'), ]; diff --git a/src/Demos/ExportDemo/ExportDemo.tsx b/src/Demos/ExportDemo/ExportDemo.tsx index 560cfd93..b8f118b0 100644 --- a/src/Demos/ExportDemo/ExportDemo.tsx +++ b/src/Demos/ExportDemo/ExportDemo.tsx @@ -51,13 +51,6 @@ const ExportDemo: React.FC = () => { ({ - id: 'table-to-xls' - }) - } - }} /> ); diff --git a/src/Demos/ExportToPdfDemo/ExportToPdfDemo.tsx b/src/Demos/ExportToPdfDemo/ExportToPdfDemo.tsx index 0962ae30..cc0b8d0b 100644 --- a/src/Demos/ExportToPdfDemo/ExportToPdfDemo.tsx +++ b/src/Demos/ExportToPdfDemo/ExportToPdfDemo.tsx @@ -65,13 +65,6 @@ const ExportToPdfDemo: React.FC = () => {
({ - id: 'table-to-xls' - }) - } - }} /> ); diff --git a/src/lib/Utils/FilterUtils.test.ts b/src/lib/Utils/FilterUtils.test.ts index 6473b929..768408f6 100644 --- a/src/lib/Utils/FilterUtils.test.ts +++ b/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(); diff --git a/src/lib/Utils/FilterUtils.ts b/src/lib/Utils/FilterUtils.ts index 35261640..f9ef5112 100644 --- a/src/lib/Utils/FilterUtils.ts +++ b/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) => { diff --git a/src/lib/Utils/__snapshots__/FilterUtils.test.ts.snap b/src/lib/Utils/__snapshots__/FilterUtils.test.ts.snap index db092895..a0559a16 100644 --- a/src/lib/Utils/__snapshots__/FilterUtils.test.ts.snap +++ b/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 { diff --git a/src/lib/style.scss b/src/lib/style.scss index 124d9016..7241e55d 100644 --- a/src/lib/style.scss +++ b/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,7 +168,7 @@ $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; @@ -154,7 +176,7 @@ $ka-paging-index-active-background-color: #F1F5F7; 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,19 +204,19 @@ $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; @@ -202,6 +224,7 @@ $ka-paging-index-active-background-color: #F1F5F7; } .ka-loading-text{ margin-top: 15px; + color: $ka-color-base; } .ka-paging-pages{