ods-component-lib 1.18.231 → 1.18.232

package/dist/components/antd/modal/OdsAdvanceModal.d.ts

@@ -0,0 +1,7 @@
+import { ModalProps } from "antd";
+import React from "react";
+export interface ICustomModalProps extends ModalProps {
+    content: React.ReactNode;
+}
+declare const OdsAdvanceModal: React.FC<ICustomModalProps>;
+export default OdsAdvanceModal;

package/dist/components/devextreme/OdsMergeCellDataGrid/OdsMergeCellDataGrid.Types.d.ts

@@ -25,7 +25,7 @@ interface IExportProps {
 }
 export declare type ITooltipType = "raw" | "styled";
 export interface IOdsDataGridProps extends IDataGridOptions, IMultiCellEditableDataGridProps {
-    ref?: React.MutableRefObject<any> | undefined;
+    refGrid: React.MutableRefObject<any>;
     dataGridPageName?: string;
     language: string;
     exportFileName: string;

package/dist/components/devextreme/OdsTimeline/OdsTimeline.Constants.d.ts

@@ -0,0 +1,4 @@
+export declare const Constants: {
+    timelineDefaultStartDate: Date;
+    timelineDefaultEndDate: Date;
+};

package/dist/components/devextreme/OdsTimeline/OdsTimeline.Functions.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export declare const checkboxCellComponent: (props: any) => React.JSX.Element;
+export declare const statusCellComponent: (props: any) => React.JSX.Element;
+export declare const minimalHeaderCellComponent: (data: any, __el: any) => React.JSX.Element;
+export declare const mapCustomTask: (item: any) => any;
+export declare const setSelectedKeys: (datasource: any[], key?: string, selectedKeys?: number[] | string[]) => any[];

package/dist/components/devextreme/OdsTimeline/OdsTimeline.Types.d.ts

@@ -0,0 +1,77 @@
+/// <reference types="react" />
+import { IColumnProps, IGanttOptions, IItemProps } from "devextreme-react/gantt";
+export interface IMenuLinkItem {
+    text: string;
+    url: string;
+    queryParamNames?: string[];
+}
+export interface ICustomSelectionChange {
+    data: any;
+    isSelected: boolean;
+}
+export interface IDateRangeChange {
+    startDate: Date;
+    endDate: Date;
+}
+export interface IStatusColumnChange {
+    data: any;
+    status: boolean;
+    dataField: string;
+}
+export interface ICheckboxColumnChange {
+    data: any;
+    isChecked: boolean;
+    dataField: string;
+}
+export interface IOdsTimelineProps extends React.PropsWithChildren<IGanttOptions> {
+    /**
+     * Set columns for listview.
+     */
+    customColumns?: IOdsTimelineColumnProps[];
+    /**
+     * Set task list. It is used for list view and timeline view.
+     */
+    customTasks: any[];
+    /**
+     * Set data field name from task list. This is used for selection.
+     */
+    customTaskKey?: string;
+    /**
+     * Set key values to be selected. "multiSelectionEnabled" must be true.
+     */
+    customSelectedKeys?: string[] | number[];
+    /**
+     * Set true if you want multi selection in list view.
+     */
+    multiSelectionEnabled?: boolean;
+    /**
+     * This is a selection event that fired when selection is changed.
+     */
+    onCustomSelectionChanged(e: ICustomSelectionChange): void;
+    /**
+     * This is a date range event that fired when date range is changed.
+     */
+    onDateRangeChange(e: IDateRangeChange): void;
+}
+export interface IOdsTimelineColumnProps extends IColumnProps {
+    isMinimized?: boolean;
+    isStatusColumn?: boolean;
+    isCheckboxColumn?: boolean;
+}
+export interface IOdsTimelineStatusColumnProps extends IOdsTimelineColumnProps {
+    onStatusColumnChange(e: IStatusColumnChange): void;
+}
+export interface IOdsTimelineCheckboxColumnProps extends IOdsTimelineColumnProps {
+    onCheckboxColumnChange(e: ICheckboxColumnChange): void;
+}
+export interface IOdsTimelineDateFilter extends IItemProps {
+    defaultStartDate?: Date;
+    defaultEndDate?: Date;
+    backText?: string;
+    nextText?: string;
+    onFilterRangeChange(e: IDateRangeChange): void;
+}
+export declare const enum DateDirection {
+    prevMonth = "previousMonth",
+    nextMonth = "nextMonth"
+}

package/dist/components/devextreme/OdsTimeline/OdsTimeline.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import "./OdsTimeline.css";
+import { IOdsTimelineProps } from "./OdsTimeline.Types";
+declare const OdsTimeline: (props: IOdsTimelineProps) => React.JSX.Element;
+export default OdsTimeline;

package/dist/components/devextreme/OdsTimeline/OdsTimelineDateFilter.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { IOdsTimelineDateFilter } from "./OdsTimeline.Types";
+export declare const OdsTimelineDateFilter: (props: IOdsTimelineDateFilter | Readonly<IOdsTimelineDateFilter>) => React.JSX.Element;

package/dist/components/devextreme/OdsTimeline/OdsTimelineSelectionColumn.d.ts

@@ -0,0 +1,2 @@
+import { ICustomSelectionChange, IOdsTimelineColumnProps } from "./OdsTimeline.Types";
+export declare const OdsTimelineSelectionColumn: (selectionEvent: (e: ICustomSelectionChange) => void) => IOdsTimelineColumnProps;

package/dist/components/devextreme/OdsTimelineTable/OdsTimelineTable.Style.d.ts

@@ -0,0 +1,9 @@
+export declare const useStyles: (props?: {
+    taskWidth: any;
+    progressPerc: any;
+    progressColor: any;
+}) => import("antd-style").ReturnStyles<{
+    taskBar: import("antd-style").SerializedStyles;
+    taskProgress: import("antd-style").SerializedStyles;
+    taskBarTitle: import("antd-style").SerializedStyles;
+}>;

package/dist/components/devextreme/OdsTimelineTable/OdsTimelineTable.Types.d.ts

@@ -44,14 +44,22 @@ export interface IOdsTimelineTableProps extends React.PropsWithChildren<IGanttOp
      * Set true if you want multi selection in list view.
      */
     multiSelectionEnabled?: boolean;
+    /**
+     * Set true if it' s visible.
+     */
+    toolbarVisible?: boolean;
+    /**
+     * Set true if it' s visible.
+     */
+    showDateFilter?: boolean;
     /**
      * This is a selection event that fired when selection is changed.
      */
-    onCustomSelectionChanged(e: ICustomSelectionChange): void;
+    onCustomSelectionChanged?(e: ICustomSelectionChange): void;
     /**
      * This is a date range event that fired when date range is changed.
      */
-    onDateRangeChange(e: IDateRangeChange): void;
+    onDateRangeChange?(e: IDateRangeChange): void;
 }
 export interface IOdsTimelineColumnProps extends IColumnProps {
     isMinimized?: boolean;

package/dist/components/devextreme/OdsTimelineTable/OdsTimelineTable.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import "./OdsTimelineTable.css";
 import { IOdsTimelineTableProps } from "./OdsTimelineTable.Types";
-declare const OdsTimeline: (props: IOdsTimelineTableProps) => React.JSX.Element;
-export default OdsTimeline;
+declare const OdsTimelineTable: React.ForwardRefExoticComponent<IOdsTimelineTableProps & React.RefAttributes<unknown>>;
+export default OdsTimelineTable;

package/dist/components/devextreme/OdsTimelineTable/OdsTimelineTableSelectionColumn.d.ts

@@ -1,2 +1,2 @@
 import { ICustomSelectionChange, IOdsTimelineColumnProps } from "./OdsTimelineTable.Types";
-export declare const OdsTimelineSelectionColumn: (selectionEvent: (e: ICustomSelectionChange) => void) => IOdsTimelineColumnProps;
+export declare const OdsTimelineSelectionColumn: (selectionEvent?: (e: ICustomSelectionChange) => void) => IOdsTimelineColumnProps;

package/dist/components/devextreme/OdsTimelineTable/OdsTimelineTableTaskTemplate.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+declare const OdsTimelineTableTaskTemplate: ({ taskData, taskSize }: {
+    taskData: any;
+    taskSize: any;
+}) => React.JSX.Element;
+export default OdsTimelineTableTaskTemplate;

package/dist/index.css

@@ -223,6 +223,14 @@ tr._2CvVM._3Xrp3._19iuB._3udtX {
     pointer-events: none;
     background-color: #f0f0f0;
 }
+._3lbve {
+  writing-mode: vertical-lr;
+}
+
+._3sOBn {
+  vertical-align: middle !important;
+}
+
 ._3n8UJ {
   background-color: lightgreen;
 }

package/dist/index.d.ts

@@ -64,6 +64,7 @@ import OdsTreeListMenu from "./components/antd/treeListMenu/OdsTreeListMenu";
 export { default as OdsTreeSelect } from "./components/antd/treeSelect/OdsTreeSelect";
 export { default as OdsCurrencyInput } from "./components/antd/currencyInput/OdsCurrencyInput";
 export { default as OdsMergeCellDataGrid } from "./components/devextreme/OdsMergeCellDataGrid/OdsMergeCellDataGrid";
+export { default as OdsTimelineTable } from "./components/devextreme/OdsTimelineTable/OdsTimelineTable";
 export { OdsButton };
 export { OdsInput };
 export { OdsDropdownButton };

package/dist/index.js

@@ -45,6 +45,7 @@ var devextremeReact = require('devextreme-react');
 var antdStyle = require('antd-style');
 var FileSaver = require('file-saver');
 require('devextreme/dist/css/dx.light.css');
+var gantt = require('devextreme-react/gantt');
 
 function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
@@ -38054,7 +38055,7 @@ OdsMergeCellDataGridHelper.getInstance = function () {
 var useToken$2 = antd.theme.useToken;
 var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
   var _props$columnResizing, _props$className, _props$selection, _props$selectOptions, _props$selectOptions$, _props$selectOptions2, _props$selectOptions$2, _props$selectOptions3;
-  var ref = props.ref,
+  var refGrid = props.refGrid,
     keyExpr = props.keyExpr,
     hasFastUpdate = props.hasFastUpdate,
     fastUpdateButtonText = props.fastUpdateButtonText,
@@ -38076,7 +38077,6 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
     token = _useToken.token;
   var _AntForm$useForm = antd.Form.useForm(),
     fastUpdateForm = _AntForm$useForm[0];
-  var gridRef = ref != null ? ref : React.useRef(null);
   var helper = OdsMergeCellDataGridHelper.getInstance();
   var pkName = keyExpr && keyExpr.toString();
   var _useState = React.useState(false),
@@ -38148,8 +38148,8 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
   React.useEffect(function () {
     localization.locale(localStorage.getItem("locale"));
     localization.loadMessages(JSON.parse(localStorage.getItem("localTranslation")));
-    if (gridRef.current) {
-      gridRef.current.instance.updateDimensions();
+    if (refGrid.current) {
+      refGrid.current.instance.updateDimensions();
     }
     hasFastUpdate && document.addEventListener("keydown", keydownEvent);
     return function () {
@@ -38208,13 +38208,13 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
     }));
     for (var rowIndex = minRowIndex; rowIndex <= maxRowIndex; rowIndex++) {
       var _loop2 = function _loop2() {
-        var _column = gridRef.current.instance.columnOption(colIndex);
+        var _column = refGrid.current.instance.columnOption(colIndex);
         if (constants$2.allowedDataTypesForMultiCellEditing.some(function (item) {
           return item.toLocaleLowerCase() == _column.dataType.toLocaleLowerCase();
         })) {
           result.push({
             dataField: _column.dataField,
-            pkValue: gridRef.current.instance.cellValue(rowIndex, pkName)
+            pkValue: refGrid.current.instance.cellValue(rowIndex, pkName)
           });
         }
       };
@@ -38250,8 +38250,8 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
     });
   };
   var removeSelectedCell = function removeSelectedCell(rowIndex, colIndex) {
-    var dataField = gridRef.current.instance.columnOption(colIndex).dataField;
-    var pkValue = gridRef.current.instance.cellValue(rowIndex, pkName);
+    var dataField = refGrid.current.instance.columnOption(colIndex).dataField;
+    var pkValue = refGrid.current.instance.cellValue(rowIndex, pkName);
     setSelectedCells(function (prev) {
       return prev.filter(function (cell) {
         return !(cell.dataField == dataField && cell.pkValue == pkValue);
@@ -38704,7 +38704,7 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
     dataSource: data,
     showBorders: true,
     columnAutoWidth: false,
-    ref: gridRef,
+    ref: refGrid,
     height: props.height == undefined ? window.innerHeight - 164 : props.height,
     allowColumnResizing: true,
     columnResizingMode: (_props$columnResizing = props.columnResizingMode) != null ? _props$columnResizing : "widget",
@@ -38869,6 +38869,316 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
   })));
 };
 
+var currentYear = new Date().getFullYear();
+var Constants = {
+  timelineDefaultStartDate: new Date(currentYear, 0, 1),
+  timelineDefaultEndDate: new Date(currentYear + 1, 0, 1)
+};
+
+var checkboxCellComponent = function checkboxCellComponent(props) {
+  var isChecked = props.data.value;
+  var onChange = function onChange(e) {
+    props.data.column.onCheckboxColumnChange({
+      data: props.data.data,
+      dataField: props.data.column.dataField,
+      isChecked: e.target.checked
+    });
+  };
+  return React__default.createElement(OdsCheckbox, {
+    key: "odstimeline-checkboxcolumn-" + props.data.name,
+    style: {
+      height: "32px"
+    },
+    defaultChecked: isChecked,
+    onChange: onChange
+  });
+};
+var statusCellComponent = function statusCellComponent(props) {
+  var isActive = props.data.value;
+  var _onClick = function onClick(value) {
+    props.data.column.onStatusColumnChange({
+      data: props.data.data,
+      dataField: props.data.column.dataField,
+      status: value
+    });
+  };
+  return isActive ? React__default.createElement(icons.CheckCircleFilled, {
+    style: {
+      fontSize: 20,
+      color: "#568B6B"
+    },
+    onClick: function onClick() {
+      return _onClick(false);
+    }
+  }) : React__default.createElement(icons.CheckCircleFilled, {
+    style: {
+      fontSize: 20,
+      color: "#EDEDED"
+    },
+    onClick: function onClick() {
+      return _onClick(true);
+    }
+  });
+};
+var minimalHeaderCellComponent = function minimalHeaderCellComponent(data, __el) {
+  return React__default.createElement("div", {
+    className: "minimalHeaderCell"
+  }, data.data.column.caption);
+};
+var mapCustomTask = function mapCustomTask(item) {
+  return _extends({
+    isSelected: false
+  }, item);
+};
+var setSelectedKeys = function setSelectedKeys(datasource, key, selectedKeys) {
+  if (key && key != "" && selectedKeys && selectedKeys.length > 0) {
+    return datasource.map(function (x) {
+      if (selectedKeys.some(function (y) {
+        return y == x[key];
+      })) {
+        x.isSelected = true;
+      }
+      return x;
+    });
+  } else {
+    return datasource;
+  }
+};
+
+var OdsTimelineDateFilter = function OdsTimelineDateFilter(props) {
+  var defaultStartDate = props.defaultStartDate,
+    defaultEndDate = props.defaultEndDate,
+    backText = props.backText,
+    nextText = props.nextText,
+    onFilterRangeChange = props.onFilterRangeChange;
+  var _useState = React.useState([dayjs_min(defaultStartDate), dayjs_min(defaultEndDate)]),
+    dateRange = _useState[0],
+    setDateRange = _useState[1];
+  var startDate = dateRange[0].toDate();
+  var endDate = dateRange[1].toDate();
+  var onPickerValueChange = function onPickerValueChange(date) {
+    var newStartDate = date[0].toDate(),
+      newEndDate = date[1].toDate();
+    (newStartDate != startDate || newEndDate != endDate) && onFilterRangeChange({
+      startDate: newStartDate,
+      endDate: newEndDate
+    });
+    setDateRange(date);
+  };
+  var buttonClick = function buttonClick(monthDirection) {
+    var newStartDate = startDate,
+      newEndDate = endDate,
+      currentStartYear = startDate.getFullYear(),
+      currentStartMonth = startDate.getMonth(),
+      currentEndYear = endDate.getFullYear(),
+      currentEndMonth = endDate.getMonth();
+    switch (monthDirection) {
+      case "previousMonth":
+        newStartDate.setMonth(currentStartMonth == 0 ? 11 : currentStartMonth - 1);
+        newStartDate.setFullYear(currentStartMonth == 0 ? currentStartYear - 1 : currentStartYear);
+        break;
+      case "nextMonth":
+        newEndDate.setMonth(currentEndMonth == 11 ? 0 : currentEndMonth + 1);
+        newEndDate.setFullYear(currentEndMonth == 11 ? currentEndYear + 1 : currentEndYear);
+        break;
+    }
+    setDateRange([dayjs_min(newStartDate), dayjs_min(newEndDate)]);
+    onFilterRangeChange({
+      startDate: newStartDate,
+      endDate: newEndDate
+    });
+  };
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(antd.Space, null, React__default.createElement(OdsButton, {
+    key: "odsbutton-back",
+    onClick: function onClick(_e) {
+      buttonClick("previousMonth");
+    },
+    style: {
+      backgroundColor: "#A19FA0",
+      color: "white",
+      borderColor: "white"
+    }
+  }, React__default.createElement(icons.LeftCircleFilled, null), backText != null ? backText : "Back"), React__default.createElement(OdsDateRangePicker, {
+    defaultValue: [dayjs_min(defaultStartDate), dayjs_min(defaultEndDate)],
+    value: dateRange,
+    onPickerValueChange: onPickerValueChange
+  }), React__default.createElement(OdsButton, {
+    key: "odsbutton-next",
+    onClick: function onClick(_e) {
+      buttonClick("nextMonth");
+    },
+    style: {
+      backgroundColor: "#A19FA0",
+      color: "white",
+      borderColor: "white"
+    }
+  }, nextText != null ? nextText : "Next", React__default.createElement(icons.RightCircleFilled, null))));
+};
+
+var OdsTimelineSelectionColumn = function OdsTimelineSelectionColumn(selectionEvent) {
+  var selectionColumn = {
+    caption: "",
+    minWidth: 50,
+    width: 50,
+    dataField: "isSelected",
+    cellComponent: function cellComponent(props) {
+      var onChange = function onChange(e) {
+        selectionEvent && selectionEvent({
+          data: props.data.data,
+          isSelected: e.target.checked
+        });
+      };
+      return React__default.createElement(OdsCheckbox, {
+        key: "odstimeline-selection-" + props.data.name,
+        style: {
+          height: "32px"
+        },
+        defaultChecked: props.data.value,
+        onChange: onChange
+      });
+    }
+  };
+  return selectionColumn;
+};
+
+var _templateObject$B, _templateObject2$9, _templateObject3$6;
+var useStyles$b = antdStyle.createStyles(function (_ref, props) {
+  var css = _ref.css;
+  return {
+    taskBar: css(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n        min-height: 22px;\n        display: block;\n        overflow: hidden;\n        width: ", "px;\n        border: 1px solid #f0f0f0;\n        border-radius: 5px;\n        background-color: #f0f0f0;\n      "])), props.taskWidth),
+    taskProgress: css(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n        height: 100%;\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        width: ", "%;\n        border: 1px solid ", ";\n        border-radius: 5px;\n        background-color: ", ";\n      "])), props.progressPerc, props.progressColor, props.progressColor),
+    taskBarTitle: css(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n        z-index: 1;\n        padding-left: 4px;\n        position: absolute;\n      "])))
+  };
+});
+
+var OdsTimelineTableTaskTemplate = function OdsTimelineTableTaskTemplate(_ref) {
+  var taskData = _ref.taskData,
+    taskSize = _ref.taskSize;
+  var _useStyles = useStyles$b({
+      progressColor: taskData.color,
+      progressPerc: taskData.progress,
+      taskWidth: taskSize.width
+    }),
+    timelineTableStyles = _useStyles.styles;
+  return React__default.createElement("div", {
+    className: timelineTableStyles.taskBar
+  }, React__default.createElement("span", {
+    className: timelineTableStyles.taskBarTitle
+  }, taskData.title), React__default.createElement("div", {
+    className: timelineTableStyles.taskProgress
+  }));
+};
+
+var OdsTimelineTable = React.forwardRef(function (props, ref) {
+  var customColumns = props.customColumns,
+    customTasks = props.customTasks,
+    customTaskKey = props.customTaskKey,
+    customSelectedKeys = props.customSelectedKeys,
+    children = props.children,
+    startDateRange = props.startDateRange,
+    endDateRange = props.endDateRange,
+    multiSelectionEnabled = props.multiSelectionEnabled,
+    toolbarVisible = props.toolbarVisible,
+    showDateFilter = props.showDateFilter,
+    onCustomSelectionChanged = props.onCustomSelectionChanged,
+    onDateRangeChange = props.onDateRangeChange;
+  var _useState = React.useState(startDateRange != null ? startDateRange : Constants.timelineDefaultStartDate),
+    startDate = _useState[0],
+    setStartDate = _useState[1];
+  var _useState2 = React.useState(endDateRange != null ? endDateRange : Constants.timelineDefaultEndDate),
+    endDate = _useState2[0],
+    setEndDate = _useState2[1];
+  var _useState3 = React.useState([]),
+    timelineTasks = _useState3[0],
+    setTimelineTasks = _useState3[1];
+  React.useEffect(function () {
+    setTimelineTasks(multiSelectionEnabled ? setSelectedKeys(customTasks.map(mapCustomTask), customTaskKey, customSelectedKeys) : customTasks);
+  }, [customTasks]);
+  var getSelectedRowsData = function getSelectedRowsData() {
+    return timelineTasks.filter(function (item) {
+      return item.isSelected == true;
+    });
+  };
+  var updateSelectionData = function updateSelectionData(keyValue, isSelected) {
+    setTimelineTasks(function (prev) {
+      return prev.map(function (item) {
+        if (item[props.customTaskKey] == keyValue) {
+          item.isSelected = isSelected;
+        }
+        return item;
+      });
+    });
+  };
+  var onTimelineDateRangeChange = function onTimelineDateRangeChange(e) {
+    setStartDate(e.startDate);
+    setEndDate(e.endDate);
+    onDateRangeChange && onDateRangeChange({
+      startDate: e.startDate,
+      endDate: e.endDate
+    });
+  };
+  var onTimelineCheckboxSelectionChange = function onTimelineCheckboxSelectionChange(e) {
+    updateSelectionData(e.data[props.customTaskKey], e.isSelected);
+    onCustomSelectionChanged && onCustomSelectionChanged(e);
+  };
+  var timelineColumns = multiSelectionEnabled ? [OdsTimelineSelectionColumn(onTimelineCheckboxSelectionChange)].concat(customColumns) : customColumns;
+  React.useImperativeHandle(ref, function () {
+    return {
+      getSelectedRowsData: getSelectedRowsData
+    };
+  });
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(gantt.Gantt, Object.assign({
+    width: "100%",
+    height: 500,
+    startDateRange: startDate,
+    endDateRange: endDate,
+    taskContentRender: function taskContentRender(params) {
+      return React__default.createElement(OdsTimelineTableTaskTemplate, Object.assign({}, params));
+    }
+  }, props), toolbarVisible ? React__default.createElement(gantt.Toolbar, null, showDateFilter ? React__default.createElement(gantt.Item, {
+    key: "OdsTimelineTable_ToolbarItem_DateFilter",
+    component: function component(props) {
+      return OdsTimelineDateFilter(_extends({}, props, {
+        defaultStartDate: startDate,
+        defaultEndDate: endDate,
+        onFilterRangeChange: onTimelineDateRangeChange
+      }));
+    }
+  }) : "", React__default.createElement(gantt.Item, {
+    key: "OdsTimelineTable_ToolbarItem_ZoomIn",
+    name: "zoomIn"
+  }), React__default.createElement(gantt.Item, {
+    key: "OdsTimelineTable_ToolbarItem_ZoomOut",
+    name: "zoomOut"
+  })) : "", React__default.createElement(gantt.ContextMenu, {
+    enabled: false
+  }), timelineColumns === null || timelineColumns === void 0 ? void 0 : timelineColumns.map(function (columnProps) {
+    if (columnProps.isStatusColumn) {
+      return React__default.createElement(gantt.Column, Object.assign({
+        width: 50,
+        minWidth: 50,
+        cssClass: "cellCenteredVertically",
+        cellComponent: statusCellComponent,
+        headerCellComponent: minimalHeaderCellComponent
+      }, columnProps));
+    } else if (columnProps.isCheckboxColumn) {
+      return React__default.createElement(gantt.Column, Object.assign({
+        width: 50,
+        minWidth: 50,
+        cssClass: "cellCenteredVertically",
+        cellComponent: checkboxCellComponent,
+        headerCellComponent: minimalHeaderCellComponent
+      }, columnProps));
+    } else {
+      return React__default.createElement(gantt.Column, Object.assign({
+        headerCellComponent: columnProps.isMinimized && minimalHeaderCellComponent
+      }, columnProps));
+    }
+  }), React__default.createElement(gantt.Tasks, {
+    dataSource: timelineTasks
+  }), children));
+});
+
 /**
  * Checks if `value` is the
  * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
@@ -40587,6 +40897,7 @@ exports.OdsTag = OdsTag;
 exports.OdsText = OdsText;
 exports.OdsTextArea = OdsTextArea;
 exports.OdsTimeline = OdsTimeline;
+exports.OdsTimelineTable = OdsTimelineTable;
 exports.OdsTimepicker = OdsTimepicker;
 exports.OdsTitle = OdsTitle;
 exports.OdsTransfer = OdsTransfer;