@gpa-gemstone/react-forms 1.1.53 → 1.1.55

package/lib/CheckBox.js

@@ -40,8 +40,6 @@ 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)());
     }, []);
@@ -50,7 +48,7 @@ function CheckBox(props) {
                 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 }),
+            }, value: props.Record[props.Field] != null ? 'on' : 'off', checked: props.Record[props.Field] != null ? 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); } }, "?")

package/lib/ColorPicker.js

@@ -33,15 +33,15 @@ 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;\n    position: fixed;\n    transition: opacity 0.3s ease-out;\n    z-index: 99999;\n    pointer-events: ", ";\n    opacity: ", ";\n    color: #fff; // Dark theme color\n    background: #222; // Dark theme background\n    top: ", ";\n    left: ", ";\n    border: 1px solid transparent;\n  }\n"], ["\n  & {\n    border-radius: 3px;\n    display: inline-block;\n    font-size: 13px;\n    padding: 8px;\n    position: fixed;\n    transition: opacity 0.3s ease-out;\n    z-index: 99999;\n    pointer-events: ", ";\n    opacity: ", ";\n    color: #fff; // Dark theme color\n    background: #222; // Dark theme background\n    top: ", ";\n    left: ", ";\n    border: 1px solid transparent;\n  }\n"])), function (props) { return props.Show ? 'auto' : 'none'; }, function (props) { return props.Show ? "0.9" : "0"; }, function (props) { return props.Top + "px"; }, function (props) { return props.Left + "px"; });
 var ColorPicker = function (props) {
-    var _a;
+    var _a, _b, _c;
     var toolTip = React.useRef(null);
-    var _b = React.useState(0), top = _b[0], setTop = _b[1];
-    var _c = React.useState(0), left = _c[0], setLeft = _c[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];
-    var _h = React.useState(false), show = _h[0], setShow = _h[1];
+    var _d = React.useState(0), top = _d[0], setTop = _d[1];
+    var _e = React.useState(0), left = _e[0], setLeft = _e[1];
+    var _f = React.useState(0), targetLeft = _f[0], setTargetLeft = _f[1];
+    var _g = React.useState(0), targetTop = _g[0], setTargetTop = _g[1];
+    var _h = React.useState(0), targetWidth = _h[0], setTargetWidth = _h[1];
+    var _j = React.useState(0), targetHeight = _j[0], setTargetHeight = _j[1];
+    var _k = React.useState(false), show = _k[0], setShow = _k[1];
     var colorsArray = (_a = props.Colors) !== null && _a !== void 0 ? _a : ["#A30000", "#0029A3", "#007A29", "#d3d3d3", "#edc240",
         "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed", "#BD9B33", "#EE2E2F",
         "#008C48", "#185AA9", "#F47D23", "#662C91", "#A21D21", "#B43894",
@@ -97,12 +97,12 @@ var ColorPicker = function (props) {
         return result;
     }
     return (React.createElement(React.Fragment, null,
-        React.createElement("button", { className: "btn btn-block", "data-tooltip": "color-picker", onMouseOver: function () { return setShow(true); }, onMouseOut: function () { return setShow(false); }, style: { backgroundColor: props.CurrentColor, borderColor: props.CurrentColor } }, props.BtnText ? props.BtnText : "Color"),
+        React.createElement("button", { className: "btn btn-block", "data-tooltip": "color-picker", onMouseOver: function () { return setShow(true); }, onMouseOut: function () { return setShow(false); }, style: { backgroundColor: props.CurrentColor, borderColor: props.CurrentColor } }, (_b = props.BtnText) !== null && _b !== void 0 ? _b : "Color"),
         React.createElement(react_portal_1.Portal, null,
             React.createElement(WrapperDiv, { Show: show, Top: top, Left: left, ref: toolTip, onMouseOver: function () { return setShow(true); }, onMouseOut: function () { return setShow(false); } },
                 React.createElement(react_color_1.BlockPicker, { color: props.CurrentColor, colors: colorsArray, onChangeComplete: function (updatedColor) {
                         props.OnColorChange(updatedColor);
-                    }, triangle: props.Triangle ? props.Triangle : 'hide' })))));
+                    }, triangle: (_c = props.Triangle) !== null && _c !== void 0 ? _c : 'hide' })))));
 };
 exports.default = ColorPicker;
 var templateObject_1;

package/lib/DatePicker.js

