@gpa-gemstone/react-forms 1.1.14 → 1.1.20

package/README.md

@@ -1,38 +1,38 @@
-# react-forms
-
-![gemstone logo](https://raw.githubusercontent.com/gemstone/web/master/docs/img/gemstone-wide-600.png)
-
-The Gemstone Web Library organizes all Gemstone functionality related to web.
-
-[![GitHub license](https://img.shields.io/github/license/gemstone/web?color=4CC61E)](https://github.com/gemstone/web/blob/master/LICENSE)
-
-This library includes helpful npm package for creating strongly typed form components in react.
-
-* Input
-* CheckBox
-* TextArea
-* DatePicker
-* Select
-* EnumCheckBoxes
-* DateRangePicker
-* ArrayCheckBoxes
-* ArrayMultiSelect
-* MultiCheckBoxSelect
-* DoubleInput
-
-## Usage
-
-```ts
-    interface iType = { Field1: string, Field2: number, Field3: boolean, Field4: string, Field5: string, EnumField: number, FromField: string, ToField: string}
-    let record:iType = {Field1: 'Hello', Field2: 1, Field3: false, Field4: 'alot of text blah blah blah', Field5: '01/01/2021', FromField: '01/01/2020', ToField: '01/01/2021'}
-    let options = [{Value: 1, Label: 'first'}, {Value:2, Label: 'second'}]
-
-    <Input<iType> Record={record} Field="Field1" Setter={(event) => record.Field1 = event.target.value} Valid={(field) => /*some criteria*/}>
-    <CheckBox<iType> Record={record} Field="Field3" Setter={(event) => record.Field3 = event.target.value}}>
-    <Select<iType> Record={record} Field="Field2" Setter={(event) => record.Field3 = event.target.value}} Options={options}>
-    <TextArea<iType> Record={record} Field="Field4" Setter={(event) => record.Field1 = event.target.value} Valid={(field) => /*some criteria*/}>
-    <DatePicker<iType> Record={record} Field="Field5" Setter={(event) => record.Field1 = event.target.value}>
-    <DateRangePicker<iType> Record={record} FromField="FromField" ToField="ToField" Label="Date Range" Setter={(event) => record.Field1 = event.target.value}>
-    <EnumCheckBoxes<iType> Record={record} Field="EnumField" Setter={(event) => record.Field3 = event.target.value}} Enum={['Monday', 'Tuesday','Wednesday']}>
-	<DoubleInput<iType> Record={record} Field1="Field4" Field1="Field5" Setter={(r) => record = r} Valid={(field) => /*some criteria*/}>
-```
+# react-forms
+
+![gemstone logo](https://raw.githubusercontent.com/gemstone/web/master/docs/img/gemstone-wide-600.png)
+
+The Gemstone Web Library organizes all Gemstone functionality related to web.
+
+[![GitHub license](https://img.shields.io/github/license/gemstone/web?color=4CC61E)](https://github.com/gemstone/web/blob/master/LICENSE)
+
+This library includes helpful npm package for creating strongly typed form components in react.
+
+* Input
+* CheckBox
+* TextArea
+* DatePicker
+* Select
+* EnumCheckBoxes
+* DateRangePicker
+* ArrayCheckBoxes
+* ArrayMultiSelect
+* MultiCheckBoxSelect
+* DoubleInput
+
+## Usage
+
+```ts
+    interface iType = { Field1: string, Field2: number, Field3: boolean, Field4: string, Field5: string, EnumField: number, FromField: string, ToField: string}
+    let record:iType = {Field1: 'Hello', Field2: 1, Field3: false, Field4: 'alot of text blah blah blah', Field5: '01/01/2021', FromField: '01/01/2020', ToField: '01/01/2021'}
+    let options = [{Value: 1, Label: 'first'}, {Value:2, Label: 'second'}]
+
+    <Input<iType> Record={record} Field="Field1" Setter={(event) => record.Field1 = event.target.value} Valid={(field) => /*some criteria*/}>
+    <CheckBox<iType> Record={record} Field="Field3" Setter={(event) => record.Field3 = event.target.value}}>
+    <Select<iType> Record={record} Field="Field2" Setter={(event) => record.Field3 = event.target.value}} Options={options}>
+    <TextArea<iType> Record={record} Field="Field4" Setter={(event) => record.Field1 = event.target.value} Valid={(field) => /*some criteria*/}>
+    <DatePicker<iType> Record={record} Field="Field5" Setter={(event) => record.Field1 = event.target.value}>
+    <DateRangePicker<iType> Record={record} FromField="FromField" ToField="ToField" Label="Date Range" Setter={(event) => record.Field1 = event.target.value}>
+    <EnumCheckBoxes<iType> Record={record} Field="EnumField" Setter={(event) => record.Field3 = event.target.value}} Enum={['Monday', 'Tuesday','Wednesday']}>
+	<DoubleInput<iType> Record={record} Field1="Field4" Field1="Field5" Setter={(r) => record = r} Valid={(field) => /*some criteria*/}>
+```

package/lib/ArrayCheckBoxes.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export default function ArrayCheckBoxes<T>(props: {
     Record: T;
     Field: keyof T;

package/lib/ArrayCheckBoxes.js

@@ -32,22 +32,26 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
 function ArrayCheckBoxes(props) {
     var Remove = function (cb) {
-        var a = __spreadArray([], props.Record[props.Field]);
+        var a = __spreadArray([], props.Record[props.Field], true);
         var i = a.indexOf(cb.ID);
         a.splice(i, 1);
         return a;
     };
     var Add = function (cb) {
-        var a = __spreadArray([], props.Record[props.Field]);
+        var a = __spreadArray([], props.Record[props.Field], true);
         var i = a.indexOf(cb.ID);
         if (i < 0)
             a.push(cb.ID);

package/lib/DateRangePicker.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export default function DateRangePicker<T>(props: {
     Record: T;
     FromField: keyof T;

package/lib/DoubleInput.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export default function DoubleInput<T>(props: {
     Record: T;
     Field1: keyof T;

package/lib/EnumCheckBoxes.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export default function EnumCheckBoxes<T>(props: {
     Record: T;
     Field: keyof T;

package/lib/HelperMessage.js

@@ -36,7 +36,7 @@ var HelperMessage = function (props) {
     var _c = React.useState(0), width = _c[0], setWidth = _c[1];
     var _d = React.useState(""), guid = _d[0], setGuid = _d[1];
     React.useEffect(function () {
-        setGuid(helper_functions_1.CreateGuid());
+        setGuid((0, helper_functions_1.CreateGuid)());
     }, []);
     React.useLayoutEffect(function () {
         var _a = UpdatePosition(), t = _a[0], l = _a[1], w = _a[2];
@@ -52,11 +52,11 @@ var HelperMessage = function (props) {
         var target = document.querySelectorAll("[data-help" + (props.Target === undefined ? '' : "=\"" + props.Target + "\"") + "]");
         if (target.length === 0)
             return [-999, -999];
-        var targetLocation = helper_functions_1.GetNodeSize(target[0]);
+        var targetLocation = (0, helper_functions_1.GetNodeSize)(target[0]);
         var message = document.getElementById(guid);
         if (message === null)
             return [-999, -999];
-        var msgLocation = helper_functions_1.GetNodeSize(message);
+        var msgLocation = (0, helper_functions_1.GetNodeSize)(message);
         var offset = 5;
         var result = [0, 0, 0];
         result[0] = targetLocation.top + targetLocation.height + offset;

package/lib/Input.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface IProps<T> {
     Record: T;
     Field: keyof T;

package/lib/Input.js

@@ -42,8 +42,15 @@ function Input(props) {
     var _a = React.useState(""), guid = _a[0], setGuid = _a[1];
     var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
     React.useEffect(function () {
-        setGuid(helper_functions_1.CreateGuid());
+        setGuid((0, helper_functions_1.CreateGuid)());
     }, []);
+    function valueChange(evt) {
+        var _a, _b;
+        if (props.Type === 'number')
+            props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = evt.target.value !== '' ? parseFloat(evt.target.value) : null, _a)));
+        else
+            props.Setter(__assign(__assign({}, props.Record), (_b = {}, _b[props.Field] = evt.target.value !== '' ? evt.target.value : null, _b)));
+    }
     return (React.createElement("div", { className: "form-group" },
         React.createElement("label", null,
             props.Label == null ? props.Field : props.Label,
@@ -51,10 +58,7 @@ function Input(props) {
         props.Help !== undefined ?
             React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
             : null,
-        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) {
-                var _a;
-                return props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = evt.target.value !== '' ? evt.target.value : null, _a)));
-            }, value: props.Record[props.Field] == null ? '' : props.Record[props.Field].toString(), disabled: props.Disabled == null ? false : props.Disabled }),
+        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: props.Record[props.Field] == null ? '' : props.Record[props.Field].toString(), disabled: props.Disabled == null ? false : props.Disabled }),
         React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field + ' is a required field.' : props.Feedback)));
 }
 exports.default = Input;

package/lib/MutliCheckBoxSelect.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const MultiSelect: (props: {
     Options: {
         Value: number;

package/lib/MutliCheckBoxSelect.js

@@ -27,7 +27,6 @@ var MultiSelect = function (props) {
     var _a = React.useState(false), show = _a[0], setShow = _a[1];
     var multiSelect = React.useRef(null);
     function HandleShow(evt) {
-        evt.preventDefault();
         if (multiSelect.current === null)
             setShow(!show);
         else if (!multiSelect.current.contains(evt.target))

package/lib/Select.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface IProps<T> {
     Record: T;
     Field: keyof T;

package/lib/Select.js

@@ -42,7 +42,7 @@ function Select(props) {
     var _a = React.useState(""), guid = _a[0], setGuid = _a[1];
     var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
     React.useEffect(function () {
-        setGuid(helper_functions_1.CreateGuid());
+        setGuid((0, helper_functions_1.CreateGuid)());
     }, []);
     return (React.createElement("div", { className: "form-group" },
         React.createElement("label", null,

package/lib/TextArea.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export default function TextArea<T>(props: {
     Rows: number;
     Record: T;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpa-gemstone/react-forms",
-  "version": "1.1.14",
+  "version": "1.1.20",
   "description": "React Form modules for gpa webapps",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -36,20 +36,20 @@
   },
   "homepage": "https://github.com/GridProtectionAlliance/gpa-gemstone#readme",
   "devDependencies": {
-    "@types/jest": "^26.0.4",
+    "@types/jest": "^27.0.0",
     "jest": "^27.0.6",
     "prettier": "^2.3.2",
-    "ts-jest": "^27.0.3",
+    "ts-jest": "^27.0.4",
     "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.18.0",
-    "typescript": "4.3.4"
+    "typescript": "4.4.4"
   },
   "dependencies": {
-    "@gpa-gemstone/helper-functions": "0.0.9",
+    "@gpa-gemstone/helper-functions": "0.0.14",
     "@types/react": "^17.0.14",
     "@types/styled-components": "^5.1.11",
     "react": "^17.0.2",
-    "styled-components": "^5.3.0"
+    "styled-components": "^5.3.3"
   },
   "publishConfig": {
     "access": "public"