wix-style-react
Version:
306 lines (244 loc) • 10.3 kB
JavaScript
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
import React from 'react';
import PropTypes from 'prop-types';
import InputWithOptions from '../InputWithOptions';
import SearchIcon from 'wix-ui-icons-common/Search';
import Input from '../Input';
import Box from '../Box';
import Loader from '../Loader';
import Text from '../Text';
import { dataHooks } from './constants';
/** AddressInput */
var AddressInput = /*#__PURE__*/function (_React$PureComponent) {
_inherits(AddressInput, _React$PureComponent);
var _super = _createSuper(AddressInput);
function AddressInput(props) {
var _this;
_classCallCheck(this, AddressInput);
_this = _super.call(this, props);
_defineProperty(_assertThisInitialized(_this), "innerRef", /*#__PURE__*/React.createRef());
_defineProperty(_assertThisInitialized(_this), "_onChange", function (event) {
var onChange = _this.props.onChange;
_this.setState({
inputValue: event.target.value
});
if (onChange) {
onChange(event);
}
});
_defineProperty(_assertThisInitialized(_this), "_onSelect", function (option) {
var onSelect = _this.props.onSelect;
_this.setState({
inputValue: option.label
});
onSelect && onSelect(option);
});
_defineProperty(_assertThisInitialized(_this), "_onClear", function () {
var onClear = _this.props.onClear;
_this.setState({
inputValue: ''
}, function () {
onClear && onClear();
});
});
_defineProperty(_assertThisInitialized(_this), "_getInputValue", function () {
var controlledValue = _this.props.value;
var inputValue = _this.state.inputValue;
var value = controlledValue !== undefined ? controlledValue : inputValue;
return value;
});
_defineProperty(_assertThisInitialized(_this), "_getIsLoading", function () {
var status = _this.props.status;
return status === 'loading';
});
_defineProperty(_assertThisInitialized(_this), "_getStatus", function () {
var status = _this.props.status;
var isDropdownOpen = _this.state.isDropdownOpen;
var isLoading = _this._getIsLoading();
/** If addresses are loading and dropdown is open,
* displays loader in dropdown instead of in input.
*/
if (isLoading && isDropdownOpen) {
return undefined;
}
return status;
});
_defineProperty(_assertThisInitialized(_this), "_setDropdownOpen", function () {
return _this.setState({
isDropdownOpen: true
});
});
_defineProperty(_assertThisInitialized(_this), "_setDropdownClosed", function () {
return _this.setState({
isDropdownOpen: false
});
});
_defineProperty(_assertThisInitialized(_this), "_renderLoadingOption", function () {
return {
id: '',
disabled: true,
value: function value() {
return /*#__PURE__*/React.createElement(Box, {
flex: 1,
align: "center",
padding: "3px"
}, /*#__PURE__*/React.createElement(Loader, {
size: "tiny",
dataHook: dataHooks.loader
}));
}
};
});
_defineProperty(_assertThisInitialized(_this), "_renderNoResultsOption", function () {
var noResultsText = _this.props.noResultsText;
var isString = typeof noResultsText === 'string';
var value = isString ? /*#__PURE__*/React.createElement(Text, {
light: true,
secondary: true,
dataHook: dataHooks.noResultsText
}, noResultsText) : noResultsText;
return {
id: '',
disabled: true,
overrideOptionStyle: !isString,
value: value
};
});
_defineProperty(_assertThisInitialized(_this), "_renderOptions", function () {
var _this$props = _this.props,
options = _this$props.options,
noResultsText = _this$props.noResultsText;
var value = _this._getInputValue();
var isLoading = _this._getIsLoading();
var noResultsFound = !options || options.length === 0;
if (isLoading) {
return [_this._renderLoadingOption()];
}
/** show `noResultsText` option
* if the input is not empty and there are no results */
if (value && noResultsFound && noResultsText) {
return [_this._renderNoResultsOption()];
}
return options;
});
_this.state = {
inputValue: props.initialValue || '',
isDropdownOpen: false
};
return _this;
}
_createClass(AddressInput, [{
key: "render",
value: function render() {
var _this$props2 = this.props,
dataHook = _this$props2.dataHook,
className = _this$props2.className,
size = _this$props2.size,
clearButton = _this$props2.clearButton,
placeholder = _this$props2.placeholder,
disabled = _this$props2.disabled,
onBlur = _this$props2.onBlur,
statusMessage = _this$props2.statusMessage,
border = _this$props2.border,
onManuallyInput = _this$props2.onManuallyInput;
var value = this._getInputValue();
var status = this._getStatus();
return /*#__PURE__*/React.createElement(InputWithOptions, {
dataHook: dataHook,
className: className,
clearButton: clearButton,
onChange: this._onChange,
size: size,
options: this._renderOptions(),
onSelect: this._onSelect,
onManuallyInput: onManuallyInput,
value: value,
disabled: disabled,
border: border
/** <Input /> always shows clear button when `onClear` prop is passed,
so we only pass handler when clearButton is `true` */
,
onClear: clearButton ? this._onClear : undefined,
onBlur: onBlur,
status: status,
statusMessage: statusMessage,
menuArrow: false,
highlight: true,
prefix: /*#__PURE__*/React.createElement(Input.IconAffix, null, /*#__PURE__*/React.createElement(SearchIcon, null)),
placeholder: placeholder,
onOptionsShow: this._setDropdownOpen,
onOptionsHide: this._setDropdownClosed // disable browser autofill (including in chrome)
,
autocomplete: "off,chrome-off",
ref: this.innerRef
});
}
/**
* Sets focus on the input element
* @param {FocusOptions} options
*/
}, {
key: "focus",
value: function focus() {
this.innerRef.current && this.innerRef.current.focus();
}
}]);
return AddressInput;
}(React.PureComponent);
AddressInput.displayName = 'AddressInput';
AddressInput.propTypes = {
/** Applies a data-hook HTML attribute that can be used in the tests */
dataHook: PropTypes.string,
/** Specifies a CSS class name to be appended to the component’s root element */
className: PropTypes.string,
/** Displays a clear button (X) on a non-empty input */
clearButton: PropTypes.bool,
/** Sets the initial input value */
initialValue: PropTypes.string,
/** Sets a value to display (controlled mode). */
value: PropTypes.string,
/** Specifies whether input is disabled */
disabled: PropTypes.bool,
/** Fetch predictions debounce in milliseconds */
debounceDuration: PropTypes.number,
/** Defines a callback function which is called whenever a user selects a different option in the list */
onSelect: PropTypes.func,
/** Defines a callback function which is called every time input value is changed */
onChange: PropTypes.func,
/** Specify an array of options to render. When the option is an {optionProps}, the <AddressInput.Option/> component will be rendered on behalf of the user. */
options: PropTypes.array,
/** Defines a handler for getting notified upon a clear event. When passed, it displays a clear button in the input. */
onClear: PropTypes.func,
/** Defines a standard input onBlur callback */
onBlur: PropTypes.func,
/** Defines a callback function which is called when user performs a submit action.
* Submit-Action triggers are: "Enter", "Tab" */
onManuallyInput: PropTypes.func,
/** Specify the status of a field. Mostly used for “loading” indication upon async request calls. */
status: PropTypes.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.node,
/** Control the border style of an input */
border: PropTypes.oneOf(['standard', 'round', 'bottomLine']),
/** Controls the size of the input */
size: PropTypes.oneOf(['small', 'medium', 'large']),
/** Sets a placeholder message to display */
placeholder: PropTypes.string,
/** Sets the message to show in a dropdown when no results are found */
noResultsText: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
};
AddressInput.defaultProps = {
clearButton: true,
debounceDuration: 200,
border: 'round',
size: 'medium'
};
export default AddressInput;