@fluentui/react-northstar
Version:
A themable React component library.
219 lines (216 loc) • 9.29 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.listItemSlotClassNames = exports.listItemClassName = exports.ListItem = void 0;
var _invoke2 = _interopRequireDefault(require("lodash/invoke"));
var _accessibility = require("@fluentui/accessibility");
var _reactBindings = require("@fluentui/react-bindings");
var _classnames = _interopRequireDefault(require("classnames"));
var PropTypes = _interopRequireWildcard(require("prop-types"));
var React = _interopRequireWildcard(require("react"));
var _utils = require("../../utils");
var _listContext = require("./listContext");
var _ListItemContent = require("./ListItemContent");
var _ListItemContentMedia = require("./ListItemContentMedia");
var _ListItemEndMedia = require("./ListItemEndMedia");
var _ListItemHeader = require("./ListItemHeader");
var _ListItemHeaderMedia = require("./ListItemHeaderMedia");
var _ListItemMedia = require("./ListItemMedia");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var listItemClassName = 'ui-list__item';
exports.listItemClassName = listItemClassName;
var listItemSlotClassNames = {
headerWrapper: listItemClassName + "__headerWrapper",
main: listItemClassName + "__main",
contentWrapper: listItemClassName + "__contentWrapper"
};
/**
* A ListItem contains a single piece of content within a List.
*/
exports.listItemSlotClassNames = listItemSlotClassNames;
var ListItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
var context = (0, _reactBindings.useFluentContext)();
var _useTelemetry = (0, _reactBindings.useTelemetry)(ListItem.displayName, context.telemetry),
setStart = _useTelemetry.setStart,
setEnd = _useTelemetry.setEnd;
setStart();
var accessibility = props.accessibility,
className = props.className,
content = props.content,
contentMedia = props.contentMedia,
design = props.design,
endMedia = props.endMedia,
header = props.header,
important = props.important,
headerMedia = props.headerMedia,
media = props.media,
styles = props.styles;
var parentProps = (0, _reactBindings.useContextSelectors)(_listContext.ListContext, {
debug: function debug(v) {
return v.debug;
},
navigable: function navigable(v) {
return v.navigable;
},
selectable: function selectable(v) {
return v.selectable;
},
truncateContent: function truncateContent(v) {
return v.truncateContent;
},
truncateHeader: function truncateHeader(v) {
return v.truncateHeader;
},
variables: function variables(v) {
return v.variables;
},
onItemClick: function onItemClick(v) {
return v.onItemClick;
},
selected: function selected(v) {
return v.selectedIndex === props.index;
}
});
var _props$debug = props.debug,
debug = _props$debug === void 0 ? parentProps.debug : _props$debug,
_props$navigable = props.navigable,
navigable = _props$navigable === void 0 ? parentProps.navigable : _props$navigable,
_props$selectable = props.selectable,
selectable = _props$selectable === void 0 ? parentProps.selectable : _props$selectable,
_props$selected = props.selected,
selected = _props$selected === void 0 ? parentProps.selected : _props$selected,
_props$truncateConten = props.truncateContent,
truncateContent = _props$truncateConten === void 0 ? parentProps.truncateContent : _props$truncateConten,
_props$truncateHeader = props.truncateHeader,
truncateHeader = _props$truncateHeader === void 0 ? parentProps.truncateHeader : _props$truncateHeader,
_props$variables = props.variables,
variables = _props$variables === void 0 ? parentProps.variables : _props$variables;
var getA11Props = (0, _reactBindings.useAccessibility)(accessibility, {
debugName: ListItem.displayName,
actionHandlers: {
performClick: function performClick(e) {
e.preventDefault();
handleClick(e);
}
},
mapPropsToBehavior: function mapPropsToBehavior() {
return {
navigable: navigable,
selectable: selectable,
selected: selected
};
},
rtl: context.rtl
});
var _useStyles = (0, _reactBindings.useStyles)(ListItem.displayName, {
className: listItemClassName,
mapPropsToStyles: function mapPropsToStyles() {
return {
debug: debug,
navigable: navigable,
important: important,
selectable: selectable,
selected: selected
};
},
mapPropsToInlineStyles: function mapPropsToInlineStyles() {
return {
className: className,
design: design,
styles: styles,
variables: variables
};
},
rtl: context.rtl
}),
classes = _useStyles.classes;
var ElementType = (0, _reactBindings.getElementType)(props);
var unhandledProps = (0, _reactBindings.useUnhandledProps)(ListItem.handledProps, props);
var handleClick = function handleClick(e) {
(0, _invoke2.default)(props, 'onClick', e, props);
parentProps.onItemClick(e, props.index);
};
var contentElement = (0, _utils.createShorthand)(_ListItemContent.ListItemContent, content, {
defaultProps: function defaultProps() {
return {
hasContentMedia: !!contentMedia,
hasHeader: !!header,
truncate: truncateContent
};
}
});
var contentMediaElement = (0, _utils.createShorthand)(_ListItemContentMedia.ListItemContentMedia, contentMedia);
var headerElement = (0, _utils.createShorthand)(_ListItemHeader.ListItemHeader, header, {
defaultProps: function defaultProps() {
return {
hasContent: !!content,
hasHeaderMedia: !!headerMedia,
truncate: truncateHeader
};
}
});
var headerMediaElement = (0, _utils.createShorthand)(_ListItemHeaderMedia.ListItemHeaderMedia, headerMedia);
var endMediaElement = (0, _utils.createShorthand)(_ListItemEndMedia.ListItemEndMedia, endMedia, {
defaultProps: function defaultProps() {
return {
navigable: navigable,
selectable: selectable
};
}
});
var mediaElement = (0, _utils.createShorthand)(_ListItemMedia.ListItemMedia, media, {
defaultProps: function defaultProps() {
return {
hasContent: !!content,
hasHeader: !!header,
important: important
};
}
});
var element = getA11Props.unstable_wrapWithFocusZone( /*#__PURE__*/React.createElement(ElementType, getA11Props('root', Object.assign({
className: classes.root,
onClick: handleClick
}, unhandledProps, {
ref: ref
})), mediaElement, /*#__PURE__*/React.createElement("div", {
className: (0, _classnames.default)(listItemSlotClassNames.main, classes.main)
}, (headerElement || headerMediaElement) && /*#__PURE__*/React.createElement("div", {
className: (0, _classnames.default)(listItemSlotClassNames.headerWrapper, classes.headerWrapper)
}, headerElement, headerMediaElement), (contentElement || contentMediaElement) && /*#__PURE__*/React.createElement("div", {
className: (0, _classnames.default)(listItemSlotClassNames.contentWrapper, classes.contentWrapper)
}, contentElement, contentMediaElement)), endMediaElement));
setEnd();
return element;
});
exports.ListItem = ListItem;
ListItem.displayName = 'ListItem';
ListItem.defaultProps = {
as: 'li',
accessibility: _accessibility.listItemBehavior
};
ListItem.propTypes = Object.assign({}, _utils.commonPropTypes.createCommon({
content: false
}), {
contentMedia: PropTypes.any,
content: PropTypes.any,
debug: PropTypes.bool,
header: PropTypes.any,
endMedia: PropTypes.any,
headerMedia: PropTypes.any,
important: PropTypes.bool,
media: PropTypes.any,
selectable: PropTypes.bool,
navigable: PropTypes.bool,
index: PropTypes.number,
selected: PropTypes.bool,
truncateContent: PropTypes.bool,
truncateHeader: PropTypes.bool,
onClick: PropTypes.func
});
ListItem.handledProps = Object.keys(ListItem.propTypes);
ListItem.create = (0, _utils.createShorthandFactory)({
Component: ListItem,
mappedProp: 'content'
});
//# sourceMappingURL=ListItem.js.map