Skip to content

Commit

Permalink
Merge pull request #101 from komarovalexander/dev
Browse files Browse the repository at this point in the history
Decrease ka-table package size and fix row customization
  • Loading branch information
komarovalexander authored Nov 7, 2020
2 parents c2c56ad + 80f3a40 commit e4c0c03
Show file tree
Hide file tree
Showing 25 changed files with 162 additions and 216 deletions.
23 changes: 6 additions & 17 deletions gulpfile.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
var gulp = require('gulp');
var file = require('gulp-file');

var ts = require('gulp-typescript');
var tsProject = ts.createProject('tsconfig.json');
var jsonfile = require('jsonfile')
var ghPages = require('gulp-gh-pages');
var replace = require('gulp-replace');
Expand All @@ -21,45 +19,36 @@ gulp.task('demos', function () {
.pipe(gulp.dest('build/demos'));
});

gulp.task('build', function () {
gulp.task('compile', function () {
return gulp
.src([
'src/lib/**/*.tsx',
'!src/**/*.test.tsx',
'src/lib/**/*.ts',
'!src/**/*.test.ts',
'README.md',
'LICENSE',
])
.pipe(gulp.dest('dist'))
.pipe(tsProject())
.pipe(gulp.dest('dist'))
.on('end', () => {
var pkg = require('./package.json');
delete pkg.dependencies;
delete pkg.devDependencies;
delete pkg.scripts;
delete pkg.husky;
delete pkg.jest;
var outputFile = 'dist/package.json';
file(outputFile, '');
jsonfile.writeFile('dist/package.json', pkg, { spaces: 2 });
gulp
.src([
'README.md',
'LICENSE',
])
.pipe(gulp.dest('dist'));
gulp
.src([
'src/lib/**/*.scss'
])
.pipe(gulp.dest('dist'))
.on('end', () => {
gulp.src('dist/**/*.scss')
gulp.src('dist/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('dist'));
});
gulp
.src([
'src/lib/static/**/*'
'src/lib/static/*'
])
.pipe(gulp.dest('dist/static'))
});
Expand Down
11 changes: 8 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ka-table",
"version": "5.5.1",
"version": "6.0.0",
"license": "MIT",
"repository": "github:komarovalexander/ka-table",
"homepage": "https://komarovalexander.github.io/ka-table/#/overview",
Expand Down Expand Up @@ -33,7 +33,7 @@
"coveralls": "cat ./coverage/lcov.info | node node_modules/.bin/coveralls",
"dist": "tsc --declaration --jsx react --esModuleInterop true --outDir dist src/lib/index.ts && gulp build",
"pack": "gulp build && cd dist && npm pack && cd ..",
"compile": "tsc src/lib/index.ts --jsx react --esModuleInterop true --outDir dist --declaration true --target es5"
"compile": "tsc src/lib/index.ts --jsx react --esModuleInterop true --outDir dist --declaration true --target es5 && gulp compile"
},
"eslintConfig": {
"extends": "react-app"
Expand Down Expand Up @@ -65,7 +65,6 @@
"gulp-gh-pages": "^0.5.4",
"gulp-replace": "^1.0.0",
"gulp-sass": "^4.0.2",
"gulp-typescript": "^5.0.1",
"jsonfile": "^6.0.1",
"node-sass": "^4.13.1",
"react-filter-control": "^2.1.0",
Expand All @@ -86,6 +85,12 @@
},
"keywords": [
"datagrid",
"ts",
"js",
"javascript",
"typescript",
"datatable",
"ui-component",
"react",
"table",
"component",
Expand Down
29 changes: 0 additions & 29 deletions src/Demos/BootstrapDemo/customHooks.ts

This file was deleted.

2 changes: 1 addition & 1 deletion src/Demos/BootstrapDemo/editors.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export const CustomLookupEditor: React.FC<IFilterRowEditorProps> = ({
);
};

export const FilterOperators: React.FC<{ column: Column; dispatch: DispatchFunc }> = ({
const FilterOperators: React.FC<{ column: Column; dispatch: DispatchFunc }> = ({
column, dispatch,
}) => {
return (
Expand Down
11 changes: 7 additions & 4 deletions src/Demos/CustomDataRowDemo/CustomDataRowDemo.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { useState } from 'react';

import { ITableProps, kaReducer, Table } from '../../lib';
import defaultOptions from '../../lib/defaultOptions';
import { DataType, SortDirection, SortingMode } from '../../lib/enums';
import { IDataRowProps } from '../../lib/props';
import { DispatchFunc } from '../../lib/types';
Expand All @@ -14,11 +15,13 @@ const dataArray: any[] = [
{ id: 6, name: 'Sunny Fox', score: 33, passed: false },
];

const DataRow: React.FC<IDataRowProps> = ({rowData}) => {
const DataRow: React.FC<IDataRowProps> = ({rowData, columns}) => {
return (
<div>
{rowData.name}: {rowData.score} ({rowData.passed ? 'Passed' : 'Failed'})
</div>
<td className={defaultOptions.css.cell} colSpan={columns.length}>
<div>
{rowData.name}: {rowData.score} ({rowData.passed ? 'Passed' : 'Failed'})
</div>
</td>
);
};

Expand Down
3 changes: 1 addition & 2 deletions src/Demos/Demo.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,7 @@ export default class Demo {
public fileName: string,
public jsLink: string = '',
public tsLink: string = '',
public group: string = '',
public disableOnlineEditor: boolean = false) {
public group: string = '') {
this.jsLink = jsLink + '?file=Demo.js';
this.tsLink = tsLink + '?file=Demo.tsx';
}
Expand Down
20 changes: 8 additions & 12 deletions src/Demos/DemoPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,18 +18,14 @@ const getDemoPage = (demo: Demo) => {
<div className='code'>
<div className='editor-links'>
<span>Open in Online Editor: </span>
{demo.disableOnlineEditor || (
<>
<a className='editor-link editor-link-ts'
href={demo.tsLink}
onMouseDown={() => { trackEvent('click', 'ts_example', demo.path); }}
rel='noopener noreferrer'
target='_blank'>
TS Example
</a>
<span>|</span>
</>
)}
<a className='editor-link editor-link-ts'
href={demo.tsLink}
onMouseDown={() => { trackEvent('click', 'ts_example', demo.path); }}
rel='noopener noreferrer'
target='_blank'>
TS Example
</a>
<span>|</span>
<a className='editor-link editor-link-js'
href={demo.jsLink}
onMouseDown={() => { trackEvent('click', 'js_example', demo.path); }}
Expand Down
16 changes: 9 additions & 7 deletions src/Demos/Demos.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ import LoadingDemo from './LoadingDemo/LoadingDemo';
import ManyColumnsDemo from './ManyColumnsDemo/ManyColumnsDemo';
import ManyRowsDemo from './ManyRowsDemo/ManyRowsDemo';
import ManyRowsGroupingDemo from './ManyRowsGroupingDemo/ManyRowsGroupingDemo';
import ManyRowsMemoDemo from './ManyRowsMemoDemo/ManyRowsMemoDemo';
import MaterialDemo from './MaterialDemo/MaterialDemo';
import NullableCellDataDemo from './NullableCellDataDemo/NullableCellDataDemo';
import OverviewDemo from './OverviewDemo/OverviewDemo';
Expand Down Expand Up @@ -85,15 +86,16 @@ const demos: Demo[] = [
new Demo(FilterRowCustomEditorDemo, '/filter-row-custom-editor', 'Filter Row - Custom Editor', 'FilterRowCustomEditorDemo', 'https://stackblitz.com/edit/table-filter-row-custom-editor-js', 'https://stackblitz.com/edit/table-filter-row-custom-editor-ts', 'Filtering'),
new Demo(FixedColumnDemo, '/fixed-column', 'Fixed Colum', 'FixedColumnDemo', 'https://stackblitz.com/edit/table-fixed-column-js', 'https://stackblitz.com/edit/table-fixed-column-ts', 'Columns'),
new Demo(GetDataByPropsDemo, '/get-data-by-props', 'Get Data By Props', 'GetDataByPropsDemo', 'https://stackblitz.com/edit/table-get-data-by-props-js', 'https://stackblitz.com/edit/table-get-data-by-props-ts', 'Miscellaneous'),
new Demo(GroupingDemo, '/grouping', 'Grouping', 'GroupingDemo', 'https://stackblitz.com/edit/table-grouping-js', 'https://stackblitz.com/edit/table-grouping-ts', 'Grouping', true),
new Demo(GroupingCustomCellDemo, '/grouping-custom-cell', 'Grouping Custom Cell', 'GroupingCustomCellDemo', 'https://stackblitz.com/edit/table-grouping-custom-cell-js', 'https://stackblitz.com/edit/table-grouping-custom-cell-ts', 'Grouping', true),
new Demo(GroupingCustomRowDemo, '/grouping-custom-row', 'Grouping Custom Row', 'GroupingCustomRowDemo', 'https://stackblitz.com/edit/table-grouping-custom-row-js', 'https://stackblitz.com/edit/table-grouping-custom-row-ts', 'Grouping', true),
new Demo(GroupingDemo, '/grouping', 'Grouping', 'GroupingDemo', 'https://stackblitz.com/edit/table-grouping-js', 'https://stackblitz.com/edit/table-grouping-ts', 'Grouping'),
new Demo(GroupingCustomCellDemo, '/grouping-custom-cell', 'Grouping Custom Cell', 'GroupingCustomCellDemo', 'https://stackblitz.com/edit/table-grouping-custom-cell-js', 'https://stackblitz.com/edit/table-grouping-custom-cell-ts', 'Grouping'),
new Demo(GroupingCustomRowDemo, '/grouping-custom-row', 'Grouping Custom Row', 'GroupingCustomRowDemo', 'https://stackblitz.com/edit/table-grouping-custom-row-js', 'https://stackblitz.com/edit/table-grouping-custom-row-ts', 'Grouping'),
new Demo(HoverRowDemo, '/hover-row', 'Hover Row', 'HoverRowDemo', 'https://stackblitz.com/edit/table-hover-row-js', 'https://stackblitz.com/edit/table-hover-row-ts', 'Rows'),
new Demo(LoadingDemo, '/loading', 'Loading', 'LoadingDemo', 'https://stackblitz.com/edit/table-loading-js', 'https://stackblitz.com/edit/table-loading-ts', 'Miscellaneous'),
new Demo(ManyColumnsDemo, '/many-columns', 'Many Columns', 'ManyColumnsDemo', 'https://stackblitz.com/edit/table-many-columns-js', 'https://stackblitz.com/edit/table-many-columns-ts', 'Columns'),
new Demo(ManyRowsDemo, '/many-rows', 'Many Rows (100k)', 'ManyRowsDemo', 'https://stackblitz.com/edit/table-many-rows-js', 'https://stackblitz.com/edit/table-many-rows-ts', 'Virtual Scrolling'),
new Demo(ManyRowsGroupingDemo, '/many-rows-grouping', 'Many Rows (10k Grouped)', 'ManyRowsGroupingDemo', 'https://stackblitz.com/edit/table-many-rows-grouping-js', 'https://stackblitz.com/edit/table-many-rows-grouping-ts', 'Virtual Scrolling', true),
new Demo(NullableCellDataDemo, '/nullable-cell-data', 'Nullable Cell Data', 'NullableCellDataDemo', 'https://stackblitz.com/edit/table-nullable-cell-data-js', 'https://stackblitz.com/edit/table-nullable-cell-data-ts', 'Miscellaneous', true),
new Demo(ManyRowsDemo, '/many-rows', '100K Rows', 'ManyRowsDemo', 'https://stackblitz.com/edit/table-many-rows-js', 'https://stackblitz.com/edit/table-many-rows-ts', 'Virtual Scrolling'),
new Demo(ManyRowsMemoDemo, '/many-rows-memo', '300K Rows & memo', 'ManyRowsMemoDemo', 'https://stackblitz.com/edit/table-many-rows-memo-js', 'https://stackblitz.com/edit/table-many-rows-memo-ts', 'Virtual Scrolling'),
new Demo(ManyRowsGroupingDemo, '/many-rows-grouping', '10k Grouped', 'ManyRowsGroupingDemo', 'https://stackblitz.com/edit/table-many-rows-grouping-js', 'https://stackblitz.com/edit/table-many-rows-grouping-ts', 'Virtual Scrolling'),
new Demo(NullableCellDataDemo, '/nullable-cell-data', 'Nullable Cell Data', 'NullableCellDataDemo', 'https://stackblitz.com/edit/table-nullable-cell-data-js', 'https://stackblitz.com/edit/table-nullable-cell-data-ts', 'Miscellaneous'),
new Demo(PagingDemo, '/paging', 'Paging', 'PagingDemo', 'https://stackblitz.com/edit/table-paging-js', 'https://stackblitz.com/edit/table-paging-ts', 'Miscellaneous'),
new Demo(PrintDemo, '/print', 'Print', 'PrintDemo', 'https://stackblitz.com/edit/table-print-js', 'https://stackblitz.com/edit/table-print-ts', 'Export / Print'),
new Demo(ReduxDemo, '/redux', 'Redux', 'ReduxDemo', 'https://stackblitz.com/edit/table-redux-js', 'https://stackblitz.com/edit/table-redux-ts', ''),
Expand All @@ -103,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', true),
new Demo(StateStoringDemo, '/state-storing', 'State Storing', 'StateStoringDemo', 'https://stackblitz.com/edit/table-state-storing-js', '', 'Miscellaneous'),
new Demo(ValidationDemo, '/validation', 'Validation', 'ValidationDemo', 'https://stackblitz.com/edit/table-validation-js', 'https://stackblitz.com/edit/table-validation-ts', 'Editing'),
];

Expand Down
6 changes: 3 additions & 3 deletions src/Demos/FilterExtendedDemo/FilterExtendedDemo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const tablePropsInit: ITableProps = {
rowKeyField: 'id',
};

export const fields = [{
const fields = [{
caption: 'Name',
name: 'name',
operators: [{
Expand Down Expand Up @@ -56,14 +56,14 @@ export const fields = [{
}],
}];

export const groups = [{
const groups = [{
caption: 'And',
name: 'and',
}, {
caption: 'Or',
name: 'or',
}];
export const filter: IFilterControlFilterValue = {
const filter: IFilterControlFilterValue = {
groupName: 'and',
items: [
{
Expand Down
6 changes: 2 additions & 4 deletions src/Demos/FilterExtendedDemo/filterData.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
export const isEmpty = (value: any) => (value == null || value.length === 0);

const contains = (data: any[], item: any) => {
if (!item.value) { return true; }
return data[item.field].toLowerCase().includes(item.value.toLowerCase());
Expand All @@ -18,7 +16,7 @@ const isNotEqual = (data: any[], item: any) => {
};
const more = (data: any[], item: any) => data[item.field] > item.value;
const less = (data: any[], item: any) => data[item.field] < item.value;
export const filterItem = (data: any[], filter: any) => {
const filterItem = (data: any[], filter: any) => {
switch (filter.operator) {
case 'contains': return contains(data, filter);
case 'doesNotContain': return doesNotContain(data, filter);
Expand All @@ -30,7 +28,7 @@ export const filterItem = (data: any[], filter: any) => {
}
};

export const filterGroup = (data: any[], groupName: string, items: any[]): any[] =>
const filterGroup = (data: any[], groupName: string, items: any[]): any[] =>
(groupName.toLowerCase() === 'or' ? filterGroupOr(data, items) : filterGroupAnd(data, items));

export const filterGroupOr = (data: any[], items: any[]): any[] => {
Expand Down
5 changes: 5 additions & 0 deletions src/Demos/ManyRowsDemo/ManyRowsDemo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,11 @@ const ManyRowsDemo: React.FC = () => {
<Table
{...tableProps}
dispatch={dispatch}
childComponents={{
tableWrapper: {
elementAttributes: () => ({ style: { maxHeight: 600 }})
}
}}
/>
);
};
Expand Down
5 changes: 5 additions & 0 deletions src/Demos/ManyRowsGroupingDemo/ManyRowsGroupingDemo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,11 @@ const ManyRowsGroupingDemo: React.FC = () => {
<Table
{...tableProps}
dispatch={dispatch}
childComponents={{
tableWrapper: {
elementAttributes: () => ({ style: { maxHeight: 600 }})
}
}}
/>
);
};
Expand Down
10 changes: 10 additions & 0 deletions src/Demos/ManyRowsMemoDemo/ManyRowsMemoDemo.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import React from 'react';
import ReactDOM from 'react-dom';

import ManyRowsMemoDemo from './ManyRowsMemoDemo';

it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<ManyRowsMemoDemo />, div);
ReactDOM.unmountComponentAtNode(div);
});
66 changes: 66 additions & 0 deletions src/Demos/ManyRowsMemoDemo/ManyRowsMemoDemo.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import React, { useState } from 'react';

import { ITableProps, kaReducer, Table } from '../../lib';
import DataRowContent from '../../lib/Components/DataRowContent/DataRowContent';
import { DataType } from '../../lib/enums';
import { IDataRowProps } from '../../lib/props';
import { DispatchFunc } from '../../lib/types';

let dataArray: any[];

const getDataArray = () => {
if (!dataArray){
dataArray = Array(300000).fill(undefined).map(
(_, index) => ({
column1: `column:1 row:${index}`,
column2: `column:2 row:${index}`,
column3: `column:3 row:${index}`,
column4: `column:4 row:${index}`,
id: index,
}),
);
}
return dataArray;
};

const tablePropsInit: ITableProps = {
columns: [
{ key: 'column1', title: 'Column 1', dataType: DataType.String },
{ key: 'column2', title: 'Column 2', dataType: DataType.String },
{ key: 'column3', title: 'Column 3', dataType: DataType.String },
{ key: 'column4', title: 'Column 4', dataType: DataType.String },
],
rowKeyField: 'id',
virtualScrolling: {
enabled: true
},
};

const DataRowContentMemo = React.memo((props: IDataRowProps) => <DataRowContent {...props}/>, () => true);

const ManyRowsMemoDemo: React.FC = () => {
const [tableProps, changeTableProps] = useState({ ...tablePropsInit, data: getDataArray() });
const dispatch: DispatchFunc = (action) => {
changeTableProps((prevState: ITableProps) => kaReducer(prevState, action));
};

return (
<Table
{...tableProps}
dispatch={dispatch}
childComponents={{
cellText: {
elementAttributes: () => ({ style: {lineHeight: '25px'} }),
},
dataRow: {
content: (props: IDataRowProps) => <DataRowContentMemo {...props}/>
},
tableWrapper: {
elementAttributes: () => ({ style: { maxHeight: 600 }})
}
}}
/>
);
};

export default ManyRowsMemoDemo;
Loading

0 comments on commit e4c0c03

Please sign in to comment.