lucid-ui
Version:
A UI component library from AppNexus.
93 lines (92 loc) • 3.28 kB
JavaScript
/* eslint-disable react/prop-types */
import _ from 'lodash';
import React from 'react';
import PropTypes from 'react-peek/prop-types';
import { lucidClassNames } from '../../util/style-helpers';
import { getFirst, omitProps } from '../../util/component-types';
import LoadingIcon from '../Icon/LoadingIcon/LoadingIcon';
const cx = lucidClassNames.bind('&-LoadingMessage');
const { any, node, string } = PropTypes;
const LoadingMessageIcon = (_props) => null;
LoadingMessageIcon.displayName = 'LoadingMessage.Icon';
LoadingMessageIcon.peek = {
description: `
Renders the \`Icon\` element passed in
`,
};
LoadingMessageIcon.propName = 'Icon';
LoadingMessageIcon.propTypes = {
description: string,
children: any,
};
const LoadingMessageTitle = (_props) => null;
LoadingMessageTitle.displayName = 'LoadingMessage.Title';
LoadingMessageTitle.peek = {
description: `
Renders an \`<h3>\` that represents the title of the
\`LoadingMessage\`. Defaults to the string "Loading".
`,
};
LoadingMessageTitle.propName = 'Title';
LoadingMessageTitle.propTypes = {
description: string,
children: any,
};
const LoadingMessageBody = (_props) => null;
LoadingMessageBody.displayName = 'LoadingMessage.Body';
LoadingMessageBody.peek = {
description: `
Renders an \`<span>\` that represents the body of the
\`LoadingMessage\`.
`,
};
LoadingMessageBody.propName = 'Body';
LoadingMessageBody.propTypes = {
description: string,
children: any,
};
export const LoadingMessage = (props) => {
const { className, ...passThroughs } = props;
const { Icon, Title, Body } = LoadingMessage;
const defaultTitle = 'Loading';
const iconElement = getFirst(props, Icon);
const iconChildren = _.get(iconElement, 'props.children', React.createElement(LoadingIcon, null));
const titleElement = getFirst(props, Title);
const titleChildren = _.get(titleElement, 'props.children');
const bodyElement = getFirst(props, Body);
const bodyChildren = _.get(bodyElement, 'props.children', null);
return (React.createElement("div", Object.assign({}, omitProps(passThroughs, undefined, _.keys(LoadingMessage.propTypes)), { className: cx('&', { '&-no-content': _.isNull(titleChildren) && !bodyChildren }, className) }),
iconChildren,
!_.isNull(titleChildren) && (React.createElement("h3", { className: cx('&-title') }, titleChildren || defaultTitle)),
bodyChildren && React.createElement("span", { className: cx('&-body') }, bodyChildren)));
};
LoadingMessage.Icon = LoadingMessageIcon;
LoadingMessage.Title = LoadingMessageTitle;
LoadingMessage.Body = LoadingMessageBody;
LoadingMessage._isPrivate = true;
LoadingMessage.displayName = 'LoadingMessage';
LoadingMessage.peek = {
description: `
A loading message.
`,
categories: ['communication'],
madeFrom: ['LoadingIcon'],
};
LoadingMessage.propTypes = {
className: string `
Class names that are appended to the defaults.
`,
children: node `
Any valid React children.
`,
Icon: node `
Custom Icon element (alias for \`LoadingMessage.Icon\`)
`,
Title: node `
Custom Title element (alias for \`LoadingMessage.Title\`)
`,
Body: node `
Custom Body element (alias for \`LoadingMessage.Body\`)
`,
};
export default LoadingMessage;