rsuite/esm/Rate/Rate.js

A suite of react components

'use client';
import _extends from "@babel/runtime/helpers/esm/extends";
import React from 'react';
import isNil from 'lodash/isNil';
import Star from '@rsuite/icons/Star';
import Character from "./Character.js";
import Plaintext from "../internals/Plaintext/index.js";
import StyledBox from "../internals/StyledBox/index.js";
import { KEY_VALUES } from "../internals/constants/index.js";
import { useControlled, useStyles, useCustom, useEventCallback } from "../internals/hooks/index.js";
import { forwardRef, shallowEqualArray, mergeStyles } from "../internals/utils/index.js";
import { transformStarStatusToValue, getFractionalValue } from "./utils.js";
import { useRatingStates } from "./useRatingStates.js";
/**
 * The `Rate` component is used for rating. It can be used to evaluate the quality of the content.
 * @see https://rsuitejs.com/components/rate/
 */
const Rate = forwardRef((props, ref) => {
  const {
    propsWithDefaults
  } = useCustom('Rate', props);
  const {
    as = 'ul',
    character = /*#__PURE__*/React.createElement(Star, null),
    className,
    classPrefix = 'rate',
    disabled,
    max = 5,
    name,
    readOnly,
    vertical,
    size,
    color,
    allowHalf = false,
    value: valueProp,
    defaultValue = 0,
    cleanable = true,
    plaintext,
    style,
    onChange,
    renderCharacter,
    onChangeActive,
    ...rest
  } = propsWithDefaults;
  const [value, setValue] = useControlled(valueProp, defaultValue);
  const {
    merge,
    withPrefix
  } = useStyles(classPrefix);
  const classes = merge(className, withPrefix());

  // Use the custom hook to manage rating star states
  const {
    starStates,
    setStarStates,
    resetStarStates,
    hoverValue,
    getStarStates
  } = useRatingStates({
    value,
    max,
    allowHalf,
    valueProp
  });
  const handleMouseLeave = useEventCallback(event => {
    resetStarStates();
    onChangeActive === null || onChangeActive === void 0 || onChangeActive(value, event);
  });
  const handleChangeValue = useEventCallback((index, event) => {
    let nextValue = transformStarStatusToValue(starStates);
    if (cleanable && value === nextValue && getStarStates(value)[index] === starStates[index]) {
      nextValue = 0;
    }
    if (nextValue !== value) {
      setValue(nextValue);
      setStarStates(getStarStates(nextValue));
      onChange === null || onChange === void 0 || onChange(nextValue, event);
    }
  });
  const handleKeyDown = useEventCallback((index, event) => {
    const {
      key
    } = event;
    let nextValue = transformStarStatusToValue(starStates);
    if (key === KEY_VALUES.RIGHT && nextValue < max) {
      nextValue = allowHalf ? nextValue + 0.5 : nextValue + 1;
    } else if (key === KEY_VALUES.LEFT && nextValue > 0) {
      nextValue = allowHalf ? nextValue - 0.5 : nextValue - 1;
    }
    setStarStates(getStarStates(nextValue));
    if (key === KEY_VALUES.ENTER) {
      handleChangeValue(index, event);
    }
  });
  const handleChangeStarStates = useEventCallback((index, key, event) => {
    const nextStarStates = starStates.map((_item, i) => {
      if (i === index && key === 'before' && allowHalf) {
        return 0.5;
      }
      return index >= i ? 1 : 0;
    });
    if (!shallowEqualArray(starStates, nextStarStates)) {
      setStarStates(nextStarStates);
      onChangeActive === null || onChangeActive === void 0 || onChangeActive(transformStarStatusToValue(nextStarStates), event);
    }
  });
  const handleClick = useEventCallback((index, key, event) => {
    handleChangeStarStates(index, key, event);
    handleChangeValue(index, event);
  });
  if (plaintext) {
    return /*#__PURE__*/React.createElement(Plaintext, {
      localeKey: "notSelected",
      className: className
    }, !isNil(value) ? `${value}/${max}` : null);
  }
  const mergedStyle = mergeStyles(style, {
    '--rs-rate-before-size': getFractionalValue(value)
  });
  return /*#__PURE__*/React.createElement(StyledBox, _extends({
    as: as,
    name: "rate",
    size: size,
    color: color,
    role: "radiogroup",
    tabIndex: disabled ? -1 : 0,
    ref: ref,
    className: classes,
    style: mergedStyle,
    onMouseLeave: handleMouseLeave,
    "data-disabled": disabled,
    "data-readonly": readOnly,
    "data-name": name
  }, rest), starStates.map((status, index) => /*#__PURE__*/React.createElement(Character, {
    role: "radio",
    "aria-posinset": index + 1,
    "aria-setsize": max,
    "aria-checked": value === index + 1,
    key: index,
    status: status,
    disabled: disabled || readOnly,
    vertical: vertical,
    onClick: (key, event) => handleClick(index, key, event),
    onKeyDown: event => handleKeyDown(index, event),
    onMouseMove: (key, event) => handleChangeStarStates(index, key, event)
  }, renderCharacter ? renderCharacter(hoverValue, index) : character)));
});
Rate.displayName = 'Rate';
export default Rate;