pipe-storyboard
Version:
Set of components to create storyboards from pipe queries
353 lines (352 loc) • 12.9 kB
JavaScript
(function(){
var keyboardjs, ref$, filter, find, fold, id, isItNaN, map, keys, Obj, objToPairs, pairsToObj, Str, isEmptyObject, isEqualToObject, ref1$, div, input, Children, cloneElement, createClass, createFactory, reactSelectize, SimpleSelect, MultiSelect, LabelledComponent, onHotkeys;
keyboardjs = require('keyboardjs');
ref$ = require('prelude-ls'), filter = ref$.filter, find = ref$.find, fold = ref$.fold, id = ref$.id, isItNaN = ref$.isItNaN, map = ref$.map, keys = ref$.keys, Obj = ref$.Obj, objToPairs = ref$.objToPairs, pairsToObj = ref$.pairsToObj, Str = ref$.Str;
ref$ = require('prelude-extension'), isEmptyObject = ref$.isEmptyObject, isEqualToObject = ref$.isEqualToObject;
ref$ = require('react'), ref1$ = ref$.DOM, div = ref1$.div, input = ref1$.input, Children = ref$.Children, cloneElement = ref$.cloneElement, createClass = ref$.createClass, createFactory = ref$.createFactory;
reactSelectize = require('react-selectize');
SimpleSelect = createFactory(reactSelectize.SimpleSelect);
MultiSelect = createFactory(reactSelectize.MultiSelect);
LabelledComponent = createFactory(require('./LabelledComponent'));
onHotkeys = function(hotkeys, listener){
var wrappedListener;
wrappedListener = function(e){
listener(e);
return e.preventDefault();
};
keyboardjs.bind(hotkeys, wrappedListener);
return function(){
return keyboardjs.unbind(hotkeys, wrappedListener);
};
};
module.exports = createClass({
displayName: 'Storyboard',
getDefaultProps: function(){
return {
/*
Control :: {
name :: String,
type :: String,
label :: String,
placeholder :: String,
options: [String],
multi: Boolean,
tether :: Boolean,
default-value :: a,
ui-value-from-state :: State -> UIValue,
state-from-ui-value :: UIValue -> State',
parameters-from-ui-value :: UIValue -> Parameters, where Parameters :: Map Name, Value
render? :: UIValue -> (UIValue -> ()) -> ReactElement
}
*/
cache: 3600,
className: "",
controls: [],
extras: {},
parameters: {},
state: {},
style: {},
url: undefined,
onChange: function(state){},
onExecute: function(parameters, willExecute){},
onReset: function(){}
};
},
render: function(){
var ref$, change, controls, parameters, this$ = this;
ref$ = this.getComputedState(), change = ref$.change, controls = ref$.controls, parameters = ref$.parameters;
return div({
className: "storyboard " + this.props.className,
style: this.props.style
}, div({
className: 'form'
}, map(function(control){
var name, label, defaultValue, placeholder, render, uiValueFromState, stateFromUiValue, ref$;
if (control != null) {
name = control.name, label = control.label, defaultValue = control.defaultValue, placeholder = control.placeholder, render = control.render, uiValueFromState = control.uiValueFromState, stateFromUiValue = control.stateFromUiValue;
}
return LabelledComponent({
key: name,
label: label,
showLabel: !!label
}, render((ref$ = uiValueFromState(this$.props.state)) != null ? ref$ : defaultValue, function(newUiValue){
return this$.props.onChange(import$(import$({}, this$.props.state), stateFromUiValue(newUiValue)));
}));
})(
controls), div({
className: 'buttons'
}, div({
className: 'button',
onClick: function(){
return this$.reset();
}
}, 'Reset'), div({
className: "button " + (change ? 'highlight' : ''),
onClick: function(){
return this$.execute();
}
}, 'Search'))), div({
className: 'children'
}, Children.map(this.props.children, function(child){
var ref$, ref1$, ref2$;
return cloneElement(child, {
cache: (ref$ = (ref1$ = child.props) != null ? ref1$.cache : void 8) != null
? ref$
: this$.props.cache,
extras: import$(import$({}, this$.props.extras), child.props.extras),
parameters: (ref$ = import$({}, this$.state.parameters), ref$.refreshCount = {
value: this$.state.refreshCount
}, ref$),
url: (ref$ = (ref2$ = child.props) != null ? ref2$.url : void 8) != null
? ref$
: this$.props.url
});
})));
},
getInitialState: function(){
return {
parameters: {},
refreshCount: 0
};
},
getComputedState: function(){
var controls, parameters, change, this$ = this;
controls = map(function(control){
var name, type, placeholder, options, tether, multi, parser, render, ref$, uiValueFromState, stateFromUiValue, parametersFromUiValue;
if (control != null) {
name = control.name, type = control.type, placeholder = control.placeholder, options = control.options, tether = control.tether, multi = control.multi;
}
parser = (function(){
var ref$;
switch (ref$ = [type], false) {
case 'number' !== ref$[0]:
return function(n){
var result;
result = parseFloat(n);
if (isItNaN(result)) {
return undefined;
} else {
return result;
}
};
case 'checkbox' !== ref$[0]:
return function(b){
var ref$;
if (typeof b === 'string') {
switch (ref$ = [b], false) {
case 'true' !== ref$[0]:
return true;
case 'false' !== ref$[0]:
return false;
default:
return undefined;
}
} else {
return b;
}
};
default:
return id;
}
}());
render = (ref$ = control.render) != null
? ref$
: function(value, onChange){
var this$ = this;
switch (type) {
case 'select':
return (multi ? MultiSelect : SimpleSelect)({
key: name,
tether: tether,
placeholder: placeholder,
value: (function(){
switch (false) {
case typeof value !== 'undefined':
return undefined;
default:
return {
label: value,
value: value
};
}
}()),
values: (function(){
switch (false) {
case typeof value !== 'undefined':
return undefined;
default:
return map(function(it){
return {
label: it,
value: it
};
})(
filter(function(it){
return !!it;
})(
Str.split(',')(
value)));
}
}()),
options: map(function(it){
return {
label: it,
value: it
};
})(
options),
onValueChange: function(arg$){
var value;
if (arg$ != null) {
value = arg$.value;
}
return onChange(value);
},
onValuesChange: function(values){
return onChange(!!values ? Str.join(',')(
map(function(it){
return it.value;
})(
values)) : undefined);
}
});
default:
return input(import$({
key: name,
type: type,
placeholder: placeholder,
onChange: function(arg$){
var currentTarget, f;
currentTarget = arg$.currentTarget;
f = (function(){
var ref$;
switch (ref$ = [type], false) {
case 'checkbox' !== ref$[0]:
return function(it){
return it.checked;
};
default:
return function(it){
return it.value;
};
}
}());
return onChange(f(currentTarget));
}
}, type === 'checkbox'
? {
checked: value === 'true'
}
: {
value: value
}));
}
};
if (control != null) {
uiValueFromState = control.uiValueFromState, stateFromUiValue = control.stateFromUiValue, parametersFromUiValue = control.parametersFromUiValue;
}
return ref$ = import$({}, control), ref$.uiValueFromState = function(state){
var result;
result = (uiValueFromState != null
? uiValueFromState
: function(state){
return state[name];
})(state);
return (function(){
switch (false) {
case typeof result !== 'object':
if (isEmptyObject(result)) {
return undefined;
} else {
return result;
}
break;
default:
return result;
}
}());
}, ref$.stateFromUiValue = stateFromUiValue != null
? stateFromUiValue
: function(uiValue){
var ref$;
return ref$ = {}, ref$[name + ""] = uiValue, ref$;
}, ref$.parametersFromUiValue = parametersFromUiValue != null
? parametersFromUiValue
: function(uiValue){
var ref$;
return ref$ = {}, ref$[name + ""] = parser(uiValue), ref$;
}, ref$.render = render, ref$;
})(
this.props.controls);
parameters = import$(import$({}, this.props.parameters), fold(function(memo, obj){
return import$(import$({}, memo), obj);
}, {})(
map(function(arg$){
var name, defaultValue, uiValueFromState, parametersFromUiValue, clientSide, ref$;
if (arg$ != null) {
name = arg$.name, defaultValue = arg$.defaultValue, uiValueFromState = arg$.uiValueFromState, parametersFromUiValue = arg$.parametersFromUiValue, clientSide = arg$.clientSide;
}
return Obj.map(function(it){
return {
value: it,
clientSide: clientSide
};
})(
parametersFromUiValue((ref$ = uiValueFromState(this$.props.state)) != null ? ref$ : defaultValue));
})(
controls)));
change = !isEqualToObject(parameters, this.state.parameters);
return {
controls: controls,
parameters: parameters,
change: change
};
},
execute: function(){
var this$ = this;
(function(){
return function(callback){
var currentParameters;
currentParameters = this$.getComputedState().parameters;
if (isEqualToObject(this$.state.parameters, currentParameters)) {
return this$.setState({
refreshCount: this$.state.refreshCount + 1
}, callback);
} else {
return this$.setState({
parameters: currentParameters
}, callback);
}
};
})()(function(){
return this$.props.onExecute(Obj.map(function(it){
return it.value;
})(
this$.state.parameters));
});
},
reset: function(){
this.props.onChange({});
this.props.onReset();
},
componentWillMount: function(){
var this$ = this;
this.execute();
this.unbindExecuteHotkeys = onHotkeys(['command + enter', 'ctrl + enter'], function(){
return this$.execute();
});
this.unbindResetHotkeys = onHotkeys(['alt + r', 'option + r'], function(){
return this$.reset();
});
},
componentWillUnmount: function(){
this.unbindExecuteHotkeys();
this.unbindResetHotkeys();
}
});
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);