@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
185 lines • 7.92 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import * as React from 'react';
import { useState, useEffect, useRef, useCallback } from 'react';
import { useNavigate, useParams } from "react-router-dom";
import { ConvertNumberToMoneyFormat, ConvertNumberToWords, DisplayLegalDocumentCurrentDate } from "../HUDManagers/HUDUniversalHUDUtilityManager.js";
import HUDTyper from "../HUDComponents/HUDTyper.js";
function UsersView(usersViewConfigurationSettings) {
var usersViewContainerSettings = usersViewConfigurationSettings.usersViewContainerSettings,
hoverAction = usersViewConfigurationSettings.hoverAction,
action = usersViewConfigurationSettings.action,
getUserProfilePicAction = usersViewConfigurationSettings.getUserProfilePicAction,
baseUserProfilePic = usersViewConfigurationSettings.baseUserProfilePic,
_usersViewConfigurati = usersViewConfigurationSettings.showUserSearch,
showUserSearch = _usersViewConfigurati === void 0 ? true : _usersViewConfigurati,
signedUser = usersViewConfigurationSettings.signedUser,
setUsers = usersViewConfigurationSettings.setUsers,
users = usersViewConfigurationSettings.users;
var _useState = useState(null),
_useState2 = _slicedToArray(_useState, 2),
hoveredUserIndex = _useState2[0],
setHoveredUserIndex = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
userSearchInputFocus = _useState4[0],
setUserSearchInputFocus = _useState4[1];
var _useState5 = useState(""),
_useState6 = _slicedToArray(_useState5, 2),
userSearchInputValue = _useState6[0],
setUserSearchInputValue = _useState6[1];
var _useState7 = useState(users && users.length > 0 ? users : []),
_useState8 = _slicedToArray(_useState7, 2),
currentUsers = _useState8[0],
setCurrentUsers = _useState8[1];
var handleUserSearchInputInFocusUpdate = function handleUserSearchInputInFocusUpdate(e) {
e.preventDefault();
setUserSearchInputFocus(true);
return;
};
var handleUserSearchInputBlurUpdate = function handleUserSearchInputBlurUpdate(e) {
e.preventDefault();
setUserSearchInputFocus(false);
return;
};
var handleUserSearchInputUpdate = function handleUserSearchInputUpdate(e) {
e.preventDefault();
var inputValue = e.target.value;
setUserSearchInputValue(inputValue);
setCurrentUsers(users.filter(function (user) {
return user.displayName.includes(inputValue) || user.username.includes(inputValue) || user.email.includes(inputValue);
}));
return;
};
return /*#__PURE__*/React.createElement(React.Fragment, null, users.length > 0 && showUserSearch ? /*#__PURE__*/React.createElement("input", {
type: "text",
placeholder: "Search for user...",
onFocus: handleUserSearchInputInFocusUpdate,
onBlur: handleUserSearchInputBlurUpdate,
onChange: handleUserSearchInputUpdate,
value: userSearchInputValue,
style: {
background: "rgba(217, 217, 217, 0.25)",
borderRadius: "1rem",
border: "1px black solid",
outline: "none",
boxShadow: userSearchInputFocus ? "5px 5px 5px -4.69px rgba(0, 0, 0, 0.469)" : "none",
scale: userSearchInputFocus ? "1.069" : "1",
transition: "scale 0.269s ease-in-out, box-shadow 0.369s ease-in-out, margin-left 0.269s ease-in-out",
width: "47%",
height: "2rem",
fontSize: "1.269rem",
paddingLeft: "0.69rem",
marginBottom: "1rem",
marginRight: "0.269rem",
marginLeft: userSearchInputFocus ? "2rem" : "0rem"
}
}) : /*#__PURE__*/React.createElement(React.Fragment, null), currentUsers.length > 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
className: "invisa-scroller",
style: _objectSpread({
position: "relative",
display: "flex",
flexDirection: "column",
background: "transparent",
overflowY: "auto",
height: "15.69rem",
width: "calc(100%)",
marginBottom: "1rem"
}, usersViewContainerSettings)
}, currentUsers.map(function (user, index) {
return /*#__PURE__*/React.createElement("div", _defineProperty(_defineProperty({
key: index,
style: {
position: "relative",
display: "flex",
transition: "box-shadow 0.369s ease-in",
boxShadow: hoveredUserIndex === index ? "inset 0 0 3px rgba(0, 0, 0, 0.469)" : "inset 0 0 1px rgba(0, 0, 0, 0.469)",
background: "rgba(237, 237, 237, 0.169)",
borderRadius: "1rem",
cursor: "pointer",
height: "auto",
width: "auto",
padding: "0.269rem",
marginBottom: "1rem",
marginRight: "1rem"
},
onMouseLeave: function onMouseLeave() {
setHoveredUserIndex(null);
return;
}
}, "onMouseLeave", function onMouseLeave() {
setHoveredUserIndex(index);
return;
}), "onClick", function onClick() {
try {
if (action !== undefined && action !== null) {
action(user);
return;
}
return;
} catch (error) {
return;
}
}), /*#__PURE__*/React.createElement("img", {
style: {
position: "relative",
objectFit: "cover",
boxShadow: "-1px 1px -5px 1px rgba(0, 0, 0, 0.369)",
borderRadius: "3.69rem",
height: "3.69rem",
marginLeft: "0.569rem"
},
src: getUserProfilePicAction !== undefined && getUserProfilePicAction(user.username) !== null ? getUserProfilePicAction(user.username).profilePictureID : baseUserProfilePic !== undefined ? baseUserProfilePic : ""
}), /*#__PURE__*/React.createElement("div", {
style: {
position: "relative",
display: "flex",
flexDirection: "column"
}
}, /*#__PURE__*/React.createElement("label", {
style: {
fontWeight: "369",
fontSize: "1.269rem",
color: "rgba(0, 0, 0, 0.569)",
marginBottom: "1rem",
marginLeft: "1rem"
}
}, /*#__PURE__*/React.createElement(HUDTyper, {
speed: 3
}, user.displayName)), /*#__PURE__*/React.createElement("label", {
style: {
fontWeight: "169",
fontSize: "1.069rem",
color: "rgba(0, 0, 0, 0.569)",
marginBottom: "1rem",
marginLeft: "1rem"
}
}, /*#__PURE__*/React.createElement(HUDTyper, {
speed: 3
}, user.email)), /*#__PURE__*/React.createElement("label", {
style: {
fontWeight: "169",
fontStyle: "italic",
fontSize: "1.069rem",
color: "rgba(0, 0, 0, 0.569)",
marginBottom: "1rem",
marginLeft: "1rem"
}
}, /*#__PURE__*/React.createElement(HUDTyper, {
speed: 3
}, user.username))));
}))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", {
style: {
fontWeight: "169",
fontSize: "1.269rem",
color: "rgba(0, 0, 0, 0.569)",
marginBottom: "1rem",
marginLeft: "1rem"
}
}, /*#__PURE__*/React.createElement(HUDTyper, {
speed: 3
}, "No Users."))));
}
export default UsersView;