ywana-core8 0.0.241 → 0.0.245

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.umd.js CHANGED
@@ -1,12 +1,13 @@
1
1
  (function (global, factory) {
2
- 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')) :
3
- 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) :
4
- (global = global || self, factory(global.ywanaCore8 = {}, null, global.react, global.reactSwitch, global.reactNotifications, null, global.deepEqual, global.resumablejs));
5
- })(this, (function (exports, materialDesignIcons_css, React, RSwitch, reactNotifications, notifications_css, equal, ResumableJS) {
2
+ 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')) :
3
+ 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) :
4
+ (global = global || self, factory(global.ywanaCore8 = {}, null, global.react, global.reactSwitch, global.moment, global.momentRange, global.reactNotifications, null, global.deepEqual, global.resumablejs));
5
+ })(this, (function (exports, materialDesignIcons_css, React, RSwitch, moment, momentRange, reactNotifications, notifications_css, equal, ResumableJS) {
6
6
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
7
7
 
8
8
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
9
9
  var RSwitch__default = /*#__PURE__*/_interopDefaultLegacy(RSwitch);
10
+ var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
10
11
  var equal__default = /*#__PURE__*/_interopDefaultLegacy(equal);
11
12
  var ResumableJS__default = /*#__PURE__*/_interopDefaultLegacy(ResumableJS);
12
13
 
@@ -701,16 +702,45 @@
701
702
  */
702
703
 
703
704
  var Property = function Property(props) {
704
- var label = props.label,
705
+ var id = props.id,
706
+ className = props.className,
707
+ label = props.label,
705
708
  name = props.name,
706
- value = props.value;
709
+ initial = props.initial,
710
+ value = props.value,
711
+ _props$editable = props.editable,
712
+ editable = _props$editable === void 0 ? false : _props$editable,
713
+ onChange = props.onChange;
714
+
715
+ function change(event) {
716
+ if (onChange) {
717
+ var _value = event.target.value;
718
+ onChange(id, _value);
719
+ }
720
+ }
721
+
722
+ function clear() {
723
+ if (onChange) onChange(id, "");
724
+ }
725
+
707
726
  return /*#__PURE__*/React__default["default"].createElement("div", {
708
- className: "property"
727
+ className: "property property-" + id + " " + className
709
728
  }, /*#__PURE__*/React__default["default"].createElement("div", {
710
729
  className: "property-name"
711
- }, name || label), /*#__PURE__*/React__default["default"].createElement("div", {
730
+ }, name || label), initial ? /*#__PURE__*/React__default["default"].createElement("div", {
731
+ className: "property-value"
732
+ }, initial) : null, /*#__PURE__*/React__default["default"].createElement("div", {
712
733
  className: "property-value"
713
- }, value));
734
+ }, editable ? /*#__PURE__*/React__default["default"].createElement("input", {
735
+ type: "text",
736
+ value: value,
737
+ onChange: change
738
+ }) : value, editable && value.length > 0 ? /*#__PURE__*/React__default["default"].createElement(Icon, {
739
+ icon: "close",
740
+ size: "small",
741
+ clickable: true,
742
+ action: clear
743
+ }) : null));
714
744
  };
715
745
 
