ywana-core8 0.0.239 → 0.0.243

package/dist/index.modern.js

@@ -1,6 +1,8 @@
 import 'material-design-icons-iconfont/dist/material-design-icons.css';
-import React, { useContext, useState, useEffect, Fragment, useRef, Children, useMemo } from 'react';
+import React, { useContext, useState, useEffect, Fragment, useRef, useMemo, Children } from 'react';
 import RSwitch from 'react-switch';
+import moment from 'moment';
+import { extendMoment } from 'moment-range';
 import { NotificationContainer, NotificationManager } from 'react-notifications';
 import 'react-notifications/lib/notifications.css';
 import equal from 'deep-equal';
@@ -697,16 +699,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.createElement("div", {
-    className: "property"
+    className: "property property-" + id + " " + className
   }, /*#__PURE__*/React.createElement("div", {
     className: "property-name"
-  }, name || label), /*#__PURE__*/React.createElement("div", {
+  }, name || label), initial ? /*#__PURE__*/React.createElement("div", {
+    className: "property-value"
+  }, initial) : null, /*#__PURE__*/React.createElement("div", {
     className: "property-value"
-  }, value));
+  }, editable ? /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    value: value,
+    onChange: change
+  }) : value, editable && value.length > 0 ? /*#__PURE__*/React.createElement(Icon, {
+    icon: "close",
+    size: "small",
+    clickable: true,
+    action: clear
+  }) : null));
 };
 
 /**
@@ -878,7 +909,7 @@ var TextField = function TextField(props) {
   }
 
   function focus() {
-    if (site) {
+    if (site && site.changeFocus) {
       site.changeFocus({
         lose: function lose() {// DO NOTHING
         }
@@ -916,6 +947,79 @@ var TextField = function TextField(props) {
     className: "bar"
   }), label ? /*#__PURE__*/React.createElement("label", null, labelTxt) : null);
 };
+/**
+ * Text Area
+ */
+
+var TextArea = function TextArea(props) {
+  var site = 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.createElement(Text$1, null, label);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "" + style,
+    onClick: onClick
+  }, /*#__PURE__*/React.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.createElement(Icon, {
+    icon: "close",
+    clickable: true,
+    size: "small",
+    action: clear
+  }) : null, /*#__PURE__*/React.createElement("span", {
+    className: "bar"
+  }), label ? /*#__PURE__*/React.createElement("label", null, labelTxt) : null);
+};
 /**
  * Dropdown
  */
@@ -929,8 +1033,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 = useState(false),
       open = _useState[0],
@@ -2248,6 +2352,242 @@ var WaitScreen = function WaitScreen() {
   }));
 };
 
