@gpa-gemstone/react-forms 1.1.46 → 1.1.48

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 (12) hide show
  1. package/lib/DatePicker.d.ts +5 -1
  2. package/lib/DatePicker.js +57 -15
  3. package/lib/DateTimeUI/Clock.d.ts +2 -0
  4. package/lib/DateTimeUI/Clock.js +43 -21
  5. package/lib/DateTimeUI/DateTimePopup.d.ts +4 -1
  6. package/lib/DateTimeUI/DateTimePopup.js +1 -1
  7. package/lib/HelperMessage.d.ts +2 -0
  8. package/lib/HelperMessage.js +5 -2
  9. package/lib/MutliCheckBoxSelect.d.ts +1 -0
  10. package/lib/MutliCheckBoxSelect.js +19 -8
  11. package/lib/TextArea.js +1 -1
  12. package/package.json +1 -1
package/lib/DatePicker.d.ts CHANGED
@@ -1,4 +1,6 @@
1
1
  /// <reference types="react" />
2
+ import { Accuracy } from './DateTimeUI/Clock';
3
+ export declare type TimeUnit = ('datetime-local' | 'date' | 'time');
2
4
  interface IProps<T> {
3
5
  Record: T;
4
6
  Field: keyof T;
@@ -8,8 +10,10 @@ interface IProps<T> {
8
10
  Disabled?: boolean;
9
11
  Feedback?: string;
10
12
  Format?: string;
11
- Type?: ('datetime-local' | 'date');
13
+ Type?: TimeUnit;
12
14
  Help?: string | JSX.Element;
15
+ AllowEmpty?: boolean;
16
+ Accuracy?: Accuracy;
13
17
  }
14
18
  export default function DateTimePicker<T>(props: IProps<T>): JSX.Element;
15
19
  export {};
package/lib/DatePicker.js CHANGED
@@ -39,19 +39,21 @@ var DateTimePopup_1 = require("./DateTimeUI/DateTimePopup");
39
39
  var helper_functions_1 = require("@gpa-gemstone/helper-functions");
40
40
  var HelperMessage_1 = require("./HelperMessage");
41
41
  function DateTimePicker(props) {
42
+ var _a;
42
43
  // Formats that will be used for dateBoxes
43
- var boxFormat = "YYYY-MM-DD" + (props.Type === undefined || props.Type === 'date' ? "" : "[T]HH:mm:ss");
44
+ var boxFormat = getBoxFormat(props.Type, props.Accuracy);
44
45
  var recordFormat = props.Format !== undefined ? props.Format : "YYYY-MM-DD" + (props.Type === undefined || props.Type === 'date' ? "" : "[T]HH:mm:ss.SSS[Z]");
45
46
  var parse = function (r) { return moment(props.Record[props.Field], recordFormat); };
46
47
  var divRef = React.useRef(null);
47
- var _a = React.useState(""), guid = _a[0], setGuid = _a[1];
48
- var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
48
+ var _b = React.useState(""), guid = _b[0], setGuid = _b[1];
49
+ var _c = React.useState(false), showHelp = _c[0], setShowHelp = _c[1];
49
50
  // Adds a buffer between the outside props and what the box is reading to prevent box overwriting every render with a keystroke
50
- var _c = React.useState(parse(props.Record).format(boxFormat)), boxRecord = _c[0], setBoxRecord = _c[1];
51
- var _d = React.useState(parse(props.Record)), pickerRecord = _d[0], setPickerRecord = _d[1];
52
- var _e = React.useState(false), showOverlay = _e[0], setShowOverlay = _e[1];
53
- var _f = React.useState(0), top = _f[0], setTop = _f[1];
54
- var _g = React.useState(0), left = _g[0], setLeft = _g[1];
51
+ var _d = React.useState(parse(props.Record).format(boxFormat)), boxRecord = _d[0], setBoxRecord = _d[1];
52
+ var _e = React.useState(parse(props.Record)), pickerRecord = _e[0], setPickerRecord = _e[1];
53
+ var _f = React.useState(false), showOverlay = _f[0], setShowOverlay = _f[1];
54
+ var _g = React.useState(0), top = _g[0], setTop = _g[1];
55
+ var _h = React.useState(0), left = _h[0], setLeft = _h[1];
56
+ var allowEmpty = (_a = props.AllowEmpty) !== null && _a !== void 0 ? _a : false;
55
57
  React.useEffect(function () {
56
58
  setGuid((0, helper_functions_1.CreateGuid)());
57
59
  }, []);
@@ -60,10 +62,13 @@ function DateTimePicker(props) {
60
62
  setBoxRecord(parse(props.Record).format(boxFormat));
61
63
  }, [props.Record]);
62
64
  React.useEffect(function () {
63
- var _a;
65
+ var _a, _b;
64
66
  var valid = moment(boxRecord, boxFormat).isValid();
67
+ if (allowEmpty && boxRecord.length === 0 && !valid && props.Record !== null) {
68
+ props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = null, _a)));
69
+ }
65
70
  if (valid && parse(props.Record).format(boxFormat) !== boxRecord)
