@gpa-gemstone/react-forms 1.1.50 → 1.1.51

package/lib/ColorPicker.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { ColorResult } from 'react-color';
+interface IProps {
+    Show: boolean;
+    CurrentColor: string;
+    Colors: string[];
+    OnColorChange: (updatedColor: ColorResult) => void;
+    Triangle?: ('hide' | 'top');
+    BtnText?: string;
+}
+declare const ColorPicker: React.FunctionComponent<IProps>;
+export default ColorPicker;

package/lib/ColorPicker.js

@@ -0,0 +1,104 @@
+"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;
+};
+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 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 toolTip = 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), targetLeft = _c[0], setTargetLeft = _c[1];
+    var _d = React.useState(0), targetTop = _d[0], setTargetTop = _d[1];
+    var _e = React.useState(0), targetWidth = _e[0], setTargetWidth = _e[1];
+    var _f = React.useState(0), targetHeight = _f[0], setTargetHeight = _f[1];
+    var _g = React.useState(props.Show), show = _g[0], setShow = _g[1];
+    React.useEffect(function () {
+        setShow(props.Show);
+        var target = document.querySelectorAll("[data-tooltip" + "=\"color-picker\"" + "]");
+        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];
+        setTop(t);
+        setLeft(l);
+    });
+    function UpdatePosition() {
+        if (toolTip.current === null)
+            return [-999, -999];
+        var colorPickerHeight = 280;
+        var colorPickerWidth = 180;
+        var tipLocation = (0, helper_functions_1.GetNodeSize)(toolTip.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;
+    }
+    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(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: props.Colors, onChangeComplete: function (updatedColor) {
+                        props.OnColorChange(updatedColor);
+                    }, triangle: props.Triangle ? props.Triangle : 'hide' })))));
+};
+exports.default = ColorPicker;
+var templateObject_1;

package/lib/index.d.ts

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

package/lib/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/react-forms",
-  "version": "1.1.50",
+  "version": "1.1.51",
   "description": "React Form modules for gpa webapps",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -33,6 +33,7 @@
   "homepage": "https://github.com/GridProtectionAlliance/gpa-gemstone#readme",
   "devDependencies":   {
     "@types/jest": "^27.0.0",
+    "@types/react-color": "^3.0.12",
     "@types/react-portal": "4.0.4",
     "@typescript-eslint/eslint-plugin": "^5.60.0",
     "@typescript-eslint/parser": "^5.60.0",
@@ -43,11 +44,12 @@
     "typescript": "4.4.4"
   },
   "dependencies":   {
-    "@gpa-gemstone/helper-functions": "0.0.27",
+    "@gpa-gemstone/helper-functions": "0.0.28",
     "@types/react": "^17.0.14",
     "@types/styled-components": "^5.1.11",
     "moment": "2.29.4",
     "react": "^18.2.0",
+    "react-color": "^2.19.3",
     "react-portal": "4.2.2",
     "styled-components": "5.3.3"
   },