ywana-core8 0.0.241 → 0.0.245

package/dist/index.cjs

@@ -1,6 +1,8 @@
 require('material-design-icons-iconfont/dist/material-design-icons.css');
 var React = require('react');
 var RSwitch = require('react-switch');
+var moment = require('moment');
+var momentRange = require('moment-range');
 var reactNotifications = require('react-notifications');
 require('react-notifications/lib/notifications.css');
 var equal = require('deep-equal');
@@ -10,6 +12,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var RSwitch__default = /*#__PURE__*/_interopDefaultLegacy(RSwitch);
+var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
 var equal__default = /*#__PURE__*/_interopDefaultLegacy(equal);
 var ResumableJS__default = /*#__PURE__*/_interopDefaultLegacy(ResumableJS);
 
@@ -704,16 +707,45 @@ var LinearProgress = function LinearProgress(props) {
  */
 
 var Property = function Property(props) {
-  var label = props.label,
+  var id = props.id,
+      className = props.className,
+      label = props.label,
       name = props.name,
-      value = props.value;
+      initial = props.initial,
+      value = props.value,
+      _props$editable = props.editable,
+      editable = _props$editable === void 0 ? false : _props$editable,
+      onChange = props.onChange;
+
+  function change(event) {
+    if (onChange) {
+      var _value = event.target.value;
+      onChange(id, _value);
+    }
+  }
+
+  function clear() {
+    if (onChange) onChange(id, "");
+  }
+
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "property"
+    className: "property property-" + id + " " + className
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "property-name"
-  }, name || label), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, name || label), initial ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "property-value"
+  }, initial) : null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "property-value"
-  }, value));
+  }, editable ? /*#__PURE__*/React__default["default"].createElement("input", {
+    type: "text",
+    value: value,
+    onChange: change
+  }) : value, editable && value.length > 0 ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: "close",
+    size: "small",
+    clickable: true,
+    action: clear
+  }) : null));
 };
 
 /**
@@ -1007,8 +1039,8 @@ var DropDown = function DropDown(props) {
       options = _props$options === void 0 ? [] : _props$options,
       value = props.value,
       onChange = props.onChange,
-      _props$canFilter = props.canFilter,
-      canFilter = _props$canFilter === void 0 ? false : _props$canFilter,
+      _props$predictive = props.predictive,
+      predictive = _props$predictive === void 0 ? false : _props$predictive,
       _props$readOnly3 = props.readOnly,
       readOnly = _props$readOnly3 === void 0 ? false : _props$readOnly3;
 
@@ -1033,7 +1065,7 @@ var DropDown = function DropDown(props) {
   }, [value]);
 
   function change(id, value) {
-    if (canFilter) {
+    if (predictive) {
       setLabel(value);
     } else {
       if (onChange) onChange(id, value);
@@ -1066,7 +1098,7 @@ var DropDown = function DropDown(props) {
     var canShow = open == true && Array.isArray(options);
 
     if (canShow) {
-      var filterActive = canFilter === true && label && label.length > 0;
+      var filterActive = predictive === true && label && label.length > 0;
       var items = filterActive ? options.filter(function (option) {
         return option.label.toUpperCase().indexOf(label.toUpperCase()) >= 0;
       }) : options;
@@ -2328,6 +2360,242 @@ var WaitScreen = function WaitScreen() {
   }));
 };
 
+var ranges = momentRange.extendMoment(moment__default["default"]);
+var DATE_RANGE = [{
+  label: "Week",
+  value: "week"
+}, {
+  label: "Month",
+  value: "month"
+}];
+/**
+ * Planner
+ */
+
+var Planner = function Planner(_ref) {
+  var title = _ref.title,
+      _ref$events = _ref.events,
+      events = _ref$events === void 0 ? [] : _ref$events,
+      _ref$lanes = _ref.lanes,
+      lanes = _ref$lanes === void 0 ? [] : _ref$lanes,
+      _ref$navigation = _ref.navigation,
+      navigation = _ref$navigation === void 0 ? true : _ref$navigation;
+
+  var _useState = React.useState("month"),
+      dateRange = _useState[0],
+      setDateRange = _useState[1];
+
+  var _useState2 = React.useState("2021-02-26"),
+      from = _useState2[0],
+      setFrom = _useState2[1];
+
+  var _useState3 = React.useState("2021-04-01"),
+      to = _useState3[0],
+      setTo = _useState3[1];
+
+  React.useEffect(function () {
+    var today = moment__default["default"]();
+    var from_date = today.startOf(dateRange).format("YYYY-MM-DD");
+    var to_date = today.endOf(dateRange).format("YYYY-MM-DD");
+    setFrom(from_date);
+    setTo(to_date);
+  }, [dateRange]);
+
+  function next() {
+    var actual = moment__default["default"](from);
+    var next = actual.add(1, dateRange);
+    var from_date = next.startOf(dateRange).format("YYYY-MM-DD");
+    var to_date = next.endOf(dateRange).format("YYYY-MM-DD");
+    setFrom(from_date);
+    setTo(to_date);
+  }
+
+  function prev() {
+    var actual = moment__default["default"](from);
+    var next = actual.subtract(1, dateRange);
+    var from_date = next.startOf(dateRange).format("YYYY-MM-DD");
+    var to_date = next.endOf(dateRange).format("YYYY-MM-DD");
+    setFrom(from_date);
+    setTo(to_date);
+  }
+
+  var period = React.useMemo(function () {
+    var start = ranges(from, "YYYY-MM-DD");
+    var end = ranges(to, "YYYY-MM-DD");
+    var range = ranges.range(start, end);
+    var period = Array.from(range.by("day")).map(function (m) {
+      return {
+        year: m.year(),
+        month: m.month(),
+        day: m.date(),
+        moment: m
+      };
+    });
+    return period;
+  }, [from, to]);
+  var label = /*#__PURE__*/React__default["default"].createElement(Text$1, {
+    use: "headline6"
+  }, title);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "planner-box"
+  }, navigation ? /*#__PURE__*/React__default["default"].createElement(Header, {
+    title: label
+  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: "chevron_right",
+    clickable: true,
+    action: next
+  }), /*#__PURE__*/React__default["default"].createElement(TextField, {
+    id: "to",
+    type: "date",
+    label: "To",
+    value: to,
+    onChange: function onChange(id, value) {
+      return setTo(value);
+    }
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "expand"
+  }), /*#__PURE__*/React__default["default"].createElement(DropDown, {
+    id: "ranges",
+    label: "Date Range",
+    options: DATE_RANGE,
+    value: dateRange,
+    onChange: function onChange(id, value) {
+      return setDateRange(value);
+    }
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "expand"
+  }), /*#__PURE__*/React__default["default"].createElement(TextField, {
+    id: "from",
+    type: "date",
+    label: "From",
+    value: from,
+    onChange: function onChange(id, value) {
+      return setFrom(value);
+    }
+  }), /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: "chevron_left",
+    clickable: true,
+    action: prev
+  })) : null, /*#__PURE__*/React__default["default"].createElement("main", {
+    className: "planner"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "column0"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "column-header"
+  }), lanes.map(function (lane) {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "row-header"
+    }, lane.label);
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "rows"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "row row0"
+  }, period.map(function (date, index) {
+    var first = index === 0 || date.day === 1 ? "first" : "";
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "column-header"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "month-header " + first
+    }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
+      use: "overline"
+    }, date.moment.format("MMM"))));
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "row row1"
+  }, period.map(function (date) {
+    var isWekend = [0, 6].includes(date.moment.day());
+    var weekend = isWekend ? "weekend" : "";
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "column-header"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "date-header " + weekend
+    }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
+      use: "headline6"
+    }, date.moment.format("DD")), "\xA0", /*#__PURE__*/React__default["default"].createElement(Text$1, {
+      use: "caption"
+    }, date.moment.format("ddd"))));
+  })), lanes.map(function (lane) {
+    return /*#__PURE__*/React__default["default"].createElement(PlannerRow, {
+      lane: lane,
+      events: events,
+      period: period
+    });
+  }))));
+};
+/**
+ * Planner Row
+ */
+
+var PlannerRow = function PlannerRow(props) {
+  var lane = props.lane,
+      _props$events = props.events,
+      events = _props$events === void 0 ? [] : _props$events,
+      period = props.period;
+  var rowEvents = events.filter(function (event) {
+    return event.lane === lane.id;
+  });
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "row"
+  }, period.map(function (date) {
+    var slotDate = new Date(date.year, date.month, date.day);
+    slotDate.setHours(0, 0, 0);
+    var cellEvents = rowEvents.filter(function (event) {
+      var eventDate = new Date(event.date);
+      eventDate.setHours(0, 0, 0);
+      return eventDate.getTime() === slotDate.getTime();
+    });
+    return /*#__PURE__*/React__default["default"].createElement(PlannerCell, {
+      date: date,
+      events: cellEvents
+    });
+  }));
+};
+/**
+ * Planner Cell
+ */
+
+
+var PlannerCell = function PlannerCell(_ref3) {
+  var lane = _ref3.lane,
+      date = _ref3.date,
+      onDrop = _ref3.onDrop;
+
+  var _useState4 = React.useState(false),
+      dragOver = _useState4[0],
+      setDragOver = _useState4[1];
+
+  function onDragOver(event) {
+    if (!dragOver) setDragOver(true);
+    event.stopPropagation();
+    event.preventDefault();
+  }
+
+  function onDragLeave(event) {
+    setDragOver(false);
+    event.stopPropagation();
+    event.preventDefault();
+  }
+
+  function drop(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    var id = event.dataTransfer.getData("text");
+    if (onDrop) onDrop({
+      id: id,
+      lane: lane.id,
+      date: date.moment.format("YYYY-MM-DD")
+    });
+  }
+
+  var isWekend = [0, 6].includes(date.moment.day());
+  var weekend = isWekend ? "weekend" : "";
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "cell " + weekend,
+    onDragOver: onDragOver,
+    onDragLeave: onDragLeave,
+    onDrop: drop
+  }, "c");
+};
+
 /**
  * Page Context
  */
@@ -5545,6 +5813,7 @@ exports.MenuSeparator = MenuSeparator;
 exports.Page = Page;
 exports.PageContext = PageContext;
 exports.PageProvider = PageProvider;
+exports.Planner = Planner;
 exports.Property = Property;
 exports.RadioButton = RadioButton;
 exports.ResetPasswordBox = ResetPasswordBox;