wix-style-react
Version:
wix-style-react
215 lines (212 loc) • 10.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _AddressInput = _interopRequireDefault(require("../AddressInput"));
var _AddressInputItem = require("../AddressInputItem");
var _usePlacesAutocomplete = _interopRequireDefault(require("../providers/usePlacesAutocomplete"));
var _useAtlasClient = _interopRequireDefault(require("../providers/useAtlasClient"));
var _constants = require("./constants");
var _excluded = ["baseUrl", "token", "language", "locale", "debounceMs", "debounceFn", "onChange", "onClear", "onSelect", "onError", "selectOnSubmit", "optionLayout", "optionPrefix", "optionSuffix", "status"];
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/AtlasAddressInput/AtlasAddressInput.js";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var AtlasAddressInput = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
var {
baseUrl,
token,
language = 'en',
locale = 'en-us',
debounceMs,
debounceFn,
onChange,
onClear,
onSelect,
onError,
selectOnSubmit,
optionLayout,
optionPrefix,
optionSuffix,
status: statusProp
} = _ref,
props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
var client = (0, _useAtlasClient.default)({
baseUrl,
token,
language,
locale
});
var {
predictions,
updatePredictions,
clearPredictions,
loading
} = (0, _usePlacesAutocomplete.default)({
client,
debounceMs,
debounceFn,
onError
});
// If not loading, show the status passed from props
var status = loading ? 'loading' : statusProp;
var options = (0, _react.useMemo)(() => predictions.map(prediction => (0, _AddressInputItem.addressInputItemBuilder)({
id: prediction.searchId,
mainLabel: prediction.textStructure.mainText,
secondaryLabel: prediction.textStructure.secondaryText,
displayLabel: prediction.description,
optionLayout,
prefix: optionPrefix,
suffix: optionSuffix,
dataHook: _constants.dataHooks.item
})), [predictions, optionLayout, optionPrefix, optionSuffix]);
var innerRef = (0, _react.useRef)();
(0, _react.useImperativeHandle)(ref, () => ({
focus: () => innerRef.current && innerRef.current.focus()
}));
var _onChange = (0, _react.useCallback)(event => {
updatePredictions(event.target.value);
onChange && onChange(event);
}, [updatePredictions, onChange]);
var _onClear = (0, _react.useCallback)(() => {
clearPredictions();
onClear && onClear();
}, [clearPredictions, onClear]);
var _onSelect = (0, _react.useCallback)(option => {
var getAddress = () => client.getAddress(option.id);
onSelect && onSelect(option, getAddress);
}, [client, onSelect]);
// A callback which is called when the user performs a Submit-Action
var _onManualSubmit = (0, _react.useCallback)(inputValue => {
if (selectOnSubmit && onSelect && inputValue) {
var option = (0, _AddressInputItem.addressInputItemBuilder)({
id: inputValue,
mainLabel: inputValue,
displayLabel: inputValue
});
var getAddress = /*#__PURE__*/function () {
var _ref2 = (0, _asyncToGenerator2.default)(function* () {
// search for address matching input value
var addresses = yield client.searchAddresses(inputValue);
// Return first address result
return addresses[0];
});
return function getAddress() {
return _ref2.apply(this, arguments);
};
}();
onSelect(option, getAddress);
}
}, [selectOnSubmit, onSelect, client]);
return /*#__PURE__*/_react.default.createElement(_AddressInput.default, (0, _extends2.default)({}, props, {
options: options,
onChange: _onChange,
onClear: _onClear,
onSelect: _onSelect,
onManuallyInput: _onManualSubmit,
status: status,
ref: innerRef,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 110,
columnNumber: 7
}
}));
});
AtlasAddressInput.displayName = 'AtlasAddressInput';
AtlasAddressInput.propTypes = {
/** Accept a custom domain for WixAtlasServiceWeb to retrieve predictions from */
baseUrl: _propTypes.default.string,
/** Sets an authorization token to pass to the Atlas Service */
token: _propTypes.default.string,
/** Sets the `language` to pass to the Atlas Service.
* Use the language code e.g. `'en'`.
*/
language: _propTypes.default.string,
/** Sets the `locale` to pass to the Atlas Service.
* Locale consists of language code and country code separated by a dash e.g. `'en-us'`.
*/
locale: _propTypes.default.string,
/** Fetch predictions debounce in milliseconds (default: 200) */
debounceMs: _propTypes.default.number,
/** Allows passing a custom debounce function (default: lodash debounce).
* Usage:
* (callback: Function, debounceMs: number) => Function */
debounceFn: _propTypes.default.func,
/** Applies a data-hook HTML attribute that can be used in the tests */
dataHook: _propTypes.default.string,
/** Specifies a CSS class name to be appended to the component’s root element */
className: _propTypes.default.string,
/** Displays clear button (X) on a non-empty input */
clearButton: _propTypes.default.bool,
/** Sets the initial input value */
initialValue: _propTypes.default.string,
/** Sets a value to display (controlled mode) */
value: _propTypes.default.string,
/** Specifies whether input is disabled */
disabled: _propTypes.default.bool,
/** Defines a callback function which is called whenever a user selects a different option in the list.
* @param {DropdownLayoutOption} option selected option
* @param {() => Promise<Address>} getAddress function for retrieving additional place details
*/
onSelect: _propTypes.default.func,
/** Defines a callback function which is called every time input value is changed */
onChange: _propTypes.default.func,
/** Defines a handler for getting notified upon a clear event. When passed, it displays a clear button in the input. */
onClear: _propTypes.default.func,
/** Defines a standard input onFocus callback */
onFocus: _propTypes.default.func,
/** Defines a standard input onBlur callback */
onBlur: _propTypes.default.func,
/** Specifies whether input is auto selected on focus */
autoSelect: _propTypes.default.bool,
/** Specifies whether to trigger `onSelect` handler when performing a Submit-Action (Enter or Tab key down).
* If set to true, `onSelect` will be called with the following params:
*
* `option`: an option with a label set to the input value.
*
* `getAddress`: function for retrieving additional place details
* uses Atlas's search function to return the closest result to the input value
*
* This is useful when looking for locations for which Atlas does not give suggestions - for example: Apartment/Apt. */
selectOnSubmit: _propTypes.default.bool,
/** Defines a handler for prediction fetching errors. Returns an error object.
* you can read these [guidelines](https://bo.wix.com/wix-docs/rnd/platformization-guidelines/errors#platformization-guidelines_errors_errors)
* to learn about the meaning of each error status.
*/
onError: _propTypes.default.func,
/** Specify the status of a field. Mostly used for a “loading” indication upon async request calls. */
status: _propTypes.default.oneOf(['loading', 'error', 'warning']),
/** Defines the message to display on status icon hover. If not given or empty there will be no tooltip */
statusMessage: _propTypes.default.node,
/** Control the border style of an input */
border: _propTypes.default.oneOf(['standard', 'round', 'bottomLine', 'none']),
/** Controls the size of the input */
size: _propTypes.default.oneOf(['small', 'medium', 'large']),
/** Sets a placeholder message to display */
placeholder: _propTypes.default.string,
/** Sets the message to show in a dropdown when no results are found */
noResultsText: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
/** Sets the layout of `mainLabel` and `secondaryLabel`. The possible options can be either side by side or vertically stacked. */
optionLayout: _propTypes.default.oneOf(['single-line', 'double-line']),
/** Pass any component to show as the prefix of the option, e.g., text, icon. */
optionPrefix: _propTypes.default.node,
/** Pass any component to show as the suffix of the option, e.g., text, icon, button. */
optionSuffix: _propTypes.default.node,
/** Allows to pass common popover props */
popoverProps: _propTypes.default.shape({
appendTo: _propTypes.default.oneOf(['window', 'scrollParent', 'parent', 'viewport']),
maxWidth: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
minWidth: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
flip: _propTypes.default.bool,
fixed: _propTypes.default.bool,
placement: _propTypes.default.oneOf(['auto-start', 'auto', 'auto-end', 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start']),
dynamicWidth: _propTypes.default.bool
})
};
var _default = exports.default = AtlasAddressInput;
//# sourceMappingURL=AtlasAddressInput.js.map