From 5ca1eb99195e5d615dd6f59b4d81048bfdc51003 Mon Sep 17 00:00:00 2001 From: Alexander Komarov Date: Mon, 8 Apr 2024 17:47:08 +0300 Subject: [PATCH 1/4] fix demo --- src/Demos/CustomDataRowDemo/CustomDataRowDemo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Demos/CustomDataRowDemo/CustomDataRowDemo.tsx b/src/Demos/CustomDataRowDemo/CustomDataRowDemo.tsx index 2f6e38eb..0a759a3f 100644 --- a/src/Demos/CustomDataRowDemo/CustomDataRowDemo.tsx +++ b/src/Demos/CustomDataRowDemo/CustomDataRowDemo.tsx @@ -21,7 +21,7 @@ const CustomDataRowDemo = () => { dataType: DataType.String, key: 'name', sortDirection: SortDirection.Descend, - width: 100, + width: 150, title: 'Student', }, { key: 'score', title: 'Score', dataType: DataType.Number }, From c098689e789b08ae97c78a0b8f6200633013b613 Mon Sep 17 00:00:00 2001 From: Alexander Komarov Date: Wed, 17 Apr 2024 09:28:47 +0300 Subject: [PATCH 2/4] fix hoverRowDemo --- src/Demos/HoverRowDemo/HoverRowDemo.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/Demos/HoverRowDemo/HoverRowDemo.tsx b/src/Demos/HoverRowDemo/HoverRowDemo.tsx index 8b4faa1e..e8ea31b6 100644 --- a/src/Demos/HoverRowDemo/HoverRowDemo.tsx +++ b/src/Demos/HoverRowDemo/HoverRowDemo.tsx @@ -10,7 +10,7 @@ const ROW_MOUSE_LEAVE = 'ROW_MOUSE_LEAVE'; const HoverRowDemo = () => { - const [selectedItem] = useState(); + const [hoveredItem, setHoveredItem] = useState(); return (
{ onMouseEnter: (event, extendedEvent) => { const { childProps: { - rowKeyValue, + rowData, }, - dispatch, } = extendedEvent; - dispatch({ type: ROW_MOUSE_ENTER, rowKeyValue }); + setHoveredItem(rowData); }, - onMouseLeave: (event, { dispatch }) => { - dispatch({ type: ROW_MOUSE_LEAVE }); + onMouseLeave: () => { + setHoveredItem(undefined); }, }), } }} /> - { selectedItem && ( + { hoveredItem && (
- Hovered: {selectedItem.name} ({selectedItem.company.name}) + Hovered: {hoveredItem.name} ({hoveredItem.company.name})
)} From 645b1b29d925497973386cd5f1b8c9b57479da68 Mon Sep 17 00:00:00 2001 From: Ibrahim Qronfli Date: Wed, 24 Apr 2024 15:07:00 +0200 Subject: [PATCH 3/4] Update Popup.test.tsx --- src/lib/Components/Popup/Popup.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/Components/Popup/Popup.test.tsx b/src/lib/Components/Popup/Popup.test.tsx index 6164f0e7..266c0047 100644 --- a/src/lib/Components/Popup/Popup.test.tsx +++ b/src/lib/Components/Popup/Popup.test.tsx @@ -6,7 +6,7 @@ const props: any = { column: {key: 'field'}, childComponents: {}, dispatch: () => {}, - data: [{ feild: 1 }] + data: [{ field: 1 }] }; it('renders without crashing', () => { From e6b22499bf1d1477e30d9cd1ac64da4833c69fd3 Mon Sep 17 00:00:00 2001 From: Alexander Komarov Date: Sun, 28 Apr 2024 18:12:13 +0300 Subject: [PATCH 4/4] Performance improvement: do not check every cell type while render --- package.json | 2 +- src/Demos/CustomCellDemo/CustomCellDemo.tsx | 2 +- .../CustomEditorDemo/CustomEditorDemo.tsx | 2 +- src/Demos/EditingDemo/EditingDemo.tsx | 2 +- .../HeaderFilterDemo/HeaderFilterDemo.tsx | 2 +- .../HeaderFilterLogicDemo.tsx | 2 +- src/Demos/MaterialDemo/MaterialDemo.tsx | 2 +- .../NullableCellDataDemo.tsx | 2 +- src/lib/Utils/FilterUtils.ts | 2 - src/lib/Utils/TypeUtils.test.ts | 103 ------------------ src/lib/Utils/TypeUtils.ts | 55 ---------- src/lib/utils.ts | 5 +- 12 files changed, 9 insertions(+), 172 deletions(-) delete mode 100644 src/lib/Utils/TypeUtils.test.ts delete mode 100644 src/lib/Utils/TypeUtils.ts diff --git a/package.json b/package.json index d6d7c34e..3e951ead 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ka-table", - "version": "8.12.0", + "version": "9.0.0", "license": "MIT", "repository": "github:komarovalexander/ka-table", "homepage": "https://komarovalexander.github.io/ka-table/#/overview", diff --git a/src/Demos/CustomCellDemo/CustomCellDemo.tsx b/src/Demos/CustomCellDemo/CustomCellDemo.tsx index dcfc417e..9c7c230b 100644 --- a/src/Demos/CustomCellDemo/CustomCellDemo.tsx +++ b/src/Demos/CustomCellDemo/CustomCellDemo.tsx @@ -64,7 +64,7 @@ const CustomCellDemo = () => { return `$${value}`; } if (column.dataType === DataType.Date){ - return value && value.toLocaleDateString('en', { month: '2-digit', day: '2-digit', year: 'numeric' }); + return value && new Date(value).toLocaleDateString('en', { month: '2-digit', day: '2-digit', year: 'numeric' }); } }} data={dataArray} diff --git a/src/Demos/CustomEditorDemo/CustomEditorDemo.tsx b/src/Demos/CustomEditorDemo/CustomEditorDemo.tsx index d5136a77..4ef56953 100644 --- a/src/Demos/CustomEditorDemo/CustomEditorDemo.tsx +++ b/src/Demos/CustomEditorDemo/CustomEditorDemo.tsx @@ -85,7 +85,7 @@ const CustomEditorDemo: React.FC = () => { ]} format= {({ column, value }) => { if (column.dataType === DataType.Date){ - return value && value.toLocaleDateString('en', { month: '2-digit', day: '2-digit', year: 'numeric' }); + return value && new Date(value).toLocaleDateString('en', { month: '2-digit', day: '2-digit', year: 'numeric' }); } }} data={dataArray} diff --git a/src/Demos/EditingDemo/EditingDemo.tsx b/src/Demos/EditingDemo/EditingDemo.tsx index 737ae376..766021c8 100644 --- a/src/Demos/EditingDemo/EditingDemo.tsx +++ b/src/Demos/EditingDemo/EditingDemo.tsx @@ -27,7 +27,7 @@ const EditingDemo: React.FC = () => { ]} format= {({ column, value }) => { if (column.dataType === DataType.Date){ - return value && value.toLocaleDateString('en', { month: '2-digit', day: '2-digit', year: 'numeric' }); + return value && new Date(value).toLocaleDateString('en', { month: '2-digit', day: '2-digit', year: 'numeric' }); } }} data={dataArray} diff --git a/src/Demos/HeaderFilterDemo/HeaderFilterDemo.tsx b/src/Demos/HeaderFilterDemo/HeaderFilterDemo.tsx index 2731c344..4d9ea590 100644 --- a/src/Demos/HeaderFilterDemo/HeaderFilterDemo.tsx +++ b/src/Demos/HeaderFilterDemo/HeaderFilterDemo.tsx @@ -41,7 +41,7 @@ const HeaderFilterDemo = () => { filteringMode={FilteringMode.HeaderFilter} format= {({ column, value }) => { if (column.dataType === DataType.Date) { - return value && value.toLocaleDateString('en', { month: '2-digit', day: '2-digit', year: 'numeric' }); + return value && new Date(value).toLocaleDateString('en', { month: '2-digit', day: '2-digit', year: 'numeric' }); } }} rowKeyField={'id'} diff --git a/src/Demos/HeaderFilterLogicDemo/HeaderFilterLogicDemo.tsx b/src/Demos/HeaderFilterLogicDemo/HeaderFilterLogicDemo.tsx index f3400452..aef837f7 100644 --- a/src/Demos/HeaderFilterLogicDemo/HeaderFilterLogicDemo.tsx +++ b/src/Demos/HeaderFilterLogicDemo/HeaderFilterLogicDemo.tsx @@ -96,7 +96,7 @@ const HeaderFilterLogicDemo = () => { filteringMode={FilteringMode.HeaderFilter} format={({ column, value }) => { if (column.dataType === DataType.Date) { - return value && value.toLocaleDateString('en', { month: '2-digit', day: '2-digit', year: 'numeric' }); + return value && new Date(value).toLocaleDateString('en', { month: '2-digit', day: '2-digit', year: 'numeric' }); } if (column.key === 'departments') { return value?.map((d: any) => d.name).join(', '); diff --git a/src/Demos/MaterialDemo/MaterialDemo.tsx b/src/Demos/MaterialDemo/MaterialDemo.tsx index 84be8944..36262001 100644 --- a/src/Demos/MaterialDemo/MaterialDemo.tsx +++ b/src/Demos/MaterialDemo/MaterialDemo.tsx @@ -42,7 +42,7 @@ const MaterialDemo = () => { ]} format={({ column, value }) => { if (column.dataType === DataType.Date) { - return value && value.toLocaleDateString('en', { month: '2-digit', day: '2-digit', year: 'numeric' }); + return value && new Date(value).toLocaleDateString('en', { month: '2-digit', day: '2-digit', year: 'numeric' }); } }} paging={{ diff --git a/src/Demos/NullableCellDataDemo/NullableCellDataDemo.tsx b/src/Demos/NullableCellDataDemo/NullableCellDataDemo.tsx index b05a8bd5..a748b0d0 100644 --- a/src/Demos/NullableCellDataDemo/NullableCellDataDemo.tsx +++ b/src/Demos/NullableCellDataDemo/NullableCellDataDemo.tsx @@ -87,7 +87,7 @@ const NullableCellDataDemo = () => { return value == null ? '-' : `$${value}`; } if (column.dataType === DataType.Date){ - return value && value.toLocaleDateString('en', {month: '2-digit', day: '2-digit', year: 'numeric' }); + return value && new Date(value).toLocaleDateString('en', {month: '2-digit', day: '2-digit', year: 'numeric' }); } }} filteringMode={FilteringMode.FilterRow} diff --git a/src/lib/Utils/FilterUtils.ts b/src/lib/Utils/FilterUtils.ts index 051b4da6..bf3815e9 100644 --- a/src/lib/Utils/FilterUtils.ts +++ b/src/lib/Utils/FilterUtils.ts @@ -5,7 +5,6 @@ import { Column } from '../Models/Column'; import { EditableCell } from '../Models/EditableCell'; import { FilterOperator } from '../Models/FilterOperator'; import { ITableProps } from '../'; -import { convertToColumnTypes } from './TypeUtils'; import defaultOptions from '../defaultOptions'; import { getValueByColumn } from './DataUtils'; import { isEmpty } from './CommonUtils'; @@ -50,7 +49,6 @@ export const filterAndSearchData = (props: ITableProps) => { data = [...data]; data = extendedFilter ? extendedFilter(data) : data; data = searchText ? searchData(columns, data, searchText, search) : data; - data = convertToColumnTypes(data, columns); data = filterData(data, columns, filter); data = filterByHeaderFilter(data, columns, format); diff --git a/src/lib/Utils/TypeUtils.test.ts b/src/lib/Utils/TypeUtils.test.ts deleted file mode 100644 index fdf74f75..00000000 --- a/src/lib/Utils/TypeUtils.test.ts +++ /dev/null @@ -1,103 +0,0 @@ -import { DataType } from '../enums'; -import { Column } from '../Models/Column'; -import { convertToColumnTypes } from './TypeUtils'; - -interface ITestOptions { - sameObject?: boolean; - sameType?: boolean; -} -type TestCase = (string | undefined | boolean | number | Date | ITestOptions)[]; -class TestSettings { - public cases!: TestCase[]; - public dataType?: DataType; -} - -describe('TypeUtils', () => { - const settings: TestSettings[] = [{ - cases: [ - ['empty', undefined, undefined], - ['fromBoolean', true, true, { - sameType: true, - }], - ['fromDate', Date.UTC(2019, 10, 8), true], - ['fromNumber', 12, true], - ['fromObject', {}, true], - ['fromString', '12', true], - ['fromString false', 'false', false], - ['fromString true', 'true', true], - ], - dataType: DataType.Boolean, - }, { - cases: [ - ['empty', undefined, undefined], - ['fromBoolean', true, 1], - ['fromDate', Date.UTC(2019, 10, 8), 1573171200000, { - sameType: true, - }], - ['fromNumber', 12, 12, { - sameType: true, - }], - ['fromObject', {}, NaN], - ['fromStringNumber', '12', 12], - ['fromString', 'a', NaN], - ], - dataType: DataType.Number, - }, { - cases: [ - ['empty', undefined, undefined], - ['fromBoolean', true, true], - ['fromDate', Date.UTC(2019, 10, 8), Date.UTC(2019, 10, 8)], - ['fromNumber', 12, 12], - ['fromObject', {}, {}, { - sameObject: true, - sameType: true, - }], - ['fromString', 'str', 'str'], - ], - dataType: DataType.Object, - }, { - cases: [ - ['empty', undefined, undefined], - ['fromBoolean', true, true], - ['fromDate', Date.UTC(2019, 10, 8), Date.UTC(2019, 10, 8)], - ['fromNumber', 12, 12], - ['fromObject', {}, {}, { - sameObject: true, - sameType: true, - }], - ['fromString', 'str', 'str'], - ], - dataType: undefined, - }, { - cases: [ - ['empty', undefined, undefined], - ['fromBoolean', true, 'true'], - ['fromDate', Date.UTC(2019, 10, 8), '1573171200000'], - ['fromNumber', 12, '12'], - ['fromObject', {}, '[object Object]'], - ['fromString', 'str', 'str', { - sameType: true, - }], - ], - dataType: DataType.String, - }]; - settings.forEach((test) => { - describe(test.dataType || 'undefined', () => { - const columns: Column[] = [ - { key: 'columnField', title: 'Column Title', dataType: test.dataType }, - ]; - test.cases.forEach((testCase: TestCase) => { - it('should convert from ' + testCase[0], () => { - const data = [{ columnField: testCase[1] }]; - const newData = convertToColumnTypes(data, columns); - const options: ITestOptions = testCase[3] as ITestOptions; - if (options && options.sameObject) { - expect(newData[0].columnField).toStrictEqual(testCase[2]); - } else { - expect(newData[0].columnField).toBe(testCase[2]); - } - }); - }); - }); - }); -}); diff --git a/src/lib/Utils/TypeUtils.ts b/src/lib/Utils/TypeUtils.ts deleted file mode 100644 index 1fd19bb6..00000000 --- a/src/lib/Utils/TypeUtils.ts +++ /dev/null @@ -1,55 +0,0 @@ -import { DataType } from '../enums'; -import { Column } from '../Models/Column'; -import { getValueByColumn, replaceValue } from './DataUtils'; - -export const convertToColumnTypes = (data: any[], columns: Column[]) => { - const columnsToReplace = [...columns]; - const dataCopy = [...data]; - columnsToReplace.forEach((c) => { - if (c.dataType && c.dataType !== DataType.Object){ - for (let i = 0; i < dataCopy.length; i++){ - const value = getValueByColumn(dataCopy[i], c); - if (value != null) { - switch (c.dataType) { - case DataType.String: - if (value.constructor !== String) { - dataCopy[i] = replaceValue(dataCopy[i], c, value.toString()); - continue; - } - break; - case DataType.Number: - if (value.constructor !== Number) { - dataCopy[i] = replaceValue(dataCopy[i], c, Number(value)); - continue; - } - break; - case DataType.Date: - if (value.constructor !== Date) { - dataCopy[i] = replaceValue(dataCopy[i], c, new Date(value)); - continue; - } - break; - case DataType.Boolean: - if (value.constructor !== Boolean) { - dataCopy[i] = replaceValue(dataCopy[i], c, toBoolean(value)); - continue; - } - break; - } - break; - } - } - } - }); - return dataCopy; -}; - -export const toBoolean = (value: any) => { - if (typeof value === 'string') { - switch (value.toLowerCase().trim()) { - case 'true': case 'yes': case '1': return true; - case 'false': case 'no': case '0': case null: return false; - } - } - return Boolean(value); -}; diff --git a/src/lib/utils.ts b/src/lib/utils.ts index c4cd8c91..e2f8c2f4 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -1,14 +1,11 @@ - import * as kaColumnUtils from './Utils/ColumnUtils'; import * as kaDateUtils from './Utils/DateUtils'; -import * as kaPropsUtils from './Utils/PropsUtils'; -import * as kaTypeUtils from './Utils/TypeUtils'; import * as kaPagingUtils from './Utils/PagingUtils'; +import * as kaPropsUtils from './Utils/PropsUtils'; export { kaColumnUtils, kaDateUtils, kaPropsUtils, - kaTypeUtils, kaPagingUtils };