66
- props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = moment(boxRecord, boxFormat).format(recordFormat), _a)));
71
+ props.Setter(__assign(__assign({}, props.Record), (_b = {}, _b[props.Field] = moment(boxRecord, boxFormat).format(recordFormat), _b)));
67
72
  }, [boxRecord]);
68
73
  React.useEffect(function () {
69
74
  var _a;
@@ -88,9 +93,47 @@ function DateTimePicker(props) {
88
93
  if (evt.target.closest(".gpa-gemstone-datetime") == null)
89
94
  setShowOverlay(false);
90
95
  }
96
+ function getBoxFormat(type, accuracy) {
97
+ var timeUnit;
98
+ var dateTime;
99
+ if (!type)
100
+ dateTime = 'date';
101
+ else
102
+ dateTime = type;
103
+ if (!accuracy)
104
+ timeUnit = 'second';
105
+ else
106
+ timeUnit = accuracy;
107
+ if (dateTime === 'time') {
108
+ if (timeUnit === 'minute') {
109
+ return "HH:mm";
110
+ }
111
+ else if (timeUnit === 'second') {
112
+ return "HH:mm:ss";
113
+ }
114
+ else {
115
+ return "HH:mm:ss.SSS";
116
+ }
117
+ }
118
+ else if (dateTime === 'datetime-local') {
119
+ if (timeUnit === 'minute') {
120
+ return "YYYY-MM-DD[T]HH:mm";
121
+ }
122
+ else if (timeUnit === 'second') {
123
+ return "YYYY-MM-DD[T]HH:mm:ss";
124
+ }
125
+ else {
126
+ return "YYYY-MM-DD[T]HH:mm:ss.SSS";
127
+ }
128
+ }
129
+ else {
130
+ return "YYYY-MM-DD";
131
+ }
132
+ }
91
133
  var showLabel = props.Label !== "";
92
134
  var showHelpIcon = props.Help !== undefined;
93
135
  var label = props.Label === undefined ? props.Field : props.Label;
136
+ var step = props.Accuracy === 'millisecond' ? '0.001' : (props.Accuracy === 'minute' ? '60' : '1');
94
137
  return (React.createElement("div", { className: "form-group", ref: divRef },
95
138
  showHelpIcon || showLabel ?
96
139
  React.createElement("label", null,
@@ -108,13 +151,12 @@ function DateTimePicker(props) {
108
151
  showHelpIcon ?
109
152
  React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
110
153
  : null,
111
- (props.Label !== "") ?
112
- React.createElement("label", null, props.Label == null ? props.Field : props.Label) : null,
113
154
  React.createElement("input", { "data-help": guid, className: "gpa-gemstone-datetime form-control" + (props.Valid(props.Field) ? '' : ' is-invalid'), type: props.Type === undefined ? 'date' : props.Type, onChange: function (evt) {
114
- setBoxRecord(evt.target.value);
115
- }, onFocus: function () { setShowOverlay(true); }, value: boxRecord, disabled: props.Disabled === undefined ? false : props.Disabled, onClick: function (e) { e.preventDefault(); }, step: "1" }),
155
+ var _a;
156
+ setBoxRecord((_a = evt.target.value) !== null && _a !== void 0 ? _a : "");
157
+ }, onFocus: function () { setShowOverlay(true); }, value: boxRecord, disabled: props.Disabled === undefined ? false : props.Disabled, onClick: function (e) { e.preventDefault(); }, step: step }),
116
158
  React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field.toString() + ' is a required field.' : props.Feedback),
117
159
  React.createElement(DateTimePopup_1.default, { Setter: function (d) { setPickerRecord(d); if (props.Type === 'date')
118
- setShowOverlay(false); }, Show: showOverlay, DateTime: pickerRecord, Valid: props.Valid(props.Field), Top: top, Center: left, Type: props.Type === undefined || props.Type === 'date' ? 'date' : 'datetime' })));
160
+ 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 })));
119
161
  }
