@gpa-gemstone/react-forms
Version:
React Form modules for gpa webapps
165 lines (164 loc) • 9.14 kB
JavaScript
;
// ******************************************************************************************************
// StylableSelect.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:
// ----------------------------------------------------------------------------------------------------
// 10/14/2022 - Gabriel Santos
// 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 = StylableSelect;
var React = require("react");
var ToolTip_1 = require("./ToolTip");
var helper_functions_1 = require("@gpa-gemstone/helper-functions");
var lodash_1 = require("lodash");
var react_portal_1 = require("react-portal");
var _ = require("lodash");
var gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
function StylableSelect(props) {
var _a, _b, _c;
// State hooks and ref for managing component state and interactions.
var stylableSelect = React.useRef(null);
var selectTable = React.useRef(null);
var tableContainer = React.useRef(null);
var _d = React.useState(false), show = _d[0], setShow = _d[1];
var _e = React.useState(props.Options[0].Element), selected = _e[0], setSelected = _e[1];
var _f = React.useState(""), guid = _f[0], setGuid = _f[1];
var _g = React.useState(false), showHelp = _g[0], setShowHelp = _g[1];
var _h = React.useState({ Top: 0, Left: 0, Width: 0, Height: 0 }), position = _h[0], setPosition = _h[1];
React.useLayoutEffect(function () {
var updatePosition = _.debounce(function () {
if (stylableSelect.current != null) {
var rect = stylableSelect.current.getBoundingClientRect();
setPosition({ Top: rect.bottom, Left: rect.left, Width: rect.width, Height: rect.height });
}
}, 200);
var handleScroll = function (event) {
if (tableContainer.current == null)
return;
if (event.type === 'scroll' && !tableContainer.current.contains(event.target))
setShow(false);
updatePosition();
};
if (show) {
updatePosition();
window.addEventListener('scroll', handleScroll, true);
window.addEventListener('resize', updatePosition);
return function () {
window.removeEventListener('scroll', handleScroll, true);
window.removeEventListener('resize', updatePosition);
updatePosition.cancel();
};
}
}, [show]);
// Handle showing and hiding of the dropdown.
var HandleShow = React.useCallback(function (evt) {
// Ignore if disabled or not a mousedown event
if ((props.Disabled === undefined ? false : props.Disabled) || evt.type !== 'mousedown' || stylableSelect.current == null)
return;
// if we’re about to OPEN it, measure right now
if (!show && stylableSelect.current != null) {
var rect = stylableSelect.current.getBoundingClientRect();
setPosition({
Top: rect.bottom,
Left: rect.left,
Width: rect.width,
Height: rect.height
});
}
//ignore the click if it was inside the table or table container
if ((selectTable.current != null && selectTable.current.contains(evt.target)) || (tableContainer.current != null && tableContainer.current.contains(evt.target)))
return;
if (!stylableSelect.current.contains(evt.target))
setShow(false);
else
setShow(!show);
}, [props.Disabled, show]);
// Update the parent component's state with the selected option.
function SetRecord(selectedOption) {
setSelected(selectedOption.Element);
var record = __assign({}, props.Record);
if (selectedOption.Value !== '')
record[props.Field] = selectedOption.Value;
else
record[props.Field] = null;
props.Setter(record, selectedOption);
}
// Effect for initial setup and event listeners.
React.useEffect(function () {
setGuid((0, helper_functions_1.CreateGuid)());
document.addEventListener('mousedown', HandleShow, false);
return function () {
document.removeEventListener('mousedown', HandleShow, false);
};
}, [HandleShow]);
// Effect to handle changes to the record's field value.
React.useEffect(function () {
var element = props.Options.find(function (e) { return (0, lodash_1.isEqual)(e.Value, props.Record[props.Field]); });
setSelected(element !== undefined ? element.Element : React.createElement("div", null));
}, [props.Record, props.Options]);
var handleOptionClick = function (evt, option) {
SetRecord(option);
setShow(false);
};
// 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", { ref: stylableSelect, className: "form-group", style: { position: 'relative', display: 'inline-block', width: 'inherit' } },
showHelpIcon || showLabel ?
React.createElement("label", { className: "d-flex align-items-center" },
React.createElement("span", null, showLabel ? label : ''),
showHelpIcon && (React.createElement("span", { onMouseEnter: function () { return setShowHelp(true); }, onMouseLeave: function () { return setShowHelp(false); }, "data-tooltip": guid, className: "ml-2 d-flex align-items-center" },
React.createElement(gpa_symbols_1.ReactIcons.QuestionMark, { Color: "var(--info)", Size: 20 }))))
: null,
props.Help !== undefined ?
React.createElement(ToolTip_1.default, { Show: showHelp, Target: guid, Class: "info", Position: "top" }, props.Help)
: null,
React.createElement("button", { type: "button", style: __assign({ padding: '.375rem .75rem' }, ((_a = props.BtnStyle) !== null && _a !== void 0 ? _a : {})), className: "dropdown-toggle form-control ".concat(((_c = (_b = props.Valid) === null || _b === void 0 ? void 0 : _b.call(props, props.Field)) !== null && _c !== void 0 ? _c : true) ? '' : 'is-invalid'), onClick: HandleShow, disabled: props.Disabled === undefined ? false : props.Disabled },
React.createElement("div", { style: props.Style }, selected)),
React.createElement("div", { className: "invalid-feedback" }, props.Feedback == null ? props.Field.toString() + ' is a required field.' : props.Feedback),
React.createElement(react_portal_1.Portal, null,
React.createElement("div", { ref: tableContainer, className: 'popover', style: {
maxHeight: window.innerHeight - position.Top,
overflowY: 'auto',
padding: '10 5',
display: show ? 'block' : 'none',
position: 'absolute',
zIndex: 9999,
top: "".concat(position.Top, "px"),
left: "".concat(position.Left, "px"),
minWidth: "".concat(position.Width, "px"),
maxWidth: '100%'
} },
React.createElement("table", { className: "table table-hover", style: { margin: 0 }, ref: selectTable },
React.createElement("tbody", null, props.Options.map(function (f, i) { return (f.Value === props.Record[props.Field] ? null :
React.createElement("tr", { key: i, onMouseDown: function (evt) { return handleOptionClick(evt, f); } },
React.createElement("td", null, f.Element))); })))))));
}