@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
281 lines (280 loc) • 11.3 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(e) { return e && e.__esModule ? e : { "default": e }; }
function _inheritsLoose(t, o) { t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /**
* MultiSelectDropDown module.
* @module @massds/mayflower-react/MultiSelectDropDown
* @requires module:@massds/mayflower-assets/scss/02-molecules/multiselect-dropdown
* @requires module:@massds/mayflower-assets/scss/01-atoms/input-checkbox
* @requires module:@massds/mayflower-assets/scss/02-molecules/tags
* @requires module:@massds/mayflower-assets/scss/01-atoms/button-tag
* @requires module:@massds/mayflower-assets/scss/01-atoms/svg-icons
* @requires module:@massds/mayflower-assets/scss/01-atoms/svg-loc-icons
*/
var getObjByValue = exports.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;
};
var MultiSelectDropDown = /*#__PURE__*/function (_React$Component) {
function MultiSelectDropDown(props) {
var _this;
_this = _React$Component.call(this, props) || this;
_defineProperty(_this, "_timeoutID", void 0);
_defineProperty(_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(_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(_this, "handleClearAll", function () {
_this.setState({
values: []
});
_this.focusOnComboBox();
});
_defineProperty(_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(_this, "handleDropDownKeyDown", function (event) {
if (event.key === 'Enter') {
_this.handleSelect(event);
}
});
_defineProperty(_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(_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(_this, "focusOnComboBox", function () {
var comboBox = document.getElementById(_this.props.fieldName + "-multiselect-combobox");
comboBox.focus();
});
_defineProperty(_this, "handleClick", function () {
_this.toggleDropDown();
});
_defineProperty(_this, "handleComboBoxKeyDown", function (event) {
event.stopPropagation();
if (event.key === 'Enter') {
_this.toggleDropDown();
}
});
_defineProperty(_this, "toggleDropDown", function () {
_this.setState(function (prevState) {
return {
dropwDownExpand: !prevState.dropwDownExpand
};
});
});
_defineProperty(_this, "closeDropDown", function () {
_this.setState({
dropwDownExpand: false
});
});
_this.state = {
values: [],
dropwDownExpand: false
};
return _this;
}
_inheritsLoose(MultiSelectDropDown, _React$Component);
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 = exports["default"] = MultiSelectDropDown;