+var ranges = extendMoment(moment);
+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 = useState("month"),
+      dateRange = _useState[0],
+      setDateRange = _useState[1];
+
+  var _useState2 = useState("2021-02-26"),
+      from = _useState2[0],
+      setFrom = _useState2[1];
+
+  var _useState3 = useState("2021-04-01"),
+      to = _useState3[0],
+      setTo = _useState3[1];
+
+  useEffect(function () {
+    var today = moment();
+    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(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(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 = 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.createElement(Text$1, {
+    use: "headline6"
+  }, title);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "planner-box"
+  }, navigation ? /*#__PURE__*/React.createElement(Header, {
+    title: label
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: "chevron_right",
+    clickable: true,
+    action: next
+  }), /*#__PURE__*/React.createElement(TextField, {
+    id: "to",
+    type: "date",
+    label: "To",
+    value: to,
+    onChange: function onChange(id, value) {
+      return setTo(value);
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "expand"
+  }), /*#__PURE__*/React.createElement(DropDown, {
+    id: "ranges",
+    label: "Date Range",
+    options: DATE_RANGE,
+    value: dateRange,
+    onChange: function onChange(id, value) {
+      return setDateRange(value);
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "expand"
+  }), /*#__PURE__*/React.createElement(TextField, {
+    id: "from",
+    type: "date",
+    label: "From",
+    value: from,
+    onChange: function onChange(id, value) {
+      return setFrom(value);
+    }
+  }), /*#__PURE__*/React.createElement(Icon, {
+    icon: "chevron_left",
+    clickable: true,
+    action: prev
+  })) : null, /*#__PURE__*/React.createElement("main", {
+    className: "planner"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "column0"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "column-header"
+  }), lanes.map(function (lane) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "row-header"
+    }, lane.label);
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "rows"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "row row0"
+  }, period.map(function (date, index) {
+    var first = index === 0 || date.day === 1 ? "first" : "";
+    return /*#__PURE__*/React.createElement("div", {
+      className: "column-header"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "month-header " + first
+    }, /*#__PURE__*/React.createElement(Text$1, {
+      use: "overline"
+    }, date.moment.format("MMM"))));
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "row row1"
+  }, period.map(function (date) {
+    var isWekend = [0, 6].includes(date.moment.day());
+    var weekend = isWekend ? "weekend" : "";
+    return /*#__PURE__*/React.createElement("div", {
+      className: "column-header"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "date-header " + weekend
+    }, /*#__PURE__*/React.createElement(Text$1, {
+      use: "headline6"
+    }, date.moment.format("DD")), "\xA0", /*#__PURE__*/React.createElement(Text$1, {
+      use: "caption"
+    }, date.moment.format("ddd"))));
+  })), lanes.map(function (lane) {
+    return /*#__PURE__*/React.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.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.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 = 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.createElement("div", {
+    className: "cell " + weekend,
+    onDragOver: onDragOver,
+    onDragLeave: onDragLeave,
+    onDrop: drop
+  }, "c");
+};
+
 /**
  * Page Context
  */
@@ -5428,5 +5768,5 @@ var isFunction = function isFunction(value) {
   return value && (Object.prototype.toString.call(value) === "[object Function]" || "function" === typeof value || value instanceof Function);
 };
 
-export { Avatar, Button$1 as Button, CheckBox, Chip, Chips, CircularProgress, CollectionContext, CollectionEditor$1 as CollectionEditor, CollectionPage, Content, ContentEditor, ContentForm, CreateContentDialog$1 as CreateContentDialog, DataTable, Dialog, DropDown, EditContentDialog, FORMATS, FieldEditor, Form, HTTPClient, Header, Icon, Kanban, KanbanCard, KanbanColumn, LinearProgress, List, ListEditor, LoginBox, Menu, MenuIcon, MenuItem, MenuSeparator, Page, PageContext, PageProvider, Property, RadioButton, ResetPasswordBox, Section, Session, Site, SiteContext, SiteProvider, Stack, Switch, TYPES, Tab, TabbedContentEditor, TablePage, Tabs, Text$1 as Text, TextField, Thumbnail, TokenField, Tooltip, Tree, TreeItem, TreeNode, TreededContentEditor, UploadArea, UploadButton, UploadDialog, UploadFile, Uploader, Viewer, WaitScreen, isFunction };
+export { Avatar, Button$1 as Button, CheckBox, Chip, Chips, CircularProgress, CollectionContext, CollectionEditor$1 as CollectionEditor, CollectionPage, Content, ContentEditor, ContentForm, CreateContentDialog$1 as CreateContentDialog, DataTable, Dialog, DropDown, EditContentDialog, FORMATS, FieldEditor, Form, HTTPClient, Header, Icon, Kanban, KanbanCard, KanbanColumn, LinearProgress, List, ListEditor, LoginBox, Menu, MenuIcon, MenuItem, MenuSeparator, Page, PageContext, PageProvider, Planner, Property, RadioButton, ResetPasswordBox, Section, Session, Site, SiteContext, SiteProvider, Stack, Switch, TYPES, Tab, TabbedContentEditor, TablePage, Tabs, Text$1 as Text, TextArea, TextField, Thumbnail, TokenField, Tooltip, Tree, TreeItem, TreeNode, TreededContentEditor, UploadArea, UploadButton, UploadDialog, UploadFile, Uploader, Viewer, WaitScreen, isFunction };
 //# sourceMappingURL=index.modern.js.map