@up-group/react-controls
Version:
We know that there are a ton of react UI library projects to choose from. Our hope with this one is to provide the next generation of react components that you can use to bootstrap your next project, or as a reference for building a UIKit. Read on to get
267 lines • 10 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var classnames = require("classnames");
var typestyle_1 = require("typestyle");
var CloseHover = {
color: "#000",
textDecoration: "none",
cursor: "pointer",
filter: "alpha(opacity=50)",
opacity: 0.5
};
function ModalStyle(width) {
return typestyle_1.style({
$nest: {
"& .up-modal": {
position: "fixed",
top: 0,
right: 0,
bottom: 0,
left: 0,
zIndex: 1050,
overflowY: "auto",
outline: 0,
opacity: 0
},
"& .up-modal-open": {
overflow: "hidden"
},
"& .up-modal.fade": {
visibility: "hidden",
transition: ".5s ease-in-out",
"-webkit-transition": ".5s ease-in-out",
"-moz-transition": ".5s ease-in-out",
"-o-transition": ".5s ease-in-out",
opacity: 0
},
"& .up-modal.in": {
visibility: "visible",
transition: ".5s ease-in-out",
"-webkit-transition": ".5s ease-in-out",
"-moz-transition": ".5s ease-in-out",
"-o-transition": ".5s ease-in-out",
opacity: 1
},
"& .up-modal.fade .up-modal-dialog": {
transition: "transform .5s ease-out",
transform: "translate(0, -25%)"
},
"& .up-modal.in .up-modal-dialog": {
transition: "transform .5s ease-out",
transform: "translate(0, 0)"
},
"& .up-modal-open .modal": {
overflowX: "hidden",
overflowY: "auto"
},
"& .up-modal-dialog ": {
position: "relative",
width: width ? width : "auto",
margin: "10px"
},
"& .up-modal-content": {
position: "relative",
backgroundColor: "#fff",
backgroundClip: "padding-box",
border: "1px solid #999",
borderRadius: "6px",
outline: 0,
boxShadow: "0 3px 9px rgba(0, 0, 0, .5)"
},
"& .up-modal-backdrop": {
position: "fixed",
top: 0,
right: 0,
bottom: 0,
left: 0,
zIndex: 1040,
backgroundColor: "#000"
},
"& .up-modal-backdrop.fade": {
filter: "alpha(opacity=0)",
opacity: 0
},
"& .up-modal-backdrop.in": {
filter: "alpha(opacity=50)",
opacity: 0.5
},
"& .up-modal-header": {
padding: "15px",
borderBottom: "1px solid #e5e5e5",
position: "relative"
},
"& .up-modal-header .close": {
marginTop: "-2px"
},
"& .up-modal-title": {
margin: 0,
lineHeight: 1.42857143
},
"& .up-modal-body": {
position: "relative",
padding: "16px",
width: "100%",
height: "100%"
},
"& .up-modal-footer": {
padding: "15px",
textAlign: "right",
borderTop: "1px solid #e5e5e5"
},
"& .up-modal-footer .btn + .btn": {
marginBottom: 0,
marginLeft: "5px"
},
"& .up-modal-footer .btn-group .btn + .btn": {
marginLeft: "-1px"
},
".up-modal-footer .btn-block + .btn-block": {
marginLeft: 0
},
" & .up-modal-close": {
position: "absolute",
top: "8px",
left: "96%",
fontSize: "21px",
fontWeight: "bold",
lineHeight: 1,
color: "#000",
textShadow: "0 1px 0 #fff",
filter: "alpha(opacity=20)",
opacity: 0.2
},
"& .up-modal-close:hover": CloseHover,
"& .up-modal-close:focus": CloseHover,
"& .up-modal-scrollbar-measure": {
position: "absolute",
top: "-9999px",
width: "50px",
height: "50px",
overflow: "scroll"
},
"& .up-modal-header:before": {
display: "table",
content: " "
},
"& .up-modal-footer:before": {
display: "table",
content: " "
},
"& .up-modal-header:after": {
display: "table",
content: " ",
clear: "both"
},
"& .up-modal-footer:after": {
display: "table",
content: " ",
clear: "both"
},
"& .up-modal-disabler": {
position: "fixed",
top: 0,
left: 0,
background: "#0d0e0e",
opacity: 0.7,
width: "10000px",
height: "10000px",
zIndex: 1039,
overflow: "hidden"
}
}
}, typestyle_1.media({ minWidth: 768 }, {
$nest: {
"& .up-modal-dialog": {
width: width ? width : "auto",
minWidth: "300px",
maxWidth: "70%",
margin: "30px auto",
},
"& .up-modal-content": {
boxShadow: "0 5px 15px rgba(0, 0, 0, .5)",
},
"& .up-modal-sm": {
width: "300px",
},
},
}), typestyle_1.media({ minWidth: 992 }, {
$nest: {
"& .up-modal-lg": {
width: "auto",
minWidth: "900px",
maxWidth: "80%",
},
},
}));
}
var UpModal = (function (_super) {
__extends(UpModal, _super);
function UpModal(p, c) {
var _this = _super.call(this, p, c) || this;
_this.closeModal = function () {
_this.setState({ showModal: false });
if (_this.props.onClose) {
_this.props.onClose();
}
};
_this.onDisabler = function (event) {
event.stopPropagation();
event.preventDefault();
};
_this.setHtml = function (iframe) {
if (iframe) {
iframe.contentDocument.write(_this.props.html);
}
};
_this.state = { showModal: _this.props.showModal };
return _this;
}
UpModal.prototype.componentWillReceiveProps = function (nextProps) {
this.setState({ showModal: nextProps.showModal });
};
UpModal.prototype.render = function () {
var header = null;
if (typeof (this.props.header) === "string") {
header = React.createElement("div", { className: "up-modal-header" },
React.createElement("h4", { className: "up-modal-title" }, this.props.header),
React.createElement("span", { onClick: this.closeModal, className: "up-modal-close" }, "X"));
}
else {
header = React.createElement("div", { className: "up-modal-header" },
this.props.header,
React.createElement("span", { onClick: this.closeModal, className: "up-modal-close" }, "X"));
}
var footer = null;
if (this.props.footer) {
footer = React.createElement("div", { className: "up-modal-footer" }, this.props.footer);
}
return (React.createElement("div", { className: ModalStyle(this.props.width) },
React.createElement("div", { className: classnames("up-modal", (this.state.showModal === true) ? "in" : "fade"), id: "myModal", role: "dialog", "aria-labelledby": "myModalLabel" },
React.createElement("div", { className: "up-modal-dialog", role: "document" },
React.createElement("div", { className: "up-modal-content" },
header,
React.createElement("div", { className: "up-modal-body" },
this.props.children,
this.props.html != null &&
React.createElement("iframe", { ref: this.setHtml, style: { width: "100%", minHeight: "800px", minWidth: "600px", border: "0px" } })),
footer))),
React.createElement("div", { style: { display: (this.state.showModal === true) ? "block" : "none" }, className: "up-modal-disabler", onClick: this.onDisabler })));
};
UpModal.defaultProps = {
showModal: true
};
return UpModal;
}(React.Component));
exports.default = UpModal;
//# sourceMappingURL=UpModal.js.map