lucid-ui
Version:
A UI component library from AppNexus.
95 lines • 7.34 kB
JavaScript
"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Dialog = void 0;
var lodash_1 = __importDefault(require("lodash"));
var react_1 = __importDefault(require("react"));
var prop_types_1 = __importDefault(require("react-peek/prop-types"));
var Overlay_1 = __importDefault(require("../Overlay/Overlay"));
var style_helpers_1 = require("../../util/style-helpers");
var component_types_1 = require("../../util/component-types");
var Button_1 = __importDefault(require("../Button/Button"));
var CloseIcon_1 = __importDefault(require("../Icon/CloseIcon/CloseIcon"));
var cx = style_helpers_1.lucidClassNames.bind('&-Dialog');
var node = prop_types_1.default.node, oneOf = prop_types_1.default.oneOf, bool = prop_types_1.default.bool, func = prop_types_1.default.func;
var EnumSize;
(function (EnumSize) {
EnumSize["small"] = "small";
EnumSize["medium"] = "medium";
EnumSize["large"] = "large";
})(EnumSize || (EnumSize = {}));
var DialogHeader = function (_props) { return null; };
DialogHeader.displayName = 'Dialog.Header';
DialogHeader.peek = {
description: "\n\t\tRenders a `<div>`.\n\t",
};
DialogHeader.propName = 'Header';
var DialogFooter = function (_props) { return null; };
DialogFooter.displayName = 'Dialog.Footer';
DialogFooter.peek = {
description: "\n\t\tRenders a `<footer>`.\n\t",
};
DialogFooter.propName = 'Footer';
var defaultProps = __assign(__assign({}, Overlay_1.default.defaultProps), { size: EnumSize.medium, isComplex: false, hasGutters: true });
var Dialog = function (props) {
var className = props.className, size = props.size, handleClose = props.handleClose, hasGutters = props.hasGutters, isShown = props.isShown, isComplex = props.isComplex, passThroughs = __rest(props, ["className", "size", "handleClose", "hasGutters", "isShown", "isComplex"]);
var headerChildProp = lodash_1.default.get(component_types_1.getFirst(props, exports.Dialog.Header), 'props', {});
var footerChildProp = lodash_1.default.get(component_types_1.getFirst(props, exports.Dialog.Footer), 'props', null);
return (react_1.default.createElement(Overlay_1.default, __assign({}, component_types_1.omitProps(passThroughs, undefined, lodash_1.default.keys(exports.Dialog.propTypes), false), lodash_1.default.pick(passThroughs, lodash_1.default.keys(Overlay_1.default.propTypes)), { isShown: isShown, className: cx('&', className) }),
react_1.default.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_1.default.createElement("header", { className: cx('&-header') },
headerChildProp.children,
handleClose && (react_1.default.createElement(Button_1.default, { kind: 'invisible', hasOnlyIcon: true, className: cx('&-close-button'), onClick: handleClose },
react_1.default.createElement(CloseIcon_1.default, null)))),
react_1.default.createElement("section", { className: cx('&-body', hasGutters ? '' : '&-body-no-gutters') }, props.children),
footerChildProp && (react_1.default.createElement("footer", __assign({}, footerChildProp, { className: cx('&-footer') }))))));
};
exports.Dialog = Dialog;
exports.Dialog.displayName = 'Dialog';
exports.Dialog.defaultProps = defaultProps;
exports.Dialog.peek = {
description: "\n\t\tDialog is used to pop open a window so the user doesn't lose the\n\t\tcontext of the page behind it. Extra props are spread through to the\n\t\tunderlying `Overlay`\n\t",
categories: ['layout'],
extend: 'Overlay',
madeFrom: ['Portal', 'Overlay'],
};
exports.Dialog.propTypes = __assign(__assign({}, Overlay_1.default.propTypes), { size: oneOf(['small', 'medium', 'large'])(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t\tSize variations that only affect the width of the dialog. All the sizes\n\t\twill grow in height until they get too big, at which point they will\n\t\tscroll inside.\n\t"], ["\n\t\tSize variations that only affect the width of the dialog. All the sizes\n\t\twill grow in height until they get too big, at which point they will\n\t\tscroll inside.\n\t"]))), handleClose: func(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t\tIf this is truthy (if a function is provided). the close button will show.\n\t\tThe function that is called when the close button is triggered.\n\t"], ["\n\t\tIf this is truthy (if a function is provided). the close button will show.\n\t\tThe function that is called when the close button is triggered.\n\t"]))), isComplex: bool(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\t\tDefaults to false.\n\t\tProvides a more segregated design to organize more content in the Dialog.\n\t"], ["\n\t\tDefaults to false.\n\t\tProvides a more segregated design to organize more content in the Dialog.\n\t"]))), hasGutters: bool(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\t\tA true or false value that dictates whether or not the Body has padding.\n\t"], ["\n\t\tA true or false value that dictates whether or not the Body has padding.\n\t"]))), Header: node(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\t\t*Child Element* - Header contents. Only one `Header` is used.\n\t"], ["\n\t\t*Child Element* - Header contents. Only one \\`Header\\` is used.\n\t"]))), Footer: node(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\t\t*Child Element* - Footer contents. Only one `Footer` is used.\n\t"], ["\n\t\t*Child Element* - Footer contents. Only one \\`Footer\\` is used.\n\t"]))) });
exports.Dialog.Header = DialogHeader;
exports.Dialog.Footer = DialogFooter;
exports.default = exports.Dialog;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
//# sourceMappingURL=Dialog.js.map