@wix/design-system
Version:
@wix/design-system
49 lines • 3.06 kB
JavaScript
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { classes, st } from './EmptyState.st.css.js';
import Heading from '../Heading';
import Text from '../Text';
import deprecationLog from '../utils/deprecationLog';
export const defaultEmptyStateProps = {
skin: 'section',
image: null,
children: null,
align: 'center',
};
/**
* Representing a state of an empty page, section, table, etc.
*/
const EmptyState = ({ theme, skin, image = defaultEmptyStateProps.image, children = defaultEmptyStateProps.children, align = defaultEmptyStateProps.align, title, subtitle, classNames: classNamesProp, className, dataHook, }) => {
const mergedSkin = skin || theme || defaultEmptyStateProps.skin;
useEffect(() => {
if (theme) {
deprecationLog('<EmptyState/> - prop "theme" is deprecated and will be removed in next major release, please use "skin" property instead.');
}
}, [theme]);
return (React.createElement("div", { className: st(classes.root, { skin: mergedSkin, align }, className), "data-hook": dataHook, "data-skin": mergedSkin, "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" }, mergedSkin === '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: "small", secondary: true }, subtitle))),
children && (React.createElement("div", { className: classes.childrenContainer, "data-hook": "empty-state-children-container" }, children)))));
};
EmptyState.displayName = 'EmptyState';
EmptyState.propTypes = {
skin: PropTypes.oneOf(['page', 'page-no-border', 'section']),
theme: PropTypes.oneOf(['page', 'page-no-border', 'section']),
title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
image: PropTypes.node,
classNames: PropTypes.shape({
imageContainer: PropTypes.string,
}),
className: PropTypes.string,
children: PropTypes.node,
dataHook: PropTypes.string,
align: PropTypes.oneOf(['start', 'center', 'end']),
};
export default EmptyState;
//# sourceMappingURL=EmptyState.js.map