wix-style-react
Version:
wix-style-react
49 lines • 3.51 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 { WixStyleReactContext } from '../WixStyleReactProvider/context';
export const defaultEmptyStateProps = {
theme: 'section',
image: null,
children: null,
align: 'center',
};
/**
* Representing a state of an empty page, section, table, etc.
*/
const EmptyState = ({ theme = defaultEmptyStateProps.theme, image = defaultEmptyStateProps.image, children = defaultEmptyStateProps.children, align = defaultEmptyStateProps.align, title, subtitle, classNames: classNamesProp, className, dataHook, }) => (React.createElement(WixStyleReactContext.Consumer, null, ({ newColorsBranding }) => (React.createElement("div", { className: st(classes.root, { theme, align, newColorsBranding }, className), "data-hook": dataHook, "data-theme": theme, "data-align": align },
React.createElement("div", { className: classes.container },
image && (React.createElement("div", { className: st(classes.imageContainer, {}, (classNamesProp && classNamesProp.imageContainer) || ''), "data-hook": "empty-state-image-container" }, typeof image === 'string' ? (React.createElement("img", { className: classes.imageElement, src: image, "data-hook": "image-element" })) : (React.cloneElement(image, {
'data-hook': 'image-node',
})))),
title && (React.createElement("div", { className: classes.titleContainer, "data-hook": "empty-state-title-container" }, theme === 'section' ? (React.createElement(Text, { weight: "bold", className: classes.sectionTitle }, title)) : (React.createElement(Heading, { className: classes.title, size: "medium" }, title)))),
subtitle && (React.createElement("div", { className: classes.subtitleContainer, "data-hook": "empty-state-subtitle-container" },
React.createElement(Text, { className: classes.subtitle, size: newColorsBranding ? 'small' : 'medium', secondary: true }, subtitle))),
children && (React.createElement("div", { className: classes.childrenContainer, "data-hook": "empty-state-children-container" }, children)))))));
EmptyState.displayName = 'EmptyState';
EmptyState.propTypes = {
/** Sets the style theme for the empty state */
theme: PropTypes.oneOf(['page', 'page-no-border', 'section']),
/** Sets the content for the title */
title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
/** Sets the content for the subtitle */
subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
/** Contains the empty state image. Can be either a string representing the image URL, or a node to render. */
image: PropTypes.node,
/** Sets the empty state image bottom margin. If not specified, use the default padding defined in the CSS. */
classNames: PropTypes.shape({
imageContainer: PropTypes.string,
}),
/** Specifies a CSS class name to be appended to the component’s root element. */
className: PropTypes.string,
/** Contains components rendered below the subtitle, e.g., `<Button/>` or `<TextButton/>` */
children: PropTypes.node,
/** Applies a data-hook HTML attribute to be used in the tests */
dataHook: PropTypes.string,
/** Sets the alignment of all empty state contents within the component container */
align: PropTypes.oneOf(['start', 'center', 'end']),
};
export default EmptyState;
//# sourceMappingURL=EmptyState.js.map