@evaficy/react-emoji-feedback
Version:
A highly customizable React component for emoji-based ratings and feedback with smooth animations and multiple interaction modes.
3 lines (2 loc) • 15.9 kB
JavaScript
import e,{useState as t}from"react";import{EmojiFeedback as n}from"@evaficy/react-emoji-feedback";function a(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,a=Array(t);n<t;n++)a[n]=e[n];return a}function l(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var a=n.call(e,t||"default");if("object"!=typeof a)return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n.push.apply(n,a)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach(function(t){l(e,t,n[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})}return e}function o(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var a,l,r,i,o=[],s=!0,c=!1;try{if(r=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;s=!1}else for(;!(s=(a=r.call(n)).done)&&(o.push(a.value),o.length!==t);s=!0);}catch(e){c=!0,l=e}finally{try{if(!s&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(c)throw l}}return o}}(e,t)||function(e,t){if(e){if("string"==typeof e)return a(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?a(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}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},s(e)}var c=function(n){var a=n.scale,l=void 0===a?null:a,r=n.emojis,i=void 0===r?null:r,c=n.labels,m=void 0===c?null:c,u=n.title,d=void 0===u?null:u,f=n.enableIntensity,g=void 0!==f&&f,b=n.size,y=void 0===b?"large":b,p=n.layout,v=void 0===p?"horizontal":p,x=n.showLabels,E=void 0===x||x,h=n.onRatingChange,N=void 0===h?null:h,w=n.initialRating,j=void 0===w?null:w,S=n.initialIntensity,k=void 0===S?null:S,C={happiness:{emojis:["😞","😟","😐","😊","😍"],labels:["Very Sad","Sad","Neutral","Happy","Very Happy"],name:"5-Point Happiness Scale"},satisfaction:{emojis:["😡","😠","😐","😊","😁"],labels:["Angry","Dissatisfied","Neutral","Satisfied","Delighted"],name:"Satisfaction Scale"},effort:{emojis:["😰","😓","😐","😌","😎"],labels:["Very Hard","Hard","Moderate","Easy","Very Easy"],name:"Effort Scale"},custom:{emojis:["🔥","⚡","💫","🌟","✨"],labels:["Fire","Electric","Magic","Star","Sparkle"],name:"Custom Energy Scale"}},O=i&&m?{emojis:i,labels:m,name:d||"Custom Scale"}:l&&"object"===s(l)?l:l&&"string"==typeof l&&C[l]?C[l]:C.happiness,I=o(t(j),2),R=I[0],z=I[1],P=o(t(k),2),H=P[0],L=P[1],M=o(t(null),2),A=M[0],D=M[1],F=function(){switch(y){case"small":return"text-2xl p-2";case"medium":return"text-3xl p-2.5";default:return"text-4xl p-3"}},V=function(t){var n=t.emoji,a=t.label,l=t.isSelected,r=t.isHovered,i=t.onClick,o=t.onMouseEnter,s=t.onMouseLeave,c=t.showIntensity,m=void 0!==c&&c,u=t.selectedIntensity,d=void 0===u?null:u,f=t.onIntensitySelect,g=void 0===f?null:f;return e.createElement("div",{className:"relative"},e.createElement("button",{className:"\n relative ".concat(F()," rounded-full transition-all duration-300 transform\n ").concat(l?"scale-125 bg-blue-100":"scale-100","\n ").concat(r?"scale-110":"","\n hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-300\n "),onClick:i,onMouseEnter:o,onMouseLeave:s,title:a},e.createElement("span",{className:"\n transition-all duration-300\n ".concat(l?"animate-bounce":"","\n ")},n)),m&&l&&e.createElement("div",{className:"absolute top-full left-1/2 transform -translate-x-1/2 mt-2 flex space-x-1 animate-fadeIn"},[1,2,3].map(function(t){return e.createElement("button",{key:t,className:"\n w-3 h-3 rounded-full border-2 transition-all duration-200\n ".concat(d===t?"bg-blue-500 border-blue-500":"bg-white border-gray-300 hover:border-blue-400","\n "),onClick:function(e){e.stopPropagation(),g&&g(t)},title:"Intensity Level ".concat(t)})})),E&&(r||l)&&e.createElement("div",{className:"absolute top-full left-1/2 transform -translate-x-1/2 mt-1 px-2 py-1 bg-gray-800 text-white text-xs rounded whitespace-nowrap animate-fadeIn"},a))};return e.createElement("div",{className:"w-full"},d&&e.createElement("h3",{className:"text-lg font-medium mb-4 text-gray-700 text-center"},d),e.createElement("div",{className:"flex justify-center ".concat("vertical"===v?"flex-col items-center space-y-4":"space-x-4"," mb-4")},O.emojis.map(function(t,n){return e.createElement(V,{key:n,emoji:t,label:O.labels[n],isSelected:R===n,isHovered:A===n,onClick:function(){return function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;z(e),g&&null!==t&&L(t),N&&N(e,t,O)}(n)},onMouseEnter:function(){return D(n)},onMouseLeave:function(){return D(null)},showIntensity:g,selectedIntensity:R===n?H:null,onIntensitySelect:function(e){return L(e)}})})),e.createElement("style",{jsx:!0},"\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(-10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n \n .animate-fadeIn {\n animation: fadeIn 0.3s ease-out;\n }\n "))},m=function(n){var a=n.aspects,r=void 0===a?["quality","speed","price"]:a,s=n.onRatingChange,c=void 0===s?null:s,m={emojis:["😡","😠","😐","😊","😁"],labels:["Angry","Dissatisfied","Neutral","Satisfied","Delighted"]},u=o(t(r.reduce(function(e,t){return i(i({},e),{},l({},t,null))},{})),2),d=u[0],f=u[1],g=o(t({}),2),b=g[0],y=g[1];return e.createElement("div",{className:"space-y-6"},r.map(function(t){return e.createElement("div",{key:t},e.createElement("h3",{className:"text-lg font-medium mb-3 capitalize text-gray-700 text-center"},t),e.createElement("div",{className:"flex justify-center space-x-4"},m.emojis.map(function(n,a){return e.createElement("button",{key:"".concat(t,"-").concat(a),className:"\n text-4xl p-3 rounded-full transition-all duration-300 transform\n ".concat(d[t]===a?"scale-125 bg-blue-100":"scale-100","\n ").concat(b[t]===a?"scale-110":"","\n hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-300\n "),onClick:function(){return function(e,t){var n=i(i({},d),{},l({},e,t));f(n),c&&c(n)}(t,a)},onMouseEnter:function(){return y(function(e){return i(i({},e),{},l({},t,a))})},onMouseLeave:function(){return y(function(e){return i(i({},e),{},l({},t,null))})},title:m.labels[a]},e.createElement("span",{className:"transition-all duration-300 ".concat(d[t]===a?"animate-bounce":"")},n))})))}),Object.values(d).some(function(e){return null!==e})&&e.createElement("div",{className:"mt-6 p-4 bg-gray-50 rounded-lg"},e.createElement("h4",{className:"font-medium text-gray-800 mb-2"},"Your Ratings:"),e.createElement("div",{className:"space-y-1"},Object.entries(d).map(function(t){var n=o(t,2),a=n[0],l=n[1];return null!==l&&e.createElement("div",{key:a,className:"flex justify-between items-center"},e.createElement("span",{className:"capitalize text-gray-700"},a,":"),e.createElement("span",{className:"font-medium text-gray-800"},m.emojis[l]," ",m.labels[l]))}))))},u=function(){var a=o(t({}),2),l=a[0],r=a[1];return e.createElement("div",{className:"max-w-6xl mx-auto p-6 space-y-12"},e.createElement("div",{className:"text-center"},e.createElement("h1",{className:"text-4xl font-bold text-gray-800 mb-4"},"Emoji Feedback Component"),e.createElement("p",{className:"text-xl text-gray-600 mb-2"},"A versatile React component for emoji-based ratings and feedback"),e.createElement("p",{className:"text-gray-500"},"Highly configurable with multiple scales, sizes, and interaction modes")),e.createElement("div",{className:"grid md:grid-cols-2 gap-8"},e.createElement("div",{className:"bg-white rounded-xl shadow-lg p-6"},e.createElement("h2",{className:"text-2xl font-semibold mb-6 text-gray-800"},"Simple Rating"),e.createElement(n,{scale:"satisfaction",title:"How satisfied are you with our service?",onRatingChange:function(e,t,n){return r(function(t){return i(i({},t),{},{simple:{rating:e,scale:n.labels[e]}})})}}),l.simple&&e.createElement("div",{className:"mt-4 p-3 bg-blue-50 rounded-lg text-center"},e.createElement("p",{className:"text-blue-800 font-medium"},"Selected: ",l.simple.scale))),e.createElement("div",{className:"bg-white rounded-xl shadow-lg p-6"},e.createElement("h2",{className:"text-2xl font-semibold mb-6 text-gray-800"},"Custom Scale"),e.createElement(n,{emojis:["🥶","🙂","🔥","🚀","🌟"],labels:["Cold","Okay","Hot","Amazing","Perfect"],title:"Rate the temperature",enableIntensity:!0,onRatingChange:function(e,t,n){return r(function(a){return i(i({},a),{},{custom:{rating:n.labels[e],intensity:t?"Level ".concat(t):null}})})}}),l.custom&&e.createElement("div",{className:"mt-4 p-3 bg-green-50 rounded-lg text-center"},e.createElement("p",{className:"text-green-800 font-medium"},l.custom.rating,l.custom.intensity&&" (".concat(l.custom.intensity,")"))))),e.createElement("div",{className:"bg-white rounded-xl shadow-lg p-6"},e.createElement("h2",{className:"text-2xl font-semibold mb-6 text-gray-800"},"Size Variations"),e.createElement("div",{className:"grid md:grid-cols-3 gap-6"},e.createElement("div",null,e.createElement("h3",{className:"font-medium mb-3 text-gray-700 text-center"},"Small"),e.createElement(n,{scale:"happiness",size:"small",showLabels:!1})),e.createElement("div",null,e.createElement("h3",{className:"font-medium mb-3 text-gray-700 text-center"},"Medium"),e.createElement(n,{scale:"happiness",size:"medium",showLabels:!1})),e.createElement("div",null,e.createElement("h3",{className:"font-medium mb-3 text-gray-700 text-center"},"Large"),e.createElement(n,{scale:"happiness",size:"large",showLabels:!1})))),e.createElement("div",{className:"grid md:grid-cols-2 gap-8"},e.createElement("div",{className:"bg-white rounded-xl shadow-lg p-6"},e.createElement("h2",{className:"text-2xl font-semibold mb-6 text-gray-800"},"Horizontal Layout"),e.createElement(n,{scale:"effort",title:"How difficult was this task?",layout:"horizontal"})),e.createElement("div",{className:"bg-white rounded-xl shadow-lg p-6"},e.createElement("h2",{className:"text-2xl font-semibold mb-6 text-gray-800"},"Vertical Layout"),e.createElement(n,{scale:"effort",title:"How difficult was this task?",layout:"vertical",size:"medium"}))),e.createElement("div",{className:"bg-white rounded-xl shadow-lg p-6"},e.createElement("h2",{className:"text-2xl font-semibold mb-6 text-gray-800"},"Multi-Dimensional Rating"),e.createElement("p",{className:"text-gray-600 mb-6 text-center"},"Rate different aspects separately"),e.createElement(m,{aspects:["quality","speed","price"],onRatingChange:function(e){return r(function(t){return i(i({},t),{},{multi:e})})}})),e.createElement("div",{className:"bg-gradient-to-br from-purple-50 to-blue-50 rounded-xl shadow-lg p-6"},e.createElement("h2",{className:"text-2xl font-semibold mb-6 text-gray-800"},"Advanced Features"),e.createElement("div",{className:"grid md:grid-cols-2 gap-8"},e.createElement("div",null,e.createElement("h3",{className:"font-medium mb-4 text-gray-700"},"With Intensity Levels"),e.createElement(n,{scale:"satisfaction",enableIntensity:!0,title:"Rate with sub-levels",onRatingChange:function(e,t,n){return r(function(a){return i(i({},a),{},{intensity:{rating:n.labels[e],level:t}})})}}),l.intensity&&e.createElement("div",{className:"mt-4 p-3 bg-purple-50 rounded-lg text-center"},e.createElement("p",{className:"text-purple-800 font-medium"},l.intensity.rating,l.intensity.level&&" (Intensity: ".concat(l.intensity.level,"/3)")))),e.createElement("div",null,e.createElement("h3",{className:"font-medium mb-4 text-gray-700"},"Custom Theme Scale"),e.createElement(n,{emojis:["💀","😵","😐","😎","🎉"],labels:["Terrible","Bad","Okay","Good","Awesome"],title:"Rate your experience",size:"medium"})))),e.createElement("div",{className:"bg-gray-50 rounded-xl p-6"},e.createElement("h2",{className:"text-2xl font-semibold mb-6 text-gray-800"},"Code Examples"),e.createElement("div",{className:"grid gap-6"},e.createElement("div",{className:"bg-white p-4 rounded-lg"},e.createElement("h3",{className:"font-medium mb-2 text-gray-700"},"Basic Usage"),e.createElement("pre",{className:"text-sm text-gray-600 overflow-x-auto"},'<EmojiFeedback\n scale="satisfaction"\n title="How satisfied are you?"\n onRatingChange={(rating, intensity, scale) => {\n console.log(\'Rating:\', rating, scale.labels[rating]);\n }}\n/>')),e.createElement("div",{className:"bg-white p-4 rounded-lg"},e.createElement("h3",{className:"font-medium mb-2 text-gray-700"},"Custom Scale"),e.createElement("pre",{className:"text-sm text-gray-600 overflow-x-auto"},"<EmojiFeedback\n emojis={['🥶', '🙂', '🔥', '🚀', '🌟']}\n labels={['Cold', 'Okay', 'Hot', 'Amazing', 'Perfect']}\n title=\"Rate the temperature\"\n enableIntensity={true}\n size=\"medium\"\n/>")))),e.createElement("div",{className:"bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl shadow-lg p-6"},e.createElement("h2",{className:"text-2xl font-semibold mb-6 text-gray-800"},"Interactive Playground"),e.createElement("div",{className:"grid md:grid-cols-3 gap-6"},e.createElement("div",null,e.createElement("h3",{className:"font-medium mb-3 text-gray-700"},"Quick Rating"),e.createElement("div",{className:"flex justify-center space-x-2"},["👍","👎","❤️","🔥","💯"].map(function(t,n){return e.createElement("button",{key:n,className:"text-3xl p-3 rounded-full hover:bg-white hover:shadow-md transition-all duration-200 transform hover:scale-110",onClick:function(){return console.log("Quick rating: ".concat(t))}},t)}))),e.createElement("div",null,e.createElement("h3",{className:"font-medium mb-3 text-gray-700"},"Mood Check"),e.createElement("div",{className:"flex justify-center space-x-2"},["🤩","🥳","😴","🤔","🚀"].map(function(t,n){return e.createElement("button",{key:n,className:"text-3xl p-3 rounded-full hover:bg-white hover:shadow-md transition-all duration-200 transform hover:scale-110",onClick:function(){return console.log("Mood: ".concat(t))}},t)}))),e.createElement("div",null,e.createElement("h3",{className:"font-medium mb-3 text-gray-700"},"Energy Level"),e.createElement("div",{className:"flex justify-center space-x-2"},["💤","😑","😊","⚡","🔋"].map(function(t,n){return e.createElement("button",{key:n,className:"text-3xl p-3 rounded-full hover:bg-white hover:shadow-md transition-all duration-200 transform hover:scale-110",onClick:function(){return console.log("Energy: ".concat(t))}},t)}))))),e.createElement("div",{className:"text-center text-gray-500"},e.createElement("p",null,"Built with React and Tailwind CSS"),e.createElement("p",{className:"text-sm mt-1"},"Fully customizable and production-ready")))};export{c as EmojiFeedback,u as EmojiFeedbackDemo};
//# sourceMappingURL=index.esm.js.map