terra-list
Version:
The Terra List is a structural component to arrange content within list/listitems.
133 lines (132 loc) • 6.7 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _bind = _interopRequireDefault(require("classnames/bind"));
var _terraThemeContext = _interopRequireDefault(require("terra-theme-context"));
var _ListUtils = _interopRequireDefault(require("./ListUtils"));
var _ListSectionHeaderModule = _interopRequireDefault(require("./ListSectionHeader.module.scss"));
var _excluded = ["isCollapsed", "isCollapsible", "level", "metaData", "onBlur", "onClick", "onKeyDown", "onMouseDown", "onSelect", "refCallback", "title"];
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } } return target; }
var cx = _bind.default.bind(_ListSectionHeaderModule.default);
var propTypes = {
/**
* @private Whether or not the section is collapsed.
*/
isCollapsed: _propTypes.default.bool,
/**
* @private Whether or not the section can be collapsed.
*/
isCollapsible: _propTypes.default.bool,
/**
* Optionally sets the heading level. One of `1`, `2`, `3`, `4`, `5`, `6`.
* 
* Replace value `1` of `level` prop with other level values. Do Not use level as 1 as there should be only one H1 in a page.
* Heading value `1` will be converted as heading level `2` until it is removed in the next MVB release.
*/
level: _propTypes.default.oneOf([1, 2, 3, 4, 5, 6]),
/**
* @private The associated metaData to be provided in the onSelect callback.
*/
// eslint-disable-next-line react/forbid-prop-types
metaData: _propTypes.default.object,
/**
* @private Function callback for when the appropriate click or key action is performed.
* Callback contains the javascript evnt and prop metadata, e.g. onSelect(event, metaData)
*/
onSelect: _propTypes.default.func,
/**
* Function callback passthrough for the ref of the section li.
*/
refCallback: _propTypes.default.func,
/**
* Title text to be placed within the section header.
*/
title: _propTypes.default.string.isRequired,
/**
* @private Callback function not intended for use with this API, but if set pass it through to the element regardless.
*/
onBlur: _propTypes.default.func,
/**
* @private Callback function not intended for use with this API, but if set pass it through to the element regardless.
*/
onClick: _propTypes.default.func,
/**
* @private Callback function not intended for use with this API, but if set pass it through to the element regardless.
*/
onKeyDown: _propTypes.default.func,
/**
* @private Callback function not intended for use with this API, but if set pass it through to the element regardless.
*/
onMouseDown: _propTypes.default.func
};
var defaultProps = {
isCollapsed: false,
isCollapsible: false,
level: 2
};
var ListSectionHeader = function ListSectionHeader(_ref) {
var isCollapsed = _ref.isCollapsed,
isCollapsible = _ref.isCollapsible,
level = _ref.level,
metaData = _ref.metaData,
onBlur = _ref.onBlur,
onClick = _ref.onClick,
onKeyDown = _ref.onKeyDown,
onMouseDown = _ref.onMouseDown,
onSelect = _ref.onSelect,
refCallback = _ref.refCallback,
title = _ref.title,
customProps = _objectWithoutProperties(_ref, _excluded);
var theme = _react.default.useContext(_terraThemeContext.default);
var sectionHeaderClassNames = (0, _classnames.default)(cx('section-header', {
'is-collapsible': isCollapsible
}), customProps.className);
var attrSpread = {};
var Element = level === 1 ? 'h2' : "h".concat(level);
var titleElement = /*#__PURE__*/_react.default.createElement("div", {
className: cx('fill')
}, title);
var accordionIcon;
if (isCollapsible) {
accordionIcon = /*#__PURE__*/_react.default.createElement("div", {
className: cx('start')
}, /*#__PURE__*/_react.default.createElement("span", {
className: cx(['accordion-icon', {
'is-open': !isCollapsed
}])
}));
attrSpread.onClick = _ListUtils.default.wrappedOnClickForItem(onClick, onSelect, metaData);
attrSpread.onKeyDown = _ListUtils.default.wrappedOnKeyDownForItem(onKeyDown, onSelect, metaData);
attrSpread.tabIndex = '0';
attrSpread.role = 'button';
attrSpread['aria-expanded'] = !isCollapsed;
attrSpread['data-item-show-focus'] = 'true';
attrSpread.onBlur = _ListUtils.default.wrappedEventCallback(onBlur, function (event) {
return event.currentTarget.setAttribute('data-item-show-focus', 'true');
});
attrSpread.onMouseDown = _ListUtils.default.wrappedEventCallback(onMouseDown, function (event) {
return event.currentTarget.setAttribute('data-item-show-focus', 'false');
});
}
/* eslint-disable-next-line no-param-reassign */
customProps === null || customProps === void 0 || delete customProps.isTabFocusDisabled;
return /*#__PURE__*/_react.default.createElement("li", _extends({}, customProps, {
className: cx('list-item', theme.className),
ref: refCallback
}), /*#__PURE__*/_react.default.createElement(Element, {
className: cx('title')
}, /*#__PURE__*/_react.default.createElement("div", _extends({}, attrSpread, {
className: sectionHeaderClassNames
}), accordionIcon, titleElement)));
};
ListSectionHeader.propTypes = propTypes;
ListSectionHeader.defaultProps = defaultProps;
var _default = exports.default = ListSectionHeader;