lucid-ui
Version:
A UI component library from Xandr.
91 lines • 3.79 kB
JavaScript
import _ from 'lodash';
import React from 'react';
import PropTypes from 'prop-types';
import { getFirst } 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 nonPassthroughs = [
'className',
'children',
'isEmpty',
'isLoading',
'anchorMessage',
'Body',
'Title',
'initialState',
'callbackId',
];
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, { className: cx('&', className), isLoading: true, ..._.omit(passThroughs, nonPassthroughs), anchorMessage: anchorMessage }, children)) : (React.createElement(OverlayWrapper, { className: cx('&', className), hasOverlay: false, isVisible: isEmpty, anchorMessage: anchorMessage, ..._.omit(passThroughs, nonPassthroughs) },
React.createElement(OverlayWrapperMessage, { className: cx('&-message-container') },
React.createElement("div", { className: cx('&-message-header') }),
React.createElement("div", { className: cx('&-message-contents') },
React.createElement("header", { ...emptyMessageTitleProp, className: cx('&-message-title', emptyMessageTitleProp.className) }),
emptyMessageBodyProp && React.createElement("div", { ...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 = {
/**
Class names that are appended to the defaults.
*/
className: string,
/**
Any valid React children.
*/
children: node,
/**
Controls the visibility of the \`EmptyMessage\`.
*/
isEmpty: bool,
/**
Controls the visibility of the \`LoadingMessage\`.
*/
isLoading: bool,
/**
Position the \`EmptyMessage\` and \`LoadingMessage\` near the top of the container.
*/
anchorMessage: bool,
/**
* Child Element* The element to display in the body of the overlay.
*/
Body: any,
/**
* Child Element* The element to display in the title of the overlay.
*/
Title: any,
};
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;
//# sourceMappingURL=EmptyStateWrapper.js.map