@gpa-gemstone/react-forms 1.1.39 → 1.1.41

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 (9) hide show
  1. package/lib/DatePicker.d.ts +1 -0
  2. package/lib/DatePicker.js +37 -7
  3. package/lib/DateTimeUI/Calender.js +5 -3
  4. package/lib/DateTimeUI/Clock.js +35 -3
  5. package/lib/HelperMessage.js +1 -1
  6. package/lib/Input.js +1 -1
  7. package/lib/Select.js +0 -2
  8. package/lib/StylableSelect.js +0 -1
  9. package/package.json +9 -8
package/lib/DatePicker.d.ts CHANGED
@@ -9,6 +9,7 @@ interface IProps<T> {
9
9
  Feedback?: string;
10
10
  Format?: string;
11
11
  Type?: ('datetime-local' | 'date');
12
+ Help?: string | JSX.Element;
12
13
  }
13
14
  export default function DateTimePicker<T>(props: IProps<T>): JSX.Element;
14
15
  export {};
package/lib/DatePicker.js CHANGED
@@ -37,18 +37,24 @@ var React = require("react");
37
37
  var moment = require("moment");
38
38
  var DateTimePopup_1 = require("./DateTimeUI/DateTimePopup");
39
39
  var helper_functions_1 = require("@gpa-gemstone/helper-functions");
40
+ var HelperMessage_1 = require("./HelperMessage");
40
41
  function DateTimePicker(props) {
41
42
  // Formats that will be used for dateBoxes
42
43
  var boxFormat = "YYYY-MM-DD" + (props.Type === undefined || props.Type === 'date' ? "" : "[T]HH:mm:ss");
43
44
  var recordFormat = props.Format !== undefined ? props.Format : "YYYY-MM-DD" + (props.Type === undefined || props.Type === 'date' ? "" : "[T]HH:mm:ss.SSS[Z]");
44
45
  var parse = function (r) { return moment(props.Record[props.Field], recordFormat); };
45
46
  var divRef = React.useRef(null);
47
+ var _a = React.useState(""), guid = _a[0], setGuid = _a[1];
48
+ var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
46
49
  // Adds a buffer between the outside props and what the box is reading to prevent box overwriting every render with a keystroke
47
- var _a = React.useState(parse(props.Record).format(boxFormat)), boxRecord = _a[0], setBoxRecord = _a[1];
48
- var _b = React.useState(parse(props.Record)), pickerRecord = _b[0], setPickerRecord = _b[1];
49
- var _c = React.useState(false), showOverlay = _c[0], setShowOverlay = _c[1];
50
- var _d = React.useState(0), top = _d[0], setTop = _d[1];
51
- var _e = React.useState(0), left = _e[0], setLeft = _e[1];
50
+ var _c = React.useState(parse(props.Record).format(boxFormat)), boxRecord = _c[0], setBoxRecord = _c[1];
51
+ var _d = React.useState(parse(props.Record)), pickerRecord = _d[0], setPickerRecord = _d[1];
52
+ var _e = React.useState(false), showOverlay = _e[0], setShowOverlay = _e[1];
53
+ var _f = React.useState(0), top = _f[0], setTop = _f[1];
54
+ var _g = React.useState(0), left = _g[0], setLeft = _g[1];
55
+ React.useEffect(function () {
56
+ setGuid((0, helper_functions_1.CreateGuid)());
57
+ }, []);
52
58
  React.useEffect(function () {
53
59
  setPickerRecord(parse(props.Record));
54
60
  setBoxRecord(parse(props.Record).format(boxFormat));
@@ -66,6 +72,11 @@ function DateTimePicker(props) {
66
72
  }, [pickerRecord]);
67
73
  React.useLayoutEffect(function () {
68
74
  var node = (divRef.current !== null ? (0, helper_functions_1.GetNodeSize)(divRef.current) : { top: top, left: left, height: 0, width: 0 });
75
+ if (node.height === 0 && node.width === 0) {
76
+ setLeft(0);
77
+ setTop(-9999);
78
+ return;
79
+ }
69
80
  setLeft(node.left + 0.5 * node.width);
70
81
  setTop(node.top + node.height + 10);
71
82
  });
@@ -77,12 +88,31 @@ function DateTimePicker(props) {
77
88
  if (evt.target.closest(".gpa-gemstone-datetime") == null)
78
89
  setShowOverlay(false);
79
90
  }
91
+ var showLabel = props.Label !== "";
92
+ var showHelpIcon = props.Help !== undefined;
93
+ var label = props.Label === undefined ? props.Field : props.Label;
80
94
  return (React.createElement("div", { className: "form-group", ref: divRef },
95
+ showHelpIcon || showLabel ?
96
+ React.createElement("label", null,
97
+ showLabel ? label : '',
98
+ showHelpIcon ? React.createElement("div", { style: {
99
+ width: 20,
100
+ height: 20,
101
+ borderRadius: '50%',
102
+ display: 'inline-block',
103
+ background: '#0D6EFD',
104
+ marginLeft: 10,
105
+ textAlign: 'center',
106
+ fontWeight: 'bold'
107
+ }, onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); } }, " ? ") : null) : null,
108
+ showHelpIcon ?
109
+ React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
110
+ : null,
81
111
  (props.Label !== "") ?
82
112
  React.createElement("label", null, props.Label == null ? props.Field : props.Label) : null,
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) {
113
+ React.createElement("input", { "data-help": guid, className: "gpa-gemstone-datetime form-control" + (props.Valid(props.Field) ? '' : ' is-invalid'), type: props.Type === undefined ? 'date' : props.Type, onChange: function (evt) {
84
114
  setBoxRecord(evt.target.value);
85
- }, onFocus: function () { setShowOverlay(true); }, value: boxRecord, disabled: props.Disabled === undefined ? false : props.Disabled, onClick: function (e) { e.preventDefault(); } }),
115
+ }, onFocus: function () { setShowOverlay(true); }, value: boxRecord, disabled: props.Disabled === undefined ? false : props.Disabled, onClick: function (e) { e.preventDefault(); }, step: "1" }),
86
116
  React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field.toString() + ' is a required field.' : props.Feedback),
