@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
159 lines • 6.99 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
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 React, { useState } from "react";
import { Fade } from "react-awesome-reveal";
import HUDIcon from "./HUDIcon.js";
var defaultStyles = {
results: {
position: "absolute",
top: "100%",
left: "0",
right: "0",
background: "transparent",
border: "none",
borderTop: "none",
maxHeight: "300px",
overflowY: "auto",
zIndex: "1000",
listStyle: "none",
margin: "0",
padding: "0",
borderRadius: "0 0 8px 8px",
animation: "fadeIn 0.3s ease-in-out"
},
result: {
display: "flex",
alignItems: "center",
padding: "12px 18px",
cursor: "pointer",
transition: "background 0.3s, color 0.3s",
color: "#fff",
borderBottom: "1px solid #444",
borderRadius: "8px",
background: "#2c2c2c",
margin: "5px 10px",
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)"
},
resultHeaderDivider: {
position: "relative",
display: "flex",
background: "rgba(247, 247, 247, 0.469)",
height: "0.169rem",
width: "calc(100%)",
marginBottom: "0.369rem",
marginRight: "0.69rem",
marginLeft: "0.69rem",
marginTop: "0.369rem"
},
resultHover: {
background: "#3a3a3a",
color: "#fff"
},
resultIcon: {
marginRight: "12px",
fontSize: "22px",
color: "#5eacff"
},
resultDetails: {
display: "flex",
flexDirection: "column"
},
resultTitle: {
display: "flex",
justifyContent: "flex-start",
fontSize: "18px",
fontWeight: "bold",
color: "#5eacff"
},
resultAddress: {
textIndent: "0.69rem",
fontSize: "15px",
color: "#ccc"
},
"@keyframes fadeIn": {
from: {
opacity: 0
},
to: {
opacity: 1
}
}
};
var HUDLocationList = function HUDLocationList(_ref) {
var _ref$resultCellHeader = _ref.resultCellHeaderDividerConfigurationSettings,
resultCellHeaderDividerConfigurationSettings = _ref$resultCellHeader === void 0 ? {} : _ref$resultCellHeader,
_ref$resultCellAddres = _ref.resultCellAddressConfigurationSettings,
resultCellAddressConfigurationSettings = _ref$resultCellAddres === void 0 ? {} : _ref$resultCellAddres,
_ref$resultCellDetail = _ref.resultCellDetailsConfigurationSettings,
resultCellDetailsConfigurationSettings = _ref$resultCellDetail === void 0 ? {} : _ref$resultCellDetail,
_ref$resultsContainer = _ref.resultsContainerConfigurationSettings,
resultsContainerConfigurationSettings = _ref$resultsContainer === void 0 ? {} : _ref$resultsContainer,
_ref$resultContainerC = _ref.resultContainerConfigurationSettings,
resultContainerConfigurationSettings = _ref$resultContainerC === void 0 ? {} : _ref$resultContainerC,
_ref$resultCellHoverC = _ref.resultCellHoverConfigurationSettings,
resultCellHoverConfigurationSettings = _ref$resultCellHoverC === void 0 ? {} : _ref$resultCellHoverC,
_ref$resultCellTitleC = _ref.resultCellTitleConfigurationSettings,
resultCellTitleConfigurationSettings = _ref$resultCellTitleC === void 0 ? {} : _ref$resultCellTitleC,
_ref$resultCellIconCo = _ref.resultCellIconConfigurationSettings,
resultCellIconConfigurationSettings = _ref$resultCellIconCo === void 0 ? {} : _ref$resultCellIconCo,
resultIconConfigurations = _ref.resultIconConfigurations,
onResultSelect = _ref.onResultSelect,
onResultClick = _ref.onResultClick,
results = _ref.results;
var _useState = useState(null),
_useState2 = _slicedToArray(_useState, 2),
hoveredResultIndex = _useState2[0],
setHoveredResultIndex = _useState2[1];
var combinedStyles = {
results: _objectSpread(_objectSpread({}, defaultStyles.results), resultsContainerConfigurationSettings),
result: _objectSpread(_objectSpread({}, defaultStyles.result), resultContainerConfigurationSettings),
resultHover: _objectSpread(_objectSpread({}, defaultStyles.resultHover), resultCellHoverConfigurationSettings),
resultIcon: _objectSpread(_objectSpread({}, defaultStyles.resultIcon), resultCellIconConfigurationSettings),
resultHeaderDivider: _objectSpread(_objectSpread({}, defaultStyles.resultHeaderDivider), resultCellHeaderDividerConfigurationSettings),
resultDetails: _objectSpread(_objectSpread({}, defaultStyles.resultDetails), resultCellDetailsConfigurationSettings),
resultTitle: _objectSpread(_objectSpread({}, defaultStyles.resultTitle), resultCellTitleConfigurationSettings),
resultAddress: _objectSpread(_objectSpread({}, defaultStyles.resultAddress), resultCellAddressConfigurationSettings)
};
return /*#__PURE__*/React.createElement("ul", {
className: "invisa-scroller",
style: combinedStyles.results
}, results.map(function (result, index) {
return /*#__PURE__*/React.createElement(Fade, {
direction: "down",
duration: 369
}, /*#__PURE__*/React.createElement("li", {
key: index,
onClick: function onClick() {
onResultSelect(result);
console.log(result);
if (onResultClick) {
onResultClick(result);
}
},
onMouseEnter: function onMouseEnter() {
return setHoveredResultIndex(index);
},
onMouseLeave: function onMouseLeave() {
return setHoveredResultIndex(null);
},
style: _objectSpread(_objectSpread({}, combinedStyles.result), hoveredResultIndex === index ? combinedStyles.resultHover : {})
}, /*#__PURE__*/React.createElement(HUDIcon, _extends({
iconConfigurationSettings: combinedStyles.resultIcon,
name: "fa-map-marker-alt"
}, resultIconConfigurations)), /*#__PURE__*/React.createElement("div", {
style: combinedStyles.resultDetails
}, /*#__PURE__*/React.createElement("div", {
style: combinedStyles.resultTitle
}, "".concat(result.place_name ? result.place_name.split(",")[0] : result.text)), /*#__PURE__*/React.createElement("div", {
style: combinedStyles.resultHeaderDivider
}), result.context && /*#__PURE__*/React.createElement("div", {
style: combinedStyles.resultAddress
}, result.context.map(function (c) {
return c.text;
}).join(", ")))));
}));
};
export default HUDLocationList;