diff --git a/README.md b/README.md index 2d24b2e..5fb5a05 100644 --- a/README.md +++ b/README.md @@ -52,7 +52,9 @@ function sendToSlack(payload) { // methods are available from this function. You should call the `sent` // method if the request was successfully sent to Slack. this.sent(); - }, this.error); + }, error => { + this.error(error.statusText); + }); } /** @@ -73,7 +75,7 @@ function uploadImage(image) { // If you've called the `uploadImage` function with `image => uploadImage(image)`, // you'll have to use a ref on the SlackFeedback component to access the // 'imageUploaded' and 'error' methods - res => this.imageUploaded(), + url => this.imageUploaded(url), err => this.error(err) ); } @@ -82,13 +84,24 @@ function uploadImage(image) { ### Props | Prop | Type | Default | Required | Description | -| ------------- | ------ |-------------|:-------------:|-------------| -| channel | string | | required | The Slack channel to send messages. Note: All slack channels are lowercase. The string should be identical to the channel name e.g '#feedback' | +|----------|--------|--------------|:-------------:|-------------| +| channel | string | | required | The Slack channel to send messages. Note: All slack channels are lowercase. The string should be identical to the channel name e.g '#feedback' | | onSubmit | function | | required | A JSON payload object will be returned when the user submits the form. | | onImageUpload | function | | | Method that will be called with a file argument | | user | string | "Unknown User" | | The logged in user's name (if applicable) | | emoji | string | 🗣 | | The emoji that will show in place of the users avatar on Slack | | buttonText | string | "Slack Feedback" | | The text for the trigger button | +| disabled | boolean | false | | Disable the component entirely. Returns null. Can be used to disable the component on specific pages | + +### Callback Functions +| Function | Arguments | Description | +|-----------|-----------|-------------| +| sent() | | Should be called when the payload has been successfully sent to your sever. The submit button will display a `Sent!` message and reset the loading state. | +| error() | error (string) | Should be called if there's an error sending the slack payload to your server. Pass the `statusText` of the response to update the submit button. | +| imageUploaded() | url (string) | Should be called if an image is successfully uploaded to your server. This adds the image url to the payload JSON and resets the loading state of the component. | +| uploadError() | error (string) | Should be called if there's an error uploading an image. | + +___ ### What does it look like? ![image](http://res.cloudinary.com/di0xuztdq/image/upload/v1471245001/uehkqqfarpue7auonqol.gif) diff --git a/lib/SlackFeedback.js b/lib/SlackFeedback.js index 2ed1dbb..bd8e34c 100644 --- a/lib/SlackFeedback.js +++ b/lib/SlackFeedback.js @@ -1,8 +1,7 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],t):"object"==typeof exports?exports["react-slack-feedback"]=t(require("react"),require("react-dom")):e["react-slack-feedback"]=t(e.React,e.ReactDOM)}(this,function(e,t){return function(e){function t(r){if(a[r])return a[r].exports;var n=a[r]={exports:{},id:r,loaded:!1};return e[r].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var a={};return t.m=e,t.c=a,t.p="/Users/markmurray/Apps/react-slack-feedback/lib/",t(0)}([function(e,t,a){e.exports=a(10)},function(t,a){t.exports=e},function(e,t,a){var r,n;/*! +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports["react-slack-feedback"]=t(require("react")):e["react-slack-feedback"]=t(e.React)}(this,function(e){return function(e){function t(r){if(a[r])return a[r].exports;var n=a[r]={exports:{},id:r,loaded:!1};return e[r].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var a={};return t.m=e,t.c=a,t.p="/Users/markmurray/Apps/react-slack-feedback/lib/",t(0)}([function(e,t,a){e.exports=a(5)},function(t,a){t.exports=e},function(e,t,a){var r,n;/*! Copyright (c) 2016 Jed Watson. Licensed under the MIT License (MIT), see http://jedwatson.github.io/classnames */ -!function(){"use strict";function a(){for(var e=[],t=0;timg{margin-right:.5em}#SlackFeedback .SlackFeedback--header>.close{cursor:pointer;opacity:.7;margin-left:auto;font-size:11px}#SlackFeedback .SlackFeedback--header>.close:hover{opacity:1}#SlackFeedback .SlackFeedback--content{padding:.5em}#SlackFeedback .SlackFeedback--trigger{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;right:0;bottom:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#fff;color:#858ba0;border:1px solid #d0d8e1;width:150px;padding:12px 1.25em;border-radius:30px;cursor:pointer;font-size:13px;font-weight:500;box-shadow:0 3px 12px 1px rgba(34,44,79,.1);-webkit-transition:box-shadow .3s,color .2s,-webkit-transform .2s ease-in;transition:box-shadow .3s,color .2s,-webkit-transform .2s ease-in;transition:box-shadow .3s,transform .2s ease-in,color .2s;transition:box-shadow .3s,transform .2s ease-in,color .2s,-webkit-transform .2s ease-in}#SlackFeedback .SlackFeedback--trigger.active,#SlackFeedback .SlackFeedback--trigger:hover{box-shadow:0 6px 16px 2px rgba(0,0,0,.2);-webkit-transform:translateY(-3px);transform:translateY(-3px);color:#5d606c;border-color:#b1becd}#SlackFeedback .SlackFeedback--trigger img{margin-right:8px}#SlackFeedback ul.SlackFeedback--tabs{display:-webkit-box;display:-ms-flexbox;display:flex;list-style:none;padding:0;margin:0;margin-bottom:1em}#SlackFeedback ul.SlackFeedback--tabs>li{-webkit-box-flex:1;-ms-flex:1;flex:1;background:hsla(0,0%,100%,.6);color:#5d606c;text-align:center;padding:.75em;font-size:13px;cursor:pointer;border:1px solid #d0d8e1}#SlackFeedback ul.SlackFeedback--tabs>li.selected{border-color:#08f;background:#fff;color:#08f;position:relative;text-shadow:0 1px 6px rgba(0,136,255,.1);box-shadow:0 0 8px rgba(0,136,255,.2)}#SlackFeedback ul.SlackFeedback--tabs>li:hover:not(.selected){border:1px solid #b7c3d1}#SlackFeedback ul.SlackFeedback--tabs>li:first-of-type{border-radius:4px 0 0 4px;margin-right:-1px}#SlackFeedback ul.SlackFeedback--tabs>li:last-of-type{border-radius:0 4px 4px 0;margin-left:-1px}#SlackFeedback .SlackFeedback-image-upload .SlackFeedback-image-upload-button{border:1px solid #d0d8e1;padding:.75em 3em;text-align:center;font-size:13px;margin:auto;width:100%;display:table;color:#777d95;background:#fff;cursor:pointer;border-radius:4px}#SlackFeedback .SlackFeedback-image-upload .SlackFeedback-image-upload-button:hover{border:1px solid #bac6d3;background:hsla(0,0%,100%,.6);color:#777d95}#SlackFeedback .SlackFeedback-image-upload>input{display:none}#SlackFeedback .SlackFeedback--input{margin-bottom:.75em;color:#858ba0}#SlackFeedback .border-box,#SlackFeedback .SlackFeedback--image-preview,#SlackFeedback .SlackFeedback--input,#SlackFeedback .SlackFeedback--textarea,#SlackFeedback .SlackFeedback--trigger,#SlackFeedback .SlackFeedback-image-upload .SlackFeedback-image-upload-button{box-sizing:border-box}#SlackFeedback .resets,#SlackFeedback .SlackFeedback--checkbox,#SlackFeedback .SlackFeedback--input,#SlackFeedback .SlackFeedback--textarea{box-shadow:none;color:inherit;margin:inherit;padding:inherit}#SlackFeedback .SlackFeedback--input,#SlackFeedback .SlackFeedback--textarea{width:100%;color:#444!important;border:1px solid #d0d8e1!important;border-radius:3px;padding:.5em;outline:none;font-size:14px;background:#fff!important;margin-bottom:.5em}#SlackFeedback .SlackFeedback--input:focus,#SlackFeedback .SlackFeedback--textarea:focus{border:1px solid #08f!important;box-shadow:0 0 8px rgba(0,136,255,.3)!important}#SlackFeedback .SlackFeedback--input.disabled,#SlackFeedback .SlackFeedback--input[disabled],#SlackFeedback .SlackFeedback--textarea.disabled,#SlackFeedback .SlackFeedback--textarea[disabled]{opacity:.8!important;pointer-events:none;color:#636a7f}#SlackFeedback .SlackFeedback--textarea{min-height:150px}#SlackFeedback .SlackFeedback--label{color:#08f;display:block;font-size:11px;margin:5px 0}#SlackFeedback .SlackFeedback--checkbox{-webkit-appearance:checkbox!important;-moz-appearance:checkbox!important;appearance:checkbox!important;position:static!important;font-size:1.1em!important}#SlackFeedback .SlackFeedback--checkbox:after,#SlackFeedback .SlackFeedback--checkbox:before{content:none!important}#SlackFeedback .SlackFeedback--checkbox-label{display:inline-block!important;margin-left:10px!important;color:inherit;font-size:13px;color:#858ba0;cursor:pointer}#SlackFeedback .SlackFeedback--checkbox-label:hover{color:#777d95}#SlackFeedback .SlackFeedback--image-preview{background-size:cover;background-position:50%;position:relative;width:100%;height:140px;border-radius:4px;margin-bottom:5px;border:1px solid #d0d8e1}#SlackFeedback .SlackFeedback--image-preview:hover .SlackFeedback--preview-overlay{opacity:1}#SlackFeedback .SlackFeedback--image-preview .SlackFeedback--preview-overlay{position:absolute;top:0;right:0;bottom:0;left:0;text-align:center;background:rgba(34,44,79,.4);opacity:0}#SlackFeedback .SlackFeedback--image-preview .SlackFeedback--preview-overlay span{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);padding:1em 3em;font-size:12px;text-transform:uppercase;color:#fff;border-radius:4px;cursor:pointer;background:rgba(34,44,79,.6);-webkit-transition:background .15s;transition:background .15s}#SlackFeedback .SlackFeedback--image-preview .SlackFeedback--preview-overlay span:hover{background:#08f}#SlackFeedback .Select{margin-bottom:.5em}#SlackFeedback .Select .Select-control{border:1px solid #d0d8e1}#SlackFeedback button.submit{display:block!important;width:100%!important;padding:1em .75em!important;text-align:center!important;background:#08f!important;color:#fff!important;font-weight:400;outline:none;border:none;font-size:11px!important;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;cursor:pointer;-webkit-transition:background .2s,box-shadow .2s;transition:background .2s,box-shadow .2s}#SlackFeedback button.submit.disabled,#SlackFeedback button.submit[disabled]{pointer-events:none!important;opacity:.4!important}#SlackFeedback button.submit.sent{background:#3dc86f!important;pointer-events:none}#SlackFeedback button.submit.error{background:#ec3c3c!important;pointer-events:none}#SlackFeedback button.submit:hover{background:#2499ff;box-shadow:0 2px 8px 2px rgba(0,136,255,.2)}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,10%,0);transform:translate3d(0,10%,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,10%,0);transform:translate3d(0,10%,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInUp{-webkit-animation:fadeInUp .4s ease;animation:fadeInUp .4s ease;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:none;transform:none}to{opacity:0;display:none;-webkit-transform:translate3d(0,10%,0);transform:translate3d(0,10%,0)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:none;transform:none}to{opacity:0;display:none;-webkit-transform:translate3d(0,10%,0);transform:translate3d(0,10%,0)}}.fadeOutDown{-webkit-animation:fadeOutDown .4s ease;animation:fadeOutDown .4s ease;-webkit-animation-fill-mode:both;animation-fill-mode:both}",""])},function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;t=0||Object.prototype.hasOwnProperty.call(e,r)&&(a[r]=e[r]);return a}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function c(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var l=Object.assign||function(e){for(var t=1;t0||(this.setState({isDragActive:!1,isDragReject:!1}),this.props.onDragLeave&&this.props.onDragLeave.call(this,e))}},{key:"onDrop",value:function(e){e.preventDefault(),this.enterCounter=0,this.setState({isDragActive:!1,isDragReject:!1});for(var t=e.dataTransfer?e.dataTransfer.files:e.target.files,a=this.props.multiple?t.length:Math.min(t.length,1),r=[],n=0;n0?r:a)(e)}},function(e,t,a){var r=a(23),n=Math.min;e.exports=function(e){return e>0?n(r(e),9007199254740991):0}},function(e,t,a){"use strict";var r=a(3),n=a(24),o=a(21),i="endsWith",c=""[i];r(r.P+r.F*a(14)(i),"String",{endsWith:function(e){var t=o(this,e,i),a=arguments,r=a.length>1?a[1]:void 0,l=n(t.length),s=void 0===r?l:Math.min(n(r),l),d=String(e);return c?c.call(t,d,s):t.slice(s-d.length,s)===d}})},function(e,t,a){var r=a(5),n=a(3),o=a(1).Array||Array,i={},c=function(e,t){r.each.call(e.split(","),function(e){void 0==t&&e in o?i[e]=o[e]:e in[]&&(i[e]=a(12)(Function.call,[][e],t))})};c("pop,reverse,shift,keys,values,entries",1),c("indexOf,every,some,forEach,map,filter,find,findIndex,includes",3),c("join,slice,concat,push,splice,unshift,sort,lastIndexOf,reduce,reduceRight,copyWithin,fill"),n(n.S,"Array",i)}])},function(t,a){t.exports=e}])})},function(e,t,a){try{(function(){"use strict";function e(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function n(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var i=Object.assign||function(e){for(var t=1;t"),a){case"Bug":e="danger";break;case"Feature":e="good";break;case"Improvement":e="warning"}var i={channel:this.props.channel,username:this.props.user,icon_emoji:this.props.emoji,attachments:[{fallback:"Feedback ("+a+")",author_name:this.props.user,color:e,title:a,title_link:document.location.href,text:o,footer:"React Slack Feedback"}]};n.url&&(i.attachments[0].image_url=n.url),this.props.onSubmit.call(this,i)}},{key:"attachImage",value:function(e){var t=this,a=e.target.files,r=a[0];r.preview=window.URL.createObjectURL(r),this.setState({image:r,uploadingImage:!0},function(){t.props.onImageUpload.call(t,r)})}},{key:"imageUploaded",value:function(e){if("string"!=typeof e)return console.error("[SlackFeedback] `url` argument in `imageUploaded` method must be a string"),void this.removeImage();var t=i({},this.state.image,{url:e});this.setState({uploadingImage:!1,image:t})}},{key:"renderDropzone",value:function(){var e=this;return this.props.disableImageUpload?null:this.state.image.preview?null:s["default"].createElement("div",{className:"SlackFeedback-image-upload"},s["default"].createElement("label",{className:"SlackFeedback-image-upload-button",htmlFor:"imageUpload"},this.props.imageUploadText),s["default"].createElement("input",{id:"imageUpload",type:"file",accept:"image/*",style:{display:"none"},onChange:function(t){return e.attachImage(t)}}))}},{key:"removeImage",value:function(e){e&&e.preventDefault(),this.setState({image:{},uploadingImage:!1})}},{key:"renderImagePreview",value:function(){var e=this.state,t=e.image,a=e.uploadingImage;return t.preview?s["default"].createElement("div",{className:"SlackFeedback--image-preview",style:{backgroundImage:"url("+this.state.image.preview+")"}},a?s["default"].createElement("div",{className:"SlackFeedback--loader"}):s["default"].createElement("div",{className:"SlackFeedback--preview-overlay"},s["default"].createElement("span",{onClick:this.removeImage},"Remove"))):null}},{key:"render",value:function(){var e=this.state,t=e.active,a=e.sending,r=e.sent,n=e.error,o=(e.image,e.sendURL),i=e.selectedType,c=e.uploadingImage,l="Send Feedback";return r&&(l="Sent!"),a&&!r&&(l="Sending Feedback..."),n&&(l=n),s["default"].createElement("div",{ref:"SlackFeedback",id:"SlackFeedback",className:(0,b["default"])("SlackFeedback",{active:t})},s["default"].createElement("div",{ref:"container",className:"SlackFeedback--container fadeInUp"},s["default"].createElement("div",{className:"SlackFeedback--header"},s["default"].createElement(m["default"],null)," Send Feedback to Slack",s["default"].createElement("div",{className:"close",onClick:this.close.bind(this)},"close")),s["default"].createElement("div",{className:"SlackFeedback--content"},s["default"].createElement("label",{className:"SlackFeedback--label"},"Channel"),s["default"].createElement("input",{className:"SlackFeedback--input",value:this.props.channel,disabled:!0}),s["default"].createElement("label",{className:"SlackFeedback--label"},"Feedback Type"),s["default"].createElement("ul",{className:"SlackFeedback--tabs"},s["default"].createElement("li",{onClick:this.selectType.bind(this),className:(0,b["default"])({selected:"Bug"===i})},"Bug"),s["default"].createElement("li",{onClick:this.selectType.bind(this),className:(0,b["default"])({selected:"Feature"===i})},"Feature"),s["default"].createElement("li",{onClick:this.selectType.bind(this),className:(0,b["default"])({selected:"Improvement"===i})},"Improvement")),s["default"].createElement("label",{className:"SlackFeedback--label"},"Your Message"),s["default"].createElement("textarea",{ref:"message",className:"SlackFeedback--textarea",placeholder:"Message..."}),this.renderDropzone(),this.renderImagePreview(),s["default"].createElement("div",{style:{padding:"0.5em 0 1em"}},s["default"].createElement("input",{id:"sendURL",className:"SlackFeedback--checkbox",type:"checkbox",checked:o,onChange:this.toggleSendURL.bind(this)}),s["default"].createElement("label",{htmlFor:"sendURL",className:"SlackFeedback--checkbox-label"},"Send URL with Feedback")),s["default"].createElement("button",{className:(0,b["default"])("submit",{sent:r,error:n,disabled:a||c}),onClick:this.send.bind(this)},l))),s["default"].createElement("div",{className:(0,b["default"])("SlackFeedback--trigger",{active:t}),onClick:this.toggle},s["default"].createElement(m["default"],null)," ",this.props.buttonText))}}]),t}(l.Component);v.propTypes=h,v.defaultProps=g,t["default"]=v}).call(this)}finally{}},function(e,t,a){try{(function(){"use strict";function e(e){return e&&e.__esModule?e:{"default":e}}function r(){return o["default"].createElement("svg",{id:"SlackIcon",width:"16px",height:"16px",viewBox:"0 0 256 256",version:"1.1",xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",preserveAspectRatio:"xMidYMid"},o["default"].createElement("g",null,o["default"].createElement("path",{d:"M165.963541,15.8384262 C162.07318,3.86308197 149.212328,-2.69009836 137.239082,1.20236066 C125.263738,5.09272131 118.710557,17.9535738 122.603016,29.9268197 L181.550164,211.292328 C185.597902,222.478689 197.682361,228.765377 209.282098,225.426885 C221.381246,221.943607 228.756984,209.093246 224.896,197.21023 C224.749115,196.756984 165.963541,15.8384262 165.963541,15.8384262",fill:"#DFA22F"}),o["default"].createElement("path",{d:"M74.6260984,45.515541 C70.7336393,33.5422951 57.8727869,26.9891148 45.899541,30.8794754 C33.9241967,34.7698361 27.3710164,47.6306885 31.2634754,59.6060328 L90.210623,240.971541 C94.2583607,252.157902 106.34282,258.44459 117.942557,255.104 C130.041705,251.62282 137.417443,238.772459 133.556459,226.887344 C133.409574,226.436197 74.6260984,45.515541 74.6260984,45.515541",fill:"#3CB187"}),o["default"].createElement("path",{d:"M240.161574,166.045377 C252.136918,162.155016 258.688,149.294164 254.797639,137.31882 C250.907279,125.345574 238.046426,118.792393 226.07318,122.682754 L44.7076721,181.632 C33.5213115,185.677639 27.234623,197.762098 30.5731148,209.361836 C34.0563934,221.460984 46.9067541,228.836721 58.7897705,224.975738 C59.2430164,224.828852 240.161574,166.045377 240.161574,166.045377",fill:"#CE1E5B"}),o["default"].createElement("path",{d:"M82.507541,217.270557 C94.312918,213.434754 109.528131,208.491016 125.855475,203.186361 C122.019672,191.380984 117.075934,176.163672 111.76918,159.83423 L68.4191475,173.924721 L82.507541,217.270557",fill:"#392538"}),o["default"].createElement("path",{d:"M173.847082,187.591344 C190.235279,182.267803 205.467279,177.31777 217.195016,173.507148 C213.359213,161.70177 208.413377,146.480262 203.106623,130.146623 L159.75659,144.237115 L173.847082,187.591344", -fill:"#BB242A"}),o["default"].createElement("path",{d:"M210.484459,74.7058361 C222.457705,70.8154754 229.010885,57.954623 225.120525,45.9792787 C221.230164,34.0060328 208.369311,27.4528525 196.393967,31.3432131 L15.028459,90.292459 C3.84209836,94.3380984 -2.44459016,106.422557 0.896,118.022295 C4.37718033,130.121443 17.227541,137.49718 29.1126557,133.636197 C29.5638033,133.489311 210.484459,74.7058361 210.484459,74.7058361",fill:"#72C5CD"}),o["default"].createElement("path",{d:"M52.8220328,125.933115 C64.6274098,122.097311 79.8468197,117.151475 96.1762623,111.84682 C90.8527213,95.4565246 85.9026885,80.2245246 82.0920656,68.4946885 L38.731541,82.5872787 L52.8220328,125.933115",fill:"#248C73"}),o["default"].createElement("path",{d:"M144.159475,96.256 C160.551869,90.9303607 175.785967,85.9803279 187.515803,82.1676066 C182.190164,65.7752131 177.240131,50.5390164 173.42741,38.807082 L130.068984,52.8996721 L144.159475,96.256",fill:"#62803A"})))}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=r;var n=a(1),o=e(n)}).call(this)}finally{}},function(e,t){"use strict";function a(e){for(var t=arguments.length-1,a="Minified React error #"+e+"; visit http://facebook.github.io/react/docs/error-decoder.html?invariant="+e,r=0;r=0&&v.splice(t,1)}function c(e){var t=document.createElement("style");return t.type="text/css",o(e,t),t}function l(e){var t=document.createElement("link");return t.rel="stylesheet",o(e,t),t}function s(e,t){var a,r,n;if(t.singleton){var o=g++;a=h||(h=c(t)),r=d.bind(null,a,o,!1),n=d.bind(null,a,o,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(a=l(t),r=p.bind(null,a),n=function(){i(a),a.href&&URL.revokeObjectURL(a.href)}):(a=c(t),r=u.bind(null,a),n=function(){i(a)});return r(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;r(e=t)}else n()}}function d(e,t,a,r){var n=a?"":r.css;if(e.styleSheet)e.styleSheet.cssText=y(t,n);else{var o=document.createTextNode(n),i=e.childNodes;i[t]&&e.removeChild(i[t]),i.length?e.insertBefore(o,i[t]):e.appendChild(o)}}function u(e,t){var a=t.css,r=t.media;if(r&&e.setAttribute("media",r),e.styleSheet)e.styleSheet.cssText=a;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(a))}}function p(e,t){var a=t.css,r=t.sourceMap;r&&(a+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */");var n=new Blob([a],{type:"text/css"}),o=e.href;e.href=URL.createObjectURL(n),o&&URL.revokeObjectURL(o)}var f={},b=function(e){var t;return function(){return"undefined"==typeof t&&(t=e.apply(this,arguments)),t}},k=b(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),m=b(function(){return document.head||document.getElementsByTagName("head")[0]}),h=null,g=0,v=[];e.exports=function(e,t){t=t||{},"undefined"==typeof t.singleton&&(t.singleton=k()),"undefined"==typeof t.insertAt&&(t.insertAt="bottom");var a=n(e);return r(a,t),function(e){for(var o=[],i=0;iimg{margin-right:.5em}#SlackFeedback .SlackFeedback--header>.close{cursor:pointer;opacity:.7;margin-left:auto;font-size:11px}#SlackFeedback .SlackFeedback--header>.close:hover{opacity:1}#SlackFeedback .SlackFeedback--content{padding:.5em}#SlackFeedback .SlackFeedback--trigger{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;right:0;bottom:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#fff;color:#858ba0;border:1px solid #d0d8e1;width:150px;padding:12px 1.25em;border-radius:30px;cursor:pointer;font-size:13px;font-weight:500;box-shadow:0 3px 12px 1px rgba(34,44,79,.1);-webkit-transition:box-shadow .3s,color .2s,-webkit-transform .2s ease-in;transition:box-shadow .3s,color .2s,-webkit-transform .2s ease-in;transition:box-shadow .3s,transform .2s ease-in,color .2s;transition:box-shadow .3s,transform .2s ease-in,color .2s,-webkit-transform .2s ease-in}#SlackFeedback .SlackFeedback--trigger.active,#SlackFeedback .SlackFeedback--trigger:hover{box-shadow:0 6px 16px 2px rgba(0,0,0,.2);-webkit-transform:translateY(-3px);transform:translateY(-3px);color:#5d606c;border-color:#b1becd}#SlackFeedback .SlackFeedback--trigger img{margin-right:8px}#SlackFeedback ul.SlackFeedback--tabs{display:-webkit-box;display:-ms-flexbox;display:flex;list-style:none;padding:0;margin:0;margin-bottom:1em}#SlackFeedback ul.SlackFeedback--tabs>li{-webkit-box-flex:1;-ms-flex:1;flex:1;background:hsla(0,0%,100%,.6);color:#5d606c;text-align:center;padding:.75em;font-size:13px;cursor:pointer;border:1px solid #d0d8e1}#SlackFeedback ul.SlackFeedback--tabs>li.selected{border-color:#08f;background:#fff;color:#08f;position:relative;text-shadow:0 1px 6px rgba(0,136,255,.1);box-shadow:0 0 8px rgba(0,136,255,.2)}#SlackFeedback ul.SlackFeedback--tabs>li:hover:not(.selected){border:1px solid #b7c3d1}#SlackFeedback ul.SlackFeedback--tabs>li:first-of-type{border-radius:4px 0 0 4px;margin-right:-1px}#SlackFeedback ul.SlackFeedback--tabs>li:last-of-type{border-radius:0 4px 4px 0;margin-left:-1px}#SlackFeedback .SlackFeedback-image-upload .SlackFeedback-image-upload-button{border:1px solid #d0d8e1;padding:.75em 3em;text-align:center;font-size:13px;margin:auto;width:100%;display:table;color:#777d95;background:#fff;cursor:pointer;border-radius:4px}#SlackFeedback .SlackFeedback-image-upload .SlackFeedback-image-upload-button:hover{border:1px solid #bac6d3;background:hsla(0,0%,100%,.6);color:#777d95}#SlackFeedback .SlackFeedback-image-upload>input{display:none}#SlackFeedback .SlackFeedback--input{margin-bottom:.75em;color:#858ba0}#SlackFeedback .border-box,#SlackFeedback .SlackFeedback--image-preview,#SlackFeedback .SlackFeedback--input,#SlackFeedback .SlackFeedback--textarea,#SlackFeedback .SlackFeedback--trigger,#SlackFeedback .SlackFeedback-image-upload .SlackFeedback-image-upload-button{box-sizing:border-box}#SlackFeedback .resets,#SlackFeedback .SlackFeedback--checkbox,#SlackFeedback .SlackFeedback--input,#SlackFeedback .SlackFeedback--textarea{box-shadow:none;color:inherit;margin:inherit;padding:inherit}#SlackFeedback .SlackFeedback--input,#SlackFeedback .SlackFeedback--textarea{width:100%;color:#444!important;border:1px solid #d0d8e1!important;border-radius:3px;padding:.5em;outline:none;font-size:14px;background:#fff!important;margin-bottom:.5em}#SlackFeedback .SlackFeedback--input:focus,#SlackFeedback .SlackFeedback--textarea:focus{border:1px solid #08f!important;box-shadow:0 0 8px rgba(0,136,255,.3)!important}#SlackFeedback .SlackFeedback--input.disabled,#SlackFeedback .SlackFeedback--input[disabled],#SlackFeedback .SlackFeedback--textarea.disabled,#SlackFeedback .SlackFeedback--textarea[disabled]{opacity:.8!important;pointer-events:none;color:#636a7f}#SlackFeedback .SlackFeedback--textarea{min-height:150px}#SlackFeedback .SlackFeedback--label{color:#08f;display:block;font-size:11px;margin:5px 0}#SlackFeedback .SlackFeedback--checkbox{-webkit-appearance:checkbox!important;-moz-appearance:checkbox!important;appearance:checkbox!important;position:static!important;font-size:1.1em!important}#SlackFeedback .SlackFeedback--checkbox:after,#SlackFeedback .SlackFeedback--checkbox:before{content:none!important}#SlackFeedback .SlackFeedback--checkbox-label{display:inline-block!important;margin-left:10px!important;color:inherit;font-size:13px;color:#858ba0;cursor:pointer}#SlackFeedback .SlackFeedback--checkbox-label:hover{color:#777d95}#SlackFeedback .SlackFeedback--image-preview{background-size:cover;background-position:50%;position:relative;width:100%;height:140px;border-radius:4px;margin-bottom:5px;border:1px solid #d0d8e1}#SlackFeedback .SlackFeedback--image-preview:hover .SlackFeedback--preview-overlay{opacity:1}#SlackFeedback .SlackFeedback--image-preview .SlackFeedback--preview-overlay{position:absolute;top:0;right:0;bottom:0;left:0;text-align:center;background:rgba(34,44,79,.4);opacity:0}#SlackFeedback .SlackFeedback--image-preview .SlackFeedback--preview-overlay span{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);padding:1em 3em;font-size:12px;text-transform:uppercase;color:#fff;border-radius:4px;cursor:pointer;background:rgba(34,44,79,.6);-webkit-transition:background .15s;transition:background .15s}#SlackFeedback .SlackFeedback--image-preview .SlackFeedback--preview-overlay span:hover{background:#08f}#SlackFeedback .Select{margin-bottom:.5em}#SlackFeedback .Select .Select-control{border:1px solid #d0d8e1}#SlackFeedback button.submit{display:block!important;width:100%!important;padding:1em .75em!important;text-align:center!important;background:#08f!important;color:#fff!important;font-weight:400;outline:none;border:none;font-size:11px!important;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;cursor:pointer;-webkit-transition:background .2s,box-shadow .2s;transition:background .2s,box-shadow .2s}#SlackFeedback button.submit.disabled,#SlackFeedback button.submit[disabled]{pointer-events:none!important;opacity:.4!important}#SlackFeedback button.submit.sent{background:#3dc86f!important;pointer-events:none}#SlackFeedback button.submit.error{background:#ec3c3c!important;pointer-events:none}#SlackFeedback button.submit:hover{background:#2499ff;box-shadow:0 2px 8px 2px rgba(0,136,255,.2)}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,10%,0);transform:translate3d(0,10%,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,10%,0);transform:translate3d(0,10%,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInUp{-webkit-animation:fadeInUp .4s ease;animation:fadeInUp .4s ease;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:none;transform:none}to{opacity:0;display:none;-webkit-transform:translate3d(0,10%,0);transform:translate3d(0,10%,0)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:none;transform:none}to{opacity:0;display:none;-webkit-transform:translate3d(0,10%,0);transform:translate3d(0,10%,0)}}.fadeOutDown{-webkit-animation:fadeOutDown .4s ease;animation:fadeOutDown .4s ease;-webkit-animation-fill-mode:both;animation-fill-mode:both}",""])},function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;t"),a){case"Bug":e="danger";break;case"Feature":e="good";break;case"Improvement":e="warning"}var i={channel:this.props.channel,username:this.props.user,icon_emoji:this.props.emoji,attachments:[{fallback:"Feedback ("+a+")",author_name:this.props.user,color:e,title:a,title_link:document.location.href,text:o,footer:"React Slack Feedback"}]};n.url&&(i.attachments[0].image_url=n.url),this.props.onSubmit.call(this,i)}},{key:"attachImage",value:function(e){var t=this,a=e.target.files,r=a[0];r.preview=window.URL.createObjectURL(r),this.setState({image:r,uploadingImage:!0},function(){t.props.onImageUpload.call(t,r)})}},{key:"uploadError",value:function(e){var t=this;this.setState({uploading:!1,error:"Error Uploading Image!"},function(){t.removeImage(),setTimeout(function(){t.setState({error:null})},6e3)})}},{key:"imageUploaded",value:function(e){if("string"!=typeof e)return console.error("[SlackFeedback] `url` argument in `imageUploaded` method must be a string"),void this.removeImage();var t=i({},this.state.image,{url:e});this.setState({uploadingImage:!1,image:t})}},{key:"renderImageUpload",value:function(){var e=this;return this.state.image.preview?this.renderImagePreview():s["default"].createElement("div",{className:"SlackFeedback-image-upload"},s["default"].createElement("label",{className:"SlackFeedback-image-upload-button",htmlFor:"imageUpload"},this.props.imageUploadText),s["default"].createElement("input",{id:"imageUpload",type:"file",accept:"image/*",style:{display:"none"},onChange:function(t){return e.attachImage(t)}}))}},{key:"removeImage",value:function(e){e&&e.preventDefault(),this.setState({image:{},uploadingImage:!1})}},{key:"renderImagePreview",value:function(){var e=this.state,t=e.image,a=e.uploadingImage;return t.preview?s["default"].createElement("div",{className:"SlackFeedback--image-preview",style:{backgroundImage:"url("+t.preview+")"}},a?s["default"].createElement("div",{className:"SlackFeedback--loader"}):s["default"].createElement("div",{className:"SlackFeedback--preview-overlay"},s["default"].createElement("span",{onClick:this.removeImage},"Remove"))):null}},{key:"render",value:function(){var e=this.state,t=e.active,a=e.sending,r=e.sent,n=e.error,o=(e.image,e.sendURL),i=e.selectedType,c=e.uploadingImage,l="Send Feedback";return r&&(l="Sent!"),a&&!r&&(l="Sending Feedback..."),n&&(l=n),this.props.disabled?null:s["default"].createElement("div",{ref:"SlackFeedback",id:"SlackFeedback",className:(0,p["default"])("SlackFeedback",{active:t})},s["default"].createElement("div",{ref:"container",className:"SlackFeedback--container fadeInUp"},s["default"].createElement("div",{className:"SlackFeedback--header"},s["default"].createElement(u["default"],null)," Send Feedback to Slack",s["default"].createElement("div",{className:"close",onClick:this.close},"close")),s["default"].createElement("div",{className:"SlackFeedback--content"},s["default"].createElement("label",{className:"SlackFeedback--label"},"Channel"),s["default"].createElement("input",{className:"SlackFeedback--input",value:this.props.channel,disabled:!0}),s["default"].createElement("label",{className:"SlackFeedback--label"},"Feedback Type"),s["default"].createElement("ul",{className:"SlackFeedback--tabs"},s["default"].createElement("li",{onClick:this.selectType,className:(0,p["default"])({selected:"Bug"===i})},"Bug"),s["default"].createElement("li",{onClick:this.selectType,className:(0,p["default"])({selected:"Feature"===i})},"Feature"),s["default"].createElement("li",{onClick:this.selectType,className:(0,p["default"])({selected:"Improvement"===i})},"Improvement")),s["default"].createElement("label",{className:"SlackFeedback--label"},"Your Message"),s["default"].createElement("textarea",{ref:"message",className:"SlackFeedback--textarea",placeholder:"Message..."}),this.props.onImageUpload?this.renderImageUpload():null,s["default"].createElement("div",{style:{padding:"0.5em 0 1em"}},s["default"].createElement("input",{id:"sendURL",className:"SlackFeedback--checkbox",type:"checkbox",checked:o,onChange:this.toggleSendURL}),s["default"].createElement("label",{htmlFor:"sendURL",className:"SlackFeedback--checkbox-label"},"Send URL with Feedback")),s["default"].createElement("button",{className:(0,p["default"])("submit",{sent:r,error:n,disabled:a||c}),onClick:this.send},l))),s["default"].createElement("div",{className:(0,p["default"])("SlackFeedback--trigger",{active:t}),onClick:this.toggle},s["default"].createElement(u["default"],null)," ",this.props.buttonText))}}]),t}(l.Component);m.propTypes=k,m.defaultProps=f,t["default"]=m}).call(this)}finally{}},function(e,t,a){try{(function(){"use strict";function e(e){return e&&e.__esModule?e:{"default":e}}function r(){return o["default"].createElement("svg",{id:"SlackIcon",width:"16px",height:"16px",viewBox:"0 0 256 256",version:"1.1",xmlns:"http://www.w3.org/2000/svg",xmlnsXlink:"http://www.w3.org/1999/xlink",preserveAspectRatio:"xMidYMid"},o["default"].createElement("g",null,o["default"].createElement("path",{d:"M165.963541,15.8384262 C162.07318,3.86308197 149.212328,-2.69009836 137.239082,1.20236066 C125.263738,5.09272131 118.710557,17.9535738 122.603016,29.9268197 L181.550164,211.292328 C185.597902,222.478689 197.682361,228.765377 209.282098,225.426885 C221.381246,221.943607 228.756984,209.093246 224.896,197.21023 C224.749115,196.756984 165.963541,15.8384262 165.963541,15.8384262",fill:"#DFA22F"}),o["default"].createElement("path",{d:"M74.6260984,45.515541 C70.7336393,33.5422951 57.8727869,26.9891148 45.899541,30.8794754 C33.9241967,34.7698361 27.3710164,47.6306885 31.2634754,59.6060328 L90.210623,240.971541 C94.2583607,252.157902 106.34282,258.44459 117.942557,255.104 C130.041705,251.62282 137.417443,238.772459 133.556459,226.887344 C133.409574,226.436197 74.6260984,45.515541 74.6260984,45.515541",fill:"#3CB187"}),o["default"].createElement("path",{d:"M240.161574,166.045377 C252.136918,162.155016 258.688,149.294164 254.797639,137.31882 C250.907279,125.345574 238.046426,118.792393 226.07318,122.682754 L44.7076721,181.632 C33.5213115,185.677639 27.234623,197.762098 30.5731148,209.361836 C34.0563934,221.460984 46.9067541,228.836721 58.7897705,224.975738 C59.2430164,224.828852 240.161574,166.045377 240.161574,166.045377",fill:"#CE1E5B"}),o["default"].createElement("path",{d:"M82.507541,217.270557 C94.312918,213.434754 109.528131,208.491016 125.855475,203.186361 C122.019672,191.380984 117.075934,176.163672 111.76918,159.83423 L68.4191475,173.924721 L82.507541,217.270557",fill:"#392538"}),o["default"].createElement("path",{d:"M173.847082,187.591344 C190.235279,182.267803 205.467279,177.31777 217.195016,173.507148 C213.359213,161.70177 208.413377,146.480262 203.106623,130.146623 L159.75659,144.237115 L173.847082,187.591344",fill:"#BB242A"}),o["default"].createElement("path",{d:"M210.484459,74.7058361 C222.457705,70.8154754 229.010885,57.954623 225.120525,45.9792787 C221.230164,34.0060328 208.369311,27.4528525 196.393967,31.3432131 L15.028459,90.292459 C3.84209836,94.3380984 -2.44459016,106.422557 0.896,118.022295 C4.37718033,130.121443 17.227541,137.49718 29.1126557,133.636197 C29.5638033,133.489311 210.484459,74.7058361 210.484459,74.7058361",fill:"#72C5CD"}),o["default"].createElement("path",{d:"M52.8220328,125.933115 C64.6274098,122.097311 79.8468197,117.151475 96.1762623,111.84682 C90.8527213,95.4565246 85.9026885,80.2245246 82.0920656,68.4946885 L38.731541,82.5872787 L52.8220328,125.933115",fill:"#248C73"}),o["default"].createElement("path",{d:"M144.159475,96.256 C160.551869,90.9303607 175.785967,85.9803279 187.515803,82.1676066 C182.190164,65.7752131 177.240131,50.5390164 173.42741,38.807082 L130.068984,52.8996721 L144.159475,96.256",fill:"#62803A"})))}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=r;var n=a(1),o=e(n)}).call(this)}finally{}},function(e,t,a){function r(e,t){for(var a=0;a=0&&S.splice(t,1)}function c(e){var t=document.createElement("style");return t.type="text/css",o(e,t),t}function l(e){var t=document.createElement("link");return t.rel="stylesheet",o(e,t),t}function s(e,t){var a,r,n;if(t.singleton){var o=h++;a=g||(g=c(t)),r=d.bind(null,a,o,!1),n=d.bind(null,a,o,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(a=l(t),r=b.bind(null,a),n=function(){i(a),a.href&&URL.revokeObjectURL(a.href)}):(a=c(t),r=p.bind(null,a),n=function(){i(a)});return r(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;r(e=t)}else n()}}function d(e,t,a,r){var n=a?"":r.css;if(e.styleSheet)e.styleSheet.cssText=v(t,n);else{var o=document.createTextNode(n),i=e.childNodes;i[t]&&e.removeChild(i[t]),i.length?e.insertBefore(o,i[t]):e.appendChild(o)}}function p(e,t){var a=t.css,r=t.media;if(r&&e.setAttribute("media",r),e.styleSheet)e.styleSheet.cssText=a;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(a))}}function b(e,t){var a=t.css,r=t.sourceMap;r&&(a+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */");var n=new Blob([a],{type:"text/css"}),o=e.href;e.href=URL.createObjectURL(n),o&&URL.revokeObjectURL(o)}var u={},k=function(e){var t;return function(){return"undefined"==typeof t&&(t=e.apply(this,arguments)),t}},f=k(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),m=k(function(){return document.head||document.getElementsByTagName("head")[0]}),g=null,h=0,S=[];e.exports=function(e,t){t=t||{},"undefined"==typeof t.singleton&&(t.singleton=f()),"undefined"==typeof t.insertAt&&(t.insertAt="bottom");var a=n(e);return r(a,t),function(e){for(var o=[],i=0;iimg{margin-right:.5em}#SlackFeedback .SlackFeedback--header>.close{cursor:pointer;opacity:.7;margin-left:auto;font-size:11px}#SlackFeedback .SlackFeedback--header>.close:hover{opacity:1}#SlackFeedback .SlackFeedback--content{padding:.5em}#SlackFeedback .SlackFeedback--trigger{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;right:0;bottom:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#fff;color:#858ba0;border:1px solid #d0d8e1;width:150px;padding:12px 1.25em;border-radius:30px;cursor:pointer;font-size:13px;font-weight:500;box-shadow:0 3px 12px 1px rgba(34,44,79,.1);-webkit-transition:box-shadow .3s,color .2s,-webkit-transform .2s ease-in;transition:box-shadow .3s,color .2s,-webkit-transform .2s ease-in;transition:box-shadow .3s,transform .2s ease-in,color .2s;transition:box-shadow .3s,transform .2s ease-in,color .2s,-webkit-transform .2s ease-in}#SlackFeedback .SlackFeedback--trigger.active,#SlackFeedback .SlackFeedback--trigger:hover{box-shadow:0 6px 16px 2px rgba(0,0,0,.2);-webkit-transform:translateY(-3px);transform:translateY(-3px);color:#5d606c;border-color:#b1becd}#SlackFeedback .SlackFeedback--trigger img{margin-right:8px}#SlackFeedback ul.SlackFeedback--tabs{display:-webkit-box;display:-ms-flexbox;display:flex;list-style:none;padding:0;margin:0;margin-bottom:1em}#SlackFeedback ul.SlackFeedback--tabs>li{-webkit-box-flex:1;-ms-flex:1;flex:1;background:hsla(0,0%,100%,.6);color:#5d606c;text-align:center;padding:.75em;font-size:13px;cursor:pointer;border:1px solid #d0d8e1}#SlackFeedback ul.SlackFeedback--tabs>li.selected{border-color:#08f;background:#fff;color:#08f;position:relative;text-shadow:0 1px 6px rgba(0,136,255,.1);box-shadow:0 0 8px rgba(0,136,255,.2)}#SlackFeedback ul.SlackFeedback--tabs>li:hover:not(.selected){border:1px solid #b7c3d1}#SlackFeedback ul.SlackFeedback--tabs>li:first-of-type{border-radius:4px 0 0 4px;margin-right:-1px}#SlackFeedback ul.SlackFeedback--tabs>li:last-of-type{border-radius:0 4px 4px 0;margin-left:-1px}#SlackFeedback .SlackFeedback-image-upload .SlackFeedback-image-upload-button{border:1px solid #d0d8e1;padding:.75em 3em;text-align:center;font-size:13px;margin:auto;width:100%;display:table;color:#777d95;background:#fff;cursor:pointer;border-radius:4px}#SlackFeedback .SlackFeedback-image-upload .SlackFeedback-image-upload-button:hover{border:1px solid #bac6d3;background:hsla(0,0%,100%,.6);color:#777d95}#SlackFeedback .SlackFeedback-image-upload>input{display:none}#SlackFeedback .SlackFeedback--input{margin-bottom:.75em;color:#858ba0}#SlackFeedback .border-box,#SlackFeedback .SlackFeedback--image-preview,#SlackFeedback .SlackFeedback--input,#SlackFeedback .SlackFeedback--textarea,#SlackFeedback .SlackFeedback--trigger,#SlackFeedback .SlackFeedback-image-upload .SlackFeedback-image-upload-button{box-sizing:border-box}#SlackFeedback .resets,#SlackFeedback .SlackFeedback--checkbox,#SlackFeedback .SlackFeedback--input,#SlackFeedback .SlackFeedback--textarea{box-shadow:none;color:inherit;margin:inherit;padding:inherit}#SlackFeedback .SlackFeedback--input,#SlackFeedback .SlackFeedback--textarea{width:100%;color:#444!important;border:1px solid #d0d8e1!important;border-radius:3px;padding:.5em;outline:none;font-size:14px;background:#fff!important;margin-bottom:.5em}#SlackFeedback .SlackFeedback--input:focus,#SlackFeedback .SlackFeedback--textarea:focus{border:1px solid #08f!important;box-shadow:0 0 8px rgba(0,136,255,.3)!important}#SlackFeedback .SlackFeedback--input.disabled,#SlackFeedback .SlackFeedback--input[disabled],#SlackFeedback .SlackFeedback--textarea.disabled,#SlackFeedback .SlackFeedback--textarea[disabled]{opacity:.8!important;pointer-events:none;color:#636a7f}#SlackFeedback .SlackFeedback--textarea{min-height:150px}#SlackFeedback .SlackFeedback--label{color:#08f;display:block;font-size:11px;margin:5px 0}#SlackFeedback .SlackFeedback--checkbox{-webkit-appearance:checkbox!important;-moz-appearance:checkbox!important;appearance:checkbox!important;position:static!important;font-size:1.1em!important}#SlackFeedback .SlackFeedback--checkbox:after,#SlackFeedback .SlackFeedback--checkbox:before{content:none!important}#SlackFeedback .SlackFeedback--checkbox-label{display:inline-block!important;margin-left:10px!important;color:inherit;font-size:13px;color:#858ba0;cursor:pointer}#SlackFeedback .SlackFeedback--checkbox-label:hover{color:#777d95}#SlackFeedback .SlackFeedback--image-preview{background-size:cover;background-position:50%;position:relative;width:100%;height:140px;border-radius:4px;margin-bottom:5px;border:1px solid #d0d8e1}#SlackFeedback .SlackFeedback--image-preview:hover .SlackFeedback--preview-overlay{opacity:1}#SlackFeedback .SlackFeedback--image-preview .SlackFeedback--preview-overlay{position:absolute;top:0;right:0;bottom:0;left:0;text-align:center;background:rgba(34,44,79,.4);opacity:0}#SlackFeedback .SlackFeedback--image-preview .SlackFeedback--preview-overlay span{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);padding:1em 3em;font-size:12px;text-transform:uppercase;color:#fff;border-radius:4px;cursor:pointer;background:rgba(34,44,79,.6);-webkit-transition:background .15s;transition:background .15s}#SlackFeedback .SlackFeedback--image-preview .SlackFeedback--preview-overlay span:hover{background:#08f}#SlackFeedback .Select{margin-bottom:.5em}#SlackFeedback .Select .Select-control{border:1px solid #d0d8e1}#SlackFeedback button.submit{display:block!important;width:100%!important;padding:1em .75em!important;text-align:center!important;background:#08f!important;color:#fff!important;font-weight:400;outline:none;border:none;font-size:11px!important;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;cursor:pointer;-webkit-transition:background .2s,box-shadow .2s;transition:background .2s,box-shadow .2s}#SlackFeedback button.submit.disabled,#SlackFeedback button.submit[disabled]{pointer-events:none!important;opacity:.4!important}#SlackFeedback button.submit.sent{background:#3dc86f!important;pointer-events:none}#SlackFeedback button.submit.error{background:#ec3c3c!important;pointer-events:none}#SlackFeedback button.submit:hover{background:#2499ff;box-shadow:0 2px 8px 2px rgba(0,136,255,.2)}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,10%,0);transform:translate3d(0,10%,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,10%,0);transform:translate3d(0,10%,0)}to{opacity:1;-webkit-transform:none;transform:none}}.fadeInUp{-webkit-animation:fadeInUp .4s ease;animation:fadeInUp .4s ease;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:none;transform:none}to{opacity:0;display:none;-webkit-transform:translate3d(0,10%,0);transform:translate3d(0,10%,0)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:none;transform:none}to{opacity:0;display:none;-webkit-transform:translate3d(0,10%,0);transform:translate3d(0,10%,0)}}.fadeOutDown{-webkit-animation:fadeOutDown .4s ease;animation:fadeOutDown .4s ease;-webkit-animation-fill-mode:both;animation-fill-mode:both}\", \"\"]);\n\t\n\t// exports\n\n\n/***/ },\n/* 4 */\n/***/ function(module, exports) {\n\n\t/*\r\n\t\tMIT License http://www.opensource.org/licenses/mit-license.php\r\n\t\tAuthor Tobias Koppers @sokra\r\n\t*/\r\n\t// css base code, injected by the css-loader\r\n\tmodule.exports = function() {\r\n\t\tvar list = [];\r\n\t\r\n\t\t// return the list of modules as css string\r\n\t\tlist.toString = function toString() {\r\n\t\t\tvar result = [];\r\n\t\t\tfor(var i = 0; i < this.length; i++) {\r\n\t\t\t\tvar item = this[i];\r\n\t\t\t\tif(item[2]) {\r\n\t\t\t\t\tresult.push(\"@media \" + item[2] + \"{\" + item[1] + \"}\");\r\n\t\t\t\t} else {\r\n\t\t\t\t\tresult.push(item[1]);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\treturn result.join(\"\");\r\n\t\t};\r\n\t\r\n\t\t// import a list of modules into the list\r\n\t\tlist.i = function(modules, mediaQuery) {\r\n\t\t\tif(typeof modules === \"string\")\r\n\t\t\t\tmodules = [[null, modules, \"\"]];\r\n\t\t\tvar alreadyImportedModules = {};\r\n\t\t\tfor(var i = 0; i < this.length; i++) {\r\n\t\t\t\tvar id = this[i][0];\r\n\t\t\t\tif(typeof id === \"number\")\r\n\t\t\t\t\talreadyImportedModules[id] = true;\r\n\t\t\t}\r\n\t\t\tfor(i = 0; i < modules.length; i++) {\r\n\t\t\t\tvar item = modules[i];\r\n\t\t\t\t// skip already imported module\r\n\t\t\t\t// this implementation is not 100% perfect for weird media query combinations\r\n\t\t\t\t// when a module is imported multiple times with different media queries.\r\n\t\t\t\t// I hope this will never occur (Hey this way we have smaller bundles)\r\n\t\t\t\tif(typeof item[0] !== \"number\" || !alreadyImportedModules[item[0]]) {\r\n\t\t\t\t\tif(mediaQuery && !item[2]) {\r\n\t\t\t\t\t\titem[2] = mediaQuery;\r\n\t\t\t\t\t} else if(mediaQuery) {\r\n\t\t\t\t\t\titem[2] = \"(\" + item[2] + \") and (\" + mediaQuery + \")\";\r\n\t\t\t\t\t}\r\n\t\t\t\t\tlist.push(item);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t};\r\n\t\treturn list;\r\n\t};\r\n\n\n/***/ },\n/* 5 */\n/***/ function(module, exports, __webpack_require__) {\n\n\t/**\n\t * Copyright (c) 2013-present, Facebook, Inc.\n\t * All rights reserved.\n\t *\n\t * This source code is licensed under the BSD-style license found in the\n\t * LICENSE file in the root directory of this source tree. An additional grant\n\t * of patent rights can be found in the PATENTS file in the same directory.\n\t *\n\t */\n\t\n\t'use strict';\n\t\n\t/**\n\t * Use invariant() to assert state which your program assumes to be true.\n\t *\n\t * Provide sprintf-style format (only %s is supported) and arguments\n\t * to provide information about what broke and what you were\n\t * expecting.\n\t *\n\t * The invariant message will be stripped in production, but the invariant\n\t * will remain to ensure logic does not differ in production.\n\t */\n\t\n\tfunction invariant(condition, format, a, b, c, d, e, f) {\n\t if (false) {\n\t if (format === undefined) {\n\t throw new Error('invariant requires an error message argument');\n\t }\n\t }\n\t\n\t if (!condition) {\n\t var error;\n\t if (format === undefined) {\n\t error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.');\n\t } else {\n\t var args = [a, b, c, d, e, f];\n\t var argIndex = 0;\n\t error = new Error(format.replace(/%s/g, function () {\n\t return args[argIndex++];\n\t }));\n\t error.name = 'Invariant Violation';\n\t }\n\t\n\t error.framesToPop = 1; // we don't care about invariant's own frame\n\t throw error;\n\t }\n\t}\n\t\n\tmodule.exports = invariant;\n\n/***/ },\n/* 6 */\n/***/ function(module, exports) {\n\n\t\"use strict\";\n\t\n\t/**\n\t * Copyright (c) 2013-present, Facebook, Inc.\n\t * All rights reserved.\n\t *\n\t * This source code is licensed under the BSD-style license found in the\n\t * LICENSE file in the root directory of this source tree. An additional grant\n\t * of patent rights can be found in the PATENTS file in the same directory.\n\t *\n\t */\n\t\n\t/**\n\t * Allows extraction of a minified key. Let's the build system minify keys\n\t * without losing the ability to dynamically use key strings as values\n\t * themselves. Pass in an object with a single key/val pair and it will return\n\t * you the string key of that single record. Suppose you want to grab the\n\t * value for a key 'className' inside of an object. Key/val minification may\n\t * have aliased that key to be 'xa12'. keyOf({className: null}) will return\n\t * 'xa12' in that case. Resolve keys you want to use once at startup time, then\n\t * reuse those resolutions.\n\t */\n\tvar keyOf = function keyOf(oneKeyObj) {\n\t var key;\n\t for (key in oneKeyObj) {\n\t if (!oneKeyObj.hasOwnProperty(key)) {\n\t continue;\n\t }\n\t return key;\n\t }\n\t return null;\n\t};\n\t\n\tmodule.exports = keyOf;\n\n/***/ },\n/* 7 */\n/***/ function(module, exports) {\n\n\t'use strict';\n\t/* eslint-disable no-unused-vars */\n\tvar hasOwnProperty = Object.prototype.hasOwnProperty;\n\tvar propIsEnumerable = Object.prototype.propertyIsEnumerable;\n\t\n\tfunction toObject(val) {\n\t\tif (val === null || val === undefined) {\n\t\t\tthrow new TypeError('Object.assign cannot be called with null or undefined');\n\t\t}\n\t\n\t\treturn Object(val);\n\t}\n\t\n\tfunction shouldUseNative() {\n\t\ttry {\n\t\t\tif (!Object.assign) {\n\t\t\t\treturn false;\n\t\t\t}\n\t\n\t\t\t// Detect buggy property enumeration order in older V8 versions.\n\t\n\t\t\t// https://bugs.chromium.org/p/v8/issues/detail?id=4118\n\t\t\tvar test1 = new String('abc'); // eslint-disable-line\n\t\t\ttest1[5] = 'de';\n\t\t\tif (Object.getOwnPropertyNames(test1)[0] === '5') {\n\t\t\t\treturn false;\n\t\t\t}\n\t\n\t\t\t// https://bugs.chromium.org/p/v8/issues/detail?id=3056\n\t\t\tvar test2 = {};\n\t\t\tfor (var i = 0; i < 10; i++) {\n\t\t\t\ttest2['_' + String.fromCharCode(i)] = i;\n\t\t\t}\n\t\t\tvar order2 = Object.getOwnPropertyNames(test2).map(function (n) {\n\t\t\t\treturn test2[n];\n\t\t\t});\n\t\t\tif (order2.join('') !== '0123456789') {\n\t\t\t\treturn false;\n\t\t\t}\n\t\n\t\t\t// https://bugs.chromium.org/p/v8/issues/detail?id=3056\n\t\t\tvar test3 = {};\n\t\t\t'abcdefghijklmnopqrst'.split('').forEach(function (letter) {\n\t\t\t\ttest3[letter] = letter;\n\t\t\t});\n\t\t\tif (Object.keys(Object.assign({}, test3)).join('') !==\n\t\t\t\t\t'abcdefghijklmnopqrst') {\n\t\t\t\treturn false;\n\t\t\t}\n\t\n\t\t\treturn true;\n\t\t} catch (e) {\n\t\t\t// We don't expect any of the above to throw, but better to be safe.\n\t\t\treturn false;\n\t\t}\n\t}\n\t\n\tmodule.exports = shouldUseNative() ? Object.assign : function (target, source) {\n\t\tvar from;\n\t\tvar to = toObject(target);\n\t\tvar symbols;\n\t\n\t\tfor (var s = 1; s < arguments.length; s++) {\n\t\t\tfrom = Object(arguments[s]);\n\t\n\t\t\tfor (var key in from) {\n\t\t\t\tif (hasOwnProperty.call(from, key)) {\n\t\t\t\t\tto[key] = from[key];\n\t\t\t\t}\n\t\t\t}\n\t\n\t\t\tif (Object.getOwnPropertySymbols) {\n\t\t\t\tsymbols = Object.getOwnPropertySymbols(from);\n\t\t\t\tfor (var i = 0; i < symbols.length; i++) {\n\t\t\t\t\tif (propIsEnumerable.call(from, symbols[i])) {\n\t\t\t\t\t\tto[symbols[i]] = from[symbols[i]];\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\n\t\treturn to;\n\t};\n\n\n/***/ },\n/* 8 */\n/***/ function(module, exports, __webpack_require__) {\n\n\tmodule.exports = __webpack_require__(13);\n\n/***/ },\n/* 9 */\n/***/ function(module, exports, __webpack_require__) {\n\n\t(function webpackUniversalModuleDefinition(root, factory) {\n\t\tif(true)\n\t\t\tmodule.exports = factory(__webpack_require__(1));\n\t\telse if(typeof define === 'function' && define.amd)\n\t\t\tdefine([\"react\"], factory);\n\t\telse if(typeof exports === 'object')\n\t\t\texports[\"Dropzone\"] = factory(require(\"react\"));\n\t\telse\n\t\t\troot[\"Dropzone\"] = factory(root[\"react\"]);\n\t})(this, function(__WEBPACK_EXTERNAL_MODULE_2__) {\n\treturn /******/ (function(modules) { // webpackBootstrap\n\t/******/ \t// The module cache\n\t/******/ \tvar installedModules = {};\n\t/******/\n\t/******/ \t// The require function\n\t/******/ \tfunction __webpack_require__(moduleId) {\n\t/******/\n\t/******/ \t\t// Check if module is in cache\n\t/******/ \t\tif(installedModules[moduleId])\n\t/******/ \t\t\treturn installedModules[moduleId].exports;\n\t/******/\n\t/******/ \t\t// Create a new module (and put it into the cache)\n\t/******/ \t\tvar module = installedModules[moduleId] = {\n\t/******/ \t\t\texports: {},\n\t/******/ \t\t\tid: moduleId,\n\t/******/ \t\t\tloaded: false\n\t/******/ \t\t};\n\t/******/\n\t/******/ \t\t// Execute the module function\n\t/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\t/******/\n\t/******/ \t\t// Flag the module as loaded\n\t/******/ \t\tmodule.loaded = true;\n\t/******/\n\t/******/ \t\t// Return the exports of the module\n\t/******/ \t\treturn module.exports;\n\t/******/ \t}\n\t/******/\n\t/******/\n\t/******/ \t// expose the modules object (__webpack_modules__)\n\t/******/ \t__webpack_require__.m = modules;\n\t/******/\n\t/******/ \t// expose the module cache\n\t/******/ \t__webpack_require__.c = installedModules;\n\t/******/\n\t/******/ \t// __webpack_public_path__\n\t/******/ \t__webpack_require__.p = \"\";\n\t/******/\n\t/******/ \t// Load entry module and return exports\n\t/******/ \treturn __webpack_require__(0);\n\t/******/ })\n\t/************************************************************************/\n\t/******/ ([\n\t/* 0 */\n\t/***/ function(module, exports, __webpack_require__) {\n\t\n\t\t'use strict';\n\t\t\n\t\tObject.defineProperty(exports, \"__esModule\", {\n\t\t value: true\n\t\t});\n\t\t\n\t\tvar _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\n\t\t\n\t\tvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\t\t\n\t\tvar _attrAccept = __webpack_require__(1);\n\t\t\n\t\tvar _attrAccept2 = _interopRequireDefault(_attrAccept);\n\t\t\n\t\tvar _react = __webpack_require__(2);\n\t\t\n\t\tvar _react2 = _interopRequireDefault(_react);\n\t\t\n\t\tfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\t\t\n\t\tfunction _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }\n\t\t\n\t\tfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\t\t\n\t\tfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\t\t\n\t\tfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /* eslint prefer-template: 0 */\n\t\t\n\t\tvar supportMultiple = typeof document !== 'undefined' && document && document.createElement ? 'multiple' in document.createElement('input') : true;\n\t\t\n\t\tvar Dropzone = function (_React$Component) {\n\t\t _inherits(Dropzone, _React$Component);\n\t\t\n\t\t function Dropzone(props, context) {\n\t\t _classCallCheck(this, Dropzone);\n\t\t\n\t\t var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Dropzone).call(this, props, context));\n\t\t\n\t\t _this.onClick = _this.onClick.bind(_this);\n\t\t _this.onDragStart = _this.onDragStart.bind(_this);\n\t\t _this.onDragEnter = _this.onDragEnter.bind(_this);\n\t\t _this.onDragLeave = _this.onDragLeave.bind(_this);\n\t\t _this.onDragOver = _this.onDragOver.bind(_this);\n\t\t _this.onDrop = _this.onDrop.bind(_this);\n\t\t\n\t\t _this.state = {\n\t\t isDragActive: false\n\t\t };\n\t\t return _this;\n\t\t }\n\t\t\n\t\t _createClass(Dropzone, [{\n\t\t key: 'componentDidMount',\n\t\t value: function componentDidMount() {\n\t\t this.enterCounter = 0;\n\t\t }\n\t\t }, {\n\t\t key: 'onDragStart',\n\t\t value: function onDragStart(e) {\n\t\t if (this.props.onDragStart) {\n\t\t this.props.onDragStart.call(this, e);\n\t\t }\n\t\t }\n\t\t }, {\n\t\t key: 'onDragEnter',\n\t\t value: function onDragEnter(e) {\n\t\t e.preventDefault();\n\t\t\n\t\t // Count the dropzone and any children that are entered.\n\t\t ++this.enterCounter;\n\t\t\n\t\t // This is tricky. During the drag even the dataTransfer.files is null\n\t\t // But Chrome implements some drag store, which is accesible via dataTransfer.items\n\t\t var dataTransferItems = e.dataTransfer && e.dataTransfer.items ? e.dataTransfer.items : [];\n\t\t\n\t\t // Now we need to convert the DataTransferList to Array\n\t\t var allFilesAccepted = this.allFilesAccepted(Array.prototype.slice.call(dataTransferItems));\n\t\t\n\t\t this.setState({\n\t\t isDragActive: allFilesAccepted,\n\t\t isDragReject: !allFilesAccepted\n\t\t });\n\t\t\n\t\t if (this.props.onDragEnter) {\n\t\t this.props.onDragEnter.call(this, e);\n\t\t }\n\t\t }\n\t\t }, {\n\t\t key: 'onDragOver',\n\t\t value: function onDragOver(e) {\n\t\t e.preventDefault();\n\t\t e.stopPropagation();\n\t\t return false;\n\t\t }\n\t\t }, {\n\t\t key: 'onDragLeave',\n\t\t value: function onDragLeave(e) {\n\t\t e.preventDefault();\n\t\t\n\t\t // Only deactivate once the dropzone and all children was left.\n\t\t if (--this.enterCounter > 0) {\n\t\t return;\n\t\t }\n\t\t\n\t\t this.setState({\n\t\t isDragActive: false,\n\t\t isDragReject: false\n\t\t });\n\t\t\n\t\t if (this.props.onDragLeave) {\n\t\t this.props.onDragLeave.call(this, e);\n\t\t }\n\t\t }\n\t\t }, {\n\t\t key: 'onDrop',\n\t\t value: function onDrop(e) {\n\t\t e.preventDefault();\n\t\t\n\t\t // Reset the counter along with the drag on a drop.\n\t\t this.enterCounter = 0;\n\t\t\n\t\t this.setState({\n\t\t isDragActive: false,\n\t\t isDragReject: false\n\t\t });\n\t\t\n\t\t var droppedFiles = e.dataTransfer ? e.dataTransfer.files : e.target.files;\n\t\t var max = this.props.multiple ? droppedFiles.length : Math.min(droppedFiles.length, 1);\n\t\t var files = [];\n\t\t\n\t\t for (var i = 0; i < max; i++) {\n\t\t var file = droppedFiles[i];\n\t\t // We might want to disable the preview creation to support big files\n\t\t if (!this.props.disablePreview) {\n\t\t file.preview = window.URL.createObjectURL(file);\n\t\t }\n\t\t files.push(file);\n\t\t }\n\t\t\n\t\t if (this.allFilesAccepted(files)) {\n\t\t if (this.props.onDrop) {\n\t\t this.props.onDrop.call(this, files, e);\n\t\t }\n\t\t\n\t\t if (this.props.onDropAccepted) {\n\t\t this.props.onDropAccepted.call(this, files, e);\n\t\t }\n\t\t } else {\n\t\t if (this.props.onDropRejected) {\n\t\t this.props.onDropRejected.call(this, files, e);\n\t\t }\n\t\t }\n\t\t }\n\t\t }, {\n\t\t key: 'onClick',\n\t\t value: function onClick() {\n\t\t if (!this.props.disableClick) {\n\t\t this.open();\n\t\t }\n\t\t }\n\t\t }, {\n\t\t key: 'allFilesAccepted',\n\t\t value: function allFilesAccepted(files) {\n\t\t var _this2 = this;\n\t\t\n\t\t return files.every(function (file) {\n\t\t return (0, _attrAccept2.default)(file, _this2.props.accept);\n\t\t });\n\t\t }\n\t\t }, {\n\t\t key: 'open',\n\t\t value: function open() {\n\t\t this.fileInputEl.value = null;\n\t\t this.fileInputEl.click();\n\t\t }\n\t\t }, {\n\t\t key: 'render',\n\t\t value: function render() {\n\t\t var _this3 = this;\n\t\t\n\t\t var _props = this.props;\n\t\t var accept = _props.accept;\n\t\t var activeClassName = _props.activeClassName;\n\t\t var inputProps = _props.inputProps;\n\t\t var multiple = _props.multiple;\n\t\t var name = _props.name;\n\t\t var rejectClassName = _props.rejectClassName;\n\t\t\n\t\t var rest = _objectWithoutProperties(_props, ['accept', 'activeClassName', 'inputProps', 'multiple', 'name', 'rejectClassName']);\n\t\t\n\t\t var activeStyle = rest.activeStyle;\n\t\t var className = rest.className;\n\t\t var rejectStyle = rest.rejectStyle;\n\t\t var style = rest.style;\n\t\t\n\t\t var props = _objectWithoutProperties(rest, ['activeStyle', 'className', 'rejectStyle', 'style']);\n\t\t\n\t\t var _state = this.state;\n\t\t var isDragActive = _state.isDragActive;\n\t\t var isDragReject = _state.isDragReject;\n\t\t\n\t\t\n\t\t className = className || '';\n\t\t\n\t\t if (isDragActive && activeClassName) {\n\t\t className += ' ' + activeClassName;\n\t\t }\n\t\t if (isDragReject && rejectClassName) {\n\t\t className += ' ' + rejectClassName;\n\t\t }\n\t\t\n\t\t if (!className && !style && !activeStyle && !rejectStyle) {\n\t\t style = {\n\t\t width: 200,\n\t\t height: 200,\n\t\t borderWidth: 2,\n\t\t borderColor: '#666',\n\t\t borderStyle: 'dashed',\n\t\t borderRadius: 5\n\t\t };\n\t\t activeStyle = {\n\t\t borderStyle: 'solid',\n\t\t backgroundColor: '#eee'\n\t\t };\n\t\t rejectStyle = {\n\t\t borderStyle: 'solid',\n\t\t backgroundColor: '#ffdddd'\n\t\t };\n\t\t }\n\t\t\n\t\t var appliedStyle = void 0;\n\t\t if (activeStyle && isDragActive) {\n\t\t appliedStyle = _extends({}, style, activeStyle);\n\t\t } else if (rejectStyle && isDragReject) {\n\t\t appliedStyle = _extends({}, style, rejectStyle);\n\t\t } else {\n\t\t appliedStyle = _extends({}, style);\n\t\t }\n\t\t\n\t\t var inputAttributes = {\n\t\t accept: accept,\n\t\t type: 'file',\n\t\t style: { display: 'none' },\n\t\t multiple: supportMultiple && multiple,\n\t\t ref: function ref(el) {\n\t\t return _this3.fileInputEl = el;\n\t\t }, // eslint-disable-line\n\t\t onChange: this.onDrop\n\t\t };\n\t\t\n\t\t if (name && name.length) {\n\t\t inputAttributes.name = name;\n\t\t }\n\t\t\n\t\t // Remove custom properties before passing them to the wrapper div element\n\t\t var customProps = ['disablePreview', 'disableClick', 'onDropAccepted', 'onDropRejected'];\n\t\t var divProps = _extends({}, props);\n\t\t customProps.forEach(function (prop) {\n\t\t return delete divProps[prop];\n\t\t });\n\t\t\n\t\t return _react2.default.createElement(\n\t\t 'div',\n\t\t _extends({\n\t\t className: className,\n\t\t style: appliedStyle\n\t\t }, divProps /* expand user provided props first so event handlers are never overridden */, {\n\t\t onClick: this.onClick,\n\t\t onDragStart: this.onDragStart,\n\t\t onDragEnter: this.onDragEnter,\n\t\t onDragOver: this.onDragOver,\n\t\t onDragLeave: this.onDragLeave,\n\t\t onDrop: this.onDrop\n\t\t }),\n\t\t this.props.children,\n\t\t _react2.default.createElement('input', _extends({}, inputProps /* expand user provided inputProps first so inputAttributes override them */, inputAttributes))\n\t\t );\n\t\t }\n\t\t }]);\n\t\t\n\t\t return Dropzone;\n\t\t}(_react2.default.Component);\n\t\t\n\t\tDropzone.defaultProps = {\n\t\t disablePreview: false,\n\t\t disableClick: false,\n\t\t multiple: true\n\t\t};\n\t\t\n\t\tDropzone.propTypes = {\n\t\t // Overriding drop behavior\n\t\t onDrop: _react2.default.PropTypes.func,\n\t\t onDropAccepted: _react2.default.PropTypes.func,\n\t\t onDropRejected: _react2.default.PropTypes.func,\n\t\t\n\t\t // Overriding drag behavior\n\t\t onDragStart: _react2.default.PropTypes.func,\n\t\t onDragEnter: _react2.default.PropTypes.func,\n\t\t onDragLeave: _react2.default.PropTypes.func,\n\t\t\n\t\t children: _react2.default.PropTypes.node, // Contents of the dropzone\n\t\t style: _react2.default.PropTypes.object, // CSS styles to apply\n\t\t activeStyle: _react2.default.PropTypes.object, // CSS styles to apply when drop will be accepted\n\t\t rejectStyle: _react2.default.PropTypes.object, // CSS styles to apply when drop will be rejected\n\t\t className: _react2.default.PropTypes.string, // Optional className\n\t\t activeClassName: _react2.default.PropTypes.string, // className for accepted state\n\t\t rejectClassName: _react2.default.PropTypes.string, // className for rejected state\n\t\t\n\t\t disablePreview: _react2.default.PropTypes.bool, // Enable/disable preview generation\n\t\t disableClick: _react2.default.PropTypes.bool, // Disallow clicking on the dropzone container to open file dialog\n\t\t\n\t\t inputProps: _react2.default.PropTypes.object, // Pass additional attributes to the tag\n\t\t multiple: _react2.default.PropTypes.bool, // Allow dropping multiple files\n\t\t accept: _react2.default.PropTypes.string, // Allow specific types of files. See https://github.com/okonet/attr-accept for more information\n\t\t name: _react2.default.PropTypes.string // name attribute for the input tag\n\t\t};\n\t\t\n\t\texports.default = Dropzone;\n\t\tmodule.exports = exports['default'];\n\t\n\t/***/ },\n\t/* 1 */\n\t/***/ function(module, exports) {\n\t\n\t\tmodule.exports=function(t){function n(e){if(r[e])return r[e].exports;var o=r[e]={exports:{},id:e,loaded:!1};return t[e].call(o.exports,o,o.exports,n),o.loaded=!0,o.exports}var r={};return n.m=t,n.c=r,n.p=\"\",n(0)}([function(t,n,r){\"use strict\";n.__esModule=!0,r(8),r(9),n[\"default\"]=function(t,n){if(t&&n){var r=function(){var r=n.split(\",\"),e=t.name||\"\",o=t.type||\"\",i=o.replace(/\\/.*$/,\"\");return{v:r.some(function(t){var n=t.trim();return\".\"===n.charAt(0)?e.toLowerCase().endsWith(n.toLowerCase()):/\\/\\*$/.test(n)?i===n.replace(/\\/.*$/,\"\"):o===n})}}();if(\"object\"==typeof r)return r.v}return!0},t.exports=n[\"default\"]},function(t,n){var r=t.exports={version:\"1.2.2\"};\"number\"==typeof __e&&(__e=r)},function(t,n){var r=t.exports=\"undefined\"!=typeof window&&window.Math==Math?window:\"undefined\"!=typeof self&&self.Math==Math?self:Function(\"return this\")();\"number\"==typeof __g&&(__g=r)},function(t,n,r){var e=r(2),o=r(1),i=r(4),u=r(19),c=\"prototype\",f=function(t,n){return function(){return t.apply(n,arguments)}},s=function(t,n,r){var a,p,l,d,y=t&s.G,h=t&s.P,v=y?e:t&s.S?e[n]||(e[n]={}):(e[n]||{})[c],x=y?o:o[n]||(o[n]={});y&&(r=n);for(a in r)p=!(t&s.F)&&v&&a in v,l=(p?v:r)[a],d=t&s.B&&p?f(l,e):h&&\"function\"==typeof l?f(Function.call,l):l,v&&!p&&u(v,a,l),x[a]!=l&&i(x,a,d),h&&((x[c]||(x[c]={}))[a]=l)};e.core=o,s.F=1,s.G=2,s.S=4,s.P=8,s.B=16,s.W=32,t.exports=s},function(t,n,r){var e=r(5),o=r(18);t.exports=r(22)?function(t,n,r){return e.setDesc(t,n,o(1,r))}:function(t,n,r){return t[n]=r,t}},function(t,n){var r=Object;t.exports={create:r.create,getProto:r.getPrototypeOf,isEnum:{}.propertyIsEnumerable,getDesc:r.getOwnPropertyDescriptor,setDesc:r.defineProperty,setDescs:r.defineProperties,getKeys:r.keys,getNames:r.getOwnPropertyNames,getSymbols:r.getOwnPropertySymbols,each:[].forEach}},function(t,n){var r=0,e=Math.random();t.exports=function(t){return\"Symbol(\".concat(void 0===t?\"\":t,\")_\",(++r+e).toString(36))}},function(t,n,r){var e=r(20)(\"wks\"),o=r(2).Symbol;t.exports=function(t){return e[t]||(e[t]=o&&o[t]||(o||r(6))(\"Symbol.\"+t))}},function(t,n,r){r(26),t.exports=r(1).Array.some},function(t,n,r){r(25),t.exports=r(1).String.endsWith},function(t,n){t.exports=function(t){if(\"function\"!=typeof t)throw TypeError(t+\" is not a function!\");return t}},function(t,n){var r={}.toString;t.exports=function(t){return r.call(t).slice(8,-1)}},function(t,n,r){var e=r(10);t.exports=function(t,n,r){if(e(t),void 0===n)return t;switch(r){case 1:return function(r){return t.call(n,r)};case 2:return function(r,e){return t.call(n,r,e)};case 3:return function(r,e,o){return t.call(n,r,e,o)}}return function(){return t.apply(n,arguments)}}},function(t,n){t.exports=function(t){if(void 0==t)throw TypeError(\"Can't call method on \"+t);return t}},function(t,n,r){t.exports=function(t){var n=/./;try{\"/./\"[t](n)}catch(e){try{return n[r(7)(\"match\")]=!1,!\"/./\"[t](n)}catch(o){}}return!0}},function(t,n){t.exports=function(t){try{return!!t()}catch(n){return!0}}},function(t,n){t.exports=function(t){return\"object\"==typeof t?null!==t:\"function\"==typeof t}},function(t,n,r){var e=r(16),o=r(11),i=r(7)(\"match\");t.exports=function(t){var n;return e(t)&&(void 0!==(n=t[i])?!!n:\"RegExp\"==o(t))}},function(t,n){t.exports=function(t,n){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:n}}},function(t,n,r){var e=r(2),o=r(4),i=r(6)(\"src\"),u=\"toString\",c=Function[u],f=(\"\"+c).split(u);r(1).inspectSource=function(t){return c.call(t)},(t.exports=function(t,n,r,u){\"function\"==typeof r&&(o(r,i,t[n]?\"\"+t[n]:f.join(String(n))),\"name\"in r||(r.name=n)),t===e?t[n]=r:(u||delete t[n],o(t,n,r))})(Function.prototype,u,function(){return\"function\"==typeof this&&this[i]||c.call(this)})},function(t,n,r){var e=r(2),o=\"__core-js_shared__\",i=e[o]||(e[o]={});t.exports=function(t){return i[t]||(i[t]={})}},function(t,n,r){var e=r(17),o=r(13);t.exports=function(t,n,r){if(e(n))throw TypeError(\"String#\"+r+\" doesn't accept regex!\");return String(o(t))}},function(t,n,r){t.exports=!r(15)(function(){return 7!=Object.defineProperty({},\"a\",{get:function(){return 7}}).a})},function(t,n){var r=Math.ceil,e=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?e:r)(t)}},function(t,n,r){var e=r(23),o=Math.min;t.exports=function(t){return t>0?o(e(t),9007199254740991):0}},function(t,n,r){\"use strict\";var e=r(3),o=r(24),i=r(21),u=\"endsWith\",c=\"\"[u];e(e.P+e.F*r(14)(u),\"String\",{endsWith:function(t){var n=i(this,t,u),r=arguments,e=r.length>1?r[1]:void 0,f=o(n.length),s=void 0===e?f:Math.min(o(e),f),a=String(t);return c?c.call(n,a,s):n.slice(s-a.length,s)===a}})},function(t,n,r){var e=r(5),o=r(3),i=r(1).Array||Array,u={},c=function(t,n){e.each.call(t.split(\",\"),function(t){void 0==n&&t in i?u[t]=i[t]:t in[]&&(u[t]=r(12)(Function.call,[][t],n))})};c(\"pop,reverse,shift,keys,values,entries\",1),c(\"indexOf,every,some,forEach,map,filter,find,findIndex,includes\",3),c(\"join,slice,concat,push,splice,unshift,sort,lastIndexOf,reduce,reduceRight,copyWithin,fill\"),o(o.S,\"Array\",u)}]);\n\t\n\t/***/ },\n\t/* 2 */\n\t/***/ function(module, exports) {\n\t\n\t\tmodule.exports = __WEBPACK_EXTERNAL_MODULE_2__;\n\t\n\t/***/ }\n\t/******/ ])\n\t});\n\t;\n\t//# sourceMappingURL=index.js.map\n\n/***/ },\n/* 10 */\n/***/ function(module, exports, __webpack_require__) {\n\n\t/* REACT HOT LOADER */ if (false) { (function () { var ReactHotAPI = require(\"/Users/markmurray/Apps/react-slack-feedback/node_modules/react-hot-api/modules/index.js\"), RootInstanceProvider = require(\"/Users/markmurray/Apps/react-slack-feedback/node_modules/react-hot-loader/RootInstanceProvider.js\"), ReactMount = require(\"react/lib/ReactMount\"), React = require(\"react\"); module.makeHot = module.hot.data ? module.hot.data.makeHot : ReactHotAPI(function () { return RootInstanceProvider.getRootInstances(ReactMount); }, React); })(); } try { (function () {\n\t\n\t'use strict';\n\t\n\tObject.defineProperty(exports, \"__esModule\", {\n\t value: true\n\t});\n\t\n\tvar _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\n\t\n\tvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\t\n\tvar _react = __webpack_require__(1);\n\t\n\tvar _react2 = _interopRequireDefault(_react);\n\t\n\tvar _reactDom = __webpack_require__(16);\n\t\n\tvar _reactDom2 = _interopRequireDefault(_reactDom);\n\t\n\tvar _reactAddonsUpdate = __webpack_require__(8);\n\t\n\tvar _reactAddonsUpdate2 = _interopRequireDefault(_reactAddonsUpdate);\n\t\n\tvar _reactDropzone = __webpack_require__(9);\n\t\n\tvar _reactDropzone2 = _interopRequireDefault(_reactDropzone);\n\t\n\tvar _classnames = __webpack_require__(2);\n\t\n\tvar _classnames2 = _interopRequireDefault(_classnames);\n\t\n\tvar _SlackIcon = __webpack_require__(11);\n\t\n\tvar _SlackIcon2 = _interopRequireDefault(_SlackIcon);\n\t\n\t__webpack_require__(15);\n\t\n\tfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\t\n\tfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\t\n\tfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\t\n\tfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\t\n\t// classnames\n\t\n\t\n\t// Images\n\t\n\t\n\tvar propTypes = {\n\t channel: _react.PropTypes.string.isRequired,\n\t onSubmit: _react.PropTypes.func.isRequired,\n\t onImageUpload: _react.PropTypes.func,\n\t sending: _react.PropTypes.bool,\n\t user: _react.PropTypes.string,\n\t avatar: _react.PropTypes.string,\n\t emoji: _react.PropTypes.string,\n\t buttonText: _react.PropTypes.string,\n\t disableImageUpload: _react.PropTypes.bool,\n\t imageUploadText: _react.PropTypes.string\n\t};\n\t\n\tvar defaultProps = {\n\t sending: false,\n\t user: 'Unknown User',\n\t emoji: ':speaking_head_in_silhouette:',\n\t buttonText: 'Slack Feedback',\n\t disableImageUpload: false,\n\t imageUploadText: 'Attach Image'\n\t};\n\t\n\tvar types = [{ value: 'bug', label: 'Bug' }, { value: 'improvement', label: 'Improvement' }, { value: 'feature', label: 'Feature Request' }];\n\t\n\tvar SlackFeedback = function (_Component) {\n\t _inherits(SlackFeedback, _Component);\n\t\n\t function SlackFeedback(props) {\n\t _classCallCheck(this, SlackFeedback);\n\t\n\t var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(SlackFeedback).call(this, props));\n\t\n\t _this.state = {\n\t active: false,\n\t sendURL: true,\n\t sent: false,\n\t error: false,\n\t uploadingImage: false,\n\t selectedType: 'Bug',\n\t image: {}\n\t };\n\t\n\t _this.removeImage = _this.removeImage.bind(_this);\n\t _this.toggle = _this.toggle.bind(_this);\n\t return _this;\n\t }\n\t\n\t _createClass(SlackFeedback, [{\n\t key: 'toggle',\n\t value: function toggle() {\n\t if (this.state.active) {\n\t this.close();\n\t } else {\n\t this.activate();\n\t }\n\t }\n\t }, {\n\t key: 'activate',\n\t value: function activate() {\n\t this.setState({\n\t active: !this.state.active\n\t });\n\t\n\t document.addEventListener('click', this.handleClickOutside.bind(this));\n\t }\n\t }, {\n\t key: 'handleClickOutside',\n\t value: function handleClickOutside(event) {\n\t\n\t if (event.defaultPrevented) return;\n\t\n\t if (!this.refs.SlackFeedback.contains(event.target)) {\n\t this.close();\n\t }\n\t }\n\t }, {\n\t key: 'close',\n\t value: function close() {\n\t this.setState({\n\t active: false\n\t });\n\t\n\t document.removeEventListener('click', this.handleClickOutside.bind(this));\n\t }\n\t }, {\n\t key: 'toggleSendURL',\n\t value: function toggleSendURL() {\n\t this.setState({\n\t sendURL: !this.state.sendURL\n\t });\n\t }\n\t }, {\n\t key: 'selectType',\n\t value: function selectType(e) {\n\t this.setState({\n\t selectedType: e.target.innerText\n\t });\n\t }\n\t }, {\n\t key: 'determineErrorType',\n\t value: function determineErrorType(err) {\n\t if (!err) return 'ERROR!';\n\t\n\t switch (err.status) {\n\t case 400:\n\t return 'Bad Request!';\n\t case 403:\n\t return 'Forbidden!';\n\t case 404:\n\t return 'Channel Not Found!';\n\t case 410:\n\t return 'Channel is Archived!';\n\t case 500:\n\t return 'Server Error!';\n\t default:\n\t return 'ERROR!';\n\t }\n\t }\n\t }, {\n\t key: 'error',\n\t value: function error(err) {\n\t var _this2 = this;\n\t\n\t console.warn(err);\n\t\n\t this.setState({\n\t sending: false,\n\t error: this.determineErrorType(err)\n\t }, function () {\n\t setTimeout(function () {\n\t _this2.setState({ error: null });\n\t }, 8 * 1000);\n\t });\n\t }\n\t }, {\n\t key: 'sent',\n\t value: function sent() {\n\t var _this3 = this;\n\t\n\t this.setState({\n\t sending: false,\n\t sent: true,\n\t image: {},\n\t error: false\n\t }, function () {\n\t _this3.refs.message.value = '';\n\t setTimeout(function () {\n\t _this3.setState({ sent: false });\n\t }, 5 * 1000);\n\t });\n\t }\n\t }, {\n\t key: 'send',\n\t value: function send() {\n\t var _state = this.state;\n\t var selectedType = _state.selectedType;\n\t var sendURL = _state.sendURL;\n\t var image = _state.image;\n\t\n\t var message = this.refs.message.value;\n\t var level;\n\t\n\t this.setState({\n\t sending: true\n\t });\n\t\n\t // Attach the curent URL\n\t if (sendURL) message += '\\n <' + document.location.href + '>';\n\t\n\t // Slack accepts 3 color levels: danger (red), good (green) and warning (orange)\n\t switch (selectedType) {\n\t case 'Bug':\n\t level = 'danger';\n\t break;\n\t case 'Feature':\n\t level = 'good';\n\t break;\n\t case 'Improvement':\n\t level = 'warning';\n\t break;\n\t }\n\t\n\t var payload = {\n\t channel: this.props.channel,\n\t username: this.props.user,\n\t icon_emoji: this.props.emoji,\n\t attachments: [{\n\t fallback: 'Feedback (' + selectedType + ')',\n\t author_name: this.props.user,\n\t color: level,\n\t title: selectedType,\n\t title_link: document.location.href,\n\t text: message,\n\t footer: 'React Slack Feedback'\n\t }]\n\t };\n\t\n\t // Attach the image (if available)\n\t if (image.url) payload.attachments[0].image_url = image.url;\n\t\n\t // Submit the payload\n\t this.props.onSubmit.call(this, payload);\n\t }\n\t }, {\n\t key: 'attachImage',\n\t value: function attachImage(event) {\n\t var _this4 = this;\n\t\n\t var files = event.target.files;\n\t\n\t\n\t var file = files[0];\n\t file.preview = window.URL.createObjectURL(file);\n\t\n\t this.setState({\n\t image: file,\n\t uploadingImage: true\n\t }, function () {\n\t _this4.props.onImageUpload.call(_this4, file);\n\t });\n\t }\n\t }, {\n\t key: 'imageUploaded',\n\t value: function imageUploaded(url) {\n\t if (typeof url !== 'string') {\n\t console.error('[SlackFeedback] `url` argument in `imageUploaded` method must be a string');\n\t this.removeImage();\n\t return;\n\t }\n\t\n\t // Merge the image URL with the file object,\n\t // the resulting object will contain only the preview and the URL.\n\t // Any file information will be lost\n\t var image = _extends({}, this.state.image, { url: url });\n\t\n\t this.setState({\n\t uploadingImage: false,\n\t image: image\n\t });\n\t }\n\t }, {\n\t key: 'renderDropzone',\n\t value: function renderDropzone() {\n\t var _this5 = this;\n\t\n\t if (this.props.disableImageUpload) return null;\n\t if (this.state.image.preview) return null;\n\t\n\t return _react2.default.createElement(\n\t 'div',\n\t { className: 'SlackFeedback-image-upload' },\n\t _react2.default.createElement(\n\t 'label',\n\t { className: 'SlackFeedback-image-upload-button', htmlFor: 'imageUpload' },\n\t this.props.imageUploadText\n\t ),\n\t _react2.default.createElement('input', {\n\t id: 'imageUpload',\n\t type: 'file',\n\t accept: 'image/*',\n\t style: { display: 'none' },\n\t onChange: function onChange(event) {\n\t return _this5.attachImage(event);\n\t }\n\t })\n\t );\n\t }\n\t }, {\n\t key: 'removeImage',\n\t value: function removeImage(event) {\n\t if (event) event.preventDefault();\n\t\n\t this.setState({\n\t image: {},\n\t uploadingImage: false\n\t });\n\t }\n\t }, {\n\t key: 'renderImagePreview',\n\t value: function renderImagePreview() {\n\t var _state2 = this.state;\n\t var image = _state2.image;\n\t var uploadingImage = _state2.uploadingImage;\n\t\n\t if (!image.preview) return null;\n\t\n\t return _react2.default.createElement(\n\t 'div',\n\t { className: 'SlackFeedback--image-preview', style: {\n\t backgroundImage: 'url(' + this.state.image.preview + ')'\n\t } },\n\t uploadingImage ? _react2.default.createElement('div', { className: 'SlackFeedback--loader' }) : _react2.default.createElement(\n\t 'div',\n\t { className: 'SlackFeedback--preview-overlay' },\n\t _react2.default.createElement(\n\t 'span',\n\t { onClick: this.removeImage },\n\t 'Remove'\n\t )\n\t )\n\t );\n\t }\n\t }, {\n\t key: 'render',\n\t value: function render() {\n\t var _state3 = this.state;\n\t var active = _state3.active;\n\t var sending = _state3.sending;\n\t var sent = _state3.sent;\n\t var error = _state3.error;\n\t var image = _state3.image;\n\t var sendURL = _state3.sendURL;\n\t var selectedType = _state3.selectedType;\n\t var uploadingImage = _state3.uploadingImage;\n\t\n\t\n\t var submitText = 'Send Feedback';\n\t\n\t if (sent) submitText = 'Sent!';\n\t if (sending && !sent) submitText = 'Sending Feedback...';\n\t if (error) submitText = error;\n\t\n\t return _react2.default.createElement(\n\t 'div',\n\t { ref: 'SlackFeedback', id: 'SlackFeedback', className: (0, _classnames2.default)('SlackFeedback', { active: active }) },\n\t _react2.default.createElement(\n\t 'div',\n\t { ref: 'container', className: 'SlackFeedback--container fadeInUp' },\n\t _react2.default.createElement(\n\t 'div',\n\t { className: 'SlackFeedback--header' },\n\t _react2.default.createElement(_SlackIcon2.default, null),\n\t ' Send Feedback to Slack',\n\t _react2.default.createElement(\n\t 'div',\n\t { className: 'close', onClick: this.close.bind(this) },\n\t 'close'\n\t )\n\t ),\n\t _react2.default.createElement(\n\t 'div',\n\t { className: 'SlackFeedback--content' },\n\t _react2.default.createElement(\n\t 'label',\n\t { className: 'SlackFeedback--label' },\n\t 'Channel'\n\t ),\n\t _react2.default.createElement('input', { className: 'SlackFeedback--input', value: this.props.channel, disabled: true }),\n\t _react2.default.createElement(\n\t 'label',\n\t { className: 'SlackFeedback--label' },\n\t 'Feedback Type'\n\t ),\n\t _react2.default.createElement(\n\t 'ul',\n\t { className: 'SlackFeedback--tabs' },\n\t _react2.default.createElement(\n\t 'li',\n\t { onClick: this.selectType.bind(this), className: (0, _classnames2.default)({\n\t selected: selectedType === 'Bug'\n\t }) },\n\t 'Bug'\n\t ),\n\t _react2.default.createElement(\n\t 'li',\n\t { onClick: this.selectType.bind(this), className: (0, _classnames2.default)({\n\t selected: selectedType === 'Feature'\n\t }) },\n\t 'Feature'\n\t ),\n\t _react2.default.createElement(\n\t 'li',\n\t { onClick: this.selectType.bind(this), className: (0, _classnames2.default)({\n\t selected: selectedType === 'Improvement'\n\t }) },\n\t 'Improvement'\n\t )\n\t ),\n\t _react2.default.createElement(\n\t 'label',\n\t { className: 'SlackFeedback--label' },\n\t 'Your Message'\n\t ),\n\t _react2.default.createElement('textarea', { ref: 'message', className: 'SlackFeedback--textarea', placeholder: 'Message...' }),\n\t this.renderDropzone(),\n\t this.renderImagePreview(),\n\t _react2.default.createElement(\n\t 'div',\n\t { style: { padding: '0.5em 0 1em' } },\n\t _react2.default.createElement('input', { id: 'sendURL', className: 'SlackFeedback--checkbox', type: 'checkbox', checked: sendURL, onChange: this.toggleSendURL.bind(this) }),\n\t _react2.default.createElement(\n\t 'label',\n\t { htmlFor: 'sendURL', className: 'SlackFeedback--checkbox-label' },\n\t 'Send URL with Feedback'\n\t )\n\t ),\n\t _react2.default.createElement(\n\t 'button',\n\t {\n\t className: (0, _classnames2.default)('submit', { sent: sent, error: error, disabled: sending || uploadingImage }),\n\t onClick: this.send.bind(this) },\n\t submitText\n\t )\n\t )\n\t ),\n\t _react2.default.createElement(\n\t 'div',\n\t {\n\t className: (0, _classnames2.default)('SlackFeedback--trigger', { active: active }),\n\t onClick: this.toggle },\n\t _react2.default.createElement(_SlackIcon2.default, null),\n\t ' ',\n\t this.props.buttonText\n\t )\n\t );\n\t }\n\t }]);\n\t\n\t return SlackFeedback;\n\t}(_react.Component);\n\t\n\tSlackFeedback.propTypes = propTypes;\n\tSlackFeedback.defaultProps = defaultProps;\n\t\n\texports.default = SlackFeedback;\n\t\n\t/* REACT HOT LOADER */ }).call(this); } finally { if (false) { (function () { var foundReactClasses = module.hot.data && module.hot.data.foundReactClasses || false; if (module.exports && module.makeHot) { var makeExportsHot = require(\"/Users/markmurray/Apps/react-slack-feedback/node_modules/react-hot-loader/makeExportsHot.js\"); if (makeExportsHot(module, require(\"react\"))) { foundReactClasses = true; } var shouldAcceptModule = true && foundReactClasses; if (shouldAcceptModule) { module.hot.accept(function (err) { if (err) { console.error(\"Cannot not apply hot update to \" + \"SlackFeedback.js\" + \": \" + err.message); } }); } } module.hot.dispose(function (data) { data.makeHot = module.makeHot; data.foundReactClasses = foundReactClasses; }); })(); } }\n\n/***/ },\n/* 11 */\n/***/ function(module, exports, __webpack_require__) {\n\n\t/* REACT HOT LOADER */ if (false) { (function () { var ReactHotAPI = require(\"/Users/markmurray/Apps/react-slack-feedback/node_modules/react-hot-api/modules/index.js\"), RootInstanceProvider = require(\"/Users/markmurray/Apps/react-slack-feedback/node_modules/react-hot-loader/RootInstanceProvider.js\"), ReactMount = require(\"react/lib/ReactMount\"), React = require(\"react\"); module.makeHot = module.hot.data ? module.hot.data.makeHot : ReactHotAPI(function () { return RootInstanceProvider.getRootInstances(ReactMount); }, React); })(); } try { (function () {\n\t\n\t\"use strict\";\n\t\n\tObject.defineProperty(exports, \"__esModule\", {\n\t value: true\n\t});\n\texports.default = SlackIcon;\n\t\n\tvar _react = __webpack_require__(1);\n\t\n\tvar _react2 = _interopRequireDefault(_react);\n\t\n\tfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\t\n\tfunction SlackIcon() {\n\t return _react2.default.createElement(\n\t \"svg\",\n\t { id: \"SlackIcon\", width: \"16px\", height: \"16px\", viewBox: \"0 0 256 256\", version: \"1.1\", xmlns: \"http://www.w3.org/2000/svg\", xmlnsXlink: \"http://www.w3.org/1999/xlink\", preserveAspectRatio: \"xMidYMid\" },\n\t _react2.default.createElement(\n\t \"g\",\n\t null,\n\t _react2.default.createElement(\"path\", { d: \"M165.963541,15.8384262 C162.07318,3.86308197 149.212328,-2.69009836 137.239082,1.20236066 C125.263738,5.09272131 118.710557,17.9535738 122.603016,29.9268197 L181.550164,211.292328 C185.597902,222.478689 197.682361,228.765377 209.282098,225.426885 C221.381246,221.943607 228.756984,209.093246 224.896,197.21023 C224.749115,196.756984 165.963541,15.8384262 165.963541,15.8384262\", fill: \"#DFA22F\" }),\n\t _react2.default.createElement(\"path\", { d: \"M74.6260984,45.515541 C70.7336393,33.5422951 57.8727869,26.9891148 45.899541,30.8794754 C33.9241967,34.7698361 27.3710164,47.6306885 31.2634754,59.6060328 L90.210623,240.971541 C94.2583607,252.157902 106.34282,258.44459 117.942557,255.104 C130.041705,251.62282 137.417443,238.772459 133.556459,226.887344 C133.409574,226.436197 74.6260984,45.515541 74.6260984,45.515541\", fill: \"#3CB187\" }),\n\t _react2.default.createElement(\"path\", { d: \"M240.161574,166.045377 C252.136918,162.155016 258.688,149.294164 254.797639,137.31882 C250.907279,125.345574 238.046426,118.792393 226.07318,122.682754 L44.7076721,181.632 C33.5213115,185.677639 27.234623,197.762098 30.5731148,209.361836 C34.0563934,221.460984 46.9067541,228.836721 58.7897705,224.975738 C59.2430164,224.828852 240.161574,166.045377 240.161574,166.045377\", fill: \"#CE1E5B\" }),\n\t _react2.default.createElement(\"path\", { d: \"M82.507541,217.270557 C94.312918,213.434754 109.528131,208.491016 125.855475,203.186361 C122.019672,191.380984 117.075934,176.163672 111.76918,159.83423 L68.4191475,173.924721 L82.507541,217.270557\", fill: \"#392538\" }),\n\t _react2.default.createElement(\"path\", { d: \"M173.847082,187.591344 C190.235279,182.267803 205.467279,177.31777 217.195016,173.507148 C213.359213,161.70177 208.413377,146.480262 203.106623,130.146623 L159.75659,144.237115 L173.847082,187.591344\", fill: \"#BB242A\" }),\n\t _react2.default.createElement(\"path\", { d: \"M210.484459,74.7058361 C222.457705,70.8154754 229.010885,57.954623 225.120525,45.9792787 C221.230164,34.0060328 208.369311,27.4528525 196.393967,31.3432131 L15.028459,90.292459 C3.84209836,94.3380984 -2.44459016,106.422557 0.896,118.022295 C4.37718033,130.121443 17.227541,137.49718 29.1126557,133.636197 C29.5638033,133.489311 210.484459,74.7058361 210.484459,74.7058361\", fill: \"#72C5CD\" }),\n\t _react2.default.createElement(\"path\", { d: \"M52.8220328,125.933115 C64.6274098,122.097311 79.8468197,117.151475 96.1762623,111.84682 C90.8527213,95.4565246 85.9026885,80.2245246 82.0920656,68.4946885 L38.731541,82.5872787 L52.8220328,125.933115\", fill: \"#248C73\" }),\n\t _react2.default.createElement(\"path\", { d: \"M144.159475,96.256 C160.551869,90.9303607 175.785967,85.9803279 187.515803,82.1676066 C182.190164,65.7752131 177.240131,50.5390164 173.42741,38.807082 L130.068984,52.8996721 L144.159475,96.256\", fill: \"#62803A\" })\n\t )\n\t );\n\t}\n\t\n\t/* REACT HOT LOADER */ }).call(this); } finally { if (false) { (function () { var foundReactClasses = module.hot.data && module.hot.data.foundReactClasses || false; if (module.exports && module.makeHot) { var makeExportsHot = require(\"/Users/markmurray/Apps/react-slack-feedback/node_modules/react-hot-loader/makeExportsHot.js\"); if (makeExportsHot(module, require(\"react\"))) { foundReactClasses = true; } var shouldAcceptModule = true && foundReactClasses; if (shouldAcceptModule) { module.hot.accept(function (err) { if (err) { console.error(\"Cannot not apply hot update to \" + \"SlackIcon.js\" + \": \" + err.message); } }); } } module.hot.dispose(function (data) { data.makeHot = module.makeHot; data.foundReactClasses = foundReactClasses; }); })(); } }\n\n/***/ },\n/* 12 */\n/***/ function(module, exports) {\n\n\t/**\n\t * Copyright (c) 2013-present, Facebook, Inc.\n\t * All rights reserved.\n\t *\n\t * This source code is licensed under the BSD-style license found in the\n\t * LICENSE file in the root directory of this source tree. An additional grant\n\t * of patent rights can be found in the PATENTS file in the same directory.\n\t *\n\t * @providesModule reactProdInvariant\n\t * \n\t */\n\t'use strict';\n\t\n\t/**\n\t * WARNING: DO NOT manually require this module.\n\t * This is a replacement for `invariant(...)` used by the error code system\n\t * and will _only_ be required by the corresponding babel pass.\n\t * It always throws.\n\t */\n\t\n\tfunction reactProdInvariant(code) {\n\t var argCount = arguments.length - 1;\n\t\n\t var message = 'Minified React error #' + code + '; visit ' + 'http://facebook.github.io/react/docs/error-decoder.html?invariant=' + code;\n\t\n\t for (var argIdx = 0; argIdx < argCount; argIdx++) {\n\t message += '&args[]=' + encodeURIComponent(arguments[argIdx + 1]);\n\t }\n\t\n\t message += ' for the full message or use the non-minified dev environment' + ' for full errors and additional helpful warnings.';\n\t\n\t var error = new Error(message);\n\t error.name = 'Invariant Violation';\n\t error.framesToPop = 1; // we don't care about reactProdInvariant's own frame\n\t\n\t throw error;\n\t}\n\t\n\tmodule.exports = reactProdInvariant;\n\n/***/ },\n/* 13 */\n/***/ function(module, exports, __webpack_require__) {\n\n\t/**\n\t * Copyright 2013-present, Facebook, Inc.\n\t * All rights reserved.\n\t *\n\t * This source code is licensed under the BSD-style license found in the\n\t * LICENSE file in the root directory of this source tree. An additional grant\n\t * of patent rights can be found in the PATENTS file in the same directory.\n\t *\n\t * @providesModule update\n\t */\n\t\n\t/* global hasOwnProperty:true */\n\t\n\t'use strict';\n\t\n\tvar _prodInvariant = __webpack_require__(12),\n\t _assign = __webpack_require__(7);\n\t\n\tvar keyOf = __webpack_require__(6);\n\tvar invariant = __webpack_require__(5);\n\tvar hasOwnProperty = {}.hasOwnProperty;\n\t\n\tfunction shallowCopy(x) {\n\t if (Array.isArray(x)) {\n\t return x.concat();\n\t } else if (x && typeof x === 'object') {\n\t return _assign(new x.constructor(), x);\n\t } else {\n\t return x;\n\t }\n\t}\n\t\n\tvar COMMAND_PUSH = keyOf({ $push: null });\n\tvar COMMAND_UNSHIFT = keyOf({ $unshift: null });\n\tvar COMMAND_SPLICE = keyOf({ $splice: null });\n\tvar COMMAND_SET = keyOf({ $set: null });\n\tvar COMMAND_MERGE = keyOf({ $merge: null });\n\tvar COMMAND_APPLY = keyOf({ $apply: null });\n\t\n\tvar ALL_COMMANDS_LIST = [COMMAND_PUSH, COMMAND_UNSHIFT, COMMAND_SPLICE, COMMAND_SET, COMMAND_MERGE, COMMAND_APPLY];\n\t\n\tvar ALL_COMMANDS_SET = {};\n\t\n\tALL_COMMANDS_LIST.forEach(function (command) {\n\t ALL_COMMANDS_SET[command] = true;\n\t});\n\t\n\tfunction invariantArrayCase(value, spec, command) {\n\t !Array.isArray(value) ? false ? invariant(false, 'update(): expected target of %s to be an array; got %s.', command, value) : _prodInvariant('1', command, value) : void 0;\n\t var specValue = spec[command];\n\t !Array.isArray(specValue) ? false ? invariant(false, 'update(): expected spec of %s to be an array; got %s. Did you forget to wrap your parameter in an array?', command, specValue) : _prodInvariant('2', command, specValue) : void 0;\n\t}\n\t\n\t/**\n\t * Returns a updated shallow copy of an object without mutating the original.\n\t * See https://facebook.github.io/react/docs/update.html for details.\n\t */\n\tfunction update(value, spec) {\n\t !(typeof spec === 'object') ? false ? invariant(false, 'update(): You provided a key path to update() that did not contain one of %s. Did you forget to include {%s: ...}?', ALL_COMMANDS_LIST.join(', '), COMMAND_SET) : _prodInvariant('3', ALL_COMMANDS_LIST.join(', '), COMMAND_SET) : void 0;\n\t\n\t if (hasOwnProperty.call(spec, COMMAND_SET)) {\n\t !(Object.keys(spec).length === 1) ? false ? invariant(false, 'Cannot have more than one key in an object with %s', COMMAND_SET) : _prodInvariant('4', COMMAND_SET) : void 0;\n\t\n\t return spec[COMMAND_SET];\n\t }\n\t\n\t var nextValue = shallowCopy(value);\n\t\n\t if (hasOwnProperty.call(spec, COMMAND_MERGE)) {\n\t var mergeObj = spec[COMMAND_MERGE];\n\t !(mergeObj && typeof mergeObj === 'object') ? false ? invariant(false, 'update(): %s expects a spec of type \\'object\\'; got %s', COMMAND_MERGE, mergeObj) : _prodInvariant('5', COMMAND_MERGE, mergeObj) : void 0;\n\t !(nextValue && typeof nextValue === 'object') ? false ? invariant(false, 'update(): %s expects a target of type \\'object\\'; got %s', COMMAND_MERGE, nextValue) : _prodInvariant('6', COMMAND_MERGE, nextValue) : void 0;\n\t _assign(nextValue, spec[COMMAND_MERGE]);\n\t }\n\t\n\t if (hasOwnProperty.call(spec, COMMAND_PUSH)) {\n\t invariantArrayCase(value, spec, COMMAND_PUSH);\n\t spec[COMMAND_PUSH].forEach(function (item) {\n\t nextValue.push(item);\n\t });\n\t }\n\t\n\t if (hasOwnProperty.call(spec, COMMAND_UNSHIFT)) {\n\t invariantArrayCase(value, spec, COMMAND_UNSHIFT);\n\t spec[COMMAND_UNSHIFT].forEach(function (item) {\n\t nextValue.unshift(item);\n\t });\n\t }\n\t\n\t if (hasOwnProperty.call(spec, COMMAND_SPLICE)) {\n\t !Array.isArray(value) ? false ? invariant(false, 'Expected %s target to be an array; got %s', COMMAND_SPLICE, value) : _prodInvariant('7', COMMAND_SPLICE, value) : void 0;\n\t !Array.isArray(spec[COMMAND_SPLICE]) ? false ? invariant(false, 'update(): expected spec of %s to be an array of arrays; got %s. Did you forget to wrap your parameters in an array?', COMMAND_SPLICE, spec[COMMAND_SPLICE]) : _prodInvariant('8', COMMAND_SPLICE, spec[COMMAND_SPLICE]) : void 0;\n\t spec[COMMAND_SPLICE].forEach(function (args) {\n\t !Array.isArray(args) ? false ? invariant(false, 'update(): expected spec of %s to be an array of arrays; got %s. Did you forget to wrap your parameters in an array?', COMMAND_SPLICE, spec[COMMAND_SPLICE]) : _prodInvariant('8', COMMAND_SPLICE, spec[COMMAND_SPLICE]) : void 0;\n\t nextValue.splice.apply(nextValue, args);\n\t });\n\t }\n\t\n\t if (hasOwnProperty.call(spec, COMMAND_APPLY)) {\n\t !(typeof spec[COMMAND_APPLY] === 'function') ? false ? invariant(false, 'update(): expected spec of %s to be a function; got %s.', COMMAND_APPLY, spec[COMMAND_APPLY]) : _prodInvariant('9', COMMAND_APPLY, spec[COMMAND_APPLY]) : void 0;\n\t nextValue = spec[COMMAND_APPLY](nextValue);\n\t }\n\t\n\t for (var k in spec) {\n\t if (!(ALL_COMMANDS_SET.hasOwnProperty(k) && ALL_COMMANDS_SET[k])) {\n\t nextValue[k] = update(value[k], spec[k]);\n\t }\n\t }\n\t\n\t return nextValue;\n\t}\n\t\n\tmodule.exports = update;\n\n/***/ },\n/* 14 */\n/***/ function(module, exports, __webpack_require__) {\n\n\t/*\r\n\t\tMIT License http://www.opensource.org/licenses/mit-license.php\r\n\t\tAuthor Tobias Koppers @sokra\r\n\t*/\r\n\tvar stylesInDom = {},\r\n\t\tmemoize = function(fn) {\r\n\t\t\tvar memo;\r\n\t\t\treturn function () {\r\n\t\t\t\tif (typeof memo === \"undefined\") memo = fn.apply(this, arguments);\r\n\t\t\t\treturn memo;\r\n\t\t\t};\r\n\t\t},\r\n\t\tisOldIE = memoize(function() {\r\n\t\t\treturn /msie [6-9]\\b/.test(window.navigator.userAgent.toLowerCase());\r\n\t\t}),\r\n\t\tgetHeadElement = memoize(function () {\r\n\t\t\treturn document.head || document.getElementsByTagName(\"head\")[0];\r\n\t\t}),\r\n\t\tsingletonElement = null,\r\n\t\tsingletonCounter = 0,\r\n\t\tstyleElementsInsertedAtTop = [];\r\n\t\r\n\tmodule.exports = function(list, options) {\r\n\t\tif(false) {\r\n\t\t\tif(typeof document !== \"object\") throw new Error(\"The style-loader cannot be used in a non-browser environment\");\r\n\t\t}\r\n\t\r\n\t\toptions = options || {};\r\n\t\t// Force single-tag solution on IE6-9, which has a hard limit on the # of