87
117
  React.createElement(DateTimePopup_1.default, { Setter: function (d) { setPickerRecord(d); if (props.Type === 'date')
88
118
  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
@@ -31,13 +31,13 @@ function Calender(props) {
31
31
  var _d = React.useState('month'), mode = _d[0], setMode = _d[1];
32
32
  var _e = React.useState('None'), hover = _e[0], setHover = _e[1];
33
33
  React.useEffect(function () {
34
- setMonth(props.DateTime.month());
35
- setYear(props.DateTime.year());
34
+ setMonth(isNaN(props.DateTime.month()) ? 0 : props.DateTime.month());
35
+ setYear(isNaN(props.DateTime.year()) ? moment.utc().year() : props.DateTime.year());
36
36
  }, [props.DateTime]);
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'),
@@ -84,6 +84,8 @@ function Calender(props) {
84
84
  }
85
85
  function setDate(d) {
86
86
  var ud = moment(props.DateTime);
87
+ if (!ud.isValid())
88
+ ud = moment.utc().startOf('d');
87
89
  ud.year(d.year()).month(d.month()).date(d.date());
88
90
  props.Setter(ud);
89
91
  }
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];
@@ -38,8 +39,12 @@ function Clock(props) {
38
39
  var h = parseInt(hour, 10);
39
40
  var m = parseInt(minute, 10);
40
41
  var s = parseInt(second, 10);
42
+ if (isNaN(h) || isNaN(m) || isNaN(s))
43
+ return;
41
44
  if (h !== props.DateTime.hour() || m !== props.DateTime.minute() || s !== props.DateTime.second()) {
42
45
  var d = moment(props.DateTime);
46
+ if (!d.isValid())
47
+ d = moment.utc().startOf('d');
43
48
  d.hour(h).minute(m).second(s);
44
49
  props.Setter(d);
45
50
  }
@@ -74,17 +79,17 @@ function Clock(props) {
74
79
  React.createElement("tr", { style: { height: 20, lineHeight: '20px' } },
75
80
  React.createElement("td", { style: { width: 50, padding: 5, } },
76
81
  " ",
77
- hour,
82
+ React.createElement(TimeInput, { value: hour, setValue: setHour, max: 23 }),
78
83
  " "),
79
84
  React.createElement("td", { style: { width: 20, padding: 5, } }, " : "),
80
85
  React.createElement("td", { style: { width: 50, padding: 5, } },
81
86
  " ",
82
- minute,
87
+ React.createElement(TimeInput, { value: minute, setValue: setMinute, max: 59 }),
83
88
  " "),
84
89
  React.createElement("td", { style: { width: 20, padding: 5, } }, " : "),
85
90
  React.createElement("td", { style: { width: 50, padding: 5, } },
86
91
  " ",
87
- second,
92
+ React.createElement(TimeInput, { value: second, setValue: setSecond, max: 59 }),
88
93
  " ")),
89
94
  React.createElement("tr", { style: { height: 20, lineHeight: '20px' } },
90
95
  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 +99,30 @@ function Clock(props) {
94
99
  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
100
  }
96
101
  exports.default = Clock;
102
+ var TimeInput = function (props) {
103
+ var _a = React.useState(props.value.toString()), val = _a[0], setVal = _a[1];
104
+ var _b = React.useState(false), error = _b[0], setError = _b[1];
105
+ React.useEffect(function () {
106
+ if (props.value.length > 5) {
107
+ setVal("");
108
+ return;
109
+ }
110
+ setVal(props.value.toString());
111
+ }, [props.value]);
112
+ React.useEffect(function () {
113
+ if (!(0, helper_functions_1.IsInteger)(val))
114
+ return;
115
+ var v = parseInt(val, 10);
116
+ if (v > props.max || v < 0) {
117
+ setError(true);
118
+ return;
119
+ }
120
+ setError(false);
121
+ props.setValue(val);
122
+ }, [val, error]);
123
+ return React.createElement("div", { className: "form-group form-group-sm", style: { width: 45 } },
124
+ React.createElement("input", { type: "text", className: !error ? 'form-control' : 'form-control is-invalid', onChange: function (evt) {
125
+ if ((0, helper_functions_1.IsInteger)(evt.target.value))
126
+ setVal(evt.target.value);
127
+ }, value: val }));
128
+ };
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/Input.js CHANGED
@@ -100,7 +100,7 @@ function Input(props) {
100
100
  showHelpIcon ?
101
101
  React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
102
102
  : null,
103
- 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, onBlur: onBlur }),
103
+ 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, onBlur: onBlur, step: 'any' }),
104
104
  React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field + ' is a required field.' : props.Feedback)));
105
105
  }
106
106
  exports.default = Input;
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.41",
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
  }