@gpa-gemstone/react-forms 1.1.58 → 1.1.59

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/lib/ColorPicker.d.ts +10 -6
  2. package/lib/ColorPicker.js +69 -63
  3. package/lib/ToggleSwitch.d.ts +2 -1
  4. package/lib/ToggleSwitch.js +1 -1
  5. package/package.json +3 -1
package/lib/ColorPicker.d.ts CHANGED
@@ -1,11 +1,15 @@
1
1
  import * as React from 'react';
2
2
  import { ColorResult } from 'react-color';
3
- interface IProps {
4
- CurrentColor: string;
3
+ interface IProps<T> {
4
+ Record: T;
5
+ Field: keyof T;
6
+ Setter: (record: T, color: ColorResult) => void;
7
+ Label: string;
8
+ Disabled?: boolean;
9
+ Feedback?: string;
10
+ Style?: React.CSSProperties;
5
11
  Colors?: string[];
6
- OnColorChange: (updatedColor: ColorResult) => void;
7
12
  Triangle?: ('hide' | 'top');
8
- BtnText?: string;
9
13
  }
10
- declare const ColorPicker: React.FunctionComponent<IProps>;
11
- export default ColorPicker;
14
+ export default function ColorPicker<T>(props: IProps<T>): JSX.Element;
15
+ export {};
package/lib/ColorPicker.js CHANGED
@@ -25,84 +25,90 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
25
25
  if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
26
26
  return cooked;
27
27
  };
28
+ var __assign = (this && this.__assign) || function () {
29
+ __assign = Object.assign || function(t) {
30
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
31
+ s = arguments[i];
32
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
33
+ t[p] = s[p];
34
+ }
35
+ return t;
36
+ };
37
+ return __assign.apply(this, arguments);
38
+ };
28
39
  Object.defineProperty(exports, "__esModule", { value: true });
29
40
  var React = require("react");
30
41
  var react_color_1 = require("react-color");
31
42
  var styled_components_1 = require("styled-components");
32
43
  var helper_functions_1 = require("@gpa-gemstone/helper-functions");
33
44
  var react_portal_1 = require("react-portal");
45
+ var lodash_1 = require("lodash");
34
46
  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"; });
