@commonsku/styles 1.13.1 → 1.13.2

package/dist/index.es.js

@@ -13,7 +13,7 @@ import 'react-datepicker/dist/react-datepicker.css';
 import { useTable, useSortBy, usePagination, useColumnOrder, useBlockLayout, useFlexLayout } from 'react-table';
 import { useSticky } from 'react-table-sticky';
 import { areEqual, FixedSizeList } from 'react-window';
-import { Draggable, DragDropContext, Droppable } from 'react-beautiful-dnd';
+import { Draggable, Droppable, DragDropContext } from 'react-beautiful-dnd';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation. All rights reserved.
@@ -4761,7 +4761,7 @@ var CalendarTask = React__default.forwardRef(function (_a, ref) {
     var _e = useState(completed), checked = _e[0], setChecked = _e[1];
     useEffect(function () {
         setChecked(completed);
-    }, [completed]);
+    }, [completed, title, date]);
     return (React__default.createElement(StyledCalendarTaskWrapper, __assign({ backgroundColor: colorType === 'light-red' ? '#ffebf2' : '#01d37417' }, props),
         React__default.createElement(LabeledCheckbox, { ref: ref, stopPropagation: true, checked: checked, checkboxPosition: "top-right", checkboxStyle: {
                 borderColor: checked
@@ -6422,18 +6422,19 @@ var LabeledBar = function (props) {
             } }, text),
         React__default.createElement(ProgressBar$1, __assign({ ref: measureRef }, props))));
 };
-var MultiProgress = function (props) {
-    var max = typeof props.max === 'number'
-        ? props.max
-        : !isNaN(props.max) ? parseInt(props.max) : 0;
+var MultiProgress = function (_a) {
+    var labeled = _a.labeled, error = _a.error, title = _a.title, values = _a.values, maxVal = _a.max, props = __rest(_a, ["labeled", "error", "title", "values", "max"]);
+    var max = typeof maxVal === 'number'
+        ? maxVal
+        : !isNaN(maxVal) ? parseInt(maxVal) : 0;
     return React__default.createElement(ProgressWrapper$1, __assign({}, props),
-        props.title ? React__default.createElement(StyledProgressTitle, null, props.title) : null,
-        props.values.map(function (v, i) {
+        title ? React__default.createElement(StyledProgressTitle, null, title) : null,
+        values.map(function (v, i) {
             var color = i % 2 === 0 ? 'rgba(1, 211, 116, 0.2)' : '#00d374';
             var val = typeof v.value === 'number' ? v.value : !isNaN(v.value) ? parseInt(v.value) : 0;
-            return (props.labeled ? React__default.createElement(LabeledBar, { value: val < max ? val : max, max: max, error: props.error, color: color, text: v.text ? v.text(val) : val }) : React__default.createElement(ProgressBar$1, { value: val < max ? val : max, max: max, error: props.error, color: color }));
+            return (labeled ? React__default.createElement(LabeledBar, { value: val < max ? val : max, max: max, error: error, color: color, text: v.text ? v.text(val) : val, key: "multiprogress-bar-" + val + "-" + i }) : React__default.createElement(ProgressBar$1, { value: val < max ? val : max, max: max, error: error, color: color, key: "multiprogress-bar-" + val + "-" + i }));
         }),
-        props.error ? React__default.createElement(Text, { color: "error", bold: true }, props.error) : null);
+        error ? React__default.createElement(Text, { color: "error", bold: true }, error) : null);
 };
 var LabeledMultiProgress = function (props) {
     return React__default.createElement("div", null,
@@ -6651,13 +6652,32 @@ var droppableChildWrapperProps = function (provided, snapshot, props) {
 };
 
 var DraggableCalendarFooterTasks = function (_a) {
-    var currentWeek = _a.currentWeek, _b = _a.tasks, tasks = _b === void 0 ? [] : _b;
+    var onClickTask = _a.onClickTask, onUpdateTask = _a.onUpdateTask, _b = _a.tasks, tasks = _b === void 0 ? [] : _b;
     return (React__default.createElement(HeaderWrapper, null,
         React__default.createElement(Col, { start: true, xs: true }, "Overdue: "),
         React__default.createElement(Col, { xs: true },
             React__default.createElement(Row, null, tasks
-                .map(function (t, j) { return (React__default.createElement(Draggable, { key: 'footer-task-' + j, draggableId: 'footer-task-' + j, index: j }, function (provided, snapshot) { return (React__default.createElement(Col, __assign({ xs: true, md: 3, padded: true }, draggableChildWrapperProps(provided, snapshot)),
-                React__default.createElement(CalendarTask, __assign({}, t, { date: undefined })))); })); })))));
+                .map(function (t, j) { return (React__default.createElement(Draggable, { key: 'footer-task-' + j, draggableId: 'footer-task-' + j, index: j }, function (provided, snapshot) { return (React__default.createElement(Col, __assign({ xs: true, md: 3, padded: true }, draggableChildWrapperProps(provided, snapshot), { onClick: function (e) { onClickTask && onClickTask(t); } }),
+                React__default.createElement(CalendarTask, __assign({}, t, { date: undefined, onClickCheckbox: function (completed) {
+                        if (onUpdateTask) {
+                            onUpdateTask(__assign(__assign({}, t), { completed: completed }), {
+                                index: j,
+                                action: 'TOGGLE_CHECKBOX',
+                                oldTask: t,
+                                updatedFields: ['completed'],
+                            });
+                        }
+                        else if (t.onClickCheckbox) {
+                            t.onClickCheckbox(completed);
+                        }
+                    } })))); })); })))));
+};
+
+var DroppableFooter = function (_a) {
+    var tasks = _a.tasks, props = __rest(_a, ["tasks"]);
+    return (React__default.createElement(Droppable, { droppableId: 'footer-droppable', key: 'footer-droppable', isDropDisabled: true }, function (provided, snapshot) { return (React__default.createElement("div", __assign({}, droppableChildWrapperProps(provided, snapshot, { style: !tasks.length ? { minHeight: 0 } : { minHeight: 0 } })),
+        provided.placeholder,
+        React__default.createElement(DraggableCalendarFooterTasks, __assign({}, props, { tasks: tasks })))); }));
 };
 
 var DraggableTaskBody = function (_a) {
@@ -6677,7 +6697,8 @@ var DraggableTaskBody = function (_a) {
                         task.onClickCheckbox(completed);
                     }
                 } }))))); }));
