@helpscout/hsds-react
Version:
React component library for Help Scout's Design System
333 lines (277 loc) • 10.9 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = exports.DropdownItem = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = require("prop-types");
var _getValidProps = _interopRequireDefault(require("@helpscout/react-utils/dist/getValidProps"));
var _wedux = require("@helpscout/wedux");
var _Icon = _interopRequireDefault(require("../Icon"));
var _Dropdown = _interopRequireDefault(require("./Dropdown.Card"));
var _Dropdown2 = _interopRequireDefault(require("./Dropdown.Divider"));
var _Dropdown3 = _interopRequireDefault(require("./Dropdown.Header"));
var _Dropdown4 = _interopRequireDefault(require("./Dropdown.Menu"));
var _DropdownCss = require("./Dropdown.css.js");
var _Dropdown5 = require("./Dropdown.utils");
var _Dropdown6 = require("./Dropdown.renderUtils");
var _classnames = _interopRequireDefault(require("classnames"));
var _component = require("../../utilities/component");
var _Dropdown7 = _interopRequireDefault(require("./Dropdown.ItemSelectedCheck"));
var _jsxRuntime = require("react/jsx-runtime");
// Deprecated
/* istanbul ignore file */
function noop() {}
var DropdownItem = /*#__PURE__*/function (_React$PureComponent) {
(0, _inheritsLoose2.default)(DropdownItem, _React$PureComponent);
function DropdownItem() {
var _this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
_this.node = void 0;
_this.actionNode = void 0;
_this.wrapperNode = void 0;
_this.menuNode = void 0;
_this.handleOnClick = function (event) {
var _this$props = _this.props,
label = _this$props.label,
onClick = _this$props.onClick,
preventSelect = _this$props.preventSelect,
value = _this$props.value;
var state = _this.props.getState();
if (preventSelect) {
onClick({
label: label,
value: value
}, event);
} else if (state && state.allowMultipleSelection && state.selectionClearer) {
onClick(state, event);
} else {
onClick(event, {
hasSubMenu: _this.hasSubMenu()
});
}
};
_this.getItemProps = function (item, index) {
var state = _this.props.getState();
return (0, _Dropdown5.getItemProps)(state, item);
};
_this.getWrapperProps = function () {
var _ref;
var _this$props2 = _this.props,
index = _this$props2.index,
value = _this$props2.value;
return _ref = {
className: 'c-DropdownMenuWrapper',
ref: _this.setWrapperNodeRef
}, _ref[_Dropdown5.SELECTORS.indexAttribute] = index, _ref[_Dropdown5.SELECTORS.valueAttribute] = value, _ref;
};
_this.setNodeRef = function (node) {
_this.node = node;
_this.props.innerRef(node);
};
_this.setActionNodeRef = function (node) {
return _this.actionNode = node;
};
_this.setWrapperNodeRef = function (node) {
return _this.wrapperNode = node;
};
_this.setMenuNodeRef = function (node) {
_this.menuNode = node;
};
return _this;
}
var _proto = DropdownItem.prototype;
_proto.componentDidMount = function componentDidMount() {
if (this.node) {
this.renderMenu();
}
};
_proto.hasSubMenu = function hasSubMenu() {
var items = this.props.items;
return !!(items && items.length);
};
_proto.renderMenu = function renderMenu() {
var _this2 = this;
if (!this.hasSubMenu()) return;
var _this$props3 = this.props,
contentWindow = _this$props3.contentWindow,
dropRight = _this$props3.dropRight,
dropUp = _this$props3.dropUp; // Async call to coordinate with Portal adjustments
requestAnimationFrame(function () {
if (_this2.menuNode && _this2.wrapperNode && _this2.node && _this2.actionNode) {
(0, _Dropdown6.setMenuPositionStyles)({
contentWindow: contentWindow,
dropRight: dropRight,
dropUp: dropUp,
menuNode: _this2.menuNode,
wrapperNode: _this2.wrapperNode,
itemNode: _this2.node,
triggerNode: _this2.actionNode
});
}
});
};
_proto.renderSubMenu = function renderSubMenu() {
var _this3 = this;
var _this$props4 = this.props,
actionId = _this$props4.actionId,
getState = _this$props4.getState,
renderItem = _this$props4.renderItem,
items = _this$props4.items,
subMenuId = _this$props4.subMenuId;
return this.hasSubMenu() && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownCss.WrapperUI, (0, _extends2.default)({}, this.getWrapperProps(), {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown4.default, {
"aria-labelledby": actionId,
menuRef: this.setMenuNodeRef,
isSubMenu: true,
id: subMenuId,
children: items.map(function (item, index) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownItem, (0, _extends2.default)({
getState: getState,
renderItem: renderItem
}, _this3.getItemProps(item)), item.id || item.value || (0, _component.getComponentKey)(item, index));
})
})
})
}));
};
_proto.renderSubMenuIndicator = function renderSubMenuIndicator() {
var dropRight = this.props.dropRight;
var icon = dropRight ? 'caret-right' : 'caret-left';
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownCss.SubMenuIncidatorUI, {
className: "c-DropdownItemSubMenuIndicator",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
name: icon,
size: "12",
shade: "extraMuted"
})
});
};
_proto.renderContent = function renderContent() {
var _this$props5 = this.props,
actionId = _this$props5.actionId,
renderItem = _this$props5.renderItem,
children = _this$props5.children,
label = _this$props5.label,
value = _this$props5.value,
getState = _this$props5.getState;
var internalState = getState();
var allowMultipleSelection = internalState != null && internalState.allowMultipleSelection;
if (allowMultipleSelection && renderItem == null) {
return (0, _Dropdown7.default)((0, _Dropdown5.getCustomItemProps)(this.props));
}
if (renderItem) {
return renderItem((0, _Dropdown5.getCustomItemProps)(this.props));
}
var hasSubMenu = this.hasSubMenu();
var content = children || label || value;
if (!hasSubMenu) return content;
var componentClassName = (0, _classnames.default)(hasSubMenu && 'has-subMenu', 'c-DropdownItemAction');
var actionProps = {
id: actionId,
ref: this.setActionNodeRef,
className: componentClassName
};
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DropdownCss.ActionUI, (0, _extends2.default)({}, actionProps, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownCss.ActionContentUI, {
className: "c-DropdownItemActionContent",
children: content
}), this.renderSubMenuIndicator()]
}));
};
_proto.render = function render() {
var _this$props6 = this.props,
className = _this$props6.className,
disabled = _this$props6.disabled,
href = _this$props6.href,
isSelectionClearer = _this$props6.isSelectionClearer,
type = _this$props6.type;
var hasSubMenu = this.hasSubMenu();
var componentClassName = (0, _classnames.default)('c-DropdownItem', disabled && 'is-disabled', !hasSubMenu && 'is-option', isSelectionClearer && 'c-SelectionClearerItem', className);
if (type === 'group' || type === 'header') return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown3.default, (0, _extends2.default)({}, this.props));
if (type === 'divider') return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown2.default, {});
var selector = href ? 'a' : 'div';
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DropdownCss.ItemUI, (0, _extends2.default)({}, (0, _getValidProps.default)(this.props), {
className: componentClassName,
"aria-disabled": disabled,
onClick: this.handleOnClick,
ref: this.setNodeRef,
role: hasSubMenu ? 'group' : 'option',
as: selector,
children: [this.renderContent(), this.renderSubMenu()]
}));
};
return DropdownItem;
}(_react.default.PureComponent);
exports.DropdownItem = DropdownItem;
DropdownItem.defaultProps = {
contentWindow: window,
'data-cy': 'DropdownItem',
getState: noop,
disabled: false,
index: '0',
innerRef: noop,
isHover: false,
isSelectionClearer: false,
items: undefined,
dropRight: true,
dropUp: false,
onMouseEnter: noop,
onMouseMove: noop,
onBlur: noop,
onClick: noop,
onFocus: noop,
preventSelect: false,
label: '',
type: 'item',
value: ''
};
DropdownItem.propTypes = {
actionId: _propTypes.PropTypes.string,
className: _propTypes.PropTypes.string,
contentWindow: _propTypes.PropTypes.any,
/** Data attr for Cypress tests. */
'data-cy': _propTypes.PropTypes.string,
disabled: _propTypes.PropTypes.bool,
dropRight: _propTypes.PropTypes.bool,
dropUp: _propTypes.PropTypes.bool,
getState: _propTypes.PropTypes.func,
href: _propTypes.PropTypes.string,
id: _propTypes.PropTypes.string,
index: _propTypes.PropTypes.string,
innerRef: _propTypes.PropTypes.func,
isHover: _propTypes.PropTypes.bool,
isSelectionClearer: _propTypes.PropTypes.bool,
items: _propTypes.PropTypes.arrayOf(_propTypes.PropTypes.any),
onMouseEnter: _propTypes.PropTypes.func,
onMouseMove: _propTypes.PropTypes.func,
onBlur: _propTypes.PropTypes.func,
onClick: _propTypes.PropTypes.func,
onFocus: _propTypes.PropTypes.func,
preventSelect: _propTypes.PropTypes.bool,
renderItem: _propTypes.PropTypes.func,
subMenuId: _propTypes.PropTypes.string,
label: _propTypes.PropTypes.string,
type: _propTypes.PropTypes.string,
value: _propTypes.PropTypes.oneOfType([_propTypes.PropTypes.string, _propTypes.PropTypes.number])
};
var ConnectedItem = (0, _wedux.connect)( // mapStateToProps
function (state) {
var contentWindow = state.contentWindow,
getState = state.getState,
renderItem = state.renderItem,
selectedItem = state.selectedItem;
return {
contentWindow: contentWindow,
getState: getState,
renderItem: renderItem,
selectedItem: selectedItem
};
})(DropdownItem);
var _default = ConnectedItem;
exports.default = _default;