@gpa-gemstone/react-forms 1.1.75 → 1.1.77
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/CheckBox.js +11 -6
- package/lib/ColorPicker.js +9 -6
- package/lib/DatePicker.js +4 -11
- package/lib/HelperMessage.d.ts +0 -12
- package/lib/HelperMessage.js +3 -6
- package/lib/Input.js +6 -2
- package/lib/InputWithButton.js +5 -2
- package/lib/MutliCheckBoxSelect.js +14 -16
- package/lib/RadioButtons.js +4 -2
- package/lib/SearchableSelect.js +9 -6
- package/lib/Select.js +6 -2
- package/lib/StylableSelect.js +12 -9
- package/lib/TextArea.js +6 -2
- package/lib/TimePicker.js +4 -2
- package/lib/ToggleSwitch.js +9 -6
- package/package.json +3 -3
package/lib/CheckBox.js
CHANGED
|
@@ -37,25 +37,30 @@ exports.default = CheckBox;
|
|
|
37
37
|
var React = require("react");
|
|
38
38
|
var helper_functions_1 = require("@gpa-gemstone/helper-functions");
|
|
39
39
|
var HelperMessage_1 = require("./HelperMessage");
|
|
40
|
+
var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
|
|
40
41
|
function CheckBox(props) {
|
|
41
42
|
var _a = React.useState(""), guid = _a[0], setGuid = _a[1];
|
|
42
43
|
var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
|
|
43
|
-
// Determines whether to show help icon and label.
|
|
44
|
-
var showHelpIcon = props.Help !== undefined;
|
|
45
44
|
// Runs once, setting a unique GUID for each checkbox instance.
|
|
46
45
|
React.useEffect(function () {
|
|
47
46
|
setGuid((0, helper_functions_1.CreateGuid)());
|
|
48
47
|
}, []);
|
|
48
|
+
var showLabel = props.Label !== "";
|
|
49
|
+
var showHelpIcon = props.Help !== undefined;
|
|
50
|
+
var label = props.Label === undefined ? props.Field : props.Label;
|
|
49
51
|
return (React.createElement("div", { className: "form-check", "data-help": guid },
|
|
50
52
|
React.createElement("input", { type: "checkbox", className: "form-check-input", style: { zIndex: 1 }, onChange: function (evt) {
|
|
51
53
|
var record = __assign({}, props.Record);
|
|
52
54
|
record[props.Field] = evt.target.checked;
|
|
53
55
|
props.Setter(record);
|
|
54
56
|
}, value: props.Record[props.Field] ? 'on' : 'off', checked: props.Record[props.Field], disabled: props.Disabled == null ? false : props.Disabled }),
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
57
|
+
showHelpIcon || showLabel ?
|
|
58
|
+
React.createElement("label", { className: 'form-check-label' },
|
|
59
|
+
showLabel ? label : '',
|
|
60
|
+
showHelpIcon ?
|
|
61
|
+
React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } },
|
|
62
|
+
React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: 'var(--info)', Size: 20 }))
|
|
63
|
+
: null) : null,
|
|
59
64
|
showHelpIcon ?
|
|
60
65
|
React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
|
|
61
66
|
: null));
|
package/lib/ColorPicker.js
CHANGED
|
@@ -44,7 +44,7 @@ var styled_components_1 = require("styled-components");
|
|
|
44
44
|
var helper_functions_1 = require("@gpa-gemstone/helper-functions");
|
|
45
45
|
var react_portal_1 = require("react-portal");
|
|
46
46
|
var lodash_1 = require("lodash");
|
|
47
|
-
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:
|
|
47
|
+
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"); });
|
|
48
48
|
function ColorPicker(props) {
|
|
49
49
|
var _a, _b, _c, _d, _e, _f;
|
|
50
50
|
var toolTipRef = React.useRef(null);
|
|
@@ -53,10 +53,13 @@ function ColorPicker(props) {
|
|
|
53
53
|
var _h = React.useState(0), left = _h[0], setLeft = _h[1];
|
|
54
54
|
var _j = React.useState({ Top: -999, Left: -999, Width: 0, Height: 0 }), targetPosition = _j[0], setTargetPosition = _j[1];
|
|
55
55
|
var _k = React.useState(false), show = _k[0], setShow = _k[1];
|
|
56
|
-
var colors = (_a = props.Colors) !== null && _a !== void 0 ? _a : [
|
|
57
|
-
"#
|
|
58
|
-
"#
|
|
59
|
-
"#
|
|
56
|
+
var colors = (_a = props.Colors) !== null && _a !== void 0 ? _a : [
|
|
57
|
+
"#A30000", "#0029A3", "#007A29", "#d3d3d3", "#FF0000",
|
|
58
|
+
"#0066CC", "#33CC33", "#4287f5", "#edc240", "#afd8f8",
|
|
59
|
+
"#cb4b4b", "#4da74d", "#9440ed", "#BD9B33", "#EE2E2F",
|
|
60
|
+
"#008C48", "#185AA9", "#F47D23", "#662C91", "#A21D21",
|
|
61
|
+
"#B43894", "#737373"
|
|
62
|
+
];
|
|
60
63
|
React.useLayoutEffect(function () {
|
|
61
64
|
if (buttonRef.current === null)
|
|
62
65
|
return;
|
|
@@ -74,7 +77,7 @@ function ColorPicker(props) {
|
|
|
74
77
|
props.Feedback !== undefined && ((_d = props.Disabled) !== null && _d !== void 0 ? _d : false) ?
|
|
75
78
|
React.createElement("div", { className: "text-danger" }, props.Feedback) : null,
|
|
76
79
|
React.createElement(react_portal_1.Portal, null, !((_e = props.Disabled) !== null && _e !== void 0 ? _e : false) ?
|
|
77
|
-
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); } },
|
|
80
|
+
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); } },
|
|
78
81
|
React.createElement(react_color_1.BlockPicker, { color: props.Record[props.Field], colors: colors, onChangeComplete: function (updatedColor) {
|
|
79
82
|
var record = __assign({}, props.Record);
|
|
80
83
|
record[props.Field] = updatedColor.hex;
|
package/lib/DatePicker.js
CHANGED
|
@@ -39,6 +39,7 @@ var moment = require("moment");
|
|
|
39
39
|
var DateTimePopup_1 = require("./DateTimeUI/DateTimePopup");
|
|
40
40
|
var helper_functions_1 = require("@gpa-gemstone/helper-functions");
|
|
41
41
|
var HelperMessage_1 = require("./HelperMessage");
|
|
42
|
+
var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
|
|
42
43
|
/**
|
|
43
44
|
* Component that allows a user to pick a date or datetime.
|
|
44
45
|
*/
|
|
@@ -200,18 +201,10 @@ function DateTimePicker(props) {
|
|
|
200
201
|
}
|
|
201
202
|
return (React.createElement("div", { className: "form-group", ref: divRef },
|
|
202
203
|
showHelpIcon || showLabel ?
|
|
203
|
-
React.createElement("label",
|
|
204
|
+
React.createElement("label", { className: 'd-flex align-items-center' },
|
|
204
205
|
showLabel ? label : '',
|
|
205
|
-
showHelpIcon ? React.createElement("
|
|
206
|
-
|
|
207
|
-
height: 20,
|
|
208
|
-
borderRadius: '50%',
|
|
209
|
-
display: 'inline-block',
|
|
210
|
-
background: '#0D6EFD',
|
|
211
|
-
marginLeft: 10,
|
|
212
|
-
textAlign: 'center',
|
|
213
|
-
fontWeight: 'bold'
|
|
214
|
-
}, onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } }, " ? ") : null) : null,
|
|
206
|
+
showHelpIcon ? React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } },
|
|
207
|
+
React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: 'var(--info)', Size: 20 })) : null) : null,
|
|
215
208
|
showHelpIcon ?
|
|
216
209
|
React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
|
|
217
210
|
: null,
|
package/lib/HelperMessage.d.ts
CHANGED
|
@@ -16,18 +16,6 @@ interface IProps {
|
|
|
16
16
|
* @type {number}
|
|
17
17
|
*/
|
|
18
18
|
Zindex?: number;
|
|
19
|
-
/**
|
|
20
|
-
* Text color for the helper message
|
|
21
|
-
* @type {string}
|
|
22
|
-
* @optional
|
|
23
|
-
*/
|
|
24
|
-
Color?: string;
|
|
25
|
-
/**
|
|
26
|
-
* Background color for the helper message
|
|
27
|
-
* @type {string}
|
|
28
|
-
* @optional
|
|
29
|
-
*/
|
|
30
|
-
Background?: string;
|
|
31
19
|
}
|
|
32
20
|
/**
|
|
33
21
|
* HelperMessage Component.
|
package/lib/HelperMessage.js
CHANGED
|
@@ -32,15 +32,12 @@ var helper_functions_1 = require("@gpa-gemstone/helper-functions");
|
|
|
32
32
|
var react_portal_1 = require("react-portal");
|
|
33
33
|
var lodash_1 = require("lodash");
|
|
34
34
|
// Styled component for the wrapper of the helper message.
|
|
35
|
-
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 21px;\n position: fixed;\n pointer-events: none;\n transition: opacity 0.3s ease-out;\n z-index: ", ";\n opacity: ", ";\n
|
|
35
|
+
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 21px;\n position: fixed;\n pointer-events: none;\n transition: opacity 0.3s ease-out;\n z-index: ", ";\n opacity: ", ";\n top: ", ";\n left: ", ";\n width: ", ";\n border: 1px solid transparent;\n }\n ", ""], ["\n & {\n border-radius: 3px;\n display: inline-block;\n font-size: 13px;\n padding: 8px 21px;\n position: fixed;\n pointer-events: none;\n transition: opacity 0.3s ease-out;\n z-index: ", ";\n opacity: ", ";\n top: ", ";\n left: ", ";\n width: ", ";\n border: 1px solid transparent;\n }\n ", ""
|
|
36
36
|
/**
|
|
37
37
|
* HelperMessage Component.
|
|
38
38
|
* Displays a floating message box.
|
|
39
39
|
*/
|
|
40
|
-
])), function (props) { return props.Zindex; }, function (props) { return props.Show ? "1.0" : "0"; }, function (props) {
|
|
41
|
-
var _a;
|
|
42
|
-
return "\n &::before {\n border-left: 8px solid transparent;\n border-right: 8px solid transparent;\n border-bottom: 8px solid ".concat((_a = props.Background) !== null && _a !== void 0 ? _a : '#0DCAF0', ";\n left: ").concat(props.TargetLeft - props.Left + props.TargetWidth / 2, "px;\n top: -6px;\n margin-left: -8px;\n content: \"\";\n width: 0px;\n height: 0px;\n position: absolute\n }\n ");
|
|
43
|
-
});
|
|
40
|
+
])), function (props) { return props.Zindex; }, function (props) { return props.Show ? "1.0" : "0"; }, function (props) { return "".concat(props.Top, "px"); }, function (props) { return "".concat(props.Left, "px"); }, function (props) { return "".concat(props.Width, "px"); }, function (props) { return "\n &::before {\n border-left: 8px solid transparent;\n border-right: 8px solid transparent;\n border-bottom: 8px solid var(--info);\n left: ".concat(props.TargetLeft - props.Left + props.TargetWidth / 2, "px;\n top: -6px;\n margin-left: -8px;\n content: \"\";\n width: 0px;\n height: 0px;\n position: absolute\n }\n "); });
|
|
44
41
|
/**
|
|
45
42
|
* HelperMessage Component.
|
|
46
43
|
* Displays a floating message box.
|
|
@@ -71,7 +68,7 @@ var HelperMessage = function (props) {
|
|
|
71
68
|
}, [targetPosition]);
|
|
72
69
|
var zIndex = (props.Zindex === undefined ? 9999 : props.Zindex);
|
|
73
70
|
return (React.createElement(react_portal_1.Portal, null,
|
|
74
|
-
React.createElement(WrapperDiv, { Show: props.Show, Top: top, Left: left, ref: helpMessage, Zindex: zIndex,
|
|
71
|
+
React.createElement(WrapperDiv, { className: 'bg-info', Show: props.Show, Top: top, Left: left, ref: helpMessage, Zindex: zIndex, TargetLeft: targetPosition.Left, TargetWidth: targetPosition.Width, Width: targetPosition.Width }, props.children)));
|
|
75
72
|
};
|
|
76
73
|
var UpdatePosition = function (helpMessage, targetPosition) {
|
|
77
74
|
if (helpMessage.current === null)
|
package/lib/Input.js
CHANGED
|
@@ -39,6 +39,7 @@ exports.default = Input;
|
|
|
39
39
|
var React = require("react");
|
|
40
40
|
var HelperMessage_1 = require("./HelperMessage");
|
|
41
41
|
var helper_functions_1 = require("@gpa-gemstone/helper-functions");
|
|
42
|
+
var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
|
|
42
43
|
function Input(props) {
|
|
43
44
|
var internal = React.useRef(false);
|
|
44
45
|
var _a = React.useState(""), guid = _a[0], setGuid = _a[1];
|
|
@@ -103,9 +104,12 @@ function Input(props) {
|
|
|
103
104
|
var label = props.Label === undefined ? props.Field : props.Label;
|
|
104
105
|
return (React.createElement("div", { className: "form-group " + (props.Size === 'large' ? 'form-group-lg' : '') + (props.Size === 'small' ? 'form-group-sm' : ''), style: props.Style },
|
|
105
106
|
showHelpIcon || showLabel ?
|
|
106
|
-
React.createElement("label",
|
|
107
|
+
React.createElement("label", { className: 'd-flex align-items-center' },
|
|
107
108
|
showLabel ? label : '',
|
|
108
|
-
showHelpIcon ?
|
|
109
|
+
showHelpIcon ?
|
|
110
|
+
React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } },
|
|
111
|
+
React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: 'var(--info)', Size: 20 }))
|
|
112
|
+
: null) : null,
|
|
109
113
|
showHelpIcon ?
|
|
110
114
|
React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
|
|
111
115
|
: null,
|
package/lib/InputWithButton.js
CHANGED
|
@@ -36,6 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
36
36
|
var React = require("react");
|
|
37
37
|
var HelperMessage_1 = require("./HelperMessage");
|
|
38
38
|
var helper_functions_1 = require("@gpa-gemstone/helper-functions");
|
|
39
|
+
var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
|
|
39
40
|
function InputWithButton(props) {
|
|
40
41
|
var internal = React.useRef(false);
|
|
41
42
|
var _a = React.useState(""), guid = _a[0], setGuid = _a[1];
|
|
@@ -92,9 +93,11 @@ function InputWithButton(props) {
|
|
|
92
93
|
var label = props.Label === undefined ? props.Field : props.Label;
|
|
93
94
|
return (React.createElement("div", { className: "form-group " + (props.Size === 'large' ? 'form-group-lg' : '') + (props.Size === 'small' ? 'form-group-sm' : ''), style: props.InputStyle },
|
|
94
95
|
showHelpIcon || showLabel ?
|
|
95
|
-
React.createElement("label",
|
|
96
|
+
React.createElement("label", { className: 'd-flex align-items-center' },
|
|
96
97
|
showLabel ? label : '',
|
|
97
|
-
showHelpIcon ?
|
|
98
|
+
showHelpIcon ?
|
|
99
|
+
React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } },
|
|
100
|
+
React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: 'var(--info)', Size: 20 })) : null) : null,
|
|
98
101
|
showHelpIcon ?
|
|
99
102
|
React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
|
|
100
103
|
: null,
|
|
@@ -27,6 +27,7 @@ var React = require("react");
|
|
|
27
27
|
var HelperMessage_1 = require("./HelperMessage");
|
|
28
28
|
var react_portal_1 = require("react-portal");
|
|
29
29
|
var _ = require("lodash");
|
|
30
|
+
var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
|
|
30
31
|
var MultiSelect = function (props) {
|
|
31
32
|
var _a;
|
|
32
33
|
// State hooks for managing the visibility of the dropdown and help message.
|
|
@@ -93,45 +94,42 @@ var MultiSelect = function (props) {
|
|
|
93
94
|
}, []);
|
|
94
95
|
return (React.createElement("div", { className: "form-group" },
|
|
95
96
|
showLabel || showHelpIcon ?
|
|
96
|
-
React.createElement("label",
|
|
97
|
+
React.createElement("label", { className: 'd-flex align-items-center' },
|
|
97
98
|
showLabel ?
|
|
98
|
-
(props.Label === undefined ? 'Select' : props.Label)
|
|
99
|
-
: '',
|
|
99
|
+
(props.Label === undefined ? 'Select' : props.Label) : '',
|
|
100
100
|
showHelpIcon ?
|
|
101
|
-
React.createElement("
|
|
101
|
+
React.createElement("button", { className: 'btn btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } },
|
|
102
|
+
React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: 'var(--info)', Size: 20 }))
|
|
102
103
|
: null) : null,
|
|
103
104
|
showHelpIcon ?
|
|
104
105
|
React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
|
|
105
106
|
: null,
|
|
106
107
|
((_a = props.ItemTooltip) !== null && _a !== void 0 ? _a : 'no-tip') !== 'no-tip' ?
|
|
107
|
-
React.createElement(HelperMessage_1.default, { Show: showItems, Target: guid
|
|
108
|
+
React.createElement(HelperMessage_1.default, { Show: showItems, Target: guid },
|
|
108
109
|
React.createElement("p", null, "Selected Options:"),
|
|
109
110
|
selectedOptions.slice(0, 10).map(function (opt) { return React.createElement("p", null, opt.Text); }),
|
|
110
111
|
selectedOptions.length > 10 ? React.createElement("p", null, "and ".concat(selectedOptions.length - 10, " other(s)")) : null)
|
|
111
112
|
: null,
|
|
112
113
|
React.createElement("div", { ref: multiSelect, style: { position: 'relative', display: 'block', width: 'inherit' } },
|
|
113
|
-
React.createElement("button", { "data-help": guid, type: "button", style: {
|
|
114
|
-
props.Options.filter(function (x) { return x.Selected; }).length !== props.Options.length
|
|
115
|
-
? props.Options.filter(function (x) { return x.Selected; }).length
|
|
116
|
-
: 'All ',
|
|
114
|
+
React.createElement("button", { "data-help": guid, type: "button", style: { padding: '.375rem .75rem', fontSize: '1rem', color: 'currentColor', backgroundColor: 'inherit' }, className: "btn border form-control dropdown-toggle", onClick: HandleShow, onMouseEnter: function () { return setShowItems(true); }, onMouseLeave: function () { return setShowItems(false); } },
|
|
115
|
+
props.Options.filter(function (x) { return x.Selected; }).length !== props.Options.length ? props.Options.filter(function (x) { return x.Selected; }).length : 'All ',
|
|
117
116
|
' ',
|
|
118
|
-
"Selected"),
|
|
117
|
+
" Selected"),
|
|
119
118
|
React.createElement(react_portal_1.Portal, null,
|
|
120
|
-
React.createElement("div", { ref: tableContainer, style: {
|
|
119
|
+
React.createElement("div", { ref: tableContainer, className: 'popover', style: {
|
|
121
120
|
maxHeight: window.innerHeight - position.Top,
|
|
122
121
|
overflowY: 'auto',
|
|
123
122
|
padding: '10 5',
|
|
124
123
|
display: show ? 'block' : 'none',
|
|
125
124
|
position: 'absolute',
|
|
126
|
-
|
|
127
|
-
color: 'black',
|
|
128
|
-
boxShadow: '0px 8px 16px 0px rgba(0,0,0,0.2)',
|
|
125
|
+
color: 'currentColor',
|
|
129
126
|
zIndex: 9999,
|
|
130
127
|
top: "".concat(position.Top, "px"),
|
|
131
128
|
left: "".concat(position.Left, "px"),
|
|
132
|
-
width: "".concat(position.Width, "px")
|
|
129
|
+
width: "".concat(position.Width, "px"),
|
|
130
|
+
maxWidth: '100%'
|
|
133
131
|
} },
|
|
134
|
-
React.createElement("table", { className: "table", style: { margin: 0 }, ref: selectTable },
|
|
132
|
+
React.createElement("table", { className: "table table-hover", style: { margin: 0 }, ref: selectTable },
|
|
135
133
|
React.createElement("tbody", null,
|
|
136
134
|
React.createElement("tr", { onClick: function (evt) {
|
|
137
135
|
evt.preventDefault();
|
package/lib/RadioButtons.js
CHANGED
|
@@ -37,16 +37,18 @@ exports.default = RadioButtons;
|
|
|
37
37
|
var React = require("react");
|
|
38
38
|
var helper_functions_1 = require("@gpa-gemstone/helper-functions");
|
|
39
39
|
var HelperMessage_1 = require("./HelperMessage");
|
|
40
|
+
var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
|
|
40
41
|
function RadioButtons(props) {
|
|
41
42
|
var _a;
|
|
42
43
|
var guid = React.useRef((0, helper_functions_1.CreateGuid)());
|
|
43
44
|
var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
|
|
44
45
|
var showHelpIcon = props.Help !== undefined;
|
|
45
46
|
return (React.createElement("div", { className: "form-group", "data-help": guid.current },
|
|
46
|
-
React.createElement("label", { className: "form-check-label d-
|
|
47
|
+
React.createElement("label", { className: "form-check-label w-100 d-flex align-items-center" }, (_a = props.Label) !== null && _a !== void 0 ? _a : props.Field,
|
|
47
48
|
showHelpIcon ?
|
|
48
49
|
React.createElement(React.Fragment, null,
|
|
49
|
-
React.createElement("
|
|
50
|
+
React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } },
|
|
51
|
+
React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: 'var(--info)', Size: 20 })),
|
|
50
52
|
React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid.current }, props.Help))
|
|
51
53
|
: null),
|
|
52
54
|
props.Options.map(function (option, index) {
|
package/lib/SearchableSelect.js
CHANGED
|
@@ -38,14 +38,17 @@ var React = require("react");
|
|
|
38
38
|
var StylableSelect_1 = require("./StylableSelect");
|
|
39
39
|
var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
|
|
40
40
|
function SearchableSelect(props) {
|
|
41
|
-
var _a;
|
|
42
|
-
var
|
|
43
|
-
var
|
|
44
|
-
var
|
|
41
|
+
var _a, _b, _c;
|
|
42
|
+
var _d = React.useState((_c = (_b = ((_a = props.SearchLabel) !== null && _a !== void 0 ? _a : props.Record[props.Field])) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : ''), search = _d[0], setSearch = _d[1];
|
|
43
|
+
var _e = React.useState([]), results = _e[0], setResults = _e[1];
|
|
44
|
+
var _f = React.useState(false), loading = _f[0], setLoading = _f[1];
|
|
45
45
|
React.useEffect(function () {
|
|
46
46
|
setLoading(true);
|
|
47
47
|
var _a = props.Search(search), h = _a[0], c = _a[1];
|
|
48
|
-
h.then(function (d) {
|
|
48
|
+
h.then(function (d) {
|
|
49
|
+
setResults(d.map(function (o) { return ({ Value: o.Value, Element: React.createElement("p", null, o.Label) }); }));
|
|
50
|
+
setLoading(false);
|
|
51
|
+
});
|
|
49
52
|
return c;
|
|
50
53
|
}, [search]);
|
|
51
54
|
React.useEffect(function () {
|
|
@@ -74,7 +77,7 @@ function SearchableSelect(props) {
|
|
|
74
77
|
ops.push({ Value: search, Element: React.createElement("p", null, search) });
|
|
75
78
|
ops.push.apply(ops, results.filter(function (f) { return f.Value !== search && f.Value !== props.Record[props.Field]; }));
|
|
76
79
|
return ops;
|
|
77
|
-
}, [search, props.Record[props.Field],
|
|
80
|
+
}, [search, props.Record[props.Field], props.Disabled, loading, props.SearchLabel, results]);
|
|
78
81
|
var update = React.useCallback(function (record) {
|
|
79
82
|
var _a;
|
|
80
83
|
var _b, _c;
|
package/lib/Select.js
CHANGED
|
@@ -39,6 +39,7 @@ exports.default = Select;
|
|
|
39
39
|
var React = require("react");
|
|
40
40
|
var HelperMessage_1 = require("./HelperMessage");
|
|
41
41
|
var helper_functions_1 = require("@gpa-gemstone/helper-functions");
|
|
42
|
+
var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
|
|
42
43
|
function Select(props) {
|
|
43
44
|
var _a;
|
|
44
45
|
var _b = React.useState(""), guid = _b[0], setGuid = _b[1];
|
|
@@ -80,9 +81,12 @@ function Select(props) {
|
|
|
80
81
|
var label = props.Label === undefined ? props.Field : props.Label;
|
|
81
82
|
return (React.createElement("div", { className: "form-group" },
|
|
82
83
|
showHelpIcon || showLabel ?
|
|
83
|
-
React.createElement("label",
|
|
84
|
+
React.createElement("label", { className: 'd-flex align-items-center' },
|
|
84
85
|
showLabel ? label : '',
|
|
85
|
-
showHelpIcon ?
|
|
86
|
+
showHelpIcon ?
|
|
87
|
+
React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } },
|
|
88
|
+
React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: 'var(--info)', Size: 20 }))
|
|
89
|
+
: null) : null,
|
|
86
90
|
showHelpIcon ?
|
|
87
91
|
React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
|
|
88
92
|
: null,
|
package/lib/StylableSelect.js
CHANGED
|
@@ -40,6 +40,7 @@ var helper_functions_1 = require("@gpa-gemstone/helper-functions");
|
|
|
40
40
|
var lodash_1 = require("lodash");
|
|
41
41
|
var react_portal_1 = require("react-portal");
|
|
42
42
|
var _ = require("lodash");
|
|
43
|
+
var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
|
|
43
44
|
function StylableSelect(props) {
|
|
44
45
|
var _a;
|
|
45
46
|
// State hooks and ref for managing component state and interactions.
|
|
@@ -77,7 +78,7 @@ function StylableSelect(props) {
|
|
|
77
78
|
}
|
|
78
79
|
}, [show]);
|
|
79
80
|
// Handle showing and hiding of the dropdown.
|
|
80
|
-
|
|
81
|
+
var HandleShow = React.useCallback(function (evt) {
|
|
81
82
|
// Ignore if disabled or not a mousedown event
|
|
82
83
|
if ((props.Disabled === undefined ? false : props.Disabled) || evt.type !== 'mousedown' || stylableSelect.current == null)
|
|
83
84
|
return;
|
|
@@ -88,7 +89,7 @@ function StylableSelect(props) {
|
|
|
88
89
|
setShow(false);
|
|
89
90
|
else
|
|
90
91
|
setShow(!show);
|
|
91
|
-
}
|
|
92
|
+
}, [props.Disabled, show]);
|
|
92
93
|
// Update the parent component's state with the selected option.
|
|
93
94
|
function SetRecord(selectedOption) {
|
|
94
95
|
setSelected(selectedOption.Element);
|
|
@@ -106,7 +107,7 @@ function StylableSelect(props) {
|
|
|
106
107
|
return function () {
|
|
107
108
|
document.removeEventListener('mousedown', HandleShow, false);
|
|
108
109
|
};
|
|
109
|
-
}, []);
|
|
110
|
+
}, [HandleShow]);
|
|
110
111
|
// Effect to handle changes to the record's field value.
|
|
111
112
|
React.useEffect(function () {
|
|
112
113
|
var element = props.Options.find(function (e) { return (0, lodash_1.isEqual)(e.Value, props.Record[props.Field]); });
|
|
@@ -118,29 +119,31 @@ function StylableSelect(props) {
|
|
|
118
119
|
};
|
|
119
120
|
return (React.createElement("div", { ref: stylableSelect, style: { position: 'relative', display: 'inline-block', width: 'inherit' } },
|
|
120
121
|
(props.Label !== "") ?
|
|
121
|
-
React.createElement("label",
|
|
122
|
+
React.createElement("label", { className: 'd-flex align-items-center' },
|
|
122
123
|
props.Label === undefined ? props.Field : props.Label,
|
|
123
|
-
props.Help !== undefined ?
|
|
124
|
+
props.Help !== undefined ?
|
|
125
|
+
React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } },
|
|
126
|
+
React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: 'var(--info)', Size: 20 }))
|
|
127
|
+
: null) : null,
|
|
124
128
|
props.Help !== undefined ?
|
|
125
129
|
React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
|
|
126
130
|
: null,
|
|
127
131
|
React.createElement("button", { type: "button", style: __assign({ border: '1px solid #ced4da', padding: '.375rem .75rem', fontSize: '1rem', borderRadius: '.25rem' }, ((_a = props.BtnStyle) !== null && _a !== void 0 ? _a : {})), "data-help": guid, className: "btn form-control dropdown-toggle", onClick: HandleShow, disabled: props.Disabled === undefined ? false : props.Disabled },
|
|
128
132
|
React.createElement("div", { style: props.Style }, selected)),
|
|
129
133
|
React.createElement(react_portal_1.Portal, null,
|
|
130
|
-
React.createElement("div", { ref: tableContainer, style: {
|
|
134
|
+
React.createElement("div", { ref: tableContainer, className: 'popover', style: {
|
|
131
135
|
maxHeight: window.innerHeight - position.Top,
|
|
132
136
|
overflowY: 'auto',
|
|
133
137
|
padding: '10 5',
|
|
134
138
|
display: show ? 'block' : 'none',
|
|
135
139
|
position: 'absolute',
|
|
136
|
-
backgroundColor: '#fff',
|
|
137
|
-
boxShadow: '0px 8px 16px 0px rgba(0,0,0,0.2)',
|
|
138
140
|
zIndex: 9999,
|
|
139
141
|
top: "".concat(position.Top, "px"),
|
|
140
142
|
left: "".concat(position.Left, "px"),
|
|
141
143
|
width: "".concat(position.Width, "px"),
|
|
144
|
+
maxWidth: '100%'
|
|
142
145
|
} },
|
|
143
|
-
React.createElement("table", { className: "table", style: { margin: 0 }, ref: selectTable },
|
|
146
|
+
React.createElement("table", { className: "table table-hover", style: { margin: 0 }, ref: selectTable },
|
|
144
147
|
React.createElement("tbody", null, props.Options.map(function (f, i) { return (f.Value === props.Record[props.Field] ? null :
|
|
145
148
|
React.createElement("tr", { key: i, onClick: function (evt) { return handleOptionClick(evt, f); } },
|
|
146
149
|
React.createElement("td", null, f.Element))); })))))));
|
package/lib/TextArea.js
CHANGED
|
@@ -39,6 +39,7 @@ exports.default = TextArea;
|
|
|
39
39
|
var React = require("react");
|
|
40
40
|
var helper_functions_1 = require("@gpa-gemstone/helper-functions");
|
|
41
41
|
var HelperMessage_1 = require("./HelperMessage");
|
|
42
|
+
var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
|
|
42
43
|
function TextArea(props) {
|
|
43
44
|
// Internal ref and state hooks for managing the component state.
|
|
44
45
|
var internal = React.useRef(false);
|
|
@@ -65,9 +66,12 @@ function TextArea(props) {
|
|
|
65
66
|
var label = props.Label === undefined ? props.Field : props.Label;
|
|
66
67
|
return (React.createElement("div", { className: "form-group", "data-help": guid.current },
|
|
67
68
|
showHelpIcon || showLabel ?
|
|
68
|
-
React.createElement("label",
|
|
69
|
+
React.createElement("label", { className: 'd-flex align-items-center' },
|
|
69
70
|
showLabel ? label : '',
|
|
70
|
-
showHelpIcon ?
|
|
71
|
+
showHelpIcon ?
|
|
72
|
+
React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } },
|
|
73
|
+
React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: 'var(--info)', Size: 20 }))
|
|
74
|
+
: null) : null,
|
|
71
75
|
showHelpIcon ?
|
|
72
76
|
React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid.current }, props.Help)
|
|
73
77
|
: null,
|
package/lib/TimePicker.js
CHANGED
|
@@ -37,15 +37,17 @@ exports.default = DatePicker;
|
|
|
37
37
|
var React = require("react");
|
|
38
38
|
var HelperMessage_1 = require("./HelperMessage");
|
|
39
39
|
var helper_functions_1 = require("@gpa-gemstone/helper-functions");
|
|
40
|
+
var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
|
|
40
41
|
function DatePicker(props) {
|
|
41
42
|
var _a;
|
|
42
43
|
var guid = React.useRef((0, helper_functions_1.CreateGuid)());
|
|
43
44
|
var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
|
|
44
45
|
return (React.createElement("div", { className: "form-group" },
|
|
45
46
|
(props.Help != null || props.Label !== "") ?
|
|
46
|
-
React.createElement("label",
|
|
47
|
+
React.createElement("label", { className: 'd-flex align-items-center' }, (_a = props.Label) !== null && _a !== void 0 ? _a : props.Field,
|
|
47
48
|
props.Help != null ?
|
|
48
|
-
React.createElement("
|
|
49
|
+
React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } },
|
|
50
|
+
React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: 'var(--info)', Size: 20 })) : React.createElement(React.Fragment, null))
|
|
49
51
|
: React.createElement(React.Fragment, null),
|
|
50
52
|
React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid.current }, props.Help),
|
|
51
53
|
React.createElement("input", { className: 'form-control' + (props.Valid(props.Field) ? '' : ' is-invalid'), type: "time", step: props.Step === null ? 60 : props.Step, onChange: function (evt) {
|
package/lib/ToggleSwitch.js
CHANGED
|
@@ -37,6 +37,7 @@ exports.default = ToggleSwitch;
|
|
|
37
37
|
var React = require("react");
|
|
38
38
|
var helper_functions_1 = require("@gpa-gemstone/helper-functions");
|
|
39
39
|
var HelperMessage_1 = require("./HelperMessage");
|
|
40
|
+
var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
|
|
40
41
|
function ToggleSwitch(props) {
|
|
41
42
|
var helpID = React.useRef((0, helper_functions_1.CreateGuid)());
|
|
42
43
|
var switchID = React.useRef((0, helper_functions_1.CreateGuid)());
|
|
@@ -48,10 +49,12 @@ function ToggleSwitch(props) {
|
|
|
48
49
|
record[props.Field] = evt.target.checked;
|
|
49
50
|
props.Setter(record);
|
|
50
51
|
}, value: props.Record[props.Field] ? 'on' : 'off', checked: props.Record[props.Field], disabled: props.Disabled == null ? false : props.Disabled, id: switchID.current }),
|
|
51
|
-
React.createElement("label", { className: "custom-control-label", htmlFor: switchID.current },
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
React.createElement(
|
|
55
|
-
|
|
56
|
-
|
|
52
|
+
React.createElement("label", { className: "custom-control-label", htmlFor: switchID.current },
|
|
53
|
+
props.Label == null ? props.Field : props.Label,
|
|
54
|
+
showHelpIcon ?
|
|
55
|
+
React.createElement(React.Fragment, null,
|
|
56
|
+
React.createElement("button", { className: 'btn mb-1 pt-0 pb-0', onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } },
|
|
57
|
+
React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: 'var(--info)', Size: 20 })),
|
|
58
|
+
React.createElement(HelperMessage_1.default, { Show: showHelp, Target: helpID.current, Zindex: 9999 }, props.Help))
|
|
59
|
+
: null)));
|
|
57
60
|
}
|
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.77",
|
|
4
4
|
"description": "React Form modules for gpa webapps",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"types": "lib/index.d.ts",
|
|
@@ -46,8 +46,8 @@
|
|
|
46
46
|
},
|
|
47
47
|
"dependencies": {
|
|
48
48
|
"@gpa-gemstone/application-typings": "0.0.78",
|
|
49
|
-
"@gpa-gemstone/gpa-symbols": "0.0.
|
|
50
|
-
"@gpa-gemstone/helper-functions": "0.0.
|
|
49
|
+
"@gpa-gemstone/gpa-symbols": "0.0.45",
|
|
50
|
+
"@gpa-gemstone/helper-functions": "0.0.36",
|
|
51
51
|
"@types/react": "^17.0.14",
|
|
52
52
|
"@types/styled-components": "^5.1.11",
|
|
53
53
|
"lodash": "^4.17.21",
|