├── .babelrc ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── dist ├── Feedback.js └── feeder-react-feedback.css ├── package-lock.json ├── package.json ├── postcss.config.js ├── src ├── Feedback-Styles.scss ├── Feedback.js ├── Modal-Styles.scss ├── Modal.js ├── Trigger-Styles.scss ├── Trigger.js ├── base.scss ├── close.svg └── feedback.svg └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react", "env", "stage-0"] 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | /node_modules 3 | /.pnp 4 | .pnp.js 5 | /demo 6 | 7 | # testing 8 | /coverage 9 | 10 | # production 11 | /build 12 | 13 | # misc 14 | .DS_Store 15 | .env.local 16 | .env.development.local 17 | .env.test.local 18 | .env.production.local 19 | 20 | npm-debug.log* 21 | yarn-debug.log* 22 | yarn-error.log* 23 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src 2 | webpack.config.js 3 | .babelrc 4 | .eslintrc.js 5 | demo -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2020 Rishi Prasad 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![npm version](https://img.shields.io/npm/v/feeder-react-feedback.svg)](https://www.npmjs.com/package/feeder-react-feedback) 2 | [![bundle size](https://img.shields.io/bundlephobia/min/feeder-react-feedback.svg)](https://www.npmjs.com/package/feeder-react-feedback) 3 | [![stars](https://img.shields.io/github/stars/rishipr/feeder-react-feedback.svg)](https://www.npmjs.com/package/feeder-react-feedback) 4 | [![npm](https://img.shields.io/npm/dm/feeder-react-feedback.svg)](https://www.npmjs.com/package/feeder-react-feedback) 5 | 6 | # Feeder: feeder-react-feedback 7 | 8 | ![Feeder Banner](https://i.imgur.com/e56rlxF.png) 9 | 10 | Embeddable Feedback React component hooked up to an [admin dashboard](http://feeder.sh/). The fastest way to start collecting feedback across your React projects! ⚡ 11 | 12 | ## Quick Links 13 | 14 | ### External 15 | 16 | - [Component Demo/Playground](http://feeder-xi.now.sh/) 17 | - [Admin Dashboard](http://feeder.sh/) 18 | 19 | ### Documentation 20 | 21 | - [Feeder: feeder-react-feedback](#feeder-feeder-react-feedback) 22 | - [Quick Links](#quick-links) 23 | - [External](#external) 24 | - [Documentation](#documentation) 25 | - [Features](#features) 26 | - [Install via NPM](#install-via-npm) 27 | - [Usage](#usage) 28 | - [Props](#props) 29 | - [API](#api) 30 | - [URL & Endpoint](#url--endpoint) 31 | - [Create Feedback Endpoint Fields](#create-feedback-endpoint-fields) 32 | - [Custom Styling](#custom-styling) 33 | - [FAQs](#faqs) 34 | - [What is the Admin Dashboard?](#what-is-the-admin-dashboard) 35 | - [Will this work with SSR React frameworks?](#will-this-work-with-ssr-react-frameworks) 36 | - [Tips](#tips) 37 | - [Default Email Value](#default-email-value) 38 | - [Subprojects](#subprojects) 39 | 40 | ## Features 41 | 42 | - **Collect Feedback**: Collect and view feedback for across your react projects in a sortable data table 43 | - **Customize Freely**: Match the component to your project's style guide and color scheme (see [props](#props) for more information) 44 | - **Share Projects**: Add unlimited collaborators to projects 45 | - **Export your Data**: Export project-specific feedback to CSV 46 | - **Email Notifications**: Enable project-specific email notifications that trigger every time a user submits a new piece of feedback 47 | 48 | ## Install via NPM 49 | 50 | `npm install feeder-react-feedback` 51 | 52 | ## Usage 53 | 54 | If you want the Feedback trigger to be included on every page, add the `` component to your Layout/Wrapper/Global App component. 55 | 56 | Alternatively, if you want the Feedback trigger to be included on certain pages, embed the `` component in that specific page. 57 | 58 | ```javascript 59 | import Feedback from "feeder-react-feedback"; // import Feedback component 60 | import "feeder-react-feedback/dist/feeder-react-feedback.css"; // import stylesheet 61 | 62 | class App extends Component { 63 | render() { 64 | // See all customizable props below 65 | return ; 66 | } 67 | } 68 | ``` 69 | 70 | After importing the component, create an Account/Project on the [admin dashboard](http://feeder.sh/) and pass in your project's `projectId` as a prop to the `Feedback` component. 71 | 72 | ## Props 73 | 74 | | prop | description | type | required | default | 75 | | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ---------------- | -------- | -------------------------- | 76 | | **projectId** | **Unique project id from admin app** | **string** | **yes** | **null** | 77 | | email | Whether email input field is included | boolean | no | false | 78 | | emailRequired | Whether email input field, if included, is required | boolean | no | false | 79 | | emailDefaultValue | Default value for email input field | string | no | null | 80 | | feedbackTypes | Specify **exactly 2 or 3** custom feedback types | array of strings | no | ["general", "bug", "idea"] | 81 | | hoverBorderColor | Hover, active and focus border color (inputs, button) - can accept any value that is valid for the CSS3 `color` property (hex, rgba, etc.) | string | no | "#000000" | 82 | | postSubmitButtonMsg | Submit button text after submission | string | no | "Thanks!" | 83 | | projectName | Project's top-level name | string | no | null | 84 | | primaryColor | Primary color (header, buttons, trigger) - can accept any value that is valid for the CSS3 `color` property (hex, rgba, etc.) | string | no | "#ffffff" | 85 | | submitButtonMsg | Submit button text | string | no | "Send Feedback" | 86 | | subProject | Project within top-level project | string | no | null | 87 | | textColor | Text color - can accept any value that is valid for the CSS3 `color` property (hex, rgba, etc.) | string | no | "#000000" | 88 | | zIndex | z-index of Modal and Trigger Button | string | no | "100000000" | 89 | 90 | --- 91 | 92 | ## API 93 | 94 | If you want to render your own Feedback form/modal, but still have access to the Feeder monitoring system/admin dashboard, you can send a `POST` request to the Feeder API directly. 95 | 96 | ### URL & Endpoint 97 | 98 | Send a `POST` request to Feeder's "create feedback" endpoint and make sure to pass in all required endpoint fields. 99 | 100 | - `Create Feedback Endpoint`: https://feeder-node-1337.herokuapp.com/feedback/create 101 | 102 | ### Create Feedback Endpoint Fields 103 | 104 | The following should be passed as an object in the post request to `/feedback/create`. Requests without all the required fields will fail. 105 | 106 | - `projectId`: required (create an account on Feeder, create a project, and copy your projectId) 107 | - `feedbackMsg`: optional (but no reason not to have this!) 108 | - `feedbackType`: optional 109 | - `feedbackEmail`: optional 110 | - `subProject`: optional 111 | - `feedbackSrc`: optional 112 | 113 | ## Custom Styling 114 | 115 | You can override any CSS classes in the Feedback component. Below is a list of CSS classes used in the component, but the easiest way to find specific class names and styles to override is to use the browser tools and inspect the element you are targeting. 116 | 117 | - `frf-feedback-container`: wrapper container 118 | - `frf-trigger-button`: main trigger button that opens up modal 119 | - `frf-feedback-icon-open`: trigger button icon when modal is open 120 | - `frf-feedback-icon`: trigger button icon when modal is closed 121 | - `frf-dialog`: css transition class for fade in of modal 122 | - `frf-modal-container`: modal content 123 | - `frf-modal-content-container`: form content 124 | - `frf-modal-input-group`: form input label + input 125 | - `frf-modal-label`: form input label 126 | - `frf-modal-input`: form input 127 | - `frf-modal-feedback-types`: group of feedback types 128 | - `frf-modal-feedback-type`: individual feedback type 129 | - `frf-modal-feedback-selected`: selected feedback type 130 | - `frf-modal-button`: main submit button 131 | - `frf-modal-button-loader`: loading indicator when submitted 132 | - `frf-water`: "Feedback powered by Feeder.sh" watermark (if you want to hide this, just target this selector and add a `display: none`) 133 | 134 | ## FAQs 135 | 136 | ### What is the Admin Dashboard? 137 | 138 | The [admin dashboard](http://feeder.sh/) is where all the feedback for each project is collected. Each project has a unique id that is passed as a prop to the `` component. 139 | 140 | You can add collaborators to each project as well, which will give them the ability to view all the feedback for a given project. The admin dashboard also allows users to export all project-specific data to CSV. 141 | 142 | ### Will this work with SSR React frameworks? 143 | 144 | If you are using SSR React frameworks such as Gatsby or Next, you may run into something similar to the following error: 145 | 146 | `WebpackError: ReferenceError: document is not defined` 147 | 148 | During SSR builds, there is no `window` or `document` object (which exists in the browser). For now, your best bet is to use a lightweight package such as [loadable-components](https://github.com/gregberge/loadable-components), which will dynamically load the module on the client side (and not during SSR). 149 | 150 | ```javascript 151 | import loadable from "@loadable/component"; // npm install @loadable/component 152 | const Feedback = loadable(() => import("feeder-react-feedback/dist/Feedback")); // dynamically load Feedback component 153 | import "feeder-react-feedback/dist/feeder-react-feedback.css"; // import stylesheet 154 | 155 | class App extends Component { 156 | render() { 157 | return ; 158 | } 159 | } 160 | ``` 161 | 162 | ## Tips 163 | 164 | ### Default Email Value 165 | 166 | While it is possible to specify the inclusion of an email input field, you can set a default value for the email address while hiding the input field, thereby reducing user effort. This is especially relevent if/when you have access to an authenticated user's email in a global store such as Redux or the Context API. 167 | 168 | ```javascript 169 | class App extends Component { 170 | render() { 171 | return ( 172 | 176 | ); 177 | } 178 | } 179 | ``` 180 | 181 | ### Subprojects 182 | 183 | If you want to embed the `Feedback` component on multiple pages in the same web app/website but be able to distinguish between which page you are on, consider setting the `subProject` prop. That way, you can use a single top-level project name instead of creating different projects for each page you want to include the `Feedback` component on. 184 | 185 | ```javascript 186 | class ExampleComponentA extends Component { 187 | render() { 188 | return ; 189 | } 190 | } 191 | 192 | class ExampleComponentB extends Component { 193 | render() { 194 | return ; 195 | } 196 | } 197 | ``` 198 | -------------------------------------------------------------------------------- /dist/Feedback.js: -------------------------------------------------------------------------------- 1 | module.exports=function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=53)}([function(e,t){e.exports=require("react")},function(e,t,r){e.exports=r(55)()},function(e,t,r){"use strict";var n=r(13),o=Object.prototype.toString;function i(e){return"[object Array]"===o.call(e)}function a(e){return void 0===e}function s(e){return null!==e&&"object"==typeof e}function u(e){return"[object Function]"===o.call(e)}function l(e,t){if(null!=e)if("object"!=typeof e&&(e=[e]),i(e))for(var r=0,n=e.length;r=0||(o[r]=e[r]);return o}r.d(t,"a",(function(){return n}))},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){return"string"==typeof e&&n.test(e)};var n=/-webkit-|-moz-|-ms-/;e.exports=t.default},function(e,t,r){"use strict";function n(){return(n=Object.assign||function(e){for(var t=1;t=200&&e<300}};u.headers={common:{Accept:"application/json, text/plain, */*"}},n.forEach(["delete","get","head"],(function(e){u.headers[e]={}})),n.forEach(["post","put","patch"],(function(e){u.headers[e]=n.merge(i)})),e.exports=u}).call(this,r(67))},function(e,t,r){"use strict";var n=r(2),o=r(69),i=r(14),a=r(71),s=r(74),u=r(75),l=r(18);e.exports=function(e){return new Promise((function(t,c){var f=e.data,d=e.headers;n.isFormData(f)&&delete d["Content-Type"];var p=new XMLHttpRequest;if(e.auth){var m=e.auth.username||"",h=e.auth.password||"";d.Authorization="Basic "+btoa(m+":"+h)}var y=a(e.baseURL,e.url);if(p.open(e.method.toUpperCase(),i(y,e.params,e.paramsSerializer),!0),p.timeout=e.timeout,p.onreadystatechange=function(){if(p&&4===p.readyState&&(0!==p.status||p.responseURL&&0===p.responseURL.indexOf("file:"))){var r="getAllResponseHeaders"in p?s(p.getAllResponseHeaders()):null,n={data:e.responseType&&"text"!==e.responseType?p.response:p.responseText,status:p.status,statusText:p.statusText,headers:r,config:e,request:p};o(t,c,n),p=null}},p.onabort=function(){p&&(c(l("Request aborted",e,"ECONNABORTED",p)),p=null)},p.onerror=function(){c(l("Network Error",e,null,p)),p=null},p.ontimeout=function(){var t="timeout of "+e.timeout+"ms exceeded";e.timeoutErrorMessage&&(t=e.timeoutErrorMessage),c(l(t,e,"ECONNABORTED",p)),p=null},n.isStandardBrowserEnv()){var b=r(76),v=(e.withCredentials||u(y))&&e.xsrfCookieName?b.read(e.xsrfCookieName):void 0;v&&(d[e.xsrfHeaderName]=v)}if("setRequestHeader"in p&&n.forEach(d,(function(e,t){void 0===f&&"content-type"===t.toLowerCase()?delete d[t]:p.setRequestHeader(t,e)})),n.isUndefined(e.withCredentials)||(p.withCredentials=!!e.withCredentials),e.responseType)try{p.responseType=e.responseType}catch(t){if("json"!==e.responseType)throw t}"function"==typeof e.onDownloadProgress&&p.addEventListener("progress",e.onDownloadProgress),"function"==typeof e.onUploadProgress&&p.upload&&p.upload.addEventListener("progress",e.onUploadProgress),e.cancelToken&&e.cancelToken.promise.then((function(e){p&&(p.abort(),c(e),p=null)})),void 0===f&&(f=null),p.send(f)}))}},function(e,t,r){"use strict";var n=r(70);e.exports=function(e,t,r,o,i){var a=new Error(e);return n(a,t,r,o,i)}},function(e,t,r){"use strict";var n=r(2);e.exports=function(e,t){t=t||{};var r={},o=["url","method","params","data"],i=["headers","auth","proxy"],a=["baseURL","url","transformRequest","transformResponse","paramsSerializer","timeout","withCredentials","adapter","responseType","xsrfCookieName","xsrfHeaderName","onUploadProgress","onDownloadProgress","maxContentLength","validateStatus","maxRedirects","httpAgent","httpsAgent","cancelToken","socketPath"];n.forEach(o,(function(e){void 0!==t[e]&&(r[e]=t[e])})),n.forEach(i,(function(o){n.isObject(t[o])?r[o]=n.deepMerge(e[o],t[o]):void 0!==t[o]?r[o]=t[o]:n.isObject(e[o])?r[o]=n.deepMerge(e[o]):void 0!==e[o]&&(r[o]=e[o])})),n.forEach(a,(function(n){void 0!==t[n]?r[n]=t[n]:void 0!==e[n]&&(r[n]=e[n])}));var s=o.concat(i).concat(a),u=Object.keys(t).filter((function(e){return-1===s.indexOf(e)}));return n.forEach(u,(function(n){void 0!==t[n]?r[n]=t[n]:void 0!==e[n]&&(r[n]=e[n])})),r}},function(e,t,r){"use strict";function n(e){this.message=e}n.prototype.toString=function(){return"Cancel"+(this.message?": "+this.message:"")},n.prototype.__CANCEL__=!0,e.exports=n},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t,r,n,o){for(var i=0,a=e.length;i0&&(s[u]=c)}else{var m=(0,o.default)(r,u,l,s,t);m&&(s[u]=m),s=(0,n.default)(t,u,s)}}return s}};var n=s(r(82)),o=s(r(21)),i=s(r(22)),a=s(r(23));function s(e){return e&&e.__esModule?e:{default:e}}e.exports=t.default},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=function(){function e(e,t){for(var r=0;r1&&void 0!==arguments[1]?arguments[1]:function(e){return e};return function(){function e(){var r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};f(this,e);var n="undefined"!=typeof navigator?navigator.userAgent:void 0;if(this._userAgent=r.userAgent||n,this._keepUnprefixed=r.keepUnprefixed||!1,this._userAgent&&(this._browserInfo=(0,o.default)(this._userAgent)),!this._browserInfo||!this._browserInfo.cssPrefix)return this._useFallback=!0,!1;this.prefixedKeyframes=(0,i.default)(this._browserInfo.browserName,this._browserInfo.browserVersion,this._browserInfo.cssPrefix);var a=this._browserInfo.browserName&&t[this._browserInfo.browserName];if(a){for(var s in this._requiresPrefix={},a)a[s]>=this._browserInfo.browserVersion&&(this._requiresPrefix[s]=!0);this._hasPropsRequiringPrefix=Object.keys(this._requiresPrefix).length>0}else this._useFallback=!0;this._metaData={browserVersion:this._browserInfo.browserVersion,browserName:this._browserInfo.browserName,cssPrefix:this._browserInfo.cssPrefix,jsPrefix:this._browserInfo.jsPrefix,keepUnprefixed:this._keepUnprefixed,requiresPrefix:this._requiresPrefix}}return n(e,[{key:"prefix",value:function(e){return this._useFallback?c(e):this._hasPropsRequiringPrefix?this._prefixStyle(e):e}},{key:"_prefixStyle",value:function(e){for(var t in e){var n=e[t];if((0,u.default)(n))e[t]=this.prefix(n);else if(Array.isArray(n)){for(var o=[],i=0,c=n.length;i0&&(e[t]=o)}else{var d=(0,l.default)(r,t,n,e,this._metaData);d&&(e[t]=d),this._requiresPrefix.hasOwnProperty(t)&&(e[this._browserInfo.jsPrefix+(0,a.default)(t)]=n,this._keepUnprefixed||delete e[t])}}return e}}],[{key:"prefixAll",value:function(e){return c(e)}}]),e}()};var o=c(r(83)),i=c(r(86)),a=c(r(12)),s=c(r(22)),u=c(r(23)),l=c(r(21));function c(e){return e&&e.__esModule?e:{default:e}}function f(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}e.exports=t.default},function(e,t,r){"use strict";var n=r(28),o=r.n(n),i=r(29),a=r.n(i),s=r(30),u=r.n(s),l=r(31),c=r.n(l),f=r(32),d=r.n(f),p=r(33),m=r.n(p),h=r(34),y=r.n(h),b=r(35),v=r.n(b),g=r(36),x=r.n(g),S=r(37),k=r.n(S),w=r(38),O=r.n(w),E=r(39),_=r.n(E),C=["Webkit"],j=["Moz"],P=["ms"],M=["Webkit","Moz"],T=["Webkit","ms"],R=["Webkit","Moz","ms"];t.a={plugins:[o.a,a.a,u.a,c.a,d.a,m.a,y.a,v.a,x.a,k.a,O.a,_.a],prefixMap:{transform:T,transformOrigin:T,transformOriginX:T,transformOriginY:T,backfaceVisibility:C,perspective:C,perspectiveOrigin:C,transformStyle:C,transformOriginZ:C,animation:C,animationDelay:C,animationDirection:C,animationFillMode:C,animationDuration:C,animationIterationCount:C,animationName:C,animationPlayState:C,animationTimingFunction:C,appearance:M,userSelect:R,fontKerning:C,textEmphasisPosition:C,textEmphasis:C,textEmphasisStyle:C,textEmphasisColor:C,boxDecorationBreak:C,clipPath:C,maskImage:C,maskMode:C,maskRepeat:C,maskPosition:C,maskClip:C,maskOrigin:C,maskSize:C,maskComposite:C,mask:C,maskBorderSource:C,maskBorderMode:C,maskBorderSlice:C,maskBorderWidth:C,maskBorderOutset:C,maskBorderRepeat:C,maskBorder:C,maskType:C,textDecorationStyle:M,textDecorationSkip:M,textDecorationLine:M,textDecorationColor:M,filter:C,fontFeatureSettings:M,breakAfter:R,breakBefore:R,breakInside:R,columnCount:M,columnFill:M,columnGap:M,columnRule:M,columnRuleColor:M,columnRuleStyle:M,columnRuleWidth:M,columns:M,columnSpan:M,columnWidth:M,writingMode:T,flex:T,flexBasis:C,flexDirection:T,flexGrow:C,flexFlow:T,flexShrink:C,flexWrap:T,alignContent:C,alignItems:C,alignSelf:C,justifyContent:C,order:C,transitionDelay:C,transitionDuration:C,transitionProperty:C,transitionTimingFunction:C,backdropFilter:C,scrollSnapType:T,scrollSnapPointsX:T,scrollSnapPointsY:T,scrollSnapDestination:T,scrollSnapCoordinate:T,shapeImageThreshold:C,shapeImageMargin:C,shapeImageOutside:C,hyphens:R,flowInto:T,flowFrom:T,regionFragment:T,boxSizing:j,textAlignLast:j,tabSize:j,wrapFlow:P,wrapThrough:P,wrapMargin:P,touchAction:P,gridTemplateColumns:P,gridTemplateRows:P,gridTemplateAreas:P,gridTemplate:P,gridAutoColumns:P,gridAutoRows:P,gridAutoFlow:P,grid:P,gridRowStart:P,gridColumnStart:P,gridRowEnd:P,gridRow:P,gridColumn:P,gridColumnEnd:P,gridColumnGap:P,gridRowGap:P,gridArea:P,gridGap:P,textSizeAdjust:T,borderImage:C,borderImageOutset:C,borderImageRepeat:C,borderImageSlice:C,borderImageSource:C,borderImageWidth:C}}},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){if("string"==typeof t&&!(0,i.default)(t)&&t.indexOf("calc(")>-1)return a.map((function(e){return t.replace(/calc\(/g,e+"calc(")}))};var n,o=r(5),i=(n=o)&&n.__esModule?n:{default:n};var a=["-webkit-","-moz-",""];e.exports=t.default},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){if("string"==typeof t&&!(0,i.default)(t)&&t.indexOf("cross-fade(")>-1)return a.map((function(e){return t.replace(/cross-fade\(/g,e+"cross-fade(")}))};var n,o=r(5),i=(n=o)&&n.__esModule?n:{default:n};var a=["-webkit-",""];e.exports=t.default},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){if("cursor"===e&&o.hasOwnProperty(t))return n.map((function(e){return e+t}))};var n=["-webkit-","-moz-",""],o={"zoom-in":!0,"zoom-out":!0,grab:!0,grabbing:!0};e.exports=t.default},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){if("string"==typeof t&&!(0,i.default)(t)&&t.indexOf("filter(")>-1)return a.map((function(e){return t.replace(/filter\(/g,e+"filter(")}))};var n,o=r(5),i=(n=o)&&n.__esModule?n:{default:n};var a=["-webkit-",""];e.exports=t.default},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){if("display"===e&&n.hasOwnProperty(t))return n[t]};var n={flex:["-webkit-box","-moz-box","-ms-flexbox","-webkit-flex","flex"],"inline-flex":["-webkit-inline-box","-moz-inline-box","-ms-inline-flexbox","-webkit-inline-flex","inline-flex"]};e.exports=t.default},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t,r){o.hasOwnProperty(e)&&(r[o[e]]=n[t]||t)};var n={"space-around":"distribute","space-between":"justify","flex-start":"start","flex-end":"end"},o={alignContent:"msFlexLinePack",alignSelf:"msFlexItemAlign",alignItems:"msFlexAlign",justifyContent:"msFlexPack",order:"msFlexOrder",flexGrow:"msFlexPositive",flexShrink:"msFlexNegative",flexBasis:"msFlexPreferredSize"};e.exports=t.default},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t,r){"flexDirection"===e&&"string"==typeof t&&(t.indexOf("column")>-1?r.WebkitBoxOrient="vertical":r.WebkitBoxOrient="horizontal",t.indexOf("reverse")>-1?r.WebkitBoxDirection="reverse":r.WebkitBoxDirection="normal");o.hasOwnProperty(e)&&(r[o[e]]=n[t]||t)};var n={"space-around":"justify","space-between":"justify","flex-start":"start","flex-end":"end","wrap-reverse":"multiple",wrap:"multiple",flex:"box","inline-flex":"inline-box"},o={alignItems:"WebkitBoxAlign",justifyContent:"WebkitBoxPack",flexWrap:"WebkitBoxLines",flexGrow:"WebkitBoxFlex"};e.exports=t.default},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){if("string"==typeof t&&!(0,i.default)(t)&&s.test(t))return a.map((function(e){return t.replace(s,(function(t){return e+t}))}))};var n,o=r(5),i=(n=o)&&n.__esModule?n:{default:n};var a=["-webkit-","-moz-",""],s=/linear-gradient|radial-gradient|repeating-linear-gradient|repeating-radial-gradient/gi;e.exports=t.default},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){if("string"==typeof t&&!(0,i.default)(t)&&t.indexOf("image-set(")>-1)return a.map((function(e){return t.replace(/image-set\(/g,e+"image-set(")}))};var n,o=r(5),i=(n=o)&&n.__esModule?n:{default:n};var a=["-webkit-",""];e.exports=t.default},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){if("position"===e&&"sticky"===t)return["-webkit-sticky","sticky"]},e.exports=t.default},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){if(o.hasOwnProperty(e)&&i.hasOwnProperty(t))return n.map((function(e){return e+t}))};var n=["-webkit-","-moz-",""],o={maxHeight:!0,maxWidth:!0,width:!0,height:!0,columnWidth:!0,minWidth:!0,minHeight:!0},i={"min-content":!0,"max-content":!0,"fill-available":!0,"fit-content":!0,"contain-floats":!0};e.exports=t.default},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t,r,a){if("string"==typeof t&&s.hasOwnProperty(e)){var l=function(e,t){if((0,o.default)(e))return e;for(var r=e.split(/,(?![^()]*(?:\([^()]*\))?\))/g),i=0,a=r.length;i-1&&"order"!==f)for(var d=t[c],p=0,m=d.length;p-1)return c;var f=l.split(/,(?![^()]*(?:\([^()]*\))?\))/g).filter((function(e){return!/-webkit-|-ms-/.test(e)})).join(",");return e.indexOf("Moz")>-1?f:(r["Webkit"+(0,i.default)(e)]=c,r["Moz"+(0,i.default)(e)]=f,l)}};var n=a(r(24)),o=a(r(5)),i=a(r(12));function a(e){return e&&e.__esModule?e:{default:e}}var s={transition:!0,transitionProperty:!0,WebkitTransition:!0,WebkitTransitionProperty:!0,MozTransition:!0,MozTransitionProperty:!0},u={Webkit:"-webkit-",Moz:"-moz-",ms:"-ms-"};e.exports=t.default},function(e,t,r){"use strict";var n=r(41),o=r.n(n),i=r(42),a=r.n(i),s=r(43),u=r.n(s),l=r(44),c=r.n(l),f=r(45),d=r.n(f),p=r(46),m=r.n(p),h=r(47),y=r.n(h),b=r(48),v=r.n(b),g=r(49),x=r.n(g),S=r(50),k=r.n(S),w=r(51),O=r.n(w),E=r(52),_=r.n(E);t.a={plugins:[o.a,a.a,u.a,c.a,d.a,m.a,y.a,v.a,x.a,k.a,O.a,_.a],prefixMap:{chrome:{transform:35,transformOrigin:35,transformOriginX:35,transformOriginY:35,backfaceVisibility:35,perspective:35,perspectiveOrigin:35,transformStyle:35,transformOriginZ:35,animation:42,animationDelay:42,animationDirection:42,animationFillMode:42,animationDuration:42,animationIterationCount:42,animationName:42,animationPlayState:42,animationTimingFunction:42,appearance:66,userSelect:53,fontKerning:32,textEmphasisPosition:66,textEmphasis:66,textEmphasisStyle:66,textEmphasisColor:66,boxDecorationBreak:66,clipPath:54,maskImage:66,maskMode:66,maskRepeat:66,maskPosition:66,maskClip:66,maskOrigin:66,maskSize:66,maskComposite:66,mask:66,maskBorderSource:66,maskBorderMode:66,maskBorderSlice:66,maskBorderWidth:66,maskBorderOutset:66,maskBorderRepeat:66,maskBorder:66,maskType:66,textDecorationStyle:56,textDecorationSkip:56,textDecorationLine:56,textDecorationColor:56,filter:52,fontFeatureSettings:47,breakAfter:49,breakBefore:49,breakInside:49,columnCount:49,columnFill:49,columnGap:49,columnRule:49,columnRuleColor:49,columnRuleStyle:49,columnRuleWidth:49,columns:49,columnSpan:49,columnWidth:49,writingMode:47},safari:{flex:8,flexBasis:8,flexDirection:8,flexGrow:8,flexFlow:8,flexShrink:8,flexWrap:8,alignContent:8,alignItems:8,alignSelf:8,justifyContent:8,order:8,transition:6,transitionDelay:6,transitionDuration:6,transitionProperty:6,transitionTimingFunction:6,transform:8,transformOrigin:8,transformOriginX:8,transformOriginY:8,backfaceVisibility:8,perspective:8,perspectiveOrigin:8,transformStyle:8,transformOriginZ:8,animation:8,animationDelay:8,animationDirection:8,animationFillMode:8,animationDuration:8,animationIterationCount:8,animationName:8,animationPlayState:8,animationTimingFunction:8,appearance:11,userSelect:11,backdropFilter:11,fontKerning:9,scrollSnapType:10.1,scrollSnapPointsX:10.1,scrollSnapPointsY:10.1,scrollSnapDestination:10.1,scrollSnapCoordinate:10.1,textEmphasisPosition:7,textEmphasis:7,textEmphasisStyle:7,textEmphasisColor:7,boxDecorationBreak:11,clipPath:11,maskImage:11,maskMode:11,maskRepeat:11,maskPosition:11,maskClip:11,maskOrigin:11,maskSize:11,maskComposite:11,mask:11,maskBorderSource:11,maskBorderMode:11,maskBorderSlice:11,maskBorderWidth:11,maskBorderOutset:11,maskBorderRepeat:11,maskBorder:11,maskType:11,textDecorationStyle:11,textDecorationSkip:11,textDecorationLine:11,textDecorationColor:11,shapeImageThreshold:10,shapeImageMargin:10,shapeImageOutside:10,filter:9,hyphens:11,flowInto:11,flowFrom:11,breakBefore:8,breakAfter:8,breakInside:8,regionFragment:11,columnCount:8,columnFill:8,columnGap:8,columnRule:8,columnRuleColor:8,columnRuleStyle:8,columnRuleWidth:8,columns:8,columnSpan:8,columnWidth:8,writingMode:10.1},firefox:{appearance:60,userSelect:60,boxSizing:28,textAlignLast:48,textDecorationStyle:35,textDecorationSkip:35,textDecorationLine:35,textDecorationColor:35,tabSize:60,hyphens:42,fontFeatureSettings:33,breakAfter:51,breakBefore:51,breakInside:51,columnCount:51,columnFill:51,columnGap:51,columnRule:51,columnRuleColor:51,columnRuleStyle:51,columnRuleWidth:51,columns:51,columnSpan:51,columnWidth:51},opera:{flex:16,flexBasis:16,flexDirection:16,flexGrow:16,flexFlow:16,flexShrink:16,flexWrap:16,alignContent:16,alignItems:16,alignSelf:16,justifyContent:16,order:16,transform:22,transformOrigin:22,transformOriginX:22,transformOriginY:22,backfaceVisibility:22,perspective:22,perspectiveOrigin:22,transformStyle:22,transformOriginZ:22,animation:29,animationDelay:29,animationDirection:29,animationFillMode:29,animationDuration:29,animationIterationCount:29,animationName:29,animationPlayState:29,animationTimingFunction:29,appearance:50,userSelect:40,fontKerning:19,textEmphasisPosition:50,textEmphasis:50,textEmphasisStyle:50,textEmphasisColor:50,boxDecorationBreak:50,clipPath:41,maskImage:50,maskMode:50,maskRepeat:50,maskPosition:50,maskClip:50,maskOrigin:50,maskSize:50,maskComposite:50,mask:50,maskBorderSource:50,maskBorderMode:50,maskBorderSlice:50,maskBorderWidth:50,maskBorderOutset:50,maskBorderRepeat:50,maskBorder:50,maskType:50,textDecorationStyle:43,textDecorationSkip:43,textDecorationLine:43,textDecorationColor:43,filter:39,fontFeatureSettings:34,breakAfter:36,breakBefore:36,breakInside:36,columnCount:36,columnFill:36,columnGap:36,columnRule:36,columnRuleColor:36,columnRuleStyle:36,columnRuleWidth:36,columns:36,columnSpan:36,columnWidth:36,writingMode:34},ie:{flex:10,flexDirection:10,flexFlow:10,flexWrap:10,transform:9,transformOrigin:9,transformOriginX:9,transformOriginY:9,userSelect:11,wrapFlow:11,wrapThrough:11,wrapMargin:11,scrollSnapType:11,scrollSnapPointsX:11,scrollSnapPointsY:11,scrollSnapDestination:11,scrollSnapCoordinate:11,touchAction:10,hyphens:11,flowInto:11,flowFrom:11,breakBefore:11,breakAfter:11,breakInside:11,regionFragment:11,gridTemplateColumns:11,gridTemplateRows:11,gridTemplateAreas:11,gridTemplate:11,gridAutoColumns:11,gridAutoRows:11,gridAutoFlow:11,grid:11,gridRowStart:11,gridColumnStart:11,gridRowEnd:11,gridRow:11,gridColumn:11,gridColumnEnd:11,gridColumnGap:11,gridRowGap:11,gridArea:11,gridGap:11,textSizeAdjust:11,writingMode:11},edge:{userSelect:17,wrapFlow:17,wrapThrough:17,wrapMargin:17,scrollSnapType:17,scrollSnapPointsX:17,scrollSnapPointsY:17,scrollSnapDestination:17,scrollSnapCoordinate:17,hyphens:17,flowInto:17,flowFrom:17,breakBefore:17,breakAfter:17,breakInside:17,regionFragment:17,gridTemplateColumns:15,gridTemplateRows:15,gridTemplateAreas:15,gridTemplate:15,gridAutoColumns:15,gridAutoRows:15,gridAutoFlow:15,grid:15,gridRowStart:15,gridColumnStart:15,gridRowEnd:15,gridRow:15,gridColumn:15,gridColumnEnd:15,gridColumnGap:15,gridRowGap:15,gridArea:15,gridGap:15},ios_saf:{flex:8.1,flexBasis:8.1,flexDirection:8.1,flexGrow:8.1,flexFlow:8.1,flexShrink:8.1,flexWrap:8.1,alignContent:8.1,alignItems:8.1,alignSelf:8.1,justifyContent:8.1,order:8.1,transition:6,transitionDelay:6,transitionDuration:6,transitionProperty:6,transitionTimingFunction:6,transform:8.1,transformOrigin:8.1,transformOriginX:8.1,transformOriginY:8.1,backfaceVisibility:8.1,perspective:8.1,perspectiveOrigin:8.1,transformStyle:8.1,transformOriginZ:8.1,animation:8.1,animationDelay:8.1,animationDirection:8.1,animationFillMode:8.1,animationDuration:8.1,animationIterationCount:8.1,animationName:8.1,animationPlayState:8.1,animationTimingFunction:8.1,appearance:11,userSelect:11,backdropFilter:11,fontKerning:11,scrollSnapType:10.3,scrollSnapPointsX:10.3,scrollSnapPointsY:10.3,scrollSnapDestination:10.3,scrollSnapCoordinate:10.3,boxDecorationBreak:11,clipPath:11,maskImage:11,maskMode:11,maskRepeat:11,maskPosition:11,maskClip:11,maskOrigin:11,maskSize:11,maskComposite:11,mask:11,maskBorderSource:11,maskBorderMode:11,maskBorderSlice:11,maskBorderWidth:11,maskBorderOutset:11,maskBorderRepeat:11,maskBorder:11,maskType:11,textSizeAdjust:11,textDecorationStyle:11,textDecorationSkip:11,textDecorationLine:11,textDecorationColor:11,shapeImageThreshold:10,shapeImageMargin:10,shapeImageOutside:10,filter:9,hyphens:11,flowInto:11,flowFrom:11,breakBefore:8.1,breakAfter:8.1,breakInside:8.1,regionFragment:11,columnCount:8.1,columnFill:8.1,columnGap:8.1,columnRule:8.1,columnRuleColor:8.1,columnRuleStyle:8.1,columnRuleWidth:8.1,columns:8.1,columnSpan:8.1,columnWidth:8.1,writingMode:10.3},android:{borderImage:4.2,borderImageOutset:4.2,borderImageRepeat:4.2,borderImageSlice:4.2,borderImageSource:4.2,borderImageWidth:4.2,flex:4.2,flexBasis:4.2,flexDirection:4.2,flexGrow:4.2,flexFlow:4.2,flexShrink:4.2,flexWrap:4.2,alignContent:4.2,alignItems:4.2,alignSelf:4.2,justifyContent:4.2,order:4.2,transition:4.2,transitionDelay:4.2,transitionDuration:4.2,transitionProperty:4.2,transitionTimingFunction:4.2,transform:4.4,transformOrigin:4.4,transformOriginX:4.4,transformOriginY:4.4,backfaceVisibility:4.4,perspective:4.4,perspectiveOrigin:4.4,transformStyle:4.4,transformOriginZ:4.4,animation:4.4,animationDelay:4.4,animationDirection:4.4,animationFillMode:4.4,animationDuration:4.4,animationIterationCount:4.4,animationName:4.4,animationPlayState:4.4,animationTimingFunction:4.4,appearance:62,userSelect:4.4,fontKerning:4.4,textEmphasisPosition:62,textEmphasis:62,textEmphasisStyle:62,textEmphasisColor:62,boxDecorationBreak:62,clipPath:4.4,maskImage:62,maskMode:62,maskRepeat:62,maskPosition:62,maskClip:62,maskOrigin:62,maskSize:62,maskComposite:62,mask:62,maskBorderSource:62,maskBorderMode:62,maskBorderSlice:62,maskBorderWidth:62,maskBorderOutset:62,maskBorderRepeat:62,maskBorder:62,maskType:62,filter:4.4,fontFeatureSettings:4.4,breakAfter:4.4,breakBefore:4.4,breakInside:4.4,columnCount:4.4,columnFill:4.4,columnGap:4.4,columnRule:4.4,columnRuleColor:4.4,columnRuleStyle:4.4,columnRuleWidth:4.4,columns:4.4,columnSpan:4.4,columnWidth:4.4,writingMode:4.4},and_chr:{appearance:62,textEmphasisPosition:62,textEmphasis:62,textEmphasisStyle:62,textEmphasisColor:62,boxDecorationBreak:62,maskImage:62,maskMode:62,maskRepeat:62,maskPosition:62,maskClip:62,maskOrigin:62,maskSize:62,maskComposite:62,mask:62,maskBorderSource:62,maskBorderMode:62,maskBorderSlice:62,maskBorderWidth:62,maskBorderOutset:62,maskBorderRepeat:62,maskBorder:62,maskType:62},and_uc:{flex:11.4,flexBasis:11.4,flexDirection:11.4,flexGrow:11.4,flexFlow:11.4,flexShrink:11.4,flexWrap:11.4,alignContent:11.4,alignItems:11.4,alignSelf:11.4,justifyContent:11.4,order:11.4,transform:11.4,transformOrigin:11.4,transformOriginX:11.4,transformOriginY:11.4,backfaceVisibility:11.4,perspective:11.4,perspectiveOrigin:11.4,transformStyle:11.4,transformOriginZ:11.4,animation:11.4,animationDelay:11.4,animationDirection:11.4,animationFillMode:11.4,animationDuration:11.4,animationIterationCount:11.4,animationName:11.4,animationPlayState:11.4,animationTimingFunction:11.4,appearance:11.4,userSelect:11.4,textEmphasisPosition:11.4,textEmphasis:11.4,textEmphasisStyle:11.4,textEmphasisColor:11.4,clipPath:11.4,maskImage:11.4,maskMode:11.4,maskRepeat:11.4,maskPosition:11.4,maskClip:11.4,maskOrigin:11.4,maskSize:11.4,maskComposite:11.4,mask:11.4,maskBorderSource:11.4,maskBorderMode:11.4,maskBorderSlice:11.4,maskBorderWidth:11.4,maskBorderOutset:11.4,maskBorderRepeat:11.4,maskBorder:11.4,maskType:11.4,textSizeAdjust:11.4,filter:11.4,hyphens:11.4,fontFeatureSettings:11.4,breakAfter:11.4,breakBefore:11.4,breakInside:11.4,columnCount:11.4,columnFill:11.4,columnGap:11.4,columnRule:11.4,columnRuleColor:11.4,columnRuleStyle:11.4,columnRuleWidth:11.4,columns:11.4,columnSpan:11.4,columnWidth:11.4,writingMode:11.4},op_mini:{}}}},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t,r,n){var o=n.browserName,a=n.browserVersion,s=n.cssPrefix,u=n.keepUnprefixed;if("string"==typeof t&&t.indexOf("calc(")>-1&&("firefox"===o&&a<15||"chrome"===o&&a<25||"safari"===o&&a<6.1||"ios_saf"===o&&a<7))return(0,i.default)(t.replace(/calc\(/g,s+"calc("),t,u)};var n,o=r(3),i=(n=o)&&n.__esModule?n:{default:n};e.exports=t.default},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t,r,n){var o=n.browserName,a=n.browserVersion,s=n.cssPrefix,u=n.keepUnprefixed;if("string"==typeof t&&t.indexOf("cross-fade(")>-1&&("chrome"===o||"opera"===o||"and_chr"===o||("ios_saf"===o||"safari"===o)&&a<10))return(0,i.default)(t.replace(/cross-fade\(/g,s+"cross-fade("),t,u)};var n,o=r(3),i=(n=o)&&n.__esModule?n:{default:n};e.exports=t.default},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t,r,n){var o=n.browserName,u=n.browserVersion,l=n.cssPrefix,c=n.keepUnprefixed;if("cursor"===e&&a[t]&&("firefox"===o||"chrome"===o||"safari"===o||"opera"===o))return(0,i.default)(l+t,t,c);if("cursor"===e&&s[t]&&("firefox"===o&&u<24||"chrome"===o&&u<37||"safari"===o&&u<9||"opera"===o&&u<24))return(0,i.default)(l+t,t,c)};var n,o=r(3),i=(n=o)&&n.__esModule?n:{default:n};var a={grab:!0,grabbing:!0},s={"zoom-in":!0,"zoom-out":!0};e.exports=t.default},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t,r,n){var o=n.browserName,a=n.browserVersion,s=n.cssPrefix,u=n.keepUnprefixed;if("string"==typeof t&&t.indexOf("filter(")>-1&&("ios_saf"===o||"safari"===o&&a<9.1))return(0,i.default)(t.replace(/filter\(/g,s+"filter("),t,u)};var n,o=r(3),i=(n=o)&&n.__esModule?n:{default:n};e.exports=t.default},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t,r,n){var o=n.browserName,s=n.browserVersion,u=n.cssPrefix,l=n.keepUnprefixed;if("display"===e&&a[t]&&("chrome"===o&&s<29&&s>20||("safari"===o||"ios_saf"===o)&&s<9&&s>6||"opera"===o&&(15===s||16===s)))return(0,i.default)(u+t,t,l)};var n,o=r(3),i=(n=o)&&n.__esModule?n:{default:n};var a={flex:!0,"inline-flex":!0};e.exports=t.default},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t,r,n){var o=n.browserName,u=n.browserVersion,l=n.cssPrefix,c=n.keepUnprefixed,f=n.requiresPrefix;if((s.hasOwnProperty(e)||"display"===e&&"string"==typeof t&&t.indexOf("flex")>-1)&&("ie_mob"===o||"ie"===o)&&10===u){if(delete f[e],c||Array.isArray(r[e])||delete r[e],"display"===e&&a.hasOwnProperty(t))return(0,i.default)(l+a[t],t,c);s.hasOwnProperty(e)&&(r[s[e]]=a[t]||t)}};var n,o=r(3),i=(n=o)&&n.__esModule?n:{default:n};var a={"space-around":"distribute","space-between":"justify","flex-start":"start","flex-end":"end",flex:"flexbox","inline-flex":"inline-flexbox"},s={alignContent:"msFlexLinePack",alignSelf:"msFlexItemAlign",alignItems:"msFlexAlign",justifyContent:"msFlexPack",order:"msFlexOrder",flexGrow:"msFlexPositive",flexShrink:"msFlexNegative",flexBasis:"msFlexPreferredSize"};e.exports=t.default},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t,r,n){var o=n.browserName,l=n.browserVersion,c=n.cssPrefix,f=n.keepUnprefixed,d=n.requiresPrefix;if((u.indexOf(e)>-1||"display"===e&&"string"==typeof t&&t.indexOf("flex")>-1)&&("firefox"===o&&l<22||"chrome"===o&&l<21||("safari"===o||"ios_saf"===o)&&l<=6.1||"android"===o&&l<4.4||"and_uc"===o)){if(delete d[e],f||Array.isArray(r[e])||delete r[e],"flexDirection"===e&&"string"==typeof t&&(t.indexOf("column")>-1?r.WebkitBoxOrient="vertical":r.WebkitBoxOrient="horizontal",t.indexOf("reverse")>-1?r.WebkitBoxDirection="reverse":r.WebkitBoxDirection="normal"),"display"===e&&a.hasOwnProperty(t))return(0,i.default)(c+a[t],t,f);s.hasOwnProperty(e)&&(r[s[e]]=a[t]||t)}};var n,o=r(3),i=(n=o)&&n.__esModule?n:{default:n};var a={"space-around":"justify","space-between":"justify","flex-start":"start","flex-end":"end","wrap-reverse":"multiple",wrap:"multiple",flex:"box","inline-flex":"inline-box"},s={alignItems:"WebkitBoxAlign",justifyContent:"WebkitBoxPack",flexWrap:"WebkitBoxLines",flexGrow:"WebkitBoxFlex"},u=Object.keys(s).concat(["alignContent","alignSelf","order","flexGrow","flexShrink","flexBasis","flexDirection"]);e.exports=t.default},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t,r,n){var o=n.browserName,s=n.browserVersion,u=n.cssPrefix,l=n.keepUnprefixed;if("string"==typeof t&&a.test(t)&&("firefox"===o&&s<16||"chrome"===o&&s<26||("safari"===o||"ios_saf"===o)&&s<7||("opera"===o||"op_mini"===o)&&s<12.1||"android"===o&&s<4.4||"and_uc"===o))return(0,i.default)(t.replace(a,(function(e){return u+e})),t,l)};var n,o=r(3),i=(n=o)&&n.__esModule?n:{default:n};var a=/linear-gradient|radial-gradient|repeating-linear-gradient|repeating-radial-gradient/gi;e.exports=t.default},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t,r,n){var o=n.browserName,a=n.cssPrefix,s=n.keepUnprefixed;if("string"==typeof t&&t.indexOf("image-set(")>-1&&("chrome"===o||"opera"===o||"and_chr"===o||"and_uc"===o||"ios_saf"===o||"safari"===o))return(0,i.default)(t.replace(/image-set\(/g,a+"image-set("),t,s)};var n,o=r(3),i=(n=o)&&n.__esModule?n:{default:n};e.exports=t.default},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t,r,n){var o=n.browserName,a=n.cssPrefix,s=n.keepUnprefixed;if("position"===e&&"sticky"===t&&("safari"===o||"ios_saf"===o))return(0,i.default)(a+t,t,s)};var n,o=r(3),i=(n=o)&&n.__esModule?n:{default:n};e.exports=t.default},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t,r,n){var o=n.cssPrefix,u=n.keepUnprefixed;if(a.hasOwnProperty(e)&&s.hasOwnProperty(t))return(0,i.default)(o+t,t,u)};var n,o=r(3),i=(n=o)&&n.__esModule?n:{default:n};var a={maxHeight:!0,maxWidth:!0,width:!0,height:!0,columnWidth:!0,minWidth:!0,minHeight:!0},s={"min-content":!0,"max-content":!0,"fill-available":!0,"fit-content":!0,"contain-floats":!0};e.exports=t.default},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t,r,n){var o=n.cssPrefix,u=n.keepUnprefixed,l=n.requiresPrefix;if("string"==typeof t&&a.hasOwnProperty(e)){s||(s=Object.keys(l).map((function(e){return(0,i.default)(e)})));var c=t.split(/,(?![^()]*(?:\([^()]*\))?\))/g);return s.forEach((function(e){c.forEach((function(t,r){t.indexOf(e)>-1&&"order"!==e&&(c[r]=t.replace(e,o+e)+(u?","+t:""))}))})),c.join(",")}};var n,o=r(24),i=(n=o)&&n.__esModule?n:{default:n};var a={transition:!0,transitionProperty:!0,WebkitTransition:!0,WebkitTransitionProperty:!0,MozTransition:!0,MozTransitionProperty:!0},s=void 0;e.exports=t.default},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=function(){function e(e,t){for(var r=0;r1)for(var r=1;r=0)return;a[t]="set-cookie"===t?(a[t]?a[t]:[]).concat([r]):a[t]?a[t]+", "+r:r}})),a):a}},function(e,t,r){"use strict";var n=r(2);e.exports=n.isStandardBrowserEnv()?function(){var e,t=/(msie|trident)/i.test(navigator.userAgent),r=document.createElement("a");function o(e){var n=e;return t&&(r.setAttribute("href",n),n=r.href),r.setAttribute("href",n),{href:r.href,protocol:r.protocol?r.protocol.replace(/:$/,""):"",host:r.host,search:r.search?r.search.replace(/^\?/,""):"",hash:r.hash?r.hash.replace(/^#/,""):"",hostname:r.hostname,port:r.port,pathname:"/"===r.pathname.charAt(0)?r.pathname:"/"+r.pathname}}return e=o(window.location.href),function(t){var r=n.isString(t)?o(t):t;return r.protocol===e.protocol&&r.host===e.host}}():function(){return!0}},function(e,t,r){"use strict";var n=r(2);e.exports=n.isStandardBrowserEnv()?{write:function(e,t,r,o,i,a){var s=[];s.push(e+"="+encodeURIComponent(t)),n.isNumber(r)&&s.push("expires="+new Date(r).toGMTString()),n.isString(o)&&s.push("path="+o),n.isString(i)&&s.push("domain="+i),!0===a&&s.push("secure"),document.cookie=s.join("; ")},read:function(e){var t=document.cookie.match(new RegExp("(^|;\\s*)("+e+")=([^;]*)"));return t?decodeURIComponent(t[3]):null},remove:function(e){this.write(e,"",Date.now()-864e5)}}:{write:function(){},read:function(){return null},remove:function(){}}},function(e,t,r){"use strict";var n=r(20);function o(e){if("function"!=typeof e)throw new TypeError("executor must be a function.");var t;this.promise=new Promise((function(e){t=e}));var r=this;e((function(e){r.reason||(r.reason=new n(e),t(r.reason))}))}o.prototype.throwIfRequested=function(){if(this.reason)throw this.reason},o.source=function(){var e;return{token:new o((function(t){e=t})),cancel:e}},e.exports=o},function(e,t,r){"use strict";e.exports=function(e){return function(t){return e.apply(null,t)}}},function(e,t,r){"use strict";e.exports=r(80)},function(e,t,r){"use strict"; 7 | /** @license React v16.13.1 8 | * react-is.production.min.js 9 | * 10 | * Copyright (c) Facebook, Inc. and its affiliates. 11 | * 12 | * This source code is licensed under the MIT license found in the 13 | * LICENSE file in the root directory of this source tree. 14 | */var n="function"==typeof Symbol&&Symbol.for,o=n?Symbol.for("react.element"):60103,i=n?Symbol.for("react.portal"):60106,a=n?Symbol.for("react.fragment"):60107,s=n?Symbol.for("react.strict_mode"):60108,u=n?Symbol.for("react.profiler"):60114,l=n?Symbol.for("react.provider"):60109,c=n?Symbol.for("react.context"):60110,f=n?Symbol.for("react.async_mode"):60111,d=n?Symbol.for("react.concurrent_mode"):60111,p=n?Symbol.for("react.forward_ref"):60112,m=n?Symbol.for("react.suspense"):60113,h=n?Symbol.for("react.suspense_list"):60120,y=n?Symbol.for("react.memo"):60115,b=n?Symbol.for("react.lazy"):60116,v=n?Symbol.for("react.block"):60121,g=n?Symbol.for("react.fundamental"):60117,x=n?Symbol.for("react.responder"):60118,S=n?Symbol.for("react.scope"):60119;function k(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case o:switch(e=e.type){case f:case d:case a:case u:case s:case m:return e;default:switch(e=e&&e.$$typeof){case c:case p:case b:case y:case l:return e;default:return t}}case i:return t}}}function w(e){return k(e)===d}t.AsyncMode=f,t.ConcurrentMode=d,t.ContextConsumer=c,t.ContextProvider=l,t.Element=o,t.ForwardRef=p,t.Fragment=a,t.Lazy=b,t.Memo=y,t.Portal=i,t.Profiler=u,t.StrictMode=s,t.Suspense=m,t.isAsyncMode=function(e){return w(e)||k(e)===f},t.isConcurrentMode=w,t.isContextConsumer=function(e){return k(e)===c},t.isContextProvider=function(e){return k(e)===l},t.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===o},t.isForwardRef=function(e){return k(e)===p},t.isFragment=function(e){return k(e)===a},t.isLazy=function(e){return k(e)===b},t.isMemo=function(e){return k(e)===y},t.isPortal=function(e){return k(e)===i},t.isProfiler=function(e){return k(e)===u},t.isStrictMode=function(e){return k(e)===s},t.isSuspense=function(e){return k(e)===m},t.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===a||e===d||e===u||e===s||e===m||e===h||"object"==typeof e&&null!==e&&(e.$$typeof===b||e.$$typeof===y||e.$$typeof===l||e.$$typeof===c||e.$$typeof===p||e.$$typeof===g||e.$$typeof===x||e.$$typeof===S||e.$$typeof===v)},t.typeOf=k},function(e,t){var r;r=function(){return this}();try{r=r||new Function("return this")()}catch(e){"object"==typeof window&&(r=window)}e.exports=r},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t,r){if(e.hasOwnProperty(t)){for(var n={},o=e[t],a=(0,i.default)(t),s=Object.keys(r),u=0;ut.osVersion&&(t.browserVersion=t.osVersion);"android"===t.browserName&&t.chrome&&t.browserVersion>37&&(t.browserName="and_chr");"android"===t.browserName&&t.osVersion<5&&(t.browserVersion=t.osVersion);"android"===t.browserName&&t.samsungBrowser&&(t.browserName="and_chr",t.browserVersion=44);return t};var n,o=r(84),i=(n=o)&&n.__esModule?n:{default:n};var a={chrome:"Webkit",safari:"Webkit",ios:"Webkit",android:"Webkit",phantom:"Webkit",opera:"Webkit",webos:"Webkit",blackberry:"Webkit",bada:"Webkit",tizen:"Webkit",chromium:"Webkit",vivaldi:"Webkit",firefox:"Moz",seamoney:"Moz",sailfish:"Moz",msie:"ms",msedge:"ms"},s={chrome:"chrome",chromium:"chrome",safari:"safari",firfox:"firefox",msedge:"edge",opera:"opera",vivaldi:"opera",msie:"ie"};e.exports=t.default},function(e,t,r){var n;n=function(){var e=!0;function t(t){function r(e){var r=t.match(e);return r&&r.length>1&&r[1]||""}function n(e){var r=t.match(e);return r&&r.length>1&&r[2]||""}var o,a=r(/(ipod|iphone|ipad)/i).toLowerCase(),s=!/like android/i.test(t)&&/android/i.test(t),u=/nexus\s*[0-6]\s*/i.test(t),l=!u&&/nexus\s*[0-9]+/i.test(t),c=/CrOS/.test(t),f=/silk/i.test(t),d=/sailfish/i.test(t),p=/tizen/i.test(t),m=/(web|hpw)(o|0)s/i.test(t),h=/windows phone/i.test(t),y=(/SamsungBrowser/i.test(t),!h&&/windows/i.test(t)),b=!a&&!f&&/macintosh/i.test(t),v=!s&&!d&&!p&&!m&&/linux/i.test(t),g=n(/edg([ea]|ios)\/(\d+(\.\d+)?)/i),x=r(/version\/(\d+(\.\d+)?)/i),S=/tablet/i.test(t)&&!/tablet pc/i.test(t),k=!S&&/[^-]mobi/i.test(t),w=/xbox/i.test(t);/opera/i.test(t)?o={name:"Opera",opera:e,version:x||r(/(?:opera|opr|opios)[\s\/](\d+(\.\d+)?)/i)}:/opr\/|opios/i.test(t)?o={name:"Opera",opera:e,version:r(/(?:opr|opios)[\s\/](\d+(\.\d+)?)/i)||x}:/SamsungBrowser/i.test(t)?o={name:"Samsung Internet for Android",samsungBrowser:e,version:x||r(/(?:SamsungBrowser)[\s\/](\d+(\.\d+)?)/i)}:/Whale/i.test(t)?o={name:"NAVER Whale browser",whale:e,version:r(/(?:whale)[\s\/](\d+(?:\.\d+)+)/i)}:/MZBrowser/i.test(t)?o={name:"MZ Browser",mzbrowser:e,version:r(/(?:MZBrowser)[\s\/](\d+(?:\.\d+)+)/i)}:/coast/i.test(t)?o={name:"Opera Coast",coast:e,version:x||r(/(?:coast)[\s\/](\d+(\.\d+)?)/i)}:/focus/i.test(t)?o={name:"Focus",focus:e,version:r(/(?:focus)[\s\/](\d+(?:\.\d+)+)/i)}:/yabrowser/i.test(t)?o={name:"Yandex Browser",yandexbrowser:e,version:x||r(/(?:yabrowser)[\s\/](\d+(\.\d+)?)/i)}:/ucbrowser/i.test(t)?o={name:"UC Browser",ucbrowser:e,version:r(/(?:ucbrowser)[\s\/](\d+(?:\.\d+)+)/i)}:/mxios/i.test(t)?o={name:"Maxthon",maxthon:e,version:r(/(?:mxios)[\s\/](\d+(?:\.\d+)+)/i)}:/epiphany/i.test(t)?o={name:"Epiphany",epiphany:e,version:r(/(?:epiphany)[\s\/](\d+(?:\.\d+)+)/i)}:/puffin/i.test(t)?o={name:"Puffin",puffin:e,version:r(/(?:puffin)[\s\/](\d+(?:\.\d+)?)/i)}:/sleipnir/i.test(t)?o={name:"Sleipnir",sleipnir:e,version:r(/(?:sleipnir)[\s\/](\d+(?:\.\d+)+)/i)}:/k-meleon/i.test(t)?o={name:"K-Meleon",kMeleon:e,version:r(/(?:k-meleon)[\s\/](\d+(?:\.\d+)+)/i)}:h?(o={name:"Windows Phone",osname:"Windows Phone",windowsphone:e},g?(o.msedge=e,o.version=g):(o.msie=e,o.version=r(/iemobile\/(\d+(\.\d+)?)/i))):/msie|trident/i.test(t)?o={name:"Internet Explorer",msie:e,version:r(/(?:msie |rv:)(\d+(\.\d+)?)/i)}:c?o={name:"Chrome",osname:"Chrome OS",chromeos:e,chromeBook:e,chrome:e,version:r(/(?:chrome|crios|crmo)\/(\d+(\.\d+)?)/i)}:/edg([ea]|ios)/i.test(t)?o={name:"Microsoft Edge",msedge:e,version:g}:/vivaldi/i.test(t)?o={name:"Vivaldi",vivaldi:e,version:r(/vivaldi\/(\d+(\.\d+)?)/i)||x}:d?o={name:"Sailfish",osname:"Sailfish OS",sailfish:e,version:r(/sailfish\s?browser\/(\d+(\.\d+)?)/i)}:/seamonkey\//i.test(t)?o={name:"SeaMonkey",seamonkey:e,version:r(/seamonkey\/(\d+(\.\d+)?)/i)}:/firefox|iceweasel|fxios/i.test(t)?(o={name:"Firefox",firefox:e,version:r(/(?:firefox|iceweasel|fxios)[ \/](\d+(\.\d+)?)/i)},/\((mobile|tablet);[^\)]*rv:[\d\.]+\)/i.test(t)&&(o.firefoxos=e,o.osname="Firefox OS")):f?o={name:"Amazon Silk",silk:e,version:r(/silk\/(\d+(\.\d+)?)/i)}:/phantom/i.test(t)?o={name:"PhantomJS",phantom:e,version:r(/phantomjs\/(\d+(\.\d+)?)/i)}:/slimerjs/i.test(t)?o={name:"SlimerJS",slimer:e,version:r(/slimerjs\/(\d+(\.\d+)?)/i)}:/blackberry|\bbb\d+/i.test(t)||/rim\stablet/i.test(t)?o={name:"BlackBerry",osname:"BlackBerry OS",blackberry:e,version:x||r(/blackberry[\d]+\/(\d+(\.\d+)?)/i)}:m?(o={name:"WebOS",osname:"WebOS",webos:e,version:x||r(/w(?:eb)?osbrowser\/(\d+(\.\d+)?)/i)},/touchpad\//i.test(t)&&(o.touchpad=e)):/bada/i.test(t)?o={name:"Bada",osname:"Bada",bada:e,version:r(/dolfin\/(\d+(\.\d+)?)/i)}:p?o={name:"Tizen",osname:"Tizen",tizen:e,version:r(/(?:tizen\s?)?browser\/(\d+(\.\d+)?)/i)||x}:/qupzilla/i.test(t)?o={name:"QupZilla",qupzilla:e,version:r(/(?:qupzilla)[\s\/](\d+(?:\.\d+)+)/i)||x}:/chromium/i.test(t)?o={name:"Chromium",chromium:e,version:r(/(?:chromium)[\s\/](\d+(?:\.\d+)?)/i)||x}:/chrome|crios|crmo/i.test(t)?o={name:"Chrome",chrome:e,version:r(/(?:chrome|crios|crmo)\/(\d+(\.\d+)?)/i)}:s?o={name:"Android",version:x}:/safari|applewebkit/i.test(t)?(o={name:"Safari",safari:e},x&&(o.version=x)):a?(o={name:"iphone"==a?"iPhone":"ipad"==a?"iPad":"iPod"},x&&(o.version=x)):o=/googlebot/i.test(t)?{name:"Googlebot",googlebot:e,version:r(/googlebot\/(\d+(\.\d+))/i)||x}:{name:r(/^(.*)\/(.*) /),version:n(/^(.*)\/(.*) /)},!o.msedge&&/(apple)?webkit/i.test(t)?(/(apple)?webkit\/537\.36/i.test(t)?(o.name=o.name||"Blink",o.blink=e):(o.name=o.name||"Webkit",o.webkit=e),!o.version&&x&&(o.version=x)):!o.opera&&/gecko\//i.test(t)&&(o.name=o.name||"Gecko",o.gecko=e,o.version=o.version||r(/gecko\/(\d+(\.\d+)?)/i)),o.windowsphone||!s&&!o.silk?!o.windowsphone&&a?(o[a]=e,o.ios=e,o.osname="iOS"):b?(o.mac=e,o.osname="macOS"):w?(o.xbox=e,o.osname="Xbox"):y?(o.windows=e,o.osname="Windows"):v&&(o.linux=e,o.osname="Linux"):(o.android=e,o.osname="Android");var O="";o.windows?O=function(e){switch(e){case"NT":return"NT";case"XP":return"XP";case"NT 5.0":return"2000";case"NT 5.1":return"XP";case"NT 5.2":return"2003";case"NT 6.0":return"Vista";case"NT 6.1":return"7";case"NT 6.2":return"8";case"NT 6.3":return"8.1";case"NT 10.0":return"10";default:return}}(r(/Windows ((NT|XP)( \d\d?.\d)?)/i)):o.windowsphone?O=r(/windows phone (?:os)?\s?(\d+(\.\d+)*)/i):o.mac?O=(O=r(/Mac OS X (\d+([_\.\s]\d+)*)/i)).replace(/[_\s]/g,"."):a?O=(O=r(/os (\d+([_\s]\d+)*) like mac os x/i)).replace(/[_\s]/g,"."):s?O=r(/android[ \/-](\d+(\.\d+)*)/i):o.webos?O=r(/(?:web|hpw)os\/(\d+(\.\d+)*)/i):o.blackberry?O=r(/rim\stablet\sos\s(\d+(\.\d+)*)/i):o.bada?O=r(/bada\/(\d+(\.\d+)*)/i):o.tizen&&(O=r(/tizen[\/\s](\d+(\.\d+)*)/i)),O&&(o.osversion=O);var E=!o.windows&&O.split(".")[0];return S||l||"ipad"==a||s&&(3==E||E>=4&&!k)||o.silk?o.tablet=e:(k||"iphone"==a||"ipod"==a||s||u||o.blackberry||o.webos||o.bada)&&(o.mobile=e),o.msedge||o.msie&&o.version>=10||o.yandexbrowser&&o.version>=15||o.vivaldi&&o.version>=1||o.chrome&&o.version>=20||o.samsungBrowser&&o.version>=4||o.whale&&1===i([o.version,"1.0"])||o.mzbrowser&&1===i([o.version,"6.0"])||o.focus&&1===i([o.version,"1.0"])||o.firefox&&o.version>=20||o.safari&&o.version>=6||o.opera&&o.version>=10||o.ios&&o.osversion&&o.osversion.split(".")[0]>=6||o.blackberry&&o.version>=10.1||o.chromium&&o.version>=20?o.a=e:o.msie&&o.version<10||o.chrome&&o.version<20||o.firefox&&o.version<20||o.safari&&o.version<6||o.opera&&o.version<10||o.ios&&o.osversion&&o.osversion.split(".")[0]<6||o.chromium&&o.version<20?o.c=e:o.x=e,o}var r=t("undefined"!=typeof navigator&&navigator.userAgent||"");function n(e){return e.split(".").length}function o(e,t){var r,n=[];if(Array.prototype.map)return Array.prototype.map.call(e,t);for(r=0;r=0;){if(r[0][t]>r[1][t])return 1;if(r[0][t]!==r[1][t])return-1;if(0===t)return 0}}function a(e,n,o){var a=r;"string"==typeof n&&(o=n,n=void 0),void 0===n&&(n=!1),o&&(a=t(o));var s=""+a.version;for(var u in e)if(e.hasOwnProperty(u)&&a[u]){if("string"!=typeof e[u])throw new Error("Browser version in the minVersion map should be a string: "+u+": "+String(e));return i([s,e[u]])<0}return n}return r.test=function(e){for(var t=0;t>>0).toString(16)}function S(e){return(S="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function k(e){return e&&e.constructor===Object&&e.toString===Object.prototype.toString}function w(e){var t={};return e.forEach((function(e){e&&"object"===S(e)&&(Array.isArray(e)&&(e=w(e)),Object.keys(e).forEach((function(r){if(k(e[r])&&k(t[r])){if(0===r.indexOf("@media"))for(var n=r;;)if(!t[n+=" "])return void(t[n]=e[r]);t[r]=w([t[r],e[r]])}else t[r]=e[r]})))})),t}var O=[],E=!1;function _(){O.forEach((function(e){e()}))}var C,j=function(e){return-1===O.indexOf(e)&&O.push(e),E||(window.addEventListener("mouseup",_),E=!0),{remove:function(){var t=O.indexOf(e);O.splice(t,1),0===O.length&&E&&(window.removeEventListener("mouseup",_),E=!1)}}},P=function(e){return":hover"===e||":active"===e||":focus"===e};function M(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function T(e,t){return Object.keys(e).filter((function(r){return t(e[r],r)})).reduce((function(t,r){return t[r]=e[r],t}),{})}var R={checkProps:function(){},keyframes:function(e){var t=e.addCSS,r=e.config,n=e.style,o=function(e){var n=e.__process(r.userAgent),o=n.animationName,i=n.css;return t(i),o};return{style:Object.keys(n).reduce((function(e,t){var r=n[t],i=Array.isArray(r);return"animationName"===t&&r&&(r.__radiumKeyframes||i)&&(r=i?r.map(o).join(", "):o(r)),e[t]=r,e}),{})}},mergeStyleArray:function(e){var t=e.style,r=e.mergeStyles;return{style:Array.isArray(t)?r(t):t}},prefix:function(e){var t=e.config,r=e.style;return{style:Object(m.b)(r,t.userAgent)}},removeNestedStyles:function(e){var t=e.isNestedStyle,r=e.style;return{style:Object.keys(r).reduce((function(e,n){var o=r[n];return t(o)||(e[n]=o),e}),{})}},resolveInteractionStyles:function(e){var t=e.ExecutionEnvironment,r=e.getComponentField,n=e.getState,o=e.mergeStyles,i=e.props,a=e.setState,s=e.style,u={},l={};if(s[":hover"]){var c=i.onMouseEnter;l.onMouseEnter=function(e){c&&c(e),a(":hover",!0)};var f=i.onMouseLeave;l.onMouseLeave=function(e){f&&f(e),a(":hover",!1)}}if(s[":active"]){var d=i.onMouseDown;l.onMouseDown=function(e){d&&d(e),u._lastMouseDown=Date.now(),a(":active","viamousedown")};var p=i.onKeyDown;l.onKeyDown=function(e){p&&p(e)," "!==e.key&&"Enter"!==e.key||a(":active","viakeydown")};var m=i.onKeyUp;l.onKeyUp=function(e){m&&m(e)," "!==e.key&&"Enter"!==e.key||a(":active",!1)}}if(s[":focus"]){var h=i.onFocus;l.onFocus=function(e){h&&h(e),a(":focus",!0)};var y=i.onBlur;l.onBlur=function(e){y&&y(e),a(":focus",!1)}}s[":active"]&&!r("_radiumMouseUpListener")&&t.canUseEventListeners&&(u._radiumMouseUpListener=j((function(){Object.keys(r("state")._radiumStyleState).forEach((function(e){"viamousedown"===n(":active",e)&&a(":active",!1,e)}))})));var b=i.disabled?[s[":disabled"]]:Object.keys(s).filter((function(e){return P(e)&&n(e)})).map((function(e){return s[e]})),v=o([s].concat(b));return v=Object.keys(v).reduce((function(e,t){return P(t)||":disabled"===t||(e[t]=v[t]),e}),{}),{componentFields:u,props:l,style:v}},resolveMediaQueries:function(e){var t=e.ExecutionEnvironment,r=e.addCSS,n=e.appendImportantToEachValue,o=e.config,i=e.cssRuleSetToString,a=e.getComponentField,s=e.getGlobalState,u=e.hash,l=e.isNestedStyle,c=e.mergeStyles,f=e.props,d=e.setState,p=e.style,m=function(e){return Object.keys(e).reduce((function(t,r){return 0!==r.indexOf("@media")&&(t[r]=e[r]),t}),{})}(p),h=function(e){var t=e.addCSS,r=e.appendImportantToEachValue,n=e.cssRuleSetToString,o=e.hash,i=e.isNestedStyle,a=e.style,s=e.userAgent,u="";return Object.keys(a).filter((function(e){return 0===e.indexOf("@media")})).map((function(e){var l=r(T(a[e],(function(e){return!i(e)})));if(Object.keys(l).length){var c=n("",l,s),f="rmq-"+o(e+c);t(e+"{ ."+f+c+"}"),u+=(u?" ":"")+f}})),u}({addCSS:r,appendImportantToEachValue:n,cssRuleSetToString:i,hash:u,isNestedStyle:l,style:p,userAgent:o.userAgent}),y=h?{className:h+(f.className?" "+f.className:"")}:null,b=o.matchMedia||function(e){return void 0===C&&(C=!!e.canUseDOM&&!!window&&!!window.matchMedia&&function(e){return window.matchMedia(e)}||null),C}(t);if(!b)return{props:y,style:m};var v=function(e){for(var t=1;t2&&void 0!==arguments[2]?arguments[2]:I,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},o=arguments.length>4&&void 0!==arguments[4]&&arguments[4],i=arguments.length>5?arguments[5]:void 0;if(!i){var a=g(e);i=Object.keys(a).reduce((function(e,t){return"main"!==t&&(e[t]=!0),e}),{})}if(Array.isArray(t)&&!t.props){var s=t.map((function(t){if(i){var a=v(t);delete i[a]}return W(e,t,r,n,o,i).element}));return{extraStateKeyMap:i,element:s}}if(!t||t.props&&t.props["data-radium"]||o&&!L(t))return{extraStateKeyMap:i,element:t};var u=t.props.children,l=U({children:u,component:e,config:r,existingKeyMap:n,extraStateKeyMap:i}),c=V({component:e,config:r,existingKeyMap:n,extraStateKeyMap:i,props:t.props});if(c=q({component:e,config:r,existingKeyMap:n,props:c,renderedElement:t}),l===u&&c===t.props)return{extraStateKeyMap:i,element:t};var f=K(t,c!==t.props?c:{},l);return{extraStateKeyMap:i,element:f}};function G(){return(G=Object.assign||function(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function ce(e){var t=function(e,t){if("object"!==Y(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!==Y(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"===Y(t)?t:String(t)}var fe,de,pe=["arguments","callee","caller","length","name","prototype","type"];function me(e){var t=e.prototype||{};return!(e.isReactComponent||t.isReactComponent||e.render||t.render)}function he(e){return"function"==typeof e&&/^\s*class\s+/.test(e.toString())}function ye(e,t){de.forEach((function(r){var n=Object.getOwnPropertyDescriptor(e,r),o=(n||{}).value;if(o){var i=(Object.getOwnPropertyDescriptor(fe,r)||{}).value;t.prototype[r]||o===i||(n&&Object.defineProperty(t.prototype,r,n),delete e[r])}}))}function be(e){if(e._extraRadiumStateKeys&&e._extraRadiumStateKeys.length>0){var t=e._extraRadiumStateKeys.reduce((function(e,t){e[t];return le(e,[t].map(ce))}),g(e));e._lastRadiumState=t,e.setState({_radiumStyleState:t})}}function ve(e){var t=e._radiumMouseUpListener,r=e._radiumMediaQueryListenersByQuery;e._radiumIsMounted=!1,t&&t.remove(),r&&Object.keys(r).forEach((function(e){r[e].remove()}),e)}function ge(e,t,r){var n=e||t||r;return r&&n!==r&&(n=se({},r,n)),n}function xe(e,t,r,n){var i=$(e,t,r),a=i.extraStateKeyMap,s=i.element;return e._extraRadiumStateKeys=Object.keys(a),n?o.a.createElement(Q.Provider,{value:n},s):s}function Se(e,t){var r=o.a.forwardRef((function(r,o){var i=r.radiumConfig,a=le(r,["radiumConfig"]),s=Object(n.useContext)(Q),u=Object(n.useContext)(H),l=ae(Object(n.useState)({}),2),c=l[0],f=l[1],d=Object(n.useRef)({state:c,setState:f,_radiumMediaQueryListenersByQuery:void 0,_radiumMouseUpListener:void 0,_radiumIsMounted:!0,_lastRadiumState:void 0,_extraRadiumStateKeys:void 0,_radiumStyleKeeper:u}).current;d.state=c,Object(n.useEffect)((function(){return function(){ve(d)}}),[d]);var p=d._extraRadiumStateKeys&&d._extraRadiumStateKeys.length>0;Object(n.useEffect)((function(){be(d)}),[p,d]);var m=e(a,o),h=ge(i,s,t);return xe(d,m,h,i)}));return r._isRadiumEnhanced=!0,r.defaultProps=e.defaultProps,u()(r,e)}function ke(e,t,r){var n,o,i=function(e){function n(){var e;Z(this,n),(e=ee(this,ne(n).apply(this,arguments))).state=e.state||{},e._radiumStyleKeeper=e.props.styleKeeperContext,e._radiumMediaQueryListenersByQuery=e._radiumMediaQueryListenersByQuery,e._radiumMouseUpListener=e._radiumMouseUpListener,e._radiumIsMounted=!0,e._lastRadiumState=void 0,e._extraRadiumStateKeys=void 0,e.state._radiumStyleState={};var r=te(e);return ye(r,t),e}var o,i,a;return oe(n,e),o=n,(i=[{key:"componentDidUpdate",value:function(e,t,r){re(ne(n.prototype),"componentDidUpdate",this)&&re(ne(n.prototype),"componentDidUpdate",this).call(this,e,t,r),be(this)}},{key:"componentWillUnmount",value:function(){re(ne(n.prototype),"componentWillUnmount",this)&&re(ne(n.prototype),"componentWillUnmount",this).call(this),ve(this)}},{key:"render",value:function(){return xe(this,re(ne(n.prototype),"render",this).call(this),ge(this.props.radiumConfig,this.props.radiumConfigContext,r),this.props.radiumConfig)}}])&&J(o.prototype,i),a&&J(o,a),n}(t);return i._isRadiumEnhanced=!0,fe=i.prototype,de=Object.getOwnPropertyNames(fe).filter((function(e){return"constructor"!==e&&"function"==typeof fe[e]})),n=e,o=i,Object.getOwnPropertyNames(n).forEach((function(e){if(pe.indexOf(e)<0&&!o.hasOwnProperty(e)){var t=Object.getOwnPropertyDescriptor(n,e);t&&Object.defineProperty(o,e,t)}})),i.propTypes&&i.propTypes.style&&(i.propTypes=se({},i.propTypes,{style:a.a.oneOfType([a.a.array,a.a.object])})),i.displayName=e.displayName||e.name||"Component",X(i)}function we(e){return e=function(e){function t(){var t=Reflect.construct(e,arguments,this.constructor);return t}return Reflect.setPrototypeOf(t.prototype,e.prototype),Reflect.setPrototypeOf(t,e),t}(e)}var Oe=Object(n.forwardRef)((function(){return null})).$$typeof;function Ee(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(Oe&&e.$$typeof===Oe)return Se(e.render,t);if("function"!=typeof e)return _e(t,e);var r=e;if(me(r))return Se(r,t);var n=r;return he(n)&&(n=we(n)),n===r&&(n=function(e){function t(){return Z(this,t),ee(this,ne(t).apply(this,arguments))}return oe(t,e),t}(n)),ke(r,n,t)}function _e(e,t){var r=se({},e,t);return function(e){return Ee(e,r)}}function Ce(e){return(Ce="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function je(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function Pe(e,t){for(var r=0;r-1&&t._listeners.splice(r,1)}}}},{key:"addCSS",value:function(e){var t=this;return this._cssSet[e]||(this._cssSet[e]=!0,this._emitChange()),{remove:function(){delete t._cssSet[e],t._emitChange()}}}},{key:"getCSS",value:function(){return Object.keys(this._cssSet).join("\n")}},{key:"_emitChange",value:function(){this._listeners.forEach((function(e){return e()}))}}])&&Ae(t.prototype,r),n&&Ae(t,n),e}();function Fe(e){return(Fe="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function Ie(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function ze(e,t){for(var r=0;r=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var Ke=Ee((function(e){var t=e.children,r=qe(e,["children"]);return o.a.createElement("div",r,t,o.a.createElement(Ve,null))})),$e=function(e){var t=e.radiumConfig,r=Object(n.useContext)(Q),i=Object(n.useRef)(function(e,t){var r=e&&e.userAgent||t&&t.userAgent;return new De(r)}(t,r));return o.a.createElement(H.Provider,{value:i.current},o.a.createElement(Ke,e))};function Ge(e,t){return{__radiumKeyframes:!0,__process:function(r){var n=Object(m.a)(r),o=Object.keys(e).map((function(t){return h(t,e[t],r)})).join("\n"),i=(t?t+"-":"")+"radium-animation-"+x(o);return{css:"@"+n+" "+i+" {\n"+o+"\n}\n",animationName:i}}}}function He(e){return Ee(e)}He.Plugins=R,He.Style=Ne,He.StyleRoot=$e,He.getState=b,He.keyframes=Ge;t.default=He},function(e,t,r){"use strict";r.r(t),r.d(t,"CSSTransition",(function(){return x})),r.d(t,"ReplaceTransition",(function(){return M})),r.d(t,"SwitchTransition",(function(){return F})),r.d(t,"TransitionGroup",(function(){return _})),r.d(t,"Transition",(function(){return b})),r.d(t,"config",(function(){return f}));var n=r(6),o=r(4);function i(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}r(1);function a(e,t){return e.replace(new RegExp("(^|\\s)"+t+"(?:\\s|$)","g"),"$1").replace(/\s+/g," ").replace(/^\s*|\s*$/g,"")}var s=r(0),u=r.n(s),l=r(8),c=r.n(l),f={disabled:!1},d=u.a.createContext(null),p="entering",m="entered",h=function(e){function t(t,r){var n;n=e.call(this,t,r)||this;var o,i=r&&!r.isMounting?t.enter:t.appear;return n.appearStatus=null,t.in?i?(o="exited",n.appearStatus=p):o=m:o=t.unmountOnExit||t.mountOnEnter?"unmounted":"exited",n.state={status:o},n.nextCallback=null,n}i(t,e),t.getDerivedStateFromProps=function(e,t){return e.in&&"unmounted"===t.status?{status:"exited"}:null};var r=t.prototype;return r.componentDidMount=function(){this.updateStatus(!0,this.appearStatus)},r.componentDidUpdate=function(e){var t=null;if(e!==this.props){var r=this.state.status;this.props.in?r!==p&&r!==m&&(t=p):r!==p&&r!==m||(t="exiting")}this.updateStatus(!1,t)},r.componentWillUnmount=function(){this.cancelNextCallback()},r.getTimeouts=function(){var e,t,r,n=this.props.timeout;return e=t=r=n,null!=n&&"number"!=typeof n&&(e=n.exit,t=n.enter,r=void 0!==n.appear?n.appear:t),{exit:e,enter:t,appear:r}},r.updateStatus=function(e,t){void 0===e&&(e=!1),null!==t?(this.cancelNextCallback(),t===p?this.performEnter(e):this.performExit()):this.props.unmountOnExit&&"exited"===this.state.status&&this.setState({status:"unmounted"})},r.performEnter=function(e){var t=this,r=this.props.enter,n=this.context?this.context.isMounting:e,o=this.props.nodeRef?[n]:[c.a.findDOMNode(this),n],i=o[0],a=o[1],s=this.getTimeouts(),u=n?s.appear:s.enter;!e&&!r||f.disabled?this.safeSetState({status:m},(function(){t.props.onEntered(i)})):(this.props.onEnter(i,a),this.safeSetState({status:p},(function(){t.props.onEntering(i,a),t.onTransitionEnd(u,(function(){t.safeSetState({status:m},(function(){t.props.onEntered(i,a)}))}))})))},r.performExit=function(){var e=this,t=this.props.exit,r=this.getTimeouts(),n=this.props.nodeRef?void 0:c.a.findDOMNode(this);t&&!f.disabled?(this.props.onExit(n),this.safeSetState({status:"exiting"},(function(){e.props.onExiting(n),e.onTransitionEnd(r.exit,(function(){e.safeSetState({status:"exited"},(function(){e.props.onExited(n)}))}))}))):this.safeSetState({status:"exited"},(function(){e.props.onExited(n)}))},r.cancelNextCallback=function(){null!==this.nextCallback&&(this.nextCallback.cancel(),this.nextCallback=null)},r.safeSetState=function(e,t){t=this.setNextCallback(t),this.setState(e,t)},r.setNextCallback=function(e){var t=this,r=!0;return this.nextCallback=function(n){r&&(r=!1,t.nextCallback=null,e(n))},this.nextCallback.cancel=function(){r=!1},this.nextCallback},r.onTransitionEnd=function(e,t){this.setNextCallback(t);var r=this.props.nodeRef?this.props.nodeRef.current:c.a.findDOMNode(this),n=null==e&&!this.props.addEndListener;if(r&&!n){if(this.props.addEndListener){var o=this.props.nodeRef?[this.nextCallback]:[r,this.nextCallback],i=o[0],a=o[1];this.props.addEndListener(i,a)}null!=e&&setTimeout(this.nextCallback,e)}else setTimeout(this.nextCallback,0)},r.render=function(){var e=this.state.status;if("unmounted"===e)return null;var t=this.props,r=t.children,n=(t.in,t.mountOnEnter,t.unmountOnExit,t.appear,t.enter,t.exit,t.timeout,t.addEndListener,t.onEnter,t.onEntering,t.onEntered,t.onExit,t.onExiting,t.onExited,t.nodeRef,Object(o.a)(t,["children","in","mountOnEnter","unmountOnExit","appear","enter","exit","timeout","addEndListener","onEnter","onEntering","onEntered","onExit","onExiting","onExited","nodeRef"]));return u.a.createElement(d.Provider,{value:null},"function"==typeof r?r(e,n):u.a.cloneElement(u.a.Children.only(r),n))},t}(u.a.Component);function y(){}h.contextType=d,h.propTypes={},h.defaultProps={in:!1,mountOnEnter:!1,unmountOnExit:!1,appear:!1,enter:!0,exit:!0,onEnter:y,onEntering:y,onEntered:y,onExit:y,onExiting:y,onExited:y},h.UNMOUNTED="unmounted",h.EXITED="exited",h.ENTERING=p,h.ENTERED=m,h.EXITING="exiting";var b=h,v=function(e,t){return e&&t&&t.split(" ").forEach((function(t){return n=t,void((r=e).classList?r.classList.remove(n):"string"==typeof r.className?r.className=a(r.className,n):r.setAttribute("class",a(r.className&&r.className.baseVal||"",n)));var r,n}))},g=function(e){function t(){for(var t,r=arguments.length,n=new Array(r),o=0;o", 8 | "keywords": [ 9 | "react-feedback", 10 | "feedback", 11 | "feeder", 12 | "feedback-form" 13 | ], 14 | "homepage": "https://feeder.sh", 15 | "repository": { 16 | "type": "git", 17 | "url": "https://github.com/rishipr/feeder-react-feedback" 18 | }, 19 | "scripts": { 20 | "prepare": "rm -rf ./dist && npm run build", 21 | "build": "webpack" 22 | }, 23 | "peerDependencies": { 24 | "axios": "^0.19.2", 25 | "radium": "^0.26.0", 26 | "prop-types": "^15.6.0", 27 | "react": "^16.13.1", 28 | "react-dom": "^16.13.1", 29 | "react-textarea-autosize": "^8.0.1", 30 | "react-transition-group": "^4.4.1" 31 | }, 32 | "devDependencies": { 33 | "@svgr/webpack": "^5.4.0", 34 | "autoprefixer": "^9.8.4", 35 | "axios": "^0.19.2", 36 | "babel-core": "^6.21.0", 37 | "babel-loader": "^7.1.4", 38 | "babel-preset-env": "^1.6.1", 39 | "babel-preset-react": "^6.16.0", 40 | "babel-preset-stage-0": "^6.24.1", 41 | "css-loader": "^3.6.0", 42 | "extract-text-webpack-plugin": "^3.0.2", 43 | "mini-css-extract-plugin": "^0.9.0", 44 | "node-sass": "^4.14.1", 45 | "postcss-loader": "^3.0.0", 46 | "postcss-prefixer": "^2.1.2", 47 | "prop-types": "^15.6.0", 48 | "radium": "^0.26.0", 49 | "react": "^16.13.1", 50 | "react-dom": "^16.13.1", 51 | "react-textarea-autosize": "^8.0.1", 52 | "react-transition-group": "^4.4.1", 53 | "sass-loader": "^9.0.0", 54 | "style-loader": "^1.2.1", 55 | "webpack": "^4.5.0", 56 | "webpack-cli": "^3.2.1" 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [require("autoprefixer")], 3 | }; 4 | 5 | // TODO uninstall postcss-prefixer 6 | -------------------------------------------------------------------------------- /src/Feedback-Styles.scss: -------------------------------------------------------------------------------- 1 | @import "./base.scss"; 2 | @import url("https://rsms.me/inter/inter.css"); 3 | 4 | .frf-feedback-container { 5 | position: fixed; 6 | width: 100%; 7 | bottom: 0; 8 | right: 24px; 9 | 10 | *, 11 | *:before, 12 | *:after { 13 | box-sizing: border-box; 14 | -moz-box-sizing: border-box; 15 | -webkit-box-sizing: border-box; 16 | -ms-box-sizing: border-box; 17 | image-rendering: -moz-crisp-edges; 18 | 19 | font-family: "Inter var", -apple-system, BlinkMacSystemFont, Segoe UI, 20 | Helvetica, Apple Color Emoji, Arial, sans-serif, Segoe UI Emoji, 21 | Segoe UI Symbol; 22 | 23 | @include transition; 24 | } 25 | 26 | input, 27 | button, 28 | textarea { 29 | font-size: inherit; 30 | font-family: inherit; 31 | -webkit-appearance: none; 32 | } 33 | 34 | textarea { 35 | resize: vertical; 36 | } 37 | } 38 | 39 | @media (max-width: 360) { 40 | .frf-feedback-container { 41 | * { 42 | font-size: 12px; 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/Feedback.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import PropTypes from "prop-types"; 3 | 4 | import "./Feedback-Styles"; 5 | import Trigger from "./Trigger"; 6 | 7 | class Feedback extends Component { 8 | render() { 9 | let { props } = this; 10 | 11 | return ( 12 |
16 | 31 |
32 | ); 33 | } 34 | } 35 | 36 | Feedback.propTypes = { 37 | email: PropTypes.bool, 38 | emailRequired: PropTypes.bool, 39 | emailDefaultValue: PropTypes.string, 40 | projectName: PropTypes.string, 41 | projectId: PropTypes.string.isRequired, 42 | primaryColor: PropTypes.string, 43 | textColor: PropTypes.string, 44 | hoverBorderColor: PropTypes.string, 45 | postSubmitButtonMsg: PropTypes.string, 46 | submitButtonMsg: PropTypes.string, 47 | subProject: PropTypes.string, 48 | zIndex: PropTypes.string, 49 | feedbackTypes: PropTypes.arrayOf(PropTypes.string), 50 | }; 51 | 52 | Feedback.defaultProps = { 53 | email: false, 54 | emailRequired: false, 55 | emailDefaultValue: "", 56 | projectName: "", 57 | subProject: "", 58 | primaryColor: "#000000", 59 | textColor: "#ffffff", 60 | hoverBorderColor: "#000000", 61 | postSubmitButtonMsg: "Thanks!", 62 | submitButtonMsg: "Send Feedback", 63 | feedbackTypes: ["general", "bug", "idea"], 64 | zIndex: "100000000", 65 | }; 66 | 67 | export default Feedback; 68 | -------------------------------------------------------------------------------- /src/Modal-Styles.scss: -------------------------------------------------------------------------------- 1 | @import "./base.scss"; 2 | 3 | ::placeholder, 4 | :-ms-input-placeholder { 5 | color: $lightGray; 6 | } 7 | 8 | .frf-modal-container { 9 | display: flex; 10 | flex-direction: column; 11 | text-align: left; 12 | position: absolute; 13 | right: 12px; 14 | bottom: 108px; 15 | background: $white; 16 | @include shadow; 17 | max-width: 380px; 18 | width: 80%; 19 | max-height: 70vh; 20 | -ms-overflow-style: none; /* IE and Edge */ 21 | scrollbar-width: none; /* Firefox */ 22 | overflow: scroll; 23 | border-radius: 4px; 24 | font-size: 16px; 25 | 26 | &::-webkit-scrollbar { 27 | display: none; 28 | } 29 | } 30 | 31 | .frf-modal-first-row { 32 | width: 100%; 33 | display: flex; 34 | justify-content: space-between; 35 | align-items: center; 36 | padding: 24px; 37 | border-radius: 4px 4px 0px 0px; 38 | border-bottom: 1px solid rgba($lightGray, 0.15); 39 | 40 | .frf-modal-title { 41 | font-weight: 500; 42 | } 43 | 44 | .frf-modal-close { 45 | font-size: 14px; 46 | cursor: pointer; 47 | } 48 | } 49 | 50 | .frf-modal-content-container { 51 | padding: 24px; 52 | } 53 | 54 | .frf-modal-input-group { 55 | display: flex; 56 | flex-direction: column; 57 | } 58 | 59 | .frf-modal-label { 60 | color: $lightGray; 61 | padding-bottom: 8px; 62 | font-size: 14px; 63 | display: inline-block; 64 | font-weight: 500; 65 | } 66 | 67 | textarea { 68 | min-height: 140px; 69 | } 70 | 71 | .frf-modal-input { 72 | padding: 12px 20px; 73 | border-radius: 4px; 74 | margin-bottom: 12px; 75 | border: 1px solid rgba($lightGray, 0.15); 76 | box-shadow: none; 77 | display: flex; 78 | align-items: center; 79 | outline: none; 80 | width: 100%; 81 | font-weight: 500; 82 | 83 | &::placeholder { 84 | color: $lightGray; 85 | font-weight: 500; 86 | } 87 | } 88 | 89 | .frf-modal-feedback-types { 90 | width: 100%; 91 | display: flex; 92 | justify-content: space-between; 93 | margin-bottom: 12px; 94 | 95 | .frf-modal-feedback-type { 96 | width: 100%; 97 | display: flex; 98 | justify-content: center; 99 | align-items: center; 100 | font-weight: 500; 101 | overflow-wrap: anywhere; 102 | max-width: 100/3; 103 | 104 | padding: 12px; 105 | text-align: center; 106 | border: 1px solid rgba($lightGray, 0.15); 107 | cursor: pointer; 108 | 109 | &:first-of-type { 110 | border-radius: 4px 0px 0px 4px; 111 | } 112 | 113 | &:last-of-type { 114 | border-radius: 0px 4px 4px 0px; 115 | } 116 | } 117 | } 118 | 119 | .frf-modal-button { 120 | padding: 16px 30px 16px; 121 | outline: 0; 122 | border-radius: 4px; 123 | border: 1px solid rgba($lightGray, 0.15); 124 | margin-top: 16px; 125 | cursor: pointer; 126 | width: 100%; 127 | font-weight: 500; 128 | 129 | .frf-modal-button-loader { 130 | display: inline-block; 131 | border: 0.133 * 16px solid $lightGray; 132 | border-radius: 16px; 133 | width: 16px; 134 | height: 16px; 135 | animation: spin 0.5s linear infinite; 136 | } 137 | } 138 | 139 | .frf-water { 140 | text-align: center; 141 | margin-top: 24px; 142 | color: $lightGray; 143 | font-size: 12px; 144 | font-weight: 500; 145 | 146 | a { 147 | color: $black; 148 | text-decoration: none; 149 | 150 | &:hover { 151 | color: $primaryBlue; 152 | } 153 | } 154 | } 155 | 156 | @media (max-width: 300px) { 157 | .frf-modal-feedback-types { 158 | flex-wrap: wrap; 159 | } 160 | } 161 | 162 | @keyframes spin { 163 | 0% { 164 | transform: rotate(0deg); 165 | } 166 | 100% { 167 | transform: rotate(360deg); 168 | } 169 | } 170 | -------------------------------------------------------------------------------- /src/Modal.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import axios from "axios"; 3 | import TextareaAutosize from "react-textarea-autosize"; 4 | import Radium, { StyleRoot, Style } from "radium"; 5 | import "./Modal-Styles"; 6 | 7 | let Textarea = Radium(TextareaAutosize); 8 | 9 | class Modal extends Component { 10 | state = { 11 | feedbackEmail: this.props.emailDefaultValue, 12 | feedbackType: this.props.feedbackTypes[0], 13 | feedbackMsg: "", 14 | subProject: this.props.subProject, 15 | loading: false, 16 | submitted: false, 17 | feedbackTypes: ["general", "bug", "idea"], 18 | }; 19 | 20 | componentDidMount() { 21 | this.mounted = true; 22 | 23 | let tempArr = []; 24 | 25 | this.props.feedbackTypes.forEach((f, i) => { 26 | if (i < 3) { 27 | tempArr[i] = f.trim(); 28 | } 29 | }); 30 | 31 | this.setState({ feedbackTypes: tempArr }); 32 | } 33 | 34 | componentWillUnmount() { 35 | this.mounted = false; 36 | } 37 | 38 | // Only relevant to demo/playground 39 | componentDidUpdate(prevProps, prevState) { 40 | if (prevProps.emailDefaultValue !== this.props.emailDefaultValue) { 41 | this.setState({ feedbackEmail: this.props.emailDefaultValue }); 42 | } 43 | 44 | if (prevProps.subProject !== this.props.subProject) { 45 | this.setState({ subProject: this.props.subProject }); 46 | } 47 | 48 | if (prevProps.feedbackTypes !== this.props.feedbackTypes) { 49 | this.setState({ feedbackType: this.props.feedbackTypes[0] }); 50 | let tempArr = []; 51 | let { feedbackTypes } = this.props; 52 | 53 | feedbackTypes.forEach((f, i) => { 54 | if (i < 3) { 55 | tempArr[i] = f.trim(); 56 | } 57 | }); 58 | 59 | this.setState({ feedbackTypes: tempArr }); 60 | } 61 | } 62 | 63 | capitalize = (str) => { 64 | return str.replace(/(?:^|\s|["'([{])+\S/g, (match) => match.toUpperCase()); 65 | }; 66 | 67 | handleChange = (e) => { 68 | this.setState({ [e.target.id]: e.target.value }); 69 | }; 70 | 71 | handleSubmit = (e) => { 72 | e.preventDefault(); 73 | 74 | // Prevent double+ submit 75 | if (this.state.loading) { 76 | return; 77 | } 78 | 79 | this.setState({ loading: true }); 80 | 81 | let { feedbackEmail, feedbackType, feedbackMsg, subProject } = this.state; 82 | let { projectId } = this.props; 83 | 84 | let payload = { 85 | projectId, 86 | feedbackEmail, 87 | feedbackType, 88 | feedbackMsg, 89 | subProject, 90 | feedbackSrc: 91 | typeof window !== "undefined" ? window.location.pathname : null, 92 | }; 93 | 94 | axios 95 | .post("https://feeder-node-1337.herokuapp.com/feedback/create", payload) 96 | .then(() => { 97 | return; 98 | }) 99 | .catch((e) => console.log(e.toString())); 100 | 101 | setTimeout(() => { 102 | if (this.mounted) { 103 | this.setState({ loading: false }); 104 | this.setState({ submitted: true }); 105 | setTimeout(() => { 106 | if (this.mounted) { 107 | this.props.triggerModal(); 108 | } 109 | }, 1000); 110 | } 111 | }, 1000); 112 | }; 113 | 114 | render() { 115 | let { feedbackType, loading, submitted, feedbackTypes } = this.state; 116 | let { props } = this; 117 | 118 | return ( 119 | 120 |
125 |
126 | {props.email && ( 127 |
128 |
129 | Email{props.emailRequired ? " *" : null} 130 |
131 | 156 |
157 | )} 158 | 159 |
160 |
Feedback Type *
161 |
162 | {this.state.feedbackTypes.map((f, i) => ( 163 | 191 | this.setState({ feedbackType: feedbackTypes[i] }) 192 | } 193 | > 194 | {this.capitalize(feedbackTypes[i])} 195 | 196 | ))} 197 |
198 |
199 | 200 |
201 |
202 | Feedback Message * 203 |
204 |