ods-component-lib 1.18.231 → 1.18.232

package/dist/index.modern.js

@@ -1,9 +1,9 @@
 import { Alert, AutoComplete, Button, Dropdown, Calendar, Card as Card$1, Checkbox, DatePicker, Divider, Collapse, Image, Input, InputNumber, List, Modal, notification, Radio, Rate, Select, Space, Spin, Switch, Tabs, Table, Tag, Timeline, TimePicker, Typography, theme, Badge, ConfigProvider, Menu, Form as Form$1, Row, Col, Upload, Tooltip as Tooltip$1, Transfer, Progress, Tree, TreeSelect } from 'antd';
 import styled, { ThemeProvider } from 'styled-components';
-import React, { useState, useRef, useEffect, useCallback, Suspense, useMemo } from 'react';
+import React, { useState, useRef, useEffect, useCallback, Suspense, useMemo, forwardRef, useImperativeHandle } from 'react';
 import Marquee from 'react-fast-marquee';
 import Card from 'antd/es/card/Card';
-import { EyeTwoTone, EyeInvisibleOutlined, FrownOutlined, MehOutlined, SmileOutlined, HeartOutlined, PlusOutlined, InfoCircleOutlined, CheckOutlined, CloseOutlined } from '@ant-design/icons';
+import { EyeTwoTone, EyeInvisibleOutlined, FrownOutlined, MehOutlined, SmileOutlined, HeartOutlined, PlusOutlined, InfoCircleOutlined, CheckOutlined, CloseOutlined, CheckCircleFilled, LeftCircleFilled, RightCircleFilled } from '@ant-design/icons';
 import 'react-phone-input-2/lib/style.css';
 import PhoneInput from 'react-phone-input-2';
 import Parser from 'html-react-parser';
@@ -21,6 +21,7 @@ import { TreeList, Lookup, DataGrid as DataGrid$2, Toolbar as Toolbar$1 } from '
 import { createStyles } from 'antd-style';
 import { saveAs as saveAs$1 } from 'file-saver';
 import 'devextreme/dist/css/dx.light.css';
+import { Gantt, Toolbar as Toolbar$2, Item as Item$2, ContextMenu, Column as Column$1, Tasks } from 'devextreme-react/gantt';
 
 function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
@@ -38030,7 +38031,7 @@ OdsMergeCellDataGridHelper.getInstance = function () {
 var useToken$2 = 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,
@@ -38052,7 +38053,6 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
     token = _useToken.token;
   var _AntForm$useForm = Form$1.useForm(),
     fastUpdateForm = _AntForm$useForm[0];
-  var gridRef = ref != null ? ref : useRef(null);
   var helper = OdsMergeCellDataGridHelper.getInstance();
   var pkName = keyExpr && keyExpr.toString();
   var _useState = useState(false),
@@ -38124,8 +38124,8 @@ var OdsMergeCellDataGrid = function OdsMergeCellDataGrid(props) {
   useEffect(function () {
     locale(localStorage.getItem("locale"));
     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 () {
@@ -38184,13 +38184,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)
           });
         }
       };
