From b68549517a0d4e8e8ffdd337d0ab1b3cbb2e165f Mon Sep 17 00:00:00 2001 From: Komarov Alexander Date: Sat, 28 Nov 2020 21:49:27 +0100 Subject: [PATCH 1/2] Add ability to change styles using sass variables --- package.json | 2 +- src/Demos/CustomCellDemo/CustomCellDemo.tsx | 17 ------ .../CustomThemeDemo/CustomThemeDemo.scss | 8 +++ .../CustomThemeDemo/CustomThemeDemo.test.tsx | 10 +++ src/Demos/CustomThemeDemo/CustomThemeDemo.tsx | 61 +++++++++++++++++++ src/Demos/CustomThemeDemo/dark.scss | 10 +++ src/Demos/Demo.ts | 7 ++- src/Demos/DemoPage.tsx | 2 +- src/Demos/Demos.scss | 6 +- src/Demos/Demos.tsx | 6 +- src/Demos/MaterialDemo/MaterialDemo.scss | 5 +- src/Demos/MenuItems.tsx | 7 +-- src/lib/static/themes/default.scss | 37 +++++++++++ src/lib/style.scss | 51 ++++------------ 14 files changed, 156 insertions(+), 73 deletions(-) create mode 100644 src/Demos/CustomThemeDemo/CustomThemeDemo.scss create mode 100644 src/Demos/CustomThemeDemo/CustomThemeDemo.test.tsx create mode 100644 src/Demos/CustomThemeDemo/CustomThemeDemo.tsx create mode 100644 src/Demos/CustomThemeDemo/dark.scss create mode 100644 src/lib/static/themes/default.scss diff --git a/package.json b/package.json index 69c4544a..1146f925 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ka-table", - "version": "6.0.1", + "version": "6.1.1", "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 6c7b6ebb..daec5a73 100644 --- a/src/Demos/CustomCellDemo/CustomCellDemo.tsx +++ b/src/Demos/CustomCellDemo/CustomCellDemo.tsx @@ -24,24 +24,8 @@ const CustomCell: React.FC = ({ ); }; -const CustomImageCell: React.FC = ({ - value, -}) => { - return ( -
- -
- ); -}; - const tablePropsInit: ITableProps = { columns: [ - { - dataType: DataType.String, - key: 'representative.image', - style: { width: '40px' }, - title: 'Image', - }, { dataType: DataType.String, key: 'representative.name', @@ -100,7 +84,6 @@ const CustomCellDemo: React.FC = () => { cellText: { content: (props) => { switch (props.column.key){ - case 'representative.image': return ; case 'company.hasLoyalProgram': return ; } } diff --git a/src/Demos/CustomThemeDemo/CustomThemeDemo.scss b/src/Demos/CustomThemeDemo/CustomThemeDemo.scss new file mode 100644 index 00000000..37678edf --- /dev/null +++ b/src/Demos/CustomThemeDemo/CustomThemeDemo.scss @@ -0,0 +1,8 @@ +.custom-theme-demo{ + @import './dark.scss'; + @import '../../lib/style.scss'; + + .ka{ + border-radius: 12px; + } +} \ No newline at end of file diff --git a/src/Demos/CustomThemeDemo/CustomThemeDemo.test.tsx b/src/Demos/CustomThemeDemo/CustomThemeDemo.test.tsx new file mode 100644 index 00000000..05995fce --- /dev/null +++ b/src/Demos/CustomThemeDemo/CustomThemeDemo.test.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + +import CustomThemeDemo from './CustomThemeDemo'; + +it('renders without crashing', () => { + const div = document.createElement('div'); + ReactDOM.render(, div); + ReactDOM.unmountComponentAtNode(div); +}); diff --git a/src/Demos/CustomThemeDemo/CustomThemeDemo.tsx b/src/Demos/CustomThemeDemo/CustomThemeDemo.tsx new file mode 100644 index 00000000..560ad676 --- /dev/null +++ b/src/Demos/CustomThemeDemo/CustomThemeDemo.tsx @@ -0,0 +1,61 @@ +// open TS Example or JS Example to see how to override styles +import './CustomThemeDemo.scss'; + +import React, { useState } from 'react'; + +import { ITableProps, kaReducer, Table } from '../../lib'; +import { DataType, EditingMode, FilteringMode, SortingMode } from '../../lib/enums'; +import { DispatchFunc } from '../../lib/types'; + +const dataArray = Array(119).fill(undefined).map( + (_, index) => ({ + column1: index % 2 === 0, + column2: `column:2 row:${index}`, + column3: index % 5, + column4: new Date(2022, 11, index), + id: index, + }), +); + +const tablePropsInit: ITableProps = { + columns: [ + { key: 'column1', title: 'Column 1', dataType: DataType.Boolean, style: {minWidth: 130} }, + { key: 'column2', title: 'Column 2', dataType: DataType.String, style: {width: 240} }, + { key: 'column3', title: 'Column 3', dataType: DataType.Number, style: {width: 230} }, + { key: 'column4', title: 'Column 4', dataType: DataType.Date, style: {minWidth: 100} }, + ], + format: ({ column, value }) => { + if (column.dataType === DataType.Date){ + return value && value.toLocaleDateString('en', {month: '2-digit', day: '2-digit', year: 'numeric' }); + } + }, + paging: { + enabled: true, + pageSize: 7, + pageIndex: 0 + }, + data: dataArray, + editingMode: EditingMode.Cell, + rowKeyField: 'id', + sortingMode: SortingMode.Single, + filteringMode: FilteringMode.FilterRow +}; + +const CustomThemeDemo: React.FC = () => { + const [tableProps, changeTableProps] = useState(tablePropsInit); + + const dispatch: DispatchFunc = (action) => { + changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); + }; + + return ( +
+ + + ); +}; + +export default CustomThemeDemo; diff --git a/src/Demos/CustomThemeDemo/dark.scss b/src/Demos/CustomThemeDemo/dark.scss new file mode 100644 index 00000000..f99db41b --- /dev/null +++ b/src/Demos/CustomThemeDemo/dark.scss @@ -0,0 +1,10 @@ +$ka-background-color: #2c2c2c; +$ka-border-color: #4d4d4d; +$ka-cell-hover-background-color: transparentize(#fff, 0.8); +$ka-color-base:#fefefe; +$ka-input-background-color: $ka-background-color; +$ka-input-border-color: $ka-border-color; +$ka-input-color: $ka-color-base; +$ka-row-hover-background-color: transparentize(#fff, 0.9); +$ka-thead-background-color: #1b1b1b; +$ka-thead-color: #c5c5c5; \ No newline at end of file diff --git a/src/Demos/Demo.ts b/src/Demos/Demo.ts index 67781a72..6228a619 100644 --- a/src/Demos/Demo.ts +++ b/src/Demos/Demo.ts @@ -7,8 +7,9 @@ export default class Demo { public fileName: string, public jsLink: string = '', public tsLink: string = '', - public group: string = '') { - this.jsLink = jsLink + '?file=Demo.js'; - this.tsLink = tsLink + '?file=Demo.tsx'; + public group: string = '', + public linkfile: string = '') { + this.jsLink = jsLink + '?file=' + (this.linkfile || 'Demo.js'); + this.tsLink = tsLink + '?file=' + (this.linkfile || 'Demo.tsx'); } } diff --git a/src/Demos/DemoPage.tsx b/src/Demos/DemoPage.tsx index 0e140e01..f108edef 100644 --- a/src/Demos/DemoPage.tsx +++ b/src/Demos/DemoPage.tsx @@ -6,7 +6,7 @@ import Demo from './Demo'; import DemoText from './DemoText'; import { trackEvent } from './ga'; -const kaStylesDisabled = ['BootstrapDemo', 'MaterialDemo']; +const kaStylesDisabled = ['BootstrapDemo', 'MaterialDemo', 'CustomThemeDemo']; const getDemoPage = (demo: Demo) => { return () => { return ( diff --git a/src/Demos/Demos.scss b/src/Demos/Demos.scss index 0919431f..6b5408ef 100644 --- a/src/Demos/Demos.scss +++ b/src/Demos/Demos.scss @@ -12,7 +12,7 @@ body { color: #353C44; nav{ - width: 350px; + width: 320px; min-height: 2000px; box-sizing: border-box; border-right: 1px solid #CBDCE4; @@ -82,7 +82,7 @@ body { cursor: pointer; color: #53585B; display: block; - padding: 10px 0 10px 40px; + padding: 8px 0 8px 40px; text-decoration: none; .menu-button{ position: relative; @@ -111,7 +111,7 @@ body { &.active{ background-color: #ECF0F4; - padding: 10px 0 10px 36px; + padding-left: 36px; border-left: 4px solid #353C44; color: #353C44; .menu-button{ diff --git a/src/Demos/Demos.tsx b/src/Demos/Demos.tsx index 7d1f14db..832a2709 100644 --- a/src/Demos/Demos.tsx +++ b/src/Demos/Demos.tsx @@ -15,6 +15,7 @@ import CustomCellDemo from './CustomCellDemo/CustomCellDemo'; import CustomDataRowDemo from './CustomDataRowDemo/CustomDataRowDemo'; import CustomEditorDemo from './CustomEditorDemo/CustomEditorDemo'; import CustomHeaderCellDemo from './CustomHeaderCellDemo/CustomHeaderCellDemo'; +import CustomThemeDemo from './CustomThemeDemo/CustomThemeDemo'; import DeleteRowDemo from './DeleteRowDemo/DeleteRowDemo'; import Demo from './Demo'; import { DemoCase } from './DemoCase'; @@ -63,8 +64,8 @@ const demos: Demo[] = [ new Demo(OverviewDemo, '/overview', 'Basics', 'OverviewDemo', 'https://stackblitz.com/edit/table-overview-js', 'https://stackblitz.com/edit/table-overview-ts', ''), new Demo(AddRowDemo, '/add-row', 'Add New Row', 'AddRowDemo', 'https://stackblitz.com/edit/table-add-row-js', 'https://stackblitz.com/edit/table-add-row-ts', 'Editing'), new Demo(AlertCellDemo, '/alert-cell', 'Alert Cell', 'AlertCellDemo', 'https://stackblitz.com/edit/table-alert-cell-js', 'https://stackblitz.com/edit/table-alert-cell-ts', 'Customization'), - new Demo(BootstrapDemo, '/bootstrap', 'Bootstrap', 'BootstrapDemo', 'https://stackblitz.com/edit/table-bootstrap-js', 'https://stackblitz.com/edit/table-bootstrap-ts', ''), - new Demo(MaterialDemo, '/material', 'Material', 'MaterialDemo', 'https://stackblitz.com/edit/table-material-js', 'https://stackblitz.com/edit/table-material-ts', ''), + new Demo(BootstrapDemo, '/bootstrap', 'Bootstrap', 'BootstrapDemo', 'https://stackblitz.com/edit/table-bootstrap-js', 'https://stackblitz.com/edit/table-bootstrap-ts', 'Themes'), + new Demo(MaterialDemo, '/material', 'Material', 'MaterialDemo', 'https://stackblitz.com/edit/table-material-js', 'https://stackblitz.com/edit/table-material-ts', 'Themes'), new Demo(CustomAttributesDemo, '/custom-attributes', 'Custom Attributes', 'CustomAttributesDemo', 'https://stackblitz.com/edit/table-custom-attributes-js', 'https://stackblitz.com/edit/table-custom-attributes-ts', 'Customization'), new Demo(ColumnSettingsDemo, '/column-settings', 'Column Settings', 'ColumnSettingsDemo', 'https://stackblitz.com/edit/table-column-settings-js', 'https://stackblitz.com/edit/table-column-settings-ts', 'Columns'), new Demo(ColumnReorderingDemo, '/column-reordering', 'Column Reordering', 'ColumnReorderingDemo', 'https://stackblitz.com/edit/table-column-reordering-js', 'https://stackblitz.com/edit/table-column-reordering-ts', 'Columns'), @@ -74,6 +75,7 @@ const demos: Demo[] = [ new Demo(CustomDataRowDemo, '/custom-data-row', 'Custom Row', 'CustomDataRowDemo', 'https://stackblitz.com/edit/table-custom-data-row-js', 'https://stackblitz.com/edit/table-custom-data-row-ts', 'Customization'), new Demo(CustomEditorDemo, '/custom-editor', 'Custom Editor', 'CustomEditorDemo', 'https://stackblitz.com/edit/table-custom-editor-js', 'https://stackblitz.com/edit/table-custom-editor-ts', 'Editing'), new Demo(CustomHeaderCellDemo, '/custom-header-cell', 'Custom Header Cell', 'CustomHeaderCellDemo', 'https://stackblitz.com/edit/table-custom-header-cell-js', 'https://stackblitz.com/edit/table-custom-header-cell-ts', 'Customization'), + new Demo(CustomThemeDemo, '/custom-theme', 'Custom Theme', 'CustomThemeDemo', 'https://stackblitz.com/edit/table-custom-theme-js', 'https://stackblitz.com/edit/table-custom-theme-ts', 'Themes', 'dark.scss'), new Demo(DeleteRowDemo, '/delete-row', 'Delete Row', 'DeleteRowDemo', 'https://stackblitz.com/edit/table-delete-row-js', 'https://stackblitz.com/edit/table-delete-row-ts', 'Editing'), new Demo(DetailsRowDemo, '/details-row', 'Details Row', 'DetailsRowDemo', 'https://stackblitz.com/edit/table-details-row-js', 'https://stackblitz.com/edit/table-details-row-ts', 'Rows'), new Demo(EditingDemo, '/editing', 'Editing - Cell', 'EditingDemo', 'https://stackblitz.com/edit/table-editing-js', 'https://stackblitz.com/edit/table-editing-ts', 'Editing'), diff --git a/src/Demos/MaterialDemo/MaterialDemo.scss b/src/Demos/MaterialDemo/MaterialDemo.scss index 3f7dc275..22800b89 100644 --- a/src/Demos/MaterialDemo/MaterialDemo.scss +++ b/src/Demos/MaterialDemo/MaterialDemo.scss @@ -4,6 +4,7 @@ td, th{ padding-left: 20px; padding-right: 20px; + padding: 0px 20px; } .ka-icon{ font-weight: 100; @@ -22,9 +23,7 @@ margin-bottom: 0; } tr { - line-height: 40px; - min-height: 40px; - height: 40px; + height: 65px; } .ka-filter-row { .select-dropdown{ diff --git a/src/Demos/MenuItems.tsx b/src/Demos/MenuItems.tsx index 2033866f..559b5807 100644 --- a/src/Demos/MenuItems.tsx +++ b/src/Demos/MenuItems.tsx @@ -11,8 +11,8 @@ export class MenuItem { public isActive?: boolean; } -const newItems: string[] = ['ManyRowsMemoDemo']; -const updateItems: string[] = ['VirtualScrolling']; +const newItems: string[] = ['CustomThemeDemo', 'Themes']; +const updateItems: string[] = []; const MenuItems: React.FC<{ items: MenuItem[] }> = ({ items }) => { @@ -36,7 +36,6 @@ const MenuItems: React.FC<{ items: MenuItem[] }> = ({ items }) => {
clickByGroup(c)}> - {c.title} {newItems.includes(c.name) && new} {updateItems.includes(c.name) && upd} @@ -45,7 +44,6 @@ const MenuItems: React.FC<{ items: MenuItem[] }> = ({ items }) => { ) : ( - {c.title} {newItems.includes(c.name) && new} {updateItems.includes(c.name) && upd} @@ -59,7 +57,6 @@ const MenuItems: React.FC<{ items: MenuItem[] }> = ({ items }) => {
  • - {i.title} {newItems.includes(i.name) && new} {updateItems.includes(i.name) && upd} diff --git a/src/lib/static/themes/default.scss b/src/lib/static/themes/default.scss new file mode 100644 index 00000000..217e4882 --- /dev/null +++ b/src/lib/static/themes/default.scss @@ -0,0 +1,37 @@ +$ka-border-color: #F9FBFC !default; +$ka-color-base: #353C44 !default; +$ka-thead-color: #747D86 !default; + +$ka-background-color: white !default; +$ka-input-background-color: null !default; +$ka-input-border-color: null !default; +$ka-input-color: null !default; +$ka-cell-color: $ka-color-base !default; +$ka-cell-hover-background-color: null !default; +$ka-cell-line-height: 29px !default; +$ka-cell-padding: 8px 20px !default; +$ka-column-resize-border-color: darken($ka-border-color, 10) !default; +$ka-filter-row-cell-padding: 0 20px 15px 20px; +$ka-font-size: 14px !default; +$ka-group-cell-padding: 8px 10px !default; +$ka-group-row-background-color: #F9FBFC !default; +$ka-group-row-border-color: white !default; +$ka-group-row-border-size: 1px !default; +$ka-icon-font-size: 10px !default; +$ka-input-validation-background-color: #FFE7E7 !default; +$ka-loading-backdrop-color: #ffffff88 !default; +$ka-loading-background-color-base: rgb(116,125,134) !default; +$ka-paging-index-active-background-color: #F1F5F7 !default; +$ka-paging-index-active-color: #747D86 !default; +$ka-paging-index-color: $ka-thead-color !default; +$ka-paging-pages-padding: 0 10px; +$ka-row-border-size: 2px !default; +$ka-row-hover-background-color: null !default; +$ka-selected-border-color: darken($ka-border-color, 7) !default; +$ka-selecter-background-color: #F7FcFd !default; +$ka-thead-background-color: #F1F5F7 !default; +$ka-thead-cell-padding: 15px 20px !default; +$ka-validation-background-color: #FF0C0C !default; +$ka-validation-color: white !default; +$ka-validation-message-font-size: 12px !default; +$ka-validation-message-padding: 0 10px !default; diff --git a/src/lib/style.scss b/src/lib/style.scss index 7241e55d..ba9c89c8 100644 --- a/src/lib/style.scss +++ b/src/lib/style.scss @@ -1,43 +1,6 @@ @import './static/icons.scss'; +@import './static/themes/default.scss'; -$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; @@ -85,6 +48,9 @@ $ka-filter-row-cell-padding: 0 20px 15px 20px; line-height: $ka-cell-line-height; color: $ka-cell-color; } +.ka-cell:hover{ + background-color: $ka-cell-hover-background-color; +} .ka-icon{ font-weight: 100; font-size: $ka-icon-font-size; @@ -92,6 +58,9 @@ $ka-filter-row-cell-padding: 0 20px 15px 20px; } .ka-input{ max-width: 100%; + background-color: $ka-input-background-color; + border: 1px solid $ka-input-border-color; + color: $ka-input-color; } .ka-cell-editor-validation-error { .ka-input{ @@ -125,6 +94,9 @@ $ka-filter-row-cell-padding: 0 20px 15px 20px; border-bottom: $ka-row-border-size solid $ka-border-color; border-top: $ka-row-border-size solid $ka-border-color; } +.ka-row:hover{ + background-color: $ka-row-hover-background-color; +} .ka-dragged-row{ opacity: 0.5; } @@ -232,6 +204,7 @@ $ka-filter-row-cell-padding: 0 20px 15px 20px; display: flex; flex-direction: row; justify-content: flex-end; + padding: $ka-paging-pages-padding; } .ka-paging-page-index{ @@ -241,6 +214,8 @@ $ka-filter-row-cell-padding: 0 20px 15px 20px; min-width: 18px; border-radius: 50%; text-align: center; + color: $ka-paging-index-color; + user-select: none; } .ka-paging-page-index-active{ From 49d8ca8bf634e2d910b6df0a6f42b1262ba36912 Mon Sep 17 00:00:00 2001 From: Komarov Alexander Date: Sat, 28 Nov 2020 21:58:13 +0100 Subject: [PATCH 2/2] Fix version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1146f925..61f821c5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ka-table", - "version": "6.1.1", + "version": "6.1.0", "license": "MIT", "repository": "github:komarovalexander/ka-table", "homepage": "https://komarovalexander.github.io/ka-table/#/overview",