@gpa-gemstone/react-forms 1.1.47 → 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.
- package/lib/DatePicker.d.ts +4 -1
- package/lib/DatePicker.js +41 -5
- package/lib/DateTimeUI/Clock.d.ts +2 -0
- package/lib/DateTimeUI/Clock.js +43 -21
- package/lib/DateTimeUI/DateTimePopup.d.ts +4 -1
- package/lib/DateTimeUI/DateTimePopup.js +1 -1
- package/lib/HelperMessage.d.ts +2 -0
- package/lib/HelperMessage.js +5 -2
- package/lib/MutliCheckBoxSelect.d.ts +1 -0
- package/lib/MutliCheckBoxSelect.js +19 -8
- package/lib/TextArea.js +1 -1
- 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,9 +10,10 @@ interface IProps<T> {
|
|
|
8
10
|
Disabled?: boolean;
|
|
9
11
|
Feedback?: string;
|
|
10
12
|
Format?: string;
|
|
11
|
-
Type?:
|
|
13
|
+
Type?: TimeUnit;
|
|
12
14
|
Help?: string | JSX.Element;
|
|
13
15
|
AllowEmpty?: boolean;
|
|
16
|
+
Accuracy?: Accuracy;
|
|
14
17
|
}
|
|
15
18
|
export default function DateTimePicker<T>(props: IProps<T>): JSX.Element;
|
|
16
19
|
export {};
|
package/lib/DatePicker.js
CHANGED
|
@@ -41,7 +41,7 @@ var HelperMessage_1 = require("./HelperMessage");
|
|
|
41
41
|
function DateTimePicker(props) {
|
|
42
42
|
var _a;
|
|
43
43
|
// Formats that will be used for dateBoxes
|
|
44
|
-
var boxFormat =
|
|
44
|
+
var boxFormat = getBoxFormat(props.Type, props.Accuracy);
|
|
45
45
|
var recordFormat = props.Format !== undefined ? props.Format : "YYYY-MM-DD" + (props.Type === undefined || props.Type === 'date' ? "" : "[T]HH:mm:ss.SSS[Z]");
|
|
46
46
|
var parse = function (r) { return moment(props.Record[props.Field], recordFormat); };
|
|
47
47
|
var divRef = React.useRef(null);
|
|
@@ -93,9 +93,47 @@ function DateTimePicker(props) {
|
|
|
93
93
|
if (evt.target.closest(".gpa-gemstone-datetime") == null)
|
|
94
94
|
setShowOverlay(false);
|
|
95
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
|
+
}
|
|
96
133
|
var showLabel = props.Label !== "";
|
|
97
134
|
var showHelpIcon = props.Help !== undefined;
|
|
98
135
|
var label = props.Label === undefined ? props.Field : props.Label;
|
|
136
|
+
var step = props.Accuracy === 'millisecond' ? '0.001' : (props.Accuracy === 'minute' ? '60' : '1');
|
|
99
137
|
return (React.createElement("div", { className: "form-group", ref: divRef },
|
|
100
138
|
showHelpIcon || showLabel ?
|
|
101
139
|
React.createElement("label", null,
|
|
@@ -113,14 +151,12 @@ function DateTimePicker(props) {
|
|
|
113
151
|
showHelpIcon ?
|
|
114
152
|
React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
|
|
115
153
|
: null,
|
|
116
|
-
(props.Label !== "") ?
|
|
117
|
-
React.createElement("label", null, props.Label == null ? props.Field : props.Label) : null,
|
|
118
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) {
|
|
119
155
|
var _a;
|
|
120
156
|
setBoxRecord((_a = evt.target.value) !== null && _a !== void 0 ? _a : "");
|
|
121
|
-
}, onFocus: function () { setShowOverlay(true); }, value: boxRecord, disabled: props.Disabled === undefined ? false : props.Disabled, onClick: function (e) { e.preventDefault(); }, step:
|
|
157
|
+
}, onFocus: function () { setShowOverlay(true); }, value: boxRecord, disabled: props.Disabled === undefined ? false : props.Disabled, onClick: function (e) { e.preventDefault(); }, step: step }),
|
|
122
158
|
React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field.toString() + ' is a required field.' : props.Feedback),
|
|
123
159
|
React.createElement(DateTimePopup_1.default, { Setter: function (d) { setPickerRecord(d); if (props.Type === 'date')
|
|
124
|
-
setShowOverlay(false); }, Show: showOverlay, DateTime: pickerRecord, Valid: props.Valid(props.Field), Top: top, Center: left, Type: props.Type === undefined
|
|
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 })));
|
|
125
161
|
}
|
|
126
162
|
exports.default = DateTimePicker;
|
|
@@ -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(
|
|
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
|
-
|
|
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:
|
|
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:
|
|
77
|
-
|
|
78
|
-
|
|
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:
|
|
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:
|
|
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
|
-
|
|
90
|
-
|
|
91
|
-
"
|
|
92
|
-
|
|
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:
|
|
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:
|
|
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:
|
|
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);
|
|
@@ -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:
|
|
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 {};
|
|
@@ -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
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:
|
|
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;
|
|
@@ -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
|
|
30
|
-
var _b = React.useState(false),
|
|
31
|
-
var _c = React.useState(
|
|
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 ?
|
|
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 : '',
|