@gpa-gemstone/react-forms 1.1.43 → 1.1.45

package/lib/CheckBox.d.ts

@@ -1,10 +1,11 @@
-import * as React from 'react';
-export default class CheckBox<T> extends React.Component<{
+/// <reference types="react" />
+interface IProps<T> {
     Record: T;
     Field: keyof T;
     Setter: (record: T) => void;
     Label?: string;
     Disabled?: boolean;
-}, {}, {}> {
-    render(): JSX.Element;
+    Help?: string | JSX.Element;
 }
+export default function CheckBox<T>(props: IProps<T>): JSX.Element;
+export {};

package/lib/CheckBox.js

@@ -21,21 +21,6 @@
 //       Generated original version of source code.
 //
 // ******************************************************************************************************
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -49,21 +34,29 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
-var CheckBox = /** @class */ (function (_super) {
-    __extends(CheckBox, _super);
-    function CheckBox() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    CheckBox.prototype.render = function () {
-        var _this = this;
-        return (React.createElement("div", { className: "form-check" },
-            React.createElement("input", { type: "checkbox", className: "form-check-input", style: { zIndex: 1 }, onChange: function (evt) {
-                    var record = __assign({}, _this.props.Record);
-                    record[_this.props.Field] = evt.target.checked;
-                    _this.props.Setter(record);
-                }, value: this.props.Record[this.props.Field] ? 'on' : 'off', checked: this.props.Record[this.props.Field] ? true : false, disabled: this.props.Disabled == null ? false : this.props.Disabled }),
-            React.createElement("label", { className: "form-check-label" }, this.props.Label == null ? this.props.Field : this.props.Label)));
-    };
-    return CheckBox;
-}(React.Component));
+var helper_functions_1 = require("@gpa-gemstone/helper-functions");
+var HelperMessage_1 = require("./HelperMessage");
+function CheckBox(props) {
+    var _a = React.useState(""), guid = _a[0], setGuid = _a[1];
+    var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
+    var showHelpIcon = props.Help !== undefined;
+    var showLabel = props.Label !== "";
+    var label = props.Label === undefined ? props.Field : props.Label;
+    React.useEffect(function () {
+        setGuid((0, helper_functions_1.CreateGuid)());
+    }, []);
+    return (React.createElement("div", { className: "form-check", "data-help": guid },
+        React.createElement("input", { type: "checkbox", className: "form-check-input", style: { zIndex: 1 }, onChange: function (evt) {
+                var record = __assign({}, props.Record);
+                record[props.Field] = evt.target.checked;
+                props.Setter(record);
+            }, value: props.Record[props.Field] ? 'on' : 'off', checked: props.Record[props.Field] ? true : false, disabled: props.Disabled == null ? false : props.Disabled }),
+        React.createElement("label", { className: "form-check-label" }, props.Label == null ? props.Field : props.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,
+        showHelpIcon ?
+            React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
+            : null));
+}
 exports.default = CheckBox;

package/lib/HelperMessage.js

@@ -29,42 +29,52 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
 var styled_components_1 = require("styled-components");
 var helper_functions_1 = require("@gpa-gemstone/helper-functions");
+var react_portal_1 = require("react-portal");
 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    pointer-events: none;\n    transition: opacity 0.3s ease-out;\n    z-index: ", ";\n    opacity: ", ";\n    color: #000;\n    background: #0DCAF0;\n    top: ", ";\n    left: ", ";\n  width: ", ";\n    border: 1px solid transparent;\n  }\n  \n  ", ""], ["\n  & {\n    border-radius: 3px;\n    display: inline-block;\n    font-size: 13px;\n    padding: 8px 21px;\n    position: fixed;\n    pointer-events: none;\n    transition: opacity 0.3s ease-out;\n    z-index: ", ";\n    opacity: ", ";\n    color: #000;\n    background: #0DCAF0;\n    top: ", ";\n    left: ", ";\n  width: ", ";\n    border: 1px solid transparent;\n  }\n  \n  ", ""])), function (props) { return props.Zindex; }, function (props) { return props.Show ? "1.0" : "0"; }, function (props) { return props.Top + "px"; }, function (props) { return props.Left + "px"; }, function (props) { return props.Width + "px"; }, function (props) { return "\n    &::before {\n     border-left: 8px solid transparent;\n     border-right: 8px solid transparent;\n     border-bottom: 8px solid #0DCAF0;\n     left: 50%;\n     top: -6px;\n     margin-left: -8px;\n     content: \"\";\n     width: 0px;\n     height: 0px;\n     position: absolute\n    }\n  "; });
 var HelperMessage = function (props) {
+    var helpMessage = React.useRef(null);
     var _a = React.useState(0), top = _a[0], setTop = _a[1];
     var _b = React.useState(0), left = _b[0], setLeft = _b[1];
     var _c = React.useState(0), width = _c[0], setWidth = _c[1];
-    var _d = React.useState(""), guid = _d[0], setGuid = _d[1];
+    var _d = React.useState(0), targetLeft = _d[0], setTargetLeft = _d[1];
+    var _e = React.useState(0), targetTop = _e[0], setTargetTop = _e[1];
+    var _f = React.useState(0), targetWidth = _f[0], setTargetWidth = _f[1];
+    var _g = React.useState(0), targetHeight = _g[0], setTargetHeight = _g[1];
     React.useEffect(function () {
-        setGuid((0, helper_functions_1.CreateGuid)());
-    }, []);
+        var target = document.querySelectorAll("[data-help" + (props.Target === undefined ? '' : "=\"" + props.Target + "\"") + "]");
+        if (target.length === 0) {
+            setTargetHeight(0);
+            setTargetWidth(0);
+            setTargetLeft(-999);
+            setTargetTop(-999);
+        }
+        else {
+            var targetLocation = (0, helper_functions_1.GetNodeSize)(target[0]);
+            setTargetHeight(targetLocation.height);
+            setTargetWidth(targetLocation.width);
+            setTargetLeft(targetLocation.left);
+            setTargetTop(targetLocation.top);
+        }
+    }, [props.Show]);
     React.useLayoutEffect(function () {
         var _a = UpdatePosition(), t = _a[0], l = _a[1], w = _a[2];
-        if (t !== top)
-            setTop(t);
-        if (l !== left)
-            setLeft(l);
-        if (w !== width)
-            setWidth(w);
+        setTop(t);
+        setLeft(l);
+        setWidth(w);
     });
-    var zIndex = (props.Zindex === undefined ? 2000 : props.Zindex);
+    var zIndex = (props.Zindex === undefined ? 9999 : props.Zindex);
     function UpdatePosition() {
-        var target = document.querySelectorAll("[data-help" + (props.Target === undefined ? '' : "=\"" + props.Target + "\"") + "]");
-        if (target.length === 0)
-            return [-999, -999];
-        var targetLocation = (0, helper_functions_1.GetNodeSize)(target[0]);
-        var message = document.getElementById(guid);
-        if (message === null)
+        if (helpMessage.current === null)
             return [-999, -999];
-        var msgLocation = (0, helper_functions_1.GetNodeSize)(message);
         var offset = 5;
         var result = [0, 0, 0];
-        result[0] = targetLocation.top + targetLocation.height + offset;
-        result[1] = targetLocation.left;
-        result[2] = targetLocation.width;
+        result[0] = targetTop + targetHeight + offset;
+        result[1] = targetLeft;
+        result[2] = targetWidth;
         return result;
     }
-    return (React.createElement(WrapperDiv, { Show: props.Show, Top: top, Left: left, Width: width, id: guid, Zindex: zIndex }, props.children));
+    return (React.createElement(react_portal_1.Portal, null,
+        React.createElement(WrapperDiv, { Show: props.Show, Top: top, Left: left, Width: width, ref: helpMessage, Zindex: zIndex }, props.children)));
 };
 exports.default = HelperMessage;
 var templateObject_1;

