refactor doneEditing into editor, puase/resume dep poll

This commit is contained in:
Anton Dyudin 2015-12-10 15:48:38 -08:00
parent 2231f29fdc
commit 2b7cc47e26
3 changed files with 120 additions and 48 deletions

View File

@ -63,5 +63,5 @@ module.exports = (queries, Child, load=_load)-> recl
if not @getHashElement() # onmount? if not @getHashElement() # onmount?
setTimeout @scrollHash,0 setTimeout @scrollHash,0
React.createElement Child, React.createElement Child,
(_.extend {}, @props, @state.got), (_.extend {}, @props, @state.got, ref:"loaded"),
@props.children @props.children

View File

@ -63,21 +63,28 @@ extras =
render: -> render: ->
(div {className:"footer"}, (p {}, "This page was served by Urbit.")) (div {className:"footer"}, (p {}, "This page was served by Urbit."))
Edit = query {mime:'m'}, recl Edit = query {spur:'t',mime:'m'}, recl
displayName: "Edit" displayName: "Edit"
doneEditing: ->
txt = $(@getDOMNode()).find('.CodeMirror')[0].CodeMirror.getValue() # XX refs
if txt is @props.mime.octs
return @props.unsetEdit false
TreeActions.saveFile @props.spur, txt, => @props.unsetEdit()
@props.setPending()
render: -> render: ->
{mite,octs} = @props.mime {mite,octs} = @props.mime
rele codemirror, {value:octs, mode:mite, readOnly:false, autofocus:true} rele codemirror, {value:octs, mode:mite, readOnly:false, autofocus:true}
Add = recl Add = query {spur:'t',path:'t'}, recl
displayName: "Add" displayName: "Add"
getInitialState: -> edit:false getInitialState: -> input:false
onClick: -> @setState edit:true onClick: -> @setState input:true
componentDidUpdate: -> componentDidUpdate: ->
if @state.edit if @state.input
$(@getDOMNode()).focus() $(@getDOMNode()).focus()
render: -> render: ->
unless @state.edit unless @state.input
button {@onClick}, "Add" button {@onClick}, "Add"
else else
input {type:"text",onKeyDown:(e)=> input {type:"text",onKeyDown:(e)=>
@ -96,7 +103,7 @@ Add = recl
mime:{mite:"text/x-markdown",octs:'# '+value} mime:{mite:"text/x-markdown",octs:'# '+value}
body:{gn:"div",ga:{},c:[{gn:"h1",ga:{},c:[value]}]} body:{gn:"div",ga:{},c:[{gn:"h1",ga:{},c:[value]}]}
} }
@setState edit:false @setState input:false
} }
module.exports = query { module.exports = query {
@ -105,26 +112,41 @@ module.exports = query {
path:'t' path:'t'
meta:'j' meta:'j'
sein:'t' sein:'t'
spur:'t'
}, recl }, recl
displayName: "Body" displayName: "Body"
getInitialState: -> edit: document.location.hash is "#edit" isOwn: -> urb.user? and urb.user is urb.ship
getInitialState: -> edit: @isOwn() and document.location.hash is "#edit"
pauseWasp: ->
@urb_onupdate = urb.onupdate
urb.onupdate = => @urb_updated = arguments
resumeWasp: ->
if @urb_onupdate
urb.onupdate = @urb_onupdate
delete @urb_onupdate
if @urb_updated
urb.onupdate.apply urb, @urb_updated
setPending: -> @setState edit:"pending"
setEdit: -> setEdit: ->
@hash = document.location.hash @hash = document.location.hash
document.location.hash = "#edit" # XX generic state<->hash binding document.location.hash = "#edit" # XX generic state<->hash binding
@setState edit:true @setState edit:true
urb.onupdate = -> # disable autoreload @pauseWasp()
unsetEdit: -> unsetEdit: (mod)->
document.location.hash = @hash ? "" document.location.hash = @hash ? ""
document.location.reload() # XX sigh if mod isnt false
# @setState edit:false document.location.reload()
else
@resumeWasp()
@setState edit:false
doDelete: -> doDelete: ->
TreeActions.deleteFile @props.spur, => @unsetEdit() TreeActions.deleteFile @props.spur, => @unsetEdit()
@setState edit:"gone" @setState edit:"gone"
render: -> render: ->
className = clas (@props.meta.layout?.split ',') className = clas (@props.meta.layout?.split ',')
own = urb.user and urb.user is urb.ship own = @isOwn()
extra = (name,props={})=> extra = (name,props={})=>
if @props.meta[name]? then rele extras[name], props if @props.meta[name]? then rele extras[name], props
@ -136,11 +158,11 @@ module.exports = query {
body = div {}, rele load, {} body = div {}, rele load, {}
editButton = button {onClick: => @setEdit()}, "Edit" editButton = button {onClick: => @setEdit()}, "Edit"
when true when true
body = rele Edit, {} body = rele Edit, {ref:"editor",@setPending,@unsetEdit}
onClick = => onClick = =>
txt = $(@getDOMNode()).find('.CodeMirror')[0].CodeMirror.getValue() # XX refs {loaded} = @refs.editor.refs # components/Async
TreeActions.saveFile @props.spur, txt, => @unsetEdit() if loaded? then loaded.doneEditing()
@setState edit:"pending" else @unsetEdit false
editButton = button {onClick}, "Done" editButton = button {onClick}, "Done"
(div { (div {
@ -154,6 +176,6 @@ module.exports = query {
if own then button {onClick: => @doDelete()}, "Delete" if own then button {onClick: => @doDelete()}, "Delete"
body body
extra 'next', {dataPath:@props.sein,curr:@props.name} extra 'next', {dataPath:@props.sein,curr:@props.name}
if own then rele Add,{spur:@props.spur, path:@props.path} if own then rele Add, {}
extra 'footer' extra 'footer'
) )

View File

@ -445,7 +445,9 @@ module.exports = function(queries, Child, load) {
} }
}, },
render: function() { render: function() {
return div({}, this.filterQueries() != null ? React.createElement(load, this.props) : (!this.getHashElement() ? setTimeout(this.scrollHash, 0) : void 0, React.createElement(Child, _.extend({}, this.props, this.state.got), this.props.children))); return div({}, this.filterQueries() != null ? React.createElement(load, this.props) : (!this.getHashElement() ? setTimeout(this.scrollHash, 0) : void 0, React.createElement(Child, _.extend({}, this.props, this.state.got, {
ref: "loaded"
}), this.props.children)));
} }
}); });
}; };
@ -553,9 +555,23 @@ extras = {
}; };
Edit = query({ Edit = query({
spur: 't',
mime: 'm' mime: 'm'
}, recl({ }, recl({
displayName: "Edit", displayName: "Edit",
doneEditing: function() {
var txt;
txt = $(this.getDOMNode()).find('.CodeMirror')[0].CodeMirror.getValue();
if (txt === this.props.mime.octs) {
return this.props.unsetEdit(false);
}
TreeActions.saveFile(this.props.spur, txt, (function(_this) {
return function() {
return _this.props.unsetEdit();
};
})(this));
return this.props.setPending();
},
render: function() { render: function() {
var mite, octs, ref1; var mite, octs, ref1;
ref1 = this.props.mime, mite = ref1.mite, octs = ref1.octs; ref1 = this.props.mime, mite = ref1.mite, octs = ref1.octs;
@ -568,25 +584,28 @@ Edit = query({
} }
})); }));
Add = recl({ Add = query({
spur: 't',
path: 't'
}, recl({
displayName: "Add", displayName: "Add",
getInitialState: function() { getInitialState: function() {
return { return {
edit: false input: false
}; };
}, },
onClick: function() { onClick: function() {
return this.setState({ return this.setState({
edit: true input: true
}); });
}, },
componentDidUpdate: function() { componentDidUpdate: function() {
if (this.state.edit) { if (this.state.input) {
return $(this.getDOMNode()).focus(); return $(this.getDOMNode()).focus();
} }
}, },
render: function() { render: function() {
if (!this.state.edit) { if (!this.state.input) {
return button({ return button({
onClick: this.onClick onClick: this.onClick
}, "Add"); }, "Add");
@ -624,7 +643,7 @@ Add = recl({
} }
}); });
return _this.setState({ return _this.setState({
edit: false input: false
}); });
} }
}; };
@ -632,34 +651,65 @@ Add = recl({
}); });
} }
} }
}); }));
module.exports = query({ module.exports = query({
body: 'r', body: 'r',
name: 't', name: 't',
path: 't', path: 't',
meta: 'j', meta: 'j',
sein: 't', sein: 't'
spur: 't'
}, recl({ }, recl({
displayName: "Body", displayName: "Body",
isOwn: function() {
return (urb.user != null) && urb.user === urb.ship;
},
getInitialState: function() { getInitialState: function() {
return { return {
edit: document.location.hash === "#edit" edit: this.isOwn() && document.location.hash === "#edit"
}; };
}, },
pauseWasp: function() {
this.urb_onupdate = urb.onupdate;
return urb.onupdate = (function(_this) {
return function() {
return _this.urb_updated = arguments;
};
})(this);
},
resumeWasp: function() {
if (this.urb_onupdate) {
urb.onupdate = this.urb_onupdate;
delete this.urb_onupdate;
if (this.urb_updated) {
return urb.onupdate.apply(urb, this.urb_updated);
}
}
},
setPending: function() {
return this.setState({
edit: "pending"
});
},
setEdit: function() { setEdit: function() {
this.hash = document.location.hash; this.hash = document.location.hash;
document.location.hash = "#edit"; document.location.hash = "#edit";
this.setState({ this.setState({
edit: true edit: true
}); });
return urb.onupdate = function() {}; return this.pauseWasp();
}, },
unsetEdit: function() { unsetEdit: function(mod) {
var ref1; var ref1;
document.location.hash = (ref1 = this.hash) != null ? ref1 : ""; document.location.hash = (ref1 = this.hash) != null ? ref1 : "";
if (mod !== false) {
return document.location.reload(); return document.location.reload();
} else {
this.resumeWasp();
return this.setState({
edit: false
});
}
}, },
doDelete: function() { doDelete: function() {
TreeActions.deleteFile(this.props.spur, (function(_this) { TreeActions.deleteFile(this.props.spur, (function(_this) {
@ -674,7 +724,7 @@ module.exports = query({
render: function() { render: function() {
var body, className, editButton, extra, onClick, own, ref1; var body, className, editButton, extra, onClick, own, ref1;
className = clas((ref1 = this.props.meta.layout) != null ? ref1.split(',') : void 0); className = clas((ref1 = this.props.meta.layout) != null ? ref1.split(',') : void 0);
own = urb.user && urb.user === urb.ship; own = this.isOwn();
extra = (function(_this) { extra = (function(_this) {
return function(name, props) { return function(name, props) {
if (props == null) { if (props == null) {
@ -708,17 +758,20 @@ module.exports = query({
}, "Edit"); }, "Edit");
break; break;
case true: case true:
body = rele(Edit, {}); body = rele(Edit, {
ref: "editor",
setPending: this.setPending,
unsetEdit: this.unsetEdit
});
onClick = (function(_this) { onClick = (function(_this) {
return function() { return function() {
var txt; var loaded;
txt = $(_this.getDOMNode()).find('.CodeMirror')[0].CodeMirror.getValue(); loaded = _this.refs.editor.refs.loaded;
TreeActions.saveFile(_this.props.spur, txt, function() { if (loaded != null) {
return _this.unsetEdit(); return loaded.doneEditing();
}); } else {
return _this.setState({ return _this.unsetEdit(false);
edit: "pending" }
});
}; };
})(this); })(this);
editButton = button({ editButton = button({
@ -740,10 +793,7 @@ module.exports = query({
}, "Delete") : void 0, body, extra('next', { }, "Delete") : void 0, body, extra('next', {
dataPath: this.props.sein, dataPath: this.props.sein,
curr: this.props.name curr: this.props.name
}), own ? rele(Add, { }), own ? rele(Add, {}) : void 0, extra('footer'));
spur: this.props.spur,
path: this.props.path
}) : void 0, extra('footer'));
} }
})); }));