@gpa-gemstone/react-forms 1.1.57 → 1.1.58
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.
- package/lib/ArrayCheckBoxes.js +6 -4
- package/lib/InputWithButton.d.ts +23 -0
- package/lib/InputWithButton.js +107 -0
- package/lib/index.d.ts +2 -1
- package/lib/index.js +3 -1
- package/package.json +1 -1
package/lib/ArrayCheckBoxes.js
CHANGED
|
@@ -43,6 +43,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
|
43
43
|
};
|
|
44
44
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
45
45
|
var React = require("react");
|
|
46
|
+
var helper_functions_1 = require("@gpa-gemstone/helper-functions");
|
|
46
47
|
function ArrayCheckBoxes(props) {
|
|
47
48
|
var Remove = function (cb) {
|
|
48
49
|
var a = __spreadArray([], props.Record[props.Field], true);
|
|
@@ -58,20 +59,21 @@ function ArrayCheckBoxes(props) {
|
|
|
58
59
|
a.sort();
|
|
59
60
|
return a;
|
|
60
61
|
};
|
|
62
|
+
var id = React.useRef("array-checkbox-" + (0, helper_functions_1.CreateGuid)());
|
|
61
63
|
return (React.createElement("div", { className: "form-group" },
|
|
62
64
|
React.createElement("label", null, props.Label == null ? props.Field : props.Label),
|
|
63
65
|
React.createElement("br", null),
|
|
64
66
|
React.createElement("div", { className: "form-check form-check-inline" },
|
|
65
|
-
React.createElement("input", { className: "form-check-input", type: "checkbox", checked: JSON.stringify(props.Record[props.Field]) === JSON.stringify(props.Checkboxes.map(function (x) { return x.ID; })), onChange: function (evt) {
|
|
67
|
+
React.createElement("input", { id: id.current + "-all", className: "form-check-input", type: "checkbox", checked: JSON.stringify(props.Record[props.Field]) === JSON.stringify(props.Checkboxes.map(function (x) { return x.ID; })), onChange: function (evt) {
|
|
66
68
|
var _a;
|
|
67
69
|
return props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = evt.target.checked ? props.Checkboxes.map(function (x) { return x.ID; }) : [], _a)));
|
|
68
70
|
} }),
|
|
69
|
-
React.createElement("label", { className: "form-check-label" }, "All")),
|
|
71
|
+
React.createElement("label", { htmlFor: id.current + "-all", className: "form-check-label" }, "All")),
|
|
70
72
|
props.Checkboxes.map(function (cb, i) { return (React.createElement("div", { key: i, className: "form-check form-check-inline" },
|
|
71
|
-
React.createElement("input", { className: "form-check-input", type: "checkbox", checked: props.Record[props.Field].find(function (x) { return cb.ID === x; }) !== undefined, onChange: function (evt) {
|
|
73
|
+
React.createElement("input", { id: id.current + "-" + i, className: "form-check-input", type: "checkbox", checked: props.Record[props.Field].find(function (x) { return cb.ID === x; }) !== undefined, onChange: function (evt) {
|
|
72
74
|
var _a;
|
|
73
75
|
return props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = evt.target.checked ? Add(cb) : Remove(cb), _a)));
|
|
74
76
|
} }),
|
|
75
|
-
React.createElement("label", { className: "form-check-label" }, cb.Label))); })));
|
|
77
|
+
React.createElement("label", { htmlFor: id.current + "-" + i, className: "form-check-label" }, cb.Label))); })));
|
|
76
78
|
}
|
|
77
79
|
exports.default = ArrayCheckBoxes;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
interface IProps<T> {
|
|
3
|
+
Record: T;
|
|
4
|
+
Field: keyof T;
|
|
5
|
+
Setter: (record: T) => void;
|
|
6
|
+
Valid: (field: keyof T) => boolean;
|
|
7
|
+
Label?: string;
|
|
8
|
+
Feedback?: string;
|
|
9
|
+
InputDisabled?: boolean;
|
|
10
|
+
Type?: 'number' | 'text' | 'password' | 'email' | 'color' | 'integer';
|
|
11
|
+
Help?: string | JSX.Element;
|
|
12
|
+
InputStyle?: React.CSSProperties;
|
|
13
|
+
AllowNull?: boolean;
|
|
14
|
+
Size?: 'small' | 'large';
|
|
15
|
+
DefaultValue?: number;
|
|
16
|
+
OnBtnClick: (evt: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
|
17
|
+
BtnLabel: string;
|
|
18
|
+
BtnClass?: string;
|
|
19
|
+
BtnDisabled?: boolean;
|
|
20
|
+
BtnStyle?: React.CSSProperties;
|
|
21
|
+
}
|
|
22
|
+
declare function InputWithButton<T>(props: IProps<T>): JSX.Element;
|
|
23
|
+
export default InputWithButton;
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
// ******************************************************************************************************
|
|
3
|
+
// InputWithButton.tsx - Gbtc
|
|
4
|
+
//
|
|
5
|
+
// Copyright � 2024, Grid Protection Alliance. All Rights Reserved.
|
|
6
|
+
//
|
|
7
|
+
// Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
|
|
8
|
+
// the NOTICE file distributed with this work for additional information regarding copyright ownership.
|
|
9
|
+
// The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
|
|
10
|
+
// file except in compliance with the License. You may obtain a copy of the License at:
|
|
11
|
+
//
|
|
12
|
+
// http://opensource.org/licenses/MIT
|
|
13
|
+
//
|
|
14
|
+
// Unless agreed to in writing, the subject software distributed under the License is distributed on an
|
|
15
|
+
// "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
|
|
16
|
+
// License for the specific language governing permissions and limitations.
|
|
17
|
+
//
|
|
18
|
+
// Code Modification History:
|
|
19
|
+
// ----------------------------------------------------------------------------------------------------
|
|
20
|
+
// 05/02/2024 - Preston Crawford
|
|
21
|
+
// Generated original version of source code.
|
|
22
|
+
//
|
|
23
|
+
// ******************************************************************************************************
|
|
24
|
+
var __assign = (this && this.__assign) || function () {
|
|
25
|
+
__assign = Object.assign || function(t) {
|
|
26
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
27
|
+
s = arguments[i];
|
|
28
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
29
|
+
t[p] = s[p];
|
|
30
|
+
}
|
|
31
|
+
return t;
|
|
32
|
+
};
|
|
33
|
+
return __assign.apply(this, arguments);
|
|
34
|
+
};
|
|
35
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
+
var React = require("react");
|
|
37
|
+
var HelperMessage_1 = require("./HelperMessage");
|
|
38
|
+
var helper_functions_1 = require("@gpa-gemstone/helper-functions");
|
|
39
|
+
function InputWithButton(props) {
|
|
40
|
+
var internal = React.useRef(false);
|
|
41
|
+
var _a = React.useState(""), guid = _a[0], setGuid = _a[1];
|
|
42
|
+
var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
|
|
43
|
+
var _c = React.useState(''), heldVal = _c[0], setHeldVal = _c[1]; // Need to buffer tha value because parseFloat will throw away trailing decimals or zeros
|
|
44
|
+
React.useEffect(function () {
|
|
45
|
+
setGuid((0, helper_functions_1.CreateGuid)());
|
|
46
|
+
}, []);
|
|
47
|
+
React.useEffect(function () {
|
|
48
|
+
if (!internal.current) {
|
|
49
|
+
setHeldVal(props.Record[props.Field] == null ? '' : props.Record[props.Field].toString());
|
|
50
|
+
}
|
|
51
|
+
internal.current = false;
|
|
52
|
+
}, [props.Record[props.Field]]);
|
|
53
|
+
function onBlur() {
|
|
54
|
+
var _a;
|
|
55
|
+
var _b;
|
|
56
|
+
var allowNull = props.AllowNull === undefined ? false : props.AllowNull;
|
|
57
|
+
if (!allowNull && (props.Type === 'number' || props.Type === 'integer') && heldVal === '') {
|
|
58
|
+
internal.current = false;
|
|
59
|
+
props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = (_b = props.DefaultValue) !== null && _b !== void 0 ? _b : 0, _a)));
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
function valueChange(value) {
|
|
63
|
+
var _a, _b, _c;
|
|
64
|
+
internal.current = true;
|
|
65
|
+
var allowNull = props.AllowNull === undefined ? false : props.AllowNull;
|
|
66
|
+
if (props.Type === 'number') {
|
|
67
|
+
var v = (value.length > 0 && value[0] === '.' ? ("0" + value) : value);
|
|
68
|
+
if ((0, helper_functions_1.IsNumber)(v) || (v === '' && allowNull)) {
|
|
69
|
+
props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = v !== '' ? parseFloat(v) : null, _a)));
|
|
70
|
+
setHeldVal(v);
|
|
71
|
+
}
|
|
72
|
+
else if (v === '') {
|
|
73
|
+
setHeldVal(v);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
else if (props.Type === 'integer') {
|
|
77
|
+
if ((0, helper_functions_1.IsInteger)(value) || (value === '' && allowNull)) {
|
|
78
|
+
props.Setter(__assign(__assign({}, props.Record), (_b = {}, _b[props.Field] = value !== '' ? parseFloat(value) : null, _b)));
|
|
79
|
+
setHeldVal(value);
|
|
80
|
+
}
|
|
81
|
+
else if (value === '') {
|
|
82
|
+
setHeldVal(value);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
else {
|
|
86
|
+
props.Setter(__assign(__assign({}, props.Record), (_c = {}, _c[props.Field] = value !== '' ? value : null, _c)));
|
|
87
|
+
setHeldVal(value);
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
var showLabel = props.Label !== "";
|
|
91
|
+
var showHelpIcon = props.Help !== undefined;
|
|
92
|
+
var label = props.Label === undefined ? props.Field : props.Label;
|
|
93
|
+
return (React.createElement("div", { className: "form-group " + (props.Size === 'large' ? 'form-group-lg' : '') + (props.Size === 'small' ? 'form-group-sm' : ''), style: props.InputStyle },
|
|
94
|
+
showHelpIcon || showLabel ?
|
|
95
|
+
React.createElement("label", null,
|
|
96
|
+
showLabel ? label : '',
|
|
97
|
+
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,
|
|
98
|
+
showHelpIcon ?
|
|
99
|
+
React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
|
|
100
|
+
: null,
|
|
101
|
+
React.createElement("div", { className: "input-group" },
|
|
102
|
+
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.InputDisabled == null ? false : props.InputDisabled, onBlur: onBlur, step: 'any' }),
|
|
103
|
+
React.createElement("div", { className: "input-group-prepend" },
|
|
104
|
+
React.createElement("button", { className: props.BtnClass != null ? props.BtnClass : "btn btn-outline-secondary", style: props.BtnStyle, disabled: props.BtnDisabled == null ? false : props.BtnDisabled, type: "button", onClick: function (evt) { return props.OnBtnClick(evt); } }, props.BtnLabel)),
|
|
105
|
+
React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field.toString() + ' is a required field.' : props.Feedback))));
|
|
106
|
+
}
|
|
107
|
+
exports.default = InputWithButton;
|
package/lib/index.d.ts
CHANGED
|
@@ -14,4 +14,5 @@ import StylableSelect from './StylableSelect';
|
|
|
14
14
|
import ColorPicker from './ColorPicker';
|
|
15
15
|
import SearchableSelect from './SearchableSelect';
|
|
16
16
|
import ToggleSwitch from './ToggleSwitch';
|
|
17
|
-
|
|
17
|
+
import InputWithButton from './InputWithButton';
|
|
18
|
+
export { CheckBox, Input, DatePicker, Select, TextArea, DateRangePicker, EnumCheckBoxes, ArrayMultiSelect, ArrayCheckBoxes, MultiCheckBoxSelect, DoubleInput, TimePicker, StylableSelect, ColorPicker, SearchableSelect, ToggleSwitch, InputWithButton };
|
package/lib/index.js
CHANGED
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
//
|
|
23
23
|
// ******************************************************************************************************
|
|
24
24
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
25
|
-
exports.ToggleSwitch = exports.SearchableSelect = exports.ColorPicker = exports.StylableSelect = exports.TimePicker = exports.DoubleInput = exports.MultiCheckBoxSelect = exports.ArrayCheckBoxes = exports.ArrayMultiSelect = exports.EnumCheckBoxes = exports.DateRangePicker = exports.TextArea = exports.Select = exports.DatePicker = exports.Input = exports.CheckBox = void 0;
|
|
25
|
+
exports.InputWithButton = exports.ToggleSwitch = exports.SearchableSelect = exports.ColorPicker = exports.StylableSelect = exports.TimePicker = exports.DoubleInput = exports.MultiCheckBoxSelect = exports.ArrayCheckBoxes = exports.ArrayMultiSelect = exports.EnumCheckBoxes = exports.DateRangePicker = exports.TextArea = exports.Select = exports.DatePicker = exports.Input = exports.CheckBox = void 0;
|
|
26
26
|
var CheckBox_1 = require("./CheckBox");
|
|
27
27
|
exports.CheckBox = CheckBox_1.default;
|
|
28
28
|
var Input_1 = require("./Input");
|
|
@@ -55,3 +55,5 @@ var SearchableSelect_1 = require("./SearchableSelect");
|
|
|
55
55
|
exports.SearchableSelect = SearchableSelect_1.default;
|
|
56
56
|
var ToggleSwitch_1 = require("./ToggleSwitch");
|
|
57
57
|
exports.ToggleSwitch = ToggleSwitch_1.default;
|
|
58
|
+
var InputWithButton_1 = require("./InputWithButton");
|
|
59
|
+
exports.InputWithButton = InputWithButton_1.default;
|