120
162
  exports.default = DateTimePicker;
package/lib/DateTimeUI/Clock.d.ts CHANGED
@@ -3,6 +3,8 @@ import * as moment from 'moment';
3
3
  interface IProps {
4
4
  DateTime: moment.Moment;
5
5
  Setter: (record: moment.Moment) => void;
6
+ Accuracy?: Accuracy;
6
7
  }
8
+ export declare type Accuracy = ('minute' | 'second' | 'millisecond');
7
9
  export default function Clock(props: IProps): JSX.Element;
8
10
  export {};
package/lib/DateTimeUI/Clock.js CHANGED
@@ -29,26 +29,29 @@ function Clock(props) {
29
29
  var _a = React.useState(props.DateTime.format("HH")), hour = _a[0], setHour = _a[1];
30
30
  var _b = React.useState(props.DateTime.format("mm")), minute = _b[0], setMinute = _b[1];
31
31
  var _c = React.useState(props.DateTime.format("ss")), second = _c[0], setSecond = _c[1];
32
- var _d = React.useState('none'), hover = _d[0], setHover = _d[1];
32
+ var _d = React.useState(props.DateTime.format("SSS")), millisecond = _d[0], setMilliSecond = _d[1];
33
+ var _e = React.useState('none'), hover = _e[0], setHover = _e[1];
33
34
  React.useEffect(function () {
34
35
  setHour(props.DateTime.format("HH"));
35
36
  setMinute(props.DateTime.format("mm"));
36
37
  setSecond(props.DateTime.format("ss"));
38
+ setMilliSecond(props.DateTime.format("SSS"));
37
39
  }, [props.DateTime]);
38
40
  React.useEffect(function () {
39
41
  var h = parseInt(hour, 10);
40
42
  var m = parseInt(minute, 10);
41
43
  var s = parseInt(second, 10);
42
- if (isNaN(h) || isNaN(m) || isNaN(s))
44
+ var ms = parseInt(millisecond, 10);
45
+ if (isNaN(h) || isNaN(m) || isNaN(s) || isNaN(ms))
43
46
  return;
44
- if (h !== props.DateTime.hour() || m !== props.DateTime.minute() || s !== props.DateTime.second()) {
47
+ if (h !== props.DateTime.hour() || m !== props.DateTime.minute() || s !== props.DateTime.second() || ms !== props.DateTime.millisecond()) {
45
48
  var d = moment(props.DateTime);
46
49
  if (!d.isValid())
47
50
  d = moment.utc().startOf('d');
48
- d.hour(h).minute(m).second(s);
51
+ d.hour(h).minute(m).second(s).millisecond(ms);
49
52
  props.Setter(d);
50
53
  }
51
- }, [hour, minute, second]);
54
+ }, [hour, minute, second, millisecond]);
52
55
  function increase(type) {
53
56
  var d = moment(props.DateTime).add(1, type);
54
57
  if (type === 'h')
@@ -57,6 +60,8 @@ function Clock(props) {
57
60
  setMinute(d.format("mm"));
58
61
  if (type === 's')
59
62
  setSecond(d.format("ss"));
63
+ if (type === 'ms')
64
+ setMilliSecond(d.format("SSS"));
60
65
  }
61
66
  function decrease(type) {
62
67
  var d = moment(props.DateTime).subtract(1, type);
@@ -66,37 +71,54 @@ function Clock(props) {
66
71
  setMinute(d.format("mm"));
67
72
  if (type === 's')
68
73
  setSecond(d.format("ss"));
74
+ if (type === 'ms')
75
+ setMilliSecond(d.format("SSS"));
69
76
  }
70
77
  return (React.createElement("div", { style: { background: '#f0f0f0', marginTop: 10, opacity: 1 } },
71
78
  React.createElement("table", { style: { textAlign: 'center' } },
72
79
  React.createElement("tbody", null,
73
80
  React.createElement("tr", { style: { height: 20, lineHeight: '20px' } },
74
- React.createElement("td", { style: { width: 50, padding: 5, cursor: 'pointer', background: (hover === 'increase_h' ? '#d3d3d3' : undefined) }, onClick: function () { return increase('h'); }, onMouseEnter: function () { return setHover('increase_h'); }, onMouseLeave: function () { return setHover('none'); } }, " ^ "),
81
+ React.createElement("td", { style: { width: 52, padding: 5, cursor: 'pointer', background: (hover === 'increase_h' ? '#d3d3d3' : undefined) }, onClick: function () { return increase('h'); }, onMouseEnter: function () { return setHover('increase_h'); }, onMouseLeave: function () { return setHover('none'); } }, " ^ "),
75
82
  React.createElement("td", { style: { width: 20, padding: 5 } }),
76
- React.createElement("td", { style: { width: 50, padding: 5, cursor: 'pointer', background: (hover === 'increase_m' ? '#d3d3d3' : undefined) }, onClick: function () { return increase('m'); }, onMouseEnter: function () { return setHover('increase_m'); }, onMouseLeave: function () { return setHover('none'); } }, " ^ "),
77
- React.createElement("td", { style: { width: 20, padding: 5, } }),
78
- React.createElement("td", { style: { width: 50, padding: 5, cursor: 'pointer', background: (hover === 'increase_s' ? '#d3d3d3' : undefined) }, onClick: function () { return increase('s'); }, onMouseEnter: function () { return setHover('increase_s'); }, onMouseLeave: function () { return setHover('none'); } }, " ^ ")),
83
+ React.createElement("td", { style: { width: 52, padding: 5, cursor: 'pointer', background: (hover === 'increase_m' ? '#d3d3d3' : undefined) }, onClick: function () { return increase('m'); }, onMouseEnter: function () { return setHover('increase_m'); }, onMouseLeave: function () { return setHover('none'); } }, " ^ "),
84
+ (props.Accuracy === 'second' || props.Accuracy === 'millisecond') && (React.createElement(React.Fragment, null,
85
+ React.createElement("td", { style: { width: 20, padding: 5, } }),
86
+ React.createElement("td", { style: { width: 52, padding: 5, cursor: 'pointer', background: (hover === 'increase_s' ? '#d3d3d3' : undefined) }, onClick: function () { return increase('s'); }, onMouseEnter: function () { return setHover('increase_s'); }, onMouseLeave: function () { return setHover('none'); } }, " ^ "))),
87
+ props.Accuracy === 'millisecond' && (React.createElement(React.Fragment, null,
88
+ React.createElement("td", { style: { width: 20, padding: 5 } }),
89
+ React.createElement("td", { style: { width: 52, padding: 5, cursor: 'pointer', background: (hover === 'increase_ms' ? '#d3d3d3' : undefined) }, onClick: function () { return increase('ms'); }, onMouseEnter: function () { return setHover('increase_ms'); }, onMouseLeave: function () { return setHover('none'); } }, " ^ ")))),
79
90
  React.createElement("tr", { style: { height: 20, lineHeight: '20px' } },
80
- React.createElement("td", { style: { width: 50, padding: 5, } },
91
+ React.createElement("td", { style: { width: 52, padding: 5, } },
81
92
  " ",
82
93
  React.createElement(TimeInput, { value: hour, setValue: setHour, max: 23 }),
83
94
  " "),
84
95
  React.createElement("td", { style: { width: 20, padding: 5, } }, " : "),
85
- React.createElement("td", { style: { width: 50, padding: 5, } },
96
+ React.createElement("td", { style: { width: 52, padding: 5, } },
86
97
  " ",
87
98
  React.createElement(TimeInput, { value: minute, setValue: setMinute, max: 59 }),
88
99
  " "),
89
- React.createElement("td", { style: { width: 20, padding: 5, } }, " : "),
90
- React.createElement("td", { style: { width: 50, padding: 5, } },
91
- " ",
92
- React.createElement(TimeInput, { value: second, setValue: setSecond, max: 59 }),
93
- " ")),
100
+ (props.Accuracy === 'second' || props.Accuracy === 'millisecond') && (React.createElement(React.Fragment, null,
101
+ React.createElement("td", { style: { width: 20, padding: 5, } }, " : "),
102
+ React.createElement("td", { style: { width: 52, padding: 5, } },
103
+ " ",
104
+ React.createElement(TimeInput, { value: second, setValue: setSecond, max: 59 }),
105
+ " "))),
106
+ props.Accuracy === 'millisecond' && (React.createElement(React.Fragment, null,
107
+ React.createElement("td", { style: { width: 20, padding: 5, } }, " : "),
108
+ React.createElement("td", { style: { width: 52, padding: 5, } },
109
+ " ",
110
+ React.createElement(TimeInput, { value: millisecond, setValue: setMilliSecond, max: 999 }),
111
+ " ")))),
94
112
  React.createElement("tr", { style: { height: 20, lineHeight: '20px' } },
95
- React.createElement("td", { style: { width: 50, padding: 5, cursor: 'pointer', background: (hover === 'decrease_h' ? '#d3d3d3' : undefined) }, onClick: function () { return decrease('h'); }, onMouseEnter: function () { return setHover('decrease_h'); }, onMouseLeave: function () { return setHover('none'); } }, " v "),
96
- React.createElement("td", { style: { width: 20, padding: 5, } }),
97
- React.createElement("td", { style: { width: 50, padding: 5, cursor: 'pointer', background: (hover === 'decrease_m' ? '#d3d3d3' : undefined) }, onClick: function () { return decrease('m'); }, onMouseEnter: function () { return setHover('decrease_m'); }, onMouseLeave: function () { return setHover('none'); } }, " v "),
113
+ React.createElement("td", { style: { width: 52, padding: 5, cursor: 'pointer', background: (hover === 'decrease_h' ? '#d3d3d3' : undefined) }, onClick: function () { return decrease('h'); }, onMouseEnter: function () { return setHover('decrease_h'); }, onMouseLeave: function () { return setHover('none'); } }, " v "),
98
114
  React.createElement("td", { style: { width: 20, padding: 5, } }),
99
- React.createElement("td", { style: { width: 50, padding: 5, cursor: 'pointer', background: (hover === 'decrease_s' ? '#d3d3d3' : undefined) }, onClick: function () { return decrease('s'); }, onMouseEnter: function () { return setHover('decrease_s'); }, onMouseLeave: function () { return setHover('none'); } }, " v "))))));
115
+ React.createElement("td", { style: { width: 52, padding: 5, cursor: 'pointer', background: (hover === 'decrease_m' ? '#d3d3d3' : undefined) }, onClick: function () { return decrease('m'); }, onMouseEnter: function () { return setHover('decrease_m'); }, onMouseLeave: function () { return setHover('none'); } }, " v "),
116
+ (props.Accuracy === 'second' || props.Accuracy === 'millisecond') && (React.createElement(React.Fragment, null,
117
+ React.createElement("td", { style: { width: 20, padding: 5, } }),
118
+ React.createElement("td", { style: { width: 52, padding: 5, cursor: 'pointer', background: (hover === 'decrease_s' ? '#d3d3d3' : undefined) }, onClick: function () { return decrease('s'); }, onMouseEnter: function () { return setHover('decrease_s'); }, onMouseLeave: function () { return setHover('none'); } }, " v "))),
119
+ props.Accuracy === 'millisecond' && (React.createElement(React.Fragment, null,
120
+ React.createElement("td", { style: { width: 20, padding: 5, } }),
121
+ React.createElement("td", { style: { width: 52, padding: 5, cursor: 'pointer', background: (hover === 'decrease_ms' ? '#d3d3d3' : undefined) }, onClick: function () { return decrease('ms'); }, onMouseEnter: function () { return setHover('decrease_ms'); }, onMouseLeave: function () { return setHover('none'); } }, " v "))))))));
100
122
  }
