UNPKG

@gpa-gemstone/react-forms

Version:
97 lines (96 loc) 5.4 kB
"use strict"; // ****************************************************************************************************** // Select.tsx - Gbtc // // Copyright © 2020, 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: // ---------------------------------------------------------------------------------------------------- // 01/28/2020 - Billy Ernest // Generated original version of source code. // 05/05/2021 - C. Lackner // Added Help Message. // // ****************************************************************************************************** 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 = Select; var React = require("react"); var ToolTip_1 = require("./ToolTip"); var helper_functions_1 = require("@gpa-gemstone/helper-functions"); var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols"); function Select(props) { var _a; var guid = React.useState((0, helper_functions_1.CreateGuid)())[0]; var _b = React.useState(false), showHelp = _b[0], setShowHelp = _b[1]; // Effect to validate the current value against the available options. React.useEffect(function () { var _a; var currentValue = GetRecordValue(); if (!((_a = props.EmptyOption) !== null && _a !== void 0 ? _a : false) && props.Options.length > 0 && props.Options.findIndex(function (option) { return option.Value == currentValue; }) === -1) { var option = props.Options[0]; SetRecord(option.Value, option); // tslint:disable-next-line console.warn("The current value is not available as an option. Specify EmptyOption=true if the value should be allowed."); } }, [props.Options]); // Update the parent component's state with the new value. function SetRecord(value, option) { var _a, _b; var record = __assign({}, props.Record); if (value !== '') { var val = (_b = (_a = props.Options.find(function (op) { return op.Value == value; })) === null || _a === void 0 ? void 0 : _a.Value) !== null && _b !== void 0 ? _b : value; record[props.Field] = val; } else record[props.Field] = null; if (record[props.Field] != props.Record[props.Field]) props.Setter(record, option); } // Rretrieve the current value of the select field from the record. function GetRecordValue() { return props.Record[props.Field] == null ? '' : props.Record[props.Field]; } // Variables to control the rendering of label and help icon. var showLabel = props.Label !== ""; var showHelpIcon = props.Help !== undefined; var label = props.Label === undefined ? props.Field : props.Label; return (React.createElement("div", { className: "form-group" }, showHelpIcon || showLabel ? React.createElement("label", { className: "d-flex align-items-center" }, React.createElement("span", null, showLabel ? label : ''), showHelpIcon && (React.createElement("span", { className: "ml-2 d-flex align-items-center", onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": guid }, React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: "var(--info)", Size: 20 })))) : null, showHelpIcon ? React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "top" }, props.Help) : null, React.createElement("select", { className: "form-control", onChange: function (evt) { var val = evt.target.value; var option = props.Options.find(function (op) { return op.Value == val; }); SetRecord(val, option); }, value: GetRecordValue(), disabled: props.Disabled == null ? false : props.Disabled }, ((_a = props.EmptyOption) !== null && _a !== void 0 ? _a : false) ? React.createElement("option", { value: "" }, props.EmptyLabel !== undefined ? props.EmptyLabel : '') : null, props.Options.map(function (a, i) { return (React.createElement("option", { key: i, value: a.Value }, a.Label)); })))); }