lucid-ui
Version:
A UI component library from AppNexus.
98 lines (97 loc) • 3.9 kB
JavaScript
import _ from 'lodash';
import React from 'react';
import PropTypes from 'react-peek/prop-types';
import Overlay from '../Overlay/Overlay';
import { lucidClassNames } from '../../util/style-helpers';
import { getFirst, omitProps } 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;
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';
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, Object.assign({}, omitProps(passThroughs, undefined, _.keys(Dialog.propTypes), false), _.pick(passThroughs, _.keys(Overlay.propTypes)), { 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", Object.assign({}, 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: oneOf(['small', 'medium', 'large']) `
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.
`,
handleClose: func `
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.
`,
isComplex: bool `
Defaults to false.
Provides a more segregated design to organize more content in the Dialog.
`,
hasGutters: bool `
A true or false value that dictates whether or not the Body has padding.
`,
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;