wix-style-react
Version:
wix-style-react
303 lines (301 loc) • 10.3 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _InputWithOptions = _interopRequireDefault(require("../InputWithOptions"));
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _Input = _interopRequireDefault(require("../Input"));
var _Box = _interopRequireDefault(require("../Box"));
var _Loader = _interopRequireDefault(require("../Loader"));
var _Text = _interopRequireDefault(require("../Text"));
var _constants = require("./constants");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/AddressInput/AddressInput.js";
/** AddressInput */
class AddressInput extends _react.default.PureComponent {
constructor(props) {
super(props);
this.innerRef = /*#__PURE__*/_react.default.createRef();
this._onChange = event => {
var {
onChange
} = this.props;
this.setState({
inputValue: event.target.value
});
if (onChange) {
onChange(event);
}
};
this._onSelect = option => {
var {
onSelect
} = this.props;
this.setState({
inputValue: option.label
});
onSelect && onSelect(option);
};
this._onClear = () => {
var {
onClear
} = this.props;
this.setState({
inputValue: ''
}, () => {
onClear && onClear();
});
};
this._getInputValue = () => {
var {
value: controlledValue
} = this.props;
var {
inputValue
} = this.state;
var value = controlledValue !== undefined ? controlledValue : inputValue;
return value;
};
this._getIsLoading = () => {
var {
status
} = this.props;
return status === 'loading';
};
this._getStatus = () => {
var {
status
} = this.props;
var {
isDropdownOpen
} = this.state;
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;
};
this._setDropdownOpen = () => this.setState({
isDropdownOpen: true
});
this._setDropdownClosed = () => this.setState({
isDropdownOpen: false
});
this._renderLoadingOption = () => {
return {
id: '',
disabled: true,
value: () => /*#__PURE__*/_react.default.createElement(_Box.default, {
flex: 1,
align: "center",
padding: "3px",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 89,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement(_Loader.default, {
size: "tiny",
dataHook: _constants.dataHooks.loader,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 90,
columnNumber: 11
}
}))
};
};
this._renderNoResultsOption = () => {
var {
noResultsText
} = this.props;
var isString = typeof noResultsText === 'string';
var value = isString ? /*#__PURE__*/_react.default.createElement(_Text.default, {
light: true,
secondary: true,
dataHook: _constants.dataHooks.noResultsText,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 100,
columnNumber: 7
}
}, noResultsText) : noResultsText;
return {
id: '',
disabled: true,
overrideOptionStyle: !isString,
value
};
};
this._renderOptions = () => {
var {
options,
noResultsText
} = this.props;
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
};
}
render() {
var {
dataHook,
className,
size,
clearButton,
placeholder,
disabled,
onFocus,
onBlur,
autoSelect,
statusMessage,
border,
onManuallyInput,
popoverProps
} = this.props;
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,
popoverProps: popoverProps,
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,
onFocus: onFocus,
onBlur: onBlur,
autoSelect: autoSelect,
status: status,
statusMessage: statusMessage,
menuArrow: false,
highlight: true,
prefix: /*#__PURE__*/_react.default.createElement(_Input.default.IconAffix, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 177,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.Search, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 178,
columnNumber: 13
}
})),
placeholder: placeholder,
onOptionsShow: this._setDropdownOpen,
onOptionsHide: this._setDropdownClosed
// disable browser autofill (including in chrome)
,
autocomplete: "off,chrome-off",
ref: this.innerRef,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 153,
columnNumber: 7
}
});
}
/**
* Sets focus on the input element
* @param {FocusOptions} options
*/
focus() {
this.innerRef.current && this.innerRef.current.focus();
}
}
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 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,
/** 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', 'none']),
/** Controls the size of the input. Default value: `medium` */
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]),
/** 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
})
};
AddressInput.defaultProps = {
clearButton: true,
debounceDuration: 200,
border: 'round'
};
var _default = exports.default = AddressInput;
//# sourceMappingURL=AddressInput.js.map