@carbon/ibm-cloud-cognitive-cdai
Version:
Carbon for Cloud & Cognitive CD&AI UI components
212 lines (211 loc) • 13.9 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.IdeCard = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _carbonComponents = require("carbon-components");
var _carbonComponentsReact = require("carbon-components-react");
var _A11yHelper = require("../../component_helpers/A11yHelper");
var _IDHelper = require("../../component_helpers/IDHelper");
var _ReactHelper = require("../../component_helpers/ReactHelper");
var _iconsReact = require("@carbon/icons-react");
var _settings = require("../../globals/js/settings");
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(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.
//
var IdeCard = exports.IdeCard = /*#__PURE__*/function (_React$Component) {
function IdeCard() {
var _this;
(0, _classCallCheck2.default)(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));
(0, _defineProperty2.default)(_this, "state", {
onHover: false
});
(0, _defineProperty2.default)(_this, "mouseEnter", function () {
if (_this.props.cardDisabled) {
_this.setState({
onHover: true
});
}
});
(0, _defineProperty2.default)(_this, "mouseLeave", function () {
if (_this.props.cardDisabled) {
_this.setState({
onHover: false
});
}
});
(0, _defineProperty2.default)(_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 = _carbonComponents.settings.prefix;
var interactions = (0, _A11yHelper.createInteractionHandler)(function (evt) {
if (!cardHref || cardDisabled) {
evt.preventDefault();
}
if (onInteract && !cardDisabled) {
onInteract(cardId);
}
}, ['onKeyPress', 'onClick']);
var tileClasses = className || '';
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
key: cardId,
className: "".concat(cardDisabled ? "".concat(_settings.idePrefix, "-card--card-disabled") : '', "\n ").concat(_settings.idePrefix, "-card-container ").concat(_settings.idePrefix, "-card-container__").concat(cardSize, " ").concat(_settings.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)
}, (0, _IDHelper.idAttribute)("ide-card-".concat(cardId)), {
onMouseEnter: _this.mouseEnter,
onMouseLeave: _this.mouseLeave
}), /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(_settings.idePrefix, "-card")
}, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ClickableTile, (0, _extends2.default)({
tabIndex: 0,
className: "".concat(_settings.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
}, (0, _IDHelper.idAttribute)("ide-card-".concat(cardId, "-card")), interactions), _this.renderCardContent(cardId, cardType, cardHeading, cardHeadingTitle, cardHeadingDescription, cardGraphic, cardContent, cardDisabled, disabledText, secondaryGraphic, externalLinkText))));
});
(0, _defineProperty2.default)(_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.default.createElement("p", (0, _extends2.default)({}, (0, _IDHelper.idAttribute)("ide-card-".concat(cardId, "-text")), {
className: "".concat(_settings.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.default.createElement("p", (0, _extends2.default)({}, (0, _IDHelper.idAttribute)("ide-card-".concat(cardId, "-text")), {
className: "".concat(_settings.idePrefix, "-card--tile-text")
})), secondaryGraphic, externalLinkText);
break;
case 'link':
jsx = _this.renderCardHeader(cardId, cardType, cardHeading, cardHeadingTitle, cardHeadingDescription, cardGraphic, cardDisabled, disabledText, /*#__PURE__*/_react.default.createElement("ul", null, cardContent && cardContent.links && cardContent.links.map(function (link) {
return /*#__PURE__*/_react.default.createElement("li", {
key: link.href
}, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Link, (0, _extends2.default)({}, (0, _IDHelper.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;
});
(0, _defineProperty2.default)(_this, "renderCardHeader", function (cardId, cardType, cardHeading, cardHeadingTitle, cardHeadingDescription, cardGraphic, cardDisabled, disabledText, cardBody, secondaryGraphic, externalLinkText) {
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, (0, _IDHelper.idAttribute)("ide-card-".concat(cardId, "-Text-Tile")), {
className: "".concat(_settings.idePrefix, "-card--tile")
}), _this.renderCardGraphicHeader(cardId, cardType, cardGraphic, secondaryGraphic, externalLinkText), /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(_settings.idePrefix, "-card--text-container")
}, /*#__PURE__*/_react.default.createElement("p", (0, _extends2.default)({}, (0, _IDHelper.idAttribute)("ide-card-".concat(cardId, "-HeadingTitle")), {
className: "".concat(_settings.idePrefix, "-card--heading-title")
}), cardHeadingTitle), /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(_settings.idePrefix, "-card-heading-container")
}, /*#__PURE__*/_react.default.createElement("p", (0, _extends2.default)({}, (0, _IDHelper.idAttribute)("ide-card-".concat(cardId, "-Heading")), {
className: "".concat(_settings.idePrefix, "-card--heading")
}), cardHeading), cardDisabled && disabledText && _this.state.onHover && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tooltip, {
open: _this.state.onHover,
showIcon: true,
direction: "bottom",
className: "".concat(_settings.idePrefix, "-card--card-tooltip")
}, disabledText)), /*#__PURE__*/_react.default.createElement("p", (0, _extends2.default)({}, (0, _IDHelper.idAttribute)("ide-card-".concat(cardId, "-HeadingDescription")), {
className: "".concat(_settings.idePrefix, "-card--heading-description")
}), cardHeadingDescription), cardBody));
});
(0, _defineProperty2.default)(_this, "renderCardGraphicHeader", function (cardId, cardType, cardGraphic, secondaryGraphic, externalLinkText) {
return (cardGraphic || cardType === 'externalLink') && /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
className: "".concat(_settings.idePrefix, "-card--tile-img-group") + (!cardGraphic ? " ".concat(_settings.idePrefix, "-card--tile-img-group-right") : '')
}, (0, _IDHelper.idAttribute)("ide-card-".concat(cardId, "-Image-Group"))), cardGraphic && /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
className: "".concat(_settings.idePrefix, "-card--tile-img")
}, (0, _IDHelper.idAttribute)("ide-card-".concat(cardId, "-Image"))), cardGraphic && (0, _ReactHelper.renderGraphic)(cardGraphic)), (cardType === 'externalLink' || secondaryGraphic === 'external') && /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
className: "".concat(_settings.idePrefix, "-card--tile-img")
}, (0, _IDHelper.idAttribute)("ide-card-".concat(cardId, "-launch-Image")), {
alt: externalLinkText
}), (0, _ReactHelper.renderGraphic)(_iconsReact.Launch20)));
});
return _this;
}
(0, _inherits2.default)(IdeCard, _React$Component);
return (0, _createClass2.default)(IdeCard);
}(_react.default.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.default.object,
/** Optional prop - display a disabled card with a tooltip on hover*/
cardDisabled: _propTypes.default.bool,
/** Optional property - icon to be displayed on the card */
cardGraphic: _propTypes.default.object,
/** Required property - card main text */
cardHeading: _propTypes.default.string.isRequired,
/** Optional prop - small text displayed at the bottom of the card*/
cardHeadingDescription: _propTypes.default.string,
/** Optional prop - small text on top of the main card heading*/
cardHeadingTitle: _propTypes.default.string,
/** Optional property - Link to be used for the underlying anchor */
cardHref: _propTypes.default.string,
/** The unique id of the card */
cardId: _propTypes.default.string,
/** Card href target - if the task represents an external link then whether to specify a target */
cardLinkTarget: _propTypes.default.string,
/** Card cardLinkType - if the task represents a link, whether the url should open in a new tab */
cardLinkType: _propTypes.default.oneOf(['internal', 'external']),
/** The size of the card - standard by default */
cardSize: _propTypes.default.oneOf(['standard', 'large']),
/** The type of the card (link, node, text, or custom) - text by default */
cardType: _propTypes.default.oneOf(['externalLink', 'node', 'link', 'text', 'custom']),
/** Optional prop - custom class names to be used for a card */
className: _propTypes.default.string,
/** Optional prop - needed in case cardDisabled: true is provided to display the tooltip text */
disabledText: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
/** Optional prop - if this is a link which opens in a new tab, explanatory text */
externalLinkText: _propTypes.default.string,
/** OnClick handler - callback function to model the onClick behaviour of a card*/
onInteract: _propTypes.default.func,
/** Optional prop - set this to "external" to always display the launch out icon */
secondaryGraphic: _propTypes.default.oneOf(['external'])
};
IdeCard.defaultProps = {
cardHeading: 'Test heading - CHANGE ME',
cardSize: 'standard',
cardType: 'text',
cardDisabled: false,
cardLinkTarget: '_blank',
disabledText: '',
externalLinkText: 'Opens in new tab'
};