@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.
Files changed (16) hide show
  1. package/lib/CheckBox.js +11 -6
  2. package/lib/ColorPicker.js +9 -6
  3. package/lib/DatePicker.js +4 -11
  4. package/lib/HelperMessage.d.ts +0 -12
  5. package/lib/HelperMessage.js +3 -6
  6. package/lib/Input.js +6 -2
  7. package/lib/InputWithButton.js +5 -2
  8. package/lib/MutliCheckBoxSelect.js +14 -16
  9. package/lib/RadioButtons.js +4 -2
  10. package/lib/SearchableSelect.js +9 -6
  11. package/lib/Select.js +6 -2
  12. package/lib/StylableSelect.js +12 -9
  13. package/lib/TextArea.js +6 -2
  14. package/lib/TimePicker.js +4 -2
  15. package/lib/ToggleSwitch.js +9 -6
  16. 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
- React.createElement("label", { className: "form-check-label" }, props.Label == null ? props.Field : props.Label),
56
- showHelpIcon ?
57
- React.createElement("div", { style: { width: 20, height: 20, borderRadius: '50%', display: 'inline-block', background: '#0D6EFD', marginLeft: 10, textAlign: 'center', fontWeight: 'bold' }, onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } }, "?")
58
- : null,
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: #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 "".concat(props.Top, "px"); }, function (props) { return "".concat(props.Left, "px"); });
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 : ["#A30000", "#0029A3", "#007A29", "#d3d3d3", "#edc240",
57
- "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed", "#BD9B33", "#EE2E2F",
58
- "#008C48", "#185AA9", "#F47D23", "#662C91", "#A21D21", "#B43894",
59
- "#737373", "#ff904f", "#ff9999"];
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", null,
204
+ React.createElement("label", { className: 'd-flex align-items-center' },
204
205
  showLabel ? label : '',
205
- showHelpIcon ? React.createElement("div", { style: {
206
- width: 20,
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 color: ", ";;\n background: ", ";\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 color: ", ";;\n background: ", ";\n top: ", ";\n left: ", ";\n width: ", ";\n border: 1px solid transparent;\n }\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) { var _a; return (_a = props.Color) !== null && _a !== void 0 ? _a : '#000'; }, function (props) { var _a; return (_a = props.Background) !== null && _a !== void 0 ? _a : '#0DCAF0'; }, function (props) { return "".concat(props.Top, "px"); }, function (props) { return "".concat(props.Left, "px"); }, function (props) { return "".concat(props.Width, "px"); }, 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, Color: props.Color, Background: props.Background, TargetLeft: targetPosition.Left, TargetWidth: targetPosition.Width, Width: targetPosition.Width }, props.children)));
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", null,
107
+ React.createElement("label", { className: 'd-flex align-items-center' },
107
108
  showLabel ? label : '',
108
- showHelpIcon ? React.createElement("div", { style: { width: 20, height: 20, borderRadius: '50%', display: 'inline-block', background: '#0D6EFD', marginLeft: 10, textAlign: 'center', fontWeight: 'bold' }, onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } }, " ? ") : null) : null,
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", null,
96
+ React.createElement("label", { className: 'd-flex align-items-center' },
96
97
  showLabel ? label : '',
97
- showHelpIcon ? React.createElement("div", { style: { width: 20, height: 20, borderRadius: '50%', display: 'inline-block', background: '#0D6EFD', marginLeft: 10, textAlign: 'center', fontWeight: 'bold' }, onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } }, " ? ") : null) : null,
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,
package/lib/MutliCheckBoxSelect.js CHANGED
@@ -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", null,
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("div", { style: { width: 20, height: 20, borderRadius: '50%', display: 'inline-block', background: '#0D6EFD', marginLeft: 10, textAlign: 'center', fontWeight: 'bold' }, onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } }, " ?")
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, Background: props.ItemTooltip === 'dark' ? "#222" : '#fff', Color: props.ItemTooltip === 'dark' ? "#fff" : '#222' },
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: { border: '1px solid #ced4da', padding: '.375rem .75rem', fontSize: '1rem', borderRadius: '.25rem' }, className: "btn form-control dropdown-toggle", onClick: HandleShow, onMouseEnter: function () { return setShowItems(true); }, onMouseLeave: function () { return setShowItems(false); } },
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
- backgroundColor: '#fff',
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-block" }, (_a = props.Label) !== null && _a !== void 0 ? _a : props.Field,
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("div", { style: { width: 20, height: 20, borderRadius: '50%', display: 'inline-block', background: '#0D6EFD', marginLeft: 10, textAlign: 'center', fontWeight: 'bold' }, onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } }, "?"),
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 _b = React.useState(((_a = props.SearchLabel) !== null && _a !== void 0 ? _a : props.Record[props.Field]).toString()), search = _b[0], setSearch = _b[1];
43
- var _c = React.useState([]), results = _c[0], setResults = _c[1];
44
- var _d = React.useState(false), loading = _d[0], setLoading = _d[1];
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) { setResults(d.map(function (o) { return ({ Value: o.Value, Element: React.createElement("p", null, o.Label) }); })); setLoading(false); });
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], results, props.Disabled, loading, props.SearchLabel]);
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", null,
84
+ React.createElement("label", { className: 'd-flex align-items-center' },
84
85
  showLabel ? label : '',
85
- showHelpIcon ? React.createElement("div", { style: { width: 20, height: 20, borderRadius: '50%', display: 'inline-block', background: '#0D6EFD', marginLeft: 10, textAlign: 'center', fontWeight: 'bold' }, onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } }, " ? ") : null) : null,
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
- function HandleShow(evt) {
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", null,
122
+ React.createElement("label", { className: 'd-flex align-items-center' },
122
123
  props.Label === undefined ? props.Field : props.Label,
123
- props.Help !== undefined ? React.createElement("div", { style: { width: 20, height: 20, borderRadius: '50%', display: 'inline-block', background: '#0D6EFD', marginLeft: 10, textAlign: 'center', fontWeight: 'bold' }, onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } }, " ? ") : null) : null,
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", null,
69
+ React.createElement("label", { className: 'd-flex align-items-center' },
69
70
  showLabel ? label : '',
70
- showHelpIcon ? React.createElement("div", { style: { width: 20, height: 20, borderRadius: '50%', display: 'inline-block', background: '#0D6EFD', marginLeft: 10, textAlign: 'center', fontWeight: 'bold' }, onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } }, " ? ") : null) : null,
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", null, (_a = props.Label) !== null && _a !== void 0 ? _a : props.Field,
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("div", { style: { width: 20, height: 20, borderRadius: '50%', display: 'inline-block', background: '#0D6EFD', marginLeft: 10, textAlign: 'center', fontWeight: 'bold' }, onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } }, " ? ") : React.createElement(React.Fragment, null))
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 }, props.Label == null ? props.Field : props.Label),
52
- showHelpIcon ?
53
- React.createElement(React.Fragment, null,
54
- React.createElement("div", { style: { width: 20, height: 20, borderRadius: '50%', display: 'inline-block', background: '#0D6EFD', marginLeft: 10, textAlign: 'center', fontWeight: 'bold' }, onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } }, "?"),
55
- React.createElement(HelperMessage_1.default, { Show: showHelp, Target: helpID.current, Zindex: 9999 }, props.Help))
56
- : null));
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.75",
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.43",
50
- "@gpa-gemstone/helper-functions": "0.0.35",
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",