(null)
- /** @todo Review insertDummyCells parsing relative to flatMap but also the single array parse is not working well **/
- const data = useMemo(() => {
- return insertDummyCells(props.headers)
- }, [props.headers])
+ /** @todo Review insertDummyCells parsing relative to flatMap but also the single array parse is not working well **/
+ const data = useMemo(() => {
+ return insertDummyCells(props.headers)
+ }, [props.headers])
- // clear cache and recompute when data changes
- useEffect(() => {
- cache?.clearAll()
- gridRef.current?.recomputeGridSize()
- }, [data])
+ // clear cache and recompute when data changes
+ useEffect(() => {
+ cache?.clearAll()
+ gridRef.current?.recomputeGridSize()
+ }, [data])
+ const headerRendererWrapper = useCallback(
+ ({ style, cell, ref, columnIndex, rowIndex }) => {
+ const { title, renderer } = cell as Column
+ /** @todo Cache cell renderer result because if may have not changed so no need to invoke again **/
+ const children = renderer ? (renderer(cell) as any) : title
- const headerRendererWrapper = useCallback(
- ({style, cell, ref, columnIndex, rowIndex}) => {
- const {title, renderer} = cell as Column
- /** @todo Cache cell renderer result because if may have not changed so no need to invoke again **/
- const children = renderer ? (renderer(cell) as any) : title
+ return (
+
+ {children}
+
+ )
+ },
+ [props.coords, props.theme, props.width],
+ )
- return (
- {
+ const cell = data[args.rowIndex]?.[args.columnIndex]
+ if (!cell) {
+ return null
+ }
+ const style = {
+ ...args.style,
+ ...cell['style'],
+ width: props.getColumnWidth({ index: args.columnIndex }),
+ userSelect: 'none',
}
- style={{
- display: "flex",
- justifyContent: "center",
- padding: "5px",
- boxSizing: "border-box",
- background: "#efefef",
- border: "1px solid #ccc",
- cursor: "default",
- ...style,
- }}
- >
- {children}
-
- )
- },
- [props.coords, props.theme, props.width]
- )
-
- const cellMeasurerWrapperRenderer = useCallback(
- (args) => {
- const cell = data[args.rowIndex]?.[args.columnIndex]
- if (!cell) {
- return null
- }
- const style = {
- ...args.style,
- ...cell["style"],
- width: props.getColumnWidth({index: args.columnIndex}),
- userSelect: "none",
- }
- const rendererProps = {
- ...args,
- cell,
- getColumnWidth: props.getColumnWidth
- }
- return (
-
- )
- },
- [data, props.theme, props.coords, props.width]
- )
+ const rendererProps = {
+ ...args,
+ cell,
+ getColumnWidth: props.getColumnWidth,
+ }
+ return (
+
+ )
+ },
+ [data, props.theme, props.coords, props.width],
+ )
- const columnCount = useMemo(() => {
- return data.length ? data[0].length : 0
- }, [data])
+ const columnCount = useMemo(() => {
+ return data.length ? data[0].length : 0
+ }, [data])
- const onRefMount = useCallback((instance) => {
- gridRef.current = instance
- }, [])
+ const onRefMount = useCallback(instance => {
+ gridRef.current = instance
+ }, [])
- return (
-
- )
- })
+ return (
+
+ )
+ }),
)
export default ColumnGrid
diff --git a/src/core/GridWrapper.tsx b/src/core/GridWrapper.tsx
index 79d38d9..f2ee067 100644
--- a/src/core/GridWrapper.tsx
+++ b/src/core/GridWrapper.tsx
@@ -20,6 +20,7 @@ import {ClickAwayListener} from "@material-ui/core"
import {GridTheme} from "../types/grid-theme"
import clsx from "clsx"
import {GridCellProps} from "react-virtualized/dist/es/Grid"
+import {useEditorManager} from "../editors/useEditorManager";
export interface ICellMountedRegisterData {
colIndex: number;
@@ -99,6 +100,8 @@ const GridWrapper = forwardRef((props: Props, componentRef: any) => {
[props.headers]
)
+ /** @todo activeEditor will be replaced by editorState **/
+ const [editorState] = useEditorManager()
const [activeEditor, setActiveEditor] = useState<{
row: GridRow;
rowIndex: number;
diff --git a/src/core/ScrollHandler.tsx b/src/core/ScrollHandler.tsx
index 6095f5e..a3fcc5a 100644
--- a/src/core/ScrollHandler.tsx
+++ b/src/core/ScrollHandler.tsx
@@ -110,6 +110,9 @@ const ScrollHandler = forwardRef(
[],
)
+ /**
+ * @todo Consider the possibility of using WindowScroller + ScrollSync or just ScrollSync (we will need the scroll sync feature probably for fixed rows/columns and also for horizontal scroll precision)
+ * */
return (
<>
diff --git a/src/core/dummy-buffer.ts b/src/core/dummy-buffer.ts
new file mode 100644
index 0000000..0b748c2
--- /dev/null
+++ b/src/core/dummy-buffer.ts
@@ -0,0 +1,87 @@
+import React from "react"
+
+interface IGenerateDummyData {
+ parent: any
+ index: number
+ totalDummies: number
+ dummyFor: "rowSpan" | "colSpan"
+}
+
+/**
+ * DummyBuffer generates dummy cells for merged cells (col or row spans)
+ */
+export class DummyBuffer {
+ private readonly _buffer = new Map()
+
+ generateDummy({ parent, index, totalDummies, dummyFor }: IGenerateDummyData) {
+ const style: React.CSSProperties = {}
+ const first = index === 0
+ const last = index === totalDummies - 1
+
+ /** @todo Review this part, we might only provide a className with theme to indicate whether its the last
+ * column or last row or even for spanns, the user might want to do something about it **/
+ if (dummyFor === "colSpan") {
+ style.borderLeft = 0
+ if (!last) {
+ style.borderRight = 0
+ }
+ } else {
+ style.borderTop = 0
+ if (!last) {
+ style.borderBottom = 0
+ }
+ }
+
+ return {
+ ...parent,
+ colSpan: 1,
+ rowSpan: 1,
+ children: "",
+ dummy: true,
+ dummyFor,
+ first,
+ last,
+ style: {
+ ...parent.style,
+ ...style,
+ },
+ parentRow: parent /** @todo We might only need the id in the future or the index */,
+ }
+ }
+
+ insert(key: number, arr) {
+ if (this._buffer.has(key)) {
+ this._buffer.get(key).push(...arr)
+ } else {
+ this._buffer.set(key, arr)
+ }
+ }
+
+ extract(index: number) {
+ const arr: any[] = []
+
+ if (!this._buffer.has(index) || this._buffer.get(index).length === 0) {
+ return arr
+ }
+
+ this._buffer.get(index).forEach((item) => {
+ if (!item.remainingRows) {
+ return
+ }
+
+ arr.push(
+ this.generateDummy({
+ parent: item.parent,
+ totalDummies: item.parent.rowSpan - 1,
+ index: item.parent.rowSpan - 1 - item.remainingRows,
+ dummyFor: "rowSpan",
+ })
+ )
+
+ // eslint-disable-next-line no-param-reassign
+ item.remainingRows -= 1
+ })
+
+ return arr
+ }
+}
\ No newline at end of file
diff --git a/src/core/insertDummyCells.tsx b/src/core/insertDummyCells.tsx
new file mode 100644
index 0000000..87260c0
--- /dev/null
+++ b/src/core/insertDummyCells.tsx
@@ -0,0 +1,73 @@
+import React from 'react'
+import { DummyBuffer } from './dummy-buffer'
+
+/**
+ * Requires a re-write due to flatMap, unknown types and the data not being passed
+ * with interface and as row(with cells)
+ * @param data
+ */
+export function insertDummyCells(data: any[] = []) {
+ const dummyBuffer = new DummyBuffer()
+ return data.map((row: any) => {
+ let lastRowSpanI = -1
+ let finalCellIndex = 0
+
+ const cells = row.flatMap((col, colIndex) => {
+ const arr: any[] = []
+
+ // consume from buffer
+ arr.push(...dummyBuffer.extract(finalCellIndex))
+
+ // add dummy cell data to buffer for future rows to extract
+ if (col.rowSpan > 1) {
+ const parentData = {
+ remainingRows: col.rowSpan - 1,
+ parent: col,
+ }
+
+ let bufferKey = finalCellIndex
+ if (lastRowSpanI !== -1 && row[colIndex - 1].rowSpan > 1) {
+ bufferKey = lastRowSpanI
+ } else {
+ lastRowSpanI = finalCellIndex
+ }
+
+ const dummiesToPush = col.colSpan || 1
+ const dummiesArray: any[] = []
+
+ for (let i = 0; i < dummiesToPush; i += 1) {
+ dummiesArray.push({ ...parentData })
+ }
+
+ dummyBuffer.insert(bufferKey, dummiesArray)
+ }
+
+ arr.push({
+ ...col,
+ })
+
+ if (col.colSpan > 1) {
+ const totalDummies = col.colSpan - 1
+ const dummies = [...Array(totalDummies).keys()].map((_, index) =>
+ dummyBuffer.generateDummy({
+ parent: col,
+ index,
+ totalDummies,
+ dummyFor: 'colSpan',
+ }),
+ )
+
+ arr.push(...dummies)
+ }
+
+ finalCellIndex += arr.length
+
+ return arr
+ })
+
+ // buffer has data for next cell
+ cells.push(...dummyBuffer.extract(finalCellIndex))
+
+ return cells
+ })
+}
diff --git a/src/editors/useEditorManager.tsx b/src/editors/useEditorManager.tsx
new file mode 100644
index 0000000..498478d
--- /dev/null
+++ b/src/editors/useEditorManager.tsx
@@ -0,0 +1,27 @@
+import React, {useState} from 'react'
+import {GridRow} from "../types/row.interface"
+
+interface IEditorState {
+ isEditing: boolean
+ editor?: {
+ node: JSX.Element
+ /** @todo Not sure if necessary having the row because it might change during editor being active **/
+ row: GridRow;
+ rowIndex: number;
+ colIndex: number;
+ initialValue: string
+ }
+}
+/**
+ * Provides a way to manage the editors and also returns the active editor node
+ * This hook controls the editing states, interacts with useNavigation hook and also manages the commit/cancel cycle of
+ * an editor
+ */
+export function useEditorManager() {
+ const [editorState, setEditorState] = useState({
+ isEditing: false,
+ })
+
+ /** @todo Returns utils and other methods necessary **/
+ return [editorState]
+}
\ No newline at end of file
diff --git a/src/utils/isFunction.ts b/src/helpers/isFunction.ts
similarity index 100%
rename from src/utils/isFunction.ts
rename to src/helpers/isFunction.ts
diff --git a/src/utils/shallowDiffers.ts b/src/helpers/shallowDiffers.ts
similarity index 100%
rename from src/utils/shallowDiffers.ts
rename to src/helpers/shallowDiffers.ts
diff --git a/src/index.tsx b/src/index.tsx
index 2205c1a..549dfee 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -7,264 +7,257 @@ import { makeStyles } from '@material-ui/core/styles'
import ColumnGrid from './column-grid/ColumnGrid'
import { useNavigation } from './navigation/useNavigation'
import { GridData, GridRow } from './types/row.interface'
-import { insertDummyCells } from './utils/helpers'
import { StretchMode } from './types/stretch-mode.enum'
import { FixedColumnWidthRecord } from './column-grid/types/fixed-column-width-record'
import { createFixedWidthMapping } from './column-grid/utils/createFixedWidthMapping'
import { Column } from './column-grid/types/header.type'
-import shallowDiffers from './utils/shallowDiffers'
+import shallowDiffers from './helpers/shallowDiffers'
+import {insertDummyCells} from "./core/insertDummyCells";
const CONTAINER_SCROLL_WIDTH = 5
/** @todo Make it 15 or 10 to be a little bit wider **/
const useStyles = makeStyles(() => ({
root: {
- height: "100%",
- overflowY: "hidden",
- overflowX: "hidden",
+ height: '100%',
+ overflowY: 'hidden',
+ overflowX: 'hidden',
maxHeight: 500,
margin: 15,
- "&:hover": {
- overflowY: "auto",
+ '&:hover': {
+ overflowY: 'auto',
},
- "&::-webkit-scrollbar-track": {
- borderRadius: "10px",
+ '&::-webkit-scrollbar-track': {
+ borderRadius: '10px',
opacity: 0.5,
- "-webkit-box-shadow": "inset 0 0 6px rgba(0,0,0,.3)",
+ '-webkit-box-shadow': 'inset 0 0 6px rgba(0,0,0,.3)',
},
- "&::-webkit-scrollbar": {
+ '&::-webkit-scrollbar': {
width: `${CONTAINER_SCROLL_WIDTH}px`,
opacity: 0.5,
},
- "&::-webkit-scrollbar-thumb": {
- borderRadius: "10px",
+ '&::-webkit-scrollbar-thumb': {
+ borderRadius: '10px',
opacity: 0.5,
- "-webkit-box-shadow": "inset 0 0 6px rgba(0,0,0,.3)",
+ '-webkit-box-shadow': 'inset 0 0 6px rgba(0,0,0,.3)',
},
},
headerContainer: {
- outline: "none",
+ outline: 'none',
// position: "-webkit-sticky !important" as any,
- position: "sticky !important" as any,
+ position: 'sticky !important' as any,
top: 0,
zIndex: 1,
- "scrollbar-width": "none",
- "&::-webkit-scrollbar": {
- display: "none",
+ 'scrollbar-width': 'none',
+ '&::-webkit-scrollbar': {
+ display: 'none',
},
},
bodyContainer: {
- outline: "none",
- "scrollbar-width": "none",
- "&::-webkit-scrollbar": {
- display: "none",
+ outline: 'none',
+ 'scrollbar-width': 'none',
+ '&::-webkit-scrollbar': {
+ display: 'none',
},
},
}))
interface Props extends GridWrapperCommonProps {
- data: GridData;
+ data: GridData
/** @default 50 **/
- minRowHeight?: number;
+ minRowHeight?: number
/** @default 50 **/
- minColumnHeight?: number;
+ minColumnHeight?: number
/** @default 50 **/
- minColumnWidth?: number;
- fixedColumnCount: number;
+ minColumnWidth?: number
+ fixedColumnCount: number
/** @default StretchMode.None */
stretchMode?: StretchMode
}
+export const ApolloSpreadSheet = forwardRef((props: Props, componentRef: any) => {
+ const classes = useStyles()
+ const columnCount = useMemo(() => {
+ return props.data.length ? props.data[0].length : 0
+ }, [props.data])
-export const ApolloSpreadSheet = forwardRef(
- (props: Props, componentRef: any) => {
- const classes = useStyles()
- const columnCount = useMemo(() => {
- return props.data.length ? props.data[0].length : 0
- }, [props.data])
+ const gridContainerRef = useRef(null)
+ const minColumnWidth = props.minColumnWidth ?? 60
+ const rows: Array = useMemo(() => {
+ return insertDummyCells(props.data)
+ }, [props.data])
- const gridContainerRef = useRef(null)
- const minColumnWidth = props.minColumnWidth ?? 60
- const rows: Array = useMemo(() => {
- return insertDummyCells(props.data)
- }, [props.data])
-
- /**
- * Stores the main headers only, nested headers are not required in here
- * because this is used as an utility
- */
- const mainHeaders: Column[] = useMemo(() => {
- if (Array.isArray(props.headers[0])) {
- return props.headers[0] as Column[]
- }
- return props.headers as Column[]
- }, [props.headers])
+ /**
+ * Stores the main headers only, nested headers are not required in here
+ * because this is used as an utility
+ */
+ const mainHeaders: Column[] = useMemo(() => {
+ if (Array.isArray(props.headers[0])) {
+ return props.headers[0] as Column[]
+ }
+ return props.headers as Column[]
+ }, [props.headers])
- /**
- * Returns a given column at the provided index if exists
- * @param index
- * @param line This represents the row but by default we fetch only from the first, this is in order to support nested headers
- */
- const getColumnAt = useCallback(
+ /**
+ * Returns a given column at the provided index if exists
+ * @param index
+ * @param line This represents the row but by default we fetch only from the first, this is in order to support nested headers
+ */
+ const getColumnAt = useCallback(
(index: number, line = 0) => {
return props.headers[line]?.[index]
},
- [props.headers]
- )
-
- const [coords, selectCell, onCellClick] = useNavigation({
- defaultCoords: props.defaultCoords ?? {rowIndex: 0, colIndex: 0},
- /** @todo Dont pass the data but a callback so it can read the row/cell from */
- data: rows,
- gridRootRef: gridContainerRef.current,
- columnsCount: columnCount,
- rowsCount: rows.length,
- suppressNavigation: props.suppressNavigation ?? false,
- getColumnAt,
- })
+ [props.headers],
+ )
+ const [coords, selectCell, onCellClick] = useNavigation({
+ defaultCoords: props.defaultCoords ?? { rowIndex: 0, colIndex: 0 },
+ /** @todo Dont pass the data but a callback so it can read the row/cell from */
+ data: rows,
+ gridRootRef: gridContainerRef.current,
+ columnsCount: columnCount,
+ rowsCount: rows.length,
+ suppressNavigation: props.suppressNavigation ?? false,
+ getColumnAt,
+ })
- const fixedColumnWidths = useRef<{ totalSize: number, mapping: FixedColumnWidthRecord }>({
- totalSize: 0,
- mapping: {}
- })
- const latestContainerWidth = useRef(0)
- const latestColumns = useRef([])
+ const fixedColumnWidths = useRef<{ totalSize: number; mapping: FixedColumnWidthRecord }>({
+ totalSize: 0,
+ mapping: {},
+ })
+ const latestContainerWidth = useRef(0)
+ const latestColumns = useRef([])
- const buildColumnTotalWidth = (containerWidth: number) => {
- //Cached value
- if (!shallowDiffers(mainHeaders, latestColumns.current) && latestContainerWidth.current === containerWidth) {
- return (containerWidth - fixedColumnWidths.current.totalSize) - CONTAINER_SCROLL_WIDTH
- }
+ const buildColumnTotalWidth = (containerWidth: number) => {
+ //Cached value
+ if (!shallowDiffers(mainHeaders, latestColumns.current) && latestContainerWidth.current === containerWidth) {
+ return containerWidth - fixedColumnWidths.current.totalSize - CONTAINER_SCROLL_WIDTH
+ }
- const {mapping, totalSize} = createFixedWidthMapping(mainHeaders, containerWidth, minColumnWidth, props.stretchMode ?? StretchMode.None, CONTAINER_SCROLL_WIDTH)
+ const { mapping, totalSize } = createFixedWidthMapping(
+ mainHeaders,
+ containerWidth,
+ minColumnWidth,
+ props.stretchMode ?? StretchMode.None,
+ CONTAINER_SCROLL_WIDTH,
+ )
- //Just update with the new calculated (if it was otherwise it might have been a cached result)
- fixedColumnWidths.current = {
- totalSize,
- mapping
- }
+ //Just update with the new calculated (if it was otherwise it might have been a cached result)
+ fixedColumnWidths.current = {
+ totalSize,
+ mapping,
+ }
- //Store if it has changed
- if (shallowDiffers(mainHeaders, latestColumns.current)) {
- latestColumns.current = mainHeaders as Column[]
- }
- if (latestContainerWidth.current !== containerWidth) {
- latestContainerWidth.current = containerWidth
- }
+ //Store if it has changed
+ if (shallowDiffers(mainHeaders, latestColumns.current)) {
+ latestColumns.current = mainHeaders as Column[]
+ }
+ if (latestContainerWidth.current !== containerWidth) {
+ latestContainerWidth.current = containerWidth
+ }
- //The available width that the grid will use
- return Math.max(0, (containerWidth - fixedColumnWidths.current.totalSize) - CONTAINER_SCROLL_WIDTH)
- }
+ //The available width that the grid will use
+ return Math.max(0, containerWidth - fixedColumnWidths.current.totalSize - CONTAINER_SCROLL_WIDTH)
+ }
- /**
- * @todo Also we need to support nested headers which means which i'm not sure its okay
- * @param getColumnWidth
- */
- //https://github.com/bvaughn/react-virtualized/issues/698
- const getColumnWidthHelper = (getColumnWidth) => ({index}: { index: number }) => {
- return fixedColumnWidths.current.mapping[index] ?? getColumnWidth({index})
- }
+ /**
+ * @todo Also we need to support nested headers which means which i'm not sure its okay
+ * @param getColumnWidth
+ */
+ //https://github.com/bvaughn/react-virtualized/issues/698
+ const getColumnWidthHelper = getColumnWidth => ({ index }: { index: number }) => {
+ return fixedColumnWidths.current.mapping[index] ?? getColumnWidth({ index })
+ }
- //Stores the amount of columns that we want to calculate using the remaining width of the grid
- const calculatingColumnCount = useMemo(() => {
- return columnCount - mainHeaders.filter(e => e.width).length
- }, [columnCount, mainHeaders])
+ //Stores the amount of columns that we want to calculate using the remaining width of the grid
+ const calculatingColumnCount = useMemo(() => {
+ return columnCount - mainHeaders.filter(e => e.width).length
+ }, [columnCount, mainHeaders])
- const getTotalColumnWidth = useCallback((getColumnWidth) => {
- return mainHeaders.reduce((acc, e, i) => {
- return acc + getColumnWidthHelper(getColumnWidth)({ index: i})
- }, 0)
- }, [mainHeaders])
+ const getTotalColumnWidth = useCallback(
+ getColumnWidth => {
+ return mainHeaders.reduce((acc, e, i) => {
+ return acc + getColumnWidthHelper(getColumnWidth)({ index: i })
+ }, 0)
+ },
+ [mainHeaders],
+ )
- /** @todo Review nested headers width, its still an issue and also NaN's at widths
- * **/
- const renderGridsWrapper = (width: number) => {
- return (
+ const renderGridsWrapper = (width: number) => {
+ return (
<>
- {({adjustedWidth, registerChild, getColumnWidth}) => (
-
- {({
- scrollTop,
- scrollLeft,
- isScrolling,
- gridRef,
- headerRef,
- onScroll,
- height,
- }) => (
- <>
-
-
-
- )}
-
+ {({ registerChild, getColumnWidth }) => (
+
+ {({ scrollTop, scrollLeft, isScrolling, gridRef, headerRef, onScroll, height }) => (
+ <>
+
+
+
+ )}
+
)}
- )
- }
+ )
+ }
- return (
+ return (
-
- {({width}) => renderGridsWrapper(width)}
-
+
{({ width }) => renderGridsWrapper(width)}
Work Package
-
- )
- },
- id: "wp",
- title: "Work Package",
- tooltip: "You can preview the tooltip in here",
- accessor: "deliverableBody",
- width: '15%'
- },
- {
- id: "activity",
- accessor: "activityBody",
- title: "Activity",
- width: '15%'
- },
- {
- id: "order",
- accessor: "order",
- title: "",
- disableNavigation: true,
- readOnly: true,
- width: "2%"
- },
- {
- id: "task",
- accessor: "taskContent",
- title: "Task",
- width: '16%'
- },
- {
- id: "dp",
- accessor: "dependencies",
- title: "DP",
- width: "2%"
- },
- {
- id: "estimatedTime",
- title: "Est. Time",
- accessor: "estimatedTime",
- width: "3%"
- },
- {
- id: "realTime",
- title: "Real Time",
- accessor: "realTime",
- width: "3%"
- },
- {
- id: "allocated",
- title: "",
- renderer: () => {
- return
- },
- accessor: "allocated",
- width: "3%"
- },
- {
- id: "materials",
- title: "Mat Costs",
- accessor: "materials",
- width: "3%"
- },
- {
- id: "startDate",
- title: "Start Date",
- accessor: "startDate",
- width: "5%"
- },
- {
- id: "endDate",
- title: "End Date",
- accessor: "endDate",
- width: "5%"
- },
- {
- id: "taskControl",
- title: "Task Control",
- accessor: "taskControl",
- width: "8%"
- },
- {
- id: "delete",
- title: "",
- renderer: () => {
- return (
-
-
-
- )
- },
- cellRenderer: () => {
- return
- },
- accessor: "delete",
- width: "2%"
- },
- ],
- ]
+ const headerData: HeadersData = [
+ [
+ {
+ id: 'deliverable',
+ title: 'Deliverable',
+ accessor: 'deliverableBody',
+ width: '15%',
+ },
+ {
+ // children: "Work Package",
+ renderer: () => {
+ return (
+
+ Work Package
+
+ )
+ },
+ id: 'wp',
+ title: 'Work Package',
+ tooltip: 'You can preview the tooltip in here',
+ accessor: 'deliverableBody',
+ width: '15%',
+ },
+ {
+ id: 'activity',
+ accessor: 'activityBody',
+ title: 'Activity',
+ width: '15%',
+ },
+ {
+ id: 'order',
+ accessor: 'order',
+ title: '',
+ disableNavigation: true,
+ readOnly: true,
+ width: '2%',
+ },
+ {
+ id: 'task',
+ accessor: 'taskContent',
+ title: 'Task',
+ width: '16%',
+ },
+ {
+ id: 'dp',
+ accessor: 'dependencies',
+ title: 'DP',
+ width: '2%',
+ },
+ {
+ id: 'estimatedTime',
+ title: 'Est. Time',
+ accessor: 'estimatedTime',
+ width: '3%',
+ },
+ {
+ id: 'realTime',
+ title: 'Real Time',
+ accessor: 'realTime',
+ width: '3%',
+ },
+ {
+ id: 'allocated',
+ title: '',
+ renderer: () => {
+ return
+ },
+ accessor: 'allocated',
+ width: '3%',
+ },
+ {
+ id: 'materials',
+ title: 'Mat Costs',
+ accessor: 'materials',
+ width: '3%',
+ },
+ {
+ id: 'startDate',
+ title: 'Start Date',
+ accessor: 'startDate',
+ width: '5%',
+ },
+ {
+ id: 'endDate',
+ title: 'End Date',
+ accessor: 'endDate',
+ width: '5%',
+ },
+ {
+ id: 'taskControl',
+ title: 'Task Control',
+ accessor: 'taskControl',
+ width: '8%',
+ },
+ {
+ id: 'delete',
+ title: '',
+ renderer: () => {
+ return (
+
+
+
+ )
+ },
+ cellRenderer: () => {
+ return
+ },
+ accessor: 'delete',
+ width: '2%',
+ },
+ ],
+ ]
- const data: GridData = [
- [
- {
- id: "1",
- children: "My first del 1",
- rowSpan: 3,
- },
- {
- id: "wp1",
- children: "WP 1",
- },
- {
- id: "act1",
- children: "Activity 1",
- },
- {
- id: "order1",
- children: "1",
- },
- {
- id: "t1",
- children: "Task 1",
- },
- {
- id: "dp1",
- children: "[]",
- },
- {
- id: "es1",
- children: "0",
- },
- {
- id: "rt1",
- children: "0",
- },
- {
- id: "allocated1",
- children: "",
- },
- {
- id: "materials1",
- children: "0",
- },
- {
- id: "startDate1",
- children: "",
- },
- {
- id: "endDate1",
- children: "",
- },
- {
- id: "taskControl1",
- children: "",
- },
- {
- id: 'delete1',
- children: 'the trash'
- }
- ],
- [
- {
- id: "wp-id-2",
- children: "WP 2",
- rowSpan: 2,
- },
- {
- id: "act-id-111",
- children: "ACT 2",
- rowSpan: 2,
- },
- {
- id: "order2",
- children: "2",
- },
- {
- id: "t2",
- children:
- "TASK 2 ssssssssssssssssssssssssssssssssssssssssssssssssssssss ddddddddddddddddddddddddddddddddddddddd",
- },
- {
- id: "dp2",
- children: "[]",
- },
- {
- id: "est2",
- children: "0",
- },
- {
- id: "rt2",
- children: "0",
- },
- {
- id: "allocated2",
- children: "",
- },
- {
- id: "materials2",
- children: "0",
- },
- {
- id: "startDate2",
- children: "",
- },
- {
- id: "endDate2",
- children: "",
- },
- {
- id: "taskControl2",
- children: "",
- },
- {
- id: 'delete2',
- children: 'the trash'
- }
- ],
- [
- {
- id: "order3",
- children: "3",
- },
- {
- id: "t3",
- children: "Task 3",
- },
- {
- id: "dp3",
- children: "[ 1,2 ]",
- },
- {
- id: "est3",
- children: "123",
- },
- {
- id: "rt3",
- children: "4",
- },
- {
- id: "allocated3",
- children: "",
- },
- {
- id: "materials3",
- children: "0",
- },
- {
- id: "startDate3",
- children: "",
- },
- {
- id: "endDate3",
- children: "",
- },
- {
- id: "taskControl3",
- children: "",
- },
- {
- id: 'delete3',
- children: 'the trash'
- }
- ],
- ]
+ const data: GridData = [
+ [
+ {
+ id: '1',
+ children: 'My first del 1',
+ rowSpan: 3,
+ },
+ {
+ id: 'wp1',
+ children: 'WP 1',
+ },
+ {
+ id: 'act1',
+ children: 'Activity 1',
+ },
+ {
+ id: 'order1',
+ children: '1',
+ },
+ {
+ id: 't1',
+ children: 'Task 1',
+ },
+ {
+ id: 'dp1',
+ children: '[]',
+ },
+ {
+ id: 'es1',
+ children: '0',
+ },
+ {
+ id: 'rt1',
+ children: '0',
+ },
+ {
+ id: 'allocated1',
+ children: '',
+ },
+ {
+ id: 'materials1',
+ children: '0',
+ },
+ {
+ id: 'startDate1',
+ children: '',
+ },
+ {
+ id: 'endDate1',
+ children: '',
+ },
+ {
+ id: 'taskControl1',
+ children: '',
+ },
+ {
+ id: 'delete1',
+ children: 'the trash',
+ },
+ ],
+ [
+ {
+ id: 'wp-id-2',
+ children: 'WP 2',
+ rowSpan: 2,
+ },
+ {
+ id: 'act-id-111',
+ children: 'ACT 2',
+ rowSpan: 2,
+ },
+ {
+ id: 'order2',
+ children: '2',
+ },
+ {
+ id: 't2',
+ children:
+ 'TASK 2 ssssssssssssssssssssssssssssssssssssssssssssssssssssss ddddddddddddddddddddddddddddddddddddddd',
+ },
+ {
+ id: 'dp2',
+ children: '[]',
+ },
+ {
+ id: 'est2',
+ children: '0',
+ },
+ {
+ id: 'rt2',
+ children: '0',
+ },
+ {
+ id: 'allocated2',
+ children: '',
+ },
+ {
+ id: 'materials2',
+ children: '0',
+ },
+ {
+ id: 'startDate2',
+ children: '',
+ },
+ {
+ id: 'endDate2',
+ children: '',
+ },
+ {
+ id: 'taskControl2',
+ children: '',
+ },
+ {
+ id: 'delete2',
+ children: 'the trash',
+ },
+ ],
+ [
+ {
+ id: 'order3',
+ children: '3',
+ },
+ {
+ id: 't3',
+ children: 'Task 3',
+ },
+ {
+ id: 'dp3',
+ children: '[ 1,2 ]',
+ },
+ {
+ id: 'est3',
+ children: '123',
+ },
+ {
+ id: 'rt3',
+ children: '4',
+ },
+ {
+ id: 'allocated3',
+ children: '',
+ },
+ {
+ id: 'materials3',
+ children: '0',
+ },
+ {
+ id: 'startDate3',
+ children: '',
+ },
+ {
+ id: 'endDate3',
+ children: '',
+ },
+ {
+ id: 'taskControl3',
+ children: '',
+ },
+ {
+ id: 'delete3',
+ children: 'the trash',
+ },
+ ],
+ ]
- return {
- data,
- headerData,
- }
+ return {
+ data,
+ headerData,
+ }
}
export const getRandomUseCase = () => {
- return getSimpleData(20, 8)
+ return getSimpleData(20, 8)
}
/** @todo Children might need a row grouping but we can do that with a plugin to have rows that have groups **/
export const getFinancialUseCase = () => {
- const headerData = [
- [
- {
- children: "Test",
- },
- {
- children: "2020",
- },
- {
- children: "2019",
- },
- {
- children: "2018",
- },
- {
- children: "2017",
- },
- ],
- [
- {
- children: "Ongoing",
- },
- {
- children: "Baseline",
- },
- {
- children: "Ongoing",
- },
- {
- children: "Baseline",
- },
- {
- children: "Ongoing",
- },
- ],
- ]
+ const headerData = [
+ [
+ {
+ children: 'Test',
+ },
+ {
+ children: '2020',
+ },
+ {
+ children: '2019',
+ },
+ {
+ children: '2018',
+ },
+ {
+ children: '2017',
+ },
+ ],
+ [
+ {
+ children: 'Ongoing',
+ },
+ {
+ children: 'Baseline',
+ },
+ {
+ children: 'Ongoing',
+ },
+ {
+ children: 'Baseline',
+ },
+ {
+ children: 'Ongoing',
+ },
+ ],
+ ]
- const data = [
- ...[
- [
- {
- id: "1",
- children: "My first del 1",
- rowSpan: 3,
- },
- {
- children: "WP 1",
- },
- {
- children: "Activity 1",
- },
- {
- children: "1",
- },
- {
- children: "Task 1",
- },
- {
- children: "[]",
- },
- {
- children: "0",
- },
- {
- children: "0",
- },
- ],
- [
- {
- id: "wp-id-2",
- children: "WP 2",
- rowSpan: 2,
- },
- {
- id: "act-id-111",
- children: "ACT 2",
- rowSpan: 2,
- },
- {
- children: "2",
- },
- {
- children:
- "TASK 2 ssssssssssssssssssssssssssssssssssssssssssssssssssssss ddddddddddddddddddddddddddddddddddddddd eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
- },
- {
- children: "[]",
- },
- {
- children: "0",
- },
- {
- children: "0",
- },
- ],
- [
- {
- children: "3",
- },
- {
- children: "Task 3",
- },
- {
- children: "[ 1,2 ]",
- },
- {
- children: "123",
- },
- {
- children: "4",
- },
- ],
- ],
- ]
+ const data = [
+ ...[
+ [
+ {
+ id: '1',
+ children: 'My first del 1',
+ rowSpan: 3,
+ },
+ {
+ children: 'WP 1',
+ },
+ {
+ children: 'Activity 1',
+ },
+ {
+ children: '1',
+ },
+ {
+ children: 'Task 1',
+ },
+ {
+ children: '[]',
+ },
+ {
+ children: '0',
+ },
+ {
+ children: '0',
+ },
+ ],
+ [
+ {
+ id: 'wp-id-2',
+ children: 'WP 2',
+ rowSpan: 2,
+ },
+ {
+ id: 'act-id-111',
+ children: 'ACT 2',
+ rowSpan: 2,
+ },
+ {
+ children: '2',
+ },
+ {
+ children:
+ 'TASK 2 ssssssssssssssssssssssssssssssssssssssssssssssssssssss ddddddddddddddddddddddddddddddddddddddd eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
+ },
+ {
+ children: '[]',
+ },
+ {
+ children: '0',
+ },
+ {
+ children: '0',
+ },
+ ],
+ [
+ {
+ children: '3',
+ },
+ {
+ children: 'Task 3',
+ },
+ {
+ children: '[ 1,2 ]',
+ },
+ {
+ children: '123',
+ },
+ {
+ children: '4',
+ },
+ ],
+ ],
+ ]
- return {
- data,
- headerData,
- }
+ return {
+ data,
+ headerData,
+ }
}
diff --git a/src/utils/generateData.ts b/src/stories/generateData.ts
similarity index 91%
rename from src/utils/generateData.ts
rename to src/stories/generateData.ts
index cd02aa8..2545750 100644
--- a/src/utils/generateData.ts
+++ b/src/stories/generateData.ts
@@ -1,6 +1,5 @@
-// @ts-ignore
import faker from "faker"
-import {Column, HeadersData} from "../column/types/header.type"
+import {Column, HeadersData} from "../column-grid/types/header.type"
import {GridData, GridRow} from "../types/row.interface"
export const getSimpleData = (rows: number, columns: number) => {
@@ -29,11 +28,11 @@ export const getSimpleData = (rows: number, columns: number) => {
}
}
- headerData.push(row)
+ headerData.push(row as any)
}
for (let i = 0; i < columns; i += 1) {
- headerData[0].push({
+ (headerData[0] as any).push({
id: "col-" + Math.random(),
title: `Column ${i + 1}`,
accessor: "",
diff --git a/src/utils/helpers.tsx b/src/utils/helpers.tsx
deleted file mode 100644
index 9448d99..0000000
--- a/src/utils/helpers.tsx
+++ /dev/null
@@ -1,170 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from "react"
-import { Cell } from "../types/row.interface"
-/** @todo Move this file and rename into the core */
-
-
-const generateDummy = ({ parent, index, totalDummies, dummyFor }) => {
- const style: any = {}
- const first = index === 0
- const last = index === totalDummies - 1
-
- /** @todo Review this part, we might only provide a className with theme to indicate whether its the last
- * column or last row or even for spanns, the user might want to do something about it **/
- if (dummyFor === "colSpan") {
- style.borderLeft = 0
- if (!last) {
- style.borderRight = 0
- }
- } else {
- style.borderTop = 0
- if (!last) {
- style.borderBottom = 0
- }
- }
-
- return {
- ...parent,
- colSpan: 1,
- rowSpan: 1,
- children: "",
- dummy: true,
- dummyFor,
- first,
- last,
- style: {
- ...parent.style,
- ...style,
- },
- parentRow: parent /** @todo We might only need the id in the future or the index */,
- }
-}
-
-/**@todo Re create this without being an object and also move into a different file this kind of process
- * **/
-const dummyBuffer = {
- init() {
- // @ts-ignore
- this.buffer = new Map()
- },
- dispose() {
- // @ts-ignore
- this.buffer = null
- },
- extract(index) {
- // @ts-ignore
- const { buffer } = this
- const arr: any[] = []
-
- if (!buffer.has(index) || buffer.get(index).length === 0) {
- return arr
- }
-
- buffer.get(index).forEach((item) => {
- if (!item.remainingRows) {
- return
- }
-
- arr.push(
- generateDummy({
- parent: item.parent,
- totalDummies: item.parent.rowSpan - 1,
- index: item.parent.rowSpan - 1 - item.remainingRows,
- dummyFor: "rowSpan",
- })
- )
-
- // eslint-disable-next-line no-param-reassign
- item.remainingRows -= 1
- })
-
- return arr
- },
- insert(key, arr) {
- // @ts-ignore
- if (this.buffer.has(key)) {
- // @ts-ignore
- this.buffer.get(key).push(...arr)
- } else {
- // @ts-ignore
- this.buffer.set(key, arr)
- }
- },
-}
-
-/**
- * Requires a re-write due to flatMap, unknown types and the data not being passed
- * with interface and as row(with cells)
- * @param data
- */
-export function insertDummyCells(data: any[] = []) {
- dummyBuffer.init()
-
- const transformedData = data.map((row: any) => {
- let lastRowSpanI = -1
- let finalCellIndex = 0
-
- const cells = row.flatMap((col, colIndex) => {
- const arr: any[] = []
-
- // consume from buffer
- arr.push(...dummyBuffer.extract(finalCellIndex))
-
- // add dummy cell data to buffer for future rows to extract
- if (col.rowSpan > 1) {
- const parentData = {
- remainingRows: col.rowSpan - 1,
- parent: col,
- }
-
- let bufferKey = finalCellIndex
- if (lastRowSpanI !== -1 && row[colIndex - 1].rowSpan > 1) {
- bufferKey = lastRowSpanI
- } else {
- lastRowSpanI = finalCellIndex
- }
-
- const dummiesToPush = col.colSpan || 1
- const dummiesArray: any[] = []
-
- for (let i = 0; i < dummiesToPush; i += 1) {
- dummiesArray.push({ ...parentData })
- }
-
- dummyBuffer.insert(bufferKey, dummiesArray)
- }
-
- arr.push({
- ...col,
- })
-
- if (col.colSpan > 1) {
- const totalDummies = col.colSpan - 1
- const dummies = [...Array(totalDummies).keys()].map((_, index) =>
- generateDummy({
- parent: col,
- index,
- totalDummies,
- dummyFor: "colSpan",
- })
- )
-
- arr.push(...dummies)
- }
-
- finalCellIndex += arr.length
-
- return arr
- })
-
- // buffer has data for next cell
- cells.push(...dummyBuffer.extract(finalCellIndex))
-
- return cells
- })
-
- //Release the used memory of the map
- dummyBuffer.dispose()
-
- return transformedData
-}