@gpa-gemstone/react-forms 1.1.38 → 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 +3 -3
  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'),
@@ -111,7 +111,7 @@ function Calender(props) {
111
111
  React.createElement("td", { style: { width: 20, padding: 5 } }, "FR"),
112
112
  React.createElement("td", { style: { width: 20, padding: 5 } }, "SA")) : null),
113
113
  React.createElement("tbody", null,
114
- mode === 'month' ? weeks.map(function (w) { return React.createElement("tr", { key: w.sunday.isoWeekYear(), style: { height: 20, lineHeight: '20px' } },
114
+ mode === 'month' ? weeks.map(function (w) { return React.createElement("tr", { key: w.sunday.isoWeek(), style: { height: 20, lineHeight: '20px' } },
115
115
  React.createElement(DayCell, { date: w.sunday, month: month, day: props.DateTime.date(), onClick: function (evt) { evt.stopPropagation(); setDate(w.sunday); } }),
116
116
  React.createElement(DayCell, { date: w.monday, month: month, day: props.DateTime.date(), onClick: function (evt) { evt.stopPropagation(); setDate(w.monday); } }),
117
117
  React.createElement(DayCell, { date: w.tuesday, month: month, day: props.DateTime.date(), onClick: function (evt) { evt.stopPropagation(); setDate(w.tuesday); } }),
@@ -142,7 +142,7 @@ var DayCell = function (props) {
142
142
  var _b = React.useState(false), hover = _b[0], setHover = _b[1];
143
143
  var _c = React.useState(false), disabled = _c[0], setDisabled = _c[1];
144
144
  React.useEffect(function () {
145
- setActive(props.date.date() === props.day);
145
+ setActive(props.date.date() === props.day && props.month === props.date.month());
146
146
  setDisabled(props.date.month() !== props.month);
147
147
  }, [props.month, props.date, props.day]);
148
148
  var color = (disabled ? '#777' : (active ? '#fff' : undefined));
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.38",
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
  }