@helpscout/hsds-react
Version:
React component library for Help Scout's Design System
294 lines (241 loc) • 9.09 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = exports.ActionSelect = 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 = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _lodash = _interopRequireDefault(require("lodash.isnil"));
var _DropList = _interopRequireDefault(require("../DropList"));
var _DropList2 = require("../DropList/DropList.togglers");
var _ActionSelect = _interopRequireDefault(require("./ActionSelect.ContentResizer"));
var _focus = require("../../utilities/focus");
var _smoothScroll = require("../../utilities/smoothScroll");
var _ActionSelect2 = require("./ActionSelect.css");
var _jsxRuntime = require("react/jsx-runtime");
var ActionSelect = /*#__PURE__*/function (_React$PureComponent) {
(0, _inheritsLoose2.default)(ActionSelect, _React$PureComponent);
function ActionSelect(props) {
var _this;
_this = _React$PureComponent.call(this, props) || this;
_this._isMounted = false;
_this.contentNode = void 0;
_this.safeSetState = function (nextState, callback) {
if (_this._isMounted) {
_this.setState(nextState, callback);
}
};
_this.resizeContent = function () {
_this.safeSetState({
resizeCount: _this.state.resizeCount + 1
});
};
_this.scrollIntoView = function (itemValue) {
if (!_this.props.shouldScrollIntoView(itemValue)) return;
var _this$contentNode$get = _this.contentNode.getBoundingClientRect(),
y = _this$contentNode$get.y;
var position = y;
var shouldScrollIntoView = window.scrollY < y;
if (!shouldScrollIntoView) return;
(0, _smoothScroll.smoothScrollTo)({
node: window,
position: position,
direction: 'y',
duration: _this.props.animationDuration,
timingFunction: _smoothScroll.linear
});
};
_this.handleOnSelect = function (selection) {
_this.props.onSelect(selection.value, selection);
_this.autoFocusChildNode();
_this.resizeContent();
_this.scrollIntoView(selection.value);
_this.safeSetState({
selection: selection
});
};
_this.handleOnOpenClose = function (isOpen) {
_this.safeSetState({
isOpen: isOpen
}, function () {
isOpen ? _this.props.onOpen() : _this.props.onClose();
});
};
_this.autoFocusChildNode = function () {
requestAnimationFrame(function () {
if (!_this.contentNode || !_this.props.isAutoFocusNodeOnSelect) return;
var focusableNode = (0, _focus.findFirstFocusableNode)(_this.contentNode);
if (focusableNode) {
focusableNode.focus();
}
});
};
_this.setContentNode = function (node) {
_this.contentNode = node;
};
_this.state = {
isOpen: props.isOpen,
resizeCount: 0,
selection: props.selectedItem || null
};
return _this;
}
var _proto = ActionSelect.prototype;
_proto.componentDidMount = function componentDidMount() {
this._isMounted = true;
};
_proto.componentWillUnmount = function componentWillUnmount() {
this._isMounted = false;
};
_proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
if (nextProps.selectedItem !== this.props.selectedItem) {
this.resizeContent();
}
};
_proto.getClassName = function getClassName() {
var _this$props = this.props,
children = _this$props.children,
className = _this$props.className;
return (0, _classnames.default)(ActionSelect.className, children && 'is-withContent', className);
};
_proto.render = function render() {
var _this$props2 = this.props,
animationDuration = _this$props2.animationDuration,
animationEasing = _this$props2.animationEasing,
children = _this$props2.children,
dataCy = _this$props2['data-cy'],
innerRef = _this$props2.innerRef,
items = _this$props2.items,
onAnimationEnd = _this$props2.onAnimationEnd,
onAnimationUpdate = _this$props2.onAnimationUpdate,
onResize = _this$props2.onResize,
shouldRefocusOnClose = _this$props2.shouldRefocusOnClose,
disabled = _this$props2.disabled,
id = _this$props2.id,
ariaLabel = _this$props2.ariaLabel,
error = _this$props2.error,
withTooltip = _this$props2.withTooltip,
tooltipProps = _this$props2.tooltipProps;
var _this$state = this.state,
isOpen = _this$state.isOpen,
resizeCount = _this$state.resizeCount,
selection = _this$state.selection;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ActionSelect2.ActionSelectUI, {
className: this.getClassName(),
"data-cy": dataCy,
ref: innerRef,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "c-ActionSelectDropdownWrapper",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropList.default, {
"data-cy": "ActionSelectDropdown",
focusTogglerOnMenuClose: shouldRefocusOnClose(),
items: items,
onOpenedStateChange: this.handleOnOpenClose,
onSelect: this.handleOnSelect,
toggler: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropList2.SelectTag, {
text: getSelectTagText(selection, items),
disabled: disabled,
id: id,
"aria-label": ariaLabel || 'action toggle menu',
error: error,
withTooltip: withTooltip,
tooltipProps: (0, _extends2.default)({
appendTo: function appendTo(reference) {
return reference.closest('.c-ActionSelect').parentElement;
},
maxWidth: 190,
title: 'Beacon',
placement: 'right'
}, tooltipProps)
}),
selection: selection
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionSelect.default, {
animationDuration: animationDuration,
animationEasing: animationEasing,
borderWidth: 1,
mainRef: this.setContentNode,
isOpen: isOpen,
onAnimationEnd: onAnimationEnd,
onAnimationUpdate: onAnimationUpdate,
onResize: onResize,
resizeCount: resizeCount,
selectedKey: getUniqueKeyFromItem(selection),
children: children
})]
});
};
return ActionSelect;
}(_react.default.PureComponent);
exports.ActionSelect = ActionSelect;
ActionSelect.className = 'c-ActionSelect';
function getUniqueKeyFromItem(item) {
return item && (item.id || item.value || item.label);
}
function getSelectTagText(selectedItem, items) {
if (!(0, _lodash.default)(selectedItem)) return selectedItem.label;
if (Array.isArray(items) && items[0]) {
if (items[0].label) return items[0].label;
if (items[0].value) return items[0].value;
}
return 'None';
}
function noop() {}
ActionSelect.defaultProps = {
'data-cy': 'ActionSelect',
animationDuration: 200,
animationEasing: 'linear',
children: null,
enableTabNavigation: false,
innerRef: noop,
isAutoFocusNodeOnSelect: true,
isFadeContentOnOpen: true,
items: [],
onAnimationEnd: null,
onAnimationUpdate: null,
onClose: noop,
onOpen: noop,
onResize: noop,
onSelect: noop,
shouldRefocusOnClose: function shouldRefocusOnClose() {
return true;
},
shouldScrollIntoView: function shouldScrollIntoView() {
return true;
}
};
ActionSelect.propTypes = {
'data-cy': _propTypes.default.string,
animationDuration: _propTypes.default.number,
animationEasing: _propTypes.default.string,
enableTabNavigation: _propTypes.default.bool,
innerRef: _propTypes.default.func,
isAutoFocusNodeOnSelect: _propTypes.default.bool,
isFadeContentOnOpen: _propTypes.default.bool,
items: _propTypes.default.any,
onAnimationEnd: _propTypes.default.func,
onAnimationUpdate: _propTypes.default.func,
onClose: _propTypes.default.func,
onOpen: _propTypes.default.func,
onResize: _propTypes.default.func,
onSelect: _propTypes.default.func,
selectedItem: _propTypes.default.object,
shouldRefocusOnClose: _propTypes.default.func,
shouldScrollIntoView: _propTypes.default.func,
/** Indicates that ActionSelect is disabled */
disabled: _propTypes.default.bool,
/** Id of the trigger element */
id: _propTypes.default.string,
/** Aria Label of the Toggler */
ariaLabel: _propTypes.default.string,
/** Error message */
error: _propTypes.default.string,
/** Enable a tooltip on the DropList/SelectTag item */
withTooltip: _propTypes.default.bool,
/** Customize the tooltip on the DropList/SelectTag item */
tooltipProps: _propTypes.default.any
};
var _default = ActionSelect;
exports.default = _default;