Sha256: 794ca8c8b9186af1b74475a49be23dfc84907072e8acbe3bfee9994fb68e04cd
Contents?: true
Size: 1.88 KB
Versions: 34
Compression:
Stored size: 1.88 KB
Contents
import React from 'react';
import { Icon } from 'patternfly-react';
import {
Title,
EmptyState,
EmptyStateVariant,
EmptyStateBody,
EmptyStateSecondaryActions,
} from '@patternfly/react-core';
import { emptyStatePatternPropTypes } from './EmptyStatePropTypes';
import { translate as __ } from '../../../common/I18n';
const EmptyStatePattern = props => {
const {
documentation,
action,
secondaryActions,
iconType,
icon,
header,
description,
} = props;
const DocumentationBlock = () => {
if (!documentation) {
return null;
}
// The documentation prop can also be a customized node
if (React.isValidElement(documentation)) {
return documentation;
}
const {
label = __('For more information please see '), // eslint-disable-line react/prop-types
buttonLabel = __('documentation'), // eslint-disable-line react/prop-types
url, // eslint-disable-line react/prop-types
} = documentation;
return (
<span>
{label}
<a href={url}>{buttonLabel}</a>
</span>
);
};
return (
<EmptyState variant={EmptyStateVariant.xl}>
<span className="empty-state-icon">
{/* TODO: Add pf4 icons, Redmine issue: #30865 */}
<Icon name={icon} type={iconType} size="2x" />
</span>
<Title headingLevel="h5" size="4xl">
{header}
</Title>
<EmptyStateBody>
<div className="empty-state-description">{description}</div>
<DocumentationBlock />
</EmptyStateBody>
{action}
<EmptyStateSecondaryActions>
{secondaryActions}
</EmptyStateSecondaryActions>
</EmptyState>
);
};
EmptyStatePattern.propTypes = emptyStatePatternPropTypes;
EmptyStatePattern.defaultProps = {
icon: 'add-circle-o',
secondaryActions: [],
documentation: {
url: '#',
},
iconType: 'pf',
};
export default EmptyStatePattern;
Version data entries
34 entries across 34 versions & 1 rubygems