{"action":"created","issue":{"url":"https://api.github.com/repos/gaearon/react-dnd/issues/109","labels_url":"https://api.github.com/repos/gaearon/react-dnd/issues/109/labels{/name}","comments_url":"https://api.github.com/repos/gaearon/react-dnd/issues/109/comments","events_url":"https://api.github.com/repos/gaearon/react-dnd/issues/109/events","html_url":"https://github.com/gaearon/react-dnd/issues/109","id":59856389,"number":109,"title":"Support ES6 classes","user":{"login":"gaearon","id":810438,"avatar_url":"https://avatars.githubusercontent.com/u/810438?v=3","gravatar_id":"","url":"https://api.github.com/users/gaearon","html_url":"https://github.com/gaearon","followers_url":"https://api.github.com/users/gaearon/followers","following_url":"https://api.github.com/users/gaearon/following{/other_user}","gists_url":"https://api.github.com/users/gaearon/gists{/gist_id}","starred_url":"https://api.github.com/users/gaearon/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gaearon/subscriptions","organizations_url":"https://api.github.com/users/gaearon/orgs","repos_url":"https://api.github.com/users/gaearon/repos","events_url":"https://api.github.com/users/gaearon/events{/privacy}","received_events_url":"https://api.github.com/users/gaearon/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":{"url":"https://api.github.com/repos/gaearon/react-dnd/milestones/7","html_url":"https://github.com/gaearon/react-dnd/milestones/0.10","labels_url":"https://api.github.com/repos/gaearon/react-dnd/milestones/7/labels","id":1001019,"number":7,"title":"0.10","description":"","creator":{"login":"gaearon","id":810438,"avatar_url":"https://avatars.githubusercontent.com/u/810438?v=3","gravatar_id":"","url":"https://api.github.com/users/gaearon","html_url":"https://github.com/gaearon","followers_url":"https://api.github.com/users/gaearon/followers","following_url":"https://api.github.com/users/gaearon/following{/other_user}","gists_url":"https://api.github.com/users/gaearon/gists{/gist_id}","starred_url":"https://api.github.com/users/gaearon/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gaearon/subscriptions","organizations_url":"https://api.github.com/users/gaearon/orgs","repos_url":"https://api.github.com/users/gaearon/repos","events_url":"https://api.github.com/users/gaearon/events{/privacy}","received_events_url":"https://api.github.com/users/gaearon/received_events","type":"User","site_admin":false},"open_issues":5,"closed_issues":1,"state":"open","created_at":"2015-03-02T00:28:03Z","updated_at":"2015-03-09T12:31:19Z","due_on":null,"closed_at":null},"comments":7,"created_at":"2015-03-04T20:25:05Z","updated_at":"2015-03-26T13:59:49Z","closed_at":null,"body":"React 0.13 will allow pure ES6 classes as components.\r\nReact DnD currently relies on mixins.\r\n\r\nWe should find a way to port current API to a more generic primitive that can be used equally well from our mixins and ES6 classes. Ideally mixins will just be a sugar over more basic functionality.\r\n\r\nThis should inform the design of https://github.com/gaearon/react-dnd/issues/103 so we don't have to redo the API once again later."},"comment":{"url":"https://api.github.com/repos/gaearon/react-dnd/issues/comments/86524981","html_url":"https://github.com/gaearon/react-dnd/issues/109#issuecomment-86524981","issue_url":"https://api.github.com/repos/gaearon/react-dnd/issues/109","id":86524981,"user":{"login":"gaearon","id":810438,"avatar_url":"https://avatars.githubusercontent.com/u/810438?v=3","gravatar_id":"","url":"https://api.github.com/users/gaearon","html_url":"https://github.com/gaearon","followers_url":"https://api.github.com/users/gaearon/followers","following_url":"https://api.github.com/users/gaearon/following{/other_user}","gists_url":"https://api.github.com/users/gaearon/gists{/gist_id}","starred_url":"https://api.github.com/users/gaearon/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gaearon/subscriptions","organizations_url":"https://api.github.com/users/gaearon/orgs","repos_url":"https://api.github.com/users/gaearon/repos","events_url":"https://api.github.com/users/gaearon/events{/privacy}","received_events_url":"https://api.github.com/users/gaearon/received_events","type":"User","site_admin":false},"created_at":"2015-03-26T13:59:49Z","updated_at":"2015-03-26T13:59:49Z","body":"Most probably React DnD will provide higher-order component `configureDragDrop`. You will wrap your components with it. It will “fill” drag drop related properties.\r\n\r\nThe API I currently have in mind looks like this:\r\n\r\n```js\r\n'use strict';\r\n\r\nimport React, { PropTypes, createClass } from 'react';\r\nimport ItemTypes from './ItemTypes';\r\nimport { configureDragDrop } from 'react-dnd';\r\n\r\nconst style = {\r\n  height: '12rem',\r\n  width: '12rem',\r\n  color: 'white',\r\n  padding: '2rem',\r\n  textAlign: 'center'\r\n};\r\n\r\nclass Dustbin extends React.Component {\r\n\r\n  // Note these are just normal props\r\n  // “injected” into your component by React DnD\r\n\r\n  static propTypes = {\r\n    isOver: PropTypes.bool.isRequired,\r\n    canDrop: PropTypes.bool.isRequired,\r\n    attachDropTarget: PropTypes.func.isRequired\r\n  }\r\n\r\n  render() {\r\n    const { canDrop, isOver, attachDropTarget } = this.props;\r\n    const isActive = canDrop && isOver;\r\n\r\n    let backgroundColor = '#222';\r\n    if (isActive) {\r\n      backgroundColor = 'darkgreen';\r\n    } else if (canDrop) {\r\n      backgroundColor = 'darkkhaki';\r\n    }\r\n\r\n    return (\r\n      <div ref={attachDropTarget}\r\n           style={{ ...style, backgroundColor }}>\r\n        {isActive ?\r\n          'Release to drop' :\r\n          'Drag item here'\r\n        }\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\n// here you get to describe drag sources\r\n// and drop handlers inside your component\r\n\r\nfunction registerHandlers(register) {\r\n  return {\r\n    boxTarget: register.dropTarget(ItemTypes.BOX, {\r\n      drop() {\r\n        return { name: 'Dustbin' };\r\n      }\r\n    })\r\n  };\r\n}\r\n\r\n// here you describe how to calculate props\r\n// for your component based on current drag drop state\r\n\r\nfunction pickProps(attach, monitor, handlers) {\r\n  return {\r\n    attachDropTarget: ref => attach(handlers.boxTarget, ref),\r\n    isOver: monitor.isOver(handlers.boxTarget),\r\n    canDrop: monitor.canDrop(handlers.boxTarget)\r\n  };\r\n}\r\n\r\n// finally use React DnD's higher order component\r\nexport default configureDragDrop(Dustbin, registerHandlers, pickProps);\r\n```"}}