@gpa-gemstone/react-forms 1.1.34 → 1.1.36

package/lib/DatePicker.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export default function DatePicker<T>(props: {
+interface IProps<T> {
     Record: T;
     Field: keyof T;
     Setter: (record: T) => void;
@@ -9,4 +9,6 @@ export default function DatePicker<T>(props: {
     Feedback?: string;
     Format?: string;
     Type?: ('datetime-local' | 'date');
-}): JSX.Element;
+}
+export default function DateTimePicker<T>(props: IProps<T>): JSX.Element;
+export {};

package/lib/DatePicker.js

@@ -35,39 +35,56 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
 var moment = require("moment");
-function DatePicker(props) {
-    // Tracks weather or not props.Record changes are due to internal input boxes or externally
-    var _a = React.useState(false), internal = _a[0], setInternal = _a[1];
-    // Adds a buffer between the outside props and what the box is reading to prevent box overwriting every render with a keystroke
-    var _b = React.useState(ParseRecord()), boxRecord = _b[0], setBoxRecord = _b[1];
+var DateTimePopup_1 = require("./DateTimeUI/DateTimePopup");
+var helper_functions_1 = require("@gpa-gemstone/helper-functions");
+function DateTimePicker(props) {
     // Formats that will be used for dateBoxes
     var boxFormat = "YYYY-MM-DD" + (props.Type === undefined || props.Type === 'date' ? "" : "[T]hh:mm:ss");
     var recordFormat = props.Format !== undefined ? props.Format : "YYYY-MM-DD" + (props.Type === undefined || props.Type === 'date' ? "" : "[T]hh:mm:ss.SSS[Z]");
-    function ParseRecord() {
-        var _a;
-        return __assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = [props.Field] === null ? '' : moment(props.Record[props.Field], recordFormat).format(boxFormat), _a));
-    }
-    ;
+    var parse = function (r) { return moment(props.Record[props.Field], recordFormat); };
+    var divRef = React.useRef(null);
+    // Adds a buffer between the outside props and what the box is reading to prevent box overwriting every render with a keystroke
+    var _a = React.useState(parse(props.Record).format(boxFormat)), boxRecord = _a[0], setBoxRecord = _a[1];
+    var _b = React.useState(parse(props.Record)), pickerRecord = _b[0], setPickerRecord = _b[1];
+    var _c = React.useState(false), showOverlay = _c[0], setShowOverlay = _c[1];
+    var _d = React.useState(0), top = _d[0], setTop = _d[1];
+    var _e = React.useState(0), left = _e[0], setLeft = _e[1];
     React.useEffect(function () {
-        if (!internal)
-            setBoxRecord(ParseRecord());
-        setInternal(false);
+        setPickerRecord(parse(props.Record));
+        setBoxRecord(parse(props.Record).format(boxFormat));
     }, [props.Record]);
-    return (React.createElement("div", { className: "form-group" },
+    React.useEffect(function () {
+        var _a;
+        var valid = moment(boxRecord, boxFormat).isValid();
+        if (valid && parse(props.Record).format(boxFormat) !== boxRecord)
+            props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = moment(boxRecord, boxFormat).format(recordFormat), _a)));
+    }, [boxRecord]);
+    React.useEffect(function () {
+        var _a;
+        if (pickerRecord.format(recordFormat) !== parse(props.Record).format(recordFormat))
+            props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = pickerRecord.format(recordFormat), _a)));
+    }, [pickerRecord]);
+    React.useLayoutEffect(function () {
+        var node = (divRef.current !== null ? (0, helper_functions_1.GetNodeSize)(divRef.current) : { top: top, left: left, height: 0, width: 0 });
+        setLeft(node.left + 0.5 * node.width);
+        setTop(node.top + node.height + 10);
+    });
+    React.useEffect(function () {
+        window.addEventListener('click', onWindowClick);
+        return function () { window.removeEventListener('click', onWindowClick); };
+    }, []);
+    function onWindowClick(evt) {
+        if (evt.target.closest(".gpa-gemstone-datetime") == null)
+            setShowOverlay(false);
+    }
+    return (React.createElement("div", { className: "form-group", ref: divRef },
         (props.Label !== "") ?
             React.createElement("label", null, props.Label == null ? props.Field : props.Label) : null,
-        React.createElement("input", { className: "form-control" + (props.Valid(props.Field) ? '' : ' is-invalid'), type: props.Type === undefined ? 'date' : props.Type, onChange: function (evt) {
-                var _a;
-                var record = __assign({}, props.Record);
-                if (evt.target.value !== '')
-                    record[props.Field] = moment(evt.target.value, boxFormat).format(recordFormat);
-                else
-                    record[props.Field] = null;
-                // These two updates should be batched together
-                props.Setter(record);
-                setBoxRecord(__assign(__assign({}, boxRecord), (_a = {}, _a[props.Field] = evt.target.value, _a)));
-                setInternal(true);
-            }, value: boxRecord[props.Field], disabled: props.Disabled === undefined ? false : props.Disabled }),
-        React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field.toString() + ' is a required field.' : props.Feedback)));
+        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) {
+                setBoxRecord(evt.target.value);
+            }, onFocus: function () { setShowOverlay(true); }, value: boxRecord, disabled: props.Disabled === undefined ? false : props.Disabled, onClick: function (e) { e.preventDefault(); } }),
+        React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field.toString() + ' is a required field.' : props.Feedback),
+        React.createElement(DateTimePopup_1.default, { Setter: function (d) { setPickerRecord(d); if (props.Type === 'date')
+                setShowOverlay(false); }, Show: showOverlay, DateTime: pickerRecord, Valid: props.Valid(props.Field), Top: top, Center: left, Type: props.Type === undefined || props.Type === 'date' ? 'date' : 'datetime' })));
 }
