@royyanbach-mhg-test/material-tailwind-react/components/Rating/index.js

@material-tailwind/react is an easy-to-use components library for ReactJS & Tailwind CSS inspired by Material Design.

function _arrayLikeToArray(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}function _arrayWithoutHoles(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr)}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key]}}}return target};return _extends.apply(this,arguments)}function _iterableToArray(iter){if(typeof Symbol!=="undefined"&&iter[Symbol.iterator]!=null||iter["@@iterator"]!=null)return Array.from(iter)}function _iterableToArrayLimit(arr,i){var _i=arr==null?null:typeof Symbol!=="undefined"&&arr[Symbol.iterator]||arr["@@iterator"];if(_i==null)return;var _arr=[];var _n=true;var _d=false;var _s,_e;try{for(_i=_i.call(arr);!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break}}catch(err){_d=true;_e=err}finally{try{if(!_n&&_i["return"]!=null)_i["return"]()}finally{if(_d)throw _e}}return _arr}function _nonIterableRest(){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 _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key]}}return target}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key]}return target}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_unsupportedIterableToArray(arr,i)||_nonIterableRest()}function _toConsumableArray(arr){return _arrayWithoutHoles(arr)||_iterableToArray(arr)||_unsupportedIterableToArray(arr)||_nonIterableSpread()}function _unsupportedIterableToArray(o,minLen){if(!o)return;if(typeof o==="string")return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(n);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}import React from"react";import PropTypes from"prop-types";import classnames from"classnames";import{twMerge}from"tailwind-merge";import findMatch from"../../utils/findMatch";import objectsToString from"../../utils/objectsToString";import{useTheme}from"../../context/theme";import{propTypesCount,propTypesValue,propTypesRatedIcon,propTypesUnratedIcon,propTypesColor,propTypesClassName,propTypesOnChange,propTypesReadonly}from"../../types/components/rating";export var Rating=React.forwardRef(function(_param,ref){var count=_param.count,value=_param.value,ratedIcon=_param.ratedIcon,unratedIcon=_param.unratedIcon,ratedColor=_param.ratedColor,unratedColor=_param.unratedColor,className=_param.className,onChange=_param.onChange,readonly=_param.readonly,rest=_objectWithoutProperties(_param,["count","value","ratedIcon","unratedIcon","ratedColor","unratedColor","className","onChange","readonly"]);var _ratedIconInstance_props,_unratedIconInstance_props;var rating=useTheme().rating;var valid=rating.valid,defaultProps=rating.defaultProps,styles=rating.styles;var base=styles.base,colors=styles.colors;count=count!==null&&count!==void 0?count:defaultProps.count;value=value!==null&&value!==void 0?value:defaultProps.value;ratedIcon=ratedIcon!==null&&ratedIcon!==void 0?ratedIcon:defaultProps.ratedIcon;ratedIcon=ratedIcon!==null&&ratedIcon!==void 0?ratedIcon:defaultProps.ratedIcon;unratedIcon=unratedIcon!==null&&unratedIcon!==void 0?unratedIcon:defaultProps.unratedIcon;ratedColor=ratedColor!==null&&ratedColor!==void 0?ratedColor:defaultProps.ratedColor;unratedColor=unratedColor!==null&&unratedColor!==void 0?unratedColor:defaultProps.unratedColor;onChange=onChange!==null&&onChange!==void 0?onChange:defaultProps.onChange;readonly=readonly!==null&&readonly!==void 0?readonly:defaultProps.readonly;className=twMerge(defaultProps.className||"",className);var _React_useState=_slicedToArray(React.useState(function(){return _toConsumableArray(Array(value).fill("rated")).concat(_toConsumableArray(Array(count-value).fill("un_rated")))}),2),ratingValue=_React_useState[0],setRatingValue=_React_useState[1];var _React_useState1=_slicedToArray(React.useState(function(){return _toConsumableArray(Array(count).fill("un_rated"))}),2),ratingOnHover=_React_useState1[0],setRatingOnHover=_React_useState1[1];var _React_useState2=_slicedToArray(React.useState(false),2),isHover=_React_useState2[0],setIsHover=_React_useState2[1];var ratedColorClasses=objectsToString(colors[findMatch(valid.colors,ratedColor,"yellow")]);var unratedColorClasses=objectsToString(colors[findMatch(valid.colors,unratedColor,"blue-gray")]);var ratingClasses=twMerge(classnames(objectsToString(base.rating),className));var ratingIconClasses=objectsToString(base.icon);var ratedIconInstance=ratedIcon;var unratedIconInstance=unratedIcon;var customRatedIcon=React.isValidElement(ratedIcon)&&React.cloneElement(ratedIconInstance,{className:twMerge(classnames(ratingIconClasses,ratedColorClasses,ratedIconInstance===null||ratedIconInstance===void 0?void 0:(_ratedIconInstance_props=ratedIconInstance.props)===null||_ratedIconInstance_props===void 0?void 0:_ratedIconInstance_props.className))});var customUnratedIcon=React.isValidElement(ratedIcon)&&React.cloneElement(unratedIconInstance,{className:twMerge(classnames(ratingIconClasses,unratedColorClasses,unratedIconInstance===null||unratedIconInstance===void 0?void 0:(_unratedIconInstance_props=unratedIconInstance.props)===null||_unratedIconInstance_props===void 0?void 0:_unratedIconInstance_props.className))});var ratedIconEl=!React.isValidElement(ratedIcon)&&React.createElement(ratedIcon,{className:twMerge(classnames(ratingIconClasses,ratedColorClasses))});var unratedIconEl=!React.isValidElement(ratedIcon)&&React.createElement(unratedIcon,{className:twMerge(classnames(ratingIconClasses,unratedColorClasses))});var renderRating=function(data){return data.map(function(el,index){return React.createElement("span",{key:index,onClick:function(){if(readonly)return;var nextRating=ratingValue.map(function(el,i){return i<=index?"rated":"un_rated"});setRatingValue(nextRating);onChange&&typeof onChange==="function"&&onChange(nextRating.filter(function(el){return el==="rated"}).length)},onMouseEnter:function(){if(readonly)return;var nextRating=ratingOnHover.map(function(el,i){return i<=index?"rated":"un_rated"});setIsHover(true);setRatingOnHover(nextRating)},onMouseLeave:function(){return!readonly&&setIsHover(false)}},React.isValidElement(el==="rated"?ratedIcon:unratedIcon)?el==="rated"?customRatedIcon:customUnratedIcon:el==="rated"?ratedIconEl:unratedIconEl)})};return React.createElement("div",_extends({},rest,{ref:ref,className:ratingClasses}),isHover?renderRating(ratingOnHover):renderRating(ratingValue))});Rating.propTypes={count:propTypesCount,value:propTypesValue,ratedIcon:propTypesRatedIcon,unratedIcon:propTypesUnratedIcon,ratedColor:PropTypes.oneOf(propTypesColor),unratedColor:PropTypes.oneOf(propTypesColor),className:propTypesClassName,onChange:propTypesOnChange,readonly:propTypesReadonly};Rating.displayName="MaterialTailwind.Rating";export default Rating;