716
746
  /**
@@ -1004,8 +1034,8 @@
1004
1034
  options = _props$options === void 0 ? [] : _props$options,
1005
1035
  value = props.value,
1006
1036
  onChange = props.onChange,
1007
- _props$canFilter = props.canFilter,
1008
- canFilter = _props$canFilter === void 0 ? false : _props$canFilter,
1037
+ _props$predictive = props.predictive,
1038
+ predictive = _props$predictive === void 0 ? false : _props$predictive,
1009
1039
  _props$readOnly3 = props.readOnly,
1010
1040
  readOnly = _props$readOnly3 === void 0 ? false : _props$readOnly3;
1011
1041
 
@@ -1030,7 +1060,7 @@
1030
1060
  }, [value]);
1031
1061
 
1032
1062
  function change(id, value) {
1033
- if (canFilter) {
1063
+ if (predictive) {
1034
1064
  setLabel(value);
1035
1065
  } else {
1036
1066
  if (onChange) onChange(id, value);
@@ -1063,7 +1093,7 @@
1063
1093
  var canShow = open == true && Array.isArray(options);
1064
1094
 
1065
1095
  if (canShow) {
1066
- var filterActive = canFilter === true && label && label.length > 0;
1096
+ var filterActive = predictive === true && label && label.length > 0;
1067
1097
  var items = filterActive ? options.filter(function (option) {
1068
1098
  return option.label.toUpperCase().indexOf(label.toUpperCase()) >= 0;
1069
1099
  }) : options;
@@ -2325,6 +2355,242 @@
2325
2355
  }));
2326
2356
  };
2327
2357
 
2358
+ var ranges = momentRange.extendMoment(moment__default["default"]);
2359
+ var DATE_RANGE = [{
2360
+ label: "Week",
2361
+ value: "week"
2362
+ }, {
2363
+ label: "Month",
2364
+ value: "month"
2365
+ }];
2366
+ /**
2367
+ * Planner
2368
+ */
2369
+
2370
+ var Planner = function Planner(_ref) {
2371
+ var title = _ref.title,
2372
+ _ref$events = _ref.events,
2373
+ events = _ref$events === void 0 ? [] : _ref$events,
2374
+ _ref$lanes = _ref.lanes,
2375
+ lanes = _ref$lanes === void 0 ? [] : _ref$lanes,
2376
+ _ref$navigation = _ref.navigation,
2377
+ navigation = _ref$navigation === void 0 ? true : _ref$navigation;
2378
+
2379
+ var _useState = React.useState("month"),
2380
+ dateRange = _useState[0],
2381
+ setDateRange = _useState[1];
2382
+
2383
+ var _useState2 = React.useState("2021-02-26"),
2384
+ from = _useState2[0],
2385
+ setFrom = _useState2[1];
2386
+
2387
+ var _useState3 = React.useState("2021-04-01"),
2388
+ to = _useState3[0],
2389
+ setTo = _useState3[1];
2390
+
2391
+ React.useEffect(function () {
2392
+ var today = moment__default["default"]();
2393
+ var from_date = today.startOf(dateRange).format("YYYY-MM-DD");
2394
+ var to_date = today.endOf(dateRange).format("YYYY-MM-DD");
2395
+ setFrom(from_date);
2396
+ setTo(to_date);
2397
+ }, [dateRange]);
2398
+
2399
+ function next() {
2400
+ var actual = moment__default["default"](from);
2401
+ var next = actual.add(1, dateRange);
2402
+ var from_date = next.startOf(dateRange).format("YYYY-MM-DD");
2403
+ var to_date = next.endOf(dateRange).format("YYYY-MM-DD");
2404
+ setFrom(from_date);
2405
+ setTo(to_date);
2406
+ }
2407
+
2408
+ function prev() {
2409
+ var actual = moment__default["default"](from);
2410
+ var next = actual.subtract(1, dateRange);
2411
+ var from_date = next.startOf(dateRange).format("YYYY-MM-DD");
2412
+ var to_date = next.endOf(dateRange).format("YYYY-MM-DD");
2413
+ setFrom(from_date);
2414
+ setTo(to_date);
2415
+ }
2416
+
2417
+ var period = React.useMemo(function () {
2418
+ var start = ranges(from, "YYYY-MM-DD");
2419
+ var end = ranges(to, "YYYY-MM-DD");
2420
+ var range = ranges.range(start, end);
2421
+ var period = Array.from(range.by("day")).map(function (m) {
2422
+ return {
2423
+ year: m.year(),
2424
+ month: m.month(),
2425
+ day: m.date(),
2426
+ moment: m
2427
+ };
2428
+ });
2429
+ return period;
2430
+ }, [from, to]);
2431
+ var label = /*#__PURE__*/React__default["default"].createElement(Text$1, {
2432
+ use: "headline6"
2433
+ }, title);
2434
+ return /*#__PURE__*/React__default["default"].createElement("div", {
2435
+ className: "planner-box"
2436
+ }, navigation ? /*#__PURE__*/React__default["default"].createElement(Header, {
2437
+ title: label
2438
+ }, /*#__PURE__*/React__default["default"].createElement(Icon, {
2439
+ icon: "chevron_right",
2440
+ clickable: true,
2441
+ action: next
2442
+ }), /*#__PURE__*/React__default["default"].createElement(TextField, {
2443
+ id: "to",
2444
+ type: "date",
2445
+ label: "To",
2446
+ value: to,
2447
+ onChange: function onChange(id, value) {
2448
+ return setTo(value);
2449
+ }
2450
+ }), /*#__PURE__*/React__default["default"].createElement("div", {
2451
+ className: "expand"
2452
+ }), /*#__PURE__*/React__default["default"].createElement(DropDown, {
2453
+ id: "ranges",
2454
+ label: "Date Range",
2455
+ options: DATE_RANGE,
2456
+ value: dateRange,
2457
+ onChange: function onChange(id, value) {
2458
+ return setDateRange(value);
2459
+ }
2460
+ }), /*#__PURE__*/React__default["default"].createElement("div", {
2461
+ className: "expand"
2462
+ }), /*#__PURE__*/React__default["default"].createElement(TextField, {
2463
+ id: "from",
2464
+ type: "date",
2465
+ label: "From",
2466
+ value: from,
2467
+ onChange: function onChange(id, value) {
2468
+ return setFrom(value);
2469
+ }
2470
+ }), /*#__PURE__*/React__default["default"].createElement(Icon, {
2471
+ icon: "chevron_left",
2472
+ clickable: true,
2473
+ action: prev
2474
+ })) : null, /*#__PURE__*/React__default["default"].createElement("main", {
2475
+ className: "planner"
2476
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
2477
+ className: "column0"
2478
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
2479
+ className: "column-header"
2480
+ }), lanes.map(function (lane) {
2481
+ return /*#__PURE__*/React__default["default"].createElement("div", {
2482
+ className: "row-header"
2483
+ }, lane.label);
2484
+ })), /*#__PURE__*/React__default["default"].createElement("div", {
2485
+ className: "rows"
2486
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
2487
+ className: "row row0"
2488
+ }, period.map(function (date, index) {
2489
+ var first = index === 0 || date.day === 1 ? "first" : "";
2490
+ return /*#__PURE__*/React__default["default"].createElement("div", {
2491
+ className: "column-header"
2492
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
2493
+ className: "month-header " + first
2494
+ }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
2495
+ use: "overline"
2496
+ }, date.moment.format("MMM"))));
2497
+ })), /*#__PURE__*/React__default["default"].createElement("div", {
2498
+ className: "row row1"
2499
+ }, period.map(function (date) {
2500
+ var isWekend = [0, 6].includes(date.moment.day());
2501
+ var weekend = isWekend ? "weekend" : "";
2502
+ return /*#__PURE__*/React__default["default"].createElement("div", {
2503
+ className: "column-header"
2504
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
2505
+ className: "date-header " + weekend
2506
+ }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
2507
+ use: "headline6"
2508
+ }, date.moment.format("DD")), "\xA0", /*#__PURE__*/React__default["default"].createElement(Text$1, {
2509
+ use: "caption"
2510
+ }, date.moment.format("ddd"))));
2511
+ })), lanes.map(function (lane) {
2512
+ return /*#__PURE__*/React__default["default"].createElement(PlannerRow, {
2513
+ lane: lane,
2514
+ events: events,
2515
+ period: period
2516
+ });
2517
+ }))));
2518
+ };
2519
+ /**
2520
+ * Planner Row
2521
+ */
2522
+
2523
+ var PlannerRow = function PlannerRow(props) {
2524
+ var lane = props.lane,
2525
+ _props$events = props.events,
2526
+ events = _props$events === void 0 ? [] : _props$events,
2527
+ period = props.period;
2528
+ var rowEvents = events.filter(function (event) {
2529
+ return event.lane === lane.id;
2530
+ });
2531
+ return /*#__PURE__*/React__default["default"].createElement("div", {
2532
+ className: "row"
2533
+ }, period.map(function (date) {
2534
+ var slotDate = new Date(date.year, date.month, date.day);
2535
+ slotDate.setHours(0, 0, 0);
2536
+ var cellEvents = rowEvents.filter(function (event) {
2537
+ var eventDate = new Date(event.date);
2538
+ eventDate.setHours(0, 0, 0);
2539
+ return eventDate.getTime() === slotDate.getTime();
2540
+ });
2541
+ return /*#__PURE__*/React__default["default"].createElement(PlannerCell, {
2542
+ date: date,
2543
+ events: cellEvents
2544
+ });
2545
+ }));
2546
+ };
2547
+ /**
2548
+ * Planner Cell
2549
+ */
2550
+
2551
+
2552
+ var PlannerCell = function PlannerCell(_ref3) {
2553
+ var lane = _ref3.lane,
2554
+ date = _ref3.date,
2555
+ onDrop = _ref3.onDrop;
2556
+
2557
+ var _useState4 = React.useState(false),
2558
+ dragOver = _useState4[0],
2559
+ setDragOver = _useState4[1];
2560
+
2561
+ function onDragOver(event) {
2562
+ if (!dragOver) setDragOver(true);
2563
+ event.stopPropagation();
2564
+ event.preventDefault();
2565
+ }
2566
+
2567
+ function onDragLeave(event) {
2568
+ setDragOver(false);
2569
+ event.stopPropagation();
2570
+ event.preventDefault();
2571
+ }
2572
+
2573
+ function drop(event) {
2574
+ event.stopPropagation();
2575
+ event.preventDefault();
2576
+ var id = event.dataTransfer.getData("text");
2577
+ if (onDrop) onDrop({
2578
+ id: id,
2579
+ lane: lane.id,
2580
+ date: date.moment.format("YYYY-MM-DD")
2581
+ });
2582
+ }
2583
+
2584
+ var isWekend = [0, 6].includes(date.moment.day());
2585
+ var weekend = isWekend ? "weekend" : "";
2586
+ return /*#__PURE__*/React__default["default"].createElement("div", {
2587
+ className: "cell " + weekend,
2588
+ onDragOver: onDragOver,
2589
+ onDragLeave: onDragLeave,
2590
+ onDrop: drop
2591
+ }, "c");
2592
+ };
2593
+
2328
2594
  /**
2329
2595
  * Page Context
2330
2596
  */
@@ -5542,6 +5808,7 @@
5542
5808
  exports.Page = Page;
5543
5809
  exports.PageContext = PageContext;
5544
5810
  exports.PageProvider = PageProvider;
5811
+ exports.Planner = Planner;
5545
5812
  exports.Property = Property;
5546
5813
  exports.RadioButton = RadioButton;
5547
5814
  exports.ResetPasswordBox = ResetPasswordBox;