@gpa-gemstone/react-forms 1.1.31 → 1.1.33
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/Input.d.ts +1 -1
- package/lib/Input.js +8 -2
- package/lib/Select.js +24 -9
- package/lib/StylableSelect.d.ts +17 -0
- package/lib/StylableSelect.js +100 -0
- package/lib/index.d.ts +2 -1
- package/lib/index.js +3 -1
- package/package.json +1 -1
package/lib/Input.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ interface IProps<T> {
|
|
|
7
7
|
Label?: string;
|
|
8
8
|
Feedback?: string;
|
|
9
9
|
Disabled?: boolean;
|
|
10
|
-
Type?: 'number' | 'text' | 'password' | 'email' | 'color';
|
|
10
|
+
Type?: 'number' | 'text' | 'password' | 'email' | 'color' | 'integer';
|
|
11
11
|
Help?: string | JSX.Element;
|
|
12
12
|
}
|
|
13
13
|
export default function Input<T>(props: IProps<T>): JSX.Element;
|
package/lib/Input.js
CHANGED
|
@@ -53,7 +53,7 @@ function Input(props) {
|
|
|
53
53
|
setInternal(false);
|
|
54
54
|
}, [props.Record[props.Field]]);
|
|
55
55
|
function valueChange(value) {
|
|
56
|
-
var _a, _b;
|
|
56
|
+
var _a, _b, _c;
|
|
57
57
|
setInternal(true);
|
|
58
58
|
if (props.Type === 'number') {
|
|
59
59
|
if ((0, helper_functions_1.IsNumber)(value)) {
|
|
@@ -61,8 +61,14 @@ function Input(props) {
|
|
|
61
61
|
setHeldVal(value);
|
|
62
62
|
}
|
|
63
63
|
}
|
|
64
|
+
else if (props.Type === 'integer') {
|
|
65
|
+
if ((0, helper_functions_1.IsInteger)(value)) {
|
|
66
|
+
props.Setter(__assign(__assign({}, props.Record), (_b = {}, _b[props.Field] = value !== '' ? parseFloat(value) : null, _b)));
|
|
67
|
+
setHeldVal(value);
|
|
68
|
+
}
|
|
69
|
+
}
|
|
64
70
|
else {
|
|
65
|
-
props.Setter(__assign(__assign({}, props.Record), (
|
|
71
|
+
props.Setter(__assign(__assign({}, props.Record), (_c = {}, _c[props.Field] = value !== '' ? value : null, _c)));
|
|
66
72
|
setHeldVal(value);
|
|
67
73
|
}
|
|
68
74
|
}
|
package/lib/Select.js
CHANGED
|
@@ -44,22 +44,37 @@ function Select(props) {
|
|
|
44
44
|
React.useEffect(function () {
|
|
45
45
|
setGuid((0, helper_functions_1.CreateGuid)());
|
|
46
46
|
}, []);
|
|
47
|
+
React.useEffect(function () {
|
|
48
|
+
var _a;
|
|
49
|
+
var currentValue = GetRecordValue();
|
|
50
|
+
if (!((_a = props.EmptyOption) !== null && _a !== void 0 ? _a : false) && props.Options.length > 0 && props.Options.findIndex(function (option) { return option.Value === currentValue; }) === -1) {
|
|
51
|
+
SetRecord(props.Options[0].Value);
|
|
52
|
+
// tslint:disable-next-line
|
|
53
|
+
console.warn("The current value is not available as an option. Specify EmptyOption=true if the value should be allowed.");
|
|
54
|
+
}
|
|
55
|
+
}, [props.Options]);
|
|
56
|
+
function SetRecord(value) {
|
|
57
|
+
var record = __assign({}, props.Record);
|
|
58
|
+
if (value !== '')
|
|
59
|
+
record[props.Field] = value;
|
|
60
|
+
else
|
|
61
|
+
record[props.Field] = null;
|
|
62
|
+
props.Setter(record);
|
|
63
|
+
}
|
|
64
|
+
;
|
|
65
|
+
function GetRecordValue() {
|
|
66
|
+
return props.Record[props.Field] == null ? '' : props.Record[props.Field].toString();
|
|
67
|
+
}
|
|
68
|
+
;
|
|
47
69
|
return (React.createElement("div", { className: "form-group" },
|
|
48
70
|
(props.Label !== "") ?
|
|
49
71
|
React.createElement("label", null,
|
|
50
|
-
props.Label ===
|
|
72
|
+
props.Label === undefined ? props.Field : props.Label,
|
|
51
73
|
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,
|
|
52
74
|
props.Help !== undefined ?
|
|
53
75
|
React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
|
|
54
76
|
: null,
|
|
55
|
-
React.createElement("select", { "data-help": guid, className: "form-control", onChange: function (evt) {
|
|
56
|
-
var record = __assign({}, props.Record);
|
|
57
|
-
if (evt.target.value !== '')
|
|
58
|
-
record[props.Field] = evt.target.value;
|
|
59
|
-
else
|
|
60
|
-
record[props.Field] = null;
|
|
61
|
-
props.Setter(record);
|
|
62
|
-
}, value: props.Record[props.Field] == null ? '' : props.Record[props.Field].toString(), disabled: props.Disabled == null ? false : props.Disabled },
|
|
77
|
+
React.createElement("select", { "data-help": guid, className: "form-control", onChange: function (evt) { return SetRecord(evt.target.value); }, value: GetRecordValue(), disabled: props.Disabled == null ? false : props.Disabled },
|
|
63
78
|
props.EmptyOption ? React.createElement("option", { value: "" }, props.EmptyLabel !== undefined ? props.EmptyLabel : '') : null,
|
|
64
79
|
props.Options.map(function (a, i) { return (React.createElement("option", { key: i, value: a.Value }, a.Label)); }))));
|
|
65
80
|
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
interface IOption {
|
|
3
|
+
Value: string;
|
|
4
|
+
Element: React.ReactElement<any>;
|
|
5
|
+
}
|
|
6
|
+
interface IProps<T> {
|
|
7
|
+
Record: T;
|
|
8
|
+
Field: keyof T;
|
|
9
|
+
Setter: (record: T) => void;
|
|
10
|
+
Options: IOption[];
|
|
11
|
+
Label?: string;
|
|
12
|
+
Disabled?: boolean;
|
|
13
|
+
Help?: string | JSX.Element;
|
|
14
|
+
Style?: React.CSSProperties;
|
|
15
|
+
}
|
|
16
|
+
export default function StylableSelect<T>(props: IProps<T>): JSX.Element;
|
|
17
|
+
export {};
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
// ******************************************************************************************************
|
|
3
|
+
// StylableSelect.tsx - Gbtc
|
|
4
|
+
//
|
|
5
|
+
// Copyright © 2020, 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
|
+
// 10/14/2022 - Gabriel Santos
|
|
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 StylableSelect(props) {
|
|
40
|
+
var _a = React.useState(false), show = _a[0], setShow = _a[1];
|
|
41
|
+
var _b = React.useState(props.Options[0].Element), selected = _b[0], setSelected = _b[1];
|
|
42
|
+
var _c = React.useState(""), guid = _c[0], setGuid = _c[1];
|
|
43
|
+
var _d = React.useState(false), showHelp = _d[0], setShowHelp = _d[1];
|
|
44
|
+
var stylableSelect = React.useRef(null);
|
|
45
|
+
function HandleShow(evt) {
|
|
46
|
+
// Ignore if disabled or not a mousedown event
|
|
47
|
+
if ((props.Disabled === undefined ? false : props.Disabled) || evt.type !== 'mousedown')
|
|
48
|
+
return;
|
|
49
|
+
if (!stylableSelect.current.contains(evt.target))
|
|
50
|
+
setShow(false);
|
|
51
|
+
else
|
|
52
|
+
setShow(!show);
|
|
53
|
+
}
|
|
54
|
+
function SetRecord(selectedOption) {
|
|
55
|
+
setSelected(selectedOption.Element);
|
|
56
|
+
var record = __assign({}, props.Record);
|
|
57
|
+
if (selectedOption.Value !== '')
|
|
58
|
+
record[props.Field] = selectedOption.Value;
|
|
59
|
+
else
|
|
60
|
+
record[props.Field] = null;
|
|
61
|
+
props.Setter(record);
|
|
62
|
+
}
|
|
63
|
+
React.useEffect(function () {
|
|
64
|
+
setGuid((0, helper_functions_1.CreateGuid)());
|
|
65
|
+
document.addEventListener('mousedown', HandleShow, false);
|
|
66
|
+
return function () {
|
|
67
|
+
document.removeEventListener('mousedown', HandleShow, false);
|
|
68
|
+
};
|
|
69
|
+
}, []);
|
|
70
|
+
React.useEffect(function () {
|
|
71
|
+
var element = props.Options.find(function (e) { return e.Value === props.Record[props.Field]; });
|
|
72
|
+
setSelected(element !== undefined ? element.Element : React.createElement("div", null));
|
|
73
|
+
}, [props.Record]);
|
|
74
|
+
return (React.createElement("div", { ref: stylableSelect, style: { position: 'relative', display: 'inline-block', width: 'inherit' } },
|
|
75
|
+
(props.Label !== "") ?
|
|
76
|
+
React.createElement("label", null,
|
|
77
|
+
props.Label === undefined ? props.Field : props.Label,
|
|
78
|
+
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,
|
|
79
|
+
props.Help !== undefined ?
|
|
80
|
+
React.createElement(HelperMessage_1.default, { Show: showHelp, Target: guid }, props.Help)
|
|
81
|
+
: null,
|
|
82
|
+
React.createElement("button", { type: "button", style: { border: '1px solid #ced4da', padding: '.375rem .75rem', fontSize: '1rem', borderRadius: '.25rem' }, "data-help": guid, className: "btn form-control dropdown-toggle", onClick: HandleShow, disabled: props.Disabled === undefined ? false : props.Disabled },
|
|
83
|
+
React.createElement("div", { style: props.Style }, selected)),
|
|
84
|
+
React.createElement("div", { style: {
|
|
85
|
+
maxHeight: window.innerHeight * 0.75,
|
|
86
|
+
overflowY: 'auto',
|
|
87
|
+
padding: '10 5',
|
|
88
|
+
display: show ? 'block' : 'none',
|
|
89
|
+
position: 'absolute',
|
|
90
|
+
backgroundColor: '#fff',
|
|
91
|
+
boxShadow: '0px 8px 16px 0px rgba(0,0,0,0.2)',
|
|
92
|
+
zIndex: 401,
|
|
93
|
+
minWidth: '100%',
|
|
94
|
+
} },
|
|
95
|
+
React.createElement("table", { className: "table", style: { margin: 0 } },
|
|
96
|
+
React.createElement("tbody", null, props.Options.map(function (f, i) { return (React.createElement("tr", { key: i, onClick: function (evt) { evt.preventDefault(); SetRecord(f); setShow(false); } },
|
|
97
|
+
React.createElement("td", null, f.Element))); }))))));
|
|
98
|
+
}
|
|
99
|
+
exports.default = StylableSelect;
|
|
100
|
+
;
|
package/lib/index.d.ts
CHANGED
|
@@ -10,4 +10,5 @@ import ArrayCheckBoxes from './ArrayCheckBoxes';
|
|
|
10
10
|
import MultiCheckBoxSelect from './MutliCheckBoxSelect';
|
|
11
11
|
import DoubleInput from './DoubleInput';
|
|
12
12
|
import TimePicker from './TimePicker';
|
|
13
|
-
|
|
13
|
+
import StylableSelect from './StylableSelect';
|
|
14
|
+
export { CheckBox, Input, DatePicker, Select, TextArea, DateRangePicker, EnumCheckBoxes, ArrayMultiSelect, ArrayCheckBoxes, MultiCheckBoxSelect, DoubleInput, TimePicker, StylableSelect };
|
package/lib/index.js
CHANGED
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
//
|
|
23
23
|
// ******************************************************************************************************
|
|
24
24
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
25
|
-
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.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");
|
|
@@ -47,3 +47,5 @@ var DoubleInput_1 = require("./DoubleInput");
|
|
|
47
47
|
exports.DoubleInput = DoubleInput_1.default;
|
|
48
48
|
var TimePicker_1 = require("./TimePicker");
|
|
49
49
|
exports.TimePicker = TimePicker_1.default;
|
|
50
|
+
var StylableSelect_1 = require("./StylableSelect");
|
|
51
|
+
exports.StylableSelect = StylableSelect_1.default;
|