{"action":"created","issue":{"url":"https://api.github.com/repos/transloadit/uppy/issues/170","repository_url":"https://api.github.com/repos/transloadit/uppy","labels_url":"https://api.github.com/repos/transloadit/uppy/issues/170/labels{/name}","comments_url":"https://api.github.com/repos/transloadit/uppy/issues/170/comments","events_url":"https://api.github.com/repos/transloadit/uppy/issues/170/events","html_url":"https://github.com/transloadit/uppy/pull/170","id":215122201,"number":170,"title":"[WIP] High-level React Components","user":{"login":"goto-bus-stop","id":1006268,"avatar_url":"https://avatars1.githubusercontent.com/u/1006268?v=4","gravatar_id":"","url":"https://api.github.com/users/goto-bus-stop","html_url":"https://github.com/goto-bus-stop","followers_url":"https://api.github.com/users/goto-bus-stop/followers","following_url":"https://api.github.com/users/goto-bus-stop/following{/other_user}","gists_url":"https://api.github.com/users/goto-bus-stop/gists{/gist_id}","starred_url":"https://api.github.com/users/goto-bus-stop/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/goto-bus-stop/subscriptions","organizations_url":"https://api.github.com/users/goto-bus-stop/orgs","repos_url":"https://api.github.com/users/goto-bus-stop/repos","events_url":"https://api.github.com/users/goto-bus-stop/events{/privacy}","received_events_url":"https://api.github.com/users/goto-bus-stop/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":8,"created_at":"2017-03-17T21:05:47Z","updated_at":"2017-09-11T17:31:19Z","closed_at":null,"author_association":"COLLABORATOR","pull_request":{"url":"https://api.github.com/repos/transloadit/uppy/pulls/170","html_url":"https://github.com/transloadit/uppy/pull/170","diff_url":"https://github.com/transloadit/uppy/pull/170.diff","patch_url":"https://github.com/transloadit/uppy/pull/170.patch"},"body":"This PR introduces three high-level React components that render a Dashboard or a DragDrop area for a given Uppy instance.\r\n\r\nThere's a plain `<Dashboard />` component, that renders the Dashboard using the `inline` option. This is nice & flexible and works well to actually render the dashboard inline, but also to render it in a modal from some other library if one is in use in someone's project already.\r\n\r\nThere's a `<DashboardModal />` component, that renders a Dashboard modal like react-less Uppy does. The difference is that it doesn't have a `trigger` option, and instead has an `open` prop. This way it can be opened or closed depending on state held in React or Redux and controlled manually by eg. a button and `setState`. When the user clicks outside the modal, the `onRequestClose` event is fired. The developer can then decide if and how the modal should be closed.\r\n\r\nThere's a `<DrapDrop />` component, that renders the `DrapDrop` plugin. There's not much more to this ATM. A bunch of event callbacks for hover and drop _may_ be useful here. These events would be actually related to the DOM that's rendered, and not as much to the Uppy Core instance, like with the onProgress/onComplete events (see below).\r\n\r\n---\r\n\r\nTodos:\r\n\r\n - [ ] The GoogleDrive/Dropbox acquirer plugins have a `target:` option which seems to have to be(?) a Dashboard plugin instance. This is difficult with how these React components work, since these add the Dashboard plugin inside the component. One way to work around this would be to have the Dashboard find the relevant acquirer plugins by itself (probably by iterating over `Uppy`s internal plugin list).\r\n - [x] <strike>Figure out the event callbacks game. Having onProgress/onComplete callbacks on the components might be useful, but these are also available as events on the Uppy instance, and having multiple ways to add them might be confusing. I'll play around with this a bit more in the Example to see how it feels to use the event emitter vs handlers on the React components.</strike> Just use `uppy.on()` for events\r\n - [x] Make these components deal well with being mounted and unmounted. Currently the Uppy instance with any plugins added by components may outlive the component, and I'm not sure what happens then. We may need a way for Uppy to un-use a plugin…or just View plugins, really. Perhaps with an `uninstall` method.\r\n - [x] Add the Dashboard maxWidth/maxHeight/semiTransparent/<strike>defaultTabIcon</strike>/showProgressDetails options as props.\r\n-  [x] Maybe just map all props to options by default, and only manually add some specific ones when needed?\r\n - [x] Add `locale` props to all components.\r\n - [x] Add `<ProgressBar />`\r\n\r\n---\r\n\r\nAnd a separate thought re: the DragDrop component: A good story with eg. React-DnD seems useful. If there's an Uppy method to add a browser File object (like you get from `input.files[0]`) that is likely enough, though, and wouldn't need anything React-specific."},"comment":{"url":"https://api.github.com/repos/transloadit/uppy/issues/comments/328601049","html_url":"https://github.com/transloadit/uppy/pull/170#issuecomment-328601049","issue_url":"https://api.github.com/repos/transloadit/uppy/issues/170","id":328601049,"user":{"login":"oyeanuj","id":9633371,"avatar_url":"https://avatars2.githubusercontent.com/u/9633371?v=4","gravatar_id":"","url":"https://api.github.com/users/oyeanuj","html_url":"https://github.com/oyeanuj","followers_url":"https://api.github.com/users/oyeanuj/followers","following_url":"https://api.github.com/users/oyeanuj/following{/other_user}","gists_url":"https://api.github.com/users/oyeanuj/gists{/gist_id}","starred_url":"https://api.github.com/users/oyeanuj/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/oyeanuj/subscriptions","organizations_url":"https://api.github.com/users/oyeanuj/orgs","repos_url":"https://api.github.com/users/oyeanuj/repos","events_url":"https://api.github.com/users/oyeanuj/events{/privacy}","received_events_url":"https://api.github.com/users/oyeanuj/received_events","type":"User","site_admin":false},"created_at":"2017-09-11T17:31:19Z","updated_at":"2017-09-11T17:31:19Z","author_association":"NONE","body":"@goto-bus-stop Seeing this example made me think if you folks considered something (and rejected?) like below as a maybe more React way of using Uppy:\r\n```jsx\r\n<Uppy \r\n  files = {this.state.files} \r\n  onUploadSuccess = {this.handleUploadSuccess} \r\n  onUploadComplete = {this.handleUploadComplete}\r\n>\r\n  <Tus10 endpoint = 'https://master.tus.io/files' />\r\n  <DashboardPlugin inline />\r\n  <DragDropPlugin locale = {localeStringObject} />\r\n  <ProgressBarPlugin />\r\n <GoogleDrive target = {DashboardPlugin} host = 'https://server.uppy.io'  />\r\n</Uppy>\r\n```\r\n\r\nAnd I'm curious if you tried it, what did you like/dislike about the approach?"}}
{"actor":{"display_login":"oyeanuj"}}