wix-style-react
Version:
93 lines (86 loc) • 3.39 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { classes, st } from './EmptyState.st.css';
import Heading from '../Heading';
import Text from '../Text';
import { FontUpgradeContext } from '../FontUpgrade/context';
/**
* Representing a state of an empty page, section, table, etc.
*/
var EmptyState = function EmptyState(_ref) {
var theme = _ref.theme,
title = _ref.title,
subtitle = _ref.subtitle,
image = _ref.image,
classNamesProp = _ref.classNames,
children = _ref.children,
dataHook = _ref.dataHook,
align = _ref.align;
return /*#__PURE__*/React.createElement("div", {
className: st(classes.root, {
theme: theme,
align: align
}),
"data-hook": dataHook,
"data-theme": theme,
"data-align": align
}, /*#__PURE__*/React.createElement("div", {
className: classes.container
}, image && /*#__PURE__*/React.createElement("div", {
className: st(classes.imageContainer, {}, classNamesProp && classNamesProp.imageContainer || ''),
"data-hook": "empty-state-image-container"
}, typeof image === 'string' ? /*#__PURE__*/React.createElement("img", {
className: classes.imageElement,
src: image,
"data-hook": "image-element"
}) : /*#__PURE__*/React.cloneElement(image, {
'data-hook': 'image-node'
})), title && /*#__PURE__*/React.createElement("div", {
className: classes.titleContainer,
"data-hook": "empty-state-title-container"
}, theme === 'section' ? /*#__PURE__*/React.createElement(FontUpgradeContext.Consumer, null, function (_ref2) {
var active = _ref2.active;
return /*#__PURE__*/React.createElement(Text, {
weight: active ? 'bold' : 'normal',
className: classes.sectionTitle
}, title);
}) : /*#__PURE__*/React.createElement(Heading, {
className: classes.title,
appearance: "H3"
}, title)), subtitle && /*#__PURE__*/React.createElement("div", {
className: classes.subtitleContainer,
"data-hook": "empty-state-subtitle-container"
}, /*#__PURE__*/React.createElement(Text, {
className: classes.subtitle,
secondary: true
}, subtitle)), children && /*#__PURE__*/React.createElement("div", {
className: classes.childrenContainer,
"data-hook": "empty-state-children-container"
}, children)));
};
EmptyState.displayName = 'EmptyState';
EmptyState.propTypes = {
/** The theme of the EmptyState */
theme: PropTypes.oneOf(['page', 'page-no-border', 'section']),
/** Content for the title of the Empty State */
title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
/** Content for the subtitle of the Empty State */
subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
/** The Empty State image, can be either a string representing the image URL, or a node to render instead */
image: PropTypes.node,
/** The Empty State image bottom margin. If not specified, use the default padding defined in the css */
classNames: PropTypes.shape({
imageContainer: PropTypes.string
}),
/** Children to render below the subtitle, ideally an action of some type (Button or TextButton for instance) */
children: PropTypes.node,
dataHook: PropTypes.string,
align: PropTypes.oneOf(['start', 'center', 'end'])
};
EmptyState.defaultProps = {
theme: 'section',
image: null,
children: null,
align: 'center'
};
export default EmptyState;