-
-
Notifications
You must be signed in to change notification settings - Fork 57
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #112 from komarovalexander/dev
Add focused property and navigation actions
- Loading branch information
Showing
49 changed files
with
651 additions
and
136 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -90,4 +90,4 @@ export const DateEditor: React.FC<IFilterRowEditorProps> = ({ | |
/> | ||
</> | ||
); | ||
}; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
.ka-row:focus-within { | ||
background: #F7FcFd; | ||
} |
10 changes: 10 additions & 0 deletions
10
src/Demos/KeyboardNavigationDemo/KeyboardNavigationDemo.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import React from 'react'; | ||
import ReactDOM from 'react-dom'; | ||
|
||
import KeyboardNavigationDemo from './KeyboardNavigationDemo'; | ||
|
||
it('renders without crashing', () => { | ||
const div = document.createElement('div'); | ||
ReactDOM.render(<KeyboardNavigationDemo />, div); | ||
ReactDOM.unmountComponentAtNode(div); | ||
}); |
121 changes: 121 additions & 0 deletions
121
src/Demos/KeyboardNavigationDemo/KeyboardNavigationDemo.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,121 @@ | ||
import './KeyboardNavigation.scss'; | ||
|
||
import React, { useState } from 'react'; | ||
|
||
import { ITableProps, kaReducer, Table } from '../../lib'; | ||
import { | ||
clearFocused, moveFocusedDown, moveFocusedLeft, moveFocusedRight, moveFocusedUp, openEditor, | ||
setFocused, updatePageIndex, updateSortDirection, | ||
} from '../../lib/actionCreators'; | ||
import { DataType, EditingMode, SortingMode } from '../../lib/enums'; | ||
import { DispatchFunc } from '../../lib/types'; | ||
|
||
const dataArray = Array(100).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, | ||
}), | ||
); | ||
|
||
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 }, | ||
], | ||
data: dataArray, | ||
rowKeyField: 'id', | ||
sortingMode: SortingMode.Single, | ||
editingMode: EditingMode.Cell, | ||
paging: { | ||
enabled: true, | ||
pageIndex: 0, | ||
pageSize: 10, | ||
}, | ||
focused: { | ||
cell: { | ||
columnKey: 'column4', | ||
rowKeyValue: 2 | ||
} | ||
} | ||
}; | ||
|
||
const KeyboardNavigationDemo: React.FC = () => { | ||
const [tableProps, changeTableProps] = useState(tablePropsInit); | ||
const dispatch: DispatchFunc = (action) => { | ||
changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); | ||
}; | ||
return ( | ||
<> | ||
<p style={{fontSize: 12}}>Use arrow keys to navigate by data cells</p> | ||
<Table | ||
{...tableProps} | ||
childComponents={{ | ||
cell: { | ||
elementAttributes: ({column, rowKeyValue, isEditableCell}) => { | ||
if (isEditableCell) return undefined; | ||
|
||
const cell = { columnKey: column.key, rowKeyValue } | ||
const isFocused = cell.columnKey === tableProps.focused?.cell?.columnKey | ||
&& cell.rowKeyValue === tableProps.focused?.cell?.rowKeyValue; | ||
return { | ||
tabIndex: 0, | ||
ref: (ref: any) => isFocused && ref?.focus(), | ||
onKeyUp: (e) => { | ||
switch (e.keyCode){ | ||
case 39: dispatch(moveFocusedRight({ end: e.ctrlKey })); break; | ||
case 37: dispatch(moveFocusedLeft({ end: e.ctrlKey })); break; | ||
case 38: dispatch(moveFocusedUp({ end: e.ctrlKey })); break; | ||
case 40: dispatch(moveFocusedDown({ end: e.ctrlKey })); break; | ||
case 13: | ||
dispatch(openEditor(cell.rowKeyValue, cell.columnKey)); | ||
dispatch(setFocused({ cellEditorInput: cell })); | ||
break; | ||
} | ||
}, | ||
onFocus: () => !isFocused && dispatch(setFocused({ cell: { columnKey: column.key, rowKeyValue } })), | ||
onKeyDown: (e) => e.keyCode !== 9 && e.preventDefault(), | ||
onBlur: () => isFocused && dispatch(clearFocused()) | ||
} | ||
}, | ||
}, | ||
cellEditorInput: { | ||
elementAttributes: ({column, rowKeyValue}) => { | ||
const isFocused = column.key === tableProps.focused?.cellEditorInput?.columnKey | ||
&& rowKeyValue === tableProps.focused?.cellEditorInput?.rowKeyValue; | ||
const cell = { columnKey: column.key, rowKeyValue }; | ||
return { | ||
ref: (ref: any) => isFocused && ref?.focus(), | ||
onKeyUp: (e) => e.keyCode === 13 && dispatch(setFocused({ cell })), | ||
onBlur: (e, {baseFunc}) => { | ||
baseFunc(); | ||
dispatch(clearFocused()) | ||
}, | ||
onFocus: () => !isFocused && dispatch(setFocused({ cell: { columnKey: column.key, rowKeyValue } })), | ||
} | ||
}, | ||
}, | ||
pagingIndex: { | ||
elementAttributes: (props) => ({ | ||
tabIndex: 0, | ||
onKeyUp: (e) => e.keyCode === 13 && dispatch(updatePageIndex(props.pageIndex)) | ||
}), | ||
}, | ||
headCell: { | ||
elementAttributes: (props) => ({ | ||
tabIndex: 0, | ||
onKeyUp: (e) => e.keyCode === 13 && dispatch(updateSortDirection(props.column.key)) | ||
}), | ||
}, | ||
}} | ||
dispatch={dispatch} | ||
/> | ||
</> | ||
); | ||
}; | ||
|
||
export default KeyboardNavigationDemo; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -14,4 +14,4 @@ export const DeleteRow: React.FC<ICellTextProps> = ({ | |
alt='' | ||
/> | ||
); | ||
}; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
.responsive-demo{ | ||
.ka{ | ||
width: 400px; | ||
table { | ||
border-collapse: collapse; | ||
} | ||
|
||
/* Force table to not be like tables anymore */ | ||
table, thead, tbody, th, td, tr { | ||
display: block; | ||
} | ||
|
||
/* Hide table headers (but not display: none;, for accessibility) */ | ||
thead { | ||
position: absolute; | ||
top: -9999px; | ||
left: -9999px; | ||
} | ||
tr:nth-of-type(even) { | ||
background: #f6f6f6; | ||
td{ | ||
border-bottom: 1px solid white; | ||
} | ||
} | ||
|
||
tr { border: 1px solid #ccc; } | ||
|
||
td.ka-cell { | ||
/* Behave like a "row" */ | ||
border: none; | ||
border-bottom: 1px solid #eee; | ||
position: relative; | ||
padding-left: 50%; | ||
} | ||
|
||
td.ka-cell:before { | ||
/* Now like a table header */ | ||
position: absolute; | ||
/* Top/left values mimic padding */ | ||
top: 6px; | ||
left: 6px; | ||
width: 45%; | ||
padding-right: 10px; | ||
white-space: nowrap; | ||
/* Label the data */ | ||
content: attr(data-column); | ||
|
||
color: #000; | ||
font-weight: bold; | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import React from 'react'; | ||
import ReactDOM from 'react-dom'; | ||
|
||
import ResponsiveDemo from './ResponsiveDemo'; | ||
|
||
it('renders without crashing', () => { | ||
const div = document.createElement('div'); | ||
ReactDOM.render(<ResponsiveDemo />, div); | ||
ReactDOM.unmountComponentAtNode(div); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
// open TS Example or JS Example to see how to override styles | ||
import './ResponsiveDemo.scss'; | ||
|
||
import React, { useState } from 'react'; | ||
|
||
import { ITableProps, kaReducer, Table } from '../../lib'; | ||
import { DataType, EditingMode } from '../../lib/enums'; | ||
import { DispatchFunc } from '../../lib/types'; | ||
|
||
const dataArray = Array(10).fill(undefined).map( | ||
(_, index) => ({ | ||
column1: `value:1 row:${index}`, | ||
column2: `value:2 row:${index}`, | ||
column3: `value:3 row:${index}`, | ||
column4: `value:4 row:${index}`, | ||
id: index, | ||
}), | ||
); | ||
|
||
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 }, | ||
], | ||
data: dataArray, | ||
editingMode: EditingMode.Cell, | ||
rowKeyField: 'id', | ||
}; | ||
|
||
const ResponsiveDemo: React.FC = () => { | ||
const [tableProps, changeTableProps] = useState(tablePropsInit); | ||
const dispatch: DispatchFunc = (action) => { | ||
changeTableProps((prevState: ITableProps) => kaReducer(prevState, action)); | ||
}; | ||
|
||
return ( | ||
<div className='responsive-demo'> | ||
<Table | ||
{...tableProps} | ||
dispatch={dispatch} | ||
childComponents={{ | ||
cell: { | ||
elementAttributes: ({ column }) => ({ | ||
'data-column': column.title | ||
} as any) | ||
} | ||
}} | ||
/> | ||
<br /> | ||
<div> | ||
Based on the <a href='https://codepen.io/andornagy/pen/EVXpbR' target='_blank' rel='noopener noreferrer'>example</a>. | ||
But notice that ka-table can be used with any adaptive approach of HTML tables.</div> | ||
</div> | ||
); | ||
}; | ||
|
||
export default ResponsiveDemo; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -12,4 +12,4 @@ const useKaFocusRef = (focusedData: any) => { | |
} | ||
}; | ||
|
||
export default useKaFocusRef; | ||
export default useKaFocusRef; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.