@carbon/ibm-cloud-cognitive-cdai
Version:
Carbon for Cloud & Cognitive CD&AI UI components
228 lines (226 loc) • 8.15 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _carbonComponentsReact = require("carbon-components-react");
var _settings = require("../../globals/js/settings");
var _assets = _interopRequireDefault(require("./assets"));
var _iconsReact = require("@carbon/icons-react");
var _excluded = ["text", "url", "target", "onClick"]; //
// 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 = "".concat(_settings.idePrefix, "-empty-state");
var IdeEmptyState = function IdeEmptyState(_ref) {
var body = _ref.body,
button = _ref.button,
format = _ref.format,
image = _ref.image,
links = _ref.links,
title = _ref.title;
var renderImage = function renderImage() {
var className = "".concat(prefix, "__image ").concat(prefix, "__image--format-").concat(format);
if (typeof image === 'function') {
return image(className);
}
return /*#__PURE__*/_react.default.createElement("img", {
alt: image.alt ? image.alt : '',
className: image.className ? "".concat(className, " ").concat(image.className) : className,
src: image.src ? image.src : _assets.default[format][image]
});
};
var renderButton = function renderButton() {
if (typeof button === 'function') {
return button();
}
var kind = button.kind,
onClick = button.onClick,
text = button.text;
return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
kind: kind,
onClick: onClick,
size: 'small'
}, text);
};
var renderLinks = function renderLinks() {
var finalLinks = Array.isArray(links) ? links : [links];
return /*#__PURE__*/_react.default.createElement("ul", null, finalLinks.map(function (_ref2) {
var text = _ref2.text,
url = _ref2.url,
_ref2$target = _ref2.target,
target = _ref2$target === void 0 ? '_top' : _ref2$target,
_onClick = _ref2.onClick,
other = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
return /*#__PURE__*/_react.default.createElement("li", (0, _defineProperty2.default)({
className: "".concat(prefix, "__link"),
key: "".concat(text, ":").concat(url)
}, "key", "".concat(text, ":").concat(url)), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Link, (0, _extends2.default)({
href: url,
target: target,
onClick: function onClick(e) {
return _onClick ? _onClick(e) : false;
}
}, other), text), target === '_blank' && /*#__PURE__*/_react.default.createElement(_iconsReact.Launch24, {
className: "".concat(prefix, "__launchIcon")
}));
}));
};
// Main render function
return /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(prefix, " ").concat(prefix, "--format-").concat(format)
}, /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(prefix, "__image-container ").concat(prefix, "__image-container--format-").concat(format)
}, renderImage()), /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(prefix, "__content-container ").concat(prefix, "__content-container--format-").concat(format),
format: format
}, /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(prefix, "__title ").concat(prefix, "__title--format-").concat(format)
}, title), body && /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(prefix, "__body")
}, body), button && /*#__PURE__*/_react.default.createElement("div", {
className: "".concat(prefix, "__button")
}, renderButton()), links && renderLinks()));
};
IdeEmptyState.defaultProps = {
format: 'lg',
image: 'default',
title: 'CHANGE ME',
body: null,
button: null,
links: null
};
IdeEmptyState.propTypes = {
/**
* The text rendered in the 2nd row of the content area. Does not render if
* undefined. Must be pre-translated.
*/
body: _propTypes.default.string,
/**
* The primary action button rendered in the 3rd row of the content area.
* Does not render if undefined.
*/
button: _propTypes.default.oneOfType([
/**
* Renders a basic Carbon button.
*/
_propTypes.default.shape({
/**
* The Carbon style to use when rendering. Options are INTENTIONALLY
* limited. If defined, it must be one of:
*/
kind: _propTypes.default.oneOf(['primary',
// default
'tertiary']).isRequired,
/**
* The event handler for when the button is clicked.
*/
onClick: _propTypes.default.func.isRequired,
/**
* The text to use when rendering. Must be pre-translated.
*/
text: _propTypes.default.string.isRequired
}),
/**
* A user-defined function that returns a button to render. Use for complex
* cases where you need full control (see storybook for an example). It is
* NOT RECOMMENDED to use this unless you absolutely have to deviate from
* the standard designs.
*/
_propTypes.default.func]),
/**
* The format to use when rendering (sm = vertical, lg = horizontal).
* Defaults to `lg` if undefined.
*/
format: _propTypes.default.oneOf(['lg',
// default
'sm']),
/**
* The image to use when rendering. Defaults to `default` if undefined.
*/
image: _propTypes.default.oneOfType([
/**
* If defined as a string, it must be one of;
*/
_propTypes.default.oneOf(['apiError', 'default',
// default
'deploy', 'noSearchResults', 'notAuthorized']),
/**
* If defined as an object, it must look like:
*/
_propTypes.default.shape({
/**
* The HTML alt attribute to attach to the image.
*/
alt: _propTypes.default.string,
/**
* Additional user-defined classnames to attach to the image.
*/
className: _propTypes.default.string,
/**
* The source of the image to render.
*/
src: _propTypes.default.string.isRequired
}),
/**
* A user-defined function that returns an image to render. Use for complex
* cases where you need full control (see storybook for an example). It is
* NOT RECOMMENDED to use this unless you absolutely have to deviate from
* the standard designs.
*/
_propTypes.default.func]),
/**
* The links rendered in the 4th row of the content area. Does not render if
* undefined.
*/
links: _propTypes.default.oneOfType([
/**
* A link object.
*/
_propTypes.default.shape({
/**
* The text to display when rendering the link. Must be pre-translated.
*/
text: _propTypes.default.string.isRequired,
/**
* The link's destination.
*/
url: _propTypes.default.string.isRequired,
/**
* The target prop to apply to the anchor link
*/
target: _propTypes.default.string,
/**
* The onClick prop to apply a custom function
* when the button is clicked
*/
onClick: _propTypes.default.func
}),
/**
* An array of links objects.
*/
_propTypes.default.arrayOf(_propTypes.default.shape({
/**
* The text to display when rendering the link. Must be pre-translated.
*/
text: _propTypes.default.string.isRequired,
/**
* The link's destination.
*/
url: _propTypes.default.string.isRequired
}))]),
/**
* The text rendered in the 1st row of the content area. Defaults to `CHANGE
* ME` if undefined. Must be pre-translated.
*/
title: _propTypes.default.string.isRequired
};
var _default = exports.default = IdeEmptyState;