@gpa-gemstone/react-forms 1.1.51 → 1.1.53
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.
- package/lib/ColorPicker.d.ts +1 -2
- package/lib/ColorPicker.js +14 -10
- package/package.json +1 -1
package/lib/ColorPicker.d.ts
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { ColorResult } from 'react-color';
|
|
3
3
|
interface IProps {
|
|
4
|
-
Show: boolean;
|
|
5
4
|
CurrentColor: string;
|
|
6
|
-
Colors
|
|
5
|
+
Colors?: string[];
|
|
7
6
|
OnColorChange: (updatedColor: ColorResult) => void;
|
|
8
7
|
Triangle?: ('hide' | 'top');
|
|
9
8
|
BtnText?: string;
|
package/lib/ColorPicker.js
CHANGED
|
@@ -33,16 +33,20 @@ var helper_functions_1 = require("@gpa-gemstone/helper-functions");
|
|
|
33
33
|
var react_portal_1 = require("react-portal");
|
|
34
34
|
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
35
|
var ColorPicker = function (props) {
|
|
36
|
+
var _a;
|
|
36
37
|
var toolTip = React.useRef(null);
|
|
37
|
-
var
|
|
38
|
-
var
|
|
39
|
-
var
|
|
40
|
-
var
|
|
41
|
-
var
|
|
42
|
-
var
|
|
43
|
-
var
|
|
38
|
+
var _b = React.useState(0), top = _b[0], setTop = _b[1];
|
|
39
|
+
var _c = React.useState(0), left = _c[0], setLeft = _c[1];
|
|
40
|
+
var _d = React.useState(0), targetLeft = _d[0], setTargetLeft = _d[1];
|
|
41
|
+
var _e = React.useState(0), targetTop = _e[0], setTargetTop = _e[1];
|
|
42
|
+
var _f = React.useState(0), targetWidth = _f[0], setTargetWidth = _f[1];
|
|
43
|
+
var _g = React.useState(0), targetHeight = _g[0], setTargetHeight = _g[1];
|
|
44
|
+
var _h = React.useState(false), show = _h[0], setShow = _h[1];
|
|
45
|
+
var colorsArray = (_a = props.Colors) !== null && _a !== void 0 ? _a : ["#A30000", "#0029A3", "#007A29", "#d3d3d3", "#edc240",
|
|
46
|
+
"#afd8f8", "#cb4b4b", "#4da74d", "#9440ed", "#BD9B33", "#EE2E2F",
|
|
47
|
+
"#008C48", "#185AA9", "#F47D23", "#662C91", "#A21D21", "#B43894",
|
|
48
|
+
"#737373", "#ff904f", "#ff9999"];
|
|
44
49
|
React.useEffect(function () {
|
|
45
|
-
setShow(props.Show);
|
|
46
50
|
var target = document.querySelectorAll("[data-tooltip" + "=\"color-picker\"" + "]");
|
|
47
51
|
if (target.length === 0) {
|
|
48
52
|
setTargetHeight(0);
|
|
@@ -57,7 +61,7 @@ var ColorPicker = function (props) {
|
|
|
57
61
|
setTargetLeft(targetLocation.left);
|
|
58
62
|
setTargetTop(targetLocation.top);
|
|
59
63
|
}
|
|
60
|
-
}, [
|
|
64
|
+
}, []);
|
|
61
65
|
React.useLayoutEffect(function () {
|
|
62
66
|
var _a = UpdatePosition(), t = _a[0], l = _a[1];
|
|
63
67
|
setTop(t);
|
|
@@ -96,7 +100,7 @@ var ColorPicker = function (props) {
|
|
|
96
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 } }, props.BtnText ? props.BtnText : "Color"),
|
|
97
101
|
React.createElement(react_portal_1.Portal, null,
|
|
98
102
|
React.createElement(WrapperDiv, { Show: show, Top: top, Left: left, ref: toolTip, onMouseOver: function () { return setShow(true); }, onMouseOut: function () { return setShow(false); } },
|
|
99
|
-
React.createElement(react_color_1.BlockPicker, { color: props.CurrentColor, colors:
|
|
103
|
+
React.createElement(react_color_1.BlockPicker, { color: props.CurrentColor, colors: colorsArray, onChangeComplete: function (updatedColor) {
|
|
100
104
|
props.OnColorChange(updatedColor);
|
|
101
105
|
}, triangle: props.Triangle ? props.Triangle : 'hide' })))));
|
|
102
106
|
};
|