@gpa-gemstone/react-forms 1.1.26 → 1.1.29

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 (7) hide show
  1. package/lib/DatePicker.d.ts +5 -6
  2. package/lib/DatePicker.js +34 -43
  3. package/lib/DateRangePicker.js +33 -17
  4. package/lib/Input.js +17 -10
  5. package/lib/TimePicker.d.ts +4 -6
  6. package/lib/TimePicker.js +15 -38
  7. package/package.json +2 -2
package/lib/DatePicker.d.ts CHANGED
@@ -1,13 +1,12 @@
1
- import * as React from 'react';
2
- export default class DatePicker<T> extends React.Component<{
1
+ /// <reference types="react" />
2
+ export default function DatePicker<T>(props: {
3
3
  Record: T;
4
4
  Field: keyof T;
5
5
  Setter: (record: T) => void;
6
+ Valid: (field: keyof T) => boolean;
6
7
  Label?: string;
7
8
  Disabled?: boolean;
8
9
  Feedback?: string;
9
10
  Format?: string;
10
- Valid: (field: keyof T) => boolean;
11
- }, {}, {}> {
12
- render(): JSX.Element;
13
- }
11
+ Type?: ('datetime-local' | 'date');
12
+ }): JSX.Element;
package/lib/DatePicker.js CHANGED
@@ -21,21 +21,6 @@
21
21
  // Generated original version of source code.
22
22
  //
23
23
  // ******************************************************************************************************