-};
+};
+
 var DroppableDays = function (_a) {
     var days = _a.days, selectedDate = _a.selectedDate, onUpdateTask = _a.onUpdateTask, onClickDay = _a.onClickDay, onClickTask = _a.onClickTask, weekend = _a.weekend, props = __rest(_a, ["days", "selectedDate", "onUpdateTask", "onClickDay", "onClickTask", "weekend"]);
     return (React__default.createElement(DaysBodyWrapper, __assign({ className: "days-body-wrapper" }, props),
@@ -6692,13 +6713,8 @@ var DroppableDays = function (_a) {
                                     onUpdateTask(newData, __assign(__assign({}, otherData), { day__id: __id__, task__id: t.__id__ }));
                                 } : undefined })); }))); }))) : ""));
         }))));
-};
-var DroppableFooter = function (_a) {
-    var tasks = _a.tasks, props = __rest(_a, ["tasks"]);
-    return (React__default.createElement(Droppable, { droppableId: 'footer-droppable', key: 'footer-droppable', isDropDisabled: true }, function (provided, snapshot) { return (React__default.createElement("div", __assign({}, droppableChildWrapperProps(provided, snapshot, { style: !tasks.length ? { minHeight: 0 } : { minHeight: 0 } })),
-        provided.placeholder,
-        React__default.createElement(DraggableCalendarFooterTasks, __assign({}, props, { tasks: tasks })))); }));
-};
+};
+
 var DraggableTasksCalendar = function (_a) {
     var _b = _a.tasks, tasks = _b === void 0 ? [] : _b, onUpdateTask = _a.onUpdateTask, onClickTask = _a.onClickTask, _c = _a.headerTabs, headerTabs = _c === void 0 ? [] : _c, _d = _a.footerTasks, footerTasks = _d === void 0 ? [] : _d, _e = _a.components, _f = _a.weekend, weekend = _f === void 0 ? false : _f, onChangeWeek = _a.onChangeWeek, onChangeMonth = _a.onChangeMonth, onToggleWeekend = _a.onToggleWeekend, _g = _a.showAddTaskBtn, showAddTaskBtn = _g === void 0 ? true : _g, onClickAddTask = _a.onClickAddTask, _h = _a.loading, loading = _h === void 0 ? false : _h, props = __rest(_a, ["tasks", "onUpdateTask", "onClickTask", "headerTabs", "footerTasks", "components", "weekend", "onChangeWeek", "onChangeMonth", "onToggleWeekend", "showAddTaskBtn", "onClickAddTask", "loading"]);
     var _j = useCalendar({ onChangeWeek: onChangeWeek, onChangeMonth: onChangeMonth }), currentMonth = _j.currentMonth, currentWeek = _j.currentWeek, selectedDate = _j.selectedDate, onNextWeek = _j.onNextWeek, onPrevWeek = _j.onPrevWeek, onNextMonth = _j.onNextMonth, onPrevMonth = _j.onPrevMonth, onClickDay = _j.onClickDay;
@@ -6830,7 +6846,22 @@ var DraggableTasksCalendar = function (_a) {
                             });
                         })();
                     } })),
