pipe-storyboard
Version:
Set of components to create storyboards from pipe queries
199 lines (198 loc) • 7.86 kB
JavaScript
(function(){
var clipboard, isEqualToObject, pipeWebClient, prefixer, ref$, all, filter, id, map, Obj, objToPairs, pairsToObj, reject, querystring, ref1$, a, div, createClass, createFactory, findDOMNode, DefaultLinks;
clipboard = require('clipboard');
isEqualToObject = require('prelude-extension').isEqualToObject;
pipeWebClient = require('pipe-web-client');
prefixer = new (require('inline-style-prefixer'))();
ref$ = require('prelude-ls'), all = ref$.all, filter = ref$.filter, id = ref$.id, map = ref$.map, Obj = ref$.Obj, objToPairs = ref$.objToPairs, pairsToObj = ref$.pairsToObj, reject = ref$.reject;
querystring = require('querystring');
ref$ = require('react'), ref1$ = ref$.DOM, a = ref1$.a, div = ref1$.div, createClass = ref$.createClass, createFactory = ref$.createFactory;
findDOMNode = require('react-dom').findDOMNode;
DefaultLinks = createFactory(createClass({
getDefaultProps: function(){
return {
url: "",
cache: false,
parameters: {}
};
},
render: function(){
var ref$, queryId, branchId, parameters, url, cache, segment, shareUrl;
if ((ref$ = this.props) != null) {
queryId = ref$.queryId, branchId = ref$.branchId, parameters = ref$.parameters, url = ref$.url, cache = ref$.cache;
}
segment = queryId
? "queries/" + queryId
: "branches/" + branchId;
shareUrl = url + "/apis/" + segment + "/execute/" + this.props.cache + "/presentation?";
return div({
className: 'links'
}, a({
href: url + "/" + segment,
target: '_blank'
}, 'Edit'), a({
href: shareUrl + "" + decodeURIComponent(querystring.stringify(parameters)),
target: '_blank'
}, 'Share'), a({
ref: 'parameters',
'data-clipboard-text': JSON.stringify(parameters, null, 4)
}, 'Parameters'), a({
href: url + "/ops",
target: '_blank'
}, 'Task Manager'));
},
componentDidMount: function(){
if (!!this.refs.parameters) {
new clipboard(findDOMNode(this.refs.parameters));
}
}
}));
module.exports = createClass({
displayName: 'Story',
getDefaultProps: function(){
return {
branchId: "",
cache: undefined,
className: "",
extras: {},
parameters: {},
prefixStyles: true,
queryId: "",
renderLinks: DefaultLinks,
showLinks: true,
showTitle: true,
style: {},
title: undefined,
url: undefined
};
},
render: function(){
var ref$, branchId, cache, className, queryId, showLinks, showTitle, url, expand, parameters;
if ((ref$ = this.props) != null) {
branchId = ref$.branchId, cache = ref$.cache, className = ref$.className, queryId = ref$.queryId, showLinks = ref$.showLinks, showTitle = ref$.showTitle, url = ref$.url;
}
expand = !showTitle && !showLinks;
parameters = this.finalize(this.props.parameters);
return div({
className: "story " + className + " " + (this.state.loading ? 'loading' : '') + " " + (expand ? 'expand' : ''),
style: this.props.prefixStyles
? prefixer.prefix(this.props.style)
: this.props.style
}, !expand ? div({
className: 'header'
}, this.props.showTitle ? div({
className: 'title'
}, (ref$ = this.props.title) != null
? ref$
: this.state.document.queryTitle) : void 8, this.props.showLinks ? this.props.renderLinks({
branchId: branchId,
cache: cache,
queryId: queryId,
url: url,
parameters: parameters
}) : void 8) : void 8, div({
className: 'presentation-container',
ref: 'presentation-container'
}));
},
getInitialState: function(){
return {
loading: false,
document: {}
};
},
componentWillMount: function(){
var ref$, compileQuery, compileLatestQuery, this$ = this;
ref$ = pipeWebClient({
endPoint: this.props.url
}), compileQuery = ref$.compileQuery, compileLatestQuery = ref$.compileLatestQuery;
(function(){
if (!!this$.props.queryId) {
return compileQuery(this$.props.queryId);
} else {
return compileLatestQuery(this$.props.branchId);
}
})().then(function(arg$){
var document, execute, transformationFunction, presentationFunction;
document = arg$.document, execute = arg$.execute, transformationFunction = arg$.transformationFunction, presentationFunction = arg$.presentationFunction;
return this$.setState({
document: document,
execute: execute,
transformationFunction: transformationFunction,
presentationFunction: presentationFunction
}, function(){
return this$.refresh(this$.props.cache);
});
});
},
refresh: function(cache){
var this$ = this;
return this.setState({
loading: true
}, function(){
var finalizedParameters;
finalizedParameters = this$.finalize(this$.props.parameters);
return this$.state.execute(cache, finalizedParameters).then(function(result){
return this$.setState({
result: result,
loading: false
}, function(){
var ref$, transformationFunction, presentationFunction;
ref$ = this$.state, transformationFunction = ref$.transformationFunction, presentationFunction = ref$.presentationFunction;
return presentationFunction(findDOMNode(this$.refs['presentation-container']), transformationFunction(result, finalizedParameters), finalizedParameters);
});
});
});
},
finalize: function(parameters){
return import$(import$({}, Obj.map(function(it){
return it.value;
})(
parameters)), this.props.extras);
},
componentWillReceiveProps: function(nextProps){
var ref$, execute, transformationFunction, presentationFunction, change, clientSide, view, finalizedParameters, this$ = this;
if ((ref$ = this.state) != null) {
execute = ref$.execute, transformationFunction = ref$.transformationFunction, presentationFunction = ref$.presentationFunction;
}
if (!!execute) {
change = reject(function(it){
var ref$, ref1$, ref2$;
return isEqualToObject((ref$ = it[1]) != null ? ref$.value : void 8, (ref1$ = this$.props.parameters) != null ? (ref2$ = ref1$[it[0]]) != null ? ref2$.value : void 8 : void 8);
})(
objToPairs(
nextProps.parameters));
if (change.length > 0) {
clientSide = all(function(it){
var ref$;
return !!((ref$ = it[1]) != null && ref$.clientSide);
})(
change);
view = findDOMNode(this.refs['presentation-container']);
finalizedParameters = this.finalize(nextProps.parameters);
if (clientSide) {
presentationFunction(view, transformationFunction(this.state.result, finalizedParameters), finalizedParameters);
} else {
this.setState({
loading: true
}, function(){
return execute(this$.props.cache, finalizedParameters).then(function(result){
return this$.setState({
result: result,
loading: false
}, function(){
return presentationFunction(view, transformationFunction(result, finalizedParameters), finalizedParameters);
});
});
});
}
}
}
}
});
function import$(obj, src){
var own = {}.hasOwnProperty;
for (var key in src) if (own.call(src, key)) obj[key] = src[key];
return obj;
}
}).call(this);