24
- var __extends = (this && this.__extends) || (function () {
25
- var extendStatics = function (d, b) {
26
- extendStatics = Object.setPrototypeOf ||
27
- ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
28
- function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
29
- return extendStatics(d, b);
30
- };
31
- return function (d, b) {
32
- if (typeof b !== "function" && b !== null)
33
- throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
34
- extendStatics(d, b);
35
- function __() { this.constructor = d; }
36
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
37
- };
38
- })();
39
24
  var __assign = (this && this.__assign) || function () {
40
25
  __assign = Object.assign || function(t) {
41
26
  for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -50,33 +35,39 @@ var __assign = (this && this.__assign) || function () {
50
35
  Object.defineProperty(exports, "__esModule", { value: true });
51
36
  var React = require("react");
52
37
  var moment = require("moment");
53
- var DatePicker = /** @class */ (function (_super) {
54
- __extends(DatePicker, _super);
55
- function DatePicker() {
56
- return _super !== null && _super.apply(this, arguments) || this;
38
+ function DatePicker(props) {
39
+ // Tracks weather or not props.Record changes are due to internal input boxes or externally
40
+ var _a = React.useState(false), internal = _a[0], setInternal = _a[1];
41
+ // Adds a buffer between the outside props and what the box is reading to prevent box overwriting every render with a keystroke
42
+ var _b = React.useState(ParseRecord()), boxRecord = _b[0], setBoxRecord = _b[1];
43
+ // Formats that will be used for dateBoxes
44
+ var boxFormat = "YYYY-MM-DD" + (props.Type === undefined || props.Type === 'date' ? "" : "[T]hh:mm:ss");
45
+ var recordFormat = props.Format !== undefined ? props.Format : "YYYY-MM-DD" + (props.Type === undefined || props.Type === 'date' ? "" : "[T]hh:mm:ss.SSS[Z]");
46
+ function ParseRecord() {
47
+ var _a;
48
+ return __assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = [props.Field] === null ? '' : moment(props.Record[props.Field], recordFormat).format(boxFormat), _a));
57
49
  }
58
- DatePicker.prototype.render = function () {
59
- var _this = this;
60
- return (React.createElement("div", { className: "form-group" },
61
- (this.props.Label !== "") ?
62
- React.createElement("label", null, this.props.Label == null ? this.props.Field : this.props.Label) : null,
63
- React.createElement("input", { className: this.props.Valid(this.props.Field) ? 'form-control' : 'form-control is-invalid', type: "date", onChange: function (evt) {
64
- var record = __assign({}, _this.props.Record);
65
- if (evt.target.value !== '') {
66
- if (_this.props.Format === null)
67
- record[_this.props.Field] = evt.target.value;
68
- else
69
- record[_this.props.Field] = moment(evt.target.value).format(_this.props.Format);
70
- }
71
- else
72
- record[_this.props.Field] = null;
73
- _this.props.Setter(record);
74
- }, value: this.props.Record[this.props.Field] == null ? '' :
75
- this.props.Format == null ?
76
- this.props.Record[this.props.Field].toString() :
77
- moment(this.props.Record[this.props.Field]).format("YYYY-MM-DD"), disabled: this.props.Disabled == null ? false : this.props.Disabled }),
78
- React.createElement("div", { className: "invalid-feedback" }, this.props.Feedback == null ? this.props.Field + ' is a required field.' : this.props.Feedback)));
79
- };
80
- return DatePicker;
81
- }(React.Component));
50
+ ;
51
+ React.useEffect(function () {
52
+ if (!internal)
53
+ setBoxRecord(ParseRecord());
54
+ setInternal(false);
55
+ }, [props.Record]);
56
+ return (React.createElement("div", { className: "form-group" },
57
+ (props.Label !== "") ?
58
+ React.createElement("label", null, props.Label == null ? props.Field : props.Label) : null,
59
+ React.createElement("input", { className: "form-control" + (props.Valid(props.Field) ? '' : ' is-invalid'), type: props.Type === undefined ? 'date' : props.Type, onChange: function (evt) {
60
+ var _a;
61
+ var record = __assign({}, props.Record);
62
+ if (evt.target.value !== '')
63
+ record[props.Field] = moment(evt.target.value, boxFormat).format(recordFormat);
64
+ else
65
+ record[props.Field] = null;
66
+ // These two updates should be batched together
67
+ props.Setter(record);
68
+ setBoxRecord(__assign(__assign({}, boxRecord), (_a = {}, _a[props.Field] = evt.target.value, _a)));
69
+ setInternal(true);
70
+ }, value: boxRecord[props.Field], disabled: props.Disabled === undefined ? false : props.Disabled }),
71
+ React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field.toString() + ' is a required field.' : props.Feedback)));
72
+ }
82
73
  exports.default = DatePicker;
package/lib/DateRangePicker.js CHANGED
@@ -39,13 +39,33 @@ function DateRangePicker(props) {
39
39
  // Range box vars, need a secondary var to avoid looping react hooks
40
40
  var _a = React.useState('Custom'), formRange = _a[0], setFormRange = _a[1];
41
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]");
42
49
  React.useEffect(function () {
43
- setRange(ToRange(moment(props.Record[props.ToField]).diff(props.Record[props.FromField], 'days')));
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);
44
54
  }, [props.Record]);
45
55
  React.useEffect(function () {
56
+ var _a, _b;
46
57
  setRange(formRange);
47
- RecordSetter(moment(props.Record[props.FromField]).add(GetDays(formRange), 'days').toString(), props.ToField);
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)));
48
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
+ }
49
69
  function GetDays(val) {
50
70
  if (val === '1 Day')
51
71
  return 1;
@@ -77,24 +97,20 @@ function DateRangePicker(props) {
77
97
  else
78
98
  return ('Custom');
79
99
  }
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
100
  function dateBox(field) {
93
101
  return React.createElement("div", { className: "col" },
94
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) {
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 }),
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 }),
98
114
  field !== props.FromField ? null :
99
115
  React.createElement("div", { className: "invalid-feedback" }, props.Feedback === undefined ? 'From and to dates required, and from must be before to.' : props.Feedback));
100
116
  }
