@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) • 16 kB
JavaScript
"use strict";var e=require("react"),t=require("@evaficy/react-emoji-feedback");function a(e,t){(null==t||t>e.length)&&(t=e.length);for(var a=0,n=Array(t);a<t;a++)n[a]=e[a];return n}function n(e,t,a){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var a=e[Symbol.toPrimitive];if(void 0!==a){var n=a.call(e,t||"default");if("object"!=typeof n)return n;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:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function l(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),a.push.apply(a,n)}return a}function r(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?l(Object(a),!0).forEach(function(t){n(e,t,a[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):l(Object(a)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))})}return e}function i(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=a){var n,l,r,i,o=[],s=!0,c=!1;try{if(r=(a=a.call(e)).next,0===t){if(Object(a)!==a)return;s=!1}else for(;!(s=(n=r.call(a)).done)&&(o.push(n.value),o.length!==t);s=!0);}catch(e){c=!0,l=e}finally{try{if(!s&&null!=a.return&&(i=a.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 o(e){return o="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},o(e)}var s=function(t){var a=t.aspects,l=void 0===a?["quality","speed","price"]:a,o=t.onRatingChange,s=void 0===o?null:o,c={emojis:["😡","😠","😐","😊","😁"],labels:["Angry","Dissatisfied","Neutral","Satisfied","Delighted"]},m=i(e.useState(l.reduce(function(e,t){return r(r({},e),{},n({},t,null))},{})),2),u=m[0],d=m[1],f=i(e.useState({}),2),b=f[0],g=f[1];return e.createElement("div",{className:"space-y-6"},l.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"},c.emojis.map(function(a,l){return e.createElement("button",{key:"".concat(t,"-").concat(l),className:"\n text-4xl p-3 rounded-full transition-all duration-300 transform\n ".concat(u[t]===l?"scale-125 bg-blue-100":"scale-100","\n ").concat(b[t]===l?"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 a=r(r({},u),{},n({},e,t));d(a),s&&s(a)}(t,l)},onMouseEnter:function(){return g(function(e){return r(r({},e),{},n({},t,l))})},onMouseLeave:function(){return g(function(e){return r(r({},e),{},n({},t,null))})},title:c.labels[l]},e.createElement("span",{className:"transition-all duration-300 ".concat(u[t]===l?"animate-bounce":"")},a))})))}),Object.values(u).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(u).map(function(t){var a=i(t,2),n=a[0],l=a[1];return null!==l&&e.createElement("div",{key:n,className:"flex justify-between items-center"},e.createElement("span",{className:"capitalize text-gray-700"},n,":"),e.createElement("span",{className:"font-medium text-gray-800"},c.emojis[l]," ",c.labels[l]))}))))};exports.EmojiFeedback=function(t){var a=t.scale,n=void 0===a?null:a,l=t.emojis,r=void 0===l?null:l,s=t.labels,c=void 0===s?null:s,m=t.title,u=void 0===m?null:m,d=t.enableIntensity,f=void 0!==d&&d,b=t.size,g=void 0===b?"large":b,y=t.layout,p=void 0===y?"horizontal":y,v=t.showLabels,E=void 0===v||v,x=t.onRatingChange,h=void 0===x?null:x,N=t.initialRating,w=void 0===N?null:N,j=t.initialIntensity,S=void 0===j?null:j,k={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"}},C=r&&c?{emojis:r,labels:c,name:u||"Custom Scale"}:n&&"object"===o(n)?n:n&&"string"==typeof n&&k[n]?k[n]:k.happiness,O=i(e.useState(w),2),I=O[0],R=O[1],z=i(e.useState(S),2),F=z[0],P=z[1],H=i(e.useState(null),2),L=H[0],M=H[1],A=function(){switch(g){case"small":return"text-2xl p-2";case"medium":return"text-3xl p-2.5";default:return"text-4xl p-3"}},D=function(t){var a=t.emoji,n=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,b=void 0===f?null:f;return e.createElement("div",{className:"relative"},e.createElement("button",{className:"\n relative ".concat(A()," 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:n},e.createElement("span",{className:"\n transition-all duration-300\n ".concat(l?"animate-bounce":"","\n ")},a)),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(),b&&b(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"},n))};return e.createElement("div",{className:"w-full"},u&&e.createElement("h3",{className:"text-lg font-medium mb-4 text-gray-700 text-center"},u),e.createElement("div",{className:"flex justify-center ".concat("vertical"===p?"flex-col items-center space-y-4":"space-x-4"," mb-4")},C.emojis.map(function(t,a){return e.createElement(D,{key:a,emoji:t,label:C.labels[a],isSelected:I===a,isHovered:L===a,onClick:function(){return function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;R(e),f&&null!==t&&P(t),h&&h(e,t,C)}(a)},onMouseEnter:function(){return M(a)},onMouseLeave:function(){return M(null)},showIntensity:f,selectedIntensity:I===a?F:null,onIntensitySelect:function(e){return P(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 "))},exports.EmojiFeedbackDemo=function(){var a=i(e.useState({}),2),n=a[0],l=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(t.EmojiFeedback,{scale:"satisfaction",title:"How satisfied are you with our service?",onRatingChange:function(e,t,a){return l(function(t){return r(r({},t),{},{simple:{rating:e,scale:a.labels[e]}})})}}),n.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: ",n.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(t.EmojiFeedback,{emojis:["🥶","🙂","🔥","🚀","🌟"],labels:["Cold","Okay","Hot","Amazing","Perfect"],title:"Rate the temperature",enableIntensity:!0,onRatingChange:function(e,t,a){return l(function(n){return r(r({},n),{},{custom:{rating:a.labels[e],intensity:t?"Level ".concat(t):null}})})}}),n.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"},n.custom.rating,n.custom.intensity&&" (".concat(n.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(t.EmojiFeedback,{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(t.EmojiFeedback,{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(t.EmojiFeedback,{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(t.EmojiFeedback,{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(t.EmojiFeedback,{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(s,{aspects:["quality","speed","price"],onRatingChange:function(e){return l(function(t){return r(r({},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(t.EmojiFeedback,{scale:"satisfaction",enableIntensity:!0,title:"Rate with sub-levels",onRatingChange:function(e,t,a){return l(function(n){return r(r({},n),{},{intensity:{rating:a.labels[e],level:t}})})}}),n.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"},n.intensity.rating,n.intensity.level&&" (Intensity: ".concat(n.intensity.level,"/3)")))),e.createElement("div",null,e.createElement("h3",{className:"font-medium mb-4 text-gray-700"},"Custom Theme Scale"),e.createElement(t.EmojiFeedback,{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,a){return e.createElement("button",{key:a,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,a){return e.createElement("button",{key:a,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,a){return e.createElement("button",{key:a,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")))};
//# sourceMappingURL=index.js.map