35
- var ColorPicker = function (props) {
36
- var _a, _b, _c;
37
- var toolTip = React.useRef(null);
38
- var _d = React.useState(0), top = _d[0], setTop = _d[1];
39
- var _e = React.useState(0), left = _e[0], setLeft = _e[1];
40
- var _f = React.useState(0), targetLeft = _f[0], setTargetLeft = _f[1];
41
- var _g = React.useState(0), targetTop = _g[0], setTargetTop = _g[1];
42
- var _h = React.useState(0), targetWidth = _h[0], setTargetWidth = _h[1];
43
- var _j = React.useState(0), targetHeight = _j[0], setTargetHeight = _j[1];
47
+ function ColorPicker(props) {
48
+ var _a, _b, _c, _d, _e, _f;
49
+ var toolTipRef = React.useRef(null);
50
+ var buttonRef = React.useRef(null);
51
+ var _g = React.useState(0), top = _g[0], setTop = _g[1];
52
+ var _h = React.useState(0), left = _h[0], setLeft = _h[1];
53
+ var _j = React.useState({ Top: -999, Left: -999, Width: 0, Height: 0 }), targetPosition = _j[0], setTargetPosition = _j[1];
44
54
  var _k = React.useState(false), show = _k[0], setShow = _k[1];
45
- var colorsArray = (_a = props.Colors) !== null && _a !== void 0 ? _a : ["#A30000", "#0029A3", "#007A29", "#d3d3d3", "#edc240",
55
+ var colors = (_a = props.Colors) !== null && _a !== void 0 ? _a : ["#A30000", "#0029A3", "#007A29", "#d3d3d3", "#edc240",
46
56
  "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed", "#BD9B33", "#EE2E2F",
47
57
  "#008C48", "#185AA9", "#F47D23", "#662C91", "#A21D21", "#B43894",
48
58
  "#737373", "#ff904f", "#ff9999"];
49
- React.useEffect(function () {
50
- var target = document.querySelectorAll("[data-tooltip" + "=\"color-picker\"" + "]");
51
- if (target.length === 0) {
52
- setTargetHeight(0);
53
- setTargetWidth(0);
54
- setTargetLeft(-999);
55
- setTargetTop(-999);
56
- }
57
- else {
58
- var targetLocation = (0, helper_functions_1.GetNodeSize)(target[0]);
59
- setTargetHeight(targetLocation.height);
60
- setTargetWidth(targetLocation.width);
61
- setTargetLeft(targetLocation.left);
62
- setTargetTop(targetLocation.top);
63
- }
64
- }, []);
65
59
  React.useLayoutEffect(function () {
66
- var _a = UpdatePosition(), t = _a[0], l = _a[1];
67
- setTop(t);
68
- setLeft(l);
60
+ if (buttonRef.current === null)
61
+ return;
62
+ var targetLocation = (0, helper_functions_1.GetNodeSize)(buttonRef.current);
63
+ var newTargetPosition = { Top: targetLocation.top, Left: targetLocation.left, Height: targetLocation.height, Width: targetLocation.width };
64
+ if (!(0, lodash_1.isEqual)(newTargetPosition, targetPosition)) {
65
+ setTargetPosition(newTargetPosition);
66
+ var _a = GetBestPosition(toolTipRef, targetLocation.top, targetLocation.height, targetLocation.left, targetLocation.width), t = _a[0], l = _a[1];
67
+ setTop(t);
68
+ setLeft(l);
69
+ }
69
70
  });
70
- function UpdatePosition() {
71
- if (toolTip.current === null)
72
- return [-999, -999];
73
- var colorPickerHeight = 280;
74
- var colorPickerWidth = 180;
75
- var tipLocation = (0, helper_functions_1.GetNodeSize)(toolTip.current);
76
- var windowHeight = window.innerHeight;
77
- var windowWidth = window.innerWidth;
78
- var result = [0, 0];
79
- //start by placing at the bottom of the button and rotating counter clockwise until there is enough space to fit the colorpicker
80
- result[0] = targetTop + targetHeight;
81
- result[1] = targetLeft + 0.5 * targetWidth - 0.5 * tipLocation.width;
82
- //try to place colorpicker to the right of the button if there isnt enough room below
83
- if (windowHeight - result[0] < colorPickerHeight) {
84
- result[0] = targetTop + 0.5 * targetHeight - 0.5 * tipLocation.height;
85
- result[1] = targetLeft + targetWidth;
86
- //try to place colorpicker on the top of the button if there isnt enough room to the right
87
- if (windowWidth - result[1] < colorPickerWidth) {
88
- result[0] = targetTop - tipLocation.height;
89
- result[1] = targetLeft + 0.5 * targetWidth - 0.5 * tipLocation.width;
90
- //move colorpicker to the left of the button if there isnt enough space on the top
91
- if (result[0] < 0) {
92
- result[0] = targetTop + 0.5 * targetHeight - 0.5 * tipLocation.height;
93
- result[1] = targetLeft - tipLocation.width;
94
- }
71
+ return (React.createElement(React.Fragment, null,
72
+ 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 : ""),
73
+ props.Feedback !== undefined && ((_d = props.Disabled) !== null && _d !== void 0 ? _d : false) ?
74
+ React.createElement("div", { className: "text-danger" }, props.Feedback) : null,
75
+ React.createElement(react_portal_1.Portal, null, !((_e = props.Disabled) !== null && _e !== void 0 ? _e : false) ?
76
+ 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); } },
77
+ React.createElement(react_color_1.BlockPicker, { color: props.Record[props.Field], colors: colors, onChangeComplete: function (updatedColor) {
78
+ var record = __assign({}, props.Record);
79
+ record[props.Field] = updatedColor.hex;
80
+ props.Setter(record, updatedColor);
81
+ }, triangle: (_f = props.Triangle) !== null && _f !== void 0 ? _f : 'hide' }))
82
+ : React.createElement(React.Fragment, null))));
83
+ }
84
+ exports.default = ColorPicker;
85
+ var GetBestPosition = function (ref, targetTop, targetHeight, targetLeft, targetWidth) {
86
+ if (ref.current === null)
87
+ return [-999, -999];
88
+ var colorPickerHeight = 280;
89
+ var colorPickerWidth = 180;
90
+ var tipLocation = (0, helper_functions_1.GetNodeSize)(ref.current);
91
+ var windowHeight = window.innerHeight;
92
+ var windowWidth = window.innerWidth;
93
+ var result = [0, 0];
94
+ //start by placing at the bottom of the button and rotating counter clockwise until there is enough space to fit the colorpicker
95
+ result[0] = targetTop + targetHeight;
96
+ result[1] = targetLeft + 0.5 * targetWidth - 0.5 * tipLocation.width;
97
+ //try to place colorpicker to the right of the button if there isnt enough room below
98
+ if (windowHeight - result[0] < colorPickerHeight) {
99
+ result[0] = targetTop + 0.5 * targetHeight - 0.5 * tipLocation.height;
100
+ result[1] = targetLeft + targetWidth;
101
+ //try to place colorpicker on the top of the button if there isnt enough room to the right
102
+ if (windowWidth - result[1] < colorPickerWidth) {
103
+ result[0] = targetTop - tipLocation.height;
104
+ result[1] = targetLeft + 0.5 * targetWidth - 0.5 * tipLocation.width;
105
+ //move colorpicker to the left of the button if there isnt enough space on the top
106
+ if (result[0] < 0) {
107
+ result[0] = targetTop + 0.5 * targetHeight - 0.5 * tipLocation.height;
108
+ result[1] = targetLeft - tipLocation.width;
95
109
  }
96
110
  }
97
- return result;
98
111
  }
99
- return (React.createElement(React.Fragment, null,
100
- 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"),
101
- React.createElement(react_portal_1.Portal, null,
102
- React.createElement(WrapperDiv, { Show: show, Top: top, Left: left, ref: toolTip, onMouseOver: function () { return setShow(true); }, onMouseOut: function () { return setShow(false); } },
103
- React.createElement(react_color_1.BlockPicker, { color: props.CurrentColor, colors: colorsArray, onChangeComplete: function (updatedColor) {
104
- props.OnColorChange(updatedColor);
105
- }, triangle: (_c = props.Triangle) !== null && _c !== void 0 ? _c : 'hide' })))));
112
+ return result;
106
113
  };
