@gpa-gemstone/react-forms 1.1.60 → 1.1.62

package/lib/DatePicker.js

@@ -1,214 +1,221 @@
-"use strict";
-// ******************************************************************************************************
-//  DatePicker.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:
-//  ----------------------------------------------------------------------------------------------------
-//  02/05/2020 - Billy Ernest
-//       Generated original version of source code.
-//
-// ******************************************************************************************************
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = require("react");
-var moment = require("moment");
-var DateTimePopup_1 = require("./DateTimeUI/DateTimePopup");
-var helper_functions_1 = require("@gpa-gemstone/helper-functions");
-var HelperMessage_1 = require("./HelperMessage");
-function DateTimePicker(props) {
-    // Formats that will be used for dateBoxes
-    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]");
-    var parse = function (r) { return moment(props.Record[props.Field], recordFormat); };
-    var divRef = React.useRef(null);
-    var _a = React.useState(""), guid = _a[0], setGuid = _a[1];
-    var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
-    // Adds a buffer between the outside props and what the box is reading to prevent box overwriting every render with a keystroke
-    var _c = React.useState(parse(props.Record).format(boxFormat)), boxRecord = _c[0], setBoxRecord = _c[1];
-    var _d = React.useState(parse(props.Record)), pickerRecord = _d[0], setPickerRecord = _d[1];
-    var _e = React.useState(""), feedbackMessage = _e[0], setFeedbackMessage = _e[1];
-    var _f = React.useState(false), showOverlay = _f[0], setShowOverlay = _f[1];
-    var _g = React.useState(0), top = _g[0], setTop = _g[1];
-    var _h = React.useState(0), left = _h[0], setLeft = _h[1];
-    React.useEffect(function () {
-        setGuid((0, helper_functions_1.CreateGuid)());
-    }, []);
-    React.useEffect(function () {
-        if (props.Record[props.Field] !== null) {
-            setPickerRecord(parse(props.Record));
-            setBoxRecord(parse(props.Record).format(boxFormat));
-        }
-        else {
-            setPickerRecord(undefined);
-            setBoxRecord('');
-        }
-    }, [props.Record]);
-    React.useLayoutEffect(function () {
-        var node = (divRef.current !== null ? (0, helper_functions_1.GetNodeSize)(divRef.current) : { top: top, left: left, height: 0, width: 0 });
-        if (node.height === 0 && node.width === 0) {
-            setLeft(0);
-            setTop(-9999);
-            return;
-        }
-        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); };
-    }, [props.Record, props.Field, boxFormat]);
-    function setPickerAndRecord(arg) {
-        var _a, _b;
-        var _c;
-        setPickerRecord(arg);
-        if (((_c = props.AllowEmpty) !== null && _c !== void 0 ? _c : false) && arg === undefined && props.Record[props.Field] !== null)
-            props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = null, _a)));
-        var valid = arg != undefined && validateDate(arg);
-        if (valid && props.Record[props.Field].toString() !== arg.format(recordFormat))
-            props.Setter(__assign(__assign({}, props.Record), (_b = {}, _b[props.Field] = arg.format(recordFormat), _b)));
-    }
-    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('');
-            }
-        }
-    }
-    function getBoxFormat(type, accuracy) {
-        var dateTime = type !== null && type !== void 0 ? type : 'date';
-        var timeUnit = accuracy !== null && accuracy !== void 0 ? accuracy : 'second';
-        if (dateTime === 'time') {
-            if (timeUnit === 'minute') {
-                return "HH:mm";
-            }
-            else if (timeUnit === 'second') {
-                return "HH:mm:ss";
-            }
-            else {
-                return "HH:mm:ss.SSS";
-            }
-        }
-        else if (dateTime === 'datetime-local') {
-            if (timeUnit === 'minute') {
-                return "YYYY-MM-DD[T]HH:mm";
-            }
-            else if (timeUnit === 'second') {
-                return "YYYY-MM-DD[T]HH:mm:ss";
-            }
-            else {
-                return "YYYY-MM-DD[T]HH:mm:ss.SSS";
-            }
-        }
-        else {
-            return "YYYY-MM-DD";
-        }
-    }
-    function getFeedbackMessage() {
-        if (feedbackMessage.length != 0) {
-            return feedbackMessage;
-        }
-        else if (props.Feedback == null || props.Feedback.length == 0) {
-            return props.Field.toString() + " is a required field.";
-        }
-        else {
-            return props.Feedback;
-        }
-    }
-    function validateDate(date) {
-        var minStartDate = props.MinDate != null ? props.MinDate.startOf('day') : moment("1753-01-01", "YYYY-MM-DD").startOf('day');
-        if (!date.isValid()) {
-            setFeedbackMessage("Please enter a valid date.");
-            return false;
-        }
-        else if (date.startOf('day').isBefore(minStartDate)) {
-            setFeedbackMessage("Date must be on or after " + minStartDate.format("MM-DD-YYYY"));
-            return false;
-        }
-        else {
-            setFeedbackMessage("");
-            return true;
-        }
-    }
-    var showLabel = props.Label !== "";
-    var showHelpIcon = props.Help !== undefined;
-    var label = props.Label === undefined ? props.Field : props.Label;
-    var step = props.Accuracy === 'millisecond' ? '0.001' : (props.Accuracy === 'minute' ? '60' : '1');
-    var IsValid = function () {
-        if (feedbackMessage.length > 0)
-            return false;
-        return props.Valid(props.Field);
-    };
-    function valueChange(value) {
-        var _a, _b;
-        var allowNull = props.AllowEmpty === undefined ? false : props.AllowEmpty;
-        var date = moment(value, boxFormat);
-        if (allowNull && value === '') {
-            props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = null, _a)));
-            setPickerAndRecord(undefined);
-        }
-        else if (validateDate(date)) {
-            props.Setter(__assign(__assign({}, props.Record), (_b = {}, _b[props.Field] = moment(value, boxFormat).format(recordFormat), _b)));
-            setPickerAndRecord(moment(value, boxFormat));
-        }
-        else {
-            setPickerAndRecord(undefined);
-        }
-        setBoxRecord(value);
-    }
-    return (React.createElement("div", { className: "form-group", ref: divRef },
-        showHelpIcon || showLabel ?
-            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("input", { "data-help": guid, className: "gpa-gemstone-datetime form-control " + (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 }),
-        React.createElement("div", { className: "invalid-feedback" }, getFeedbackMessage()),
-        React.createElement(DateTimePopup_1.default, { 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 })));
-}
-exports.default = DateTimePicker;
+"use strict";
+// ******************************************************************************************************
+//  DatePicker.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:
+//  ----------------------------------------------------------------------------------------------------
+//  02/05/2020 - Billy Ernest
+//       Generated original version of source code.
+//
+// ******************************************************************************************************
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = DateTimePicker;
+var React = require("react");
+var moment = require("moment");
+var DateTimePopup_1 = require("./DateTimeUI/DateTimePopup");
+var helper_functions_1 = require("@gpa-gemstone/helper-functions");
+var HelperMessage_1 = require("./HelperMessage");
+/**
+ * Component that allows a user to pick a date or datetime.
+*/
+function DateTimePicker(props) {
+    // 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 _a = React.useState(""), guid = _a[0], setGuid = _a[1];
+    var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
+    // Adds a buffer between the outside props and what the box is reading to prevent box overwriting every render with a keystroke
+    var _c = React.useState(parse(props.Record).format(boxFormat)), boxRecord = _c[0], setBoxRecord = _c[1];
+    var _d = React.useState(parse(props.Record)), pickerRecord = _d[0], setPickerRecord = _d[1];
+    var _e = React.useState(""), feedbackMessage = _e[0], setFeedbackMessage = _e[1];
+    var _f = React.useState(false), showOverlay = _f[0], setShowOverlay = _f[1];
+    var _g = React.useState(0), top = _g[0], setTop = _g[1];
+    var _h = React.useState(0), left = _h[0], setLeft = _h[1];
+    React.useEffect(function () {
+        setGuid((0, helper_functions_1.CreateGuid)());
+    }, []);
+    React.useEffect(function () {
+        if (props.Record[props.Field] !== null) {
+            setPickerRecord(parse(props.Record));
+            setBoxRecord(parse(props.Record).format(boxFormat));
+        }
+        else {
+            setPickerRecord(undefined);
+            setBoxRecord('');
+        }
+    }, [props.Record]);
+    React.useLayoutEffect(function () {
+        var node = (divRef.current !== null ? (0, helper_functions_1.GetNodeSize)(divRef.current) : { top: top, left: left, height: 0, width: 0 });
+        if (node.height === 0 && node.width === 0) {
+            setLeft(0);
+            setTop(-9999);
+            return;
+        }
+        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); };
+    }, [props.Record, props.Field, boxFormat]);
+    function setPickerAndRecord(arg) {
+        var _a, _b;
+        var _c;
+        setPickerRecord(arg);
+        if (((_c = props.AllowEmpty) !== null && _c !== void 0 ? _c : false) && arg === undefined && props.Record[props.Field] !== null)
+            props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = null, _a)));
+        var valid = arg != undefined && validateDate(arg);
+        if (valid && props.Record[props.Field].toString() !== arg.format(recordFormat))
+            props.Setter(__assign(__assign({}, props.Record), (_b = {}, _b[props.Field] = arg.format(recordFormat), _b)));
+    }
+    // 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('');
+            }
+        }
+    }
+    function getBoxFormat(type, accuracy) {
+        var dateTime = type !== null && type !== void 0 ? type : 'date';
+        var timeUnit = accuracy !== null && accuracy !== void 0 ? accuracy : 'second';
+        if (dateTime === 'time') {
+            if (timeUnit === 'minute') {
+                return "HH:mm";
+            }
+            else if (timeUnit === 'second') {
+                return "HH:mm:ss";
+            }
+            else {
+                return "HH:mm:ss.SSS";
+            }
+        }
+        else if (dateTime === 'datetime-local') {
+            if (timeUnit === 'minute') {
+                return "YYYY-MM-DD[T]HH:mm";
+            }
+            else if (timeUnit === 'second') {
+                return "YYYY-MM-DD[T]HH:mm:ss";
+            }
+            else {
+                return "YYYY-MM-DD[T]HH:mm:ss.SSS";
+            }
+        }
+        else {
+            return "YYYY-MM-DD";
+        }
+    }
+    function getFeedbackMessage() {
+        if (feedbackMessage.length != 0) {
+            return feedbackMessage;
+        }
+        else if (props.Feedback == null || props.Feedback.length == 0) {
+            return "".concat(props.Field.toString(), " is a required field.");
+        }
+        else {
+            return props.Feedback;
+        }
+    }
+    function validateDate(date) {
+        var minStartDate = props.MinDate != null ? props.MinDate.startOf('day') : moment("1753-01-01", "YYYY-MM-DD").startOf('day');
+        if (!date.isValid()) {
+            setFeedbackMessage("Please enter a valid date.");
+            return false;
+        }
+        else if (date.startOf('day').isBefore(minStartDate)) {
+            setFeedbackMessage("Date must be on or after ".concat(minStartDate.format("MM-DD-YYYY")));
+            return false;
+        }
+        else {
+            setFeedbackMessage("");
+            return true;
+        }
+    }
+    // Variables for rendering labels and help icons.
+    var showLabel = props.Label !== "";
+    var showHelpIcon = props.Help !== undefined;
+    var label = props.Label === undefined ? props.Field : props.Label;
+    var step = props.Accuracy === 'millisecond' ? '0.001' : (props.Accuracy === 'minute' ? '60' : '1');
+    var IsValid = function () {
+        if (feedbackMessage.length > 0)
+            return false;
+        return props.Valid(props.Field);
+    };
+    function valueChange(value) {
+        var _a, _b;
+        var allowNull = props.AllowEmpty === undefined ? false : props.AllowEmpty;
+        var date = moment(value, boxFormat);
+        if (allowNull && value === '') {
+            props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = null, _a)));
+            setPickerAndRecord(undefined);
+        }
+        else if (validateDate(date)) {
+            props.Setter(__assign(__assign({}, props.Record), (_b = {}, _b[props.Field] = moment(value, boxFormat).format(recordFormat), _b)));
+            setPickerAndRecord(moment(value, boxFormat));
+        }
+        else {
+            setPickerAndRecord(undefined);
+        }
+        setBoxRecord(value);
+    }
+    return (React.createElement("div", { className: "form-group", ref: divRef },
+        showHelpIcon || showLabel ?
+            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("input", { "data-help": guid, 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 }),
+        React.createElement("div", { className: "invalid-feedback" }, getFeedbackMessage()),
+        React.createElement(DateTimePopup_1.default, { 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 })));
+}

