@gpa-gemstone/react-forms 1.1.59 → 1.1.61

package/lib/Select.d.ts

@@ -1,17 +1,57 @@
-/// <reference types="react" />
-interface IProps<T> {
-    Record: T;
-    Field: keyof T;
-    Options: {
-        Value: string;
-        Label: string;
-    }[];
-    Setter: (record: T) => void;
-    Label?: string;
-    Disabled?: boolean;
-    EmptyOption?: boolean;
-    EmptyLabel?: string;
-    Help?: string | JSX.Element;
-}
-export default function Select<T>(props: IProps<T>): JSX.Element;
-export {};
+interface IProps<T> {
+    /**
+      * Record to be used in form
+      * @type {T}
+    */
+    Record: T;
+    /**
+      * Field of the record to be edited
+      * @type {keyof T}
+    */
+    Field: keyof T;
+    /**
+      * Options for the select dropdown
+      * @type {{ Value: string; Label: string }[]}
+    */
+    Options: {
+        Value: string;
+        Label: string;
+    }[];
+    /**
+      * 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;
+    /**
+      * Flag to disable the input field
+      * @type {boolean}
+      * @optional
+    */
+    Disabled?: boolean;
+    /**
+      * Flag to include an empty option in the select dropdown
+      * @type {boolean}
+      * @optional
+    */
+    EmptyOption?: boolean;
+    /**
+      * Label to display for the empty option
+      * @type {string}
+      * @optional
+    */
+    EmptyLabel?: string;
+    /**
+      * Help message or element to display
+      * @type {string | JSX.Element}
+      * @optional
+    */
+    Help?: string | JSX.Element;
+}
+export default function Select<T>(props: IProps<T>): JSX.Element;
+export {};

package/lib/Select.js

