@gpa-gemstone/react-forms 1.1.95 → 1.1.97

package/lib/DateTimeUI/Calender.js

@@ -31,7 +31,6 @@ function Calender(props) {
     var _f = React.useState((_b = (_a = props.DateTime) === null || _a === void 0 ? void 0 : _a.month()) !== null && _b !== void 0 ? _b : 0), month = _f[0], setMonth = _f[1];
     var _g = React.useState((_d = (_c = props.DateTime) === null || _c === void 0 ? void 0 : _c.year()) !== null && _d !== void 0 ? _d : moment.utc().year()), year = _g[0], setYear = _g[1];
     var _h = React.useState('month'), mode = _h[0], setMode = _h[1];
-    var _j = React.useState('None'), hover = _j[0], setHover = _j[1];
     React.useEffect(function () {
         var _a, _b, _c, _d, _e, _f, _g, _h;
         setMonth(isNaN((_b = (_a = props.DateTime) === null || _a === void 0 ? void 0 : _a.month()) !== null && _b !== void 0 ? _b : NaN) ? 0 : ((_d = (_c = props.DateTime) === null || _c === void 0 ? void 0 : _c.month()) !== null && _d !== void 0 ? _d : 0));
@@ -94,19 +93,19 @@ function Calender(props) {
     }
     var headerWidth = (mode === 'month' ? 5 : 2);
     return (React.createElement("div", { style: { background: '#f0f0f0', opacity: 1 } },
-        React.createElement("table", { style: { textAlign: 'center' } },
+        React.createElement("table", { style: { textAlign: 'center', width: '100%' } },
             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: 20, padding: 5, cursor: 'pointer' }, 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' ? "".concat(year - 6, "-").concat(year + 5) : ''),
-                    React.createElement("th", { style: { width: 20, padding: 5, cursor: 'pointer' }, onClick: toNext, onMouseEnter: function () { return setHover('Next'); }, onMouseLeave: function () { return setHover('None'); } }, '>')),
+                    React.createElement("th", { style: { width: 20, padding: 5, cursor: 'pointer' }, onClick: toNext }, '>')),
                 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"),

package/lib/DateTimeUI/DateTimePicker.d.ts

@@ -0,0 +1,18 @@
+import * as moment from 'moment';
+import { Gemstone } from '@gpa-gemstone/application-typings';
+export type TimeUnit = ('datetime-local' | 'date' | 'time');
+export interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
+    Valid: (field: keyof T) => boolean;
+    Feedback?: string;
+    Format?: string;
+    Type?: TimeUnit;
+    AllowEmpty?: boolean;
+    Accuracy?: Gemstone.TSX.Types.Accuracy;
+    MinDate?: moment.Moment;
+}
+/**
+ * Component that allows a user to pick a date or datetime.
+*/
+export default function DateTimePickerBase<T>(props: IProps<T>): JSX.Element;
+export declare function getBoxFormat(type?: TimeUnit, accuracy?: Gemstone.TSX.Types.Accuracy): "YYYY-MM-DD" | "HH:mm" | "HH:mm:ss" | "HH:mm:ss.SSS" | "YYYY-MM-DD[T]HH:mm" | "YYYY-MM-DD[T]HH:mm:ss" | "YYYY-MM-DD[T]HH:mm:ss.SSS";
+export declare const getInputWidth: (inputRef: HTMLInputElement, currentValue: string, currentStep: string) => number;

package/lib/{DatePicker.js → DateTimeUI/DateTimePicker.js}

@@ -1,6 +1,6 @@
 "use strict";
 // ******************************************************************************************************
-//  DatePicker.tsx - Gbtc
+//  DateTimePickerBase.tsx - Gbtc
 //
 //  Copyright © 2020, Grid Protection Alliance.  All Rights Reserved.
 //
@@ -17,7 +17,7 @@
 //
 //  Code Modification History:
 //  ----------------------------------------------------------------------------------------------------
-//  02/05/2020 - Billy Ernest
+//  07/02/2025 - Preston Crawford
 //       Generated original version of source code.
 //
 // ******************************************************************************************************
@@ -33,36 +33,38 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = DateTimePicker;
+exports.getInputWidth = void 0;
+exports.default = DateTimePickerBase;
+exports.getBoxFormat = getBoxFormat;
 var React = require("react");
 var moment = require("moment");
-var DateTimePopup_1 = require("./DateTimeUI/DateTimePopup");
+var DateTimePopup_1 = require("./DateTimePopup");
 var helper_functions_1 = require("@gpa-gemstone/helper-functions");
-var ToolTip_1 = require("./ToolTip");
+var ToolTip_1 = require("../ToolTip");
 var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
 /**
  * Component that allows a user to pick a date or datetime.
 */
-function DateTimePicker(props) {
+function DateTimePickerBase(props) {
     var inputRef = React.useRef(null);
+    var popupRef = React.useRef(null);
+    var divRef = React.useRef(null);
     var width = (0, helper_functions_1.useGetContainerPosition)(inputRef).width;
     var _a = React.useState(false), isTextOverflowing = _a[0], setIsTextOverflowing = _a[1];
     var _b = React.useState(false), isInputHovered = _b[0], setIsInputHovered = _b[1];
     var overflowGUID = React.useState((0, helper_functions_1.CreateGuid)())[0];
+    var _c = React.useState(false), showOverlay = _c[0], setShowOverlay = _c[1];
     // Formats for displaying dates in the input box and storing in the record.
     var boxFormat = getBoxFormat(props.Type, props.Accuracy);
     var recordFormat = props.Format !== undefined ? props.Format : "YYYY-MM-DD" + (props.Type === undefined || props.Type === 'date' ? "" : "[T]HH:mm:ss.SSS[Z]");
     // Parse the date from the record.
     var parse = function (r) { return moment(props.Record[props.Field], recordFormat); };
-    // State and ref declarations.
-    var divRef = React.useRef(null);
     var helpGuid = React.useState((0, helper_functions_1.CreateGuid)())[0];
-    var _c = React.useState(false), showHelp = _c[0], setShowHelp = _c[1];
+    var _d = React.useState(false), showHelp = _d[0], setShowHelp = _d[1];
     // Adds a buffer between the outside props and what the box is reading to prevent box overwriting every render with a keystroke
-    var _d = React.useState(parse(props.Record).format(boxFormat)), boxRecord = _d[0], setBoxRecord = _d[1];
-    var _e = React.useState(parse(props.Record)), pickerRecord = _e[0], setPickerRecord = _e[1];
-    var _f = React.useState(""), feedbackMessage = _f[0], setFeedbackMessage = _f[1];
-    var _g = React.useState(false), showOverlay = _g[0], setShowOverlay = _g[1];
+    var _e = React.useState(parse(props.Record).format(boxFormat)), boxRecord = _e[0], setBoxRecord = _e[1];
+    var _f = React.useState(parse(props.Record)), pickerRecord = _f[0], setPickerRecord = _f[1];
+    var _g = React.useState(""), feedbackMessage = _g[0], setFeedbackMessage = _g[1];
     var _h = React.useState(0), top = _h[0], setTop = _h[1];
     var _j = React.useState(0), left = _j[0], setLeft = _j[1];
     var allowNull = React.useMemo(function () { var _a; return (_a = props.AllowEmpty) !== null && _a !== void 0 ? _a : false; }, [props.AllowEmpty]);
@@ -121,16 +123,18 @@ function DateTimePicker(props) {
     }
     // Handle clicks outside the component.
     function onWindowClick(evt) {
-        if (evt.target.closest(".gpa-gemstone-datetime") == null) {
-            setShowOverlay(false);
-            if (props.Record[props.Field] !== null) {
-                setPickerAndRecord(parse(props.Record));
-                setBoxRecord(parse(props.Record).format(boxFormat));
-            }
-            else {
-                setPickerAndRecord(undefined);
-                setBoxRecord('');
-            }
+        var _a, _b;
+        // if the click is inside the input-container or inside the popup, bail
+        if (divRef.current == null || popupRef.current == null || ((_a = divRef.current) === null || _a === void 0 ? void 0 : _a.contains(evt.target)) || ((_b = popupRef.current) === null || _b === void 0 ? void 0 : _b.contains(evt.target)))
+            return;
+        setShowOverlay(false);
+        if (props.Record[props.Field] !== null) {
+            setPickerAndRecord(parse(props.Record));
+            setBoxRecord(parse(props.Record).format(boxFormat));
+        }
+        else {
+            setPickerAndRecord(undefined);
+            setBoxRecord('');
         }
     }
     function getFeedbackMessage() {
@@ -193,7 +197,7 @@ function DateTimePicker(props) {
     React.useEffect(function () {
         if (inputRef.current == null)
             return;
-        var inputWidth = getInputWidth(inputRef.current, boxRecord, step);
+        var inputWidth = (0, exports.getInputWidth)(inputRef.current, boxRecord, step);
         setIsTextOverflowing(inputWidth > width);
     }, [width, boxRecord, step]);
     return (React.createElement("div", { className: "form-group", ref: divRef },
@@ -208,14 +212,14 @@ function DateTimePicker(props) {
             : null,
         React.createElement("input", { className: "gpa-gemstone-datetime form-control ".concat(IsValid() ? '' : 'is-invalid'), type: props.Type === undefined ? 'date' : props.Type, onChange: function (evt) {
                 valueChange(evt.target.value);
-            }, onFocus: function () { setShowOverlay(true); }, value: boxRecord, disabled: props.Disabled === undefined ? false : props.Disabled, onClick: function (e) { e.preventDefault(); }, step: step, ref: inputRef, "data-tooltip": overflowGUID, onMouseOver: function () { return setIsInputHovered(true); }, onMouseOut: function () { return setIsInputHovered(false); } }),
+            }, onFocus: function () { return setShowOverlay(true); }, value: boxRecord, disabled: props.Disabled === undefined ? false : props.Disabled, onClick: function (e) { return e.preventDefault(); }, step: step, ref: inputRef, "data-tooltip": overflowGUID, onMouseOver: function () { return setIsInputHovered(true); }, onMouseOut: function () { return setIsInputHovered(false); } }),
         React.createElement("div", { className: "invalid-feedback" }, getFeedbackMessage()),
         React.createElement(ToolTip_1.default, { Show: isTextOverflowing && isInputHovered, Target: overflowGUID }, props.Format != null ? moment(boxRecord).format(props.Format) : boxRecord),
-        React.createElement(DateTimePopup_1.default, { Setter: function (d) {
+        React.createElement(DateTimePopup_1.default, { ref: popupRef, Setter: function (d) {
                 setPickerAndRecord(d);
                 if (props.Type === 'date')
                     setShowOverlay(false);
-            }, Show: showOverlay, DateTime: pickerRecord, Valid: props.Valid(props.Field), Top: top, Center: left, Type: props.Type === undefined ? 'date' : props.Type, Accuracy: props.Accuracy })));
+            }, Show: showOverlay, DateTime: pickerRecord, Top: top, Center: left, Type: props.Type === undefined ? 'date' : props.Type, Accuracy: props.Accuracy })));
 }
 function getBoxFormat(type, accuracy) {
     var dateTime = type !== null && type !== void 0 ? type : 'date';
@@ -267,3 +271,4 @@ var getInputWidth = function (inputRef, currentValue, currentStep) {
     document.body.removeChild(dummyInput);
     return width;
 };
+exports.getInputWidth = getInputWidth;

package/lib/DateTimeUI/DateTimePopup.d.ts

@@ -1,16 +1,15 @@
+import * as React from 'react';
 import * as moment from 'moment';
-import { TimeUnit } from '../DatePicker';
 import { Gemstone } from '@gpa-gemstone/application-typings';
+import { TimeUnit } from './DateTimePicker';
 interface IProps {
     DateTime: moment.Moment | undefined;
     Setter: (record: moment.Moment) => void;
-    Valid: boolean;
-    Feedback?: string;
     Type: TimeUnit;
     Show: boolean;
     Top: number;
     Center: number;
     Accuracy?: Gemstone.TSX.Types.Accuracy;
 }
-export default function DateTimePopup(props: IProps): JSX.Element | null;
-export {};
+declare const _default: React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLDivElement | null>>;
+export default _default;

package/lib/DateTimeUI/DateTimePopup.js

@@ -26,34 +26,33 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = DateTimePopup;
 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 helper_functions_1 = require("@gpa-gemstone/helper-functions");
+//TODO: this eventually should be moved into a css class
 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 "".concat(props.Top, "px"); }, function (props) { return "".concat(props.Left, "px"); }, function (props) { return "".concat(props.Indicator, "%"); });
-function DateTimePopup(props) {
+//This is merely used to provide a class name for the popup for indentification purposes
+var DateTimePopupClass = "gpa-gemstone-datetime-popup";
+function DateTimePopup(props, ref) {
     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);
-    });
+    var refToUse = ref !== null && ref !== void 0 ? ref : divRef;
+    var width = (0, helper_functions_1.useGetContainerPosition)(refToUse).width;
+    var left = Math.max(props.Center - 0.5 * width, 0);
     React.useEffect(function () {
         setShowTime(props.Type !== 'date');
         setShowDate(props.Type !== 'time');
     }, [props.Type]);
     if (!props.Show)
         return null;
-    var left = Math.max(props.Center - 0.5 * width, 0);
     return (React.createElement(react_portal_1.Portal, null,
-        React.createElement(WrapperDiv, { Top: props.Top, Left: left, Indicator: 50, ref: divRef, className: 'gpa-gemstone-datetime' },
+        React.createElement(WrapperDiv, { Top: props.Top, Left: left, Indicator: 50, ref: refToUse, className: DateTimePopupClass },
             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, Accuracy: props.Accuracy }) : null)));
 }