101
123
  exports.default = Clock;
102
124
  var TimeInput = function (props) {
@@ -120,7 +142,7 @@ var TimeInput = function (props) {
120
142
  setError(false);
121
143
  props.setValue(val);
122
144
  }, [val, error]);
123
- return React.createElement("div", { className: "form-group form-group-sm", style: { width: 45 } },
145
+ return React.createElement("div", { className: "form-group form-group-sm", style: { width: 52 } },
124
146
  React.createElement("input", { type: "text", className: !error ? 'form-control' : 'form-control is-invalid', onChange: function (evt) {
125
147
  if ((0, helper_functions_1.IsInteger)(evt.target.value))
126
148
  setVal(evt.target.value);
package/lib/DateTimeUI/DateTimePopup.d.ts CHANGED
@@ -1,14 +1,17 @@
1
1
  /// <reference types="react" />
2
2
  import * as moment from 'moment';
3
+ import { TimeUnit } from '../DatePicker';
4
+ import { Accuracy } from './Clock';
3
5
  interface IProps {
4
6
  DateTime: moment.Moment;
5
7
  Setter: (record: moment.Moment) => void;
6
8
  Valid: boolean;
7
9
  Feedback?: string;
8
- Type: ('datetime' | 'date' | 'time');
10
+ Type: TimeUnit;
9
11
  Show: boolean;
10
12
  Top: number;
11
13
  Center: number;
14
+ Accuracy?: Accuracy;
12
15
  }
13
16
  export default function DateTimePopup(props: IProps): JSX.Element | null;
14
17
  export {};
package/lib/DateTimeUI/DateTimePopup.js CHANGED
@@ -53,7 +53,7 @@ function DateTimePopup(props) {
53
53
  return (React.createElement(react_portal_1.Portal, null,
54
54
  React.createElement(WrapperDiv, { Top: props.Top, Left: l, Indicator: 50, ref: divRef, className: 'gpa-gemstone-datetime' },
55
55
  showDate ? React.createElement(Calender_1.default, { DateTime: props.DateTime, Setter: props.Setter }) : null,
56
- showTime ? React.createElement(Clock_1.default, { DateTime: props.DateTime, Setter: props.Setter }) : null)));
56
+ showTime ? React.createElement(Clock_1.default, { DateTime: props.DateTime, Setter: props.Setter, Accuracy: props.Accuracy }) : null)));
57
57
  }
58
58
  exports.default = DateTimePopup;
59
59
  var templateObject_1;
package/lib/HelperMessage.d.ts CHANGED
@@ -3,6 +3,8 @@ interface IProps {
3
3
  Show: boolean;
4
4
  Target?: string;
5
5
  Zindex?: number;
6
+ Color?: string;
7
+ Background?: string;
6
8
  }
7
9
  declare const HelperMessage: React.FunctionComponent<IProps>;
8
10
  export default HelperMessage;
package/lib/HelperMessage.js CHANGED
@@ -30,7 +30,10 @@ var React = require("react");
30
30
  var styled_components_1 = require("styled-components");
31
31
  var helper_functions_1 = require("@gpa-gemstone/helper-functions");
32
32
  var react_portal_1 = require("react-portal");
33
- 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: #000;\n background: #0DCAF0;\n top: ", ";\n left: ", ";\n width: ", ";\n border: 1px solid transparent;\n }\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: #000;\n background: #0DCAF0;\n top: ", ";\n left: ", ";\n width: ", ";\n border: 1px solid transparent;\n }\n \n ", ""])), function (props) { return props.Zindex; }, function (props) { return props.Show ? "1.0" : "0"; }, function (props) { return props.Top + "px"; }, function (props) { return props.Left + "px"; }, function (props) { return 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 #0DCAF0;\n left: 50%;\n top: -6px;\n margin-left: -8px;\n content: \"\";\n width: 0px;\n height: 0px;\n position: absolute\n }\n "; });
33
+ 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 & {\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 ", ""])), 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 props.Top + "px"; }, function (props) { return props.Left + "px"; }, function (props) { return props.Width + "px"; }, function (props) {
34
+ var _a;
35
+ return "\n &::before {\n border-left: 8px solid transparent;\n border-right: 8px solid transparent;\n border-bottom: 8px solid " + ((_a = props.Background) !== null && _a !== void 0 ? _a : '#0DCAF0') + ";\n left: 50%;\n top: -6px;\n margin-left: -8px;\n content: \"\";\n width: 0px;\n height: 0px;\n position: absolute\n }\n ";
36
+ });
34
37
  var HelperMessage = function (props) {
35
38
  var helpMessage = React.useRef(null);
36
39
  var _a = React.useState(0), top = _a[0], setTop = _a[1];
@@ -74,7 +77,7 @@ var HelperMessage = function (props) {
74
77
  return result;
75
78
  }
76
79
  return (React.createElement(react_portal_1.Portal, null,
77
- React.createElement(WrapperDiv, { Show: props.Show, Top: top, Left: left, Width: width, ref: helpMessage, Zindex: zIndex }, props.children)));
80
+ React.createElement(WrapperDiv, { Show: props.Show, Top: top, Left: left, Width: width, ref: helpMessage, Zindex: zIndex, Color: props.Color, Background: props.Background }, props.children)));
78
81
  };
