javascript - React DnD in a Meteor app -
i using react meteor app , need integrate this list of items.
there itemlist.jsx
, itemrow.jsx
since item has text, links, images, ect.
itemrow.jsx
itemrow = reactmeteor.createclass({ templatename: "itemrow", proptypes: { item: react.proptypes.object.isrequired, showpooltitle: react.proptypes.bool, }, getinitialstate: function() { return { editing: false, drop: this.props.item, pool: {}, } }, startmeteorsubscriptions: function() { meteor.subscribe("itemrow", this.props.item._id); }, getmeteorstate: function() { return { item: items.findone(this.props.item._id), pool: pools.findone(this.props.drop.poolid), }; }, toggleediting: function() { this.setstate({ editing: !this.state.editing }); }, render: function() { var content; if (this.state.editing) { content = <itemrowedit drop={this.state.item} done={this.toggleediting}/> } else { content = <itemrowshow pool={this.state.pool} item={this.state.item} edit={this.toggleediting} showpooltitle={this.props.showpooltitle}/> } return ( <div key={this.props.item._id} classname="item"> {content} </div> ) }, });
and itemlist.jsx
itemlist = reactmeteor.createclass({ templatename: "itemlist", proptypes: { items: react.proptypes.object.isrequired }, getinitialstate: function() { return { items: this.props.items.fetch() } }, render: function() { var items = this.state.items; return ( <div classname="ui relaxed huge list"> {items.map(function(item) { return ( <itemrow item={item}/> ); })} </div> ); } });
i not using meteor react itemlist
yet want able drag , drop reorder first me on right track appreciated!
Comments
Post a Comment