@gpa-gemstone/react-forms
Version:
React Form modules for gpa webapps
177 lines (176 loc) • 9.77 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 lodash_1 = require("lodash");
var react_portal_1 = require("react-portal");
var _ = require("lodash");
var HelpIcon_1 = require("./HelpIcon");
function StylableSelect(props) {
var _a, _b, _c, _d, _e, _f;
// 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 _g = React.useState(false), show = _g[0], setShow = _g[1];
var _h = React.useState(0), selectedOptionIndex = _h[0], setSelectedOptionIndex = _h[1];
var _j = React.useState({ Top: 0, Left: 0, Width: 0, Height: 0 }), position = _j[0], setPosition = _j[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]);
React.useEffect(function () {
var _a, _b;
if (show)
(_a = props.OnDropdownOpen) === null || _a === void 0 ? void 0 : _a.call(props);
else
(_b = props.OnDropdownClose) === null || _b === void 0 ? void 0 : _b.call(props);
}, [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) {
setSelectedOptionIndex(props.Options.findIndex(function (e) { return (0, lodash_1.isEqual)(e.Value, selectedOption.Value); }));
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 () {
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 elementIndex = props.Options.findIndex(function (e) { return (0, lodash_1.isEqual)(e.Value, props.Record[props.Field]); });
setSelectedOptionIndex(elementIndex !== -1 ? elementIndex : 0);
}, [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 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' } },
showLabel ?
React.createElement("label", { className: "d-flex align-items-center" },
React.createElement("span", null, showLabel ? label : ''),
React.createElement(HelpIcon_1.default, { Help: props.Help }))
: null,
React.createElement("div", { role: "button", tabIndex: ((_a = props.Disabled) !== null && _a !== void 0 ? _a : false) ? -1 : 0, style: __assign(__assign({ padding: '.375rem .75rem' }, (((_b = props.Disabled) !== null && _b !== void 0 ? _b : false) ? { pointerEvents: 'none', opacity: 0.65 } : {})), ((_c = props.BtnStyle) !== null && _c !== void 0 ? _c : {})), className: "dropdown-toggle form-control ".concat(((_e = (_d = props.Valid) === null || _d === void 0 ? void 0 : _d.call(props, props.Field)) !== null && _e !== void 0 ? _e : true) ? '' : 'is-invalid'), onMouseDown: function (evt) { return evt.preventDefault(); }, onClick: function (evt) {
var _a;
HandleShow(evt);
if ((_a = props.Disabled) !== null && _a !== void 0 ? _a : false)
return;
} },
React.createElement("div", { style: props.Style }, (_f = props.Options[selectedOptionIndex]) === null || _f === void 0 ? void 0 : _f.Element)),
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) {
var _a, _b;
return i === selectedOptionIndex ? null : ((React.createElement("tr", { key: "".concat(i, "-").concat(JSON.stringify(f.Value)), className: (_a = f.RowClass) !== null && _a !== void 0 ? _a : '', style: f.RowStyle, onMouseDown: function (evt) {
var _a;
if ((_a = f.Disabled) !== null && _a !== void 0 ? _a : false) {
evt.stopPropagation();
evt.preventDefault();
return;
}
handleOptionClick(evt, f);
}, "aria-disabled": (_b = f.Disabled) !== null && _b !== void 0 ? _b : false },
React.createElement("td", null, f.Element))));
})))))));
}