+exports.default = React.forwardRef(DateTimePopup);
 var templateObject_1;

package/lib/MultiInput.js

@@ -70,15 +70,13 @@ function MultiInput(props) {
                             var _a;
                             return props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = [props.DefaultValue], _a)));
                         } },
-                        " ",
-                        React.createElement(gpa_symbols_1.ReactIcons.CirclePlus, null),
-                        " ")),
+                        React.createElement(gpa_symbols_1.ReactIcons.CirclePlus, null))),
                 React.createElement(ToolTip_1.default, { Show: showHelp && props.Help != null, Target: guid, Class: "info", Position: "bottom" }, props.Help))
             : null,
         fieldArray.map(function (r, index) {
             var _a, _b;
-            return (React.createElement("div", { className: 'row align-items-center', key: index },
-                React.createElement("div", { className: 'col' },
+            return (React.createElement("div", { className: 'row', key: index },
+                React.createElement("div", { className: 'col-10' },
                     React.createElement(Input_1.default, { Record: fieldArray, Field: index, Label: index === 0 ? props.Label : '', AllowNull: props.AllowNull, Type: props.Type, Help: index === 0 ? props.Help : undefined, Feedback: props.Feedback, Valid: function () { return props.Valid(props.Field); }, Style: props.Style, Disabled: props.Disabled, Setter: function (record) {
                             var _a;
                             var _b;
@@ -89,7 +87,7 @@ function MultiInput(props) {
                                 newArray[index] = record[index];
                             props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = newArray, _a)));
                         } })),
-                React.createElement("div", { className: 'col-auto' },
+                React.createElement("div", { className: "col-".concat(index === __spreadArray([], fieldArray, true).length - 1 ? 1 : 2, " ").concat(index === 0 ? 'd-flex align-items-center' : '') },
                     React.createElement("button", { className: 'btn', style: ((_a = props.Disabled) !== null && _a !== void 0 ? _a : false) ? { display: 'none' } : undefined, onClick: function () {
                             var _a;
                             var newRecords = __spreadArray([], fieldArray, true).filter(function (_, i) { return i !== index; });
@@ -97,7 +95,7 @@ function MultiInput(props) {
                         } },
                         React.createElement(gpa_symbols_1.ReactIcons.TrashCan, { Color: 'red' }))),
                 index === __spreadArray([], fieldArray, true).length - 1 ?
-                    React.createElement("div", { className: 'col-auto' },
+                    React.createElement("div", { className: "col-1 ".concat(index === 0 ? 'd-flex align-items-center' : '') },
                         React.createElement("button", { className: 'btn', style: ((_b = props.Disabled) !== null && _b !== void 0 ? _b : false) ? { display: 'none' } : undefined, onClick: function () {
                                 var _a;
                                 var newRecords = __spreadArray(__spreadArray([], __spreadArray([], fieldArray, true), true), [props.DefaultValue], false);

package/lib/index.d.ts

@@ -1,6 +1,6 @@
 import CheckBox from './CheckBox';
 import Input from './Input';
-import DatePicker from './DatePicker';
+import DatePicker from './DateTimeUI/DateTimePicker';
 import Select from './Select';
 import TextArea from './TextArea';
 import DateRangePicker from './DateRangePicker';

package/lib/index.js

@@ -27,8 +27,8 @@ var CheckBox_1 = require("./CheckBox");
 exports.CheckBox = CheckBox_1.default;
 var Input_1 = require("./Input");
 exports.Input = Input_1.default;
-var DatePicker_1 = require("./DatePicker");
-exports.DatePicker = DatePicker_1.default;
+var DateTimePicker_1 = require("./DateTimeUI/DateTimePicker");
+exports.DatePicker = DateTimePicker_1.default;
 var Select_1 = require("./Select");
 exports.Select = Select_1.default;
 var TextArea_1 = require("./TextArea");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/react-forms",
-  "version": "1.1.95",
+  "version": "1.1.97",
   "description": "React Form modules for gpa webapps",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -46,7 +46,7 @@
   },
   "dependencies":   {
     "@gpa-gemstone/application-typings": "0.0.87",
-    "@gpa-gemstone/gpa-symbols": "0.0.52",
+    "@gpa-gemstone/gpa-symbols": "0.0.53",
     "@gpa-gemstone/helper-functions": "0.0.45",
     "@types/react": "^17.0.14",
     "@types/styled-components": "^5.1.11",

package/lib/DatePicker.d.ts

@@ -1,17 +0,0 @@
-import * as moment from 'moment';
-import { Gemstone } from '@gpa-gemstone/application-typings';
-export type TimeUnit = ('datetime-local' | 'date' | 'time');
-interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
-    Valid: (field: keyof T) => boolean;
-    Feedback?: string;
-    Format?: string;
-    Type?: TimeUnit;
-    AllowEmpty?: boolean;
-    Accuracy?: Gemstone.TSX.Types.Accuracy;
-    MinDate?: moment.Moment;
-}
-/**
- * Component that allows a user to pick a date or datetime.
-*/
-export default function DateTimePicker<T>(props: IProps<T>): JSX.Element;
-export {};