@gpa-gemstone/react-forms 1.1.28 → 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 (5) hide show
  1. package/lib/DatePicker.d.ts +5 -6
  2. package/lib/DatePicker.js +34 -43
  3. package/lib/TimePicker.d.ts +4 -6
  4. package/lib/TimePicker.js +15 -38
  5. package/package.json +1 -1
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/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.28",
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",