@trimble-oss/moduswebcomponents
Version:
Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust
84 lines (83 loc) • 2.72 kB
JavaScript
export const convertPropsToClasses = ({ allowHalf, size, variant, }) => {
let ratingClasses = '';
let ratingItemClasses = '';
if (allowHalf && !(variant === 'smiley' || variant === 'thumb')) {
ratingClasses = `${ratingClasses} modus-wc-rating-half`;
}
if (size) {
switch (size) {
case 'sm':
ratingClasses = `${ratingClasses} modus-wc-rating-sm`;
break;
case 'md':
ratingClasses = `${ratingClasses} modus-wc-rating-md`;
break;
case 'lg':
ratingClasses = `${ratingClasses} modus-wc-rating-lg`;
break;
}
}
if (variant) {
switch (variant) {
case 'star':
ratingItemClasses = `${ratingItemClasses} modus-wc-mask-star-2`;
break;
case 'heart':
ratingItemClasses = `${ratingItemClasses} modus-wc-mask-heart`;
break;
case 'smiley':
ratingItemClasses = `${ratingItemClasses} modus-wc-mask-smiley`;
break;
case 'thumb':
ratingItemClasses = `${ratingItemClasses} modus-wc-mask-thumb`;
break;
}
}
return {
ratingPropClasses: ratingClasses.trim(),
ratingItemPropClasses: ratingItemClasses.trim(),
};
};
/**
* Get the appropriate CSS class for a rating item based on variant and index
*/
export const getIndexedRatingItemClass = (index, baseClasses, showHalf, variant, count) => {
if (showHalf) {
return `${baseClasses} ${getMaskHalfClasses(index)}`;
}
if (variant === 'smiley') {
return `${baseClasses} modus-wc-mask-smiley-${getSmileyClassValue(index, count)}`;
}
if (variant === 'thumb') {
return `${baseClasses} modus-wc-mask-thumb-${index + 1}`;
}
return baseClasses;
};
/**
* Determines the correct half mask class based on index
*/
const getMaskHalfClasses = (index) => {
return (index + 1) % 2 !== 0
? 'modus-wc-mask-half-1'
: 'modus-wc-mask-half-2';
};
/**
* Maps the index of the rating item to the corresponding smiley class value
* depending on the total number of rating items.
*/
const getSmileyClassValue = (index, count) => {
// 4-point scale: use 1, 2, 4, 5 (skip neutral)
if (count === 4) {
return [1, 2, 4, 5][index];
}
// 3-point scale: use 1, 3, 5 (dissatisfied, neutral, satisfied)
if (count === 3) {
return [1, 3, 5][index];
}
// 2-point scale or fewer: use 1, 5 (dissatisfied, satisfied)
if (count <= 2) {
return [1, 5][index];
}
// Default
return index + 1;
};