@kiwicom/orbit-components
Version:
<div align="center"> <a href="https://orbit.kiwi" target="_blank"> <img alt="orbit-components" src="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components.png" srcset="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components@2x.png 2x"
388 lines (329 loc) • 15.2 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _templateObject = _taggedTemplateLiteral(["\n overflow-y: auto;\n "], ["\n overflow-y: auto;\n "]),
_templateObject2 = _taggedTemplateLiteral(["\n padding: ", ";\n position: relative;\n top: 0;\n max-width: ", ";\n align-items: center;\n "], ["\n padding: ", ";\n position: relative;\n top: 0;\n max-width: ", ";\n align-items: center;\n "]),
_templateObject3 = _taggedTemplateLiteral(["\n position: relative;\n border-radius: ", ";\n padding-bottom: 0;\n ", ":last-of-type {\n padding-bottom: ", ";\n margin-bottom: 0;\n &::after {\n content: none;\n }\n }\n ", " {\n position: relative;\n box-shadow: none;\n padding: ", ";\n }\n ", " {\n position: absolute;\n top: 0;\n }\n "], ["\n position: relative;\n border-radius: ", ";\n padding-bottom: 0;\n ", ":last-of-type {\n padding-bottom: ", ";\n margin-bottom: 0;\n &::after {\n content: none;\n }\n }\n ", " {\n position: relative;\n box-shadow: none;\n padding: ", ";\n }\n ", " {\n position: absolute;\n top: 0;\n }\n "]);
var _react = require("react");
var React = _interopRequireWildcard(_react);
var _styledComponents = require("styled-components");
var _styledComponents2 = _interopRequireDefault(_styledComponents);
var _defaultTokens = require("../defaultTokens");
var _defaultTokens2 = _interopRequireDefault(_defaultTokens);
var _ButtonLink = require("../ButtonLink");
var _ButtonLink2 = _interopRequireDefault(_ButtonLink);
var _Close = require("../icons/Close");
var _Close2 = _interopRequireDefault(_Close);
var _consts = require("./consts");
var _consts2 = _interopRequireDefault(_consts);
var _media = require("../utils/media");
var _media2 = _interopRequireDefault(_media);
var _ModalFooter = require("./ModalFooter");
var _ModalHeader = require("./ModalHeader");
var _ClickOutside = require("../ClickOutside");
var _ClickOutside2 = _interopRequireDefault(_ClickOutside);
var _ModalSection = require("./ModalSection");
var _Heading = require("../Heading");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var getToken = function getToken(theme, type, name) {
var _modalWidth;
var tokens = {
// TODO: create tokens widthModalSmall,...
modalWidth: (_modalWidth = {}, _defineProperty(_modalWidth, _consts2.default.SMALL, "540px"), _defineProperty(_modalWidth, _consts2.default.NORMAL, "740px"), _defineProperty(_modalWidth, _consts2.default.LARGE, "1280px"), _modalWidth)
};
return tokens[name][type];
};
var ModalBody = _styledComponents2.default.div.withConfig({
displayName: "Modal__ModalBody"
})(["width:100%;height:100%;position:fixed;top:0;right:0;bottom:0;left:0;z-index:", ";box-sizing:border-box;outline:none;overflow-x:hidden;background-color:rgba(0,0,0,0.5);font-family:", ";", ";"], function (_ref) {
var theme = _ref.theme;
return theme.orbit.zIndexModalOverlay;
}, function (_ref2) {
var theme = _ref2.theme;
return theme.orbit.fontfamily;
}, _media2.default.desktop(_templateObject));
ModalBody.defaultProps = {
theme: _defaultTokens2.default
};
var ModalWrapper = _styledComponents2.default.div.withConfig({
displayName: "Modal__ModalWrapper"
})(["box-sizing:border-box;min-height:100%;display:flex;align-items:flex-start;margin:0 auto;position:fixed;width:100%;border-top-left-radius:", ";border-top-right-radius:", ";transition:top ", " ease-in-out;top:", ";", ";"], function (_ref3) {
var theme = _ref3.theme;
return theme.orbit.borderRadiusNormal;
}, function (_ref4) {
var theme = _ref4.theme;
return theme.orbit.borderRadiusNormal;
}, function (_ref5) {
var theme = _ref5.theme;
return theme.orbit.durationNormal;
}, function (_ref6) {
var loaded = _ref6.loaded;
return loaded ? "32px" : "100%";
}, _media2.default.desktop(_templateObject2, function (_ref7) {
var theme = _ref7.theme;
return theme.orbit.spaceXXLarge;
}, function (_ref8) {
var theme = _ref8.theme,
size = _ref8.size;
return getToken(theme, size, "modalWidth");
}));
ModalWrapper.defaultProps = {
theme: _defaultTokens2.default
};
var CloseContainer = _styledComponents2.default.div.withConfig({
displayName: "Modal__CloseContainer"
})(["display:flex;position:fixed;top:32px;right:0;z-index:1;justify-content:flex-end;align-items:center;box-sizing:border-box;height:52px;width:100%;transition:all ", " ease-in-out;border-top-left-radius:", ";border-top-right-radius:", ";opacity:1;& + ", ":first-of-type{padding-top:52px;border-top:0;margin:0;}", "{margin-right:4px;& svg{transition:color ", " ease-in-out;color:", ";}&:hover svg{color:", ";}&:active svg{color:", ";}}"], function (_ref9) {
var theme = _ref9.theme;
return theme.orbit.durationNormal;
}, function (_ref10) {
var theme = _ref10.theme;
return theme.orbit.borderRadiusNormal;
}, function (_ref11) {
var theme = _ref11.theme;
return theme.orbit.borderRadiusNormal;
}, _ModalSection.StyledModalSection, _ButtonLink.StyledButtonLink, function (_ref12) {
var theme = _ref12.theme;
return theme.orbit.durationFast;
}, function (_ref13) {
var theme = _ref13.theme;
return theme.orbit.paletteInkLight;
}, function (_ref14) {
var theme = _ref14.theme;
return theme.orbit.paletteInkLightHover;
}, function (_ref15) {
var theme = _ref15.theme;
return theme.orbit.paletteInkLightActive;
});
CloseContainer.defaultProps = {
theme: _defaultTokens2.default
};
var ModalWrapperContent = _styledComponents2.default.div.withConfig({
displayName: "Modal__ModalWrapperContent"
})(["position:absolute;box-sizing:border-box;border-top-left-radius:", ";border-top-right-radius:", ";background-color:", ";font-family:", ";width:100%;height:calc( 100% - ", " - ", " );box-shadow:", ";overflow-y:auto;overflow-x:hidden;", ":last-of-type{padding-bottom:", ";margin-bottom:", ";}", "{padding:", ";box-shadow:", ";position:", ";}", "{top:", ";opacity:", ";}", "{top:", ";position:", ";box-shadow:", ";background-color:", ";opacity:", ";}", ";"], function (_ref16) {
var theme = _ref16.theme;
return theme.orbit.borderRadiusNormal;
}, function (_ref17) {
var theme = _ref17.theme;
return theme.orbit.borderRadiusNormal;
}, function (_ref18) {
var theme = _ref18.theme;
return theme.orbit.backgroundModal;
}, function (_ref19) {
var theme = _ref19.theme;
return theme.orbit.fontFamily;
}, function (_ref20) {
var theme = _ref20.theme;
return theme.orbit.spaceXLarge;
}, function (_ref21) {
var fixedFooter = _ref21.fixedFooter;
return fixedFooter ? "76px" : "0px";
}, function (_ref22) {
var theme = _ref22.theme;
return theme.orbit.boxShadowModal;
}, _ModalSection.StyledModalSection, function (_ref23) {
var theme = _ref23.theme,
fixedFooter = _ref23.fixedFooter;
return fixedFooter && theme.orbit.spaceLarge;
}, function (_ref24) {
var fixedFooter = _ref24.fixedFooter;
return fixedFooter && "0";
}, _ModalFooter.StyledModalFooter, function (_ref25) {
var theme = _ref25.theme,
fixedFooter = _ref25.fixedFooter;
return fixedFooter && theme.orbit.spaceMedium;
}, function (_ref26) {
var fixedFooter = _ref26.fixedFooter;
return fixedFooter && "0 -2px 4px 0 rgba(23, 27, 30, 0.1)";
}, function (_ref27) {
var fixedFooter = _ref27.fixedFooter;
return fixedFooter && "fixed";
}, _ModalHeader.MobileHeader, function (_ref28) {
var scrolled = _ref28.scrolled,
theme = _ref28.theme;
return scrolled && theme.orbit.spaceXLarge;
}, function (_ref29) {
var scrolled = _ref29.scrolled;
return scrolled && "1";
}, CloseContainer, function (_ref30) {
var scrolled = _ref30.scrolled;
return scrolled && "32px";
}, function (_ref31) {
var scrolled = _ref31.scrolled;
return scrolled && "fixed";
}, function (_ref32) {
var scrolled = _ref32.scrolled;
return scrolled && "0 2px 4px 0 rgba(23, 27, 30, 0.1)";
}, function (_ref33) {
var theme = _ref33.theme,
scrolled = _ref33.scrolled;
return scrolled && theme.orbit.paletteWhite;
}, function (_ref34) {
var scrolled = _ref34.scrolled;
return scrolled && "1";
}, _media2.default.desktop(_templateObject3, function (_ref35) {
var theme = _ref35.theme;
return theme.orbit.borderRadiusNormal;
}, _ModalSection.StyledModalSection, function (_ref36) {
var theme = _ref36.theme;
return theme.orbit.spaceXXLarge;
}, _ModalFooter.StyledModalFooter, function (_ref37) {
var theme = _ref37.theme;
return "0 " + theme.orbit.spaceXXLarge + " " + theme.orbit.spaceXXLarge;
}, CloseContainer));
ModalWrapperContent.defaultProps = {
theme: _defaultTokens2.default
};
var CloseElement = function CloseElement(_ref38) {
var onClose = _ref38.onClose;
return React.createElement(
CloseContainer,
null,
React.createElement(_ButtonLink2.default, { onClick: onClose, size: "normal", icon: React.createElement(_Close2.default, null), transparent: true })
);
};
var Content = function Content(_ref39) {
var closable = _ref39.closable,
onClose = _ref39.onClose,
size = _ref39.size,
children = _ref39.children,
scrolled = _ref39.scrolled,
fixedFooter = _ref39.fixedFooter;
return closable ? React.createElement(
_ClickOutside2.default,
{ onClickOutside: onClose },
React.createElement(
ModalWrapperContent,
{ size: size, fixedFooter: fixedFooter, scrolled: scrolled },
React.createElement(CloseElement, { onClose: onClose }),
children
)
) : React.createElement(
ModalWrapperContent,
{ size: size, fixedFooter: fixedFooter, scrolled: scrolled },
children
);
};
var Modal = function (_React$PureComponent) {
_inherits(Modal, _React$PureComponent);
function Modal() {
_classCallCheck(this, Modal);
// $FlowExpected
var _this = _possibleConstructorReturn(this, (Modal.__proto__ || Object.getPrototypeOf(Modal)).call(this));
_this.state = {
scrolled: false,
loaded: false
};
_this.handleKeyDown = function (ev) {
var onClose = _this.props.onClose;
if (ev.key === "Escape" && onClose) {
onClose(ev);
}
};
_this.offset = 40;
_this.handleScroll = _this.handleScroll.bind(_this);
return _this;
}
_createClass(Modal, [{
key: "componentDidMount",
value: function componentDidMount() {
var _this2 = this;
// eslint-disable-next-line
setTimeout(function () {
return _this2.setState({
loaded: true
});
}, 150);
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate() {
if (!this.state.scrolled) {
this.setScrollPoint();
}
}
}, {
key: "setScrollPoint",
value: function setScrollPoint() {
var _this3 = this;
setTimeout(function () {
if (!_this3.state.scrolled) {
var node = _this3.node;
if (node instanceof HTMLElement) {
var el = node.querySelector("." + React.createElement(_Heading.StyledHeading, null).type.styledComponentId);
if (el) {
_this3.offset = el.clientHeight + el.offsetTop;
}
}
}
}, 550);
}
}, {
key: "handleScroll",
value: function handleScroll(ev) {
if (ev.target instanceof HTMLDivElement) {
this.setState({
scrolled: ev.target.scrollTop >= this.offset
});
}
}
}, {
key: "render",
value: function render() {
var _this4 = this;
var _props = this.props,
onClose = _props.onClose,
children = _props.children,
_props$size = _props.size,
size = _props$size === undefined ? _consts2.default.NORMAL : _props$size,
_props$closable = _props.closable,
closable = _props$closable === undefined ? true : _props$closable,
_props$fixedFooter = _props.fixedFooter,
fixedFooter = _props$fixedFooter === undefined ? false : _props$fixedFooter,
dataTest = _props.dataTest;
var _state = this.state,
scrolled = _state.scrolled,
loaded = _state.loaded;
return React.createElement(
ModalBody,
{
tabIndex: "0",
onKeyDown: closable ? this.handleKeyDown : undefined,
"data-test": dataTest
},
React.createElement(
ModalWrapper,
{
size: size,
loaded: loaded,
onScroll: this.handleScroll,
innerRef: function innerRef(node) {
_this4.node = node;
},
fixedFooter: fixedFooter
},
React.createElement(
Content,
{
closable: closable,
onClose: onClose,
size: size,
scrolled: scrolled,
fixedFooter: fixedFooter
},
children
)
)
);
}
}]);
return Modal;
}(React.PureComponent);
exports.default = Modal;