@gpa-gemstone/react-forms 1.1.63 → 1.1.65
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.js +5 -3
- package/lib/DateTimeUI/Calender.js +26 -27
- package/lib/RadioButtons.d.ts +32 -1
- package/lib/Select.d.ts +1 -1
- package/lib/Select.js +1 -1
- package/package.json +1 -1
package/lib/DatePicker.js
CHANGED
|
@@ -83,9 +83,11 @@ function DateTimePicker(props) {
|
|
|
83
83
|
setTop(node.top + node.height + 10);
|
|
84
84
|
});
|
|
85
85
|
React.useEffect(function () {
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
86
|
+
if (showOverlay) {
|
|
87
|
+
window.addEventListener('click', onWindowClick);
|
|
88
|
+
return function () { window.removeEventListener('click', onWindowClick); };
|
|
89
|
+
}
|
|
90
|
+
}, [props.Record, props.Field, boxFormat, showOverlay]);
|
|
89
91
|
function setPickerAndRecord(arg) {
|
|
90
92
|
var _a, _b;
|
|
91
93
|
var _c;
|
|
@@ -116,42 +116,40 @@ function Calender(props) {
|
|
|
116
116
|
React.createElement("td", { style: { width: 20, padding: 5 } }, "FR"),
|
|
117
117
|
React.createElement("td", { style: { width: 20, padding: 5 } }, "SA")) : null),
|
|
118
118
|
React.createElement("tbody", null,
|
|
119
|
-
mode === 'month' ? weeks.map(function (w) {
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
React.createElement(DayCell, { date: w.friday, month: month, day: (_m = (_l = props.DateTime) === null || _l === void 0 ? void 0 : _l.date()) !== null && _m !== void 0 ? _m : -1, onClick: function (evt) { evt.stopPropagation(); setDate(w.friday); } }),
|
|
128
|
-
React.createElement(DayCell, { date: w.saturday, month: month, day: (_p = (_o = props.DateTime) === null || _o === void 0 ? void 0 : _o.date()) !== null && _p !== void 0 ? _p : -1, onClick: function (evt) { evt.stopPropagation(); setDate(w.saturday); } }));
|
|
129
|
-
}) : null,
|
|
119
|
+
mode === 'month' ? weeks.map(function (w) { return React.createElement("tr", { key: w.sunday.isoWeek(), style: { height: 20, lineHeight: '20px' } },
|
|
120
|
+
React.createElement(DayCell, { date: w.sunday, month: month, dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setDate(w.sunday); } }),
|
|
121
|
+
React.createElement(DayCell, { date: w.monday, month: month, dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setDate(w.monday); } }),
|
|
122
|
+
React.createElement(DayCell, { date: w.tuesday, month: month, dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setDate(w.tuesday); } }),
|
|
123
|
+
React.createElement(DayCell, { date: w.wednesday, month: month, dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setDate(w.wednesday); } }),
|
|
124
|
+
React.createElement(DayCell, { date: w.thursday, month: month, dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setDate(w.thursday); } }),
|
|
125
|
+
React.createElement(DayCell, { date: w.friday, month: month, dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setDate(w.friday); } }),
|
|
126
|
+
React.createElement(DayCell, { date: w.saturday, month: month, dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setDate(w.saturday); } })); }) : null,
|
|
130
127
|
mode === 'year' ? React.createElement(React.Fragment, null,
|
|
131
128
|
React.createElement("tr", { style: { height: 54, lineHeight: '54px' } },
|
|
132
|
-
React.createElement(MonthCell, { date: moment([year, 0, 1]),
|
|
133
|
-
React.createElement(MonthCell, { date: moment([year, 1, 1]),
|
|
134
|
-
React.createElement(MonthCell, { date: moment([year, 2, 1]),
|
|
135
|
-
React.createElement(MonthCell, { date: moment([year, 3, 1]),
|
|
129
|
+
React.createElement(MonthCell, { date: moment([year, 0, 1]), dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(0); } }),
|
|
130
|
+
React.createElement(MonthCell, { date: moment([year, 1, 1]), dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(1); } }),
|
|
131
|
+
React.createElement(MonthCell, { date: moment([year, 2, 1]), dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(2); } }),
|
|
132
|
+
React.createElement(MonthCell, { date: moment([year, 3, 1]), dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(3); } })),
|
|
136
133
|
React.createElement("tr", { style: { height: 54, lineHeight: '54px' } },
|
|
137
|
-
React.createElement(MonthCell, { date: moment([year, 4, 1]),
|
|
138
|
-
React.createElement(MonthCell, { date: moment([year, 5, 1]),
|
|
139
|
-
React.createElement(MonthCell, { date: moment([year, 6, 1]),
|
|
140
|
-
React.createElement(MonthCell, { date: moment([year, 7, 1]),
|
|
134
|
+
React.createElement(MonthCell, { date: moment([year, 4, 1]), dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(4); } }),
|
|
135
|
+
React.createElement(MonthCell, { date: moment([year, 5, 1]), dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(5); } }),
|
|
136
|
+
React.createElement(MonthCell, { date: moment([year, 6, 1]), dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(6); } }),
|
|
137
|
+
React.createElement(MonthCell, { date: moment([year, 7, 1]), dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(7); } })),
|
|
141
138
|
React.createElement("tr", { style: { height: 54, lineHeight: '54px' } },
|
|
142
|
-
React.createElement(MonthCell, { date: moment([year, 8, 1]),
|
|
143
|
-
React.createElement(MonthCell, { date: moment([year, 9, 1]),
|
|
144
|
-
React.createElement(MonthCell, { date: moment([year, 10, 1]),
|
|
145
|
-
React.createElement(MonthCell, { date: moment([year, 11, 1]),
|
|
139
|
+
React.createElement(MonthCell, { date: moment([year, 8, 1]), dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(8); } }),
|
|
140
|
+
React.createElement(MonthCell, { date: moment([year, 9, 1]), dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(9); } }),
|
|
141
|
+
React.createElement(MonthCell, { date: moment([year, 10, 1]), dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(10); } }),
|
|
142
|
+
React.createElement(MonthCell, { date: moment([year, 11, 1]), dateTime: props.DateTime, onClick: function (evt) { evt.stopPropagation(); setMode('month'); setMonth(11); } }))) : null))));
|
|
146
143
|
}
|
|
147
144
|
var DayCell = function (props) {
|
|
148
145
|
var _a = React.useState(false), active = _a[0], setActive = _a[1];
|
|
149
146
|
var _b = React.useState(false), hover = _b[0], setHover = _b[1];
|
|
150
147
|
var _c = React.useState(false), disabled = _c[0], setDisabled = _c[1];
|
|
151
148
|
React.useEffect(function () {
|
|
152
|
-
|
|
149
|
+
var _a;
|
|
150
|
+
setActive(props.date.date() === ((_a = props.dateTime) === null || _a === void 0 ? void 0 : _a.date()) && props.dateTime.month() === props.date.month() && props.date.year() === props.dateTime.year());
|
|
153
151
|
setDisabled(props.date.month() !== props.month);
|
|
154
|
-
}, [props.month, props.date, props.
|
|
152
|
+
}, [props.month, props.date, props.dateTime]);
|
|
155
153
|
var color = (disabled ? '#777' : (active ? '#fff' : undefined));
|
|
156
154
|
var bg = (active ? '#337ab7' : hover ? '#d3d3d3' : undefined);
|
|
157
155
|
return React.createElement("td", { style: {
|
|
@@ -166,8 +164,9 @@ var MonthCell = function (props) {
|
|
|
166
164
|
var _a = React.useState(false), active = _a[0], setActive = _a[1];
|
|
167
165
|
var _b = React.useState(false), hover = _b[0], setHover = _b[1];
|
|
168
166
|
React.useEffect(function () {
|
|
169
|
-
|
|
170
|
-
|
|
167
|
+
var _a, _b;
|
|
168
|
+
setActive(props.date.month() === ((_a = props.dateTime) === null || _a === void 0 ? void 0 : _a.month()) && props.date.year() === ((_b = props.dateTime) === null || _b === void 0 ? void 0 : _b.year()));
|
|
169
|
+
}, [props.date, props.dateTime]);
|
|
171
170
|
var color = (active ? '#fff' : undefined);
|
|
172
171
|
var bg = (active ? '#337ab7' : hover ? '#d3d3d3' : undefined);
|
|
173
172
|
return React.createElement("td", { style: {
|
package/lib/RadioButtons.d.ts
CHANGED
|
@@ -1,14 +1,45 @@
|
|
|
1
1
|
interface IProps<T> {
|
|
2
|
+
/**
|
|
3
|
+
* Record to be used in form
|
|
4
|
+
* @type {T}
|
|
5
|
+
*/
|
|
2
6
|
Record: T;
|
|
7
|
+
/**
|
|
8
|
+
* Field of the record to be edited
|
|
9
|
+
* @type {keyof T}
|
|
10
|
+
*/
|
|
3
11
|
Field: keyof T;
|
|
12
|
+
/**
|
|
13
|
+
* Setter function to update the Record
|
|
14
|
+
* @param record - Updated Record
|
|
15
|
+
*/
|
|
4
16
|
Setter: (record: T) => void;
|
|
17
|
+
/**
|
|
18
|
+
* Help message or element to display
|
|
19
|
+
* @type {string | JSX.Element}
|
|
20
|
+
* @optional
|
|
21
|
+
*/
|
|
5
22
|
Help?: string | JSX.Element;
|
|
23
|
+
/**
|
|
24
|
+
* Position to display radion buttons in
|
|
25
|
+
* @type {'vertical' | 'horizontal'}
|
|
26
|
+
* @optional
|
|
27
|
+
*/
|
|
6
28
|
Position?: ('vertical' | 'horizontal');
|
|
29
|
+
/**
|
|
30
|
+
* Options for the radion buttons
|
|
31
|
+
* @type {{ Value: string | number; Label: string, Disabled?: boolean }[]}
|
|
32
|
+
*/
|
|
7
33
|
Options: {
|
|
8
|
-
Value: string;
|
|
34
|
+
Value: string | number;
|
|
9
35
|
Label: string;
|
|
10
36
|
Disabled?: boolean;
|
|
11
37
|
}[];
|
|
38
|
+
/**
|
|
39
|
+
* Label to display for the form, defaults to the Field prop
|
|
40
|
+
* @type {string}
|
|
41
|
+
* @optional
|
|
42
|
+
*/
|
|
12
43
|
Label?: string;
|
|
13
44
|
}
|
|
14
45
|
export default function RadioButtons<T>(props: IProps<T>): JSX.Element;
|
package/lib/Select.d.ts
CHANGED
package/lib/Select.js
CHANGED
|
@@ -68,7 +68,7 @@ function Select(props) {
|
|
|
68
68
|
}
|
|
69
69
|
// Rretrieve the current value of the select field from the record.
|
|
70
70
|
function GetRecordValue() {
|
|
71
|
-
return props.Record[props.Field] == null ? '' : props.Record[props.Field]
|
|
71
|
+
return props.Record[props.Field] == null ? '' : props.Record[props.Field];
|
|
72
72
|
}
|
|
73
73
|
return (React.createElement("div", { className: "form-group" },
|
|
74
74
|
(props.Label !== "") ?
|