ywana-core8 0.0.239 → 0.0.243

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("");
+  }
+
   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));
 };
 
 /**
@@ -885,7 +917,7 @@ var TextField = function TextField(props) {
   }
 
   function focus() {
-    if (site) {
+    if (site && site.changeFocus) {
       site.changeFocus({
         lose: function lose() {// DO NOTHING
         }
@@ -923,6 +955,79 @@ var TextField = function TextField(props) {
     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
  */
@@ -936,8 +1041,8 @@ var DropDown = function DropDown(props) {
       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],
@@ -2255,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
  */
@@ -5472,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;
@@ -5488,6 +5830,7 @@ exports.TabbedContentEditor = TabbedContentEditor;
 exports.TablePage = TablePage;
 exports.Tabs = Tabs;
 exports.Text = Text$1;
+exports.TextArea = TextArea;
 exports.TextField = TextField;
 exports.Thumbnail = Thumbnail;
 exports.TokenField = TokenField;