lucid-ui
Version:
A UI component library from Xandr.
106 lines • 4.14 kB
JavaScript
import _, { omit, pick } from 'lodash';
import React from 'react';
import PropTypes from 'prop-types';
import Overlay, { overlayPropTypes } from '../Overlay/Overlay';
import { lucidClassNames } from '../../util/style-helpers';
import { getFirst } from '../../util/component-types';
import Button from '../Button/Button';
import CloseIcon from '../Icon/CloseIcon/CloseIcon';
const cx = lucidClassNames.bind('&-Dialog');
const { node, oneOf, bool, func } = PropTypes;
export var EnumSize;
(function (EnumSize) {
EnumSize["small"] = "small";
EnumSize["medium"] = "medium";
EnumSize["large"] = "large";
})(EnumSize || (EnumSize = {}));
const DialogHeader = (_props) => null;
DialogHeader.displayName = 'Dialog.Header';
DialogHeader.peek = {
description: `Renders a \`<div>\`.`,
};
DialogHeader.propName = 'Header';
const DialogFooter = (_props) => null;
DialogFooter.displayName = 'Dialog.Footer';
DialogFooter.peek = {
description: `Renders a \`<footer>\`.`,
};
DialogFooter.propName = 'Footer';
/** Dialog */
const nonPassThroughs = [
'size',
'isComplex',
'hasGutters',
'handleClose',
'Header',
'Footer',
'initialState',
];
const defaultProps = {
...Overlay.defaultProps,
size: EnumSize.medium,
isComplex: false,
hasGutters: true,
};
export const Dialog = (props) => {
const { className, size, handleClose, hasGutters, isShown, isComplex, ...passThroughs } = props;
const headerChildProp = _.get(getFirst(props, Dialog.Header), 'props', {});
const footerChildProp = _.get(getFirst(props, Dialog.Footer), 'props', null);
return (React.createElement(Overlay, { ...omit(passThroughs, nonPassThroughs), ...pick(passThroughs, overlayPropTypes), isShown: isShown, className: cx('&', className) },
React.createElement("div", { className: cx('&-window', {
'&-window-is-small': size === EnumSize.small,
'&-window-is-medium': size === EnumSize.medium,
'&-window-is-large': size === EnumSize.large,
'&-is-complex': isComplex,
'&-no-footer': !footerChildProp,
}) },
React.createElement("header", { className: cx('&-header') },
headerChildProp.children,
handleClose && (React.createElement(Button, { kind: 'invisible', hasOnlyIcon: true, className: cx('&-close-button'), onClick: handleClose },
React.createElement(CloseIcon, null)))),
React.createElement("section", { className: cx('&-body', hasGutters ? '' : '&-body-no-gutters') }, props.children),
footerChildProp && (React.createElement("footer", { ...footerChildProp, className: cx('&-footer') })))));
};
Dialog.displayName = 'Dialog';
Dialog.defaultProps = defaultProps;
Dialog.peek = {
description: `\`Dialog\` is used to pop open a window so the user doesn't lose the context of the page behind it. Extra props are spread through to the underlying \`Overlay\`.`,
categories: ['layout'],
extend: 'Overlay',
madeFrom: ['Portal', 'Overlay'],
};
Dialog.propTypes = {
...Overlay.propTypes,
/**
Size variations that only affect the width of the dialog. All the sizes
will grow in height until they get too big, at which point they will
scroll inside.
*/
size: oneOf(['small', 'medium', 'large']),
/**
If this is truthy (if a function is provided). the close button will show.
The function that is called when the close button is triggered.
*/
handleClose: func,
/**
Defaults to false.
Provides a more segregated design to organize more content in the Dialog.
*/
isComplex: bool,
/**
A true or false value that dictates whether or not the Body has padding.
*/
hasGutters: bool,
Header: node,
/*
*Child Element* - Header contents. Only one \`Header\` is used.
*/
Footer: node,
/*
*Child Element* - Footer contents. Only one \`Footer\` is used.
*/
};
Dialog.Header = DialogHeader;
Dialog.Footer = DialogFooter;
export default Dialog;
//# sourceMappingURL=Dialog.js.map