import './EditingRowDemo.scss' ; import React , { useState } from 'react' ; import { ITableProps , kaReducer , Table } from '../../lib' ; import { closeRowEditors , openRowEditors , saveRowEditors } from '../../lib/actionCreators' ; import { DataType } from '../../lib/enums' ; import { ICellEditorProps , ICellTextProps } from '../../lib/props' ; import { DispatchFunc } from '../../lib/types' ; const dataArray = [ { id : 1 , name : 'Mike Wazowski' , score : 80 , passed : true } , { id : 2 , name : 'Billi Bob' , score : 55 , passed : false , nextTry : new Date ( 2021 , 10 , 8 , 10 ) } , { id : 3 , name : 'Tom Williams' , score : 45 , passed : false , nextTry : new Date ( 2021 , 11 , 8 , 10 ) } , { 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 , nextTry : new Date ( 2021 , 10 , 9 , 10 ) } , ] ; const EditButton = ( { dispatch , rowKeyValue } ) => { return ( < div className = 'edit-cell-button' > < img src = 'static/icons/edit.svg' alt = 'Edit Row' title = 'Edit Row' onClick = { ( ) => dispatch ( openRowEditors ( rowKeyValue ) ) } /> < /div>); } ; const SaveButton = ( { dispatch , rowKeyValue } ) => { return ( < div className = 'buttons' style = { { display : 'flex' , justifyContent : 'space-between' } } > < img src = 'static/icons/save.svg' className = 'save-cell-button' alt = 'Save' title = 'Save' onClick = { ( ) => { dispatch ( saveRowEditors ( rowKeyValue , { validate : true , } ) ) ; } } /> < img src = 'static/icons/close.svg' className = 'close-cell-button' alt = 'Cancel' title = 'Cancel' onClick = { ( ) => { dispatch ( closeRowEditors ( rowKeyValue ) ) ; } } /> < /div>); } ; const tablePropsInit = { columns : [ { key : 'name' , title : 'Name' , dataType : DataType . String } , { key : 'score' , title : 'Score' , dataType : DataType . Number } , { key : 'passed' , title : 'Passed' , dataType : DataType . Boolean } , { key : 'nextTry' , title : 'Next Try' , dataType : DataType . Date } , { key : 'editColumn' , width : 80 } , ] , format : ( { column , value } ) => { if ( column . dataType === DataType . Date ) { return value && value . toLocaleDateString ( 'en' , { month : '2-digit' , day : '2-digit' , year : 'numeric' } ) ; } } , data : dataArray , rowKeyField : 'id' , validation : ( { column , value } ) => { if ( column . key === 'name' ) { return value ? '' : 'value must be specified' ; } } } ; const EditingDemoRow = ( ) => { const [ tableProps , changeTableProps ] = useState ( tablePropsInit ) ; const dispatch = ( action ) => { changeTableProps ( ( prevState ) => kaReducer ( prevState , action ) ) ; } ; return ( < div className = 'editing-row-demo' > < Table { ... tableProps } childComponents = { { cellText : { content : ( props ) => { if ( props . column . key === 'editColumn' ) { return < EditButton { ... props } / > ; } } } , cellEditor : { content : ( props ) => { if ( props . column . key === 'editColumn' ) { return < SaveButton { ... props } / > ; } } } } } dispatch = { dispatch } / > < /div>); } ; export default EditingDemoRow ;