@carbon/ibm-cloud-cognitive-cdai
Version:
Carbon for Cloud & Cognitive CD&AI UI components
223 lines (221 loc) • 7.34 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
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.
//
import React from 'react';
import PropTypes from 'prop-types';
import { Button as CarbonButton, Link as CarbonLink } from 'carbon-components-react';
import { idePrefix } from '../../globals/js/settings';
import assets from './assets';
import { Launch24 } from '@carbon/icons-react';
var prefix = "".concat(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.createElement("img", {
alt: image.alt ? image.alt : '',
className: image.className ? "".concat(className, " ").concat(image.className) : className,
src: image.src ? image.src : assets[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.createElement(CarbonButton, {
kind: kind,
onClick: onClick,
size: 'small'
}, text);
};
var renderLinks = function renderLinks() {
var finalLinks = Array.isArray(links) ? links : [links];
return /*#__PURE__*/React.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 = _objectWithoutProperties(_ref2, _excluded);
return /*#__PURE__*/React.createElement("li", _defineProperty({
className: "".concat(prefix, "__link"),
key: "".concat(text, ":").concat(url)
}, "key", "".concat(text, ":").concat(url)), /*#__PURE__*/React.createElement(CarbonLink, _extends({
href: url,
target: target,
onClick: function onClick(e) {
return _onClick ? _onClick(e) : false;
}
}, other), text), target === '_blank' && /*#__PURE__*/React.createElement(Launch24, {
className: "".concat(prefix, "__launchIcon")
}));
}));
};
// Main render function
return /*#__PURE__*/React.createElement("div", {
className: "".concat(prefix, " ").concat(prefix, "--format-").concat(format)
}, /*#__PURE__*/React.createElement("div", {
className: "".concat(prefix, "__image-container ").concat(prefix, "__image-container--format-").concat(format)
}, renderImage()), /*#__PURE__*/React.createElement("div", {
className: "".concat(prefix, "__content-container ").concat(prefix, "__content-container--format-").concat(format),
format: format
}, /*#__PURE__*/React.createElement("div", {
className: "".concat(prefix, "__title ").concat(prefix, "__title--format-").concat(format)
}, title), body && /*#__PURE__*/React.createElement("div", {
className: "".concat(prefix, "__body")
}, body), button && /*#__PURE__*/React.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.string,
/**
* The primary action button rendered in the 3rd row of the content area.
* Does not render if undefined.
*/
button: PropTypes.oneOfType([
/**
* Renders a basic Carbon button.
*/
PropTypes.shape({
/**
* The Carbon style to use when rendering. Options are INTENTIONALLY
* limited. If defined, it must be one of:
*/
kind: PropTypes.oneOf(['primary',
// default
'tertiary']).isRequired,
/**
* The event handler for when the button is clicked.
*/
onClick: PropTypes.func.isRequired,
/**
* The text to use when rendering. Must be pre-translated.
*/
text: PropTypes.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.func]),
/**
* The format to use when rendering (sm = vertical, lg = horizontal).
* Defaults to `lg` if undefined.
*/
format: PropTypes.oneOf(['lg',
// default
'sm']),
/**
* The image to use when rendering. Defaults to `default` if undefined.
*/
image: PropTypes.oneOfType([
/**
* If defined as a string, it must be one of;
*/
PropTypes.oneOf(['apiError', 'default',
// default
'deploy', 'noSearchResults', 'notAuthorized']),
/**
* If defined as an object, it must look like:
*/
PropTypes.shape({
/**
* The HTML alt attribute to attach to the image.
*/
alt: PropTypes.string,
/**
* Additional user-defined classnames to attach to the image.
*/
className: PropTypes.string,
/**
* The source of the image to render.
*/
src: PropTypes.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.func]),
/**
* The links rendered in the 4th row of the content area. Does not render if
* undefined.
*/
links: PropTypes.oneOfType([
/**
* A link object.
*/
PropTypes.shape({
/**
* The text to display when rendering the link. Must be pre-translated.
*/
text: PropTypes.string.isRequired,
/**
* The link's destination.
*/
url: PropTypes.string.isRequired,
/**
* The target prop to apply to the anchor link
*/
target: PropTypes.string,
/**
* The onClick prop to apply a custom function
* when the button is clicked
*/
onClick: PropTypes.func
}),
/**
* An array of links objects.
*/
PropTypes.arrayOf(PropTypes.shape({
/**
* The text to display when rendering the link. Must be pre-translated.
*/
text: PropTypes.string.isRequired,
/**
* The link's destination.
*/
url: PropTypes.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.string.isRequired
};
export default IdeEmptyState;