blockstack-ui
Version:
Blockstack UI components built with css-in-js and styled-system.
269 lines (233 loc) • 8.46 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.Modal = exports.OpenModal = exports.ModalConsumer = exports.ModalRoot = void 0;
require("core-js/modules/es6.function.name");
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
require("core-js/modules/es6.function.bind");
require("core-js/modules/es6.object.assign");
var _react = _interopRequireDefault(require("react"));
var _reakit = require("reakit");
var _ = require("../../");
var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
var _reactPowerplug = require("react-powerplug");
var ModalContext = _react.default.createContext();
var CloseButton = function CloseButton(_ref) {
var rest = Object.assign({}, _ref);
return _react.default.createElement(_reactPowerplug.Active, null, function (_ref2) {
var active = _ref2.active,
activeBind = _ref2.bind;
return _react.default.createElement(_reactPowerplug.Hover, null, function (_ref3) {
var hovered = _ref3.hovered,
bind = _ref3.bind;
return _react.default.createElement(_.Flex, (0, _extends2.default)({
cursor: hovered ? 'pointer' : null,
opacity: hovered ? 1 : 0.5,
transform: active ? 'translateY(2px)' : 'none'
}, bind, activeBind, rest), _react.default.createElement(_CloseIcon.default, null));
});
});
};
var Modal = function Modal(_ref4) {
var title = _ref4.title,
children = _ref4.children,
hide = _ref4.hide,
Component = _ref4.component,
Header = _ref4.header,
Wrapper = _ref4.wrapper,
visible = _ref4.visible,
_ref4$p = _ref4.p,
p = _ref4$p === void 0 ? 4 : _ref4$p,
rest = (0, _objectWithoutPropertiesLoose2.default)(_ref4, ["title", "children", "hide", "component", "header", "wrapper", "visible", "p"]);
var ModalComponent = Component ? function (props) {
return _react.default.createElement(Component, (0, _extends2.default)({
hide: hide
}, props));
} : function (props) {
return _react.default.createElement(_.Card, (0, _extends2.default)({
p: 0,
flexGrow: 1,
width: ['90vw', '70vw'],
maxWidth: "calc(100% - 40px)",
maxHeight: '90vh'
}, props));
};
var ModalHeader = Header ? function (props) {
return _react.default.createElement(Header, (0, _extends2.default)({
hide: hide
}, props));
} : function (props) {
return _react.default.createElement(_.Flex, (0, _extends2.default)({
justifyContent: 'space-between',
borderBottom: "1px solid",
borderColor: 'blue.mid',
px: 4,
py: 3,
flexShrink: 0
}, props));
};
var ContentWrapper = Wrapper ? function (props) {
return _react.default.createElement(Wrapper, (0, _extends2.default)({
hide: hide
}, props));
} : function (props) {
return _react.default.createElement(_.Flex, (0, _extends2.default)({
p: p,
flexDirection: "column",
overflow: "auto",
flexGrow: 1
}, props));
};
return _react.default.createElement(ModalComponent, rest, _react.default.createElement(ModalHeader, null, title ? _react.default.createElement(_.Type, {
fontWeight: 500
}, title) : null, _react.default.createElement(CloseButton, {
onClick: hide
})), _react.default.createElement(ContentWrapper, null, children));
};
exports.Modal = Modal;
var ModalRoot =
/*#__PURE__*/
function (_React$Component) {
(0, _inheritsLoose2.default)(ModalRoot, _React$Component);
function ModalRoot() {
var _this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
comp: null,
previous: null,
visible: false,
alert: null
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "timeout", null);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleShow", function (show, comp) {
_this.setState({
comp: comp,
visible: true
});
if (_this.timeout) {
clearTimeout(_this.timeout);
_this.timeout = null;
}
show();
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleHide", function (hide) {
if (_this.props.preventClose) {
return null;
}
if (_this.state.previous) {
_this.setState({
comp: _this.state.previous,
previous: null
});
} else {
_this.setState({
previous: null
});
_this.timeout = setTimeout(function () {
return _this.setState({
visible: false,
comp: null,
previous: null
});
}, 200);
hide();
}
});
return _this;
}
var _proto = ModalRoot.prototype;
_proto.componentWillUnmount = function componentWillUnmount() {
this.setState({
comp: null
});
};
_proto.componentWillUpdate = function componentWillUpdate(nextProps, nextState, nextContext) {
if (nextState.comp && this.state.comp && nextState.comp.name !== this.state.comp.name && !this.state.previous) {
this.setState({
previous: this.state.comp
});
}
};
_proto.render = function render() {
var _this2 = this;
var children = this.props.children;
return _react.default.createElement(_reakit.Overlay.Container, null, function (overlay) {
var props = Object.assign({}, overlay, {
show: function show(comp) {
return _this2.handleShow(overlay.show, comp);
},
hide: function hide() {
return _this2.handleHide(overlay.hide);
}
});
return _react.default.createElement(ModalContext.Provider, {
value: props
}, _react.default.createElement(_react.default.Fragment, null, children, _react.default.createElement(_reakit.Overlay, (0, _extends2.default)({
style: {
transform: 'none',
top: 0,
left: 0,
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
},
fade: true
}, overlay), _react.default.createElement(_.Flex, {
justifyContent: "center",
width: [1, 1, 'auto'],
position: "relative",
zIndex: 999
}, _this2.state.visible && _this2.state.comp({
hide: function hide() {
return _this2.handleHide(overlay.hide);
},
visible: overlay.visible
})), _react.default.createElement(_.Box, {
color: "hsla(225,50%,7%,0.75)"
}, _react.default.createElement(_reakit.Backdrop, (0, _extends2.default)({
style: {
background: 'currentColor'
},
as: _reakit.Overlay.Hide,
fade: true
}, overlay, {
hide: function hide() {
return _this2.handleHide(overlay.hide);
}
}))))));
});
};
return ModalRoot;
}(_react.default.Component);
exports.ModalRoot = ModalRoot;
var ModalConsumer = ModalContext.Consumer;
exports.ModalConsumer = ModalConsumer;
var OpenModal = function OpenModal(props) {
var component = props.component,
children = props.children,
title = props.title,
content = props.content,
rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["component", "children", "title", "content"]);
return _react.default.createElement(ModalConsumer, null, function (_ref5) {
var visible = _ref5.visible,
show = _ref5.show,
hide = _ref5.hide;
return children({
bind: {
onClick: function onClick() {
return show(component);
}
}
});
});
};
exports.OpenModal = OpenModal;