@carbon/ibm-cloud-cognitive-cdai
Version:
Carbon for Cloud & Cognitive CD&AI UI components
315 lines (311 loc) • 19.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
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 _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _carbonComponentsReact = require("carbon-components-react");
var _carbonComponents = require("carbon-components");
var _A11yHelper = require("../../component_helpers/A11yHelper");
var _IDHelper = require("../../component_helpers/IDHelper");
var _IdeNavigation = require("../IdeNavigation");
var _IdeCard = require("../IdeCard");
var _ReactHelper = require("../../component_helpers/ReactHelper");
var _settings = require("../../globals/js/settings");
var _excluded = ["multipleSetType", "headerCollapsed", "headerCollapsible", "headerButtonTextCollapse", "headerButtonTextExpand", "headerHandleCollapseFunc", "headerOne", "headerTwo", "headerGraphic", "sets", "className"];
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 prefix = _carbonComponents.settings.prefix;
var IdeHome = exports.default = /*#__PURE__*/function (_React$Component) {
function IdeHome() {
var _this;
(0, _classCallCheck2.default)(this, IdeHome);
_this = _callSuper(this, IdeHome);
_this.state = {
currentSetIndex: 0,
lastSetIndex: undefined
};
_this.handleSetChange = _this.handleSetChange.bind(_this);
return _this;
}
// required to encapsulate the carbon selected tab logic, but offer the ability to be controlled by a parent for selected tab
(0, _inherits2.default)(IdeHome, _React$Component);
return (0, _createClass2.default)(IdeHome, [{
key: "handleSetChange",
value: function handleSetChange(setIndex) {
this.setState({
lastSetIndex: this.state.currentSetIndex,
currentSetIndex: setIndex
});
}
// Input an array of tasks and returns an array of cards
}, {
key: "createCardsFromTasks",
value: function createCardsFromTasks(tasks) {
return tasks.map(function (task) {
var ideCardProps = {
key: task.taskId,
cardId: task.taskId,
onInteract: task.onInteract,
cardSize: task.cardSize,
cardHref: task.cardHref,
cardLinkTarget: task.cardLinkTarget,
cardHeading: task.taskHeading,
cardHeadingTitle: task.taskHeadingTitle,
cardHeadingDescription: task.taskHeadingDescription,
cardGraphic: task.taskGraphic,
cardType: task.cardType ? task.cardType : task.renderFunc ? 'custom' : task.taskLinks ? 'link' : task.cardHref && task.cardLinkType == 'external' ? 'externalLink' : 'text',
cardDisabled: task.disabled,
cardContent: task.taskContent,
disabledText: task.tooltipText,
secondaryGraphic: task.secondaryGraphic
};
if (ideCardProps.cardType == 'custom') {
ideCardProps.cardContent = {
renderFunc: task.renderFunc
};
} else if (ideCardProps.cardType == 'link') {
ideCardProps.cardContent = {
links: task.taskLinks
};
}
return /*#__PURE__*/_react.default.createElement(_IdeCard.IdeCard, (0, _extends2.default)({}, ideCardProps, {
key: ideCardProps.key
}));
});
}
}, {
key: "renderSets",
value: function renderSets(sets, currentSet, multipleSetType) {
var _this2 = this;
var setsToRender = [];
// build each set with its tasks
sets.forEach(function (set) {
var setToRender = {
id: set.id,
heading: set.setHeading
};
if (set.tasks) {
setToRender.tasks = _this2.createCardsFromTasks(set.tasks, set.id);
} else {
setToRender.renderFunc = function () {
return set.renderFunc ? set.renderFunc() : /*#__PURE__*/_react.default.createElement("div", null, "Default Content");
};
}
setsToRender.push(setToRender);
});
var setsJSX = null;
if (setsToRender.length > 1) {
if (multipleSetType === 'tab') {
// tabs case
setsJSX = /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tabs, (0, _extends2.default)({
selected: currentSet,
className: "".concat(prefix, "--row"),
tabContentClassName: "".concat(_settings.idePrefix, "-home-tab-content")
}, (0, _IDHelper.idAttribute)("IdeHome-Tabs")), setsToRender.map(function (set, index) {
return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tab, (0, _extends2.default)({
id: "".concat(_settings.idePrefix, "-home-tab-content-").concat(set.id),
key: set.id,
label: set.heading
}, (0, _IDHelper.idAttribute)("IdeHome-Tab-".concat(set.id)), (0, _A11yHelper.createInteractionHandler)(function () {
// on tab click/press, update the selected index
_this2.handleSetChange(index);
})), /*#__PURE__*/_react.default.createElement("section", (0, _extends2.default)({}, (0, _IDHelper.idAttribute)('IdeHome-Task-Set'), {
className: "".concat(prefix, "--row ").concat(_settings.idePrefix, "-home-full-width")
}), set.tasks ? set.tasks : set.renderFunc()));
}));
}
if (multipleSetType === 'section') {
// sections case
setsJSX = setsToRender.map(function (set) {
return /*#__PURE__*/_react.default.createElement("section", (0, _extends2.default)({
key: set.id
}, (0, _IDHelper.idAttribute)("IdeHome-Section-".concat(set.id)), {
className: "".concat(prefix, "--row ").concat(_settings.idePrefix, "-home-full-width")
}), set.heading && /*#__PURE__*/_react.default.createElement("h3", (0, _extends2.default)({}, (0, _IDHelper.idAttribute)("IdeHome-Section-title-".concat(set.id)), {
className: "".concat(_settings.idePrefix, "-home--section-title")
}), set.heading), set.tasks ? set.tasks : set.renderFunc());
});
}
} else if (setsToRender.length === 1) {
// one set case
setsJSX = /*#__PURE__*/_react.default.createElement("section", (0, _extends2.default)({}, (0, _IDHelper.idAttribute)('IdeHome-Task-Set'), {
className: "".concat(prefix, "--row ").concat(_settings.idePrefix, "-home-full-width")
}), setsToRender[0].tasks ? setsToRender[0].tasks : setsToRender[0].renderFunc());
}
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, (0, _IDHelper.idAttribute)('IdeHome-Sets'), {
className: "".concat(prefix, "--row ").concat(prefix, "--grid ").concat(prefix, "--grid--condensed ").concat(_settings.idePrefix, "-home-table")
}), setsJSX);
}
}, {
key: "render",
value: function render() {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props,
multipleSetType = _ref.multipleSetType,
headerCollapsed = _ref.headerCollapsed,
headerCollapsible = _ref.headerCollapsible,
headerButtonTextCollapse = _ref.headerButtonTextCollapse,
headerButtonTextExpand = _ref.headerButtonTextExpand,
headerHandleCollapseFunc = _ref.headerHandleCollapseFunc,
headerOne = _ref.headerOne,
headerTwo = _ref.headerTwo,
headerGraphic = _ref.headerGraphic,
sets = _ref.sets,
className = _ref.className,
others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
return /*#__PURE__*/_react.default.createElement("section", (0, _extends2.default)({}, (0, _IDHelper.idAttribute)('IdeHome'), {
className: "".concat(_settings.idePrefix, "-home ").concat(className)
}, others), /*#__PURE__*/_react.default.createElement(_IdeNavigation.IdePageContent, null, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, (0, _IDHelper.idAttribute)('IdeHome-Header'), {
className: "".concat(headerCollapsed ? 'collapsed' : '', " ").concat(_settings.idePrefix, "-home-header ").concat(prefix, "--row")
}), /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, (0, _IDHelper.idAttribute)('IdeHome-Header-Text'), {
className: "\n ".concat(_settings.idePrefix, "-home-heading-container\n ").concat(prefix, "--col-sm-").concat(!headerCollapsible ? 1 : headerCollapsed ? 3 : 2, "\n ").concat(prefix, "--col-md-").concat(!headerCollapsible ? 2 : headerCollapsed ? 6 : 3, "\n ").concat(prefix, "--col-lg-").concat(!headerCollapsible ? 6 : headerCollapsed ? 14 : 6, "\n ").concat(prefix, "--col-xlg-").concat(!headerCollapsible ? 6 : headerCollapsed ? 14 : 6, "\n ").concat(prefix, "--col-max-").concat(!headerCollapsible ? 6 : headerCollapsed ? 14 : 6, "\n ")
}), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
className: "".concat(_settings.idePrefix, "-home-product-heading")
}, headerOne), !headerCollapsed && /*#__PURE__*/_react.default.createElement("p", {
className: "".concat(_settings.idePrefix, "-home-call-to-action")
}, headerTwo))), !headerCollapsed && /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, (0, _IDHelper.idAttribute)('IdeHome-Header-Image'), {
className: "\n ".concat(_settings.idePrefix, "-home-image-container\n ").concat(prefix, "--col-sm-").concat(!headerCollapsible ? 3 : 2, "\n ").concat(prefix, "--col-md-").concat(!headerCollapsible ? 6 : 3, "\n ").concat(prefix, "--col-lg-").concat(!headerCollapsible ? 10 : 8, "\n ").concat(prefix, "--col-xlg-").concat(!headerCollapsible ? 10 : 8, "\n ").concat(prefix, "--col-max-").concat(!headerCollapsible ? 10 : 8, "\n ")
}), (0, _ReactHelper.renderGraphic)(headerGraphic)), headerCollapsible && /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, (0, _IDHelper.idAttribute)('IdeHome-header-toggle-container'), {
className: "\n ".concat(_settings.idePrefix, "-home-header-toggle-container\n ").concat(prefix, "--col-sm-", 1, "\n ").concat(prefix, "--col-md-", 2, "\n ").concat(prefix, "--col-lg-", 2, "\n ").concat(prefix, "--col-xlg-", 2, "\n ").concat(prefix, "--col-max-", 2, "\n ")
}), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, (0, _extends2.default)({}, (0, _IDHelper.idAttribute)('IdeHome-header-toggle'), {
disabled: false,
kind: "ghost",
onClick: headerHandleCollapseFunc,
renderIcon: undefined,
size: "small",
type: "button"
}), headerCollapsed ? headerButtonTextExpand : headerButtonTextCollapse))), this.renderSets(sets, this.state.currentSetIndex, multipleSetType)));
}
}], [{
key: "getDerivedStateFromProps",
value: function getDerivedStateFromProps(props, state) {
var derivedState = null;
// check which set to render, if startSelected provided in any set
var selectedSetIndex = props.sets.findIndex(function (set) {
return set.startSelected === true;
});
if (selectedSetIndex !== -1 && selectedSetIndex !== state.lastSetIndex) {
derivedState = {
currentSetIndex: selectedSetIndex,
lastSetIndex: state.lastSetIndex
};
}
return derivedState;
}
}]);
}(_react.default.Component);
IdeHome.propTypes = {
/** An optional toggle text to use on the collapsible header button - for collapsing the header. */
headerButtonTextCollapse: _propTypes.default.string,
/** An optional toggle text to use on the collapsible header button - for expanding the header. */
headerButtonTextExpand: _propTypes.default.string,
/** An optional boolean flag which should be instantiated to false by the consumer so that the expanded banner is initially used. When this flag is provided the collapsible banner will be used by default. */
headerCollapsed: _propTypes.default.bool,
/** An optional boolean flag which should be instantiated to true by the consumer should they want the banner to be collapsible. */
headerCollapsible: _propTypes.default.bool,
/** Optional graphic properties. This graphic will be rendered alongside the header text. This can either be a react component, or the following shape*/
headerGraphic: _propTypes.default.oneOfType([_propTypes.default.shape({
/** link to the image to display */
imgSrc: _propTypes.default.string.isRequired,
/** Alt text for this image. Must be provided to be accessible, and must be pre translated */
imgAlt: _propTypes.default.string.isRequired,
/** Optional - css class to apply to this image */
imgClassName: _propTypes.default.string
}), /** A react component, with all props etc defined */
_propTypes.default.element, _propTypes.default.object]),
/** An optional callback function to call when the toggle is activated. */
headerHandleCollapseFunc: _propTypes.default.func,
/** Main header text. Must be pre translated */
headerOne: _propTypes.default.string.isRequired,
/** Secondary header text. Optional. Must be pre translated */
headerTwo: _propTypes.default.string,
/** The initial set to render on mount. Should be the id of the set you want to render first. If undefined, will render the first set provide */
initialSet: _propTypes.default.string,
/** How multiple sets are to be displayed - tab is default. */
multipleSetType: _propTypes.default.oneOf(['section', 'tab']),
/** Set of grouped activities or tasks. If more than one is provided options appear as tabs. */
sets: _propTypes.default.arrayOf(_propTypes.default.shape({
/** Unique id for this set of tasks */
id: _propTypes.default.string.isRequired,
/** Heading for this set of tasks. Must be pre translated */
setHeading: _propTypes.default.string.isRequired,
/** Optional - provide this if this set is to start selected. If multiple are provided, the last one wins. */
startSelected: _propTypes.default.bool,
/** The set of tasks */
tasks: _propTypes.default.arrayOf(_propTypes.default.shape({
/** Unique id for this task */
taskId: _propTypes.default.string.isRequired,
/** Card href - if the task represents a link, the url the card should refer too */
cardHref: _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']),
/** Card href target - if the task represents an external link then whether to specify a target */
cardLinkTarget: _propTypes.default.string,
/** Card size - standard is default */
cardSize: _propTypes.default.oneOf(['standard', 'large']),
/** Card size - standard is default */
cardType: _propTypes.default.oneOf(['externalLink', 'node', 'link', 'text', 'custom']),
/** renderFunc - optional - provide this to insert your own JSX content into a card. If provided, taskHeading, taskSubtext and taskGrpahic are not rendered ignored */
renderFunc: _propTypes.default.func,
/** Task graphic for this task. This can either be a react component, or the following shape */
taskGraphic: _propTypes.default.oneOfType([_propTypes.default.shape({
/** link to the image to display */
imgSrc: _propTypes.default.string.isRequired,
/** Alt text for this image. Must be provided to be accessible, and must be pre translated */
imgAlt: _propTypes.default.string.isRequired,
/** Optional - css class to apply to this image */
imgClassName: _propTypes.default.string
}), /** A react component, with all props etc defined */
_propTypes.default.element]),
/** Heading for this task. Used in aria markup for the tile, and as the heading if no render function is provided. Must be pre translated */
taskHeading: _propTypes.default.string.isRequired,
/** Heading title for this task. Used in aria markup for the tile, and as the heading if no render function is provided. Must be pre translated */
taskHeadingTitle: _propTypes.default.string,
/** Heading subtitle for this task. Used in aria markup for the tile, and as the heading if no render function is provided. Must be pre translated */
taskHeadingDescription: _propTypes.default.string,
/** Subtext for this task. Must be pre translated if provided */
taskSubtext: _propTypes.default.string,
/** Array of items to show as links */
taskLinks: _propTypes.default.arrayOf(_propTypes.default.shape({
/** translated text to show as link */
text: _propTypes.default.string,
/** href destination for the link */
href: _propTypes.default.string
})),
/** Function which is fired on click/keypress of this tab */
onInteract: _propTypes.default.func,
/** Boolean flag to conditionally render a disabled card */
disabled: _propTypes.default.bool,
/** Tooltip to display on the link of a disabled card */
tooltipText: _propTypes.default.string,
/** Optional prop - set this to "external" to always display the launch out icon */
secondaryGraphic: _propTypes.default.oneOf(['external'])
})),
/** A callback function that should return user defined JSX content that will be displayed under the tabs */
renderFunc: _propTypes.default.func
}))
};
IdeHome.defaultProps = {
multipleSetType: 'tab',
headerCollapsible: false,
headerButtonTextExpand: 'Show more - CHANGE ME',
headerButtonTextCollapse: 'Show less - CHANGE ME',
headerOne: 'Product text',
headerTwo: 'Call to action',
headerGraphic: {},
sets: []
};