-exports.default = DatePicker;
+exports.default = DateTimePicker;

package/lib/DateTimeUI/Calender.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import * as moment from 'moment';
+interface IProps {
+    DateTime: moment.Moment;
+    Setter: (record: moment.Moment) => void;
+}
+export default function Calender(props: IProps): JSX.Element;
+export {};

package/lib/DateTimeUI/Calender.js

@@ -0,0 +1,173 @@
+"use strict";
+// ******************************************************************************************************
+//  Calender.tsx - Gbtc
+//
+//  Copyright © 2020, Grid Protection Alliance.  All Rights Reserved.
+//
+//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
+//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+//  file except in compliance with the License. You may obtain a copy of the License at:
+//
+//      http://opensource.org/licenses/MIT
+//
+//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
+//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+//  License for the specific language governing permissions and limitations.
+//
+//  Code Modification History:
+//  ----------------------------------------------------------------------------------------------------
+//  05/15/2023 - C. Lackner
+//       Generated original version of source code.
+//
+// ******************************************************************************************************
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var moment = require("moment");
+function Calender(props) {
+    var _a = React.useState([]), weeks = _a[0], setWeeks = _a[1];
+    var _b = React.useState(props.DateTime.month()), month = _b[0], setMonth = _b[1];
+    var _c = React.useState(props.DateTime.year()), year = _c[0], setYear = _c[1];
+    var _d = React.useState('month'), mode = _d[0], setMode = _d[1];
+    var _e = React.useState('None'), hover = _e[0], setHover = _e[1];
+    React.useEffect(function () {
+        setMonth(props.DateTime.month());
+        setYear(props.DateTime.year());
+    }, [props.DateTime]);
+    React.useEffect(function () {
+        var d1 = moment([year, month, 1]).startOf('week');
+        var w = [];
+        while (d1.month() <= month) {
+            w.push({
+                sunday: moment(d1),
+                monday: moment(d1).add(1, 'day'),
+                tuesday: moment(d1).add(2, 'day'),
+                wednesday: moment(d1).add(3, 'day'),
+                thursday: moment(d1).add(4, 'day'),
+                friday: moment(d1).add(5, 'day'),
+                saturday: moment(d1).add(6, 'day')
+            });
+            d1.add(1, 'week');
+            d1 = moment(d1).startOf('week');
+        }
+        setWeeks(w);
+    }, [month, year]);
+    function toNext() {
+        if (mode === 'month' && month === 11) {
+            setMonth(0);
+            setYear(function (y) { return y + 1; });
+        }
+        else if (mode === 'month') {
+            setMonth(function (m) { return m + 1; });
+        }
+        else if (mode === 'year') {
+            setYear(function (y) { return y + 1; });
+        }
+        else {
+            setYear(function (y) { return y + 12; });
+        }
+    }
+    function toPrev() {
+        if (mode === 'month' && month === 0) {
+            setMonth(11);
+            setYear(function (y) { return y - 1; });
+        }
+        else if (mode === 'month') {
+            setMonth(function (m) { return m - 1; });
+        }
+        else if (mode === 'year') {
+            setYear(function (y) { return y - 1; });
+        }
+        else {
+            setYear(function (y) { return y - 12; });
+        }
+    }
+    function setDate(d) {
+        var ud = moment(props.DateTime);
+        ud.year(d.year()).month(d.month()).date(d.date());
+        props.Setter(ud);
+    }
+    var headerWidth = (mode === 'month' ? 5 : 2);
+    return (React.createElement("div", { style: { background: '#f0f0f0', opacity: 1 } },
+        React.createElement("table", { style: { textAlign: 'center' } },
+            React.createElement("thead", { style: { verticalAlign: 'middle', fontWeight: 'bold' } },
+                React.createElement("tr", { style: { height: 20, lineHeight: '20px' } },
+                    React.createElement("th", { style: { width: 20, padding: 5, cursor: 'pointer' }, onMouseEnter: function () { return setHover('Previous'); }, onMouseLeave: function () { return setHover('None'); }, onClick: toPrev }, '<'),
+                    React.createElement("th", { style: { width: 145, padding: 5, cursor: 'pointer' }, colSpan: headerWidth, onClick: function (evt) {
+                            evt.stopPropagation();
+                            if (mode === 'month')
+                                setMode('year');
+                        }, onMouseEnter: function () { return setHover('Center'); }, onMouseLeave: function () { return setHover('None'); } },
+                        mode === 'month' ? moment([year, month, 1]).format('MMMM YYYY') : '',
+                        mode === 'year' ? year : '',
+                        mode === 'dozenYear' ? year - 6 + "-" + (year + 5) : ''),
+                    React.createElement("th", { style: { width: 20, padding: 5, cursor: 'pointer' }, onClick: toNext, onMouseEnter: function () { return setHover('Next'); }, onMouseLeave: function () { return setHover('None'); } }, '>')),
+                mode === 'month' ? React.createElement("tr", { style: { height: 20, lineHeight: '20px' } },
+                    React.createElement("td", { style: { width: 20, padding: 5 } }, "SU"),
+                    React.createElement("td", { style: { width: 20, padding: 5 } }, "MO"),
+                    React.createElement("td", { style: { width: 20, padding: 5 } }, "TU"),
+                    React.createElement("td", { style: { width: 20, padding: 5 } }, "WE"),
+                    React.createElement("td", { style: { width: 20, padding: 5 } }, "TH"),
+                    React.createElement("td", { style: { width: 20, padding: 5 } }, "FR"),
+                    React.createElement("td", { style: { width: 20, padding: 5 } }, "SA")) : null),
+            React.createElement("tbody", null,
+                mode === 'month' ? weeks.map(function (w) { return React.createElement("tr", { key: w.sunday.isoWeekYear(), style: { height: 20, lineHeight: '20px' } },
+                    React.createElement(DayCell, { date: w.sunday, month: month, day: props.DateTime.date(), onClick: function (evt) { evt.stopPropagation(); setDate(w.sunday); } }),
+                    React.createElement(DayCell, { date: w.monday, month: month, day: props.DateTime.date(), onClick: function (evt) { evt.stopPropagation(); setDate(w.monday); } }),
+                    React.createElement(DayCell, { date: w.tuesday, month: month, day: props.DateTime.date(), onClick: function (evt) { evt.stopPropagation(); setDate(w.tuesday); } }),
+                    React.createElement(DayCell, { date: w.wednesday, month: month, day: props.DateTime.date(), onClick: function (evt) { evt.stopPropagation(); setDate(w.wednesday); } }),
+                    React.createElement(DayCell, { date: w.thursday, month: month, day: props.DateTime.date(), onClick: function (evt) { evt.stopPropagation(); setDate(w.thursday); } }),
+                    React.createElement(DayCell, { date: w.friday, month: month, day: props.DateTime.date(), onClick: function (evt) { evt.stopPropagation(); setDate(w.friday); } }),
+                    React.createElement(DayCell, { date: w.saturday, month: month, day: props.DateTime.date(), onClick: function (evt) { evt.stopPropagation(); setDate(w.saturday); } })); }) : null,
+                mode === 'year' ? React.createElement(React.Fragment, null,
+                    React.createElement("tr", { style: { height: 54, lineHeight: '54px' } },
+                        React.createElement(MonthCell, { date: moment([year, 0, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(0); } }),
+                        React.createElement(MonthCell, { date: moment([year, 1, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(1); } }),
+                        React.createElement(MonthCell, { date: moment([year, 2, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(2); } }),
+                        React.createElement(MonthCell, { date: moment([year, 3, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(3); } })),
+                    React.createElement("tr", { style: { height: 54, lineHeight: '54px' } },
+                        React.createElement(MonthCell, { date: moment([year, 4, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(4); } }),
+                        React.createElement(MonthCell, { date: moment([year, 5, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(5); } }),
+                        React.createElement(MonthCell, { date: moment([year, 6, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(6); } }),
+                        React.createElement(MonthCell, { date: moment([year, 7, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(7); } })),
+                    React.createElement("tr", { style: { height: 54, lineHeight: '54px' } },
+                        React.createElement(MonthCell, { date: moment([year, 8, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(8); } }),
+                        React.createElement(MonthCell, { date: moment([year, 9, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(9); } }),
+                        React.createElement(MonthCell, { date: moment([year, 10, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(10); } }),
+                        React.createElement(MonthCell, { date: moment([year, 11, 1]), month: month, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(11); } }))) : null))));
+}
+exports.default = Calender;
+var DayCell = function (props) {
+    var _a = React.useState(false), active = _a[0], setActive = _a[1];
+    var _b = React.useState(false), hover = _b[0], setHover = _b[1];
+    var _c = React.useState(false), disabled = _c[0], setDisabled = _c[1];
+    React.useEffect(function () {
+        setActive(props.date.date() === props.day);
+        setDisabled(props.date.month() !== props.month);
+    }, [props.month, props.date, props.day]);
+    var color = (disabled ? '#777' : (active ? '#fff' : undefined));
+    var bg = (active ? '#337ab7' : hover ? '#d3d3d3' : undefined);
+    return React.createElement("td", { style: {
+            width: 20,
+            padding: 5,
+            color: color,
+            backgroundColor: bg,
+            cursor: (!active ? 'pointer' : 'default')
+        }, onClick: props.onClick, onMouseEnter: function () { return setHover(true); }, onMouseLeave: function () { return setHover(false); } }, props.date.format("DD"));
+};
+var MonthCell = function (props) {
+    var _a = React.useState(false), active = _a[0], setActive = _a[1];
+    var _b = React.useState(false), hover = _b[0], setHover = _b[1];
+    React.useEffect(function () {
+        setActive(props.date.month() === props.month);
+    }, [props.month, props.date]);
+    var color = (active ? '#fff' : undefined);
+    var bg = (active ? '#337ab7' : hover ? '#d3d3d3' : undefined);
+    return React.createElement("td", { style: {
+            width: 54,
+            padding: 5,
+            color: color,
+            backgroundColor: bg,
+            cursor: (!active ? 'pointer' : 'default')
+        }, onMouseEnter: function () { return setHover(true); }, onMouseLeave: function () { return setHover(false); }, onClick: props.onClick }, props.date.format("MMM"));
+};

package/lib/DateTimeUI/Clock.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import * as moment from 'moment';
+interface IProps {
+    DateTime: moment.Moment;
+    Setter: (record: moment.Moment) => void;
+}
+export default function Clock(props: IProps): JSX.Element;
+export {};

package/lib/DateTimeUI/Clock.js

@@ -0,0 +1,86 @@
+"use strict";
+// ******************************************************************************************************
+//  Clock.tsx - Gbtc
+//
+//  Copyright © 2020, Grid Protection Alliance.  All Rights Reserved.
+//
+//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
+//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+//  file except in compliance with the License. You may obtain a copy of the License at:
+//
+//      http://opensource.org/licenses/MIT
+//
+//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
+//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+//  License for the specific language governing permissions and limitations.
+//
+//  Code Modification History:
+//  ----------------------------------------------------------------------------------------------------
+//  05/15/2023 - C. Lackner
+//       Generated original version of source code.
+//
+// ******************************************************************************************************
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var moment = require("moment");
+function Clock(props) {
+    var _a = React.useState(props.DateTime.format("HH")), hour = _a[0], setHour = _a[1];
+    var _b = React.useState(props.DateTime.format("mm")), minute = _b[0], setMinute = _b[1];
+    var _c = React.useState(props.DateTime.format("ss")), second = _c[0], setSecond = _c[1];
+    var _d = React.useState('none'), hover = _d[0], setHover = _d[1];
+    React.useEffect(function () {
+        setHour(props.DateTime.format("HH"));
+        setMinute(props.DateTime.format("mm"));
+        setSecond(props.DateTime.format("ss"));
+    }, [props.DateTime]);
+    React.useEffect(function () {
+        var h = parseInt(hour, 10);
+        var m = parseInt(minute, 10);
+        var s = parseInt(second, 10);
+        if (h !== props.DateTime.hour() || m !== props.DateTime.minute() || s !== props.DateTime.second()) {
+            var d = moment(props.DateTime);
+            d.hour(h).minute(m).second(s);
+            props.Setter(d);
+        }
+    }, [hour, minute, second]);
+    function increase(type) {
+        var d = moment(props.DateTime).add(1, type);
+        setHour(d.format("HH"));
+    }
+    function decrease(type) {
+        var d = moment(props.DateTime).subtract(1, type);
+        setHour(d.format("HH"));
+    }
+    return (React.createElement("div", { style: { background: '#f0f0f0', marginTop: 10, opacity: 1 } },
+        React.createElement("table", { style: { textAlign: 'center' } },
+            React.createElement("tbody", null,
+                React.createElement("tr", { style: { height: 20, lineHeight: '20px' } },
+                    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'); } }, " ^ "),
+                    React.createElement("td", { style: { width: 20, padding: 5 } }),
+                    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'); } }, " ^ "),
+                    React.createElement("td", { style: { width: 20, padding: 5, } }),
+                    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'); } }, " ^ ")),
+                React.createElement("tr", { style: { height: 20, lineHeight: '20px' } },
+                    React.createElement("td", { style: { width: 50, padding: 5, } },
+                        " ",
+                        hour,
+                        " "),
+                    React.createElement("td", { style: { width: 20, padding: 5, } }, " : "),
+                    React.createElement("td", { style: { width: 50, padding: 5, } },
+                        " ",
+                        minute,
+                        " "),
+                    React.createElement("td", { style: { width: 20, padding: 5, } }, " : "),
+                    React.createElement("td", { style: { width: 50, padding: 5, } },
+                        " ",
+                        second,
+                        " ")),
+                React.createElement("tr", { style: { height: 20, lineHeight: '20px' } },
+                    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 "),
+                    React.createElement("td", { style: { width: 20, padding: 5, } }),
+                    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 "),
+                    React.createElement("td", { style: { width: 20, padding: 5, } }),
+                    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 "))))));
+}
+exports.default = Clock;

package/lib/DateTimeUI/DateTimePopup.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import * as moment from 'moment';
+interface IProps {
+    DateTime: moment.Moment;
+    Setter: (record: moment.Moment) => void;
+    Valid: boolean;
+    Feedback?: string;
+    Type: ('datetime' | 'date' | 'time');
+    Show: boolean;
+    Top: number;
+    Center: number;
+}
+export default function DateTimePopup(props: IProps): JSX.Element | null;
+export {};

package/lib/DateTimeUI/DateTimePopup.js

@@ -0,0 +1,59 @@
+"use strict";
+// ******************************************************************************************************
+//  DateTimePopup.tsx - Gbtc
+//
+//  Copyright © 2023, Grid Protection Alliance.  All Rights Reserved.
+//
+//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
+//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+//  file except in compliance with the License. You may obtain a copy of the License at:
+//
+//      http://opensource.org/licenses/MIT
+//
+//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
+//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+//  License for the specific language governing permissions and limitations.
+//
+//  Code Modification History:
+//  ----------------------------------------------------------------------------------------------------
+//  05/15/2023 - C. Lackner
+//       Generated original version of source code.
+//
+// ******************************************************************************************************
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var react_portal_1 = require("react-portal");
+var styled_components_1 = require("styled-components");
+var Calender_1 = require("./Calender");
+var Clock_1 = require("./Clock");
+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 + "%"; });
+function DateTimePopup(props) {
+    var divRef = React.useRef(null);
+    var _a = React.useState(props.Type !== 'date'), showTime = _a[0], setShowTime = _a[1];
+    var _b = React.useState(props.Type !== 'time'), showDate = _b[0], setShowDate = _b[1];
+    var _c = React.useState(0), width = _c[0], setWidth = _c[1];
+    var _d = React.useState(0), height = _d[0], setHeight = _d[1];
+    React.useLayoutEffect(function () {
+        var _a, _b, _c, _d;
+        setWidth((_b = (_a = divRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : width);
+        setHeight((_d = (_c = divRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) !== null && _d !== void 0 ? _d : height);
+    });
+    React.useEffect(function () {
+        setShowTime(props.Type !== 'date');
+        setShowDate(props.Type !== 'time');
+    }, [props.Type]);
+    if (!props.Show)
+        return null;
+    var l = Math.max(props.Center - 0.5 * width, 0);
+    return (React.createElement(react_portal_1.Portal, null,
+        React.createElement(WrapperDiv, { Top: props.Top, Left: l, Indicator: 50, ref: divRef, className: 'gpa-gemstone-datetime' },
+            showDate ? React.createElement(Calender_1.default, { DateTime: props.DateTime, Setter: props.Setter }) : null,
+            showTime ? React.createElement(Clock_1.default, { DateTime: props.DateTime, Setter: props.Setter }) : null)));
+}
+exports.default = DateTimePopup;
+var templateObject_1;

package/lib/Input.d.ts

@@ -10,6 +10,8 @@ interface IProps<T> {
     Type?: 'number' | 'text' | 'password' | 'email' | 'color' | 'integer';
     Help?: string | JSX.Element;
     Style?: React.CSSProperties;
+    AllowNull?: boolean;
+    Size?: 'small' | 'large';
 }
 export default function Input<T>(props: IProps<T>): JSX.Element;
 export {};

package/lib/Input.js

@@ -55,14 +55,15 @@ function Input(props) {
     function valueChange(value) {
         var _a, _b, _c;
         setInternal(true);
+        var allowNull = props.AllowNull === undefined ? false : props.AllowNull;
         if (props.Type === 'number') {
-            if ((0, helper_functions_1.IsNumber)(value)) {
+            if ((0, helper_functions_1.IsNumber)(value) || (value === '' && allowNull)) {
                 props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = value !== '' ? parseFloat(value) : null, _a)));
                 setHeldVal(value);
             }
         }
         else if (props.Type === 'integer') {
-            if ((0, helper_functions_1.IsInteger)(value)) {
+            if ((0, helper_functions_1.IsInteger)(value) || (value === '' && allowNull)) {
                 props.Setter(__assign(__assign({}, props.Record), (_b = {}, _b[props.Field] = value !== '' ? parseFloat(value) : null, _b)));
                 setHeldVal(value);
             }
@@ -72,12 +73,15 @@ function Input(props) {
             setHeldVal(value);
         }
     }
-    return (React.createElement("div", { className: "form-group", style: props.Style },
-        (props.Label !== "") ?
+    var showLabel = props.Label !== "";
+    var showHelpIcon = props.Help !== undefined;
+    var label = props.Label === undefined ? props.Field : props.Label;
+    return (React.createElement("div", { className: "form-control " + (props.Size === 'large' ? 'form-control-lg' : '') + (props.Size === 'small' ? 'form-control-sm' : ''), style: props.Style },
+        showHelpIcon || showLabel ?
             React.createElement("label", null,
-                props.Label === undefined ? props.Field : props.Label,
-                props.Help !== undefined ? React.createElement("div", { style: { width: 20, height: 20, borderRadius: '50%', display: 'inline-block', background: '#0D6EFD', marginLeft: 10, textAlign: 'center', fontWeight: 'bold' }, onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } }, " ? ") : null) : null,
-        props.Help !== undefined ?
+                showLabel ? label : '',
+                showHelpIcon ? React.createElement("div", { style: { width: 20, height: 20, borderRadius: '50%', display: 'inline-block', background: '#0D6EFD', marginLeft: 10, textAlign: 'center', fontWeight: 'bold' }, onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } }, " ? ") : null) : null,
+        showHelpIcon ?
             React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
             : null,
         React.createElement("input", { "data-help": guid, type: props.Type === undefined ? 'text' : props.Type, className: props.Valid(props.Field) ? 'form-control' : 'form-control is-invalid', onChange: function (evt) { return valueChange(evt.target.value); }, value: heldVal, disabled: props.Disabled == null ? false : props.Disabled }),

package/lib/MutliCheckBoxSelect.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-declare const MultiSelect: (props: {
+interface IProps {
+    Label?: string;
     Options: {
         Value: number;
         Text: string;
@@ -10,5 +11,7 @@ declare const MultiSelect: (props: {
         Text: string;
         Selected: boolean;
     }[]) => void;
-}) => JSX.Element;
+    Help?: string | JSX.Element;
+}
+declare const MultiSelect: (props: IProps) => JSX.Element;
 export default MultiSelect;

package/lib/MutliCheckBoxSelect.js

@@ -22,10 +22,17 @@
 //
 // ******************************************************************************************************
 Object.defineProperty(exports, "__esModule", { value: true });
+var helper_functions_1 = require("@gpa-gemstone/helper-functions");
 var React = require("react");
+var HelperMessage_1 = require("./HelperMessage");
 var MultiSelect = function (props) {
     var _a = React.useState(false), show = _a[0], setShow = _a[1];
+    var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
+    var _c = React.useState(""), guid = _c[0], setGuid = _c[1];
     var multiSelect = React.useRef(null);
+    React.useEffect(function () {
+        setGuid((0, helper_functions_1.CreateGuid)());
+    }, []);
     function HandleShow(evt) {
         if (multiSelect.current === null)
             setShow(!show);
@@ -40,36 +47,47 @@ var MultiSelect = function (props) {
             document.removeEventListener('mousedown', HandleShow, false);
         };
     }, []);
-    return (React.createElement("div", { ref: multiSelect, style: { position: 'relative', display: 'inline-block', width: 'inherit' } },
-        React.createElement("button", { type: "button", style: { border: '1px solid #ced4da', padding: '.375rem .75rem', fontSize: '1rem', borderRadius: '.25rem' }, className: "btn form-control dropdown-toggle", onClick: HandleShow },
-            props.Options.filter(function (x) { return x.Selected; }).length !== props.Options.length
-                ? props.Options.filter(function (x) { return x.Selected; }).length
-                : 'All ',
-            ' ',
-            "Selected"),
-        React.createElement("div", { style: {
-                maxHeight: window.innerHeight * 0.75,
-                overflowY: 'auto',
-                padding: '10 5',
-                display: show ? 'block' : 'none',
-                position: 'absolute',
-                backgroundColor: '#fff',
-                boxShadow: '0px 8px 16px 0px rgba(0,0,0,0.2)',
-                zIndex: 401,
-                minWidth: '100%',
-            } },
-            React.createElement("table", { className: "table", style: { margin: 0 } },
-                React.createElement("tbody", null,
-                    React.createElement("tr", { onClick: function (evt) {
-                            evt.preventDefault();
-                            props.OnChange(evt, props.Options.filter(function (x) { return x.Selected === (props.Options.filter(function (o) { return o.Selected; }).length === props.Options.length); }));
-                        } },
-                        React.createElement("td", null,
-                            React.createElement("input", { type: "checkbox", checked: props.Options.filter(function (x) { return x.Selected; }).length === props.Options.length, onChange: function () { return null; } })),
-                        React.createElement("td", null, "All")),
-                    props.Options.map(function (f, i) { return (React.createElement("tr", { key: i, onClick: function (evt) { return props.OnChange(evt, [f]); } },
-                        React.createElement("td", null,
-                            React.createElement("input", { type: "checkbox", checked: f.Selected, onChange: function () { return null; } })),
-                        React.createElement("td", null, f.Text))); }))))));
+    var showLabel = props.Label !== "";
+    var showHelpIcon = props.Help !== undefined;
+    var label = props.Label === undefined ? 'Select' : props.Label;
+    return (React.createElement("div", { className: "form-group" },
+        showLabel || showHelpIcon ?
+            React.createElement("label", null,
+                showLabel ? label : '',
+                showHelpIcon ? React.createElement("div", { style: { width: 20, height: 20, borderRadius: '50%', display: 'inline-block', background: '#0D6EFD', marginLeft: 10, textAlign: 'center', fontWeight: 'bold' }, onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } }, " ? ") : null) : null,
+        showHelpIcon ?
+            React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
+            : null,
+        React.createElement("div", { ref: multiSelect, style: { position: 'relative', display: 'block', width: 'inherit' } },
+            React.createElement("button", { type: "button", style: { border: '1px solid #ced4da', padding: '.375rem .75rem', fontSize: '1rem', borderRadius: '.25rem' }, className: "btn form-control dropdown-toggle", onClick: HandleShow },
+                props.Options.filter(function (x) { return x.Selected; }).length !== props.Options.length
+                    ? props.Options.filter(function (x) { return x.Selected; }).length
+                    : 'All ',
+                ' ',
+                "Selected"),
+            React.createElement("div", { style: {
+                    maxHeight: window.innerHeight * 0.75,
+                    overflowY: 'auto',
+                    padding: '10 5',
+                    display: show ? 'block' : 'none',
+                    position: 'absolute',
+                    backgroundColor: '#fff',
+                    boxShadow: '0px 8px 16px 0px rgba(0,0,0,0.2)',
+                    zIndex: 401,
+                    minWidth: '100%',
+                } },
+                React.createElement("table", { className: "table", style: { margin: 0 } },
+                    React.createElement("tbody", null,
+                        React.createElement("tr", { onClick: function (evt) {
+                                evt.preventDefault();
+                                props.OnChange(evt, props.Options.filter(function (x) { return x.Selected === (props.Options.filter(function (o) { return o.Selected; }).length === props.Options.length); }));
+                            } },
+                            React.createElement("td", null,
+                                React.createElement("input", { type: "checkbox", checked: props.Options.filter(function (x) { return x.Selected; }).length === props.Options.length, onChange: function () { return null; } })),
+                            React.createElement("td", null, "All")),
+                        props.Options.map(function (f, i) { return (React.createElement("tr", { key: i, onClick: function (evt) { return props.OnChange(evt, [f]); } },
+                            React.createElement("td", null,
+                                React.createElement("input", { type: "checkbox", checked: f.Selected, onChange: function () { return null; } })),
+                            React.createElement("td", null, f.Text))); })))))));
 };
 exports.default = MultiSelect;

package/package.json

@@ -1,58 +1,54 @@
-{
-  "name": "@gpa-gemstone/react-forms",
-  "version": "1.1.34",
-  "description": "React Form modules for gpa webapps",
-  "main": "lib/index.js",
-  "types": "lib/index.d.ts",
-  "files": [
-    "lib/**/*"
-  ],
-  "scripts": {
-    "test": "jest --config jestconfig.json",
-    "build": "tsc",
-    "format": "prettier --write \"src/**/*.tsx\"",
-    "lint": "tslint -p tsconfig.json",
-    "prepare": "npm run build",
-    "prepublishOnly": "npm test && npm run lint",
-    "preversion": "npm run lint",
-    "version": "npm run format && git add -A src",
-    "postversion": "git push && git push --tags"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/GridProtectionAlliance/gpa-gemstone.git"
-  },
-  "keywords": [
-    "React",
-    "Table",
-    "GSF",
-    "Gemstone",
-    "GridProtectionAlliance"
-  ],
-  "author": "GridProtectionAlliance",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/GridProtectionAlliance/gpa-gemstone/issues"
-  },
-  "homepage": "https://github.com/GridProtectionAlliance/gpa-gemstone#readme",
-  "devDependencies": {
-    "@types/jest": "^27.0.0",
-    "jest": "^27.0.6",
-    "prettier": "^2.3.2",
-    "ts-jest": "^27.0.4",
-    "tslint": "^6.1.3",
-    "tslint-config-prettier": "^1.18.0",
-    "typescript": "4.4.4"
-  },
-  "dependencies": {
-    "@gpa-gemstone/helper-functions": "0.0.17",
-    "@types/react": "^17.0.14",
-    "@types/styled-components": "^5.1.11",
-    "react": "^18.2.0",
-    "styled-components": "5.3.3",
-    "moment": "2.29.4"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
+{
+  "name": "@gpa-gemstone/react-forms",
+  "version": "1.1.36",
+  "description": "React Form modules for gpa webapps",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "files": ["lib/**/*"],
+  "scripts":   {
+    "test": "jest --config jestconfig.json",
+    "build": "tsc",
+    "format": "prettier --write \"src/**/*.tsx\"",
+    "lint": "tslint -p tsconfig.json",
+    "prepare": "npm run build",
+    "prepublishOnly": "npm test && npm run lint",
+    "preversion": "npm run lint",
+    "version": "npm run format && git add -A src",
+    "postversion": "git push && git push --tags"
+  },
+  "repository":   {
+    "type": "git",
+    "url": "https://github.com/GridProtectionAlliance/gpa-gemstone.git"
+  },
+  "keywords":   [
+    "React",
+    "Table",
+    "GSF",
+    "Gemstone",
+    "GridProtectionAlliance"
+  ],
+  "author": "GridProtectionAlliance",
+  "license": "MIT",
+  "bugs": {"url": "https://github.com/GridProtectionAlliance/gpa-gemstone/issues"},
+  "homepage": "https://github.com/GridProtectionAlliance/gpa-gemstone#readme",
+  "devDependencies":   {
+    "@types/jest": "^27.0.0",
+    "@types/react-portal": "4.0.4",
+    "jest": "^27.0.6",
+    "prettier": "^2.3.2",
+    "ts-jest": "^27.0.4",
+    "tslint": "^6.1.3",
+    "tslint-config-prettier": "^1.18.0",
+    "typescript": "4.4.4"
+  },
+  "dependencies":   {
+    "@gpa-gemstone/helper-functions": "0.0.19",
+    "@types/react": "^17.0.14",
+    "@types/styled-components": "^5.1.11",
+    "react": "^18.2.0",
+    "styled-components": "5.3.3",
+    "moment": "2.29.4",
+    "react-portal": "4.2.2"
+  },
+  "publishConfig": {"access": "public"}
+}