@gpa-gemstone/react-forms
Version:
React Form modules for gpa webapps
118 lines (117 loc) • 7.93 kB
JavaScript
;
//******************************************************************************************************
// 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: currentColor;\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: currentColor;\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", "#FF0000",
"#0066CC", "#33CC33", "#4287f5", "#edc240", "#afd8f8",
"#cb4b4b", "#4da74d", "#9440ed", "#BD9B33", "#EE2E2F",
"#008C48", "#185AA9", "#F47D23", "#662C91", "#A21D21",
"#B43894", "#737373"
];
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, { className: "popover popover-body border", 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;