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.cjs +278 -9
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +207 -3
- package/dist/index.css.map +1 -1
- package/dist/index.modern.js +278 -11
- package/dist/index.modern.js.map +1 -1
- package/dist/index.umd.js +280 -13
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/html/property.css +21 -3
- package/src/html/property.js +19 -3
- package/src/html/property.test.js +23 -0
- package/src/html/textfield.js +3 -3
- package/src/html/textfield.test.js +12 -4
- package/src/site/page.css +1 -0
- package/src/site/site.css +1 -0
- package/src/widgets/index.js +2 -1
- package/src/widgets/login/LoginBox.test.js +11 -0
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
|
705
|
+
var id = props.id,
|
706
|
+
className = props.className,
|
707
|
+
label = props.label,
|
705
708
|
name = props.name,
|
706
|
-
|
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
|
-
},
|
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$
|
1008
|
-
|
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 (
|
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 =
|
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;
|