107
- exports.default = ColorPicker;
108
114
  var templateObject_1;
package/lib/ToggleSwitch.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- /// <reference types="react" />
1
+ import * as React from 'react';
2
2
  interface IProps<T> {
3
3
  Record: T;
4
4
  Field: keyof T;
@@ -6,6 +6,7 @@ interface IProps<T> {
6
6
  Label?: string;
7
7
  Disabled?: boolean;
8
8
  Help?: string | JSX.Element;
9
+ Style?: React.CSSProperties;
9
10
  }
10
11
  export default function ToggleSwitch<T>(props: IProps<T>): JSX.Element;
11
12
  export {};
package/lib/ToggleSwitch.js CHANGED
@@ -45,7 +45,7 @@ function ToggleSwitch(props) {
45
45
  setHelpID((0, helper_functions_1.CreateGuid)());
46
46
  setSwitchID((0, helper_functions_1.CreateGuid)());
47
47
  }, []);
48
- return (React.createElement("div", { className: "custom-control custom-switch", "data-help": helpID },
48
+ return (React.createElement("div", { className: "custom-control custom-switch", "data-help": helpID, style: props.Style },
49
49
  React.createElement("input", { type: "checkbox", className: "custom-control-input", onChange: function (evt) {
50
50
  var record = __assign({}, props.Record);
51
51
  record[props.Field] = evt.target.checked;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gpa-gemstone/react-forms",
3
- "version": "1.1.58",
3
+ "version": "1.1.59",
4
4
  "description": "React Form modules for gpa webapps",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
@@ -33,6 +33,7 @@
33
33
  "homepage": "https://github.com/GridProtectionAlliance/gpa-gemstone#readme",
34
34
  "devDependencies": {
35
35
  "@types/jest": "^27.0.0",
36
+ "@types/lodash": "^4.14.171",
36
37
  "@types/react-color": "^3.0.12",
37
38
  "@types/react-portal": "4.0.4",
38
39
  "@typescript-eslint/eslint-plugin": "^5.60.0",
@@ -47,6 +48,7 @@
47
48
  "@gpa-gemstone/helper-functions": "0.0.30",
48
49
  "@types/react": "^17.0.14",
49
50
  "@types/styled-components": "^5.1.11",
51
+ "lodash": "^4.17.21",
50
52
  "moment": "2.29.4",
51
53
  "react": "^18.2.0",
52
54
  "react-color": "^2.19.3",