graft-react
Version:
react admin and helper components for graft-db
145 lines (144 loc) • 6.01 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var __assign = (this && this.__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;
};
var React = require("react");
var Router_1 = require("./Router");
var PreviewHistoryManager_1 = require("../PreviewHistoryManager");
var WithClient_1 = require("./WithClient");
var Frame = require("react-frame-component");
var MAIN_WIDTH = 480;
var DummyWebapp = (function (_super) {
__extends(DummyWebapp, _super);
function DummyWebapp() {
return _super !== null && _super.apply(this, arguments) || this;
}
DummyWebapp.prototype.render = function () {
var url = this.props.url;
return React.createElement("div", null,
"No Preview Available ",
url);
};
return DummyWebapp;
}(React.Component));
var PreviewFrame = (function (_super) {
__extends(PreviewFrame, _super);
function PreviewFrame() {
return _super !== null && _super.apply(this, arguments) || this;
}
PreviewFrame.prototype.shouldComponentUpdate = function (nextProps) {
if (nextProps.workKey !== this.props.workKey) {
return true;
}
if (!nextProps.url) {
return false;
}
if (nextProps.url === this.props.url) {
return false;
}
return true;
};
PreviewFrame.prototype.render = function () {
console.log('preview rendering');
var Component = this.props.Component;
return (React.createElement(Frame, { initialContent: this.props.initialContent, style: this.props.style },
React.createElement(Component, { url: this.props.url || '', history: this.props.history })));
};
return PreviewFrame;
}(React.PureComponent));
var Preview = (function (_super) {
__extends(Preview, _super);
function Preview() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.togglePreview = function () {
var navigator = _this.context.navigator;
var preview = navigator.data().preview;
navigator.update({ preview: !preview });
};
return _this;
}
Preview.prototype.previewIsVisible = function () {
var navigator = this.context.navigator;
var preview = navigator.data().preview;
return !!preview;
};
Preview.prototype.styles = function () {
var containerStyle = this.props.style || {};
var styles = {
container: __assign({ display: 'flex', position: 'absolute', top: 0, bottom: 0, right: 0, left: 0, transition: 'all 0.3s cubic-bezier(.25,.8,.25,1)' }, containerStyle),
main: {
position: 'relative',
backgroundColor: '#fff',
flex: "0 0 " + MAIN_WIDTH + "px",
zIndex: 2,
borderRight: '1px #ccc',
borderTopRightRadius: 2,
borderBottomRightRadius: 2,
transition: 'all 0.3s cubic-bezier(.25,.8,.25,1)',
boxShadow: '0 0 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)',
},
preview: {
position: 'relative',
backgroundColor: '#fff',
flex: '1',
zIndex: 1,
transition: 'all 0.3s cubic-bezier(.25,.8,.25,1)',
},
clip: {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
overflow: 'hidden',
}
};
if (!this.previewIsVisible()) {
styles.preview = __assign({}, styles.preview, { display: 'none' });
styles.main = __assign({}, styles.main, { flex: 1 });
}
return styles;
};
Preview.prototype.getHistoryManager = function () {
if (!this.historyManager) {
var navigator_1 = this.context.navigator;
this.historyManager = new PreviewHistoryManager_1.PreviewHistoryManager(navigator_1);
}
return this.historyManager;
};
Preview.prototype.render = function () {
var _a = this.context, previewComponent = _a.previewComponent, client = _a.client;
var App = previewComponent || DummyWebapp;
var _b = this.props, url = _b.url, children = _b.children;
var styles = this.styles();
var frame;
var frameProps = {};
if (this.previewIsVisible()) {
frameProps = {
style: { width: '100%', height: '100%', border: 0 },
};
if (previewComponent.styles) {
frameProps.initialContent = "<!DOCTYPE html><html>\n\t\t\t\t\t<head><style>" + previewComponent.styles + "</style></head>\n\t\t\t\t\t<body><div id=\"mnt\"></div></body>\n\t\t\t\t</html>";
frameProps.mountTarget = '#mnt';
}
var key = (client && client.work) ? client.work.key() : '';
frame = React.createElement(PreviewFrame, __assign({}, frameProps, { url: url || '', workKey: key || '', history: this.getHistoryManager(), Component: App }));
}
return React.createElement("div", { style: styles.container },
React.createElement("div", { style: styles.main }, children),
React.createElement("div", { style: styles.preview }, frame));
};
return Preview;
}(React.Component));
Preview.contextTypes = __assign({}, Router_1.navigatorContextTypes, WithClient_1.clientContextTypes, { previewComponent: React.PropTypes.func.isRequired });
exports.Preview = Preview;