ywana-core8 0.0.918 → 0.0.919

package/dist/index.umd.js

@@ -416,24 +416,24 @@
         outlined = _ref.outlined,
         raised = _ref.raised,
         className = _ref.className;
-      function click(event) {
+      var click = React.useCallback(function (event) {
         if (!disabled) {
           event.stopPropagation();
           event.preventDefault();
           if (action) action();
         }
-      }
+      }, [disabled, action]);
       var style = raised ? 'raised' : outlined ? 'outlined' : 'normal';
       if (disabled) style = style + " disabled";
       return /*#__PURE__*/React__default["default"].createElement("button", {
         className: "btn " + style + " " + className,
         onClick: click
-      }, icon ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+      }, icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
         icon: icon,
         size: "small",
         clickable: true,
         action: click
-      }) : null, /*#__PURE__*/React__default["default"].createElement(Text, null, label));
+      }), /*#__PURE__*/React__default["default"].createElement(Text, null, label));
     };
 
     /**
@@ -5707,6 +5707,145 @@
       }));
     };
 
+    var Planner2 = function Planner2(_ref) {
+      var from = _ref.from,
+        to = _ref.to,
+        _ref$lanes = _ref.lanes,
+        lanes = _ref$lanes === void 0 ? [] : _ref$lanes,
+        _ref$events = _ref.events,
+        events = _ref$events === void 0 ? [] : _ref$events,
+        _ref$cellWidth = _ref.cellWidth,
+        cellWidth = _ref$cellWidth === void 0 ? 10 : _ref$cellWidth,
+        _ref$rowHeaderWidth = _ref.rowHeaderWidth,
+        rowHeaderWidth = _ref$rowHeaderWidth === void 0 ? 10 : _ref$rowHeaderWidth,
+        EventRenderer = _ref.EventRenderer;
+      var _useState = React.useState([]),
+        days = _useState[0],
+        setDays = _useState[1];
+      var lastDay = new Date(to);
+      React.useEffect(function () {
+        var day = new Date(from);
+        var nextDays = [];
+        while (day <= lastDay) {
+          nextDays.push({
+            day: day.getDate(),
+            weekday: day.toLocaleString('en-US', {
+              weekday: 'short'
+            }),
+            month: day.toLocaleString('en-US', {
+              month: 'short'
+            }),
+            monthNum: day.getMonth() + 1,
+            year: day.getFullYear()
+          });
+          day.setDate(day.getDate() + 1);
+        }
+        setDays(nextDays);
+      }, [from, to]);
+      var uniqueMonths = Array.from(new Set(days.map(function (_ref2) {
+        var month = _ref2.month;
+        return month;
+      })));
+      var monthWidths = uniqueMonths.map(function (month) {
+        var monthDays = days.filter(function (day) {
+          return day.month === month;
+        });
+        return monthDays.length * cellWidth + "rem";
+      });
+      var dayWidth = cellWidth + "rem";
+      var totalDaysWidth = days.length * cellWidth + rowHeaderWidth;
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "planner2-row"
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "months-row",
+        style: {
+          display: 'flex',
+          width: totalDaysWidth + "rem"
+        }
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "row-header",
+        style: {
+          width: rowHeaderWidth + "rem"
+        }
+      }), uniqueMonths.map(function (month, index) {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "month-cell",
+          key: month,
+          style: {
+            fontWeight: 'bold',
+            minWidth: monthWidths[index]
+          }
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "month-name"
+        }, month, " ", new Date(from).getFullYear()));
+      })), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "days-row",
+        style: {
+          display: 'flex',
+          width: totalDaysWidth + "rem"
+        }
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "row-header",
+        style: {
+          width: rowHeaderWidth + "rem"
+        }
+      }), days.map(function (_ref3) {
+        var day = _ref3.day,
+          weekday = _ref3.weekday,
+          month = _ref3.month;
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "day-cell",
+          style: {
+            minWidth: dayWidth,
+            maxWidth: dayWidth
+          },
+          key: "day_" + month + "-" + day
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "weekday"
+        }, weekday.substring(0, 2)), /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "daynum"
+        }, day));
+      })), lanes.map(function (lane, index) {
+        var laneEvents = events.filter(function (event) {
+          return event.lane === lane.id;
+        });
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "content-row",
+          style: {
+            width: totalDaysWidth + "rem"
+          }
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
+          className: "row-header",
+          style: {
+            width: rowHeaderWidth + "rem"
+          }
+        }, lane.title), days.map(function (_ref4) {
+          var day = _ref4.day,
+            month = _ref4.month,
+            monthNum = _ref4.monthNum,
+            year = _ref4.year;
+          var dayDate = new Date(year, monthNum - 1, day);
+          var dayEvents = laneEvents.filter(function (event) {
+            var eventDate = new Date(event.date);
+            return eventDate.getDate() === dayDate.getDate() && eventDate.getMonth() === dayDate.getMonth() && eventDate.getFullYear() === dayDate.getFullYear();
+          });
+          return /*#__PURE__*/React__default["default"].createElement("div", {
+            className: "content-cell",
+            style: {
+              minWidth: dayWidth,
+              maxWidth: dayWidth
+            },
+            key: "content" + index + "_" + month + "-" + day
+          }, dayEvents.map(function (event) {
+            return /*#__PURE__*/React__default["default"].createElement(EventRenderer, {
+              key: event.id,
+              event: event
+            });
+          }));
+        }));
+      }));
+    };
+
     /**
      * Password Editor
      */
@@ -11584,6 +11723,7 @@
     exports.PasswordEditor = PasswordEditor;
     exports.PasswordField = PasswordField;
     exports.Planner = Planner;
+    exports.Planner2 = Planner2;
     exports.Property = Property;
     exports.RadioButton = RadioButton;
     exports.ResetPasswordBox = ResetPasswordBox;