wix-style-react
Version:
wix-style-react
384 lines (382 loc) • 13 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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Tag = _interopRequireDefault(require("../Tag/Tag"));
var _Input = _interopRequireDefault(require("../Input"));
var _InputWithTagsSt = require("./InputWithTags.st.css");
var _classnames = _interopRequireDefault(require("classnames"));
var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));
var _SortableListBase = _interopRequireDefault(require("../SortableListBase/SortableListBase"));
var _dndStyles = _interopRequireDefault(require("../dnd-styles"));
var _StatusIndicator = _interopRequireDefault(require("../StatusIndicator"));
var _StatusContext = require("../FormField/StatusContext");
var _system = require("@wix/wix-ui-icons-common/system");
var _context = require("../WixStyleReactProvider/context");
var _excluded = ["tags", "onRemoveTag", "onReorder", "placeholder", "status", "statusMessage", "disabled", "readOnly", "delimiters", "mode", "size", "border", "className"],
_excluded2 = ["onManuallyInput", "inputElement", "closeOnSelect", "predicate", "onClickOutside", "fixedHeader", "fixedFooter", "dataHook", "onFocus", "withSelection", "onBlur", "menuArrow", "onInputClicked"],
_excluded3 = ["label"],
_excluded4 = ["id", "label"],
_excluded5 = ["item", "previewStyles", "isPlaceholder", "isPreview"];
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/MultiSelect/InputWithTags.js";
class InputWithTags extends _react.default.Component {
constructor(props) {
super(props);
this.focus = this.focus.bind(this);
this.blur = this.blur.bind(this);
this.select = this.select.bind(this);
this.renderReorderableTag = this.renderReorderableTag.bind(this);
this.handleClick = this.handleClick.bind(this);
this.handleInputFocus = this.handleInputFocus.bind(this);
this.handleInputBlur = this.handleInputBlur.bind(this);
this.state = {
inputValue: '',
inputHasFocus: false
};
}
componentDidMount() {
this.props.autoFocus && this.props.onFocus();
}
handleClick(e) {
if (!this.props.disabled) {
this.input.focus();
this.props.onInputClicked && this.props.onInputClicked(e);
}
}
handleInputFocus(e) {
this.setState({
inputHasFocus: true
});
this.props.onFocus && this.props.onFocus(e);
}
handleInputBlur(e) {
this.setState({
inputHasFocus: false
});
this.props.onBlur && this.props.onBlur(e);
}
_isSelectMode() {
return this.props.mode === 'select';
}
_hasFocus() {
return this.state.inputHasFocus && !this.props.disabled;
}
_getRootClassName(newColorsBranding) {
var {
status,
disabled,
readOnly,
size = 'medium',
border,
className,
maxHeight,
maxNumRows
} = this.props;
var isHasMaxHeight = !(0, _isUndefined.default)(maxHeight) || !(0, _isUndefined.default)(maxNumRows);
var appliedClasses = [className, this._isSelectMode() && _InputWithTagsSt.classes.selectMode, isHasMaxHeight && _InputWithTagsSt.classes.hasMaxHeight].filter(Boolean);
return (0, _InputWithTagsSt.st)(_InputWithTagsSt.classes.root, {
border,
disabled,
hasFocus: this._hasFocus(),
status: (0, _StatusContext.getStatusFromContext)(this.context, status),
readOnly,
newColorsBranding,
size
}, ...appliedClasses);
}
render() {
var _this$props = this.props,
{
tags,
onRemoveTag,
onReorder,
placeholder,
status,
statusMessage,
disabled,
readOnly,
delimiters,
mode,
size = 'medium',
border,
className
} = _this$props,
inputProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
/* eslint-disable no-unused-vars */
var {
onManuallyInput,
inputElement,
closeOnSelect,
predicate,
onClickOutside,
fixedHeader,
fixedFooter,
dataHook,
onFocus,
withSelection,
onBlur,
menuArrow,
onInputClicked
} = inputProps,
desiredProps = (0, _objectWithoutProperties2.default)(inputProps, _excluded2);
var rowMultiplier;
if (tags.length && tags[0].size === 'large') {
rowMultiplier = 47;
} else {
rowMultiplier = 35;
}
var maxHeight = this.props.maxHeight || this.props.maxNumRows * rowMultiplier || 'initial';
var finalStatus = (0, _StatusContext.getStatusFromContext)(this.context, status);
return /*#__PURE__*/_react.default.createElement(_context.WixStyleReactContext.Consumer, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 149,
columnNumber: 7
}
}, _ref => {
var {
newColorsBranding
} = _ref;
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
className: this._getRootClassName(newColorsBranding),
style: {
maxHeight
},
onClick: this.handleClick,
"data-hook": this.props.dataHook,
"data-focus": this._hasFocus() || null,
"data-status": finalStatus
}, (0, _StatusContext.getAriaAttributesFromContext)(this.context), {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 151,
columnNumber: 11
}
}), onReorder ? /*#__PURE__*/_react.default.createElement(_SortableListBase.default, {
contentClassName: _InputWithTagsSt.classes.tagsContainer,
items: tags,
onDrop: onReorder,
renderItem: this.renderReorderableTag,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 161,
columnNumber: 15
}
}) : tags.map(_ref2 => {
var {
label
} = _ref2,
rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded3);
return /*#__PURE__*/_react.default.createElement(_Tag.default, (0, _extends2.default)({
key: rest.id,
dataHook: "tag",
disabled: disabled,
onRemove: onRemoveTag
}, rest, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 169,
columnNumber: 17
}
}), label);
}), /*#__PURE__*/_react.default.createElement("span", {
className: (0, _classnames.default)(_InputWithTagsSt.classes.inputWrapper, !tags.length),
"data-hook": "inner-input-with-tags",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 181,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: (0, _classnames.default)(_InputWithTagsSt.classes.hiddenDiv),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 185,
columnNumber: 15
}
}, this.state.inputValue), /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({
className: _InputWithTagsSt.classes.input,
size: size,
width: this.props.width,
ref: input => this.input = input,
onFocus: this.handleInputFocus,
onBlur: this.handleInputBlur,
placeholder: tags.length === 0 ? placeholder : ''
}, desiredProps, {
dataHook: "inputWithTags-input",
disabled: disabled,
readOnly: readOnly,
disableEditing: this._isSelectMode(),
onChange: e => {
if (!delimiters.includes(e.target.value)) {
this.setState({
inputValue: e.target.value
});
desiredProps.onChange && desiredProps.onChange(e);
}
},
withSelection: true,
prefix: this.props.customSuffix && !this.props.hideCustomSuffix && !this.state.inputHasFocus && /*#__PURE__*/_react.default.createElement("span", {
"data-hook": "custom-suffix",
className: _InputWithTagsSt.classes.customSuffix,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 213,
columnNumber: 21
}
}, this.props.customSuffix),
hideStatusSuffix: true,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 189,
columnNumber: 15
}
}))), /*#__PURE__*/_react.default.createElement("div", {
className: _InputWithTagsSt.classes.inputSuffix,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 226,
columnNumber: 13
}
}, !disabled && (['error', 'warning', 'loading'].includes(status) || finalStatus === 'loading') && /*#__PURE__*/_react.default.createElement("div", {
className: _InputWithTagsSt.classes.statusIndicator,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 231,
columnNumber: 19
}
}, /*#__PURE__*/_react.default.createElement(_StatusIndicator.default, {
status: finalStatus,
message: statusMessage,
dataHook: "input-status",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 232,
columnNumber: 21
}
})), this._isSelectMode() && /*#__PURE__*/_react.default.createElement("div", {
className: _InputWithTagsSt.classes.menuArrow,
"data-hook": "input-menu-arrow",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 242,
columnNumber: 17
}
}, /*#__PURE__*/_react.default.createElement(_system.DropDownArrow, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 243,
columnNumber: 19
}
}))));
});
}
renderReorderableTag(_ref3) {
var {
item: {
id,
label
},
previewStyles,
isPlaceholder,
isPreview
} = _ref3,
itemProps = (0, _objectWithoutProperties2.default)(_ref3.item, _excluded4),
rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded5);
var {
onRemoveTag,
disabled
} = this.props;
var _classes = (0, _classnames.default)({
[_dndStyles.default.itemPlaceholder]: isPlaceholder,
[_InputWithTagsSt.classes.draggedTagPlaceholder]: isPlaceholder,
[_dndStyles.default.itemPreview]: isPreview,
[_InputWithTagsSt.classes.draggedTag]: isPreview
});
return /*#__PURE__*/_react.default.createElement("div", {
style: previewStyles,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 269,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement(_Tag.default, (0, _extends2.default)({
id: id,
dataHook: "tag",
disabled: disabled,
className: _classes,
onRemove: onRemoveTag
}, itemProps, rest, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 270,
columnNumber: 9
}
}), label));
}
focus() {
this.input.focus();
}
blur() {
this.input.blur();
}
select() {
this.input.select();
}
clear() {
this.input.clear();
}
}
InputWithTags.contextType = _StatusContext.StatusContext;
InputWithTags.propTypes = {
onRemoveTag: _propTypes.default.func,
tags: _propTypes.default.array,
onReorder: _propTypes.default.func,
maxHeight: _propTypes.default.string,
maxNumRows: _propTypes.default.number,
onKeyDown: _propTypes.default.func,
dataHook: _propTypes.default.string,
placeholder: _propTypes.default.string,
onFocus: _propTypes.default.func,
onBlur: _propTypes.default.func,
onInputClicked: _propTypes.default.func,
autoFocus: _propTypes.default.bool,
disabled: _propTypes.default.bool,
readOnly: _propTypes.default.bool,
/** The status of the input */
status: _propTypes.default.oneOf(['error', 'warning', 'loading']),
/** Text to be shown in the status icon tooltip */
statusMessage: _propTypes.default.string,
mode: _propTypes.default.oneOf(['select']),
delimiters: _propTypes.default.array,
width: _propTypes.default.string,
customSuffix: _propTypes.default.node,
hideCustomSuffix: _propTypes.default.bool
};
InputWithTags.defaultProps = {
onRemoveTag: () => {},
tags: [],
placeholder: '',
delimiters: []
};
var _default = exports.default = InputWithTags;
//# sourceMappingURL=InputWithTags.js.map