@gpa-gemstone/react-forms
Version:
React Form modules for gpa webapps
112 lines (111 loc) • 6.01 kB
JavaScript
;
// ******************************************************************************************************
// SearchableSelect.tsx - Gbtc
//
// Copyright © 2024, Grid Protection Alliance. All Rights Reserved.
//
// Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
// the NOTICE file distributed with this work for additional information regarding copyright ownership.
// The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
// file except in compliance with the License. You may obtain a copy of the License at:
//
// http://opensource.org/licenses/MIT
//
// Unless agreed to in writing, the subject software distributed under the License is distributed on an
// "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
// License for the specific language governing permissions and limitations.
//
// Code Modification History:
// ----------------------------------------------------------------------------------------------------
// 03/17/2024 - C. Lackner
// Generated original version of source code.
//
// ******************************************************************************************************
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = SearchableSelect;
var React = require("react");
var StylableSelect_1 = require("./StylableSelect");
var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
function SearchableSelect(props) {
var _a, _b, _c, _d;
var _e = React.useState((_b = (_a = props.Record[props.Field]) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : ''), search = _e[0], setSearch = _e[1];
var _f = React.useState((_d = (_c = props.Record[props.Field]) === null || _c === void 0 ? void 0 : _c.toString()) !== null && _d !== void 0 ? _d : ''), label = _f[0], setLabel = _f[1];
var _g = React.useState([]), results = _g[0], setResults = _g[1];
var _h = React.useState(false), loading = _h[0], setLoading = _h[1];
React.useEffect(function () {
var _a, _b;
if (props.GetLabel === undefined)
setLabel((_b = (_a = props.Record[props.Field]) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '');
else {
setLoading(true);
var _c = props.GetLabel(), handle = _c[0], callback = _c[1];
handle.then(function (lab) {
setLabel(lab);
setSearch(lab);
setLoading(false);
});
return callback;
}
}, [props.GetLabel]);
React.useEffect(function () {
setLoading(true);
var _a = props.Search(search), handle = _a[0], callback = _a[1];
handle.then(function (d) {
setResults(d.map(function (o) { return ({ Value: o.Value, Element: o.Label }); }));
setLoading(false);
}).catch(function () { return setLoading(false); });
return callback;
}, [search]);
var handleOnBlur = React.useCallback(function () {
setSearch(label);
}, [label]);
var options = React.useMemo(function () {
var _a, _b;
var ops = [];
ops.push({
Value: props.Record[props.Field],
Element: React.createElement("div", { className: 'input-group' },
React.createElement("input", { type: "text", className: "form-control", value: search, onChange: function (d) { return setSearch(d.target.value); }, onBlur: handleOnBlur, disabled: (_a = props.Disabled) !== null && _a !== void 0 ? _a : false }),
loading ?
React.createElement("div", { className: "input-group-append" },
React.createElement("span", { className: "input-group-text" },
React.createElement(gpa_symbols_1.ReactIcons.SpiningIcon, null)))
: null)
});
if (!((_b = props.AllowCustom) !== null && _b !== void 0 ? _b : false))
ops.push({ Value: 'search-' + props.Record[props.Field], Element: label });
else
ops.push({ Value: search, Element: search });
ops.push.apply(ops, results.filter(function (f) { return f.Value !== search && f.Value !== props.Record[props.Field]; }));
return ops;
}, [search, props.Record[props.Field], results, props.Disabled, loading, label, props.AllowCustom, handleOnBlur]);
var update = React.useCallback(function (record, selectedOption) {
var _a;
var _b, _c;
var stringVal = (_c = (_b = record[props.Field]) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : '';
var newLabel = stringVal;
if (!React.isValidElement(selectedOption.Element))
newLabel = selectedOption.Element;
setLabel(newLabel);
if (stringVal.startsWith('search-')) {
var value = stringVal.replace('search-', '');
props.Setter(__assign(__assign({}, record), (_a = {}, _a[props.Field] = value, _a)));
setSearch(newLabel !== null && newLabel !== void 0 ? newLabel : value);
return;
}
props.Setter(record);
setSearch(newLabel);
}, [props.Setter, props.Field, label]);
return React.createElement(StylableSelect_1.default, { Record: props.Record, Field: props.Field, Setter: update, Label: props.Label, Disabled: props.Disabled, Help: props.Help, Style: props.Style, Options: options, BtnStyle: props.BtnStyle });
}