Dana rm32100 table process code review

src/components/BackgroundLayer.js

@@ -252,7 +252,7 @@ export class BackgroundLayer extends React.Component {
 
   renderHighlightedWeekends() {
     return (
-      <Fragment>
+      <>
         {this.props.highlightWeekends &&
           this.state.weekends.map((weekend, index) => {
             return (
@@ -269,13 +269,13 @@ export class BackgroundLayer extends React.Component {
               />
             );
           })}
-      </Fragment>
+      </>
     );
   }
 
   renderCustomComponents(components) {
     return (
-      <Fragment>
+      <>
         {components.map((component, index) => {
           return React.cloneElement(component, {
             key: index,
@@ -285,14 +285,14 @@ export class BackgroundLayer extends React.Component {
             calculateHorizontalPosition: this.calculateHorizontalPosition
           });
         })}
-      </Fragment>
+      </>
     );
   }
 
   renderVerticalGrid() {
     const {verticalGrid, topOffset, height, leftOffset, width, verticalGridLines, verticalGridClassName} = this.props;
     return (
-      <Fragment>
+      <>
         {verticalGrid && verticalGridLines && (
           <div
             className="rct9k-background-layer-vertical-grid"
@@ -308,7 +308,7 @@ export class BackgroundLayer extends React.Component {
             })}
           </div>
         )}
-      </Fragment>
+      </>
     );
   }
 
@@ -318,7 +318,7 @@ export class BackgroundLayer extends React.Component {
     const overlappsDisplayedInterval =
       this.props.startDateTimeline.isSameOrBefore(currentDate) && this.props.endDateTimeline.isSameOrAfter(currentDate);
     return (
-      <Fragment>
+      <>
         {nowMarker && overlappsDisplayedInterval && (
           <Marker
             date={currentDate}
@@ -330,19 +330,19 @@ export class BackgroundLayer extends React.Component {
             style={this.props.nowMarkerStyle}
           />
         )}
-      </Fragment>
+      </>
     );
   }
 
   render() {
     return (
-      <Fragment>
+      <>
         {this.renderHighlightedWeekends()}
         {this.renderCustomComponents(this.props.highlightedIntervals)}
         {this.renderNowMarker()}
         {this.renderCustomComponents(this.props.markers)}
         {this.renderVerticalGrid()}
-      </Fragment>
+      </>
     );
   }
 }

src/components/GanttDataCell.tsx

@@ -0,0 +1,18 @@
+import { DataCell } from 'fixed-data-table-2';
+import React from 'react';
+import { GanttContext } from '../utils/GanttContext';
+
+export interface GanttDataCellProperties {
+    rowIndex: number,
+    content: () => string | React.ReactNode
+}
+
+export class GanttDataCell extends React.Component<GanttDataCellProperties> {
+    static contextType = GanttContext;
+    context!: React.ContextType<typeof GanttContext>;
+
+    render(): React.ReactNode {
+        const {rows} = this.context;
+        return this.props.rowIndex < rows.length ? <DataCell>{this.props.content()}</DataCell> : <DataCell></DataCell>; 
+    }
+}

src/components/SimpleGanttTable.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { Table, Column, DataCell } from 'fixed-data-table-2';
+import { GanttDataCell } from "./GanttDataCell";
+import { GanttContext } from "../utils/GanttContext";
+
+export interface SimpleGanttTableProperties {
+    field: string,
+    header?: string | React.ReactNode
+    width?: number
+}
+
+/**
+ * @author Daniela Buzatu
+ */
+export class SimpleGanttTable extends React.Component<SimpleGanttTableProperties> {
+    static contextType = GanttContext;
+    static defaultProps = {
+        width: 130,
+        header: undefined
+    }
+    context!: React.ContextType<typeof GanttContext>;
+
+    render(): React.ReactNode {
+        const { rows, configureTable } = this.context;
+        return (
+            configureTable(
+                <Table width={this.props.width}>
+                    <Column
+                        columnKey="title"
+                        flexGrow={1}
+                        width={this.props.width}
+                        header={<DataCell>{this.props.header ? this.props.header : ""}</DataCell>}
+                        cell={({ rowIndex }) => <GanttDataCell rowIndex={rowIndex} content={() => rows[rowIndex][this.props.field]} />} />
+                </Table>
+            )
+        );
+    }
+}

src/index.js

@@ -19,6 +19,8 @@ export {Marker} from './components/Marker';
 export {default as Selectbox} from './components/selector';
 export {BackgroundLayer} from './components/BackgroundLayer';
 export {HighlightedInterval} from './components/HighlightedInterval';
+export {SimpleGanttTable} from './components/SimpleGanttTable';
+export {GanttDataCell} from './components/GanttDataCell';
 
 // consts
 export {timebarFormat} from './consts/timebarConsts';

src/stories/backgroundLayer/BackgroundLayer.stories.tsx

@@ -1,12 +1,11 @@
-import React from 'react';
-import Timeline from '../../timeline';
 import { BackgroundLayer } from '../../components/BackgroundLayer';
 import { HighlightedInterval } from '../../components/HighlightedInterval';
 import { Marker } from '../../components/Marker';
-import { someHumanResources, startOfCurrentMonth, endOfCurrentMonth, dateAndHourOfCurrentMonth } from '../sampleData';
-import { backgroundLayerScenarios } from './BackgroundLayerScenarios';
+import { SimpleGanttTable } from '../../components/SimpleGanttTable';
+import Timeline from '../../timeline';
 import { Item } from '../../types';
-import { Table, Column, DataCell} from 'fixed-data-table-2';
+import { dateAndHourOfCurrentMonth, endOfCurrentMonth, someHumanResources, startOfCurrentMonth } from '../sampleData';
+import { backgroundLayerScenarios } from './BackgroundLayerScenarios';
 export default {
   title: 'Features/Background Layer'
 };
@@ -21,13 +20,7 @@ export const Main = () => {
   return (
     <Timeline startDate={startOfCurrentMonth()}
       endDate={endOfCurrentMonth()} groups={someHumanResources} items={tasks}
-      table={<Table width={100} >
-                <Column
-                    columnKey="title"
-                    width={100}
-                    header={<DataCell>Title</DataCell>}
-                    cell={({rowIndex}) => <DataCell>{rowIndex < someHumanResources.length ? someHumanResources[rowIndex].title : ""}</DataCell>}/>
-            </Table>}
+      table={<SimpleGanttTable field="title" header="Title"/>}
       backgroundLayer={
         <BackgroundLayer verticalGrid nowMarker highlightWeekends
           highlightedIntervals={[
@@ -57,13 +50,7 @@ export const CustomClassNamesAndStyles = () => {
   return (
     <Timeline startDate={startOfCurrentMonth()}
       endDate={endOfCurrentMonth()} groups={someHumanResources} items={tasks}
-      table={<Table width={100} >
-                <Column
-                    columnKey="title"
-                    width={100}
-                    header={<DataCell>Title</DataCell>}
-                    cell={({rowIndex}) => <DataCell>{rowIndex < someHumanResources.length ? someHumanResources[rowIndex].title : ""}</DataCell>}/>
-            </Table>}
+      table={<SimpleGanttTable field="title" header="Title"/>}
       backgroundLayer={
         <BackgroundLayer verticalGrid verticalGridClassName='story-custom-vertical-grid-class' verticalGridStyle={{opacity: 0.5}}
           nowMarker nowMarkerClassName='story-custom-now-marker-class' nowMarkerStyle={{opacity: 0.7}}
@@ -84,7 +71,7 @@ export const CustomClassNamesAndStyles = () => {
 CustomClassNamesAndStyles.parameters = {
   scenarios: [
     backgroundLayerScenarios.verticalGridClassName,
-    backgroundLayerScenarios.nowMaSrkerClassName,
+    backgroundLayerScenarios.nowMarkerClassName,
     backgroundLayerScenarios.highlightWeekendsClassName,
     backgroundLayerScenarios.classNameForMarker,
     backgroundLayerScenarios.highlightedIntervalClassName

src/stories/basic/Basic.stories.mdx

@@ -71,6 +71,6 @@ const start = this.getStartFromItem(item);
 
 **IMPORTANT**: By default the gantt diagram displayes without any table associated.
 
-If you want to display a table (like in the majority of our examples) you should set the <code>table</code> property:
+If you want to display a table (like in the majority of our examples) you should set the `table` property:
 
 <ArgsTable of={Timeline} sort="none" include={["table"]}  />

src/stories/basic/Basic.stories.tsx

@@ -1,10 +1,9 @@
-import React from 'react';
+import { ComponentStory } from '@storybook/react';
+import { SimpleGanttTable } from '../../components/SimpleGanttTable';
+import { Group, Item } from '../../index';
 import Timeline from '../../timeline';
 import { timelineScenarios } from '../TimelineScenarios';
 import { d, someHumanResources, someTasks } from '../sampleData';
-import { ComponentStory } from '@storybook/react';
-import { Group, Item } from '../../index';
-import { Table, Column, DataCell } from 'fixed-data-table-2';
 
 export default {
   title: 'Features/Basic'
@@ -34,13 +33,7 @@ export const Main = () => {
       {/* 2/ You'll probably have a better flex-box layout, i.e. not hardcoded. 3/ Use CSS classes and not styles. */}
       <div style={{ display: 'flex', height: '400px' }}>
         <Timeline startDate={d('2018-09-20')} endDate={d('2018-09-21')} groups={humanResources} items={tasks}
-                  table={<Table width={100} >
-                            <Column
-                                columnKey="title"
-                                width={100}
-                                header={<DataCell>Title</DataCell>}
-                                cell={({rowIndex}) => <DataCell>{rowIndex < humanResources.length ? humanResources[rowIndex].title : ""}</DataCell>}/>
-                        </Table>}
+                  table={<SimpleGanttTable field="title" header="Title"/>}
           />
       </div>
     </>
@@ -80,13 +73,7 @@ export const AlternativeRowColoring: ComponentStory<typeof Timeline> = () => {
       <div style={{ display: 'flex', height: '400px' }}>
         <Timeline startDate={d('2018-09-20')} endDate={d('2018-09-21')} groups={someHumanResources} items={someTasks} 
                   rowClassName='story-custom-row' rowEvenClassName='story-custom-row-even' rowOddClassName='story-custom-row-odd'
-                  table={<Table width={100} >
-                            <Column
-                                columnKey="title"
-                                width={100}
-                                header={<DataCell>Title</DataCell>}
-                                cell={({rowIndex}) => <DataCell>{rowIndex < someHumanResources.length ? someHumanResources[rowIndex].title : ""}</DataCell>}/>
-                        </Table>}/>
+                  table={<SimpleGanttTable field="title" header="Title"/>}/>
       </div>
     </>
   );
@@ -118,14 +105,7 @@ const tasks: Item[] = [
       {/* 2/ You'll probably have a better flex-box layout, i.e. not hardcoded. 3/ Use CSS classes and not styles. */}
       <div style={{ display: 'flex', height: '400px' }}>
         <Timeline startDate={d('2018-09-20')} endDate={d('2018-09-21')} minDate={d('2018-09-19')} maxDate={d('2018-09-22')} groups={someHumanResources} items={tasks}
-                  table={<Table width={100} >
-                            <Column
-                                columnKey="title"
-                                width={100}
-                                header={<DataCell>Title</DataCell>}
-                                cell={({rowIndex}) => <DataCell>{rowIndex < someHumanResources.length ? someHumanResources[rowIndex].title : ""}</DataCell>}/>
-                        </Table>}
-          />
+                  table={<SimpleGanttTable field="title" header="Title"/>}/>
       </div>
     </>
   );

src/stories/contextMenuAndSelection/ContextMenuAndSelection.stories.tsx

@@ -3,11 +3,11 @@ import { Alert } from 'antd';
 import moment from 'moment';
 import { useState } from 'react';
 import { Button, Icon, Menu } from 'semantic-ui-react';
+import { SimpleGanttTable } from '../../components/SimpleGanttTable';
 import Timeline from '../../timeline';
 import { IGanttAction, IGanttOnContextMenuShowParam, Item } from '../../types';
 import { d, someHumanResources, someTasks } from '../sampleData';
 import { contextMenuScenarios, selectionScenarios } from './ContextMenuAndSelectionScenarios';
-import { Table, Column, DataCell } from 'fixed-data-table-2';
 
 export default {
     title: 'Features/Context Menu And Selection',
@@ -84,14 +84,8 @@ export const ContextMenu = () => {
 
                             return actions;
                         }} 
-                        table={<Table width={100} >
-                                    <Column
-                                        columnKey="title"
-                                        width={100}
-                                        header={<DataCell>Title</DataCell>}
-                                        cell={({rowIndex}) => <DataCell>{rowIndex < someHumanResources.length ? someHumanResources[rowIndex].title : ""}</DataCell>}/>
-                                </Table>}
-                        />
+                        table={<SimpleGanttTable field="title" header="Title"/>}
+                    />
                 </div>
             </>);
 };
@@ -124,13 +118,8 @@ export const Selection = () => {
         <div style={{ display: 'flex', height: '400px' }}>
           <Timeline startDate={d('2018-09-20')} endDate={d('2018-09-21')} groups={someHumanResources} items={someTasks} 
                     selectedItems={isSelectionForced ? [0, 1] : undefined} onSelectionChange={selectedItems => setSelectedItems(selectedItems)}
-                    table={<Table width={100} >
-                                    <Column
-                                        columnKey="title"
-                                        width={100}
-                                        header={<DataCell>Title</DataCell>}
-                                        cell={({rowIndex}) => <DataCell>{rowIndex < someHumanResources.length ? someHumanResources[rowIndex].title : ""}</DataCell>}/>
-                                </Table>}/>
+                    table={<SimpleGanttTable field="title" header="Title"/>}
+            />
         </div>
       </>
     );

src/stories/custom/Custom.stories.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useRef, useState } from "react";
 import { Segment } from "semantic-ui-react";
+import { ItemRenderer } from "../..";
+import { SimpleGanttTable } from "../../components/SimpleGanttTable";
 import { d, someHumanResources, someTasks } from "../sampleData";
 import { CustomTimeline } from "./CustomTimeline";
 import { customTimelineScenarios } from "./CustomTimelineScenarios";
-import { ItemRenderer } from "../..";
-import { Table, Column, DataCell} from 'fixed-data-table-2';
 
 export default {
   title: 'Features/Custom'
@@ -22,13 +22,7 @@ export const CustomMenuButtonRenderer = () => {
       <div ref={divRef}> </div>
     </Segment>
     <CustomTimeline startDate={d('2018-09-20')} endDate={d('2018-09-21')} groups={someHumanResources} items={someTasks} 
-      table={<Table width={100} >
-                <Column
-                    columnKey="title"
-                    width={100}
-                    header={<DataCell>Title</DataCell>}
-                    cell={({rowIndex}) => <DataCell>{rowIndex < someHumanResources.length ? someHumanResources[rowIndex].title : ""}</DataCell>}/>
-            </Table>}
+      table={<SimpleGanttTable field="title" header="Title"/>}
     toolbarDomElement={divRef.current} itemRenderer={ItemRenderer}/>
   </>);
 

src/stories/dragToCreate/DragToCreate.stories.tsx

@@ -1,11 +1,11 @@
-import React, { useState } from 'react';
+import { createTestids } from '@famiprog-foundation/tests-are-demo';
+import { useState } from 'react';
+import { Form, Radio } from 'semantic-ui-react';
+import { SimpleGanttTable } from '../../components/SimpleGanttTable';
 import Timeline from '../../timeline';
+import { DragToCreateParam, Item } from '../../types';
 import { d, someHumanResources, someTasks } from '../sampleData';
 import { dragToCreateScenarios } from './DragToCreateScenarios';
-import { DragToCreateParam, Item } from '../../types';
-import { Form, Radio } from 'semantic-ui-react';
-import { createTestids } from '@famiprog-foundation/tests-are-demo';
-import { Table, Column, DataCell} from 'fixed-data-table-2';
 
 export default {
     title: 'Features/Drag to create',
@@ -46,13 +46,7 @@ export const Main = () => {
                 </Form.Field>
             </Form>
             <Timeline startDate={d('2018-09-20')} endDate={d('2018-09-21')} groups={groups} items={tasks} forceDragToCreateMode={forceDragToCreateMode ? forceDragToCreateMode === "true" : undefined}
-                table={<Table width={100}>
-                            <Column
-                                columnKey="title"
-                                width={100}
-                                header={<DataCell>Title</DataCell>}
-                                cell={({rowIndex}) => <DataCell>{rowIndex < someHumanResources.length ? someHumanResources[rowIndex].title : ""}</DataCell>}/>
-                        </Table>}
+                table={<SimpleGanttTable field="title" header="Title"/>}
                 onDragToCreateEnded={(param: DragToCreateParam) => {
                     if (groups[param.groupIndex]) {
                         const task = {