package/lib/Input.js CHANGED
@@ -41,23 +41,30 @@ var helper_functions_1 = require("@gpa-gemstone/helper-functions");
41
41
  function Input(props) {
42
42
  var _a = React.useState(""), guid = _a[0], setGuid = _a[1];
43
43
  var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
44
- var _c = React.useState(''), heldVal = _c[0], setHeldVal = _c[1];
44
+ var _c = React.useState(false), internal = _c[0], setInternal = _c[1];
45
+ var _d = React.useState(''), heldVal = _d[0], setHeldVal = _d[1]; // Need to buffer tha value because parseFloat will throw away trailing decimals or zeros
45
46
  React.useEffect(function () {
46
47
  setGuid((0, helper_functions_1.CreateGuid)());
47
48
  }, []);
48
49
  React.useEffect(function () {
49
- setHeldVal(props.Record[props.Field] == null ? '' : props.Record[props.Field].toString());
50
+ if (!internal) {
51
+ setHeldVal(props.Record[props.Field] == null ? '' : props.Record[props.Field].toString());
52
+ }
53
+ setInternal(false);
50
54
  }, [props.Record[props.Field]]);
51
- function valueChange(evt) {
55
+ function valueChange(value) {
52
56
  var _a, _b;
57
+ setInternal(true);
53
58
  if (props.Type === 'number') {
54
- if (parseFloat(heldVal) !== parseFloat(evt.target.value))
55
- props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = evt.target.value !== '' ? parseFloat(evt.target.value) : null, _a)));
56
- else
57
- setHeldVal(evt.target.value);
59
+ if ((0, helper_functions_1.IsNumber)(value)) {
60
+ props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = value !== '' ? parseFloat(value) : null, _a)));
61
+ setHeldVal(value);
62
+ }
63
+ }
64
+ else {
65
+ props.Setter(__assign(__assign({}, props.Record), (_b = {}, _b[props.Field] = value !== '' ? value : null, _b)));
66
+ setHeldVal(value);
58
67
  }
59
- else
60
- props.Setter(__assign(__assign({}, props.Record), (_b = {}, _b[props.Field] = evt.target.value !== '' ? evt.target.value : null, _b)));
61
68
  }
62
69
  return (React.createElement("div", { className: "form-group" },
63
70
  (props.Label !== "") ?
@@ -67,7 +74,7 @@ function Input(props) {
67
74
  props.Help !== undefined ?
68
75
  React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
69
76
  : null,
70
- React.createElement("input", { "data-help": guid, type: props.Type === undefined ? 'text' : props.Type, className: props.Valid(props.Field) ? 'form-control' : 'form-control is-invalid', onChange: function (evt) { return valueChange(evt); }, value: heldVal, disabled: props.Disabled == null ? false : props.Disabled }),
77
+ React.createElement("input", { "data-help": guid, type: props.Type === undefined ? 'text' : props.Type, className: props.Valid(props.Field) ? 'form-control' : 'form-control is-invalid', onChange: function (evt) { return valueChange(evt.target.value); }, value: heldVal, disabled: props.Disabled == null ? false : props.Disabled }),
71
78
  React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field + ' is a required field.' : props.Feedback)));
72
79
  }
73
80
  exports.default = Input;
package/lib/TimePicker.d.ts CHANGED
@@ -1,13 +1,11 @@
1
- import * as React from 'react';
2
- export default class TimePicker<T> extends React.Component<{
1
+ /// <reference types="react" />
2
+ export default function DatePicker<T>(props: {
3
3
  Record: T;
4
4
  Field: keyof T;
5
5
  Setter: (record: T) => void;
6
+ Valid: (field: keyof T) => boolean;
6
7
  Label?: string;
7
8
  Disabled?: boolean;
8
9
  Feedback?: string;
9
10
  Step?: number;
10
- Valid: (field: keyof T) => boolean;
11
- }, {}, {}> {
12
- render(): JSX.Element;
13
- }
11
+ }): JSX.Element;
package/lib/TimePicker.js CHANGED
@@ -21,21 +21,6 @@
21
21
  // Generated original version of source code.
