@wix/design-system
Version:
@wix/design-system
365 lines (363 loc) • 14.1 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = exports.GoogleAddressInputHandler = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _castArray = _interopRequireDefault(require("lodash/castArray"));
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _Input = _interopRequireDefault(require("../Input"));
var _InputWithOptions = _interopRequireDefault(require("../InputWithOptions"));
var _google2address = require("./google2address");
var _GoogleAddressInputSt = require("./GoogleAddressInput.st.css.js");
var _IconThemeContext = require("../WixDesignSystemIconThemeProvider/IconThemeContext");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/GoogleAddressInput/GoogleAddressInput.jsx",
_GoogleAddressInput;
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) { (0, _defineProperty2["default"])(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; }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var GoogleAddressInputHandler = exports.GoogleAddressInputHandler = {
geocode: 'geocode',
places: 'places'
};
/**
* Address input box (using Google Maps)
*/
var GoogleAddressInput = /*#__PURE__*/function (_React$Component) {
function GoogleAddressInput(props) {
var _this;
(0, _classCallCheck2["default"])(this, GoogleAddressInput);
_this = _callSuper(this, GoogleAddressInput, [props]);
_this.state = {
suggestions: [],
value: props.value || ''
};
_this.autoCompleteRequestId = 0;
_this.geocodeRequestId = 0;
_this.client = new props.Client();
_this.onChange = _this.onChange.bind(_this);
_this.onBlur = _this.onBlur.bind(_this);
_this.onFocus = _this.onFocus.bind(_this);
_this.onSet = _this.onSet.bind(_this);
_this.onManuallyInput = _this.onManuallyInput.bind(_this);
return _this;
}
(0, _inherits2["default"])(GoogleAddressInput, _React$Component);
return (0, _createClass2["default"])(GoogleAddressInput, [{
key: "UNSAFE_componentWillReceiveProps",
value: function UNSAFE_componentWillReceiveProps(nextProps) {
var _this2 = this;
if (nextProps.value !== this.props.value) {
this._getSuggestions(nextProps.value).then(function (suggestions) {
_this2.setState({
suggestions: suggestions
});
})["catch"](function () {
// Nothing really to do...
_this2.setState({
suggestions: []
});
});
}
}
}, {
key: "render",
value: function render() {
var _this3 = this;
var _this$state = this.state,
suggestions = _this$state.suggestions,
value = _this$state.value;
var magnifyingGlass = this.props.magnifyingGlass;
var options = [].concat((0, _toConsumableArray2["default"])(suggestions.map(function (suggestion, index) {
var place_id = suggestion.place_id,
description = suggestion.description;
return {
id: place_id || index,
value: description
};
})), (0, _toConsumableArray2["default"])(this.props.footer ? [_objectSpread({
id: suggestions.length,
value: this.props.footer
}, this.props.footerOptions)] : []));
return /*#__PURE__*/_react["default"].createElement(_IconThemeContext.IconThemeContext.Consumer, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 78,
columnNumber: 7
}
}, function (_ref) {
var _icons$GoogleAddressI;
var _ref$icons = _ref.icons,
icons = _ref$icons === void 0 ? {} : _ref$icons;
var SearchIcon = ((_icons$GoogleAddressI = icons.GoogleAddressInput) == null ? void 0 : _icons$GoogleAddressI.Search) || _wixUiIconsCommon.Search;
var suffix = magnifyingGlass ? /*#__PURE__*/_react["default"].createElement(_Input["default"].IconAffix, {
__self: _this3,
__source: {
fileName: _jsxFileName,
lineNumber: 83,
columnNumber: 13
}
}, /*#__PURE__*/_react["default"].createElement(SearchIcon, {
"data-hook": "search-icon",
__self: _this3,
__source: {
fileName: _jsxFileName,
lineNumber: 84,
columnNumber: 15
}
})) : undefined;
return /*#__PURE__*/_react["default"].createElement("div", {
__self: _this3,
__source: {
fileName: _jsxFileName,
lineNumber: 89,
columnNumber: 13
}
}, /*#__PURE__*/_react["default"].createElement(_InputWithOptions["default"], (0, _extends2["default"])({
ref: function ref(autocomplete) {
_this3.autocomplete = autocomplete;
}
}, _this3.props, {
onInput: _this3.onChange,
onBlur: _this3.onBlur,
onFocus: _this3.onFocus,
onSelect: function onSelect(option) {
return _this3.onSet(option.value);
},
onManuallyInput: _this3.onManuallyInput,
value: value,
options: options,
fixedFooter: suggestions.length && _this3.props.poweredByGoogle ? GoogleAddressInput.getGoogleFooter() : null,
suffix: suffix,
selectedHighlight: false,
menuArrow: false,
__self: _this3,
__source: {
fileName: _jsxFileName,
lineNumber: 90,
columnNumber: 15
}
})));
});
}
}, {
key: "focus",
value: function focus() {
this.autocomplete.focus();
}
}, {
key: "select",
value: function select() {
this.autocomplete.select();
}
}, {
key: "onChange",
value: function onChange(e) {
var _this4 = this;
var value = e.target.value;
this.props.onChange && this.props.onChange(e);
this.props.onSet && this.props.onSet(null);
if (typeof this.props.value !== 'undefined') {
// Controlled mode
return;
}
this._getSuggestions(value).then(function (suggestions) {
_this4.setState({
suggestions: suggestions
});
})["catch"](function () {
// Nothing really to do...
_this4.setState({
suggestions: []
});
});
}
}, {
key: "onBlur",
value: function onBlur() {
var _this5 = this;
this.props.onBlur && this.props.onBlur();
if (this.props.clearSuggestionsOnBlur) {
this.timer = setTimeout(function () {
_this5.setState({
suggestions: []
});
}, 250);
}
}
}, {
key: "onFocus",
value: function onFocus() {
this.props.onFocus && this.props.onFocus();
}
}, {
key: "onSet",
value: function onSet(value) {
var _this6 = this;
var _this$props = this.props,
countryCode = _this$props.countryCode,
handler = _this$props.handler;
var suggestion = this.state.suggestions.find(function (s) {
return s.description === value;
});
this.setState({
suggestions: [],
value: this.props.value || value
});
var requestId = ++this.geocodeRequestId;
var handlerCall;
if (handler === GoogleAddressInputHandler.places && suggestion && suggestion.place_id) {
var request = {
request: {
placeId: suggestion.place_id
}
};
if (this.props.placeDetailsFields) {
request.request.fields = this.props.placeDetailsFields;
}
handlerCall = this.client.placeDetails(request);
} else {
handlerCall = this.client.geocode({
request: (0, _defineProperty2["default"])({
region: countryCode
}, suggestion ? 'placeId' : 'address', suggestion ? suggestion.place_id : value)
});
}
handlerCall.then(function (results) {
results = (0, _castArray["default"])(results).filter(Boolean);
if (requestId !== _this6.geocodeRequestId) {
return;
}
if (results.length === 0) {
console.error("[GoogleAddressInput] handler (".concat(handler, ") returned no results on"), value);
_this6.props.onSet && _this6.props.onSet(null);
// This shouldn't happen since we're running geocode on exactly the same
// value returned by suggestions list
return;
}
var firstResult = (0, _google2address.trySetStreetNumberIfNotReceived)(results[0], _this6.state.value);
var result = {
originValue: value,
googleResult: firstResult,
address: (0, _google2address.google2address)(firstResult)
};
_this6.props.onSet && _this6.props.onSet(result);
})["catch"](function (e) {
console.error("[GoogleAddressInput] handler (".concat(handler, ") failed on"), value, e.message);
_this6.props.onSet && _this6.props.onSet(null);
});
}
}, {
key: "onManuallyInput",
value: function onManuallyInput(inputValue) {
var _this7 = this;
var _this$props2 = this.props,
value = _this$props2.value,
fallbackToManual = _this$props2.fallbackToManual,
onSet = _this$props2.onSet;
if (fallbackToManual) {
this._getSuggestions(inputValue, typeof value !== 'undefined').then(function (suggestions) {
if (suggestions.length === 0) {
// No suggestion to the text entered
if (inputValue) {
_this7.onSet(inputValue);
} else {
onSet && onSet(null);
}
}
});
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
if (this.timer) {
clearTimeout(this.timer);
}
}
}, {
key: "_getSuggestions",
value: function _getSuggestions(value, skipSetState) {
var _this8 = this;
var _this$props3 = this.props,
_this$props3$valuePre = _this$props3.valuePrefix,
valuePrefix = _this$props3$valuePre === void 0 ? '' : _this$props3$valuePre,
countryCode = _this$props3.countryCode,
types = _this$props3.types,
filterTypes = _this$props3.filterTypes;
var requestId = ++this.autoCompleteRequestId;
return new Promise(function (resolve) {
if (skipSetState) {
// Controlled mode
resolve();
return;
}
_this8.setState({
value: value
}, function () {
return resolve();
});
}).then(function () {
if (value === '') {
return Promise.resolve([]);
}
var request = {
types: types,
componentRestrictions: {
country: countryCode
},
input: valuePrefix + value
};
return _this8.client.autocomplete({
request: request
});
}).then(function (results) {
if (results.length === 0) {
return Promise.resolve([]);
}
if (requestId !== _this8.autoCompleteRequestId) {
return Promise.resolve([]);
}
if (filterTypes) {
results = results.filter(function (result) {
return (0, _google2address.includes)(result.types, filterTypes);
});
}
return Promise.resolve(results);
});
}
}]);
}(_react["default"].Component);
_GoogleAddressInput = GoogleAddressInput;
GoogleAddressInput.getGoogleFooter = function () {
return /*#__PURE__*/_react["default"].createElement("div", {
className: _GoogleAddressInputSt.classes.googleFooter,
"data-hook": "google-footer",
__self: _GoogleAddressInput,
__source: {
fileName: _jsxFileName,
lineNumber: 119,
columnNumber: 5
}
});
};
GoogleAddressInput.displayName = 'GoogleAddressInput';
GoogleAddressInput.defaultProps = {
magnifyingGlass: true,
autoSelect: true,
footerOptions: {},
clearSuggestionsOnBlur: true,
fallbackToManual: false,
poweredByGoogle: false,
handler: GoogleAddressInputHandler.geocode
};
var _default = exports["default"] = GoogleAddressInput;