ywana-core8 0.0.241 → 0.0.245

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(id, "");
+  }
+
   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));
 };
 
 /**
@@ -1000,8 +1031,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;
 
@@ -1026,7 +1057,7 @@ var DropDown = function DropDown(props) {
   }, [value]);
 
   function change(id, value) {
-    if (canFilter) {
+    if (predictive) {
       setLabel(value);
     } else {
       if (onChange) onChange(id, value);
@@ -1059,7 +1090,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;
@@ -2321,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
  */
@@ -5501,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, TextArea, 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