79
82
  exports.default = HelperMessage;
80
83
  var templateObject_1;
package/lib/MutliCheckBoxSelect.d.ts CHANGED
@@ -12,6 +12,7 @@ interface IProps {
12
12
  Selected: boolean;
13
13
  }[]) => void;
14
14
  Help?: string | JSX.Element;
15
+ ItemTooltip?: 'no-tip' | 'dark' | 'light';
15
16
  }
16
17
  declare const MultiSelect: (props: IProps) => JSX.Element;
17
18
  export default MultiSelect;
package/lib/MutliCheckBoxSelect.js CHANGED
@@ -26,10 +26,15 @@ var helper_functions_1 = require("@gpa-gemstone/helper-functions");
26
26
  var React = require("react");
27
27
  var HelperMessage_1 = require("./HelperMessage");
28
28
  var MultiSelect = function (props) {
29
- var _a = React.useState(false), show = _a[0], setShow = _a[1];
30
- var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
31
- var _c = React.useState(""), guid = _c[0], setGuid = _c[1];
29
+ var _a;
30
+ var _b = React.useState(false), show = _b[0], setShow = _b[1];
31
+ var _c = React.useState(false), showHelp = _c[0], setShowHelp = _c[1];
32
+ var _d = React.useState(false), showItems = _d[0], setShowItems = _d[1];
33
+ var _e = React.useState(""), guid = _e[0], setGuid = _e[1];
32
34
  var multiSelect = React.useRef(null);
35
+ var showLabel = React.useMemo(function () { return props.Label !== ""; }, [props.Label]);
36
+ var showHelpIcon = React.useMemo(function () { return props.Help !== undefined; }, [props.Help]);
37
+ var selectedOptions = React.useMemo(function () { return props.Options.filter(function (opt) { return opt.Selected; }); }, [props.Options]);
33
38
  React.useEffect(function () {
34
39
  setGuid((0, helper_functions_1.CreateGuid)());
35
40
  }, []);
@@ -47,19 +52,24 @@ var MultiSelect = function (props) {
47
52
  document.removeEventListener('mousedown', HandleShow, false);
48
53
  };
49
54
  }, []);