@@ -1,80 +1,84 @@
-"use strict";
-// ******************************************************************************************************
-//  Select.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:
-//  ----------------------------------------------------------------------------------------------------
-//  01/28/2020 - Billy Ernest
-//       Generated original version of source code.
-//  05/05/2021 - C. Lackner
-//       Added Help Message.
-//
-// ******************************************************************************************************
-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 HelperMessage_1 = require("./HelperMessage");
-var helper_functions_1 = require("@gpa-gemstone/helper-functions");
-function Select(props) {
-    var _a;
-    var _b = React.useState(""), guid = _b[0], setGuid = _b[1];
-    var _c = React.useState(false), showHelp = _c[0], setShowHelp = _c[1];
-    React.useEffect(function () {
-        setGuid((0, helper_functions_1.CreateGuid)());
-    }, []);
-    React.useEffect(function () {
-        var _a;
-        var currentValue = GetRecordValue();
-        if (!((_a = props.EmptyOption) !== null && _a !== void 0 ? _a : false) && props.Options.length > 0 && props.Options.findIndex(function (option) { return option.Value === currentValue; }) === -1) {
-            SetRecord(props.Options[0].Value);
-            // tslint:disable-next-line
-            console.warn("The current value is not available as an option. Specify EmptyOption=true if the value should be allowed.");
-        }
-    }, [props.Options]);
-    function SetRecord(value) {
-        var record = __assign({}, props.Record);
-        if (value !== '')
-            record[props.Field] = value;
-        else
-            record[props.Field] = null;
-        props.Setter(record);
-    }
-    function GetRecordValue() {
-        return props.Record[props.Field] == null ? '' : props.Record[props.Field].toString();
-    }
-    return (React.createElement("div", { className: "form-group" },
-        (props.Label !== "") ?
-            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 ?
-            React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
-            : null,
-        React.createElement("select", { "data-help": guid, className: "form-control", onChange: function (evt) { return SetRecord(evt.target.value); }, value: GetRecordValue(), disabled: props.Disabled == null ? false : props.Disabled },
-            ((_a = props.EmptyOption) !== null && _a !== void 0 ? _a : true) ? React.createElement("option", { value: "" }, props.EmptyLabel !== undefined ? props.EmptyLabel : '') : null,
-            props.Options.map(function (a, i) { return (React.createElement("option", { key: i, value: a.Value }, a.Label)); }))));
-}
-exports.default = Select;
+"use strict";
+// ******************************************************************************************************
+//  Select.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:
+//  ----------------------------------------------------------------------------------------------------
+//  01/28/2020 - Billy Ernest
+//       Generated original version of source code.
+//  05/05/2021 - C. Lackner
+//       Added Help Message.
+//
+// ******************************************************************************************************
+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 = Select;
+var React = require("react");
+var HelperMessage_1 = require("./HelperMessage");
+var helper_functions_1 = require("@gpa-gemstone/helper-functions");
+function Select(props) {
+    var _a;
+    var _b = React.useState(""), guid = _b[0], setGuid = _b[1];
+    var _c = React.useState(false), showHelp = _c[0], setShowHelp = _c[1];
+    // Effect to generate a unique ID for the component.
+    React.useEffect(function () {
+        setGuid((0, helper_functions_1.CreateGuid)());
+    }, []);
+    // Effect to validate the current value against the available options.
+    React.useEffect(function () {
+        var _a;
+        var currentValue = GetRecordValue();
+        if (!((_a = props.EmptyOption) !== null && _a !== void 0 ? _a : false) && props.Options.length > 0 && props.Options.findIndex(function (option) { return option.Value === currentValue; }) === -1) {
+            SetRecord(props.Options[0].Value);
+            // tslint:disable-next-line
+            console.warn("The current value is not available as an option. Specify EmptyOption=true if the value should be allowed.");
+        }
+    }, [props.Options]);
+    // Update the parent component's state with the new value.
+    function SetRecord(value) {
+        var record = __assign({}, props.Record);
+        if (value !== '')
+            record[props.Field] = value;
+        else
+            record[props.Field] = null;
+        props.Setter(record);
+    }
+    // Rretrieve the current value of the select field from the record.
+    function GetRecordValue() {
+        return props.Record[props.Field] == null ? '' : props.Record[props.Field].toString();
+    }
+    return (React.createElement("div", { className: "form-group" },
+        (props.Label !== "") ?
+            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 ?
+            React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
+            : null,
+        React.createElement("select", { "data-help": guid, className: "form-control", onChange: function (evt) { return SetRecord(evt.target.value); }, value: GetRecordValue(), disabled: props.Disabled == null ? false : props.Disabled },
+            ((_a = props.EmptyOption) !== null && _a !== void 0 ? _a : false) ? React.createElement("option", { value: "" }, props.EmptyLabel !== undefined ? props.EmptyLabel : '') : null,
+            props.Options.map(function (a, i) { return (React.createElement("option", { key: i, value: a.Value }, a.Label)); }))));
+}

package/lib/StylableSelect.d.ts

@@ -1,17 +1,53 @@
-import * as React from 'react';
-export interface IOption {
-    Value: any;
-    Element: React.ReactElement<any>;
-}
-interface IProps<T> {
-    Record: T;
-    Field: keyof T;
-    Setter: (record: T) => void;
-    Options: IOption[];
-    Label?: string;
-    Disabled?: boolean;
-    Help?: string | JSX.Element;
-    Style?: React.CSSProperties;
-}
-export default function StylableSelect<T>(props: IProps<T>): JSX.Element;
-export {};
+import * as React from 'react';
+export interface IOption {
+    Value: any;
+    Element: React.ReactElement<any>;
+}
+interface IProps<T> {
+    /**
+      * Record to be used in form
+      * @type {T}
+    */
+    Record: T;
+    /**
+      * Field of the record to be edited
+      * @type {keyof T}
+    */
+    Field: keyof T;
+    /**
+      * Setter function to update the Record
+      * @param record - Updated Record
+    */
+    Setter: (record: T) => void;
+    /**
+    * Options for the select dropdown
+    * @type {{  Value: any, Element: React.ReactElement<any> }[]}
+  */
+    Options: IOption[];
+    /**
+      * Label to display for the form, defaults to the Field prop
+      * @type {string}
+      * @optional
+    */
+    Label?: string;
+    /**
+      * Flag to disable the input field
+      * @type {boolean}
+      * @optional
+    */
+    Disabled?: boolean;
+    /**
+      * Help message or element to display
+      * @type {string | JSX.Element}
+      * @optional
+    */
+    Help?: string | JSX.Element;
+    /**
+      * CSS styles to apply to the selected value
+      * @type {React.CSSProperties}
+      * @optional
+    */
+    Style?: React.CSSProperties;
+}
+export default function StylableSelect<T>(props: IProps<T>): JSX.Element;
+export {};

