@gpa-gemstone/react-forms 1.1.39 → 1.1.40

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.js +1 -1
  2. package/lib/DateTimeUI/Calender.js +1 -1
  3. package/lib/DateTimeUI/Clock.js +27 -3
  4. package/lib/HelperMessage.js +1 -1
  5. package/lib/Select.js +0 -2
  6. package/lib/StylableSelect.js +0 -1
  7. package/package.json +9 -8
package/lib/DatePicker.js CHANGED
@@ -82,7 +82,7 @@ function DateTimePicker(props) {
82
82
  React.createElement("label", null, props.Label == null ? props.Field : props.Label) : null,
83
83
  React.createElement("input", { className: "gpa-gemstone-datetime form-control" + (props.Valid(props.Field) ? '' : ' is-invalid'), type: props.Type === undefined ? 'date' : props.Type, onChange: function (evt) {
84
84
  setBoxRecord(evt.target.value);
85
- }, onFocus: function () { setShowOverlay(true); }, value: boxRecord, disabled: props.Disabled === undefined ? false : props.Disabled, onClick: function (e) { e.preventDefault(); } }),
85
+ }, onFocus: function () { setShowOverlay(true); }, value: boxRecord, disabled: props.Disabled === undefined ? false : props.Disabled, onClick: function (e) { e.preventDefault(); }, step: "1" }),
86
86
  React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field.toString() + ' is a required field.' : props.Feedback),
87
87
  React.createElement(DateTimePopup_1.default, { Setter: function (d) { setPickerRecord(d); if (props.Type === 'date')
88
88
  setShowOverlay(false); }, Show: showOverlay, DateTime: pickerRecord, Valid: props.Valid(props.Field), Top: top, Center: left, Type: props.Type === undefined || props.Type === 'date' ? 'date' : 'datetime' })));
