ywana-core8 0.0.239 → 0.0.243

package/dist/index.umd.js

@@ -1,12 +1,13 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('material-design-icons-iconfont/dist/material-design-icons.css'), require('react'), require('react-switch'), require('react-notifications'), require('react-notifications/lib/notifications.css'), require('deep-equal'), require('resumablejs')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'material-design-icons-iconfont/dist/material-design-icons.css', 'react', 'react-switch', 'react-notifications', 'react-notifications/lib/notifications.css', 'deep-equal', 'resumablejs'], factory) :
-  (global = global || self, factory(global.ywanaCore8 = {}, null, global.react, global.reactSwitch, global.reactNotifications, null, global.deepEqual, global.resumablejs));
-})(this, (function (exports, materialDesignIcons_css, React, RSwitch, reactNotifications, notifications_css, equal, ResumableJS) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('material-design-icons-iconfont/dist/material-design-icons.css'), require('react'), require('react-switch'), require('moment'), require('moment-range'), require('react-notifications'), require('react-notifications/lib/notifications.css'), require('deep-equal'), require('resumablejs')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'material-design-icons-iconfont/dist/material-design-icons.css', 'react', 'react-switch', 'moment', 'moment-range', 'react-notifications', 'react-notifications/lib/notifications.css', 'deep-equal', 'resumablejs'], factory) :
+  (global = global || self, factory(global.ywanaCore8 = {}, null, global.react, global.reactSwitch, global.moment, global.momentRange, global.reactNotifications, null, global.deepEqual, global.resumablejs));
+})(this, (function (exports, materialDesignIcons_css, React, RSwitch, moment, momentRange, reactNotifications, notifications_css, equal, ResumableJS) {
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
   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);
 
@@ -701,16 +702,45 @@
    */
 
   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("");
+    }
+
     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));
   };
 
   /**
@@ -882,7 +912,7 @@
     }
 
     function focus() {
-      if (site) {
+      if (site && site.changeFocus) {
         site.changeFocus({
           lose: function lose() {// DO NOTHING
           }
@@ -920,6 +950,79 @@
       className: "bar"
     }), label ? /*#__PURE__*/React__default["default"].createElement("label", null, labelTxt) : null);
   };
+  /**
+   * Text Area
+   */
+
+  var TextArea = function TextArea(props) {
+    var site = React.useContext(SiteContext);
+    var id = props.id,
+        _props$type2 = props.type,
+        type = _props$type2 === void 0 ? 'text' : _props$type2,
+        label = props.label,
+        placeholder = props.placeholder,
+        value = props.value,
+        _props$readOnly2 = props.readOnly,
+        readOnly = _props$readOnly2 === void 0 ? false : _props$readOnly2,
+        _props$canClear2 = props.canClear,
+        canClear = _props$canClear2 === void 0 ? true : _props$canClear2,
+        onChange = props.onChange,
+        onEnter = props.onEnter,
+        onClick = props.onClick;
+
+    function onKeyPress(event) {
+      var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
+
+      if (key == 13) {
+        if (onEnter) onEnter();
+      }
+    }
+
+    function change(event) {
+      event.stopPropagation();
+      event.preventDefault();
+      var value = event.target.value;
+      console.log(value);
+      if (onChange) onChange(id, value);
+    }
+
+    function focus() {
+      if (site && site.changeFocus) {
+        site.changeFocus({
+          lose: function lose() {// DO NOTHING
+          }
+        });
+      }
+    }
+
+    function clear() {
+      if (onChange) onChange(id, "");
+    }
+
+    var labelStyle = label ? "" : "no-label";
+    var style = "textarea " + labelStyle + " textarea-" + type;
+    var labelTxt = /*#__PURE__*/React__default["default"].createElement(Text$1, null, label);
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "" + style,
+      onClick: onClick
+    }, /*#__PURE__*/React__default["default"].createElement("textarea", {
+      id: id,
+      placeholder: placeholder,
+      value: value,
+      required: true,
+      onChange: change,
+      onKeyDown: onKeyPress,
+      onFocus: focus,
+      readOnly: readOnly
+    }), !readOnly && canClear && value && value.length > 0 ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+      icon: "close",
+      clickable: true,
+      size: "small",
+      action: clear
+    }) : null, /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "bar"
+    }), label ? /*#__PURE__*/React__default["default"].createElement("label", null, labelTxt) : null);
+  };
   /**
    * Dropdown
    */
@@ -933,8 +1036,8 @@
         onChange = props.onChange,
         _props$canFilter = props.canFilter,
         canFilter = _props$canFilter === void 0 ? false : _props$canFilter,
-        _props$readOnly2 = props.readOnly,
-        readOnly = _props$readOnly2 === void 0 ? false : _props$readOnly2;
+        _props$readOnly3 = props.readOnly,
+        readOnly = _props$readOnly3 === void 0 ? false : _props$readOnly3;
 
     var _useState = React.useState(false),
         open = _useState[0],
@@ -2252,6 +2355,242 @@
     }));
   };
 
+  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
    */
@@ -5469,6 +5808,7 @@
   exports.Page = Page;
   exports.PageContext = PageContext;
   exports.PageProvider = PageProvider;
+  exports.Planner = Planner;
   exports.Property = Property;
   exports.RadioButton = RadioButton;
   exports.ResetPasswordBox = ResetPasswordBox;
@@ -5485,6 +5825,7 @@
   exports.TablePage = TablePage;
   exports.Tabs = Tabs;
   exports.Text = Text$1;
+  exports.TextArea = TextArea;
   exports.TextField = TextField;
   exports.Thumbnail = Thumbnail;
   exports.TokenField = TokenField;