@gpa-gemstone/react-forms 1.1.59 → 1.1.61

package/lib/ColorPicker.js

@@ -1,114 +1,114 @@
-"use strict";
-//******************************************************************************************************
-//  ColorPicker.tsx - Gbtc
-//
-//  Copyright © 2023, 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/05/2024 - Preston Crawford
-//       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 react_color_1 = require("react-color");
-var styled_components_1 = require("styled-components");
-var helper_functions_1 = require("@gpa-gemstone/helper-functions");
-var react_portal_1 = require("react-portal");
-var lodash_1 = require("lodash");
-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"; });
-function ColorPicker(props) {
-    var _a, _b, _c, _d, _e, _f;
-    var toolTipRef = React.useRef(null);
-    var buttonRef = React.useRef(null);
-    var _g = React.useState(0), top = _g[0], setTop = _g[1];
-    var _h = React.useState(0), left = _h[0], setLeft = _h[1];
-    var _j = React.useState({ Top: -999, Left: -999, Width: 0, Height: 0 }), targetPosition = _j[0], setTargetPosition = _j[1];
-    var _k = React.useState(false), show = _k[0], setShow = _k[1];
-    var colors = (_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",
-        "#737373", "#ff904f", "#ff9999"];
-    React.useLayoutEffect(function () {
-        if (buttonRef.current === null)
-            return;
-        var targetLocation = (0, helper_functions_1.GetNodeSize)(buttonRef.current);
-        var newTargetPosition = { Top: targetLocation.top, Left: targetLocation.left, Height: targetLocation.height, Width: targetLocation.width };
-        if (!(0, lodash_1.isEqual)(newTargetPosition, targetPosition)) {
-            setTargetPosition(newTargetPosition);
-            var _a = GetBestPosition(toolTipRef, targetLocation.top, targetLocation.height, targetLocation.left, targetLocation.width), t = _a[0], l = _a[1];
-            setTop(t);
-            setLeft(l);
-        }
-    });
-    return (React.createElement(React.Fragment, null,
-        React.createElement("button", { disabled: (_b = props.Disabled) !== null && _b !== void 0 ? _b : false, ref: buttonRef, className: "btn btn-block", "data-tooltip": "color-picker", onMouseOver: function () { return setShow(true); }, onMouseOut: function () { return setShow(false); }, style: props.Style }, (_c = props.Label) !== null && _c !== void 0 ? _c : ""),
-        props.Feedback !== undefined && ((_d = props.Disabled) !== null && _d !== void 0 ? _d : false) ?
-            React.createElement("div", { className: "text-danger" }, props.Feedback) : null,
-        React.createElement(react_portal_1.Portal, null, !((_e = props.Disabled) !== null && _e !== void 0 ? _e : false) ?
-            React.createElement(WrapperDiv, { Show: show, Top: top, Left: left, ref: toolTipRef, onMouseOver: function () { var _a; return ((_a = props.Disabled) !== null && _a !== void 0 ? _a : false) ? {} : setShow(true); }, onMouseOut: function () { return setShow(false); } },
-                React.createElement(react_color_1.BlockPicker, { color: props.Record[props.Field], colors: colors, onChangeComplete: function (updatedColor) {
-                        var record = __assign({}, props.Record);
-                        record[props.Field] = updatedColor.hex;
-                        props.Setter(record, updatedColor);
-                    }, triangle: (_f = props.Triangle) !== null && _f !== void 0 ? _f : 'hide' }))
-            : React.createElement(React.Fragment, null))));
-}
-exports.default = ColorPicker;
-var GetBestPosition = function (ref, targetTop, targetHeight, targetLeft, targetWidth) {
-    if (ref.current === null)
-        return [-999, -999];
-    var colorPickerHeight = 280;
-    var colorPickerWidth = 180;
-    var tipLocation = (0, helper_functions_1.GetNodeSize)(ref.current);
-    var windowHeight = window.innerHeight;
-    var windowWidth = window.innerWidth;
-    var result = [0, 0];
-    //start by placing at the bottom of the button and rotating counter clockwise until there is enough space to fit the colorpicker
-    result[0] = targetTop + targetHeight;
-    result[1] = targetLeft + 0.5 * targetWidth - 0.5 * tipLocation.width;
-    //try to place colorpicker to the right of the button if there isnt enough room below
-    if (windowHeight - result[0] < colorPickerHeight) {
-        result[0] = targetTop + 0.5 * targetHeight - 0.5 * tipLocation.height;
-        result[1] = targetLeft + targetWidth;
-        //try to place colorpicker on the top of the button if there isnt enough room to the right
-        if (windowWidth - result[1] < colorPickerWidth) {
-            result[0] = targetTop - tipLocation.height;
-            result[1] = targetLeft + 0.5 * targetWidth - 0.5 * tipLocation.width;
-            //move colorpicker to the left of the button if there isnt enough space on the top
-            if (result[0] < 0) {
-                result[0] = targetTop + 0.5 * targetHeight - 0.5 * tipLocation.height;
-                result[1] = targetLeft - tipLocation.width;
-            }
-        }
-    }
-    return result;
-};
-var templateObject_1;
+"use strict";
+//******************************************************************************************************
+//  ColorPicker.tsx - Gbtc
+//
+//  Copyright © 2023, 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/05/2024 - Preston Crawford
+//       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 });
+exports.default = ColorPicker;
+var React = require("react");
+var react_color_1 = require("react-color");
+var styled_components_1 = require("styled-components");
+var helper_functions_1 = require("@gpa-gemstone/helper-functions");
+var react_portal_1 = require("react-portal");
+var lodash_1 = require("lodash");
+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 "".concat(props.Top, "px"); }, function (props) { return "".concat(props.Left, "px"); });
+function ColorPicker(props) {
+    var _a, _b, _c, _d, _e, _f;
+    var toolTipRef = React.useRef(null);
+    var buttonRef = React.useRef(null);
+    var _g = React.useState(0), top = _g[0], setTop = _g[1];
+    var _h = React.useState(0), left = _h[0], setLeft = _h[1];
+    var _j = React.useState({ Top: -999, Left: -999, Width: 0, Height: 0 }), targetPosition = _j[0], setTargetPosition = _j[1];
+    var _k = React.useState(false), show = _k[0], setShow = _k[1];
+    var colors = (_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",
+        "#737373", "#ff904f", "#ff9999"];
+    React.useLayoutEffect(function () {
+        if (buttonRef.current === null)
+            return;
+        var targetLocation = (0, helper_functions_1.GetNodeSize)(buttonRef.current);
+        var newTargetPosition = { Top: targetLocation.top, Left: targetLocation.left, Height: targetLocation.height, Width: targetLocation.width };
+        if (!(0, lodash_1.isEqual)(newTargetPosition, targetPosition)) {
+            setTargetPosition(newTargetPosition);
+            var _a = GetBestPosition(toolTipRef, targetLocation.top, targetLocation.height, targetLocation.left, targetLocation.width), t = _a[0], l = _a[1];
+            setTop(t);
+            setLeft(l);
+        }
+    });
+    return (React.createElement(React.Fragment, null,
+        React.createElement("button", { disabled: (_b = props.Disabled) !== null && _b !== void 0 ? _b : false, ref: buttonRef, className: "btn btn-block", "data-tooltip": "color-picker", onMouseOver: function () { return setShow(true); }, onMouseOut: function () { return setShow(false); }, style: props.Style }, (_c = props.Label) !== null && _c !== void 0 ? _c : ""),
+        props.Feedback !== undefined && ((_d = props.Disabled) !== null && _d !== void 0 ? _d : false) ?
+            React.createElement("div", { className: "text-danger" }, props.Feedback) : null,
+        React.createElement(react_portal_1.Portal, null, !((_e = props.Disabled) !== null && _e !== void 0 ? _e : false) ?
+            React.createElement(WrapperDiv, { Show: show, Top: top, Left: left, ref: toolTipRef, onMouseOver: function () { var _a; return ((_a = props.Disabled) !== null && _a !== void 0 ? _a : false) ? {} : setShow(true); }, onMouseOut: function () { return setShow(false); } },
+                React.createElement(react_color_1.BlockPicker, { color: props.Record[props.Field], colors: colors, onChangeComplete: function (updatedColor) {
+                        var record = __assign({}, props.Record);
+                        record[props.Field] = updatedColor.hex;
+                        props.Setter(record, updatedColor);
+                    }, triangle: (_f = props.Triangle) !== null && _f !== void 0 ? _f : 'hide' }))
+            : React.createElement(React.Fragment, null))));
+}
+var GetBestPosition = function (ref, targetTop, targetHeight, targetLeft, targetWidth) {
+    if (ref.current === null)
+        return [-999, -999];
+    var colorPickerHeight = 280;
+    var colorPickerWidth = 180;
+    var tipLocation = (0, helper_functions_1.GetNodeSize)(ref.current);
+    var windowHeight = window.innerHeight;
+    var windowWidth = window.innerWidth;
+    var result = [0, 0];
+    //start by placing at the bottom of the button and rotating counter clockwise until there is enough space to fit the colorpicker
+    result[0] = targetTop + targetHeight;
+    result[1] = targetLeft + 0.5 * targetWidth - 0.5 * tipLocation.width;
+    //try to place colorpicker to the right of the button if there isnt enough room below
+    if (windowHeight - result[0] < colorPickerHeight) {
+        result[0] = targetTop + 0.5 * targetHeight - 0.5 * tipLocation.height;
+        result[1] = targetLeft + targetWidth;
+        //try to place colorpicker on the top of the button if there isnt enough room to the right
+        if (windowWidth - result[1] < colorPickerWidth) {
+            result[0] = targetTop - tipLocation.height;
+            result[1] = targetLeft + 0.5 * targetWidth - 0.5 * tipLocation.width;
+            //move colorpicker to the left of the button if there isnt enough space on the top
+            if (result[0] < 0) {
+                result[0] = targetTop + 0.5 * targetHeight - 0.5 * tipLocation.height;
+                result[1] = targetLeft - tipLocation.width;
+            }
+        }
+    }
+    return result;
+};
+var templateObject_1;

