terra-list
Version:
The Terra List is a structural component to arrange content within list/listitems.
163 lines (162 loc) • 7.77 kB
JavaScript
"use strict";
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 _IconChevronRight = _interopRequireDefault(require("terra-icon/lib/icon/IconChevronRight"));
var _reactIntl = require("react-intl");
var _terraVisuallyHiddenText = _interopRequireDefault(require("terra-visually-hidden-text"));
var _IconKnurling = _interopRequireDefault(require("terra-icon/lib/icon/IconKnurling"));
var _ListUtils = _interopRequireDefault(require("./ListUtils"));
var _ListModule = _interopRequireDefault(require("./List.module.scss"));
var _excluded = ["children", "hasChevron", "isSelected", "isSelectable", "metaData", "onBlur", "onClick", "onKeyDown", "onMouseDown", "onSelect", "refCallback", "intl"];
/* eslint-disable no-param-reassign */
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(_ListModule.default);
var propTypes = {
/**
* The content element to be placed inside the list item for display.
*/
children: _propTypes.default.node,
/**
* Whether or not the list item has a disclosure indicator presented.
*/
hasChevron: _propTypes.default.bool,
/**
* Whether or not the list item should have selection styles applied.
*/
isSelected: _propTypes.default.bool,
/**
* Whether or not the list item should have styles to indicate the item is selectable.
*/
isSelectable: _propTypes.default.bool,
/**
* The associated metaData to be provided in the onSelect callback.
*/
// eslint-disable-next-line react/forbid-prop-types
metaData: _propTypes.default.object,
/**
* 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 for the ref of the li.
*/
refCallback: _propTypes.default.func,
/**
* @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,
/**
* @private
* The intl object to be injected for translations.
*/
intl: _propTypes.default.shape({
formatMessage: _propTypes.default.func
})
};
var defaultProps = {
children: [],
hasChevron: false,
isSelected: false,
isSelectable: false
};
var ListItem = function ListItem(_ref) {
var children = _ref.children,
hasChevron = _ref.hasChevron,
isSelected = _ref.isSelected,
isSelectable = _ref.isSelectable,
metaData = _ref.metaData,
onBlur = _ref.onBlur,
onClick = _ref.onClick,
onKeyDown = _ref.onKeyDown,
onMouseDown = _ref.onMouseDown,
onSelect = _ref.onSelect,
refCallback = _ref.refCallback,
intl = _ref.intl,
customProps = _objectWithoutProperties(_ref, _excluded);
var theme = _react.default.useContext(_terraThemeContext.default);
var listItemClassNames = (0, _classnames.default)(cx('list-item', {
selected: isSelected && isSelectable
}, {
'is-selectable': isSelectable
}, theme.className), customProps.className);
var isDraggable = customProps.isDraggable,
isTabFocusDisabled = customProps.isTabFocusDisabled;
var attrSpread = {};
var onFocusResponse = intl.formatMessage({
id: 'Terra.list.focus'
});
var responseId = "terra-hidden-tab-pane-response=".concat(Math.random());
if (isSelectable) {
attrSpread.onClick = _ListUtils.default.wrappedOnClickForItem(onClick, onSelect, metaData);
attrSpread.onKeyDown = _ListUtils.default.wrappedOnKeyDownForItem(onKeyDown, onSelect, metaData);
attrSpread.tabIndex = isTabFocusDisabled ? '-1' : '0';
attrSpread.role = 'option';
attrSpread['aria-selected'] = isSelected;
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');
});
}
if (isDraggable) {
if (!onSelect) {
attrSpread.onClick = function (event) {
var _event$currentTarget;
event === null || event === void 0 || (_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 || _event$currentTarget.focus();
return onClick;
};
}
attrSpread['aria-describedby'] = responseId;
}
customProps === null || customProps === void 0 || delete customProps.isTabFocusDisabled;
customProps === null || customProps === void 0 || delete customProps.isDraggable;
return /*#__PURE__*/_react.default.createElement("li", _extends({}, customProps, attrSpread, {
className: listItemClassNames,
ref: refCallback
}), isDraggable && /*#__PURE__*/_react.default.createElement("div", {
key: "knurling-icon"
}, /*#__PURE__*/_react.default.createElement(_IconKnurling.default, null), /*#__PURE__*/_react.default.createElement(_terraVisuallyHiddenText.default, {
"aria-hidden": true,
id: responseId,
text: onFocusResponse
})), /*#__PURE__*/_react.default.createElement("div", {
className: cx('item-fill'),
key: "item-fill"
}, children), hasChevron && /*#__PURE__*/_react.default.createElement("div", {
className: cx('item-end'),
key: "item-end"
}, /*#__PURE__*/_react.default.createElement("span", {
className: cx('chevron')
}, /*#__PURE__*/_react.default.createElement(_IconChevronRight.default, {
height: "1em",
width: "1em"
}))));
};
ListItem.propTypes = propTypes;
ListItem.defaultProps = defaultProps;
var _default = exports.default = (0, _reactIntl.injectIntl)(ListItem);