lucid-ui
Version:
A UI component library from AppNexus.
80 lines (79 loc) • 3.62 kB
JavaScript
import _ from 'lodash';
import React from 'react';
import PropTypes from 'react-peek/prop-types';
import { getFirst, omitProps } from '../../util/component-types';
import { lucidClassNames } from '../../util/style-helpers';
import LoadingIndicator from '../LoadingIndicator/LoadingIndicator';
import OverlayWrapper, { OverlayWrapperMessage, } from '../OverlayWrapper/OverlayWrapper';
const cx = lucidClassNames.bind('&-EmptyStateWrapper');
const { any, bool, node, string } = PropTypes;
const EmptyStateWrapperBody = (_props) => null;
const EmptyStateWrapperTitle = (_props) => null;
const defaultProps = {
isEmpty: false,
isLoading: false,
anchorMessage: false,
};
export const EmptyStateWrapper = (props) => {
const { children, className, isEmpty, isLoading, anchorMessage, ...passThroughs } = props;
const emptyMessageBodyProp = _.get(getFirst(props, EmptyStateWrapperBody), 'props');
const emptyMessageTitleProp = _.get(getFirst(props, EmptyStateWrapperTitle), 'props', { children: 'You have no data.' });
return isLoading ? (React.createElement(LoadingIndicator, Object.assign({ className: cx('&', className), isLoading: true }, omitProps(passThroughs, undefined, _.keys(EmptyStateWrapper.propTypes)), { anchorMessage: anchorMessage }), children)) : (React.createElement(OverlayWrapper, Object.assign({ className: cx('&', className), hasOverlay: false, isVisible: isEmpty, anchorMessage: anchorMessage }, omitProps(passThroughs, undefined, _.keys(EmptyStateWrapper.propTypes))),
React.createElement(OverlayWrapperMessage, { className: cx('&-message-container') },
React.createElement("div", { className: cx('&-message-header') }),
React.createElement("div", { className: cx('&-message-contents') },
React.createElement("header", Object.assign({}, emptyMessageTitleProp, { className: cx('&-message-title', emptyMessageTitleProp.className) })),
emptyMessageBodyProp && React.createElement("div", Object.assign({}, emptyMessageBodyProp)))),
children));
};
EmptyStateWrapper._isPrivate = true;
EmptyStateWrapper.peek = {
description: `
A wrapper which can display either a \`LoadingIndicator\` or
\`OverlayWrapper\`.
`,
categories: ['utility'],
madeFrom: ['LoadingIndicator', 'OverlayWrapper'],
};
EmptyStateWrapper.displayName = 'EmptyStateWrapper';
EmptyStateWrapper.defaultProps = defaultProps;
EmptyStateWrapper.propTypes = {
className: string `
Class names that are appended to the defaults.
`,
children: node `
Any valid React children.
`,
isEmpty: bool `
Controls the visibility of the \`EmptyMessage\`.
`,
isLoading: bool `
Controls the visibility of the \`LoadingMessage\`.
`,
anchorMessage: bool `
Position the \`EmptyMessage\` and \`LoadingMessage\` near the top of the container.
`,
Body: any `
*Child Element* The element to display in the body of the overlay.
`,
Title: any `
*Child Element* The element to display in the title of the overlay.
`,
};
EmptyStateWrapperBody.displayName = 'EmptyStateWrapper.Body';
EmptyStateWrapper.Body = EmptyStateWrapperBody;
EmptyStateWrapperBody.peek = {
description: `
Body content for the message to display when there is no data.
`,
};
EmptyStateWrapperBody.propName = 'Body';
EmptyStateWrapperTitle.displayName = 'EmptyStateWrapper.Title';
EmptyStateWrapper.Title = EmptyStateWrapperTitle;
EmptyStateWrapperTitle.peek = {
description: `
Title text for the message to display when there is no data.
`,
};
EmptyStateWrapperTitle.propName = 'Title';
export default EmptyStateWrapper;