lucid-ui
Version:
A UI component library from Xandr.
96 lines • 3.48 kB
JavaScript
/* eslint-disable react/prop-types */
import _, { omit } from 'lodash';
import React from 'react';
import PropTypes from 'prop-types';
import { lucidClassNames } from '../../util/style-helpers';
import { getFirst } 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 a \`<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", { ...omit(passThroughs, [
'className',
'children',
'Icon',
'Title',
'Body',
'initialState',
'callbackId',
]), 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 = {
/**
Class names that are appended to the defaults.
*/
className: string,
/**
Any valid React children.
*/
children: node,
/**
Custom Icon element (alias for \`LoadingMessage.Icon\`)
*/
Icon: node,
/**
Custom Title element (alias for \`LoadingMessage.Title\`)
*/
Title: node,
/**
Custom Body element (alias for \`LoadingMessage.Body\`)
*/
Body: node,
};
export default LoadingMessage;
//# sourceMappingURL=LoadingMessage.js.map