@gpa-gemstone/react-forms 1.1.35 → 1.1.36
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/lib/DatePicker.d.ts +4 -2
- package/lib/DatePicker.js +45 -28
- package/lib/DateTimeUI/Calender.d.ts +8 -0
- package/lib/DateTimeUI/Calender.js +173 -0
- package/lib/DateTimeUI/Clock.d.ts +8 -0
- package/lib/DateTimeUI/Clock.js +86 -0
- package/lib/DateTimeUI/DateTimePopup.d.ts +14 -0
- package/lib/DateTimeUI/DateTimePopup.js +59 -0
- package/package.json +14 -18
package/lib/DatePicker.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
|
|
2
|
+
interface IProps<T> {
|
|
3
3
|
Record: T;
|
|
4
4
|
Field: keyof T;
|
|
5
5
|
Setter: (record: T) => void;
|
|
@@ -9,4 +9,6 @@ export default function DatePicker<T>(props: {
|
|
|
9
9
|
Feedback?: string;
|
|
10
10
|
Format?: string;
|
|
11
11
|
Type?: ('datetime-local' | 'date');
|
|
12
|
-
}
|
|
12
|
+
}
|
|
13
|
+
export default function DateTimePicker<T>(props: IProps<T>): JSX.Element;
|
|
14
|
+
export {};
|
package/lib/DatePicker.js
CHANGED
|
@@ -35,39 +35,56 @@ var __assign = (this && this.__assign) || function () {
|
|
|
35
35
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
36
|
var React = require("react");
|
|
37
37
|
var moment = require("moment");
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
// Adds a buffer between the outside props and what the box is reading to prevent box overwriting every render with a keystroke
|
|
42
|
-
var _b = React.useState(ParseRecord()), boxRecord = _b[0], setBoxRecord = _b[1];
|
|
38
|
+
var DateTimePopup_1 = require("./DateTimeUI/DateTimePopup");
|
|
39
|
+
var helper_functions_1 = require("@gpa-gemstone/helper-functions");
|
|
40
|
+
function DateTimePicker(props) {
|
|
43
41
|
// Formats that will be used for dateBoxes
|
|
44
42
|
var boxFormat = "YYYY-MM-DD" + (props.Type === undefined || props.Type === 'date' ? "" : "[T]hh:mm:ss");
|
|
45
43
|
var recordFormat = props.Format !== undefined ? props.Format : "YYYY-MM-DD" + (props.Type === undefined || props.Type === 'date' ? "" : "[T]hh:mm:ss.SSS[Z]");
|
|
46
|
-
function
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
;
|
|
44
|
+
var parse = function (r) { return moment(props.Record[props.Field], recordFormat); };
|
|
45
|
+
var divRef = React.useRef(null);
|
|
46
|
+
// Adds a buffer between the outside props and what the box is reading to prevent box overwriting every render with a keystroke
|
|
47
|
+
var _a = React.useState(parse(props.Record).format(boxFormat)), boxRecord = _a[0], setBoxRecord = _a[1];
|
|
48
|
+
var _b = React.useState(parse(props.Record)), pickerRecord = _b[0], setPickerRecord = _b[1];
|
|
49
|
+
var _c = React.useState(false), showOverlay = _c[0], setShowOverlay = _c[1];
|
|
50
|
+
var _d = React.useState(0), top = _d[0], setTop = _d[1];
|
|
51
|
+
var _e = React.useState(0), left = _e[0], setLeft = _e[1];
|
|
51
52
|
React.useEffect(function () {
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
setInternal(false);
|
|
53
|
+
setPickerRecord(parse(props.Record));
|
|
54
|
+
setBoxRecord(parse(props.Record).format(boxFormat));
|
|
55
55
|
}, [props.Record]);
|
|
56
|
-
|
|
56
|
+
React.useEffect(function () {
|
|
57
|
+
var _a;
|
|
58
|
+
var valid = moment(boxRecord, boxFormat).isValid();
|
|
59
|
+
if (valid && parse(props.Record).format(boxFormat) !== boxRecord)
|
|
60
|
+
props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = moment(boxRecord, boxFormat).format(recordFormat), _a)));
|
|
61
|
+
}, [boxRecord]);
|
|
62
|
+
React.useEffect(function () {
|
|
63
|
+
var _a;
|
|
64
|
+
if (pickerRecord.format(recordFormat) !== parse(props.Record).format(recordFormat))
|
|
65
|
+
props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = pickerRecord.format(recordFormat), _a)));
|
|
66
|
+
}, [pickerRecord]);
|
|
67
|
+
React.useLayoutEffect(function () {
|
|
68
|
+
var node = (divRef.current !== null ? (0, helper_functions_1.GetNodeSize)(divRef.current) : { top: top, left: left, height: 0, width: 0 });
|
|
69
|
+
setLeft(node.left + 0.5 * node.width);
|
|
70
|
+
setTop(node.top + node.height + 10);
|
|
71
|
+
});
|
|
72
|
+
React.useEffect(function () {
|
|
73
|
+
window.addEventListener('click', onWindowClick);
|
|
74
|
+
return function () { window.removeEventListener('click', onWindowClick); };
|
|
75
|
+
}, []);
|
|
76
|
+
function onWindowClick(evt) {
|
|
77
|
+
if (evt.target.closest(".gpa-gemstone-datetime") == null)
|
|
78
|
+
setShowOverlay(false);
|
|
79
|
+
}
|
|
80
|
+
return (React.createElement("div", { className: "form-group", ref: divRef },
|
|
57
81
|
(props.Label !== "") ?
|
|
58
82
|
React.createElement("label", null, props.Label == null ? props.Field : props.Label) : null,
|
|
59
|
-
React.createElement("input", { className: "form-control" + (props.Valid(props.Field) ? '' : ' is-invalid'), type: props.Type === undefined ? 'date' : props.Type, onChange: function (evt) {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
record[props.Field] = null;
|
|
66
|
-
// These two updates should be batched together
|
|
67
|
-
props.Setter(record);
|
|
68
|
-
setBoxRecord(__assign(__assign({}, boxRecord), (_a = {}, _a[props.Field] = evt.target.value, _a)));
|
|
69
|
-
setInternal(true);
|
|
70
|
-
}, value: boxRecord[props.Field], disabled: props.Disabled === undefined ? false : props.Disabled }),
|
|
71
|
-
React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field.toString() + ' is a required field.' : props.Feedback)));
|
|
83
|
+
React.createElement("input", { className: "gpa-gemstone-datetime form-control" + (props.Valid(props.Field) ? '' : ' is-invalid'), type: props.Type === undefined ? 'date' : props.Type, onChange: function (evt) {
|
|
84
|
+
setBoxRecord(evt.target.value);
|
|
85
|
+
}, onFocus: function () { setShowOverlay(true); }, value: boxRecord, disabled: props.Disabled === undefined ? false : props.Disabled, onClick: function (e) { e.preventDefault(); } }),
|
|
86
|
+
React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field.toString() + ' is a required field.' : props.Feedback),
|
|
87
|
+
React.createElement(DateTimePopup_1.default, { Setter: function (d) { setPickerRecord(d); if (props.Type === 'date')
|
|
88
|
+
setShowOverlay(false); }, Show: showOverlay, DateTime: pickerRecord, Valid: props.Valid(props.Field), Top: top, Center: left, Type: props.Type === undefined || props.Type === 'date' ? 'date' : 'datetime' })));
|
|
72
89
|
}
|
|
73
|
-
exports.default =
|
|
90
|
+
exports.default = DateTimePicker;
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
// ******************************************************************************************************
|
|
3
|
+
// Calender.tsx - Gbtc
|
|
4
|
+
//
|
|
5
|
+
// Copyright © 2020, Grid Protection Alliance. All Rights Reserved.
|
|
6
|
+
//
|
|
7
|
+
// Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
|
|
8
|
+
// the NOTICE file distributed with this work for additional information regarding copyright ownership.
|
|
9
|
+
// The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
|
|
10
|
+
// file except in compliance with the License. You may obtain a copy of the License at:
|
|
11
|
+
//
|
|
12
|
+
// http://opensource.org/licenses/MIT
|
|
13
|
+
//
|
|
14
|
+
// Unless agreed to in writing, the subject software distributed under the License is distributed on an
|
|
15
|
+
// "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
|
|
16
|
+
// License for the specific language governing permissions and limitations.
|
|
17
|
+
//
|
|
18
|
+
// Code Modification History:
|
|
19
|
+
// ----------------------------------------------------------------------------------------------------
|
|
20
|
+
// 05/15/2023 - C. Lackner
|
|
21
|
+
// Generated original version of source code.
|
|
22
|
+
//
|
|
23
|
+
// ******************************************************************************************************
|
|
24
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
25
|
+
var React = require("react");
|
|
26
|
+
var moment = require("moment");
|
|
27
|
+
function Calender(props) {
|
|
28
|
+
var _a = React.useState([]), weeks = _a[0], setWeeks = _a[1];
|
|
29
|
+
var _b = React.useState(props.DateTime.month()), month = _b[0], setMonth = _b[1];
|
|
30
|
+
var _c = React.useState(props.DateTime.year()), year = _c[0], setYear = _c[1];
|
|
31
|
+
var _d = React.useState('month'), mode = _d[0], setMode = _d[1];
|
|
32
|
+
var _e = React.useState('None'), hover = _e[0], setHover = _e[1];
|
|
33
|
+
React.useEffect(function () {
|
|
34
|
+
setMonth(props.DateTime.month());
|
|
35
|
+
setYear(props.DateTime.year());
|
|
36
|
+
}, [props.DateTime]);
|
|
37
|
+
React.useEffect(function () {
|
|
38
|
+
var d1 = moment([year, month, 1]).startOf('week');
|
|
39
|
+
var w = [];
|
|
40
|
+
while (d1.month() <= month) {
|
|
41
|
+
w.push({
|
|
42
|
+
sunday: moment(d1),
|
|
43
|
+
monday: moment(d1).add(1, 'day'),
|
|
44
|
+
tuesday: moment(d1).add(2, 'day'),
|
|
45
|
+
wednesday: moment(d1).add(3, 'day'),
|
|
46
|
+
thursday: moment(d1).add(4, 'day'),
|
|
47
|
+
friday: moment(d1).add(5, 'day'),
|
|
48
|
+
saturday: moment(d1).add(6, 'day')
|
|
49
|
+
});
|
|
50
|
+
d1.add(1, 'week');
|
|
51
|
+
d1 = moment(d1).startOf('week');
|
|
52
|
+
}
|
|
53
|
+
setWeeks(w);
|
|
54
|
+
}, [month, year]);
|
|
55
|
+
function toNext() {
|
|
56
|
+
if (mode === 'month' && month === 11) {
|
|
57
|
+
setMonth(0);
|
|
58
|
+
setYear(function (y) { return y + 1; });
|
|
59
|
+
}
|
|
60
|
+
else if (mode === 'month') {
|
|
61
|
+
setMonth(function (m) { return m + 1; });
|
|
62
|
+
}
|
|
63
|
+
else if (mode === 'year') {
|
|
64
|
+
setYear(function (y) { return y + 1; });
|
|
65
|
+
}
|
|
66
|
+
else {
|
|
67
|
+
setYear(function (y) { return y + 12; });
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
function toPrev() {
|
|
71
|
+
if (mode === 'month' && month === 0) {
|
|
72
|
+
setMonth(11);
|
|
73
|
+
setYear(function (y) { return y - 1; });
|
|
74
|
+
}
|
|
75
|
+
else if (mode === 'month') {
|
|
76
|
+
setMonth(function (m) { return m - 1; });
|
|
77
|
+
}
|
|
78
|
+
else if (mode === 'year') {
|
|
79
|
+
setYear(function (y) { return y - 1; });
|
|
80
|
+
}
|
|
81
|
+
else {
|
|
82
|
+
setYear(function (y) { return y - 12; });
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
function setDate(d) {
|
|
86
|
+
var ud = moment(props.DateTime);
|
|
87
|
+
ud.year(d.year()).month(d.month()).date(d.date());
|
|
88
|
+
props.Setter(ud);
|
|
89
|
+
}
|
|
90
|
+
var headerWidth = (mode === 'month' ? 5 : 2);
|
|
91
|
+
return (React.createElement("div", { style: { background: '#f0f0f0', opacity: 1 } },
|
|
92
|
+
React.createElement("table", { style: { textAlign: 'center' } },
|
|
93
|
+
React.createElement("thead", { style: { verticalAlign: 'middle', fontWeight: 'bold' } },
|
|
94
|
+
React.createElement("tr", { style: { height: 20, lineHeight: '20px' } },
|
|
95
|
+
React.createElement("th", { style: { width: 20, padding: 5, cursor: 'pointer' }, onMouseEnter: function () { return setHover('Previous'); }, onMouseLeave: function () { return setHover('None'); }, onClick: toPrev }, '<'),
|
|
96
|
+
React.createElement("th", { style: { width: 145, padding: 5, cursor: 'pointer' }, colSpan: headerWidth, onClick: function (evt) {
|
|
97
|
+
evt.stopPropagation();
|
|
98
|
+
if (mode === 'month')
|
|
99
|
+
setMode('year');
|
|
100
|
+
}, onMouseEnter: function () { return setHover('Center'); }, onMouseLeave: function () { return setHover('None'); } },
|
|
101
|
+
mode === 'month' ? moment([year, month, 1]).format('MMMM YYYY') : '',
|
|
102
|
+
mode === 'year' ? year : '',
|
|
103
|
+
mode === 'dozenYear' ? year - 6 + "-" + (year + 5) : ''),
|
|
104
|
+
React.createElement("th", { style: { width: 20, padding: 5, cursor: 'pointer' }, onClick: toNext, onMouseEnter: function () { return setHover('Next'); }, onMouseLeave: function () { return setHover('None'); } }, '>')),
|
|
105
|
+
mode === 'month' ? React.createElement("tr", { style: { height: 20, lineHeight: '20px' } },
|
|
106
|
+
React.createElement("td", { style: { width: 20, padding: 5 } }, "SU"),
|
|
107
|
+
React.createElement("td", { style: { width: 20, padding: 5 } }, "MO"),
|
|
108
|
+
React.createElement("td", { style: { width: 20, padding: 5 } }, "TU"),
|
|
109
|
+
React.createElement("td", { style: { width: 20, padding: 5 } }, "WE"),
|
|
110
|
+
React.createElement("td", { style: { width: 20, padding: 5 } }, "TH"),
|
|
111
|
+
React.createElement("td", { style: { width: 20, padding: 5 } }, "FR"),
|
|
112
|
+
React.createElement("td", { style: { width: 20, padding: 5 } }, "SA")) : null),
|
|
113
|
+
React.createElement("tbody", null,
|
|
114
|
+
mode === 'month' ? weeks.map(function (w) { return React.createElement("tr", { key: w.sunday.isoWeekYear(), style: { height: 20, lineHeight: '20px' } },
|
|
115
|
+
React.createElement(DayCell, { date: w.sunday, month: month, day: props.DateTime.date(), onClick: function (evt) { evt.stopPropagation(); setDate(w.sunday); } }),
|
|
116
|
+
React.createElement(DayCell, { date: w.monday, month: month, day: props.DateTime.date(), onClick: function (evt) { evt.stopPropagation(); setDate(w.monday); } }),
|
|
117
|
+
React.createElement(DayCell, { date: w.tuesday, month: month, day: props.DateTime.date(), onClick: function (evt) { evt.stopPropagation(); setDate(w.tuesday); } }),
|
|
118
|
+
React.createElement(DayCell, { date: w.wednesday, month: month, day: props.DateTime.date(), onClick: function (evt) { evt.stopPropagation(); setDate(w.wednesday); } }),
|
|
119
|
+
React.createElement(DayCell, { date: w.thursday, month: month, day: props.DateTime.date(), onClick: function (evt) { evt.stopPropagation(); setDate(w.thursday); } }),
|
|
120
|
+
React.createElement(DayCell, { date: w.friday, month: month, day: props.DateTime.date(), onClick: function (evt) { evt.stopPropagation(); setDate(w.friday); } }),
|
|
121
|
+
React.createElement(DayCell, { date: w.saturday, month: month, day: props.DateTime.date(), onClick: function (evt) { evt.stopPropagation(); setDate(w.saturday); } })); }) : null,
|
|
122
|
+
mode === 'year' ? React.createElement(React.Fragment, null,
|
|
123
|
+
React.createElement("tr", { style: { height: 54, lineHeight: '54px' } },
|
|
124
|
+
React.createElement(MonthCell, { date: moment([year, 0, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(0); } }),
|
|
125
|
+
React.createElement(MonthCell, { date: moment([year, 1, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(1); } }),
|
|
126
|
+
React.createElement(MonthCell, { date: moment([year, 2, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(2); } }),
|
|
127
|
+
React.createElement(MonthCell, { date: moment([year, 3, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(3); } })),
|
|
128
|
+
React.createElement("tr", { style: { height: 54, lineHeight: '54px' } },
|
|
129
|
+
React.createElement(MonthCell, { date: moment([year, 4, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(4); } }),
|
|
130
|
+
React.createElement(MonthCell, { date: moment([year, 5, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(5); } }),
|
|
131
|
+
React.createElement(MonthCell, { date: moment([year, 6, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(6); } }),
|
|
132
|
+
React.createElement(MonthCell, { date: moment([year, 7, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(7); } })),
|
|
133
|
+
React.createElement("tr", { style: { height: 54, lineHeight: '54px' } },
|
|
134
|
+
React.createElement(MonthCell, { date: moment([year, 8, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(8); } }),
|
|
135
|
+
React.createElement(MonthCell, { date: moment([year, 9, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(9); } }),
|
|
136
|
+
React.createElement(MonthCell, { date: moment([year, 10, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(10); } }),
|
|
137
|
+
React.createElement(MonthCell, { date: moment([year, 11, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(11); } }))) : null))));
|
|
138
|
+
}
|
|
139
|
+
exports.default = Calender;
|
|
140
|
+
var DayCell = function (props) {
|
|
141
|
+
var _a = React.useState(false), active = _a[0], setActive = _a[1];
|
|
142
|
+
var _b = React.useState(false), hover = _b[0], setHover = _b[1];
|
|
143
|
+
var _c = React.useState(false), disabled = _c[0], setDisabled = _c[1];
|
|
144
|
+
React.useEffect(function () {
|
|
145
|
+
setActive(props.date.date() === props.day);
|
|
146
|
+
setDisabled(props.date.month() !== props.month);
|
|
147
|
+
}, [props.month, props.date, props.day]);
|
|
148
|
+
var color = (disabled ? '#777' : (active ? '#fff' : undefined));
|
|
149
|
+
var bg = (active ? '#337ab7' : hover ? '#d3d3d3' : undefined);
|
|
150
|
+
return React.createElement("td", { style: {
|
|
151
|
+
width: 20,
|
|
152
|
+
padding: 5,
|
|
153
|
+
color: color,
|
|
154
|
+
backgroundColor: bg,
|
|
155
|
+
cursor: (!active ? 'pointer' : 'default')
|
|
156
|
+
}, onClick: props.onClick, onMouseEnter: function () { return setHover(true); }, onMouseLeave: function () { return setHover(false); } }, props.date.format("DD"));
|
|
157
|
+
};
|
|
158
|
+
var MonthCell = function (props) {
|
|
159
|
+
var _a = React.useState(false), active = _a[0], setActive = _a[1];
|
|
160
|
+
var _b = React.useState(false), hover = _b[0], setHover = _b[1];
|
|
161
|
+
React.useEffect(function () {
|
|
162
|
+
setActive(props.date.month() === props.month);
|
|
163
|
+
}, [props.month, props.date]);
|
|
164
|
+
var color = (active ? '#fff' : undefined);
|
|
165
|
+
var bg = (active ? '#337ab7' : hover ? '#d3d3d3' : undefined);
|
|
166
|
+
return React.createElement("td", { style: {
|
|
167
|
+
width: 54,
|
|
168
|
+
padding: 5,
|
|
169
|
+
color: color,
|
|
170
|
+
backgroundColor: bg,
|
|
171
|
+
cursor: (!active ? 'pointer' : 'default')
|
|
172
|
+
}, onMouseEnter: function () { return setHover(true); }, onMouseLeave: function () { return setHover(false); }, onClick: props.onClick }, props.date.format("MMM"));
|
|
173
|
+
};
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
// ******************************************************************************************************
|
|
3
|
+
// Clock.tsx - Gbtc
|
|
4
|
+
//
|
|
5
|
+
// Copyright © 2020, Grid Protection Alliance. All Rights Reserved.
|
|
6
|
+
//
|
|
7
|
+
// Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
|
|
8
|
+
// the NOTICE file distributed with this work for additional information regarding copyright ownership.
|
|
9
|
+
// The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
|
|
10
|
+
// file except in compliance with the License. You may obtain a copy of the License at:
|
|
11
|
+
//
|
|
12
|
+
// http://opensource.org/licenses/MIT
|
|
13
|
+
//
|
|
14
|
+
// Unless agreed to in writing, the subject software distributed under the License is distributed on an
|
|
15
|
+
// "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
|
|
16
|
+
// License for the specific language governing permissions and limitations.
|
|
17
|
+
//
|
|
18
|
+
// Code Modification History:
|
|
19
|
+
// ----------------------------------------------------------------------------------------------------
|
|
20
|
+
// 05/15/2023 - C. Lackner
|
|
21
|
+
// Generated original version of source code.
|
|
22
|
+
//
|
|
23
|
+
// ******************************************************************************************************
|
|
24
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
25
|
+
var React = require("react");
|
|
26
|
+
var moment = require("moment");
|
|
27
|
+
function Clock(props) {
|
|
28
|
+
var _a = React.useState(props.DateTime.format("HH")), hour = _a[0], setHour = _a[1];
|
|
29
|
+
var _b = React.useState(props.DateTime.format("mm")), minute = _b[0], setMinute = _b[1];
|
|
30
|
+
var _c = React.useState(props.DateTime.format("ss")), second = _c[0], setSecond = _c[1];
|
|
31
|
+
var _d = React.useState('none'), hover = _d[0], setHover = _d[1];
|
|
32
|
+
React.useEffect(function () {
|
|
33
|
+
setHour(props.DateTime.format("HH"));
|
|
34
|
+
setMinute(props.DateTime.format("mm"));
|
|
35
|
+
setSecond(props.DateTime.format("ss"));
|
|
36
|
+
}, [props.DateTime]);
|
|
37
|
+
React.useEffect(function () {
|
|
38
|
+
var h = parseInt(hour, 10);
|
|
39
|
+
var m = parseInt(minute, 10);
|
|
40
|
+
var s = parseInt(second, 10);
|
|
41
|
+
if (h !== props.DateTime.hour() || m !== props.DateTime.minute() || s !== props.DateTime.second()) {
|
|
42
|
+
var d = moment(props.DateTime);
|
|
43
|
+
d.hour(h).minute(m).second(s);
|
|
44
|
+
props.Setter(d);
|
|
45
|
+
}
|
|
46
|
+
}, [hour, minute, second]);
|
|
47
|
+
function increase(type) {
|
|
48
|
+
var d = moment(props.DateTime).add(1, type);
|
|
49
|
+
setHour(d.format("HH"));
|
|
50
|
+
}
|
|
51
|
+
function decrease(type) {
|
|
52
|
+
var d = moment(props.DateTime).subtract(1, type);
|
|
53
|
+
setHour(d.format("HH"));
|
|
54
|
+
}
|
|
55
|
+
return (React.createElement("div", { style: { background: '#f0f0f0', marginTop: 10, opacity: 1 } },
|
|
56
|
+
React.createElement("table", { style: { textAlign: 'center' } },
|
|
57
|
+
React.createElement("tbody", null,
|
|
58
|
+
React.createElement("tr", { style: { height: 20, lineHeight: '20px' } },
|
|
59
|
+
React.createElement("td", { style: { width: 50, padding: 5, cursor: 'pointer', background: (hover === 'increase_h' ? '#d3d3d3' : undefined) }, onClick: function () { return increase('h'); }, onMouseEnter: function () { return setHover('increase_h'); }, onMouseLeave: function () { return setHover('none'); } }, " ^ "),
|
|
60
|
+
React.createElement("td", { style: { width: 20, padding: 5 } }),
|
|
61
|
+
React.createElement("td", { style: { width: 50, padding: 5, cursor: 'pointer', background: (hover === 'increase_m' ? '#d3d3d3' : undefined) }, onClick: function () { return increase('m'); }, onMouseEnter: function () { return setHover('increase_m'); }, onMouseLeave: function () { return setHover('none'); } }, " ^ "),
|
|
62
|
+
React.createElement("td", { style: { width: 20, padding: 5, } }),
|
|
63
|
+
React.createElement("td", { style: { width: 50, padding: 5, cursor: 'pointer', background: (hover === 'increase_s' ? '#d3d3d3' : undefined) }, onClick: function () { return increase('s'); }, onMouseEnter: function () { return setHover('increase_s'); }, onMouseLeave: function () { return setHover('none'); } }, " ^ ")),
|
|
64
|
+
React.createElement("tr", { style: { height: 20, lineHeight: '20px' } },
|
|
65
|
+
React.createElement("td", { style: { width: 50, padding: 5, } },
|
|
66
|
+
" ",
|
|
67
|
+
hour,
|
|
68
|
+
" "),
|
|
69
|
+
React.createElement("td", { style: { width: 20, padding: 5, } }, " : "),
|
|
70
|
+
React.createElement("td", { style: { width: 50, padding: 5, } },
|
|
71
|
+
" ",
|
|
72
|
+
minute,
|
|
73
|
+
" "),
|
|
74
|
+
React.createElement("td", { style: { width: 20, padding: 5, } }, " : "),
|
|
75
|
+
React.createElement("td", { style: { width: 50, padding: 5, } },
|
|
76
|
+
" ",
|
|
77
|
+
second,
|
|
78
|
+
" ")),
|
|
79
|
+
React.createElement("tr", { style: { height: 20, lineHeight: '20px' } },
|
|
80
|
+
React.createElement("td", { style: { width: 50, padding: 5, cursor: 'pointer', background: (hover === 'decrease_h' ? '#d3d3d3' : undefined) }, onClick: function () { return decrease('h'); }, onMouseEnter: function () { return setHover('decrease_h'); }, onMouseLeave: function () { return setHover('none'); } }, " v "),
|
|
81
|
+
React.createElement("td", { style: { width: 20, padding: 5, } }),
|
|
82
|
+
React.createElement("td", { style: { width: 50, padding: 5, cursor: 'pointer', background: (hover === 'decrease_m' ? '#d3d3d3' : undefined) }, onClick: function () { return decrease('m'); }, onMouseEnter: function () { return setHover('decrease_m'); }, onMouseLeave: function () { return setHover('none'); } }, " v "),
|
|
83
|
+
React.createElement("td", { style: { width: 20, padding: 5, } }),
|
|
84
|
+
React.createElement("td", { style: { width: 50, padding: 5, cursor: 'pointer', background: (hover === 'decrease_s' ? '#d3d3d3' : undefined) }, onClick: function () { return decrease('s'); }, onMouseEnter: function () { return setHover('decrease_s'); }, onMouseLeave: function () { return setHover('none'); } }, " v "))))));
|
|
85
|
+
}
|
|
86
|
+
exports.default = Clock;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import * as moment from 'moment';
|
|
3
|
+
interface IProps {
|
|
4
|
+
DateTime: moment.Moment;
|
|
5
|
+
Setter: (record: moment.Moment) => void;
|
|
6
|
+
Valid: boolean;
|
|
7
|
+
Feedback?: string;
|
|
8
|
+
Type: ('datetime' | 'date' | 'time');
|
|
9
|
+
Show: boolean;
|
|
10
|
+
Top: number;
|
|
11
|
+
Center: number;
|
|
12
|
+
}
|
|
13
|
+
export default function DateTimePopup(props: IProps): JSX.Element | null;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
// ******************************************************************************************************
|
|
3
|
+
// DateTimePopup.tsx - Gbtc
|
|
4
|
+
//
|
|
5
|
+
// Copyright © 2023, Grid Protection Alliance. All Rights Reserved.
|
|
6
|
+
//
|
|
7
|
+
// Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
|
|
8
|
+
// the NOTICE file distributed with this work for additional information regarding copyright ownership.
|
|
9
|
+
// The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
|
|
10
|
+
// file except in compliance with the License. You may obtain a copy of the License at:
|
|
11
|
+
//
|
|
12
|
+
// http://opensource.org/licenses/MIT
|
|
13
|
+
//
|
|
14
|
+
// Unless agreed to in writing, the subject software distributed under the License is distributed on an
|
|
15
|
+
// "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
|
|
16
|
+
// License for the specific language governing permissions and limitations.
|
|
17
|
+
//
|
|
18
|
+
// Code Modification History:
|
|
19
|
+
// ----------------------------------------------------------------------------------------------------
|
|
20
|
+
// 05/15/2023 - C. Lackner
|
|
21
|
+
// Generated original version of source code.
|
|
22
|
+
//
|
|
23
|
+
// ******************************************************************************************************
|
|
24
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
25
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
26
|
+
return cooked;
|
|
27
|
+
};
|
|
28
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
+
var React = require("react");
|
|
30
|
+
var react_portal_1 = require("react-portal");
|
|
31
|
+
var styled_components_1 = require("styled-components");
|
|
32
|
+
var Calender_1 = require("./Calender");
|
|
33
|
+
var Clock_1 = require("./Clock");
|
|
34
|
+
var WrapperDiv = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n & {\n border-radius: 3px;\n display: inline-block;\n font-size: 13px;\n padding: 8px 21px;\n position: fixed;\n transition: opacity 0.3s ease-out;\n z-index: 9999;\n opacity: 0.9;\n background: #222;\n top: ", ";\n left: ", ";\n border: 1px solid transparent;\n }\n &::before {\n border-left: 8px solid transparent;\n border-right: 8px solid transparent;\n border-bottom: 8px solid #222;\n left: ", ";\n top: -6px;\n margin-left: -8px;\n content: \"\";\n width: 0px;\n height: 0px;\n position: absolute\n }"], ["\n & {\n border-radius: 3px;\n display: inline-block;\n font-size: 13px;\n padding: 8px 21px;\n position: fixed;\n transition: opacity 0.3s ease-out;\n z-index: 9999;\n opacity: 0.9;\n background: #222;\n top: ", ";\n left: ", ";\n border: 1px solid transparent;\n }\n &::before {\n border-left: 8px solid transparent;\n border-right: 8px solid transparent;\n border-bottom: 8px solid #222;\n left: ", ";\n top: -6px;\n margin-left: -8px;\n content: \"\";\n width: 0px;\n height: 0px;\n position: absolute\n }"])), function (props) { return props.Top + "px"; }, function (props) { return props.Left + "px"; }, function (props) { return props.Indicator + "%"; });
|
|
35
|
+
function DateTimePopup(props) {
|
|
36
|
+
var divRef = React.useRef(null);
|
|
37
|
+
var _a = React.useState(props.Type !== 'date'), showTime = _a[0], setShowTime = _a[1];
|
|
38
|
+
var _b = React.useState(props.Type !== 'time'), showDate = _b[0], setShowDate = _b[1];
|
|
39
|
+
var _c = React.useState(0), width = _c[0], setWidth = _c[1];
|
|
40
|
+
var _d = React.useState(0), height = _d[0], setHeight = _d[1];
|
|
41
|
+
React.useLayoutEffect(function () {
|
|
42
|
+
var _a, _b, _c, _d;
|
|
43
|
+
setWidth((_b = (_a = divRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : width);
|
|
44
|
+
setHeight((_d = (_c = divRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) !== null && _d !== void 0 ? _d : height);
|
|
45
|
+
});
|
|
46
|
+
React.useEffect(function () {
|
|
47
|
+
setShowTime(props.Type !== 'date');
|
|
48
|
+
setShowDate(props.Type !== 'time');
|
|
49
|
+
}, [props.Type]);
|
|
50
|
+
if (!props.Show)
|
|
51
|
+
return null;
|
|
52
|
+
var l = Math.max(props.Center - 0.5 * width, 0);
|
|
53
|
+
return (React.createElement(react_portal_1.Portal, null,
|
|
54
|
+
React.createElement(WrapperDiv, { Top: props.Top, Left: l, Indicator: 50, ref: divRef, className: 'gpa-gemstone-datetime' },
|
|
55
|
+
showDate ? React.createElement(Calender_1.default, { DateTime: props.DateTime, Setter: props.Setter }) : null,
|
|
56
|
+
showTime ? React.createElement(Clock_1.default, { DateTime: props.DateTime, Setter: props.Setter }) : null)));
|
|
57
|
+
}
|
|
58
|
+
exports.default = DateTimePopup;
|
|
59
|
+
var templateObject_1;
|
package/package.json
CHANGED
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gpa-gemstone/react-forms",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.36",
|
|
4
4
|
"description": "React Form modules for gpa webapps",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"types": "lib/index.d.ts",
|
|
7
|
-
"files": [
|
|
8
|
-
|
|
9
|
-
],
|
|
10
|
-
"scripts": {
|
|
7
|
+
"files": ["lib/**/*"],
|
|
8
|
+
"scripts": {
|
|
11
9
|
"test": "jest --config jestconfig.json",
|
|
12
10
|
"build": "tsc",
|
|
13
11
|
"format": "prettier --write \"src/**/*.tsx\"",
|
|
@@ -18,11 +16,11 @@
|
|
|
18
16
|
"version": "npm run format && git add -A src",
|
|
19
17
|
"postversion": "git push && git push --tags"
|
|
20
18
|
},
|
|
21
|
-
"repository":
|
|
19
|
+
"repository": {
|
|
22
20
|
"type": "git",
|
|
23
21
|
"url": "https://github.com/GridProtectionAlliance/gpa-gemstone.git"
|
|
24
22
|
},
|
|
25
|
-
"keywords":
|
|
23
|
+
"keywords": [
|
|
26
24
|
"React",
|
|
27
25
|
"Table",
|
|
28
26
|
"GSF",
|
|
@@ -31,12 +29,11 @@
|
|
|
31
29
|
],
|
|
32
30
|
"author": "GridProtectionAlliance",
|
|
33
31
|
"license": "MIT",
|
|
34
|
-
"bugs": {
|
|
35
|
-
"url": "https://github.com/GridProtectionAlliance/gpa-gemstone/issues"
|
|
36
|
-
},
|
|
32
|
+
"bugs": {"url": "https://github.com/GridProtectionAlliance/gpa-gemstone/issues"},
|
|
37
33
|
"homepage": "https://github.com/GridProtectionAlliance/gpa-gemstone#readme",
|
|
38
|
-
"devDependencies":
|
|
34
|
+
"devDependencies": {
|
|
39
35
|
"@types/jest": "^27.0.0",
|
|
36
|
+
"@types/react-portal": "4.0.4",
|
|
40
37
|
"jest": "^27.0.6",
|
|
41
38
|
"prettier": "^2.3.2",
|
|
42
39
|
"ts-jest": "^27.0.4",
|
|
@@ -44,15 +41,14 @@
|
|
|
44
41
|
"tslint-config-prettier": "^1.18.0",
|
|
45
42
|
"typescript": "4.4.4"
|
|
46
43
|
},
|
|
47
|
-
"dependencies":
|
|
48
|
-
"@gpa-gemstone/helper-functions": "0.0.
|
|
44
|
+
"dependencies": {
|
|
45
|
+
"@gpa-gemstone/helper-functions": "0.0.19",
|
|
49
46
|
"@types/react": "^17.0.14",
|
|
50
47
|
"@types/styled-components": "^5.1.11",
|
|
51
48
|
"react": "^18.2.0",
|
|
52
49
|
"styled-components": "5.3.3",
|
|
53
|
-
"moment": "2.29.4"
|
|
50
|
+
"moment": "2.29.4",
|
|
51
|
+
"react-portal": "4.2.2"
|
|
54
52
|
},
|
|
55
|
-
"publishConfig": {
|
|
56
|
-
|
|
57
|
-
}
|
|
58
|
-
}
|
|
53
|
+
"publishConfig": {"access": "public"}
|
|
54
|
+
}
|