@gpa-gemstone/react-forms 1.1.30 → 1.1.32

package/lib/Input.js

@@ -69,7 +69,7 @@ function Input(props) {
     return (React.createElement("div", { className: "form-group" },
         (props.Label !== "") ?
             React.createElement("label", null,
-                props.Label === null ? props.Field : props.Label,
+                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)

package/lib/Select.js

@@ -47,7 +47,7 @@ function Select(props) {
     return (React.createElement("div", { className: "form-group" },
         (props.Label !== "") ?
             React.createElement("label", null,
-                props.Label === null ? props.Field : props.Label,
+                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)

package/lib/StylableSelect.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+interface IOption {
+    Value: string;
+    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 {};

package/lib/StylableSelect.js

@@ -0,0 +1,100 @@
+"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]);
+    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 (React.createElement("tr", { key: i, onClick: function (evt) { evt.preventDefault(); SetRecord(f); setShow(false); } },
+                    React.createElement("td", null, f.Element))); }))))));
+}
+exports.default = StylableSelect;
+;

package/lib/index.d.ts

@@ -10,4 +10,5 @@ import ArrayCheckBoxes from './ArrayCheckBoxes';
 import MultiCheckBoxSelect from './MutliCheckBoxSelect';
 import DoubleInput from './DoubleInput';
 import TimePicker from './TimePicker';
-export { CheckBox, Input, DatePicker, Select, TextArea, DateRangePicker, EnumCheckBoxes, ArrayMultiSelect, ArrayCheckBoxes, MultiCheckBoxSelect, DoubleInput, TimePicker };
+import StylableSelect from './StylableSelect';
+export { CheckBox, Input, DatePicker, Select, TextArea, DateRangePicker, EnumCheckBoxes, ArrayMultiSelect, ArrayCheckBoxes, MultiCheckBoxSelect, DoubleInput, TimePicker, StylableSelect };

package/lib/index.js

@@ -22,7 +22,7 @@
 //
 // ******************************************************************************************************
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimePicker = exports.DoubleInput = exports.MultiCheckBoxSelect = exports.ArrayCheckBoxes = exports.ArrayMultiSelect = exports.EnumCheckBoxes = exports.DateRangePicker = exports.TextArea = exports.Select = exports.DatePicker = exports.Input = exports.CheckBox = void 0;
+exports.StylableSelect = exports.TimePicker = exports.DoubleInput = exports.MultiCheckBoxSelect = exports.ArrayCheckBoxes = exports.ArrayMultiSelect = exports.EnumCheckBoxes = exports.DateRangePicker = exports.TextArea = exports.Select = exports.DatePicker = exports.Input = exports.CheckBox = void 0;
 var CheckBox_1 = require("./CheckBox");
 exports.CheckBox = CheckBox_1.default;
 var Input_1 = require("./Input");
@@ -47,3 +47,5 @@ var DoubleInput_1 = require("./DoubleInput");
 exports.DoubleInput = DoubleInput_1.default;
 var TimePicker_1 = require("./TimePicker");
 exports.TimePicker = TimePicker_1.default;
+var StylableSelect_1 = require("./StylableSelect");
+exports.StylableSelect = StylableSelect_1.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/react-forms",
-  "version": "1.1.30",
+  "version": "1.1.32",
   "description": "React Form modules for gpa webapps",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",