UNPKG

react-rating

Version:

A rating react component with custom symbols

3 lines (2 loc) 7.75 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):(e=e||self).ReactRating=t(e.React)}(this,function(e){"use strict";function t(e){return(t="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 o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function n(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function i(e,t,o){return t&&n(e.prototype,t),o&&n(e,o),e}function r(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function a(){return(a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e}).apply(this,arguments)}function l(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{},n=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(o).filter(function(e){return Object.getOwnPropertyDescriptor(o,e).enumerable}))),n.forEach(function(t){r(e,t,o[t])})}return e}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&u(e,t)}function c(e){return(c=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function u(e,t){return(u=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function p(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function y(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?p(e):t}e=e&&e.hasOwnProperty("default")?e.default:e;var h={display:"inline-block",borderRadius:"50%",border:"5px double white",width:30,height:30},f={empty:l({},h,{backgroundColor:"#ccc"}),full:l({},h,{backgroundColor:"black"}),placeholder:l({},h,{backgroundColor:"red"})},d=function(o){return e.isValidElement(o)?o:"object"===t(o)&&null!==o?e.createElement("span",{style:o}):"[object String]"===Object.prototype.toString.call(o)?e.createElement("span",{className:o}):void 0},v=function(t){function n(){return o(this,n),y(this,c(n).apply(this,arguments))}return s(n,e.PureComponent),i(n,[{key:"render",value:function(){var t,o=this.props,n=o.index,i=o.inactiveIcon,a=o.activeIcon,l=o.percent,s=o.direction,c=o.readonly,u=o.onClick,p=o.onMouseMove,y=d(i),h=l<100?{}:{visibility:"hidden"},f=d(a),v=(r(t={display:"inline-block",position:"absolute",overflow:"hidden",top:0},"rtl"===s?"right":"left",0),r(t,"width","".concat(l,"%")),t),b={cursor:c?"inherit":"pointer",display:"inline-block",position:"relative"};function m(e){p&&p(n,e)}function g(e){u&&(e.preventDefault(),u(n,e))}return e.createElement("span",{style:b,onClick:g,onMouseMove:m,onTouchMove:m,onTouchEnd:g},e.createElement("span",{style:h},y),e.createElement("span",{style:v},f))}}]),n}(),b=function(t){function n(e){var t;return o(this,n),(t=y(this,c(n).call(this,e))).state={displayValue:t.props.value,interacting:!1},t.onMouseLeave=t.onMouseLeave.bind(p(p(t))),t.symbolMouseMove=t.symbolMouseMove.bind(p(p(t))),t.symbolClick=t.symbolClick.bind(p(p(t))),t}return s(n,e.PureComponent),i(n,[{key:"UNSAFE_componentWillReceiveProps",value:function(e){var t=this.props.value!==e.value;this.setState(function(o){return{displayValue:t?e.value:o.displayValue}})}},{key:"componentDidUpdate",value:function(e,t){if(e.value===this.props.value)return t.interacting&&!this.state.interacting?this.props.onHover():void(this.state.interacting&&this.props.onHover(this.state.displayValue))}},{key:"symbolClick",value:function(e,t){var o=this.calculateDisplayValue(e,t);this.props.onClick(o,t)}},{key:"symbolMouseMove",value:function(e,t){var o=this.calculateDisplayValue(e,t);this.setState({interacting:!this.props.readonly,displayValue:o})}},{key:"onMouseLeave",value:function(){this.setState({displayValue:this.props.value,interacting:!1})}},{key:"calculateDisplayValue",value:function(e,t){var o=this.calculateHoverPercentage(t),n=Math.ceil(o%1*this.props.fractions)/this.props.fractions,i=Math.pow(10,3),r=e+(Math.floor(o)+Math.floor(n*i)/i);return r>0?r>this.props.totalSymbols?this.props.totalSymbols:r:1/this.props.fractions}},{key:"calculateHoverPercentage",value:function(e){var t=e.nativeEvent.type.indexOf("touch")>-1?e.nativeEvent.type.indexOf("touchend")>-1?e.changedTouches[0].clientX:e.touches[0].clientX:e.clientX,o=e.target.getBoundingClientRect(),n="rtl"===this.props.direction?o.right-t:t-o.left;return n<0?0:n/o.width}},{key:"render",value:function(){var t,o=this.props,n=o.readonly,i=o.quiet,r=o.totalSymbols,s=o.value,c=o.placeholderValue,u=o.direction,p=o.emptySymbol,y=o.fullSymbol,h=o.placeholderSymbol,f=o.className,d=o.id,b=o.style,m=o.tabIndex,g=this.state,k=g.displayValue,S=g.interacting,M=[],C=[].concat(p),O=[].concat(y),V=[].concat(h),w=0!==c&&0===s&&!S;t=w?c:i?s:k;for(var E=Math.floor(t),P=0;P<r;P++){var j=void 0;j=P-E<0?100:P-E==0?100*(t-P):0,M.push(e.createElement(v,a({key:P,index:P,readonly:n,inactiveIcon:C[P%C.length],activeIcon:w?V[P%O.length]:O[P%O.length],percent:j,direction:u},!n&&{onClick:this.symbolClick,onMouseMove:this.symbolMouseMove,onTouchMove:this.symbolMouseMove,onTouchEnd:this.symbolClick})))}return e.createElement("span",a({id:d,style:l({},b,{display:"inline-block",direction:u}),className:f,tabIndex:m,"aria-label":this.props["aria-label"]},!n&&{onMouseLeave:this.onMouseLeave}),M)}}]),n}();function m(){}m._name="react_rating_noop";var g=function(t){function n(e){var t;return o(this,n),(t=y(this,c(n).call(this,e))).state={value:e.initialRating},t.handleClick=t.handleClick.bind(p(p(t))),t.handleHover=t.handleHover.bind(p(p(t))),t}return s(n,e.PureComponent),i(n,[{key:"UNSAFE_componentWillReceiveProps",value:function(e){this.setState({value:e.initialRating})}},{key:"handleClick",value:function(e,t){var o=this,n=this.translateDisplayValueToValue(e);this.props.onClick(n),this.state.value!==n&&this.setState({value:n},function(){return o.props.onChange(o.state.value)})}},{key:"handleHover",value:function(e){var t=void 0===e?e:this.translateDisplayValueToValue(e);this.props.onHover(t)}},{key:"translateDisplayValueToValue",value:function(e){var t=e*this.props.step+this.props.start;return t===this.props.start?t+1/this.props.fractions:t}},{key:"tranlateValueToDisplayValue",value:function(e){return void 0===e?0:(e-this.props.start)/this.props.step}},{key:"render",value:function(){var t=this.props,o=t.step,n=t.emptySymbol,i=t.fullSymbol,r=t.placeholderSymbol,a=t.readonly,l=t.quiet,s=t.fractions,c=t.direction,u=t.start,p=t.stop,y=t.id,h=t.className,f=t.style,d=t.tabIndex;return e.createElement(b,{id:y,style:f,className:h,tabIndex:d,"aria-label":this.props["aria-label"],totalSymbols:function(e,t,o){return Math.floor((t-e)/o)}(u,p,o),value:this.tranlateValueToDisplayValue(this.state.value),placeholderValue:this.tranlateValueToDisplayValue(this.props.placeholderRating),readonly:a,quiet:l,fractions:s,direction:c,emptySymbol:n,fullSymbol:i,placeholderSymbol:r,onClick:this.handleClick,onHover:this.handleHover})}}]),n}();return g.defaultProps={start:0,stop:5,step:1,readonly:!1,quiet:!1,fractions:1,direction:"ltr",onHover:m,onClick:m,onChange:m,emptySymbol:f.empty,fullSymbol:f.full,placeholderSymbol:f.placeholder},g}); //# sourceMappingURL=react-rating.umd.min.js.map