@@ -38226,8 +38226,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);
@@ -38680,7 +38680,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",
@@ -38845,6 +38845,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.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.createElement(CheckCircleFilled, {
+    style: {
+      fontSize: 20,
+      color: "#568B6B"
+    },
+    onClick: function onClick() {
+      return _onClick(false);
+    }
+  }) : React.createElement(CheckCircleFilled, {
+    style: {
+      fontSize: 20,
+      color: "#EDEDED"
+    },
+    onClick: function onClick() {
+      return _onClick(true);
+    }
+  });
+};
+var minimalHeaderCellComponent = function minimalHeaderCellComponent(data, __el) {
+  return React.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 = 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.createElement(React.Fragment, null, React.createElement(Space, null, React.createElement(OdsButton, {
+    key: "odsbutton-back",
+    onClick: function onClick(_e) {
+      buttonClick("previousMonth");
+    },
+    style: {
+      backgroundColor: "#A19FA0",
+      color: "white",
+      borderColor: "white"
+    }
+  }, React.createElement(LeftCircleFilled, null), backText != null ? backText : "Back"), React.createElement(OdsDateRangePicker, {
+    defaultValue: [dayjs_min(defaultStartDate), dayjs_min(defaultEndDate)],
+    value: dateRange,
+    onPickerValueChange: onPickerValueChange
+  }), React.createElement(OdsButton, {
+    key: "odsbutton-next",
+    onClick: function onClick(_e) {
+      buttonClick("nextMonth");
+    },
+    style: {
+      backgroundColor: "#A19FA0",
+      color: "white",
+      borderColor: "white"
+    }
+  }, nextText != null ? nextText : "Next", React.createElement(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.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 = 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.createElement("div", {
+    className: timelineTableStyles.taskBar
+  }, React.createElement("span", {
+    className: timelineTableStyles.taskBarTitle
+  }, taskData.title), React.createElement("div", {
+    className: timelineTableStyles.taskProgress
+  }));
+};
+
+var OdsTimelineTable = 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 = useState(startDateRange != null ? startDateRange : Constants.timelineDefaultStartDate),
+    startDate = _useState[0],
+    setStartDate = _useState[1];
+  var _useState2 = useState(endDateRange != null ? endDateRange : Constants.timelineDefaultEndDate),
+    endDate = _useState2[0],
+    setEndDate = _useState2[1];
+  var _useState3 = useState([]),
+    timelineTasks = _useState3[0],
+    setTimelineTasks = _useState3[1];
+  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;
+  useImperativeHandle(ref, function () {
+    return {
+      getSelectedRowsData: getSelectedRowsData
+    };
+  });
+  return React.createElement(React.Fragment, null, React.createElement(Gantt, Object.assign({
+    width: "100%",
+    height: 500,
+    startDateRange: startDate,
+    endDateRange: endDate,
+    taskContentRender: function taskContentRender(params) {
+      return React.createElement(OdsTimelineTableTaskTemplate, Object.assign({}, params));
+    }
+  }, props), toolbarVisible ? React.createElement(Toolbar$2, null, showDateFilter ? React.createElement(Item$2, {
+    key: "OdsTimelineTable_ToolbarItem_DateFilter",
+    component: function component(props) {
+      return OdsTimelineDateFilter(_extends({}, props, {
+        defaultStartDate: startDate,
+        defaultEndDate: endDate,
+        onFilterRangeChange: onTimelineDateRangeChange
+      }));
+    }
+  }) : "", React.createElement(Item$2, {
+    key: "OdsTimelineTable_ToolbarItem_ZoomIn",
+    name: "zoomIn"
+  }), React.createElement(Item$2, {
+    key: "OdsTimelineTable_ToolbarItem_ZoomOut",
+    name: "zoomOut"
+  })) : "", React.createElement(ContextMenu, {
+    enabled: false
+  }), timelineColumns === null || timelineColumns === void 0 ? void 0 : timelineColumns.map(function (columnProps) {
+    if (columnProps.isStatusColumn) {
+      return React.createElement(Column$1, Object.assign({
+        width: 50,
+        minWidth: 50,
+        cssClass: "cellCenteredVertically",
+        cellComponent: statusCellComponent,
+        headerCellComponent: minimalHeaderCellComponent
+      }, columnProps));
+    } else if (columnProps.isCheckboxColumn) {
+      return React.createElement(Column$1, Object.assign({
+        width: 50,
+        minWidth: 50,
+        cssClass: "cellCenteredVertically",
+        cellComponent: checkboxCellComponent,
+        headerCellComponent: minimalHeaderCellComponent
+      }, columnProps));
+    } else {
+      return React.createElement(Column$1, Object.assign({
+        headerCellComponent: columnProps.isMinimized && minimalHeaderCellComponent
+      }, columnProps));
+    }
+  }), React.createElement(Tasks, {
+    dataSource: timelineTasks
+  }), children));
+});
+
 /**
  * Checks if `value` is the
  * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
@@ -40501,5 +40811,5 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
   })));
 };
 
-export { DxTreeList, OdsAlert, OdsAutoComplete, OdsBadge, OdsBadgeRibbon, OdsBannerAlert, OdsBasicDataGrid, OdsBasicTable, OdsButton, CabinGrid as OdsCabinGrid, OdsCalendar, OdsCard, OdsChange$1 as OdsChange, OdsCheckbox, OdsCheckboxGroup, OdsCollapse, OdsCurrencyInput, OdsDataGrid, OdsDateRangePicker, OdsDatepicker, OdsDisplayGrid, OdsDivider, OdsDropdown, OdsDropdownButton, OdsFileUpload, OdsFileUploadv2, OdsFilter, OdsFilterPlus, OdsFilterTagView, OdsImage, OdsInlineEditDataGrid, OdsInput, OdsInputNumber, OdsLink, OdsList, MasterDetailDataGrid as OdsMasterDetailDataGrid, OdsMergeCellDataGrid, OdsModal, OdsModalOld, OdsMultiSelect, OdsNotification, OdsParagraph, OdsPassword, OdsPhoneInput, OdsProgress, OdsRadio, OdsRadioGroup, OdsRangeTimepicker, OdsRate, OdsRemoteDataGrid, OdsSearch, OdsSelect, OdsSelectableTable, OdsServerSideDatagrid, OdsSpin, OdsSwitch, OdsTab, OdsBasicTable as OdsTable, OdsTag, OdsText, OdsTextArea, OdsTimeline, OdsTimepicker, OdsTitle, OdsTransfer, OdsTreeListMenu, OdsTreeSelect };
+export { DxTreeList, OdsAlert, OdsAutoComplete, OdsBadge, OdsBadgeRibbon, OdsBannerAlert, OdsBasicDataGrid, OdsBasicTable, OdsButton, CabinGrid as OdsCabinGrid, OdsCalendar, OdsCard, OdsChange$1 as OdsChange, OdsCheckbox, OdsCheckboxGroup, OdsCollapse, OdsCurrencyInput, OdsDataGrid, OdsDateRangePicker, OdsDatepicker, OdsDisplayGrid, OdsDivider, OdsDropdown, OdsDropdownButton, OdsFileUpload, OdsFileUploadv2, OdsFilter, OdsFilterPlus, OdsFilterTagView, OdsImage, OdsInlineEditDataGrid, OdsInput, OdsInputNumber, OdsLink, OdsList, MasterDetailDataGrid as OdsMasterDetailDataGrid, OdsMergeCellDataGrid, OdsModal, OdsModalOld, OdsMultiSelect, OdsNotification, OdsParagraph, OdsPassword, OdsPhoneInput, OdsProgress, OdsRadio, OdsRadioGroup, OdsRangeTimepicker, OdsRate, OdsRemoteDataGrid, OdsSearch, OdsSelect, OdsSelectableTable, OdsServerSideDatagrid, OdsSpin, OdsSwitch, OdsTab, OdsBasicTable as OdsTable, OdsTag, OdsText, OdsTextArea, OdsTimeline, OdsTimelineTable, OdsTimepicker, OdsTitle, OdsTransfer, OdsTreeListMenu, OdsTreeSelect };
 //# sourceMappingURL=index.modern.js.map