lucid-ui
Version:
A UI component library from Xandr.
143 lines • 6.84 kB
JavaScript
;
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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
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 = exports.EnumSize = void 0;
var lodash_1 = __importStar(require("lodash"));
var react_1 = __importDefault(require("react"));
var prop_types_1 = __importDefault(require("prop-types"));
var Overlay_1 = __importStar(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 = exports.EnumSize || (exports.EnumSize = {}));
var DialogHeader = function (_props) { return null; };
DialogHeader.displayName = 'Dialog.Header';
DialogHeader.peek = {
description: "Renders a `<div>`.",
};
DialogHeader.propName = 'Header';
var DialogFooter = function (_props) { return null; };
DialogFooter.displayName = 'Dialog.Footer';
DialogFooter.peek = {
description: "Renders a `<footer>`.",
};
DialogFooter.propName = 'Footer';
/** Dialog */
var nonPassThroughs = [
'size',
'isComplex',
'hasGutters',
'handleClose',
'Header',
'Footer',
'initialState',
];
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((0, component_types_1.getFirst)(props, exports.Dialog.Header), 'props', {});
var footerChildProp = lodash_1.default.get((0, component_types_1.getFirst)(props, exports.Dialog.Footer), 'props', null);
return (react_1.default.createElement(Overlay_1.default, __assign({}, (0, lodash_1.omit)(passThroughs, nonPassThroughs), (0, lodash_1.pick)(passThroughs, Overlay_1.overlayPropTypes), { 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: "`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'],
};
exports.Dialog.propTypes = __assign(__assign({}, Overlay_1.default.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 });
exports.Dialog.Header = DialogHeader;
exports.Dialog.Footer = DialogFooter;
exports.default = exports.Dialog;
//# sourceMappingURL=Dialog.js.map