package/lib/StylableSelect.js

@@ -1,100 +1,106 @@
-"use strict";
-// ******************************************************************************************************
-//  StylableSelect.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:
-//  ----------------------------------------------------------------------------------------------------
-//  10/14/2022 - Gabriel Santos
-//       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 HelperMessage_1 = require("./HelperMessage");
-var helper_functions_1 = require("@gpa-gemstone/helper-functions");
-function StylableSelect(props) {
-    var _a = React.useState(false), show = _a[0], setShow = _a[1];
-    var _b = React.useState(props.Options[0].Element), selected = _b[0], setSelected = _b[1];
-    var _c = React.useState(""), guid = _c[0], setGuid = _c[1];
-    var _d = React.useState(false), showHelp = _d[0], setShowHelp = _d[1];
-    var stylableSelect = React.useRef(null);
-    function HandleShow(evt) {
-        // Ignore if disabled or not a mousedown event
-        if ((props.Disabled === undefined ? false : props.Disabled) || evt.type !== 'mousedown')
-            return;
-        if (!stylableSelect.current.contains(evt.target))
-            setShow(false);
-        else
-            setShow(!show);
-    }
-    function SetRecord(selectedOption) {
-        setSelected(selectedOption.Element);
-        var record = __assign({}, props.Record);
-        if (selectedOption.Value !== '')
-            record[props.Field] = selectedOption.Value;
-        else
-            record[props.Field] = null;
-        props.Setter(record);
-    }
-    React.useEffect(function () {
-        setGuid((0, helper_functions_1.CreateGuid)());
-        document.addEventListener('mousedown', HandleShow, false);
-        return function () {
-            document.removeEventListener('mousedown', HandleShow, false);
-        };
-    }, []);
-    React.useEffect(function () {
-        var element = props.Options.find(function (e) { return e.Value === props.Record[props.Field]; });
-        setSelected(element !== undefined ? element.Element : React.createElement("div", null));
-    }, [props.Record, props.Options]);
-    return (React.createElement("div", { ref: stylableSelect, style: { position: 'relative', display: 'inline-block', width: 'inherit' } },
-        (props.Label !== "") ?
-            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 ?
-            React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
-            : null,
-        React.createElement("button", { type: "button", style: { border: '1px solid #ced4da', padding: '.375rem .75rem', fontSize: '1rem', borderRadius: '.25rem' }, "data-help": guid, className: "btn form-control dropdown-toggle", onClick: HandleShow, disabled: props.Disabled === undefined ? false : props.Disabled },
-            React.createElement("div", { style: props.Style }, 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, props.Options.map(function (f, i) { return (f.Value == props.Record[props.Field] ? null :
-                    React.createElement("tr", { key: i, onClick: function (evt) { evt.preventDefault(); SetRecord(f); setShow(false); } },
-                        React.createElement("td", null, f.Element))); }))))));
-}
-exports.default = StylableSelect;
+"use strict";
+// ******************************************************************************************************
+//  StylableSelect.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:
+//  ----------------------------------------------------------------------------------------------------
+//  10/14/2022 - Gabriel Santos
+//       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 = StylableSelect;
+var React = require("react");
+var HelperMessage_1 = require("./HelperMessage");
+var helper_functions_1 = require("@gpa-gemstone/helper-functions");
+var lodash_1 = require("lodash");
+function StylableSelect(props) {
+    // State hooks and ref for managing component state and interactions.
+    var _a = React.useState(false), show = _a[0], setShow = _a[1];
+    var _b = React.useState(props.Options[0].Element), selected = _b[0], setSelected = _b[1];
+    var _c = React.useState(""), guid = _c[0], setGuid = _c[1];
+    var _d = React.useState(false), showHelp = _d[0], setShowHelp = _d[1];
+    var stylableSelect = React.useRef(null);
+    // Handle showing and hiding of the dropdown.
+    function HandleShow(evt) {
+        // Ignore if disabled or not a mousedown event
+        if ((props.Disabled === undefined ? false : props.Disabled) || evt.type !== 'mousedown')
+            return;
+        if (!stylableSelect.current.contains(evt.target))
+            setShow(false);
+        else
+            setShow(!show);
+    }
+    // Update the parent component's state with the selected option.
+    function SetRecord(selectedOption) {
+        setSelected(selectedOption.Element);
+        var record = __assign({}, props.Record);
+        if (selectedOption.Value !== '')
+            record[props.Field] = selectedOption.Value;
+        else
+            record[props.Field] = null;
+        props.Setter(record);
+    }
+    // Effect for initial setup and event listeners.
+    React.useEffect(function () {
+        setGuid((0, helper_functions_1.CreateGuid)());
+        document.addEventListener('mousedown', HandleShow, false);
+        return function () {
+            document.removeEventListener('mousedown', HandleShow, false);
+        };
+    }, []);
+    // Effect to handle changes to the record's field value.
+    React.useEffect(function () {
+        var element = props.Options.find(function (e) { return (0, lodash_1.isEqual)(e.Value, props.Record[props.Field]); });
+        setSelected(element !== undefined ? element.Element : React.createElement("div", null));
+    }, [props.Record, props.Options]);
+    return (React.createElement("div", { ref: stylableSelect, style: { position: 'absolute', display: 'inline-block', width: 'inherit' } },
+        (props.Label !== "") ?
+            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 ?
+            React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
+            : null,
+        React.createElement("button", { type: "button", style: { border: '1px solid #ced4da', padding: '.375rem .75rem', fontSize: '1rem', borderRadius: '.25rem' }, "data-help": guid, className: "btn form-control dropdown-toggle", onClick: HandleShow, disabled: props.Disabled === undefined ? false : props.Disabled },
+            React.createElement("div", { style: props.Style }, 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, props.Options.map(function (f, i) { return (f.Value == props.Record[props.Field] ? null :
+                    React.createElement("tr", { key: i, onClick: function (evt) { evt.preventDefault(); SetRecord(f); setShow(false); } },
+                        React.createElement("td", null, f.Element))); }))))));
+}