50
- var showLabel = props.Label !== "";
51
- var showHelpIcon = props.Help !== undefined;
52
- var label = props.Label === undefined ? 'Select' : props.Label;
53
55
  return (React.createElement("div", { className: "form-group" },
54
56
  showLabel || showHelpIcon ?
55
57
  React.createElement("label", null,
56
- showLabel ? label : '',
58
+ showLabel ?
59
+ (props.Label === undefined ? 'Select' : props.Label)
60
+ : '',
57
61
  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,
58
62
  showHelpIcon ?
59
63
  React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
60
64
  : null,
65
+ ((_a = props.ItemTooltip) !== null && _a !== void 0 ? _a : 'no-tip') !== 'no-tip' ?
66
+ React.createElement(HelperMessage_1.default, { Show: showItems, Target: guid, Background: props.ItemTooltip === 'dark' ? "#222" : '#fff', Color: props.ItemTooltip === 'dark' ? "#fff" : '#222' },
67
+ React.createElement("p", null, "Selected Options:"),
68
+ selectedOptions.slice(0, 10).map(function (opt) { return React.createElement("p", null, opt.Text); }),
69
+ selectedOptions.length > 10 ? React.createElement("p", null, "and " + (selectedOptions.length - 10) + " other(s)") : null)
70
+ : null,
61
71
  React.createElement("div", { ref: multiSelect, style: { position: 'relative', display: 'block', width: 'inherit' } },
62
- React.createElement("button", { type: "button", style: { border: '1px solid #ced4da', padding: '.375rem .75rem', fontSize: '1rem', borderRadius: '.25rem' }, className: "btn form-control dropdown-toggle", onClick: HandleShow },
72
+ 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); } },
63
73
  props.Options.filter(function (x) { return x.Selected; }).length !== props.Options.length
64
74
  ? props.Options.filter(function (x) { return x.Selected; }).length
65
75
  : 'All ',
@@ -72,6 +82,7 @@ var MultiSelect = function (props) {
72
82
  display: show ? 'block' : 'none',
73
83
  position: 'absolute',
74
84
  backgroundColor: '#fff',
85
+ color: 'black',
75
86
  boxShadow: '0px 8px 16px 0px rgba(0,0,0,0.2)',
76
87
  zIndex: 401,
77
88
  minWidth: '100%',
package/lib/TextArea.js CHANGED
@@ -58,7 +58,7 @@ function TextArea(props) {
58
58
  var showLabel = props.Label !== "";
59
59
  var showHelpIcon = props.Help !== undefined;
60
60
  var label = props.Label === undefined ? props.Field : props.Label;
61
- return (React.createElement("div", { className: "form-group", "data-help": guid },
61
+ return (React.createElement("div", { className: "form-group", "data-help": guid.current },
62
62
  showHelpIcon || showLabel ?
63
63
  React.createElement("label", null,
64
64
  showLabel ? label : '',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gpa-gemstone/react-forms",
3
- "version": "1.1.46",
3
+ "version": "1.1.48",
4
4
  "description": "React Form modules for gpa webapps",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",