@salesforce/design-system-react/lib/components/carousel/private/carousel-item.js

Salesforce Lightning Design System for React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _button = _interopRequireDefault(require("../../button"));

var _constants = require("../../../utilities/constants");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/* 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.

/**
 * 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.default.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.default.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.default.createElement("div", {
    className: "slds-carousel__image"
  }, /*#__PURE__*/_react.default.createElement("img", {
    src: src,
    alt: imageAssistiveText || heading
  })), /*#__PURE__*/_react.default.createElement("div", {
    className: "slds-carousel__content",
    style: {
      height: 'auto'
    }
  }, /*#__PURE__*/_react.default.createElement("h2", {
    className: "slds-carousel__content-title"
  }, heading), /*#__PURE__*/_react.default.createElement("div", {
    className: "slds-p-bottom_x-small slds-text-body_small",
    style: {
      minHeight: '40px'
    }
  }, description), buttonLabel && /*#__PURE__*/_react.default.createElement(_button.default, {
    label: buttonLabel,
    tabIndex: isInCurrentPanel ? '0' : '-1',
    variant: "neutral"
  }))));
};

CarouselItem.displayName = _constants.CAROUSEL_ITEM;
CarouselItem.propTypes = {
  /**
   * Label of the button to be displayed. If not provided, no button will be rendered.
   */
  buttonLabel: _propTypes.default.string,

  /**
   * Carousel HTML ID
   */
  carouselId: _propTypes.default.string,

  /**
   * CSS classes that are applied to the component
   */
  className: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.object, _propTypes.default.string]),

  /**
   * Visible paragraph text to be displayed on the carousel item
   */
  description: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),

  /**
   * Carousel Item's visible heading
   */
  heading: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]).isRequired,
  href: _propTypes.default.string,

  /**
   * Id of the item component.
   */
  id: _propTypes.default.number.isRequired,

  /**
   * Image alt text
   */
  imageAssistiveText: _propTypes.default.string,

  /**
   * Boolean indicating whether this item is currently visible in the active parent carousel panel
   */
  isInCurrentPanel: _propTypes.default.bool,

  /**
   * Width of the carousel item
   */
  itemWidth: _propTypes.default.number,

  /**
   * Accepts a callback to handle when the a tag is focused on
   */
  onFocus: _propTypes.default.func,

  /**
   * Accepts a custom carousel item rendering function
   */
  onRenderItem: _propTypes.default.func,

  /**
   * Index of the panel this item belongs to, to be used when associating it to an indicator
   */
  panelIndex: _propTypes.default.number,

  /**
   * Path of the image to be used
   */
  src: _propTypes.default.string.isRequired
};
var _default = CarouselItem;
exports.default = _default;