@salesforce/design-system-react
Version:
Salesforce Lightning Design System for React
178 lines (160 loc) • 4.94 kB
JavaScript
/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved */
/* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
// # CarouselItem Component
// Implements the [CarouselItem design pattern](https://www.lightningdesignsystem.com/components/carousel/) in React.
import React from 'react';
import PropTypes from 'prop-types';
import Button from '../../button';
import { CAROUSEL_ITEM } from '../../../utilities/constants';
/**
* A carousel allows multiple pieces of featured content to occupy an allocated amount of space.
*/
var CarouselItem = function CarouselItem(_ref) {
var buttonLabel = _ref.buttonLabel,
carouselId = _ref.carouselId,
description = _ref.description,
heading = _ref.heading,
_ref$href = _ref.href,
href = _ref$href === void 0 ? '#' : _ref$href,
id = _ref.id,
imageAssistiveText = _ref.imageAssistiveText,
isInCurrentPanel = _ref.isInCurrentPanel,
itemWidth = _ref.itemWidth,
onFocus = _ref.onFocus,
onRenderItem = _ref.onRenderItem,
panelIndex = _ref.panelIndex,
src = _ref.src,
getPanelId = _ref.getPanelId,
className = _ref.className,
onClick = _ref.onClick;
function handleOnClick(event) {
if (href === '#') {
event.preventDefault();
}
if (onClick) {
onClick(event);
}
}
return /*#__PURE__*/React.createElement("div", {
id: getPanelId({
carouselId: carouselId,
itemId: id
}),
className: "slds-carousel__panel slds-m-horizontal_xx-small slds-list_horizontal",
role: "tabpanel",
"aria-hidden": "false",
"aria-labelledby": "indicator-id-".concat(carouselId, "-").concat(panelIndex),
style: {
margin: 0,
maxWidth: "".concat(itemWidth, "px"),
padding: '0 6px'
}
}, onRenderItem ? onRenderItem({
item: {
buttonLabel: buttonLabel,
carouselId: carouselId,
className: className,
description: description,
heading: heading,
href: href,
id: id,
imageAssistiveText: imageAssistiveText,
isInCurrentPanel: isInCurrentPanel,
itemWidth: itemWidth,
onFocus: onFocus,
onRenderItem: onRenderItem,
panelIndex: panelIndex,
src: src,
getPanelId: getPanelId
}
}) : /*#__PURE__*/React.createElement("a", {
className: "slds-carousel__panel-action slds-text-link_reset",
href: href,
onClick: handleOnClick,
onFocus: onFocus,
style: {
backgroundColor: 'white',
width: '100%'
},
tabIndex: isInCurrentPanel ? '0' : '-1'
}, /*#__PURE__*/React.createElement("div", {
className: "slds-carousel__image"
}, /*#__PURE__*/React.createElement("img", {
src: src,
alt: imageAssistiveText || heading
})), /*#__PURE__*/React.createElement("div", {
className: "slds-carousel__content",
style: {
height: 'auto'
}
}, /*#__PURE__*/React.createElement("h2", {
className: "slds-carousel__content-title"
}, heading), /*#__PURE__*/React.createElement("div", {
className: "slds-p-bottom_x-small slds-text-body_small",
style: {
minHeight: '40px'
}
}, description), buttonLabel && /*#__PURE__*/React.createElement(Button, {
label: buttonLabel,
tabIndex: isInCurrentPanel ? '0' : '-1',
variant: "neutral"
}))));
};
CarouselItem.displayName = CAROUSEL_ITEM;
CarouselItem.propTypes = {
/**
* Label of the button to be displayed. If not provided, no button will be rendered.
*/
buttonLabel: PropTypes.string,
/**
* Carousel HTML ID
*/
carouselId: PropTypes.string,
/**
* CSS classes that are applied to the component
*/
className: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),
/**
* Visible paragraph text to be displayed on the carousel item
*/
description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
/**
* Carousel Item's visible heading
*/
heading: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
href: PropTypes.string,
/**
* Id of the item component.
*/
id: PropTypes.number.isRequired,
/**
* Image alt text
*/
imageAssistiveText: PropTypes.string,
/**
* Boolean indicating whether this item is currently visible in the active parent carousel panel
*/
isInCurrentPanel: PropTypes.bool,
/**
* Width of the carousel item
*/
itemWidth: PropTypes.number,
/**
* Accepts a callback to handle when the a tag is focused on
*/
onFocus: PropTypes.func,
/**
* Accepts a custom carousel item rendering function
*/
onRenderItem: PropTypes.func,
/**
* Index of the panel this item belongs to, to be used when associating it to an indicator
*/
panelIndex: PropTypes.number,
/**
* Path of the image to be used
*/
src: PropTypes.string.isRequired
};
export default CarouselItem;
//# sourceMappingURL=carousel-item.js.map