@carbon/ibm-cloud-cognitive-cdai
Version:
Carbon for Cloud & Cognitive CD&AI UI components
207 lines (206 loc) • 12.2 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _createClass from "@babel/runtime/helpers/createClass";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
//
// Copyright IBM Corp. 2020, 2020
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//
import React from 'react';
import PropTypes from 'prop-types';
import { settings } from 'carbon-components';
import { ClickableTile, Link, Tooltip } from 'carbon-components-react';
import { createInteractionHandler } from '../../component_helpers/A11yHelper';
import { idAttribute } from '../../component_helpers/IDHelper';
import { renderGraphic } from '../../component_helpers/ReactHelper';
import { Launch20 } from '@carbon/icons-react';
import { idePrefix } from '../../globals/js/settings';
export var IdeCard = /*#__PURE__*/function (_React$Component) {
function IdeCard() {
var _this;
_classCallCheck(this, IdeCard);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, IdeCard, [].concat(args));
_defineProperty(_this, "state", {
onHover: false
});
_defineProperty(_this, "mouseEnter", function () {
if (_this.props.cardDisabled) {
_this.setState({
onHover: true
});
}
});
_defineProperty(_this, "mouseLeave", function () {
if (_this.props.cardDisabled) {
_this.setState({
onHover: false
});
}
});
_defineProperty(_this, "render", function () {
var _this$props = _this.props,
cardId = _this$props.cardId,
onInteract = _this$props.onInteract,
cardSize = _this$props.cardSize,
cardHref = _this$props.cardHref,
cardLinkTarget = _this$props.cardLinkTarget,
cardHeading = _this$props.cardHeading,
cardHeadingTitle = _this$props.cardHeadingTitle,
cardHeadingDescription = _this$props.cardHeadingDescription,
cardGraphic = _this$props.cardGraphic,
cardType = _this$props.cardType,
cardContent = _this$props.cardContent,
className = _this$props.className,
cardDisabled = _this$props.cardDisabled,
disabledText = _this$props.disabledText,
secondaryGraphic = _this$props.secondaryGraphic,
externalLinkText = _this$props.externalLinkText;
var prefix = settings.prefix;
var interactions = createInteractionHandler(function (evt) {
if (!cardHref || cardDisabled) {
evt.preventDefault();
}
if (onInteract && !cardDisabled) {
onInteract(cardId);
}
}, ['onKeyPress', 'onClick']);
var tileClasses = className || '';
return /*#__PURE__*/React.createElement("div", _extends({
key: cardId,
className: "".concat(cardDisabled ? "".concat(idePrefix, "-card--card-disabled") : '', "\n ").concat(idePrefix, "-card-container ").concat(idePrefix, "-card-container__").concat(cardSize, " ").concat(idePrefix, "-card-").concat(cardType, " ").concat(prefix, "--col-sm-", 1, " ").concat(prefix, "--col-md-", 2, " ").concat(prefix, "--col-lg-", 4, " ").concat(prefix, "--col-xlg-", 4, " ").concat(prefix, "--col-max-", 4)
}, idAttribute("ide-card-".concat(cardId)), {
onMouseEnter: _this.mouseEnter,
onMouseLeave: _this.mouseLeave
}), /*#__PURE__*/React.createElement("div", {
className: "".concat(idePrefix, "-card")
}, /*#__PURE__*/React.createElement(ClickableTile, _extends({
tabIndex: 0,
className: "".concat(idePrefix, "-card--card-overides ").concat(tileClasses),
href: cardHref ? cardHref : '#' // add an href which does nothing so a click can be registered
,
target: cardType === 'externalLink' ? cardLinkTarget : undefined
}, idAttribute("ide-card-".concat(cardId, "-card")), interactions), _this.renderCardContent(cardId, cardType, cardHeading, cardHeadingTitle, cardHeadingDescription, cardGraphic, cardContent, cardDisabled, disabledText, secondaryGraphic, externalLinkText))));
});
_defineProperty(_this, "renderCardContent", function (cardId, cardType, cardHeading, cardHeadingTitle, cardHeadingDescription, cardGraphic, cardContent, cardDisabled, disabledText, secondaryGraphic, externalLinkText) {
var jsx = null;
switch (cardType) {
default:
case 'text':
jsx = _this.renderCardHeader(cardId, cardType, cardHeading, cardHeadingTitle, cardHeadingDescription, cardGraphic, cardDisabled, disabledText, /*#__PURE__*/React.createElement("p", _extends({}, idAttribute("ide-card-".concat(cardId, "-text")), {
className: "".concat(idePrefix, "-card--tile-text")
})), secondaryGraphic, externalLinkText);
break;
case 'node':
jsx = _this.renderCardHeader(cardId, cardType, cardHeading, cardHeadingTitle, cardHeadingDescription, cardGraphic, cardDisabled, disabledText, cardContent ? cardContent.node : undefined, secondaryGraphic, externalLinkText);
break;
case 'externalLink':
jsx = _this.renderCardHeader(cardId, cardType, cardHeading, cardHeadingTitle, cardHeadingDescription, cardGraphic, cardDisabled, disabledText, /*#__PURE__*/React.createElement("p", _extends({}, idAttribute("ide-card-".concat(cardId, "-text")), {
className: "".concat(idePrefix, "-card--tile-text")
})), secondaryGraphic, externalLinkText);
break;
case 'link':
jsx = _this.renderCardHeader(cardId, cardType, cardHeading, cardHeadingTitle, cardHeadingDescription, cardGraphic, cardDisabled, disabledText, /*#__PURE__*/React.createElement("ul", null, cardContent && cardContent.links && cardContent.links.map(function (link) {
return /*#__PURE__*/React.createElement("li", {
key: link.href
}, /*#__PURE__*/React.createElement(Link, _extends({}, idAttribute("ide-card-".concat(cardId, "-").concat(link.href, "-Link")), {
href: link.href
}), link.text));
})), secondaryGraphic, externalLinkText);
break;
case 'custom':
jsx = cardContent && cardContent.renderFunc ? cardContent.renderFunc() : null;
break;
}
return jsx;
});
_defineProperty(_this, "renderCardHeader", function (cardId, cardType, cardHeading, cardHeadingTitle, cardHeadingDescription, cardGraphic, cardDisabled, disabledText, cardBody, secondaryGraphic, externalLinkText) {
return /*#__PURE__*/React.createElement("div", _extends({}, idAttribute("ide-card-".concat(cardId, "-Text-Tile")), {
className: "".concat(idePrefix, "-card--tile")
}), _this.renderCardGraphicHeader(cardId, cardType, cardGraphic, secondaryGraphic, externalLinkText), /*#__PURE__*/React.createElement("div", {
className: "".concat(idePrefix, "-card--text-container")
}, /*#__PURE__*/React.createElement("p", _extends({}, idAttribute("ide-card-".concat(cardId, "-HeadingTitle")), {
className: "".concat(idePrefix, "-card--heading-title")
}), cardHeadingTitle), /*#__PURE__*/React.createElement("div", {
className: "".concat(idePrefix, "-card-heading-container")
}, /*#__PURE__*/React.createElement("p", _extends({}, idAttribute("ide-card-".concat(cardId, "-Heading")), {
className: "".concat(idePrefix, "-card--heading")
}), cardHeading), cardDisabled && disabledText && _this.state.onHover && /*#__PURE__*/React.createElement(Tooltip, {
open: _this.state.onHover,
showIcon: true,
direction: "bottom",
className: "".concat(idePrefix, "-card--card-tooltip")
}, disabledText)), /*#__PURE__*/React.createElement("p", _extends({}, idAttribute("ide-card-".concat(cardId, "-HeadingDescription")), {
className: "".concat(idePrefix, "-card--heading-description")
}), cardHeadingDescription), cardBody));
});
_defineProperty(_this, "renderCardGraphicHeader", function (cardId, cardType, cardGraphic, secondaryGraphic, externalLinkText) {
return (cardGraphic || cardType === 'externalLink') && /*#__PURE__*/React.createElement("div", _extends({
className: "".concat(idePrefix, "-card--tile-img-group") + (!cardGraphic ? " ".concat(idePrefix, "-card--tile-img-group-right") : '')
}, idAttribute("ide-card-".concat(cardId, "-Image-Group"))), cardGraphic && /*#__PURE__*/React.createElement("div", _extends({
className: "".concat(idePrefix, "-card--tile-img")
}, idAttribute("ide-card-".concat(cardId, "-Image"))), cardGraphic && renderGraphic(cardGraphic)), (cardType === 'externalLink' || secondaryGraphic === 'external') && /*#__PURE__*/React.createElement("div", _extends({
className: "".concat(idePrefix, "-card--tile-img")
}, idAttribute("ide-card-".concat(cardId, "-launch-Image")), {
alt: externalLinkText
}), renderGraphic(Launch20)));
});
return _this;
}
_inherits(IdeCard, _React$Component);
return _createClass(IdeCard);
}(React.Component);
IdeCard.propTypes = {
/** Optional prop - custom render function can be provided to overwrite the whole content of the card or just the content beneath the heading */
cardContent: PropTypes.object,
/** Optional prop - display a disabled card with a tooltip on hover*/
cardDisabled: PropTypes.bool,
/** Optional property - icon to be displayed on the card */
cardGraphic: PropTypes.object,
/** Required property - card main text */
cardHeading: PropTypes.string.isRequired,
/** Optional prop - small text displayed at the bottom of the card*/
cardHeadingDescription: PropTypes.string,
/** Optional prop - small text on top of the main card heading*/
cardHeadingTitle: PropTypes.string,
/** Optional property - Link to be used for the underlying anchor */
cardHref: PropTypes.string,
/** The unique id of the card */
cardId: PropTypes.string,
/** Card href target - if the task represents an external link then whether to specify a target */
cardLinkTarget: PropTypes.string,
/** Card cardLinkType - if the task represents a link, whether the url should open in a new tab */
cardLinkType: PropTypes.oneOf(['internal', 'external']),
/** The size of the card - standard by default */
cardSize: PropTypes.oneOf(['standard', 'large']),
/** The type of the card (link, node, text, or custom) - text by default */
cardType: PropTypes.oneOf(['externalLink', 'node', 'link', 'text', 'custom']),
/** Optional prop - custom class names to be used for a card */
className: PropTypes.string,
/** Optional prop - needed in case cardDisabled: true is provided to display the tooltip text */
disabledText: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
/** Optional prop - if this is a link which opens in a new tab, explanatory text */
externalLinkText: PropTypes.string,
/** OnClick handler - callback function to model the onClick behaviour of a card*/
onInteract: PropTypes.func,
/** Optional prop - set this to "external" to always display the launch out icon */
secondaryGraphic: PropTypes.oneOf(['external'])
};
IdeCard.defaultProps = {
cardHeading: 'Test heading - CHANGE ME',
cardSize: 'standard',
cardType: 'text',
cardDisabled: false,
cardLinkTarget: '_blank',
disabledText: '',
externalLinkText: 'Opens in new tab'
};