@gpa-gemstone/react-forms 1.1.24 → 1.1.25
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/DateRangePicker.d.ts +5 -2
- package/lib/DateRangePicker.js +33 -88
- package/package.json +1 -1
package/lib/DateRangePicker.d.ts
CHANGED
|
@@ -4,7 +4,10 @@ export default function DateRangePicker<T>(props: {
|
|
|
4
4
|
FromField: keyof T;
|
|
5
5
|
ToField: keyof T;
|
|
6
6
|
Setter: (record: T) => void;
|
|
7
|
-
Disabled?: boolean;
|
|
8
7
|
Label: string;
|
|
9
|
-
Valid
|
|
8
|
+
Valid: (fieldFrom: keyof T, fieldTo: keyof T) => boolean;
|
|
9
|
+
Disabled?: boolean;
|
|
10
|
+
Feedback?: string;
|
|
11
|
+
Format?: string;
|
|
12
|
+
Type?: ('datetime-local' | 'date');
|
|
10
13
|
}): JSX.Element;
|
package/lib/DateRangePicker.js
CHANGED
|
@@ -34,47 +34,18 @@ var __assign = (this && this.__assign) || function () {
|
|
|
34
34
|
};
|
|
35
35
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
36
|
var React = require("react");
|
|
37
|
+
var moment = require("moment");
|
|
37
38
|
function DateRangePicker(props) {
|
|
38
|
-
|
|
39
|
-
var
|
|
40
|
-
var
|
|
41
|
-
var _d = React.useState(Tstart != null ? ToString(Tstart) : ''), StartInput = _d[0], setStartInput = _d[1];
|
|
42
|
-
var _e = React.useState(Tend != null ? ToString(Tend) : ''), EndInput = _e[0], setEndInput = _e[1];
|
|
39
|
+
// Range box vars, need a secondary var to avoid looping react hooks
|
|
40
|
+
var _a = React.useState('Custom'), formRange = _a[0], setFormRange = _a[1];
|
|
41
|
+
var _b = React.useState('Custom'), range = _b[0], setRange = _b[1];
|
|
43
42
|
React.useEffect(function () {
|
|
44
|
-
|
|
45
|
-
var propsEnd = ToDate(props.Record[props.ToField]);
|
|
46
|
-
if (propsStart == null || Tstart == null) {
|
|
47
|
-
if (!(propsStart == null && Tstart == null))
|
|
48
|
-
setTstart(propsStart);
|
|
49
|
-
}
|
|
50
|
-
else if (propsStart.getTime() !== Tstart.getTime())
|
|
51
|
-
setTstart(propsStart);
|
|
52
|
-
if (propsEnd == null || Tend == null) {
|
|
53
|
-
if (!(propsEnd == null && Tend == null))
|
|
54
|
-
setTstart(propsEnd);
|
|
55
|
-
}
|
|
56
|
-
else if (propsEnd.getTime() !== Tend.getTime())
|
|
57
|
-
setTend(propsEnd);
|
|
43
|
+
setRange(ToRange(moment(props.Record[props.ToField]).diff(props.Record[props.FromField], 'days')));
|
|
58
44
|
}, [props.Record]);
|
|
59
45
|
React.useEffect(function () {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
UpdateTime();
|
|
64
|
-
}, [Tstart, Tend]);
|
|
65
|
-
React.useEffect(function () {
|
|
66
|
-
var days = GetDays(range);
|
|
67
|
-
if (days > 0) {
|
|
68
|
-
if (Tstart != null)
|
|
69
|
-
setTend(new Date(Tstart.valueOf() + 1000 * 24 * 60 * 60 * days));
|
|
70
|
-
else if (Tend != null)
|
|
71
|
-
setTstart(new Date(Tend.valueOf() - 1000 * 24 * 60 * 60 * days));
|
|
72
|
-
else {
|
|
73
|
-
setTstart(new Date(new Date().valueOf() - 1000 * 24 * 60 * 60 * days));
|
|
74
|
-
setTend(new Date());
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
}, [range]);
|
|
46
|
+
setRange(formRange);
|
|
47
|
+
RecordSetter(moment(props.Record[props.FromField]).add(GetDays(formRange), 'days').toString(), props.ToField);
|
|
48
|
+
}, [formRange]);
|
|
78
49
|
function GetDays(val) {
|
|
79
50
|
if (val === '1 Day')
|
|
80
51
|
return 1;
|
|
@@ -90,47 +61,6 @@ function DateRangePicker(props) {
|
|
|
90
61
|
return 365;
|
|
91
62
|
return 0;
|
|
92
63
|
}
|
|
93
|
-
function ToDate(str) {
|
|
94
|
-
if (str === null)
|
|
95
|
-
return null;
|
|
96
|
-
var dt = new Date(str);
|
|
97
|
-
if (isNaN(dt.getTime()))
|
|
98
|
-
return null;
|
|
99
|
-
return dt;
|
|
100
|
-
}
|
|
101
|
-
React.useEffect(function () {
|
|
102
|
-
if (Tstart != null)
|
|
103
|
-
setStartInput(ToString(Tstart));
|
|
104
|
-
}, [Tstart]);
|
|
105
|
-
React.useEffect(function () {
|
|
106
|
-
// only if InputStart is a valid ToString
|
|
107
|
-
if (StartInput.match('^([0-9][0-9][0-9][0-9])-([0-1][0-9])-([0-3][0-9])') != null)
|
|
108
|
-
setTstart(ToDate(StartInput));
|
|
109
|
-
else
|
|
110
|
-
setTstart(null);
|
|
111
|
-
}, [StartInput]);
|
|
112
|
-
React.useEffect(function () {
|
|
113
|
-
if (Tend != null)
|
|
114
|
-
setEndInput(ToString(Tend));
|
|
115
|
-
}, [Tend]);
|
|
116
|
-
React.useEffect(function () {
|
|
117
|
-
// only if EndInput is a valid ToString
|
|
118
|
-
if (EndInput.match('^([0-9][0-9][0-9][0-9])-([0-1][0-9])-([0-3][0-9])') != null)
|
|
119
|
-
setTend(ToDate(EndInput));
|
|
120
|
-
else
|
|
121
|
-
setTend(null);
|
|
122
|
-
}, [EndInput]);
|
|
123
|
-
function UpdateTime() {
|
|
124
|
-
var _a;
|
|
125
|
-
var to = (Tend !== null ? ToString(Tend) : '');
|
|
126
|
-
var from = (Tstart !== null ? ToString(Tstart) : '');
|
|
127
|
-
var record = __assign(__assign({}, props.Record), (_a = {}, _a[props.ToField] = to, _a[props.FromField] = from, _a));
|
|
128
|
-
props.Setter(record);
|
|
129
|
-
}
|
|
130
|
-
function ToString(dt) {
|
|
131
|
-
return dt.getUTCFullYear() + "-" + (dt.getUTCMonth() + 1).toString()
|
|
132
|
-
.padStart(2, '0') + "-" + dt.getUTCDate().toString().padStart(2, '0');
|
|
133
|
-
}
|
|
134
64
|
function ToRange(days) {
|
|
135
65
|
if (days === 1)
|
|
136
66
|
return ('1 Day');
|
|
@@ -147,15 +77,32 @@ function DateRangePicker(props) {
|
|
|
147
77
|
else
|
|
148
78
|
return ('Custom');
|
|
149
79
|
}
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
80
|
+
function RecordSetter(val, field) {
|
|
81
|
+
var record = __assign({}, props.Record);
|
|
82
|
+
if (val !== '') {
|
|
83
|
+
if (props.Format === null)
|
|
84
|
+
record[field] = val;
|
|
85
|
+
else
|
|
86
|
+
record[field] = moment(val).format(props.Format);
|
|
87
|
+
}
|
|
88
|
+
else
|
|
89
|
+
record[field] = null;
|
|
90
|
+
props.Setter(record);
|
|
91
|
+
}
|
|
92
|
+
function dateBox(field) {
|
|
93
|
+
return React.createElement("div", { className: "col" },
|
|
94
|
+
React.createElement("input", { className: "form-control" + (props.Valid(props.FromField, props.ToField) ? '' : ' is-invalid'), type: props.Type === undefined ? 'date' : props.Type, onChange: function (evt) {
|
|
95
|
+
RecordSetter(evt.target.value, field);
|
|
96
|
+
}, value: props.Record[field] === null ? '' :
|
|
97
|
+
moment(props.Record[field]).format("YYYY-MM-DD" + (props.Type === undefined || props.Type === 'date' ? "" : "Thh:mm")), disabled: props.Disabled === null ? false : props.Disabled }),
|
|
98
|
+
field !== props.FromField ? null :
|
|
99
|
+
React.createElement("div", { className: "invalid-feedback" }, props.Feedback === undefined ? 'From and to dates required, and from must be before to.' : props.Feedback));
|
|
100
|
+
}
|
|
154
101
|
return (React.createElement("div", { className: "form-group" },
|
|
155
|
-
React.createElement("label", null, props.Label),
|
|
102
|
+
props.Label === "" ? null : React.createElement("label", null, props.Label),
|
|
156
103
|
React.createElement("div", { className: "row" },
|
|
157
104
|
React.createElement("div", { className: "col" },
|
|
158
|
-
React.createElement("select", { className: "form-control", value: range, onChange: function (evt) { return
|
|
105
|
+
React.createElement("select", { className: "form-control", value: range, onChange: function (evt) { return setFormRange(evt.target.value); } },
|
|
159
106
|
React.createElement("option", { value: "Custom" }, "Custom"),
|
|
160
107
|
React.createElement("option", { value: "1 Day" }, "1 Day"),
|
|
161
108
|
React.createElement("option", { value: "7 Days" }, "7 Days"),
|
|
@@ -163,9 +110,7 @@ function DateRangePicker(props) {
|
|
|
163
110
|
React.createElement("option", { value: "90 Days" }, "90 Days"),
|
|
164
111
|
React.createElement("option", { value: "180 Days" }, "180 Days"),
|
|
165
112
|
React.createElement("option", { value: "365 Days" }, "365 Days"))),
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
React.createElement("div", { className: "col" },
|
|
169
|
-
React.createElement("input", { className: "form-control" + (endValid ? '' : ' is-invalid'), type: "date", onChange: function (evt) { setEndInput(evt.target.value); }, value: EndInput, disabled: props.Disabled == null ? false : props.Disabled })))));
|
|
113
|
+
dateBox(props.FromField),
|
|
114
|
+
dateBox(props.ToField))));
|
|
170
115
|
}
|
|
171
116
|
exports.default = DateRangePicker;
|