@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
219 lines • 10.2 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _regeneratorRuntime from "@babel/runtime/regenerator";
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, useEffect } from "react";
import MapboxClient from "@mapbox/mapbox-sdk/services/geocoding.js";
import HUDLocationList from "./HUDLocationList.js";
import HUDInput from "./HUDInput.js";
var defaultStyles = {
container: {
position: "relative",
width: "100%",
maxWidth: "600px",
margin: "auto",
fontFamily: "Arial, sans-serif",
backgroundColor: "#1a1a1a",
borderRadius: "8px",
padding: "10px",
boxShadow: "0 8px 16px rgba(0, 0, 0, 0.3)"
},
input: {
outline: "none",
width: "100%",
padding: "15px",
border: "2px solid #444",
borderRadius: "4px",
fontSize: "18px",
color: "#fff",
backgroundColor: "#333",
boxSizing: "border-box",
transition: "transform 0.369s ease, border-color 0.369s, box-shadow 0.369s"
},
inputFocus: {
borderColor: "#5eacff",
boxShadow: "0 0 10px #007bff",
transform: "scale(1.0069)"
}
};
var HUDLocationInput = function HUDLocationInput(_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,
_ref$inputFocusConfig = _ref.inputFocusConfigurationSettings,
inputFocusConfigurationSettings = _ref$inputFocusConfig === void 0 ? {} : _ref$inputFocusConfig,
_ref$containerConfigu = _ref.containerConfigurationSettings,
containerConfigurationSettings = _ref$containerConfigu === void 0 ? {} : _ref$containerConfigu,
_ref$inputConfigurati = _ref.inputConfigurationSettings,
inputConfigurationSettings = _ref$inputConfigurati === void 0 ? {} : _ref$inputConfigurati,
_ref$resultIconConfig = _ref.resultIconConfigurations,
resultIconConfigurations = _ref$resultIconConfig === void 0 ? {} : _ref$resultIconConfig,
_ref$inputConfigurati2 = _ref.inputConfigurations,
inputConfigurations = _ref$inputConfigurati2 === void 0 ? {} : _ref$inputConfigurati2,
_ref$accessToken = _ref.accessToken,
accessToken = _ref$accessToken === void 0 ? "pk.eyJ1IjoidHJhcC1zdGV2byIsImEiOiJjbHozYWZvNTcwNjMxMmxxMTRmdjJ1eWJpIn0.W8aytPSnvamwrxOCn3Udww" : _ref$accessToken,
_ref$placeholder = _ref.placeholder,
placeholder = _ref$placeholder === void 0 ? "Search for a location" : _ref$placeholder,
_ref$minQueryLength = _ref.minQueryLength,
minQueryLength = _ref$minQueryLength === void 0 ? 3 : _ref$minQueryLength,
_ref$limit = _ref.limit,
limit = _ref$limit === void 0 ? 5 : _ref$limit,
inputFocusExternally = _ref.inputFocusExternally,
inputValueExternally = _ref.inputValueExternally,
setResultsExternally = _ref.setResultsExternally,
onResultSelect = _ref.onResultSelect,
onResultClick = _ref.onResultClick,
_ref$showList = _ref.showList,
showList = _ref$showList === void 0 ? true : _ref$showList,
setInputFocus = _ref.setInputFocus,
setInputValue = _ref.setInputValue,
inputFocus = _ref.inputFocus,
inputValue = _ref.inputValue;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
inputFocused = _useState2[0],
setInputFocused = _useState2[1];
var _useState3 = useState(null),
_useState4 = _slicedToArray(_useState3, 2),
client = _useState4[0],
setClient = _useState4[1];
var _useState5 = useState([]),
_useState6 = _slicedToArray(_useState5, 2),
results = _useState6[0],
setResults = _useState6[1];
var _useState7 = useState(""),
_useState8 = _slicedToArray(_useState7, 2),
query = _useState8[0],
setQuery = _useState8[1];
var combinedStyles = {
container: _objectSpread(_objectSpread({}, defaultStyles.container), containerConfigurationSettings),
input: _objectSpread(_objectSpread({}, defaultStyles.input), inputConfigurationSettings),
inputFocus: _objectSpread(_objectSpread({}, defaultStyles.inputFocus), inputFocusConfigurationSettings)
};
var handleSearch = /*#__PURE__*/function () {
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
var value, response;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
value = event.target.value;
setQuery(value);
if (!(client && value.length >= minQueryLength)) {
_context.next = 14;
break;
}
_context.prev = 3;
_context.next = 6;
return client.forwardGeocode({
query: value,
limit: limit
}).send();
case 6:
response = _context.sent;
setResults(response.body.features);
_context.next = 13;
break;
case 10:
_context.prev = 10;
_context.t0 = _context["catch"](3);
console.error("Did not get location data: ", _context.t0);
case 13:
return _context.abrupt("return");
case 14:
setResults([]);
return _context.abrupt("return");
case 16:
case "end":
return _context.stop();
}
}, _callee, null, [[3, 10]]);
}));
return function handleSearch(_x) {
return _ref2.apply(this, arguments);
};
}();
var handleResultSelect = function handleResultSelect(result) {
setQuery(result.place_name);
setResults([]);
if (onResultSelect) {
onResultSelect(result);
}
return;
};
useEffect(function () {
if (accessToken) {
var mapboxClient = MapboxClient({
accessToken: accessToken
});
setClient(mapboxClient);
}
}, [accessToken]);
useEffect(function () {
if (setResultsExternally) {
setResultsExternally(results);
}
}, [results, setResultsExternally]);
useEffect(function () {
if (inputFocusExternally !== undefined && inputFocusExternally !== null) {
setInputFocused(inputFocusExternally);
}
}, [inputFocusExternally]);
useEffect(function () {
if (inputValueExternally) {
setQuery(inputValueExternally);
}
}, [inputValueExternally]);
return /*#__PURE__*/React.createElement("div", {
style: combinedStyles.container
}, /*#__PURE__*/React.createElement(HUDInput, _extends({
inputContainerConfigurationSettings: _objectSpread(_objectSpread({}, combinedStyles.input), inputFocused ? combinedStyles.inputFocus : {}),
setInputFocus: setInputFocus ? setInputFocus : setInputFocused,
inputFocus: inputFocus !== undefined && inputFocus !== null ? inputFocus : inputFocused,
inputValue: inputValue ? inputValue : query,
onFocus: function onFocus() {
if (setInputFocus) {
setInputFocus(true);
}
setInputFocused(true);
},
onBlur: function onBlur() {
if (setInputFocus) {
setInputFocus(false);
}
setInputFocused(false);
},
onChange: handleSearch,
placeholder: placeholder,
inputType: "text"
}, inputConfigurations)), showList && /*#__PURE__*/React.createElement(HUDLocationList, {
resultCellHeaderDividerConfigurationSettings: resultCellHeaderDividerConfigurationSettings,
resultCellAddressConfigurationSettings: resultCellAddressConfigurationSettings,
resultCellDetailsConfigurationSettings: resultCellDetailsConfigurationSettings,
resultsContainerConfigurationSettings: resultsContainerConfigurationSettings,
resultContainerConfigurationSettings: resultContainerConfigurationSettings,
resultCellHoverConfigurationSettings: resultCellHoverConfigurationSettings,
resultCellTitleConfigurationSettings: resultCellTitleConfigurationSettings,
resultCellIconConfigurationSettings: resultCellIconConfigurationSettings,
resultIconConfigurations: resultIconConfigurations,
onResultSelect: handleResultSelect,
onResultClick: onResultClick,
results: results
}));
};
export default HUDLocationInput;