baseui
Version:
A React Component library implementing the Base design language
82 lines (80 loc) • 4.2 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _overrides = require("../helpers/overrides");
var _constants = require("./constants");
var _styledComponents = require("./styled-components");
var _utils = require("./utils");
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); } /*
Copyright (c) Uber Technologies, Inc.
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
const ListItem = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
const {
overrides = {}
} = props;
const Artwork = props.artwork;
const EndEnhancer = props.endEnhancer;
const [Root, rootProps] = (0, _overrides.getOverrides)(overrides.Root, _styledComponents.StyledRoot);
const [ArtworkContainer, artworkContainerProps] = (0, _overrides.getOverrides)(overrides.ArtworkContainer, _styledComponents.StyledArtworkContainer);
const [Content, contentProps] = (0, _overrides.getOverrides)(overrides.Content, _styledComponents.StyledContent);
const [EndEnhancerContainer, endEnhancerContainerProps] = (0, _overrides.getOverrides)(overrides.EndEnhancerContainer, _styledComponents.StyledEndEnhancerContainer);
const artworkSize = _react.default.useMemo(() => {
if (props.sublist) {
let size = props.artworkSize || _constants.ARTWORK_SIZES.SMALL;
if (props.artworkSize === _constants.ARTWORK_SIZES.MEDIUM) {
size = _constants.ARTWORK_SIZES.SMALL;
if (process.env.NODE_ENV !== "production") {
console.warn('When ListItem sublist prop is true, artworkSize MEDIUM is aliased to SMALL');
}
}
return size;
} else {
return props.artworkSize || _constants.ARTWORK_SIZES.MEDIUM;
}
}, [props.artworkSize, props.sublist]);
const isTapTarget = Boolean(props.onClick);
const getMainTextFromChild = child => {
if (typeof child === 'string') {
return child;
} else if ( /*#__PURE__*/_react.default.isValidElement(child)) {
return getMainTextFromChild(child.props.children);
} else {
return 'List item';
}
};
const listItemName = _react.default.Children.count(props.children) === 0 ? ['List item'] : _react.default.Children.map(props.children, child => {
return getMainTextFromChild(child);
});
const ariaLabel = props.hasOwnProperty('aria-label') ? props['aria-label'] : listItemName[0];
return /*#__PURE__*/_react.default.createElement(Root
// eslint-disable-next-line @typescript-eslint/no-explicit-any
, _extends({
ref: ref,
$shape: props.shape || _constants.SHAPE.DEFAULT,
$as: isTapTarget ? 'button' : 'li',
$isTapTarget: isTapTarget,
"aria-label": props.role !== 'presentation' ? ariaLabel : null,
"aria-selected": props['aria-selected'],
id: props.id,
role: props.role,
onClick: props.onClick
}, rootProps), Artwork && /*#__PURE__*/_react.default.createElement(ArtworkContainer, _extends({
$artworkSize: artworkSize,
$sublist: Boolean(props.sublist)
}, artworkContainerProps), /*#__PURE__*/_react.default.createElement(Artwork, {
size: typeof artworkSize === 'number' ? artworkSize : (0, _utils.artworkSizeToValue)(artworkSize, Boolean(props.sublist))
})), /*#__PURE__*/_react.default.createElement(Content, _extends({
$mLeft: !Artwork,
$sublist: !!props.sublist
}, contentProps), props.children, EndEnhancer &&
// @ts-expect-error todo(flow->ts) it is not expected to be a number
EndEnhancer !== 0 && /*#__PURE__*/_react.default.createElement(EndEnhancerContainer, endEnhancerContainerProps, /*#__PURE__*/_react.default.createElement(EndEnhancer, null))));
});
ListItem.displayName = 'ListItem';
var _default = exports.default = ListItem;