@gpa-gemstone/react-forms 1.1.49 → 1.1.51
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 +12 -0
- package/lib/ColorPicker.js +104 -0
- package/lib/DatePicker.js +38 -6
- package/lib/DateTimeUI/Calender.js +1 -1
- package/lib/index.d.ts +2 -1
- package/lib/index.js +3 -1
- package/package.json +4 -2
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { ColorResult } from 'react-color';
|
|
3
|
+
interface IProps {
|
|
4
|
+
Show: boolean;
|
|
5
|
+
CurrentColor: string;
|
|
6
|
+
Colors: string[];
|
|
7
|
+
OnColorChange: (updatedColor: ColorResult) => void;
|
|
8
|
+
Triangle?: ('hide' | 'top');
|
|
9
|
+
BtnText?: string;
|
|
10
|
+
}
|
|
11
|
+
declare const ColorPicker: React.FunctionComponent<IProps>;
|
|
12
|
+
export default ColorPicker;
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
//******************************************************************************************************
|
|
3
|
+
// ColorPicker.tsx - Gbtc
|
|
4
|
+
//
|
|
5
|
+
// Copyright © 2023, Grid Protection Alliance. All Rights Reserved.
|
|
6
|
+
//
|
|
7
|
+
// Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
|
|
8
|
+
// the NOTICE file distributed with this work for additional information regarding copyright ownership.
|
|
9
|
+
// The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
|
|
10
|
+
// file except in compliance with the License. You may obtain a copy of the License at:
|
|
11
|
+
//
|
|
12
|
+
// http://opensource.org/licenses/MIT
|
|
13
|
+
//
|
|
14
|
+
// Unless agreed to in writing, the subject software distributed under the License is distributed on an
|
|
15
|
+
// "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
|
|
16
|
+
// License for the specific language governing permissions and limitations.
|
|
17
|
+
//
|
|
18
|
+
// Code Modification History:
|
|
19
|
+
// ----------------------------------------------------------------------------------------------------
|
|
20
|
+
// 03/05/2024 - Preston Crawford
|
|
21
|
+
// Generated original version of source code.
|
|
22
|
+
//
|
|
23
|
+
//******************************************************************************************************
|
|
24
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
25
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
26
|
+
return cooked;
|
|
27
|
+
};
|
|
28
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
+
var React = require("react");
|
|
30
|
+
var react_color_1 = require("react-color");
|
|
31
|
+
var styled_components_1 = require("styled-components");
|
|
32
|
+
var helper_functions_1 = require("@gpa-gemstone/helper-functions");
|
|
33
|
+
var react_portal_1 = require("react-portal");
|
|
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
|
+
var ColorPicker = function (props) {
|
|
36
|
+
var toolTip = React.useRef(null);
|
|
37
|
+
var _a = React.useState(0), top = _a[0], setTop = _a[1];
|
|
38
|
+
var _b = React.useState(0), left = _b[0], setLeft = _b[1];
|
|
39
|
+
var _c = React.useState(0), targetLeft = _c[0], setTargetLeft = _c[1];
|
|
40
|
+
var _d = React.useState(0), targetTop = _d[0], setTargetTop = _d[1];
|
|
41
|
+
var _e = React.useState(0), targetWidth = _e[0], setTargetWidth = _e[1];
|
|
42
|
+
var _f = React.useState(0), targetHeight = _f[0], setTargetHeight = _f[1];
|
|
43
|
+
var _g = React.useState(props.Show), show = _g[0], setShow = _g[1];
|
|
44
|
+
React.useEffect(function () {
|
|
45
|
+
setShow(props.Show);
|
|
46
|
+
var target = document.querySelectorAll("[data-tooltip" + "=\"color-picker\"" + "]");
|
|
47
|
+
if (target.length === 0) {
|
|
48
|
+
setTargetHeight(0);
|
|
49
|
+
setTargetWidth(0);
|
|
50
|
+
setTargetLeft(-999);
|
|
51
|
+
setTargetTop(-999);
|
|
52
|
+
}
|
|
53
|
+
else {
|
|
54
|
+
var targetLocation = (0, helper_functions_1.GetNodeSize)(target[0]);
|
|
55
|
+
setTargetHeight(targetLocation.height);
|
|
56
|
+
setTargetWidth(targetLocation.width);
|
|
57
|
+
setTargetLeft(targetLocation.left);
|
|
58
|
+
setTargetTop(targetLocation.top);
|
|
59
|
+
}
|
|
60
|
+
}, [props.Show]);
|
|
61
|
+
React.useLayoutEffect(function () {
|
|
62
|
+
var _a = UpdatePosition(), t = _a[0], l = _a[1];
|
|
63
|
+
setTop(t);
|
|
64
|
+
setLeft(l);
|
|
65
|
+
});
|
|
66
|
+
function UpdatePosition() {
|
|
67
|
+
if (toolTip.current === null)
|
|
68
|
+
return [-999, -999];
|
|
69
|
+
var colorPickerHeight = 280;
|
|
70
|
+
var colorPickerWidth = 180;
|
|
71
|
+
var tipLocation = (0, helper_functions_1.GetNodeSize)(toolTip.current);
|
|
72
|
+
var windowHeight = window.innerHeight;
|
|
73
|
+
var windowWidth = window.innerWidth;
|
|
74
|
+
var result = [0, 0];
|
|
75
|
+
//start by placing at the bottom of the button and rotating counter clockwise until there is enough space to fit the colorpicker
|
|
76
|
+
result[0] = targetTop + targetHeight;
|
|
77
|
+
result[1] = targetLeft + 0.5 * targetWidth - 0.5 * tipLocation.width;
|
|
78
|
+
//try to place colorpicker to the right of the button if there isnt enough room below
|
|
79
|
+
if (windowHeight - result[0] < colorPickerHeight) {
|
|
80
|
+
result[0] = targetTop + 0.5 * targetHeight - 0.5 * tipLocation.height;
|
|
81
|
+
result[1] = targetLeft + targetWidth;
|
|
82
|
+
//try to place colorpicker on the top of the button if there isnt enough room to the right
|
|
83
|
+
if (windowWidth - result[1] < colorPickerWidth) {
|
|
84
|
+
result[0] = targetTop - tipLocation.height;
|
|
85
|
+
result[1] = targetLeft + 0.5 * targetWidth - 0.5 * tipLocation.width;
|
|
86
|
+
//move colorpicker to the left of the button if there isnt enough space on the top
|
|
87
|
+
if (result[0] < 0) {
|
|
88
|
+
result[0] = targetTop + 0.5 * targetHeight - 0.5 * tipLocation.height;
|
|
89
|
+
result[1] = targetLeft - tipLocation.width;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
return result;
|
|
94
|
+
}
|
|
95
|
+
return (React.createElement(React.Fragment, null,
|
|
96
|
+
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
|
+
React.createElement(react_portal_1.Portal, null,
|
|
98
|
+
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: props.Colors, onChangeComplete: function (updatedColor) {
|
|
100
|
+
props.OnColorChange(updatedColor);
|
|
101
|
+
}, triangle: props.Triangle ? props.Triangle : 'hide' })))));
|
|
102
|
+
};
|
|
103
|
+
exports.default = ColorPicker;
|
|
104
|
+
var templateObject_1;
|
package/lib/DatePicker.js
CHANGED
|
@@ -50,9 +50,10 @@ function DateTimePicker(props) {
|
|
|
50
50
|
// Adds a buffer between the outside props and what the box is reading to prevent box overwriting every render with a keystroke
|
|
51
51
|
var _c = React.useState(parse(props.Record).format(boxFormat)), boxRecord = _c[0], setBoxRecord = _c[1];
|
|
52
52
|
var _d = React.useState(parse(props.Record)), pickerRecord = _d[0], setPickerRecord = _d[1];
|
|
53
|
-
var _e = React.useState(
|
|
54
|
-
var _f = React.useState(
|
|
55
|
-
var _g = React.useState(0),
|
|
53
|
+
var _e = React.useState(""), feedbackMessage = _e[0], setFeedbackMessage = _e[1];
|
|
54
|
+
var _f = React.useState(false), showOverlay = _f[0], setShowOverlay = _f[1];
|
|
55
|
+
var _g = React.useState(0), top = _g[0], setTop = _g[1];
|
|
56
|
+
var _h = React.useState(0), left = _h[0], setLeft = _h[1];
|
|
56
57
|
React.useEffect(function () {
|
|
57
58
|
setGuid((0, helper_functions_1.CreateGuid)());
|
|
58
59
|
}, []);
|
|
@@ -66,7 +67,22 @@ function DateTimePicker(props) {
|
|
|
66
67
|
var _c;
|
|
67
68
|
if (!recordChange.current)
|
|
68
69
|
return;
|
|
69
|
-
var
|
|
70
|
+
var date = moment(boxRecord, boxFormat);
|
|
71
|
+
var validStartDate = moment("1753-01-01", "YYYY-MM-DD");
|
|
72
|
+
var valid = true;
|
|
73
|
+
// Invalid date format
|
|
74
|
+
if (!date.isValid()) {
|
|
75
|
+
setFeedbackMessage("Please enter a date as " + boxFormat);
|
|
76
|
+
valid = false;
|
|
77
|
+
}
|
|
78
|
+
// Date before 1753
|
|
79
|
+
else if (date.isBefore(validStartDate)) {
|
|
80
|
+
setFeedbackMessage("Date cannot be before " + validStartDate.format(boxFormat));
|
|
81
|
+
valid = false;
|
|
82
|
+
}
|
|
83
|
+
else {
|
|
84
|
+
setFeedbackMessage("");
|
|
85
|
+
}
|
|
70
86
|
if (((_c = props.AllowEmpty) !== null && _c !== void 0 ? _c : false) && boxRecord.length === 0 && !valid && props.Record !== null)
|
|
71
87
|
props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = null, _a)));
|
|
72
88
|
if (valid && parse(props.Record).format(boxFormat) !== boxRecord)
|
|
@@ -134,10 +150,26 @@ function DateTimePicker(props) {
|
|
|
134
150
|
return "YYYY-MM-DD";
|
|
135
151
|
}
|
|
136
152
|
}
|
|
153
|
+
function getFeedbackMessage() {
|
|
154
|
+
if (feedbackMessage.length != 0) {
|
|
155
|
+
return feedbackMessage;
|
|
156
|
+
}
|
|
157
|
+
else if (props.Feedback == null || props.Feedback.length == 0) {
|
|
158
|
+
return props.Field.toString();
|
|
159
|
+
}
|
|
160
|
+
else {
|
|
161
|
+
return props.Field.toString() + " is a required field.";
|
|
162
|
+
}
|
|
163
|
+
}
|
|
137
164
|
var showLabel = props.Label !== "";
|
|
138
165
|
var showHelpIcon = props.Help !== undefined;
|
|
139
166
|
var label = props.Label === undefined ? props.Field : props.Label;
|
|
140
167
|
var step = props.Accuracy === 'millisecond' ? '0.001' : (props.Accuracy === 'minute' ? '60' : '1');
|
|
168
|
+
var IsValid = function () {
|
|
169
|
+
if (feedbackMessage.length > 0)
|
|
170
|
+
return false;
|
|
171
|
+
return props.Valid(props.Field);
|
|
172
|
+
};
|
|
141
173
|
return (React.createElement("div", { className: "form-group", ref: divRef },
|
|
142
174
|
showHelpIcon || showLabel ?
|
|
143
175
|
React.createElement("label", null,
|
|
@@ -155,12 +187,12 @@ function DateTimePicker(props) {
|
|
|
155
187
|
showHelpIcon ?
|
|
156
188
|
React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
|
|
157
189
|
: null,
|
|
158
|
-
React.createElement("input", { "data-help": guid, className: "gpa-gemstone-datetime form-control" + (
|
|
190
|
+
React.createElement("input", { "data-help": guid, className: "gpa-gemstone-datetime form-control " + (IsValid() ? '' : 'is-invalid'), type: props.Type === undefined ? 'date' : props.Type, onChange: function (evt) {
|
|
159
191
|
var _a;
|
|
160
192
|
setBoxRecord((_a = evt.target.value) !== null && _a !== void 0 ? _a : "");
|
|
161
193
|
recordChange.current = true;
|
|
162
194
|
}, onFocus: function () { setShowOverlay(true); }, value: boxRecord, disabled: props.Disabled === undefined ? false : props.Disabled, onClick: function (e) { e.preventDefault(); }, step: step }),
|
|
163
|
-
React.createElement("div", { className: "invalid-feedback" },
|
|
195
|
+
React.createElement("div", { className: "invalid-feedback" }, getFeedbackMessage()),
|
|
164
196
|
React.createElement(DateTimePopup_1.default, { Setter: function (d) { setPickerRecord(d); recordChange.current = true; if (props.Type === 'date')
|
|
165
197
|
setShowOverlay(false); }, Show: showOverlay, DateTime: pickerRecord, Valid: props.Valid(props.Field), Top: top, Center: left, Type: props.Type === undefined ? 'date' : props.Type, Accuracy: props.Accuracy })));
|
|
166
198
|
}
|
|
@@ -37,7 +37,7 @@ function Calender(props) {
|
|
|
37
37
|
React.useEffect(function () {
|
|
38
38
|
var d1 = moment([year, month, 1]).startOf('week');
|
|
39
39
|
var w = [];
|
|
40
|
-
while (d1.month() <= month && d1.year() === year) {
|
|
40
|
+
while ((d1.month() <= month && d1.year() === year) || (d1.year() < year)) {
|
|
41
41
|
w.push({
|
|
42
42
|
sunday: moment(d1),
|
|
43
43
|
monday: moment(d1).add(1, 'day'),
|
package/lib/index.d.ts
CHANGED
|
@@ -11,4 +11,5 @@ import MultiCheckBoxSelect from './MutliCheckBoxSelect';
|
|
|
11
11
|
import DoubleInput from './DoubleInput';
|
|
12
12
|
import TimePicker from './TimePicker';
|
|
13
13
|
import StylableSelect from './StylableSelect';
|
|
14
|
-
|
|
14
|
+
import ColorPicker from './ColorPicker';
|
|
15
|
+
export { CheckBox, Input, DatePicker, Select, TextArea, DateRangePicker, EnumCheckBoxes, ArrayMultiSelect, ArrayCheckBoxes, MultiCheckBoxSelect, DoubleInput, TimePicker, StylableSelect, ColorPicker };
|
package/lib/index.js
CHANGED
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
//
|
|
23
23
|
// ******************************************************************************************************
|
|
24
24
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
25
|
-
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;
|
|
25
|
+
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;
|
|
26
26
|
var CheckBox_1 = require("./CheckBox");
|
|
27
27
|
exports.CheckBox = CheckBox_1.default;
|
|
28
28
|
var Input_1 = require("./Input");
|
|
@@ -49,3 +49,5 @@ var TimePicker_1 = require("./TimePicker");
|
|
|
49
49
|
exports.TimePicker = TimePicker_1.default;
|
|
50
50
|
var StylableSelect_1 = require("./StylableSelect");
|
|
51
51
|
exports.StylableSelect = StylableSelect_1.default;
|
|
52
|
+
var ColorPicker_1 = require("./ColorPicker");
|
|
53
|
+
exports.ColorPicker = ColorPicker_1.default;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gpa-gemstone/react-forms",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.51",
|
|
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/react-color": "^3.0.12",
|
|
36
37
|
"@types/react-portal": "4.0.4",
|
|
37
38
|
"@typescript-eslint/eslint-plugin": "^5.60.0",
|
|
38
39
|
"@typescript-eslint/parser": "^5.60.0",
|
|
@@ -43,11 +44,12 @@
|
|
|
43
44
|
"typescript": "4.4.4"
|
|
44
45
|
},
|
|
45
46
|
"dependencies": {
|
|
46
|
-
"@gpa-gemstone/helper-functions": "0.0.
|
|
47
|
+
"@gpa-gemstone/helper-functions": "0.0.28",
|
|
47
48
|
"@types/react": "^17.0.14",
|
|
48
49
|
"@types/styled-components": "^5.1.11",
|
|
49
50
|
"moment": "2.29.4",
|
|
50
51
|
"react": "^18.2.0",
|
|
52
|
+
"react-color": "^2.19.3",
|
|
51
53
|
"react-portal": "4.2.2",
|
|
52
54
|
"styled-components": "5.3.3"
|
|
53
55
|
},
|