package/lib/DateTimeUI/Calender.js CHANGED
@@ -37,7 +37,7 @@ function Calender(props) {
37
37
  React.useEffect(function () {
38
38
  var d1 = moment([year, month, 1]).startOf('week');
39
39
  var w = [];
40
- while (d1.month() <= month) {
40
+ while (d1.month() <= month && d1.year() === year) {
41
41
  w.push({
42
42
  sunday: moment(d1),
43
43
  monday: moment(d1).add(1, 'day'),
package/lib/DateTimeUI/Clock.js CHANGED
@@ -24,6 +24,7 @@
24
24
  Object.defineProperty(exports, "__esModule", { value: true });
25
25
  var React = require("react");
26
26
  var moment = require("moment");
27
+ var helper_functions_1 = require("@gpa-gemstone/helper-functions");
27
28
  function Clock(props) {
28
29
  var _a = React.useState(props.DateTime.format("HH")), hour = _a[0], setHour = _a[1];
29
30
  var _b = React.useState(props.DateTime.format("mm")), minute = _b[0], setMinute = _b[1];
@@ -74,17 +75,17 @@ function Clock(props) {
74
75
  React.createElement("tr", { style: { height: 20, lineHeight: '20px' } },
75
76
  React.createElement("td", { style: { width: 50, padding: 5, } },
76
77
  " ",
77
- hour,
78
+ React.createElement(TimeInput, { value: hour, setValue: setHour, max: 23 }),
78
79
  " "),
79
80
  React.createElement("td", { style: { width: 20, padding: 5, } }, " : "),
80
81
  React.createElement("td", { style: { width: 50, padding: 5, } },
81
82
  " ",
82
- minute,
83
+ React.createElement(TimeInput, { value: minute, setValue: setMinute, max: 59 }),
83
84
  " "),
84
85
  React.createElement("td", { style: { width: 20, padding: 5, } }, " : "),
85
86
  React.createElement("td", { style: { width: 50, padding: 5, } },
86
87
  " ",
87
- second,
88
+ React.createElement(TimeInput, { value: second, setValue: setSecond, max: 59 }),
88
89
  " ")),
89
90
  React.createElement("tr", { style: { height: 20, lineHeight: '20px' } },
90
91
  React.createElement("td", { style: { width: 50, padding: 5, cursor: 'pointer', background: (hover === 'decrease_h' ? '#d3d3d3' : undefined) }, onClick: function () { return decrease('h'); }, onMouseEnter: function () { return setHover('decrease_h'); }, onMouseLeave: function () { return setHover('none'); } }, " v "),
@@ -94,3 +95,26 @@ function Clock(props) {
94
95
  React.createElement("td", { style: { width: 50, padding: 5, cursor: 'pointer', background: (hover === 'decrease_s' ? '#d3d3d3' : undefined) }, onClick: function () { return decrease('s'); }, onMouseEnter: function () { return setHover('decrease_s'); }, onMouseLeave: function () { return setHover('none'); } }, " v "))))));
95
96
  }
96
97
  exports.default = Clock;
98
+ var TimeInput = function (props) {
99
+ var _a = React.useState(props.value.toString()), val = _a[0], setVal = _a[1];
100
+ var _b = React.useState(false), error = _b[0], setError = _b[1];
101
+ React.useEffect(function () {
102
+ setVal(props.value.toString());
103
+ }, [props.value]);
104
+ React.useEffect(function () {
105
+ if (!(0, helper_functions_1.IsInteger)(val))
106
+ return;
107
+ var v = parseInt(val, 10);
108
+ if (v > props.max || v < 0) {
109
+ setError(true);
110
+ return;
111
+ }
112
+ setError(false);
113
+ props.setValue(val);
114
+ }, [val, error]);
115
+ return React.createElement("div", { className: "form-group form-group-sm", style: { width: 45 } },
116
+ React.createElement("input", { type: "text", className: !error ? 'form-control' : 'form-control is-invalid', onChange: function (evt) {
117
+ if ((0, helper_functions_1.IsInteger)(evt.target.value))
118
+ setVal(evt.target.value);
119
+ }, value: val }));
120
+ };
package/lib/HelperMessage.js CHANGED
@@ -29,7 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var React = require("react");
30
30
  var styled_components_1 = require("styled-components");
31
31
  var helper_functions_1 = require("@gpa-gemstone/helper-functions");
32
- var WrapperDiv = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n & {\n border-radius: 3px;\n display: inline-block;\n font-size: 13px;\n padding: 8px 21px;\n position: fixed;\n pointer-events: none;\n transition: opacity 0.3s ease-out;\n z-index: ", ";\n opacity: ", ";\n color: #000;\n background: #0DCAF0;\n top: ", ";\n left: ", ";\n\twidth: ", ";\n border: 1px solid transparent;\n }\n \n ", ""], ["\n & {\n border-radius: 3px;\n display: inline-block;\n font-size: 13px;\n padding: 8px 21px;\n position: fixed;\n pointer-events: none;\n transition: opacity 0.3s ease-out;\n z-index: ", ";\n opacity: ", ";\n color: #000;\n background: #0DCAF0;\n top: ", ";\n left: ", ";\n\twidth: ", ";\n border: 1px solid transparent;\n }\n \n ", ""])), function (props) { return props.Zindex; }, function (props) { return props.Show ? "1.0" : "0"; }, function (props) { return props.Top + "px"; }, function (props) { return props.Left + "px"; }, function (props) { return props.Width + "px"; }, function (props) { return "\n &::before {\n border-left: 8px solid transparent;\n border-right: 8px solid transparent;\n border-bottom: 8px solid #0DCAF0;\n left: 50%;\n top: -6px;\n margin-left: -8px;\n content: \"\";\n width: 0px;\n height: 0px;\n position: absolute\n }\n "; });
32
+ var WrapperDiv = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n & {\n border-radius: 3px;\n display: inline-block;\n font-size: 13px;\n padding: 8px 21px;\n position: fixed;\n pointer-events: none;\n transition: opacity 0.3s ease-out;\n z-index: ", ";\n opacity: ", ";\n color: #000;\n background: #0DCAF0;\n top: ", ";\n left: ", ";\n width: ", ";\n border: 1px solid transparent;\n }\n \n ", ""], ["\n & {\n border-radius: 3px;\n display: inline-block;\n font-size: 13px;\n padding: 8px 21px;\n position: fixed;\n pointer-events: none;\n transition: opacity 0.3s ease-out;\n z-index: ", ";\n opacity: ", ";\n color: #000;\n background: #0DCAF0;\n top: ", ";\n left: ", ";\n width: ", ";\n border: 1px solid transparent;\n }\n \n ", ""])), function (props) { return props.Zindex; }, function (props) { return props.Show ? "1.0" : "0"; }, function (props) { return props.Top + "px"; }, function (props) { return props.Left + "px"; }, function (props) { return props.Width + "px"; }, function (props) { return "\n &::before {\n border-left: 8px solid transparent;\n border-right: 8px solid transparent;\n border-bottom: 8px solid #0DCAF0;\n left: 50%;\n top: -6px;\n margin-left: -8px;\n content: \"\";\n width: 0px;\n height: 0px;\n position: absolute\n }\n "; });
33
33
  var HelperMessage = function (props) {
34
34
  var _a = React.useState(0), top = _a[0], setTop = _a[1];
35
35
  var _b = React.useState(0), left = _b[0], setLeft = _b[1];
package/lib/Select.js CHANGED
@@ -61,11 +61,9 @@ function Select(props) {
61
61
  record[props.Field] = null;
62
62
  props.Setter(record);
63
63
  }
64
- ;
65
64
  function GetRecordValue() {
66
65
  return props.Record[props.Field] == null ? '' : props.Record[props.Field].toString();
67
66
  }
68
- ;
69
67
  return (React.createElement("div", { className: "form-group" },
70
68
  (props.Label !== "") ?
71
69
  React.createElement("label", null,
package/lib/StylableSelect.js CHANGED
@@ -97,4 +97,3 @@ function StylableSelect(props) {
97
97
  React.createElement("td", null, f.Element))); }))))));
98
98
  }
99
99
  exports.default = StylableSelect;
100
- ;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gpa-gemstone/react-forms",
3
- "version": "1.1.39",
3
+ "version": "1.1.40",
4
4
  "description": "React Form modules for gpa webapps",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
@@ -9,7 +9,7 @@
9
9
  "test": "jest --config jestconfig.json",
10
10
  "build": "tsc",
11
11
  "format": "prettier --write \"src/**/*.tsx\"",
12
- "lint": "tslint -p tsconfig.json",
12
+ "lint": "eslint . --ext .ts,.tsx",
13
13
  "prepare": "npm run build",
14
14
  "prepublishOnly": "npm test && npm run lint",
15
15
  "preversion": "npm run lint",
@@ -34,21 +34,22 @@
34
34
  "devDependencies": {
35
35
  "@types/jest": "^27.0.0",
36
36
  "@types/react-portal": "4.0.4",
37
+ "@typescript-eslint/eslint-plugin": "^5.60.0",
38
+ "@typescript-eslint/parser": "^5.60.0",
39
+ "eslint": "^8.43.0",
37
40
  "jest": "^27.0.6",
38
41
  "prettier": "^2.3.2",
39
42
  "ts-jest": "^27.0.4",
40
- "tslint": "^6.1.3",
41
- "tslint-config-prettier": "^1.18.0",
42
43
  "typescript": "4.4.4"
43
44
  },
44
45
  "dependencies": {
45
- "@gpa-gemstone/helper-functions": "0.0.20",
46
+ "@gpa-gemstone/helper-functions": "0.0.21",
46
47
  "@types/react": "^17.0.14",
47
48
  "@types/styled-components": "^5.1.11",
48
- "react": "^18.2.0",
49
- "styled-components": "5.3.3",
50
49
  "moment": "2.29.4",
51
- "react-portal": "4.2.2"
50
+ "react": "^18.2.0",
51
+ "react-portal": "4.2.2",
52
+ "styled-components": "5.3.3"
52
53
  },
53
54
  "publishConfig": {"access": "public"}
54
55
  }