@gpa-gemstone/react-forms 1.1.23 → 1.1.24
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.d.ts +1 -0
- package/lib/DatePicker.js +13 -4
- package/lib/DateRangePicker.js +2 -2
- package/lib/Input.js +15 -6
- package/lib/Select.js +4 -3
- package/lib/TimePicker.d.ts +1 -0
- package/lib/TimePicker.js +3 -2
- package/package.json +4 -3
package/lib/DatePicker.d.ts
CHANGED
package/lib/DatePicker.js
CHANGED
|
@@ -49,6 +49,7 @@ var __assign = (this && this.__assign) || function () {
|
|
|
49
49
|
};
|
|
50
50
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
51
51
|
var React = require("react");
|
|
52
|
+
var moment = require("moment");
|
|
52
53
|
var DatePicker = /** @class */ (function (_super) {
|
|
53
54
|
__extends(DatePicker, _super);
|
|
54
55
|
function DatePicker() {
|
|
@@ -57,15 +58,23 @@ var DatePicker = /** @class */ (function (_super) {
|
|
|
57
58
|
DatePicker.prototype.render = function () {
|
|
58
59
|
var _this = this;
|
|
59
60
|
return (React.createElement("div", { className: "form-group" },
|
|
60
|
-
|
|
61
|
+
(this.props.Label !== "") ?
|
|
62
|
+
React.createElement("label", null, this.props.Label == null ? this.props.Field : this.props.Label) : null,
|
|
61
63
|
React.createElement("input", { className: this.props.Valid(this.props.Field) ? 'form-control' : 'form-control is-invalid', type: "date", onChange: function (evt) {
|
|
62
64
|
var record = __assign({}, _this.props.Record);
|
|
63
|
-
if (evt.target.value !== '')
|
|
64
|
-
|
|
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
|
+
}
|
|
65
71
|
else
|
|
66
72
|
record[_this.props.Field] = null;
|
|
67
73
|
_this.props.Setter(record);
|
|
68
|
-
}, value: this.props.Record[this.props.Field] == null ? '' :
|
|
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 }),
|
|
69
78
|
React.createElement("div", { className: "invalid-feedback" }, this.props.Feedback == null ? this.props.Field + ' is a required field.' : this.props.Feedback)));
|
|
70
79
|
};
|
|
71
80
|
return DatePicker;
|
package/lib/DateRangePicker.js
CHANGED
|
@@ -104,7 +104,7 @@ function DateRangePicker(props) {
|
|
|
104
104
|
}, [Tstart]);
|
|
105
105
|
React.useEffect(function () {
|
|
106
106
|
// only if InputStart is a valid ToString
|
|
107
|
-
if (StartInput.match('^([0-9][0-9][0-9][0-9])-([0-
|
|
107
|
+
if (StartInput.match('^([0-9][0-9][0-9][0-9])-([0-1][0-9])-([0-3][0-9])') != null)
|
|
108
108
|
setTstart(ToDate(StartInput));
|
|
109
109
|
else
|
|
110
110
|
setTstart(null);
|
|
@@ -115,7 +115,7 @@ function DateRangePicker(props) {
|
|
|
115
115
|
}, [Tend]);
|
|
116
116
|
React.useEffect(function () {
|
|
117
117
|
// only if EndInput is a valid ToString
|
|
118
|
-
if (EndInput.match('^([0-9][0-9][0-9][0-9])-([0-
|
|
118
|
+
if (EndInput.match('^([0-9][0-9][0-9][0-9])-([0-1][0-9])-([0-3][0-9])') != null)
|
|
119
119
|
setTend(ToDate(EndInput));
|
|
120
120
|
else
|
|
121
121
|
setTend(null);
|
package/lib/Input.js
CHANGED
|
@@ -41,24 +41,33 @@ 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
45
|
React.useEffect(function () {
|
|
45
46
|
setGuid((0, helper_functions_1.CreateGuid)());
|
|
46
47
|
}, []);
|
|
48
|
+
React.useEffect(function () {
|
|
49
|
+
setHeldVal(props.Record[props.Field] == null ? '' : props.Record[props.Field].toString());
|
|
50
|
+
}, [props.Record[props.Field]]);
|
|
47
51
|
function valueChange(evt) {
|
|
48
52
|
var _a, _b;
|
|
49
|
-
if (props.Type === 'number')
|
|
50
|
-
|
|
53
|
+
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);
|
|
58
|
+
}
|
|
51
59
|
else
|
|
52
60
|
props.Setter(__assign(__assign({}, props.Record), (_b = {}, _b[props.Field] = evt.target.value !== '' ? evt.target.value : null, _b)));
|
|
53
61
|
}
|
|
54
62
|
return (React.createElement("div", { className: "form-group" },
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
63
|
+
(props.Label !== "") ?
|
|
64
|
+
React.createElement("label", null,
|
|
65
|
+
props.Label === null ? props.Field : props.Label,
|
|
66
|
+
props.Help !== undefined ? React.createElement("div", { style: { width: 20, height: 20, borderRadius: '50%', display: 'inline-block', background: '#0D6EFD', marginLeft: 10, textAlign: 'center', fontWeight: 'bold' }, onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } }, " ? ") : null) : null,
|
|
58
67
|
props.Help !== undefined ?
|
|
59
68
|
React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
|
|
60
69
|
: null,
|
|
61
|
-
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:
|
|
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 }),
|
|
62
71
|
React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field + ' is a required field.' : props.Feedback)));
|
|
63
72
|
}
|
|
64
73
|
exports.default = Input;
|
package/lib/Select.js
CHANGED
|
@@ -45,9 +45,10 @@ function Select(props) {
|
|
|
45
45
|
setGuid((0, helper_functions_1.CreateGuid)());
|
|
46
46
|
}, []);
|
|
47
47
|
return (React.createElement("div", { className: "form-group" },
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
48
|
+
(props.Label !== "") ?
|
|
49
|
+
React.createElement("label", null,
|
|
50
|
+
props.Label === null ? props.Field : props.Label,
|
|
51
|
+
props.Help !== undefined ? React.createElement("div", { style: { width: 20, height: 20, borderRadius: '50%', display: 'inline-block', background: '#0D6EFD', marginLeft: 10, textAlign: 'center', fontWeight: 'bold' }, onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } }, " ? ") : null) : null,
|
|
51
52
|
props.Help !== undefined ?
|
|
52
53
|
React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
|
|
53
54
|
: null,
|
package/lib/TimePicker.d.ts
CHANGED
package/lib/TimePicker.js
CHANGED
|
@@ -57,8 +57,9 @@ var TimePicker = /** @class */ (function (_super) {
|
|
|
57
57
|
TimePicker.prototype.render = function () {
|
|
58
58
|
var _this = this;
|
|
59
59
|
return (React.createElement("div", { className: "form-group" },
|
|
60
|
-
|
|
61
|
-
|
|
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) {
|
|
62
63
|
var record = __assign({}, _this.props.Record);
|
|
63
64
|
if (evt.target.value !== '')
|
|
64
65
|
record[_this.props.Field] = evt.target.value;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gpa-gemstone/react-forms",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.24",
|
|
4
4
|
"description": "React Form modules for gpa webapps",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"types": "lib/index.d.ts",
|
|
@@ -45,11 +45,12 @@
|
|
|
45
45
|
"typescript": "4.4.4"
|
|
46
46
|
},
|
|
47
47
|
"dependencies": {
|
|
48
|
-
"@gpa-gemstone/helper-functions": "0.0.
|
|
48
|
+
"@gpa-gemstone/helper-functions": "0.0.16",
|
|
49
49
|
"@types/react": "^17.0.14",
|
|
50
50
|
"@types/styled-components": "^5.1.11",
|
|
51
51
|
"react": "^17.0.2",
|
|
52
|
-
"styled-components": "5.3.3"
|
|
52
|
+
"styled-components": "5.3.3",
|
|
53
|
+
"moment": "2.29.4"
|
|
53
54
|
},
|
|
54
55
|
"publishConfig": {
|
|
55
56
|
"access": "public"
|