package/lib/DatePicker.d.ts

@@ -1,21 +1,23 @@
-/// <reference types="react" />
-import * as moment from 'moment';
-import { Accuracy } from './DateTimeUI/Clock';
-export declare type TimeUnit = ('datetime-local' | 'date' | 'time');
-interface IProps<T> {
-    Record: T;
-    Field: keyof T;
-    Setter: (record: T) => void;
-    Valid: (field: keyof T) => boolean;
-    Label?: string;
-    Disabled?: boolean;
-    Feedback?: string;
-    Format?: string;
-    Type?: TimeUnit;
-    Help?: string | JSX.Element;
-    AllowEmpty?: boolean;
-    Accuracy?: Accuracy;
-    MinDate?: moment.Moment;
-}
-export default function DateTimePicker<T>(props: IProps<T>): JSX.Element;
-export {};
+import * as moment from 'moment';
+import { Accuracy } from './DateTimeUI/Clock';
+export type TimeUnit = ('datetime-local' | 'date' | 'time');
+interface IProps<T> {
+    Record: T;
+    Field: keyof T;
+    Setter: (record: T) => void;
+    Valid: (field: keyof T) => boolean;
+    Label?: string;
+    Disabled?: boolean;
+    Feedback?: string;
+    Format?: string;
+    Type?: TimeUnit;
+    Help?: string | JSX.Element;
+    AllowEmpty?: boolean;
+    Accuracy?: Accuracy;
+    MinDate?: moment.Moment;
+}
+/**
+ * Component that allows a user to pick a date or datetime.
+*/
+export default function DateTimePicker<T>(props: IProps<T>): JSX.Element;
+export {};