2019-08-09 14:56:43 +00:00
|
|
|
import React from "react";
|
|
|
|
import PropTypes from "prop-types";
|
2019-11-07 08:21:57 +00:00
|
|
|
|
2021-02-10 11:36:35 +00:00
|
|
|
import Text from "../text";
|
|
|
|
import {
|
|
|
|
EmptyContentBody,
|
|
|
|
EmptyContentImage,
|
|
|
|
} from "./styled-empty-screen-container";
|
2019-08-09 14:56:43 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
const EmptyScreenContainer = (props) => {
|
2020-10-05 13:20:33 +00:00
|
|
|
const {
|
|
|
|
imageSrc,
|
|
|
|
imageAlt,
|
|
|
|
headerText,
|
|
|
|
subheadingText,
|
|
|
|
descriptionText,
|
2020-10-16 13:16:01 +00:00
|
|
|
buttons,
|
2020-10-05 13:20:33 +00:00
|
|
|
} = props;
|
2019-08-09 14:56:43 +00:00
|
|
|
return (
|
2019-12-04 09:36:13 +00:00
|
|
|
<EmptyContentBody {...props}>
|
2020-10-05 13:20:33 +00:00
|
|
|
<EmptyContentImage
|
|
|
|
imageSrc={imageSrc}
|
|
|
|
imageAlt={imageAlt}
|
|
|
|
className="ec-image"
|
|
|
|
/>
|
2019-11-07 07:48:58 +00:00
|
|
|
|
2019-12-04 09:36:13 +00:00
|
|
|
{headerText && (
|
2021-08-30 13:24:16 +00:00
|
|
|
<Text
|
|
|
|
as="span"
|
|
|
|
fontSize="19px"
|
|
|
|
fontWeight="600"
|
|
|
|
className="ec-header"
|
|
|
|
noSelect
|
|
|
|
>
|
2020-10-05 13:20:33 +00:00
|
|
|
{headerText}
|
|
|
|
</Text>
|
2019-12-04 09:36:13 +00:00
|
|
|
)}
|
2019-11-07 07:48:58 +00:00
|
|
|
|
2020-04-14 10:27:42 +00:00
|
|
|
{subheadingText && (
|
2021-08-30 13:24:16 +00:00
|
|
|
<Text as="span" fontWeight="600" className="ec-subheading" noSelect>
|
2020-10-05 13:20:33 +00:00
|
|
|
{subheadingText}
|
|
|
|
</Text>
|
2020-04-14 10:27:42 +00:00
|
|
|
)}
|
|
|
|
|
2019-12-04 09:36:13 +00:00
|
|
|
{descriptionText && (
|
2021-08-30 13:24:16 +00:00
|
|
|
<Text
|
|
|
|
as="span"
|
|
|
|
color="#6A7378"
|
|
|
|
fontSize="12px"
|
|
|
|
className="ec-desc"
|
|
|
|
noSelect
|
|
|
|
>
|
2020-10-05 13:20:33 +00:00
|
|
|
{descriptionText}
|
|
|
|
</Text>
|
2019-12-04 09:36:13 +00:00
|
|
|
)}
|
|
|
|
|
2020-10-05 13:20:33 +00:00
|
|
|
{buttons && <div className="ec-buttons">{buttons}</div>}
|
2019-12-04 09:36:13 +00:00
|
|
|
</EmptyContentBody>
|
2019-08-09 14:56:43 +00:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
EmptyScreenContainer.propTypes = {
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Image url source */
|
2019-08-09 14:56:43 +00:00
|
|
|
imageSrc: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Alternative image text */
|
2019-08-09 14:56:43 +00:00
|
|
|
imageAlt: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Header text */
|
2019-08-09 14:56:43 +00:00
|
|
|
headerText: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Subheading text */
|
2020-04-14 10:27:42 +00:00
|
|
|
subheadingText: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Description text */
|
2020-10-27 07:32:50 +00:00
|
|
|
descriptionText: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Content of EmptyContentButtonsContainer */
|
2019-11-27 14:05:10 +00:00
|
|
|
buttons: PropTypes.any,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Accepts class */
|
2019-11-27 14:05:10 +00:00
|
|
|
className: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Accepts id */
|
2019-11-27 14:05:10 +00:00
|
|
|
id: PropTypes.string,
|
2021-03-07 11:57:26 +00:00
|
|
|
/** Accepts css style */
|
2020-10-16 13:16:01 +00:00
|
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
2019-08-09 14:56:43 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
export default EmptyScreenContainer;
|