@@ -114,16 +114,8 @@ function DateTimePicker(props) {
             setShowOverlay(false);
     }
     function getBoxFormat(type, accuracy) {
-        var timeUnit;
-        var dateTime;
-        if (!type)
-            dateTime = 'date';
-        else
-            dateTime = type;
-        if (!accuracy)
-            timeUnit = 'second';
-        else
-            timeUnit = 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";

package/lib/SearchableSelect.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+interface IOption {
+    Value: string;
+    Label: string;
+}
+interface IProps<T> {
+    Record: T;
+    Field: keyof T;
+    Setter: (record: T) => void;
+    AllowCustom?: boolean;
+    Search: (search: string) => [promise: Promise<IOption[]>, callback?: () => void];
+    Label?: string;
+    Disabled?: boolean;
+    Help?: string | JSX.Element;
+    Style?: React.CSSProperties;
+}
+export default function SearchableSelect<T>(props: IProps<T>): JSX.Element;
+export {};

package/lib/SearchableSelect.js

@@ -0,0 +1,85 @@
+"use strict";
+// ******************************************************************************************************
+//  SearchableSelect.tsx - Gbtc
+//
+//  Copyright © 2024, 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:
+//  ----------------------------------------------------------------------------------------------------
+//  03/17/2024 - C. Lackner
+//       Generated original version of source code.
+//
+// ******************************************************************************************************
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 StylableSelect_1 = require("./StylableSelect");
+var styled_components_1 = require("styled-components");
+function SearchableSelect(props) {
+    var _a = React.useState(props.Record[props.Field].toString()), search = _a[0], setSearch = _a[1];
+    var _b = React.useState([]), results = _b[0], setResults = _b[1];
+    var _c = React.useState(false), loading = _c[0], setLoading = _c[1];
+    React.useEffect(function () {
+        setLoading(true);
+        var _a = props.Search(search), h = _a[0], c = _a[1];
+        h.then(function (d) { setResults(d.map(function (o) { return ({ Value: o.Value, Element: React.createElement("p", null, o.Label) }); })); setLoading(false); });
+        return c;
+    }, [search]);
+    var options = React.useMemo(function () {
+        var _a, _b, _c;
+        var r = [];
+        if ((_a = props.AllowCustom) !== null && _a !== void 0 ? _a : false)
+            r.push({ Value: search, Element: React.createElement("p", null, search) });
+        r.push({
+            Value: props.Record[props.Field], Element: React.createElement("div", { className: 'input-group' },
+                React.createElement("input", { type: "text", className: "form-control", value: search, onChange: function (d) { return setSearch(d.target.value); }, onBlur: (((_b = props.AllowCustom) !== null && _b !== void 0 ? _b : false) ? function () {
+                        var _a;
+                        return props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = search, _a)));
+                    } : function () { return setSearch(props.Record[props.Field].toString()); }) }),
+                React.createElement("div", { className: "input-group-append" },
+                    React.createElement("span", { className: "input-group-text" },
+                        React.createElement(Icon, null))),
+                "s")
+        });
+        r.push.apply(r, results.filter(function (f) { return f.Value !== search && f.Value !== props.Record[props.Field]; }));
+        if (!((_c = props.AllowCustom) !== null && _c !== void 0 ? _c : false))
+            r.push({ Value: 'search-' + props.Record[props.Field], Element: React.createElement("p", null, props.Record[props.Field]) });
+        return r;
+    }, [search, props.Record[props.Field], results, props.Disabled, loading]);
+    var update = React.useCallback(function (record) {
+        if (record[props.Field].toString().startsWith('search-'))
+            return;
+        props.Setter(record);
+        setSearch(record[props.Field].toString());
+    }, [props.Setter, props.Field]);
+    return React.createElement(StylableSelect_1.default, { Record: props.Record, Field: props.Field, Setter: update, Label: props.Label, Disabled: props.Disabled, Help: props.Help, Style: props.Style, Options: options });
+}
+exports.default = SearchableSelect;
+var spin = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n"], ["\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n"])));
+var Icon = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tanimation: ", " 1s linear infinite;\n\tborder: 5px solid #f3f3f3;\n\tborder-Top: 5px solid #555;\n\tborder-Radius: 50%;\n\twidth: 25px;\n\theight: 25px\n"], ["\n\tanimation: ", " 1s linear infinite;\n\tborder: 5px solid #f3f3f3;\n\tborder-Top: 5px solid #555;\n\tborder-Radius: 50%;\n\twidth: 25px;\n\theight: 25px\n"])), spin);
+var templateObject_1, templateObject_2;

package/lib/Select.js

@@ -39,8 +39,9 @@ var React = require("react");
 var HelperMessage_1 = require("./HelperMessage");
 var helper_functions_1 = require("@gpa-gemstone/helper-functions");
 function Select(props) {
-    var _a = React.useState(""), guid = _a[0], setGuid = _a[1];
-    var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
+    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)());
     }, []);
@@ -73,7 +74,7 @@ function Select(props) {
             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 },
-            props.EmptyOption ? React.createElement("option", { value: "" }, props.EmptyLabel !== undefined ? props.EmptyLabel : '') : null,
+            ((_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;

package/lib/StylableSelect.d.ts

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

package/lib/StylableSelect.js

@@ -70,7 +70,7 @@ function StylableSelect(props) {
     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.Record, props.Options]);
     return (React.createElement("div", { ref: stylableSelect, style: { position: 'relative', display: 'inline-block', width: 'inherit' } },
         (props.Label !== "") ?
             React.createElement("label", null,
@@ -93,7 +93,8 @@ function StylableSelect(props) {
                 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))); }))))));
+                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;

package/lib/index.d.ts

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

package/lib/index.js

@@ -22,7 +22,7 @@
 //
 // ******************************************************************************************************
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorPicker = 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;
+exports.SearchableSelect = exports.ColorPicker = 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");
@@ -51,3 +51,5 @@ var StylableSelect_1 = require("./StylableSelect");
 exports.StylableSelect = StylableSelect_1.default;
 var ColorPicker_1 = require("./ColorPicker");
 exports.ColorPicker = ColorPicker_1.default;
+var SearchableSelect_1 = require("./SearchableSelect");
+exports.SearchableSelect = SearchableSelect_1.default;

package/package.json

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