@gpa-gemstone/react-forms 1.1.93 → 1.1.95
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/MultiSearchableSelect.d.ts +10 -0
- package/lib/MultiSearchableSelect.js +106 -0
- package/lib/SearchableSelect.d.ts +3 -7
- package/lib/index.d.ts +2 -1
- package/lib/index.js +3 -1
- package/package.json +2 -2
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { IProps as ISearchableSelectProps } from './SearchableSelect';
|
|
2
|
+
interface IProps<T> extends ISearchableSelectProps<T> {
|
|
3
|
+
/**
|
|
4
|
+
* Default value to use when adding an item and when value is null
|
|
5
|
+
* @type {number}
|
|
6
|
+
*/
|
|
7
|
+
DefaultValue: number | string;
|
|
8
|
+
}
|
|
9
|
+
declare function MultiSearchableSelect<T>(props: IProps<T>): JSX.Element;
|
|
10
|
+
export default MultiSearchableSelect;
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
//******************************************************************************************************
|
|
3
|
+
// MultiSearchableSelect.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 may license 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
|
+
// 07/01/2025 - 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
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
36
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
37
|
+
if (ar || !(i in from)) {
|
|
38
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
39
|
+
ar[i] = from[i];
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
43
|
+
};
|
|
44
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
45
|
+
var React = require("react");
|
|
46
|
+
var SearchableSelect_1 = require("./SearchableSelect");
|
|
47
|
+
var ToolTip_1 = require("./ToolTip");
|
|
48
|
+
var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
|
|
49
|
+
var helper_functions_1 = require("@gpa-gemstone/helper-functions");
|
|
50
|
+
//Only supporting string/number arrays for now
|
|
51
|
+
function MultiSearchableSelect(props) {
|
|
52
|
+
var _a;
|
|
53
|
+
var guid = React.useState((0, helper_functions_1.CreateGuid)())[0];
|
|
54
|
+
var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1];
|
|
55
|
+
var fieldArray = props.Record[props.Field];
|
|
56
|
+
if ((fieldArray === null || fieldArray === void 0 ? void 0 : fieldArray.constructor) !== Array) {
|
|
57
|
+
console.warn("MultiInput: ".concat(props.Field.toString(), " is not of type array."));
|
|
58
|
+
return React.createElement(React.Fragment, null);
|
|
59
|
+
}
|
|
60
|
+
return (React.createElement(React.Fragment, null,
|
|
61
|
+
fieldArray.length === 0 ?
|
|
62
|
+
React.createElement(React.Fragment, null,
|
|
63
|
+
React.createElement("label", { className: 'd-flex align-items-center' },
|
|
64
|
+
React.createElement("span", null, (_a = props.Label) !== null && _a !== void 0 ? _a : props.Field),
|
|
65
|
+
props.Help != null ?
|
|
66
|
+
React.createElement("span", { className: "ml-2 d-flex align-items-center", onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": guid },
|
|
67
|
+
React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: "var(--info)", Size: 20 }))
|
|
68
|
+
: null,
|
|
69
|
+
React.createElement("button", { className: 'btn', onClick: function () {
|
|
70
|
+
var _a;
|
|
71
|
+
return props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = [props.DefaultValue], _a)));
|
|
72
|
+
} },
|
|
73
|
+
" ",
|
|
74
|
+
React.createElement(gpa_symbols_1.ReactIcons.CirclePlus, null),
|
|
75
|
+
" ")),
|
|
76
|
+
React.createElement(ToolTip_1.default, { Show: showHelp && props.Help != null, Target: guid, Class: "info", Position: "bottom" }, props.Help))
|
|
77
|
+
: null,
|
|
78
|
+
fieldArray.map(function (r, index) {
|
|
79
|
+
var _a, _b;
|
|
80
|
+
return (React.createElement("div", { className: 'row align-items-center', key: index },
|
|
81
|
+
React.createElement("div", { className: 'col' },
|
|
82
|
+
React.createElement(SearchableSelect_1.default, { Record: fieldArray, Field: index, Label: index === 0 ? props.Label : '', Help: index === 0 ? props.Help : undefined, Feedback: props.Feedback, Valid: function () { return props.Valid != null ? props.Valid(props.Field) : true; }, Style: props.Style, Disabled: props.Disabled, Setter: function (record) {
|
|
83
|
+
var _a;
|
|
84
|
+
var newArray = __spreadArray([], fieldArray, true);
|
|
85
|
+
newArray[index] = record[index];
|
|
86
|
+
props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = newArray, _a)));
|
|
87
|
+
}, Search: props.Search, BtnStyle: props.BtnStyle, GetLabel: props.GetLabel, ResetSearchOnSelect: props.ResetSearchOnSelect, AllowCustom: props.AllowCustom })),
|
|
88
|
+
React.createElement("div", { className: 'col-auto' },
|
|
89
|
+
React.createElement("button", { className: 'btn', style: ((_a = props.Disabled) !== null && _a !== void 0 ? _a : false) ? { display: 'none' } : undefined, onClick: function () {
|
|
90
|
+
var _a;
|
|
91
|
+
var newRecords = __spreadArray([], fieldArray, true).filter(function (_, i) { return i !== index; });
|
|
92
|
+
props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = newRecords, _a)));
|
|
93
|
+
} },
|
|
94
|
+
React.createElement(gpa_symbols_1.ReactIcons.TrashCan, { Color: 'red' }))),
|
|
95
|
+
index === __spreadArray([], fieldArray, true).length - 1 ?
|
|
96
|
+
React.createElement("div", { className: 'col-auto' },
|
|
97
|
+
React.createElement("button", { className: 'btn', style: ((_b = props.Disabled) !== null && _b !== void 0 ? _b : false) ? { display: 'none' } : undefined, onClick: function () {
|
|
98
|
+
var _a;
|
|
99
|
+
var newRecords = __spreadArray(__spreadArray([], __spreadArray([], fieldArray, true), true), [props.DefaultValue], false);
|
|
100
|
+
props.Setter(__assign(__assign({}, props.Record), (_a = {}, _a[props.Field] = newRecords, _a)));
|
|
101
|
+
} },
|
|
102
|
+
React.createElement(gpa_symbols_1.ReactIcons.CirclePlus, null)))
|
|
103
|
+
: null));
|
|
104
|
+
})));
|
|
105
|
+
}
|
|
106
|
+
exports.default = MultiSearchableSelect;
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { Gemstone } from '@gpa-gemstone/application-typings';
|
|
3
|
-
export interface
|
|
4
|
-
abort?: () => void;
|
|
5
|
-
}
|
|
6
|
-
interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
|
|
3
|
+
export interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
|
|
7
4
|
/**
|
|
8
5
|
* Function to determine the validity of a field
|
|
9
6
|
* @param field - Field of the record to check
|
|
@@ -27,7 +24,7 @@ interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
|
|
|
27
24
|
* @param search - Search string
|
|
28
25
|
* @returns {AbortablePromise<T>}
|
|
29
26
|
*/
|
|
30
|
-
Search: (search: string) => AbortablePromise<Gemstone.TSX.Interfaces.ILabelValue<string | number>[]>;
|
|
27
|
+
Search: (search: string) => Gemstone.TSX.Interfaces.AbortablePromise<Gemstone.TSX.Interfaces.ILabelValue<string | number>[]>;
|
|
31
28
|
/**
|
|
32
29
|
* CSS styles to apply to the form group
|
|
33
30
|
* @type {React.CSSProperties}
|
|
@@ -40,11 +37,10 @@ interface IProps<T> extends Gemstone.TSX.Interfaces.IBaseFormProps<T> {
|
|
|
40
37
|
* @optional
|
|
41
38
|
*/
|
|
42
39
|
BtnStyle?: React.CSSProperties;
|
|
43
|
-
GetLabel?: () => AbortablePromise<string>;
|
|
40
|
+
GetLabel?: () => Gemstone.TSX.Interfaces.AbortablePromise<string>;
|
|
44
41
|
/**
|
|
45
42
|
* Flag to reset search text to an empty string when a user selects an option or when the element loses focus. Defaulting to false
|
|
46
43
|
*/
|
|
47
44
|
ResetSearchOnSelect?: boolean;
|
|
48
45
|
}
|
|
49
46
|
export default function SearchableSelect<T>(props: IProps<T>): JSX.Element;
|
|
50
|
-
export {};
|
package/lib/index.d.ts
CHANGED
|
@@ -19,4 +19,5 @@ import RadioButtons from './RadioButtons';
|
|
|
19
19
|
import FileUpload from './FileUpload';
|
|
20
20
|
import MultiInput from './MultiInput';
|
|
21
21
|
import ToolTip from './ToolTip';
|
|
22
|
-
|
|
22
|
+
import MultiSearchableSelect from './MultiSearchableSelect';
|
|
23
|
+
export { CheckBox, Input, DatePicker, Select, TextArea, DateRangePicker, EnumCheckBoxes, ArrayMultiSelect, ArrayCheckBoxes, MultiCheckBoxSelect, DoubleInput, TimePicker, StylableSelect, ColorPicker, SearchableSelect, ToggleSwitch, InputWithButton, RadioButtons, FileUpload, MultiInput, ToolTip, MultiSearchableSelect };
|
package/lib/index.js
CHANGED
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
//
|
|
23
23
|
// ******************************************************************************************************
|
|
24
24
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
25
|
-
exports.ToolTip = exports.MultiInput = exports.FileUpload = exports.RadioButtons = 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;
|
|
25
|
+
exports.MultiSearchableSelect = exports.ToolTip = exports.MultiInput = exports.FileUpload = exports.RadioButtons = 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");
|
|
@@ -65,3 +65,5 @@ var MultiInput_1 = require("./MultiInput");
|
|
|
65
65
|
exports.MultiInput = MultiInput_1.default;
|
|
66
66
|
var ToolTip_1 = require("./ToolTip");
|
|
67
67
|
exports.ToolTip = ToolTip_1.default;
|
|
68
|
+
var MultiSearchableSelect_1 = require("./MultiSearchableSelect");
|
|
69
|
+
exports.MultiSearchableSelect = MultiSearchableSelect_1.default;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gpa-gemstone/react-forms",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.95",
|
|
4
4
|
"description": "React Form modules for gpa webapps",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"types": "lib/index.d.ts",
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"dependencies": {
|
|
48
48
|
"@gpa-gemstone/application-typings": "0.0.87",
|
|
49
49
|
"@gpa-gemstone/gpa-symbols": "0.0.52",
|
|
50
|
-
"@gpa-gemstone/helper-functions": "0.0.
|
|
50
|
+
"@gpa-gemstone/helper-functions": "0.0.45",
|
|
51
51
|
"@types/react": "^17.0.14",
|
|
52
52
|
"@types/styled-components": "^5.1.11",
|
|
53
53
|
"lodash": "^4.17.21",
|