@gpa-gemstone/react-forms 1.1.24 → 1.1.27

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 (3) hide show
  1. package/lib/DateRangePicker.d.ts +5 -2
  2. package/lib/DateRangePicker.js +49 -88
  3. package/package.json +2 -2
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?: boolean;
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,38 @@ 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
- var _a = React.useState('Custom'), range = _a[0], setRange = _a[1];
39
- var _b = React.useState(ToDate(props.Record[props.FromField])), Tstart = _b[0], setTstart = _b[1];
40
- var _c = React.useState(ToDate(props.Record[props.ToField])), Tend = _c[0], setTend = _c[1];
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];
42
+ // Tracks weather or not props.Record changes are due to internal input boxes or externally
43
+ var _c = React.useState(false), internal = _c[0], setInternal = _c[1];
44
+ // Adds a buffer between the outside props and what the box is reading to prevent box overwriting every render with a keystroke
45
+ var _d = React.useState(ParseRecord()), boxRecord = _d[0], setBoxRecord = _d[1];
46
+ // Formats that will be used for dateBoxes
47
+ var boxFormat = "YYYY-MM-DD" + (props.Type === undefined || props.Type === 'date' ? "" : "[T]hh:mm:ss");
48
+ var recordFormat = props.Format !== undefined ? props.Format : "YYYY-MM-DD" + (props.Type === undefined || props.Type === 'date' ? "" : "[T]hh:mm:ss.SSS[Z]");
43
49
  React.useEffect(function () {
44
- var propsStart = ToDate(props.Record[props.FromField]);
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);
50
+ setRange(ToRange(moment(props.Record[props.ToField], recordFormat).diff(moment(props.Record[props.FromField], recordFormat), 'days')));
51
+ if (!internal)
52
+ setBoxRecord(ParseRecord());
53
+ setInternal(false);
58
54
  }, [props.Record]);
59
55
  React.useEffect(function () {
60
- var days = (Tstart != null && Tend != null ? Math.round((Tend.getTime() - Tstart.getTime()) / (1000 * 60 * 60 * 24)) : 0);
61
- if (ToRange(days) !== range)
62
- setRange(ToRange(days));
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]);
56
+ var _a, _b;
57
+ setRange(formRange);
58
+ var toTime = moment(props.Record[props.FromField], recordFormat).add(GetDays(formRange), 'days');
59
+ props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.ToField] = toTime.format(recordFormat), _a)));
60
+ setBoxRecord(__assign(__assign({}, boxRecord), (_b = {}, _b[props.ToField] = toTime.format(boxFormat), _b)));
61
+ }, [formRange]);
62
+ function ParseRecord() {
63
+ var record = __assign({}, props.Record);
64
+ var ParseExternalField = function (field) { return props.Record[field] === null ? '' : moment(props.Record[field], recordFormat).format(boxFormat); };
65
+ record[props.ToField] = ParseExternalField(props.ToField);
66
+ record[props.FromField] = ParseExternalField(props.FromField);
67
+ return record;
68
+ }
78
69
  function GetDays(val) {
79
70
  if (val === '1 Day')
80
71
  return 1;
@@ -90,47 +81,6 @@ function DateRangePicker(props) {
90
81
  return 365;
91
82
  return 0;
92
83
  }
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
84
  function ToRange(days) {
135
85
  if (days === 1)
136
86
  return ('1 Day');
@@ -147,15 +97,28 @@ function DateRangePicker(props) {
147
97
  else
148
98
  return ('Custom');
149
99
  }
150
- var startValid = (Tstart !== null) && (!isNaN(Tstart.getTime()));
151
- var endValid = (Tend !== null) && (!isNaN(Tend.getTime())) && (!startValid || ((Tstart !== null) && (Tstart.getTime() < Tend.getTime())));
152
- startValid = (props.Valid === undefined ? startValid : props.Valid);
153
- endValid = (props.Valid === undefined ? endValid : props.Valid);
100
+ function dateBox(field) {
101
+ return React.createElement("div", { className: "col" },
102
+ React.createElement("input", { className: "form-control" + (props.Valid(props.FromField, props.ToField) ? '' : ' is-invalid'), type: props.Type === undefined ? 'date' : props.Type, onChange: function (evt) {
103
+ var _a;
104
+ var record = __assign({}, props.Record);
105
+ if (evt.target.value !== '')
106
+ record[field] = moment(evt.target.value, boxFormat).format(recordFormat);
107
+ else
108
+ record[field] = null;
109
+ // These two updates should be batched together
110
+ props.Setter(record);
111
+ setBoxRecord(__assign(__assign({}, boxRecord), (_a = {}, _a[field] = evt.target.value, _a)));
112
+ setInternal(true);
113
+ }, value: boxRecord[field], disabled: props.Disabled === undefined ? false : props.Disabled }),
114
+ field !== props.FromField ? null :
115
+ React.createElement("div", { className: "invalid-feedback" }, props.Feedback === undefined ? 'From and to dates required, and from must be before to.' : props.Feedback));
116
+ }
154
117
  return (React.createElement("div", { className: "form-group" },
155
- React.createElement("label", null, props.Label),
118
+ props.Label === "" ? null : React.createElement("label", null, props.Label),
156
119
  React.createElement("div", { className: "row" },
157
120
  React.createElement("div", { className: "col" },
158
- React.createElement("select", { className: "form-control", value: range, onChange: function (evt) { return setRange(evt.target.value); } },
121
+ React.createElement("select", { className: "form-control", value: range, onChange: function (evt) { return setFormRange(evt.target.value); } },
159
122
  React.createElement("option", { value: "Custom" }, "Custom"),
160
123
  React.createElement("option", { value: "1 Day" }, "1 Day"),
161
124
  React.createElement("option", { value: "7 Days" }, "7 Days"),
@@ -163,9 +126,7 @@ function DateRangePicker(props) {
163
126
  React.createElement("option", { value: "90 Days" }, "90 Days"),
164
127
  React.createElement("option", { value: "180 Days" }, "180 Days"),
165
128
  React.createElement("option", { value: "365 Days" }, "365 Days"))),
166
- React.createElement("div", { className: "col" },
167
- React.createElement("input", { className: "form-control" + (startValid ? '' : ' is-invalid'), type: "date", onChange: function (evt) { setStartInput(evt.target.value); }, value: StartInput, disabled: props.Disabled == null ? false : props.Disabled })),
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 })))));
129
+ dateBox(props.FromField),
130
+ dateBox(props.ToField))));
170
131
  }
171
132
  exports.default = DateRangePicker;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gpa-gemstone/react-forms",
3
- "version": "1.1.24",
3
+ "version": "1.1.27",
4
4
  "description": "React Form modules for gpa webapps",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
@@ -48,7 +48,7 @@
48
48
  "@gpa-gemstone/helper-functions": "0.0.16",
49
49
  "@types/react": "^17.0.14",
50
50
  "@types/styled-components": "^5.1.11",
51
- "react": "^17.0.2",
51
+ "react": "^18.2.0",
52
52
  "styled-components": "5.3.3",
53
53
  "moment": "2.29.4"
54
54
  },