wix-style-react
Version:
315 lines (251 loc) • 11.9 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _InputWithOptions = _interopRequireDefault(require("../InputWithOptions"));
var _Search = _interopRequireDefault(require("wix-ui-icons-common/Search"));
var _Input = _interopRequireDefault(require("../Input"));
var _Box = _interopRequireDefault(require("../Box"));
var _Loader = _interopRequireDefault(require("../Loader"));
var _Text = _interopRequireDefault(require("../Text"));
var _constants = require("./constants");
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(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; } }
/** AddressInput */
var AddressInput = /*#__PURE__*/function (_React$PureComponent) {
(0, _inherits2["default"])(AddressInput, _React$PureComponent);
var _super = _createSuper(AddressInput);
function AddressInput(props) {
var _this;
(0, _classCallCheck2["default"])(this, AddressInput);
_this = _super.call(this, props);
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "innerRef", /*#__PURE__*/_react["default"].createRef());
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onChange", function (event) {
var onChange = _this.props.onChange;
_this.setState({
inputValue: event.target.value
});
if (onChange) {
onChange(event);
}
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onSelect", function (option) {
var onSelect = _this.props.onSelect;
_this.setState({
inputValue: option.label
});
onSelect && onSelect(option);
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onClear", function () {
var onClear = _this.props.onClear;
_this.setState({
inputValue: ''
}, function () {
onClear && onClear();
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_getInputValue", function () {
var controlledValue = _this.props.value;
var inputValue = _this.state.inputValue;
var value = controlledValue !== undefined ? controlledValue : inputValue;
return value;
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_getIsLoading", function () {
var status = _this.props.status;
return status === 'loading';
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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;
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_setDropdownOpen", function () {
return _this.setState({
isDropdownOpen: true
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_setDropdownClosed", function () {
return _this.setState({
isDropdownOpen: false
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_renderLoadingOption", function () {
return {
id: '',
disabled: true,
value: function value() {
return /*#__PURE__*/_react["default"].createElement(_Box["default"], {
flex: 1,
align: "center",
padding: "3px"
}, /*#__PURE__*/_react["default"].createElement(_Loader["default"], {
size: "tiny",
dataHook: _constants.dataHooks.loader
}));
}
};
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_renderNoResultsOption", function () {
var noResultsText = _this.props.noResultsText;
var isString = typeof noResultsText === 'string';
var value = isString ? /*#__PURE__*/_react["default"].createElement(_Text["default"], {
light: true,
secondary: true,
dataHook: _constants.dataHooks.noResultsText
}, noResultsText) : noResultsText;
return {
id: '',
disabled: true,
overrideOptionStyle: !isString,
value: value
};
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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;
}
(0, _createClass2["default"])(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["default"].createElement(_InputWithOptions["default"], {
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["default"].createElement(_Input["default"].IconAffix, null, /*#__PURE__*/_react["default"].createElement(_Search["default"], 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["default"].PureComponent);
AddressInput.displayName = 'AddressInput';
AddressInput.propTypes = {
/** 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 a 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,
/** Fetch predictions debounce in milliseconds */
debounceDuration: _propTypes["default"].number,
/** Defines a callback function which is called whenever a user selects a different option in the list */
onSelect: _propTypes["default"].func,
/** Defines a callback function which is called every time input value is changed */
onChange: _propTypes["default"].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["default"].array,
/** 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 onBlur callback */
onBlur: _propTypes["default"].func,
/** Defines a callback function which is called when user performs a submit action.
* Submit-Action triggers are: "Enter", "Tab" */
onManuallyInput: _propTypes["default"].func,
/** Specify the status of a field. Mostly used for “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']),
/** 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])
};
AddressInput.defaultProps = {
clearButton: true,
debounceDuration: 200,
border: 'round',
size: 'medium'
};
var _default = AddressInput;
exports["default"] = _default;