wix-style-react
Version:
wix-style-react
172 lines (170 loc) • 6.17 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.defaultEmptyStateProps = exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _EmptyStateSt = require("./EmptyState.st.css");
var _Heading = _interopRequireDefault(require("../Heading"));
var _Text = _interopRequireDefault(require("../Text"));
var _context = require("../WixStyleReactProvider/context");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/EmptyState/EmptyState.js";
var defaultEmptyStateProps = exports.defaultEmptyStateProps = {
theme: 'section',
image: null,
children: null,
align: 'center'
};
/**
* Representing a state of an empty page, section, table, etc.
*/
var EmptyState = _ref => {
var {
theme = defaultEmptyStateProps.theme,
image = defaultEmptyStateProps.image,
children = defaultEmptyStateProps.children,
align = defaultEmptyStateProps.align,
title,
subtitle,
classNames: classNamesProp,
className,
dataHook
} = _ref;
return /*#__PURE__*/_react.default.createElement(_context.WixStyleReactContext.Consumer, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 30,
columnNumber: 3
}
}, _ref2 => {
var {
newColorsBranding
} = _ref2;
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _EmptyStateSt.st)(_EmptyStateSt.classes.root, {
theme,
align,
newColorsBranding
}, className),
"data-hook": dataHook,
"data-theme": theme,
"data-align": align,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 32,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: _EmptyStateSt.classes.container,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 42,
columnNumber: 9
}
}, image && /*#__PURE__*/_react.default.createElement("div", {
className: (0, _EmptyStateSt.st)(_EmptyStateSt.classes.imageContainer, {}, classNamesProp && classNamesProp.imageContainer || ''),
"data-hook": "empty-state-image-container",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 44,
columnNumber: 13
}
}, typeof image === 'string' ? /*#__PURE__*/_react.default.createElement("img", {
className: _EmptyStateSt.classes.imageElement,
src: image,
"data-hook": "image-element",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 53,
columnNumber: 17
}
}) : (/*#__PURE__*/_react.default.cloneElement(image, {
'data-hook': 'image-node'
}))), title && /*#__PURE__*/_react.default.createElement("div", {
className: _EmptyStateSt.classes.titleContainer,
"data-hook": "empty-state-title-container",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 67,
columnNumber: 13
}
}, theme === 'section' ? /*#__PURE__*/_react.default.createElement(_Text.default, {
weight: "bold",
className: _EmptyStateSt.classes.sectionTitle,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 72,
columnNumber: 17
}
}, title) : /*#__PURE__*/_react.default.createElement(_Heading.default, {
className: _EmptyStateSt.classes.title,
size: "medium",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 76,
columnNumber: 17
}
}, title)), subtitle && /*#__PURE__*/_react.default.createElement("div", {
className: _EmptyStateSt.classes.subtitleContainer,
"data-hook": "empty-state-subtitle-container",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 84,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement(_Text.default, {
className: _EmptyStateSt.classes.subtitle,
size: newColorsBranding ? 'small' : 'medium',
secondary: true,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 88,
columnNumber: 15
}
}, subtitle)), children && /*#__PURE__*/_react.default.createElement("div", {
className: _EmptyStateSt.classes.childrenContainer,
"data-hook": "empty-state-children-container",
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 99,
columnNumber: 13
}
}, children)));
});
};
EmptyState.displayName = 'EmptyState';
EmptyState.propTypes = {
/** Sets the style theme for the empty state */
theme: _propTypes.default.oneOf(['page', 'page-no-border', 'section']),
/** Sets the content for the title */
title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
/** Sets the content for the subtitle */
subtitle: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
/** Contains the empty state image. Can be either a string representing the image URL, or a node to render. */
image: _propTypes.default.node,
/** Sets the empty state image bottom margin. If not specified, use the default padding defined in the CSS. */
classNames: _propTypes.default.shape({
imageContainer: _propTypes.default.string
}),
/** Specifies a CSS class name to be appended to the component’s root element. */
className: _propTypes.default.string,
/** Contains components rendered below the subtitle, e.g., `<Button/>` or `<TextButton/>` */
children: _propTypes.default.node,
/** Applies a data-hook HTML attribute to be used in the tests */
dataHook: _propTypes.default.string,
/** Sets the alignment of all empty state contents within the component container */
align: _propTypes.default.oneOf(['start', 'center', 'end'])
};
var _default = exports.default = EmptyState;
//# sourceMappingURL=EmptyState.js.map