package/lib/StylableSelect.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 interface IOption {
-    Value: string;
+    Value: any;
     Element: React.ReactElement<any>;
 }
 interface IProps<T> {

package/lib/TextArea.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export default function TextArea<T>(props: {
+interface IProps<T> {
     Rows: number;
     Record: T;
     Field: keyof T;
@@ -8,4 +8,7 @@ export default function TextArea<T>(props: {
     Label?: string;
     Feedback?: string;
     Disabled?: boolean;
-}): JSX.Element;
+    Help?: string | JSX.Element;
+}
+export default function TextArea<T>(props: IProps<T>): JSX.Element;
+export {};

package/lib/TextArea.js

@@ -31,22 +31,42 @@ Object.defineProperty(exports, "__esModule", { value: true });
 //  ----------------------------------------------------------------------------------------------------
 //  01/22/2020 - Billy Ernest
 //       Generated original version of source code.
+//  11/03/2023 - C Lackner
+//       Added internal state to avoid cursor jumping.
 //
 // ******************************************************************************************************
 var React = require("react");
+var helper_functions_1 = require("@gpa-gemstone/helper-functions");
+var HelperMessage_1 = require("./HelperMessage");
 function TextArea(props) {
-    return (React.createElement("div", { className: "form-group" },
-        (props.Label !== "") ? React.createElement("label", null,
-            props.Label === undefined ? props.Field : props.Label,
-            " ") : null,
-        React.createElement("textarea", { rows: props.Rows, className: props.Valid(props.Field) ? 'form-control' : 'form-control is-invalid', onChange: function (evt) {
-                var record = __assign({}, props.Record);
-                if (evt.target.value !== '')
-                    record[props.Field] = evt.target.value;
-                else
-                    record[props.Field] = null;
-                props.Setter(record);
-            }, value: props.Record[props.Field] == null ? '' : props.Record[props.Field].toString(), disabled: props.Disabled == null ? false : props.Disabled }),
+    var internal = React.useRef(false);
+    var guid = React.useRef((0, helper_functions_1.CreateGuid)());
+    var _a = React.useState(false), showHelp = _a[0], setShowHelp = _a[1];
+    var _b = React.useState(''), heldVal = _b[0], setHeldVal = _b[1];
+    React.useEffect(function () {
+        if (!internal.current) {
+            setHeldVal(props.Record[props.Field] == null ? '' : props.Record[props.Field].toString());
+        }
+        internal.current = false;
+    }, [props.Record[props.Field]]);
+    function valueChange(value) {
+        var _a;
+        internal.current = true;
+        props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = value !== '' ? value : null, _a)));
+        setHeldVal(value);
+    }
+    var showLabel = props.Label !== "";
+    var showHelpIcon = props.Help !== undefined;
+    var label = props.Label === undefined ? props.Field : props.Label;
+    return (React.createElement("div", { className: "form-group", "data-help": guid },
+        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.current }, props.Help)
+            : null,
+        React.createElement("textarea", { rows: props.Rows, className: props.Valid(props.Field) ? 'form-control' : 'form-control is-invalid', onChange: function (evt) { return valueChange(evt.target.value); }, value: heldVal == null ? '' : heldVal, disabled: props.Disabled == null ? false : props.Disabled }),
         React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field + ' is a required field.' : props.Feedback)));
 }
 exports.default = TextArea;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/react-forms",
-  "version": "1.1.43",
+  "version": "1.1.45",
   "description": "React Form modules for gpa webapps",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -43,7 +43,7 @@
     "typescript": "4.4.4"
   },
   "dependencies":   {
-    "@gpa-gemstone/helper-functions": "0.0.24",
+    "@gpa-gemstone/helper-functions": "0.0.26",
     "@types/react": "^17.0.14",
     "@types/styled-components": "^5.1.11",
     "moment": "2.29.4",