@gpa-gemstone/react-forms 1.1.33 → 1.1.35

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 (6) hide show
  1. package/lib/Input.d.ts +4 -1
  2. package/lib/Input.js +11 -7
  3. package/lib/MutliCheckBoxSelect.d.ts +5 -2
  4. package/lib/MutliCheckBoxSelect.js +49 -31
  5. package/lib/TextArea.js +3 -1
  6. package/package.json +58 -58
package/lib/Input.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- /// <reference types="react" />
1
+ import * as React from 'react';
2
2
  interface IProps<T> {
3
3
  Record: T;
4
4
  Field: keyof T;
@@ -9,6 +9,9 @@ interface IProps<T> {
9
9
  Disabled?: boolean;
10
10
  Type?: 'number' | 'text' | 'password' | 'email' | 'color' | 'integer';
11
11
  Help?: string | JSX.Element;
12
+ Style?: React.CSSProperties;
13
+ AllowNull?: boolean;
14
+ Size?: 'small' | 'large';
12
15
  }
13
16
  export default function Input<T>(props: IProps<T>): JSX.Element;
14
17
  export {};
package/lib/Input.js CHANGED
@@ -55,14 +55,15 @@ function Input(props) {
55
55
  function valueChange(value) {
56
56
  var _a, _b, _c;
57
57
  setInternal(true);
58
+ var allowNull = props.AllowNull === undefined ? false : props.AllowNull;
58
59
  if (props.Type === 'number') {
59
- if ((0, helper_functions_1.IsNumber)(value)) {
60
+ if ((0, helper_functions_1.IsNumber)(value) || (value === '' && allowNull)) {
60
61
  props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = value !== '' ? parseFloat(value) : null, _a)));
61
62
  setHeldVal(value);
62
63
  }
63
64
  }
64
65
  else if (props.Type === 'integer') {
65
- if ((0, helper_functions_1.IsInteger)(value)) {
66
+ if ((0, helper_functions_1.IsInteger)(value) || (value === '' && allowNull)) {
66
67
  props.Setter(__assign(__assign({}, props.Record), (_b = {}, _b[props.Field] = value !== '' ? parseFloat(value) : null, _b)));
67
68
  setHeldVal(value);
68
69
  }
@@ -72,12 +73,15 @@ function Input(props) {
72
73
  setHeldVal(value);
73
74
  }
74
75
  }
75
- return (React.createElement("div", { className: "form-group" },
76
- (props.Label !== "") ?
76
+ var showLabel = props.Label !== "";
77
+ var showHelpIcon = props.Help !== undefined;
78
+ var label = props.Label === undefined ? props.Field : props.Label;
79
+ return (React.createElement("div", { className: "form-control " + (props.Size === 'large' ? 'form-control-lg' : '') + (props.Size === 'small' ? 'form-control-sm' : ''), style: props.Style },
80
+ showHelpIcon || showLabel ?
77
81
  React.createElement("label", null,
78
- props.Label === undefined ? props.Field : props.Label,
79
- 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,
80
- props.Help !== undefined ?
82
+ showLabel ? label : '',
83
+ showHelpIcon ? 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,
84
+ showHelpIcon ?
81
85
  React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
82
86
  : null,
83
87
  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 }),
package/lib/MutliCheckBoxSelect.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  /// <reference types="react" />
2
- declare const MultiSelect: (props: {
2
+ interface IProps {
3
+ Label?: string;
3
4
  Options: {
4
5
  Value: number;
5
6
  Text: string;
@@ -10,5 +11,7 @@ declare const MultiSelect: (props: {
10
11
  Text: string;
11
12
  Selected: boolean;
12
13
  }[]) => void;
13
- }) => JSX.Element;
14
+ Help?: string | JSX.Element;
15
+ }
16
+ declare const MultiSelect: (props: IProps) => JSX.Element;
14
17
  export default MultiSelect;
package/lib/MutliCheckBoxSelect.js CHANGED
@@ -22,10 +22,17 @@
22
22
  //
23
23
  // ******************************************************************************************************
24
24
  Object.defineProperty(exports, "__esModule", { value: true });
25
+ var helper_functions_1 = require("@gpa-gemstone/helper-functions");
25
26
  var React = require("react");
27
+ var HelperMessage_1 = require("./HelperMessage");
26
28
  var MultiSelect = function (props) {
27
29
  var _a = React.useState(false), show = _a[0], setShow = _a[1];
30
+ var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
31
+ var _c = React.useState(""), guid = _c[0], setGuid = _c[1];
28
32
  var multiSelect = React.useRef(null);
33
+ React.useEffect(function () {
34
+ setGuid((0, helper_functions_1.CreateGuid)());
35
+ }, []);
29
36
  function HandleShow(evt) {
30
37
  if (multiSelect.current === null)
31
38
  setShow(!show);
@@ -40,36 +47,47 @@ var MultiSelect = function (props) {
40
47
  document.removeEventListener('mousedown', HandleShow, false);
41
48
  };
42
49
  }, []);
43
- return (React.createElement("div", { ref: multiSelect, style: { position: 'relative', display: 'inline-block', width: 'inherit' } },
44
- React.createElement("button", { type: "button", style: { border: '1px solid #ced4da', padding: '.375rem .75rem', fontSize: '1rem', borderRadius: '.25rem' }, className: "btn form-control dropdown-toggle", onClick: HandleShow },
45
- props.Options.filter(function (x) { return x.Selected; }).length !== props.Options.length
46
- ? props.Options.filter(function (x) { return x.Selected; }).length
47
- : 'All ',
48
- ' ',
49
- "Selected"),
50
- React.createElement("div", { style: {
51
- maxHeight: window.innerHeight * 0.75,
52
- overflowY: 'auto',
53
- padding: '10 5',
54
- display: show ? 'block' : 'none',
55
- position: 'absolute',
56
- backgroundColor: '#fff',
57
- boxShadow: '0px 8px 16px 0px rgba(0,0,0,0.2)',
58
- zIndex: 401,
59
- minWidth: '100%',
60
- } },
61
- React.createElement("table", { className: "table", style: { margin: 0 } },
62
- React.createElement("tbody", null,
63
- React.createElement("tr", { onClick: function (evt) {
64
- evt.preventDefault();
65
- props.OnChange(evt, props.Options.filter(function (x) { return x.Selected === (props.Options.filter(function (o) { return o.Selected; }).length === props.Options.length); }));
66
- } },
67
- React.createElement("td", null,
68
- React.createElement("input", { type: "checkbox", checked: props.Options.filter(function (x) { return x.Selected; }).length === props.Options.length, onChange: function () { return null; } })),
69
- React.createElement("td", null, "All")),
70
- props.Options.map(function (f, i) { return (React.createElement("tr", { key: i, onClick: function (evt) { return props.OnChange(evt, [f]); } },
71
- React.createElement("td", null,
72
- React.createElement("input", { type: "checkbox", checked: f.Selected, onChange: function () { return null; } })),
73
- React.createElement("td", null, f.Text))); }))))));
50
+ var showLabel = props.Label !== "";
51
+ var showHelpIcon = props.Help !== undefined;
52
+ var label = props.Label === undefined ? 'Select' : props.Label;
53
+ return (React.createElement("div", { className: "form-group" },
54
+ showLabel || showHelpIcon ?
55
+ React.createElement("label", null,
56
+ showLabel ? label : '',
57
+ showHelpIcon ? 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
+ showHelpIcon ?
59
+ React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
60
+ : null,
61
+ React.createElement("div", { ref: multiSelect, style: { position: 'relative', display: 'block', width: 'inherit' } },
62
+ React.createElement("button", { type: "button", style: { border: '1px solid #ced4da', padding: '.375rem .75rem', fontSize: '1rem', borderRadius: '.25rem' }, className: "btn form-control dropdown-toggle", onClick: HandleShow },
63
+ props.Options.filter(function (x) { return x.Selected; }).length !== props.Options.length
64
+ ? props.Options.filter(function (x) { return x.Selected; }).length
65
+ : 'All ',
66
+ ' ',
67
+ "Selected"),
68
+ React.createElement("div", { style: {
69
+ maxHeight: window.innerHeight * 0.75,
70
+ overflowY: 'auto',
71
+ padding: '10 5',
72
+ display: show ? 'block' : 'none',
73
+ position: 'absolute',
74
+ backgroundColor: '#fff',
75
+ boxShadow: '0px 8px 16px 0px rgba(0,0,0,0.2)',
76
+ zIndex: 401,
77
+ minWidth: '100%',
78
+ } },
79
+ React.createElement("table", { className: "table", style: { margin: 0 } },
80
+ React.createElement("tbody", null,
81
+ React.createElement("tr", { onClick: function (evt) {
82
+ evt.preventDefault();
83
+ props.OnChange(evt, props.Options.filter(function (x) { return x.Selected === (props.Options.filter(function (o) { return o.Selected; }).length === props.Options.length); }));
84
+ } },
85
+ React.createElement("td", null,
86
+ React.createElement("input", { type: "checkbox", checked: props.Options.filter(function (x) { return x.Selected; }).length === props.Options.length, onChange: function () { return null; } })),
87
+ React.createElement("td", null, "All")),
88
+ props.Options.map(function (f, i) { return (React.createElement("tr", { key: i, onClick: function (evt) { return props.OnChange(evt, [f]); } },
89
+ React.createElement("td", null,
90
+ React.createElement("input", { type: "checkbox", checked: f.Selected, onChange: function () { return null; } })),
91
+ React.createElement("td", null, f.Text))); })))))));
74
92
  };
75
93
  exports.default = MultiSelect;
package/lib/TextArea.js CHANGED
@@ -36,7 +36,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
36
36
  var React = require("react");
37
37
  function TextArea(props) {
38
38
  return (React.createElement("div", { className: "form-group" },
39
- React.createElement("label", null, props.Label == null ? props.Field : props.Label),
39
+ (props.Label !== "") ? React.createElement("label", null,
40
+ props.Label === undefined ? props.Field : props.Label,
41
+ " ") : null,
40
42
  React.createElement("textarea", { rows: props.Rows, className: props.Valid(props.Field) ? 'form-control' : 'form-control is-invalid', onChange: function (evt) {
41
43
  var record = __assign({}, props.Record);
42
44
  if (evt.target.value !== '')
package/package.json CHANGED
@@ -1,58 +1,58 @@
1
- {
2
- "name": "@gpa-gemstone/react-forms",
3
- "version": "1.1.33",
4
- "description": "React Form modules for gpa webapps",
5
- "main": "lib/index.js",
6
- "types": "lib/index.d.ts",
7
- "files": [
8
- "lib/**/*"
9
- ],
10
- "scripts": {
11
- "test": "jest --config jestconfig.json",
12
- "build": "tsc",
13
- "format": "prettier --write \"src/**/*.tsx\"",
14
- "lint": "tslint -p tsconfig.json",
15
- "prepare": "npm run build",
16
- "prepublishOnly": "npm test && npm run lint",
17
- "preversion": "npm run lint",
18
- "version": "npm run format && git add -A src",
19
- "postversion": "git push && git push --tags"
20
- },
21
- "repository": {
22
- "type": "git",
23
- "url": "https://github.com/GridProtectionAlliance/gpa-gemstone.git"
24
- },
25
- "keywords": [
26
- "React",
27
- "Table",
28
- "GSF",
29
- "Gemstone",
30
- "GridProtectionAlliance"
31
- ],
32
- "author": "GridProtectionAlliance",
33
- "license": "MIT",
34
- "bugs": {
35
- "url": "https://github.com/GridProtectionAlliance/gpa-gemstone/issues"
36
- },
37
- "homepage": "https://github.com/GridProtectionAlliance/gpa-gemstone#readme",
38
- "devDependencies": {
39
- "@types/jest": "^27.0.0",
40
- "jest": "^27.0.6",
41
- "prettier": "^2.3.2",
42
- "ts-jest": "^27.0.4",
43
- "tslint": "^6.1.3",
44
- "tslint-config-prettier": "^1.18.0",
45
- "typescript": "4.4.4"
46
- },
47
- "dependencies": {
48
- "@gpa-gemstone/helper-functions": "0.0.17",
49
- "@types/react": "^17.0.14",
50
- "@types/styled-components": "^5.1.11",
51
- "react": "^18.2.0",
52
- "styled-components": "5.3.3",
53
- "moment": "2.29.4"
54
- },
55
- "publishConfig": {
56
- "access": "public"
57
- }
58
- }
1
+ {
2
+ "name": "@gpa-gemstone/react-forms",
3
+ "version": "1.1.35",
4
+ "description": "React Form modules for gpa webapps",
5
+ "main": "lib/index.js",
6
+ "types": "lib/index.d.ts",
7
+ "files": [
8
+ "lib/**/*"
9
+ ],
10
+ "scripts": {
11
+ "test": "jest --config jestconfig.json",
12
+ "build": "tsc",
13
+ "format": "prettier --write \"src/**/*.tsx\"",
14
+ "lint": "tslint -p tsconfig.json",
15
+ "prepare": "npm run build",
16
+ "prepublishOnly": "npm test && npm run lint",
17
+ "preversion": "npm run lint",
18
+ "version": "npm run format && git add -A src",
19
+ "postversion": "git push && git push --tags"
20
+ },
21
+ "repository": {
22
+ "type": "git",
23
+ "url": "https://github.com/GridProtectionAlliance/gpa-gemstone.git"
24
+ },
25
+ "keywords": [
26
+ "React",
27
+ "Table",
28
+ "GSF",
29
+ "Gemstone",
30
+ "GridProtectionAlliance"
31
+ ],
32
+ "author": "GridProtectionAlliance",
33
+ "license": "MIT",
34
+ "bugs": {
35
+ "url": "https://github.com/GridProtectionAlliance/gpa-gemstone/issues"
36
+ },
37
+ "homepage": "https://github.com/GridProtectionAlliance/gpa-gemstone#readme",
38
+ "devDependencies": {
39
+ "@types/jest": "^27.0.0",
40
+ "jest": "^27.0.6",
41
+ "prettier": "^2.3.2",
42
+ "ts-jest": "^27.0.4",
43
+ "tslint": "^6.1.3",
44
+ "tslint-config-prettier": "^1.18.0",
45
+ "typescript": "4.4.4"
46
+ },
47
+ "dependencies": {
48
+ "@gpa-gemstone/helper-functions": "0.0.18",
49
+ "@types/react": "^17.0.14",
50
+ "@types/styled-components": "^5.1.11",
51
+ "react": "^18.2.0",
52
+ "styled-components": "5.3.3",
53
+ "moment": "2.29.4"
54
+ },
55
+ "publishConfig": {
56
+ "access": "public"
57
+ }
58
+ }