@gpa-gemstone/react-forms 1.1.47 → 1.1.49
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 +58 -17
- 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
|
@@ -39,39 +39,43 @@ 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;
|
|
43
42
|
// Formats that will be used for dateBoxes
|
|
44
|
-
var boxFormat =
|
|
43
|
+
var boxFormat = getBoxFormat(props.Type, props.Accuracy);
|
|
45
44
|
var recordFormat = props.Format !== undefined ? props.Format : "YYYY-MM-DD" + (props.Type === undefined || props.Type === 'date' ? "" : "[T]HH:mm:ss.SSS[Z]");
|
|
46
45
|
var parse = function (r) { return moment(props.Record[props.Field], recordFormat); };
|
|
47
46
|
var divRef = React.useRef(null);
|
|
48
|
-
var
|
|
49
|
-
var
|
|
47
|
+
var recordChange = React.useRef(false);
|
|
48
|
+
var _a = React.useState(""), guid = _a[0], setGuid = _a[1];
|
|
49
|
+
var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
|
|
50
50
|
// Adds a buffer between the outside props and what the box is reading to prevent box overwriting every render with a keystroke
|
|
51
|
-
var
|
|
52
|
-
var
|
|
53
|
-
var
|
|
54
|
-
var
|
|
55
|
-
var
|
|
56
|
-
var allowEmpty = (_a = props.AllowEmpty) !== null && _a !== void 0 ? _a : false;
|
|
51
|
+
var _c = React.useState(parse(props.Record).format(boxFormat)), boxRecord = _c[0], setBoxRecord = _c[1];
|
|
52
|
+
var _d = React.useState(parse(props.Record)), pickerRecord = _d[0], setPickerRecord = _d[1];
|
|
53
|
+
var _e = React.useState(false), showOverlay = _e[0], setShowOverlay = _e[1];
|
|
54
|
+
var _f = React.useState(0), top = _f[0], setTop = _f[1];
|
|
55
|
+
var _g = React.useState(0), left = _g[0], setLeft = _g[1];
|
|
57
56
|
React.useEffect(function () {
|
|
58
57
|
setGuid((0, helper_functions_1.CreateGuid)());
|
|
59
58
|
}, []);
|
|
60
59
|
React.useEffect(function () {
|
|
61
60
|
setPickerRecord(parse(props.Record));
|
|
62
61
|
setBoxRecord(parse(props.Record).format(boxFormat));
|
|
62
|
+
recordChange.current = false;
|
|
63
63
|
}, [props.Record]);
|
|
64
64
|
React.useEffect(function () {
|
|
65
65
|
var _a, _b;
|
|
66
|
+
var _c;
|
|
67
|
+
if (!recordChange.current)
|
|
68
|
+
return;
|
|
66
69
|
var valid = moment(boxRecord, boxFormat).isValid();
|
|
67
|
-
if (
|
|
70
|
+
if (((_c = props.AllowEmpty) !== null && _c !== void 0 ? _c : false) && boxRecord.length === 0 && !valid && props.Record !== null)
|
|
68
71
|
props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = null, _a)));
|
|
69
|
-
}
|
|
70
72
|
if (valid && parse(props.Record).format(boxFormat) !== boxRecord)
|
|
71
73
|
props.Setter(__assign(__assign({}, props.Record), (_b = {}, _b[props.Field] = moment(boxRecord, boxFormat).format(recordFormat), _b)));
|
|
72
74
|
}, [boxRecord]);
|
|
73
75
|
React.useEffect(function () {
|
|
74
76
|
var _a;
|
|
77
|
+
if (!recordChange.current)
|
|
78
|
+
return;
|
|
75
79
|
if (pickerRecord.format(recordFormat) !== parse(props.Record).format(recordFormat))
|
|
76
80
|
props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = pickerRecord.format(recordFormat), _a)));
|
|
77
81
|
}, [pickerRecord]);
|
|
@@ -93,9 +97,47 @@ function DateTimePicker(props) {
|
|
|
93
97
|
if (evt.target.closest(".gpa-gemstone-datetime") == null)
|
|
94
98
|
setShowOverlay(false);
|
|
95
99
|
}
|
|
100
|
+
function getBoxFormat(type, accuracy) {
|
|
101
|
+
var timeUnit;
|
|
102
|
+
var dateTime;
|
|
103
|
+
if (!type)
|
|
104
|
+
dateTime = 'date';
|
|
105
|
+
else
|
|
106
|
+
dateTime = type;
|
|
107
|
+
if (!accuracy)
|
|
108
|
+
timeUnit = 'second';
|
|
109
|
+
else
|
|
110
|
+
timeUnit = accuracy;
|
|
111
|
+
if (dateTime === 'time') {
|
|
112
|
+
if (timeUnit === 'minute') {
|
|
113
|
+
return "HH:mm";
|
|
114
|
+
}
|
|
115
|
+
else if (timeUnit === 'second') {
|
|
116
|
+
return "HH:mm:ss";
|
|
117
|
+
}
|
|
118
|
+
else {
|
|
119
|
+
return "HH:mm:ss.SSS";
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
else if (dateTime === 'datetime-local') {
|
|
123
|
+
if (timeUnit === 'minute') {
|
|
124
|
+
return "YYYY-MM-DD[T]HH:mm";
|
|
125
|
+
}
|
|
126
|
+
else if (timeUnit === 'second') {
|
|
127
|
+
return "YYYY-MM-DD[T]HH:mm:ss";
|
|
128
|
+
}
|
|
129
|
+
else {
|
|
130
|
+
return "YYYY-MM-DD[T]HH:mm:ss.SSS";
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
else {
|
|
134
|
+
return "YYYY-MM-DD";
|
|
135
|
+
}
|
|
136
|
+
}
|
|
96
137
|
var showLabel = props.Label !== "";
|
|
97
138
|
var showHelpIcon = props.Help !== undefined;
|
|
98
139
|
var label = props.Label === undefined ? props.Field : props.Label;
|
|
140
|
+
var step = props.Accuracy === 'millisecond' ? '0.001' : (props.Accuracy === 'minute' ? '60' : '1');
|
|
99
141
|
return (React.createElement("div", { className: "form-group", ref: divRef },
|
|
100
142
|
showHelpIcon || showLabel ?
|
|
101
143
|
React.createElement("label", null,
|
|
@@ -113,14 +155,13 @@ function DateTimePicker(props) {
|
|
|
113
155
|
showHelpIcon ?
|
|
114
156
|
React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
|
|
115
157
|
: null,
|
|
116
|
-
(props.Label !== "") ?
|
|
117
|
-
React.createElement("label", null, props.Label == null ? props.Field : props.Label) : null,
|
|
118
158
|
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
159
|
var _a;
|
|
120
160
|
setBoxRecord((_a = evt.target.value) !== null && _a !== void 0 ? _a : "");
|
|
121
|
-
|
|
161
|
+
recordChange.current = true;
|
|
162
|
+
}, onFocus: function () { setShowOverlay(true); }, value: boxRecord, disabled: props.Disabled === undefined ? false : props.Disabled, onClick: function (e) { e.preventDefault(); }, step: step }),
|
|
122
163
|
React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field.toString() + ' is a required field.' : props.Feedback),
|
|
123
|
-
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
|
|
164
|
+
React.createElement(DateTimePopup_1.default, { Setter: function (d) { setPickerRecord(d); recordChange.current = true; if (props.Type === 'date')
|
|
165
|
+
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
166
|
}
|
|
126
167
|
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 : '',
|