-            React__default.createElement(DroppableFooter, __assign({ tasks: state.footerTasks }, headerProps)))));
+            React__default.createElement(DroppableFooter, __assign({ tasks: state.footerTasks, onClickTask: onClickTask, onUpdateTask: function (newData, _a) {
+                    var day__id = _a.day__id, task__id = _a.task__id, otherData = __rest(_a, ["day__id", "task__id"]);
+                    _.flowRight(function () {
+                        onUpdateTask(newData, otherData);
+                    }, function () {
+                        if (!day__id) {
+                            return;
+                        }
+                        setState(function (s) {
+                            var _a;
+                            return __assign(__assign({}, s), { days: __assign(__assign({}, s.days), (_a = {}, _a[day__id] = __assign(__assign({}, s.days[day__id]), { tasks: __spreadArrays(s.days[day__id].tasks.slice(0, otherData.index), [
+                                        __assign(__assign({}, s.days[day__id].tasks[otherData.index]), newData)
+                                    ], s.days[day__id].tasks.slice(otherData.index + 1)) }), _a)) });
+                        });
+                    })();
+                } }, headerProps)))));
 };
 
 var scrollbarWidth = function () {
@@ -6846,18 +6877,15 @@ var scrollbarWidth = function () {
 var SimpleWindowedTableStyles = styled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\npadding: 1rem;\n\n.project-table-list-rows {\n  width: 100% !important;\n\n  ", "\n}\n\n.table {\n  display: inline-block;\n  border-spacing: 0;\n  width: 100%;\n  min-width: 100% !important;\n\n  .header.tr {\n    width: 100% !important;\n    min-width: 100% !important;\n    overflow-x: hidden;\n  }\n\n  .tr {\n    :last-child {\n      .td {\n        border-bottom: 0;\n      }\n    }\n  }\n\n  .th {\n    border-bottom: 2px solid ", ";\n\n    div {\n      display: inline-block;\n    }\n  }\n\n  .td {\n    border-bottom: 1px solid ", ";\n  }\n\n  .th,\n  .td {\n    margin: 0;\n    padding: 0.5rem;\n  }\n}\n"], ["\npadding: 1rem;\n\n.project-table-list-rows {\n  width: 100% !important;\n\n  ",
     "\n}\n\n.table {\n  display: inline-block;\n  border-spacing: 0;\n  width: 100%;\n  min-width: 100% !important;\n\n  .header.tr {\n    width: 100% !important;\n    min-width: 100% !important;\n    overflow-x: hidden;\n  }\n\n  .tr {\n    :last-child {\n      .td {\n        border-bottom: 0;\n      }\n    }\n  }\n\n  .th {\n    border-bottom: 2px solid ", ";\n\n    div {\n      display: inline-block;\n    }\n  }\n\n  .td {\n    border-bottom: 1px solid ", ";\n  }\n\n  .th,\n  .td {\n    margin: 0;\n    padding: 0.5rem;\n  }\n}\n"])), function (p) { return p.rowClickable ? "\n    .tr {\n      cursor: pointer;\n    }\n  " : ''; }, colors.disabledButtonBorder, colors.disabledButtonBorder);
 function SimpleWindowedTable(_a) {
-    var columns = _a.columns, data = _a.data, _b = _a.minWidth, minWidth = _b === void 0 ? 140 : _b, _c = _a.maxWidth, maxWidth = _c === void 0 ? 500 : _c, defaultSort = _a.defaultSort, onClickRow = _a.onClickRow, onScroll = _a.onScroll;
+    var columns = _a.columns, data = _a.data, _b = _a.itemSize, itemSize = _b === void 0 ? 80 : _b, _c = _a.height, height = _c === void 0 ? 500 : _c, _d = _a.minWidth, minWidth = _d === void 0 ? 140 : _d, _e = _a.maxWidth, maxWidth = _e === void 0 ? 500 : _e, defaultSort = _a.defaultSort, onClickRow = _a.onClickRow, onScroll = _a.onScroll, onUpdateData = _a.onUpdateData, _f = _a.useTableProps, useTableProps = _f === void 0 ? {} : _f;
     var defaultColumn = React__default.useMemo(function () { return ({
         minWidth: minWidth,
         maxWidth: maxWidth,
     }); }, [minWidth, maxWidth]);
     var scrollBarSize = React__default.useMemo(function () { return scrollbarWidth(); }, []);
-    var _d = useTable({
-        columns: columns,
+    var _g = useTable(__assign({ columns: columns,
         data: data,
-        defaultColumn: defaultColumn,
-        initialState: __assign({}, (defaultSort ? { sortBy: [defaultSort] } : {})),
-    }, useSortBy, useFlexLayout), getTableProps = _d.getTableProps, getTableBodyProps = _d.getTableBodyProps, headerGroups = _d.headerGroups, rows = _d.rows, totalColumnsWidth = _d.totalColumnsWidth, prepareRow = _d.prepareRow;
+        defaultColumn: defaultColumn, initialState: __assign({}, (defaultSort ? { sortBy: [defaultSort] } : {})), onUpdateData: onUpdateData }, useTableProps), useSortBy, useFlexLayout), getTableProps = _g.getTableProps, getTableBodyProps = _g.getTableBodyProps, headerGroups = _g.headerGroups, rows = _g.rows, totalColumnsWidth = _g.totalColumnsWidth, prepareRow = _g.prepareRow;
     var headerRef = useRef(null);
     var rowsRef = useRef();
     var onListScroll = function (e) {
@@ -6887,7 +6915,7 @@ function SimpleWindowedTable(_a) {
             column.render("Header"),
             React__default.createElement("span", { style: { display: 'inline-block', paddingLeft: 5, verticalAlign: 'text-top' } }, column.isSorted ? (column.isSortedDesc ? React__default.createElement(DownArrowIcon, { width: "15px" }) : React__default.createElement(UpArrowIcon, { width: "15px" })) : React__default.createElement(UpDownArrowsIcon, { width: "15px" })))); }))); })),
         React__default.createElement("div", __assign({}, getTableBodyProps()),
-            React__default.createElement(FixedSizeList, { height: 500, itemCount: rows.length, itemSize: 80, width: totalColumnsWidth + scrollBarSize, className: "project-table-list-rows", outerRef: rowsRef, onScroll: onScroll }, RenderRow))));
+            React__default.createElement(FixedSizeList, { height: height, itemCount: rows.length, itemSize: itemSize, width: totalColumnsWidth + scrollBarSize, className: "project-table-list-rows", outerRef: rowsRef, onScroll: onScroll }, RenderRow))));
 }
 var templateObject_1$L;