22
22
  //
23
23
  // ******************************************************************************************************
24
- var __extends = (this && this.__extends) || (function () {
25
- var extendStatics = function (d, b) {
26
- extendStatics = Object.setPrototypeOf ||
27
- ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
28
- function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
29
- return extendStatics(d, b);
30
- };
31
- return function (d, b) {
32
- if (typeof b !== "function" && b !== null)
33
- throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
34
- extendStatics(d, b);
35
- function __() { this.constructor = d; }
36
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
37
- };
38
- })();
39
24
  var __assign = (this && this.__assign) || function () {
40
25
  __assign = Object.assign || function(t) {
41
26
  for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -49,26 +34,18 @@ var __assign = (this && this.__assign) || function () {
49
34
  };
50
35
  Object.defineProperty(exports, "__esModule", { value: true });
51
36
  var React = require("react");
52
- var TimePicker = /** @class */ (function (_super) {
53
- __extends(TimePicker, _super);
54
- function TimePicker() {
55
- return _super !== null && _super.apply(this, arguments) || this;
56
- }
57
- TimePicker.prototype.render = function () {
58
- var _this = this;
59
- return (React.createElement("div", { className: "form-group" },
60
- (this.props.Label !== "") ?
61
- React.createElement("label", null, this.props.Label == null ? this.props.Field : this.props.Label) : null,
62
- React.createElement("input", { className: this.props.Valid(this.props.Field) ? 'form-control' : 'form-control is-invalid', type: "time", step: this.props.Step === null ? 60 : this.props.Step, onChange: function (evt) {
63
- var record = __assign({}, _this.props.Record);
64
- if (evt.target.value !== '')
65
- record[_this.props.Field] = evt.target.value;
66
- else
67
- record[_this.props.Field] = null;
68
- _this.props.Setter(record);
69
- }, value: this.props.Record[this.props.Field] == null ? '' : this.props.Record[this.props.Field].toString(), disabled: this.props.Disabled == null ? false : this.props.Disabled }),
70
- React.createElement("div", { className: "invalid-feedback" }, this.props.Feedback == null ? this.props.Field + ' is a required field.' : this.props.Feedback)));
71
- };
72
- return TimePicker;
73
- }(React.Component));
74
- exports.default = TimePicker;
37
+ function DatePicker(props) {
38
+ return (React.createElement("div", { className: "form-group" },
39
+ (props.Label !== "") ?
40
+ React.createElement("label", null, props.Label == null ? props.Field : props.Label) : null,
41
+ React.createElement("input", { className: 'form-control' + props.Valid(props.Field) ? '' : ' is-invalid', type: "time", step: props.Step === null ? 60 : props.Step, onChange: function (evt) {
42
+ var record = __assign({}, props.Record);
43
+ if (evt.target.value !== '')
44
+ record[props.Field] = evt.target.value;
45
+ else
46
+ record[props.Field] = null;
47
+ props.Setter(record);
48
+ }, value: props.Record[props.Field] == null ? '' : props.Record[props.Field].toString(), disabled: props.Disabled == null ? false : props.Disabled }),
49
+ React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field.toString() + ' is a required field.' : props.Feedback)));
50
+ }
51
+ exports.default = DatePicker;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gpa-gemstone/react-forms",
3
- "version": "1.1.26",
3
+ "version": "1.1.29",
4
4
  "description": "React Form modules for gpa webapps",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
@@ -45,7 +45,7 @@
45
45
  "typescript": "4.4.4"
46
46
  },
47
47
  "dependencies": {
48
- "@gpa-gemstone/helper-functions": "0.0.16",
48
+ "@gpa-gemstone/helper-functions": "0.0.17",
49
49
  "@types/react": "^17.0.14",
50
50
  "@types/styled-components": "^5.1.11",
51
51
  "react": "^18.2.0",