@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
335 lines (271 loc) • 10.8 kB
JavaScript
;
exports.__esModule = true;
exports.getObjByValue = exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _index = _interopRequireDefault(require("../InputCheckBox/index.js"));
var _index2 = _interopRequireDefault(require("../Tags/index.js"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var getObjByValue = function getObjByValue(arr, value, key) {
var i = 0;
var arrayMax = arr.length;
for (; i < arrayMax; i += 1) {
var item = arr[i];
if (item[key] === value) {
return item;
}
}
return undefined;
};
exports.getObjByValue = getObjByValue;
var MultiSelectDropDown = /*#__PURE__*/function (_React$Component) {
_inheritsLoose(MultiSelectDropDown, _React$Component);
function MultiSelectDropDown(props) {
var _this;
_this = _React$Component.call(this, props) || this;
_defineProperty(_assertThisInitialized(_this), "_timeoutID", void 0);
_defineProperty(_assertThisInitialized(_this), "onBlur", function () {
// Time out to wait for React processing delay on activeElement
_this._timeoutID = setTimeout(function () {
if (document.activeElement !== null) {
if (!_this.wrapperRef.contains(document.activeElement)) {
_this.setState({
dropwDownExpand: false
});
}
}
}, 0);
});
_defineProperty(_assertThisInitialized(_this), "handleTagClick", function (target, e) {
e.stopPropagation();
var val = target.getAttribute('data-ma-filter-value');
var values = _this.state.values;
values.splice(values.indexOf(val), 1);
_this.setState({
values: values,
dropwDownExpand: true
});
});
_defineProperty(_assertThisInitialized(_this), "handleClearAll", function () {
_this.setState({
values: []
});
_this.focusOnComboBox();
});
_defineProperty(_assertThisInitialized(_this), "handleClickOutside", function (event) {
// Close the panel if the user clicks outside the component.
var node = _this.wrapperRef;
if (node && !node.contains(event.target)) {
if (_this.state.dropwDownExpand) {
_this.closeDropDown();
}
}
});
_defineProperty(_assertThisInitialized(_this), "handleDropDownKeyDown", function (event) {
if (event.key === 'Enter') {
_this.handleSelect(event);
}
});
_defineProperty(_assertThisInitialized(_this), "handleSelect", function (event) {
var value = event.target.value;
var values = _this.state.values;
if (values.indexOf(value) > -1) {
values.splice(values.indexOf(value), 1);
} else {
values.push(value);
}
_this.setState({
values: values
});
});
_defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) {
// Detect onBlur using tab key
if (event.key === 'Tab') {
_this.onBlur();
} // If the user pressed escape collapse list.
if (event.key === 'Escape') {
_this.closeDropDown();
_this.focusOnComboBox();
}
var index = -1;
var tagName = event.target.tagName;
if (tagName === 'INPUT') {
var targetId = event.target.id;
index = Number(targetId.split('-').pop());
}
var nextIndex = index + 1;
var prevIndex = index - 1;
if (event.key === 'ArrowUp') {
if (prevIndex === -1) {
_this.focusOnComboBox();
}
if (prevIndex >= 0) {
var prevItem = document.getElementById("input-checkbox-" + prevIndex);
if (prevItem) {
prevItem.focus();
}
}
}
if (event.key === 'ArrowDown' && nextIndex < _this.props.dropdownItems.length) {
var nextItem = document.getElementById("input-checkbox-" + nextIndex);
if (nextItem) {
nextItem.focus();
}
}
});
_defineProperty(_assertThisInitialized(_this), "focusOnComboBox", function () {
var comboBox = document.getElementById(_this.props.fieldName + "-multiselect-combobox");
comboBox.focus();
});
_defineProperty(_assertThisInitialized(_this), "handleClick", function () {
_this.toggleDropDown();
});
_defineProperty(_assertThisInitialized(_this), "handleComboBoxKeyDown", function (event) {
event.stopPropagation();
if (event.key === 'Enter') {
_this.toggleDropDown();
}
});
_defineProperty(_assertThisInitialized(_this), "toggleDropDown", function () {
_this.setState(function (prevState) {
return {
dropwDownExpand: !prevState.dropwDownExpand
};
});
});
_defineProperty(_assertThisInitialized(_this), "closeDropDown", function () {
_this.setState({
dropwDownExpand: false
});
});
_this.state = {
values: [],
dropwDownExpand: false
};
return _this;
}
var _proto = MultiSelectDropDown.prototype;
_proto.componentDidMount = function componentDidMount() {
var _this2 = this;
this.buttonClicked = false;
document.addEventListener('mousedown', function (e) {
return _this2.handleClickOutside(e);
});
this.wrapperRef.addEventListener('keydown', function (e) {
return _this2.handleKeyDown(e);
});
};
_proto.componentWillUnmount = function componentWillUnmount() {
var _this3 = this;
document.removeEventListener('mousedown', function () {
return _this3.handleClickOutside();
});
this.wrapperRef.removeEventListener('keydown', function () {
return _this3.handleKeyDown();
});
this.wrapperRef.removeEventListener('onblur', function (e) {
return _this3.handleKeyDown(e);
});
};
_proto.render = function render() {
var _classNames,
_this4 = this;
var _this$props = this.props,
dropdownItems = _this$props.dropdownItems,
fieldName = _this$props.fieldName,
title = _this$props.title,
titleClasses = _this$props.titleClasses,
defaultText = _this$props.defaultText;
var _this$state = this.state,
values = _this$state.values,
dropwDownExpand = _this$state.dropwDownExpand;
var tags = values.map(function (val) {
return getObjByValue(dropdownItems, val, 'value');
});
var tagsProps = {
tags: tags.map(function (tag) {
return {
value: tag.value,
text: tag.label,
type: fieldName
};
}),
onClearThisCallback: this.handleTagClick,
onClearCallback: this.handleClearAll
};
var titleCls = (0, _classnames["default"])((_classNames = {}, _classNames[titleClasses.join(' ')] = true, _classNames));
return /*#__PURE__*/_react["default"].createElement("div", {
className: "ma__multiselect-dropdown",
ref: function ref(node) {
_this4.wrapperRef = node;
}
}, /*#__PURE__*/_react["default"].createElement("fieldset", {
className: "group"
}, /*#__PURE__*/_react["default"].createElement("legend", {
className: titleClasses.length > 0 ? titleCls : null
}, title), /*#__PURE__*/_react["default"].createElement("div", {
role: "combobox",
tabIndex: 0,
"aria-expanded": dropwDownExpand,
"aria-controls": fieldName + "-multiselect",
id: fieldName + "-multiselect-combobox",
"aria-haspopup": true,
className: "ma__select-box__field",
onClick: this.handleClick,
onKeyDown: this.handleComboBoxKeyDown
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "ma__select-box__link"
}, /*#__PURE__*/_react["default"].createElement("span", {
className: "js-dropdown-link"
}, values.length > 0 ? /*#__PURE__*/_react["default"].createElement(_index2["default"], tagsProps) : defaultText), /*#__PURE__*/_react["default"].createElement("span", {
className: "ma__select-box__icon"
}))), dropwDownExpand && /*#__PURE__*/_react["default"].createElement("div", {
id: fieldName + "-multiselect",
className: "ma__multiselect-dropdown-menu ma__multiselect-dropdown-menu--expanded"
}, dropdownItems.map(function (item, i) {
return /*#__PURE__*/_react["default"].createElement(_index["default"], {
id: "input-checkbox-" + i
/* eslint-disable-next-line react/no-array-index-key */
,
key: "input-checkbox-" + i,
name: fieldName,
value: item.value,
label: item.label,
onChange: _this4.handleSelect,
onKeyDown: _this4.handleDropDownKeyDown,
classes: ['ma__multiselect-dropdown-item'],
defaultValue: values.indexOf(item.value) > -1 ? item.value : false,
tabIndex: -1
});
}))));
};
return MultiSelectDropDown;
}(_react["default"].Component);
MultiSelectDropDown.propTypes = process.env.NODE_ENV !== "production" ? {
/** The legend title of the multiple select dropdown, can be a string, an element or a React component. */
title: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]).isRequired,
/** Legend classes. */
titleClasses: _propTypes["default"].arrayOf(_propTypes["default"].string),
/** Default display in dropdown field. */
defaultText: _propTypes["default"].string,
/** Custom callback on dropdown item selection. */
onItemSelect: _propTypes["default"].func,
/** Custom callback on dropdown click. */
onDropDownClick: _propTypes["default"].func,
/** An array of dropdown multiselect items */
dropdownItems: _propTypes["default"].arrayOf(_propTypes["default"].shape({
text: _propTypes["default"].string,
href: _propTypes["default"].string
})),
/** Field name attribute that is used for grouping DOM submission and identify tags type */
fieldName: _propTypes["default"].string
} : {};
MultiSelectDropDown.defaultProps = {
titleClasses: []
};
var _default = MultiSelectDropDown;
exports["default"] = _default;