package/lib/DateRangePicker.d.ts

@@ -1,13 +1,64 @@
-/// <reference types="react" />
-export default function DateRangePicker<T>(props: {
-    Record: T;
-    FromField: keyof T;
-    ToField: keyof T;
-    Setter: (record: T) => void;
-    Label: string;
-    Valid: (fieldFrom: keyof T, fieldTo: keyof T) => boolean;
-    Disabled?: boolean;
-    Feedback?: string;
-    Format?: string;
-    Type?: ('datetime-local' | 'date');
-}): JSX.Element;
+interface IProps<T> {
+    /**
+      * Record to be used in form
+      * @type {T}
+    */
+    Record: T;
+    /**
+      * Field representing the start date in the record
+      * @type {keyof T}
+    */
+    FromField: keyof T;
+    /**
+      * Field representing the end date in the record
+      * @type {keyof T}
+    */
+    ToField: keyof T;
+    /**
+      * Setter function to update the Record
+      * @param record - Updated Record
+    */
+    Setter: (record: T) => void;
+    /**
+      * Label to display for the form, defaults to the Field prop
+      * @type {string}
+      * @optional
+    */
+    Label: string;
+    /**
+      * Function to determine the validity of a field
+      * @param field - Field of the record to check
+      * @returns {boolean}
+    */
+    Valid: (fieldFrom: keyof T, fieldTo: keyof T) => boolean;
+    /**
+      * Flag to disable the input field
+      * @type {boolean}
+      * @optional
+    */
+    Disabled?: boolean;
+    /**
+      * Feedback message to show when input is invalid
+      * @type {string}
+      * @optional
+    */
+    Feedback?: string;
+    /**
+      * Date format to use for the input fields
+      * @type {string}
+      * @optional
+    */
+    Format?: string;
+    /**
+      * Value for the type attribute in input element, either 'datetime-local' or the default 'date'
+      * @type {'datetime-local' | 'date'}
+      * @optional
+    */
+    Type?: ('datetime-local' | 'date');
+}
+/**
+ * DateRangePicker Component.
+ * Allows users to select a date range either by choosing predefined durations or by specifying custom dates.
+ */
+export default function DateRangePicker<T>(props: IProps<T>): JSX.Element;
+export {};