package/lib/TextArea.d.ts

@@ -1,14 +1,54 @@
-/// <reference types="react" />
-interface IProps<T> {
-    Rows: number;
-    Record: T;
-    Field: keyof T;
-    Setter: (record: T) => void;
-    Valid: (field: keyof T) => boolean;
-    Label?: string;
-    Feedback?: string;
-    Disabled?: boolean;
-    Help?: string | JSX.Element;
-}
-export default function TextArea<T>(props: IProps<T>): JSX.Element;
-export {};
+interface IProps<T> {
+    /**
+      * Number of rows for the textarea
+      * @type {number}
+    */
+    Rows: number;
+    /**
+      * Record to be used in the form
+      * @type {T}
+    */
+    Record: T;
+    /**
+      * Field of the record to be edited
+      * @type {keyof T}
+    */
+    Field: keyof T;
+    /**
+      * Setter function to update the Record
+      * @param record - Updated Record
+    */
+    Setter: (record: T) => void;
+    /**
+      * Function to determine the validity of a field
+      * @param field - Field of the record to check
+      * @returns {boolean}
+    */
+    Valid: (field: keyof T) => boolean;
+    /**
+      * Label to display for the form, defaults to the Field prop
+      * @type {string}
+      * @optional
+    */
+    Label?: string;
+    /**
+      * Feedback message to show when input is invalid
+      * @type {string}
+      * @optional
+    */
+    Feedback?: string;
+    /**
+      * Flag to disable the input field
+      * @type {boolean}
+      * @optional
+    */
+    Disabled?: boolean;
+    /**
+      * Help message or element to display
+      * @type {string | JSX.Element}
+      * @optional
+    */
+    Help?: string | JSX.Element;
+}
+export default function TextArea<T>(props: IProps<T>): JSX.Element;
+export {};