chore(rating): code refactoring

nextui-org · Oct 18, 2024 · 51cdaef · 51cdaef
1 parent 31632ad
commit 51cdaef
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 63 deletions.
diff --git a/packages/components/rating/src/rating-segment.tsx b/packages/components/rating/src/rating-segment.tsx
@@ -1,4 +1,4 @@
-import {useMemo, useRef} from "react";
+import {useMemo} from "react";
 import {clsx, dataAttr} from "@nextui-org/shared-utils";
 import {useHover} from "@react-aria/interactions";
 import {Radio} from "@nextui-org/radio";
@@ -28,8 +28,6 @@ const RatingSegment = ({index, icon, fillColor}: RatingSegmentProps) => {
     onBlur,
   } = context;
 
-  const iconRef = useRef<HTMLDivElement>(null);
-
   let value = ratingValue.selectedValue;
 
   if (isIconWrapperHovered && shouldConsiderHover) {
@@ -101,7 +99,6 @@ const RatingSegment = ({index, icon, fillColor}: RatingSegmentProps) => {
 
   return (
     <div
-      ref={iconRef}
       className={segmentStyles}
       data-hovered={dataAttr(isHovered)}
       data-slot="segment"

diff --git a/packages/components/rating/src/rating.tsx b/packages/components/rating/src/rating.tsx
@@ -17,17 +17,9 @@ const Rating = forwardRef<"div", RatingProps>((props, ref) => {
     Component,
     children,
     length,
-    isInvalid,
-    isRequired,
     ratingValue,
-    defaultValue,
     value,
     name,
-    description,
-    errorMessage,
-    classNames,
-    slots,
-    validationBehavior,
     icon = <StarIcon />,
     onChange,
     onBlur,
@@ -36,67 +28,29 @@ const Rating = forwardRef<"div", RatingProps>((props, ref) => {
     getMainWrapperProps,
     getIconWrapperProps,
     getInputProps,
-    validate,
+    getRadioGroupProps,
   } = context;
 
   const IconList = useMemo(() => {
     return (
-      <div {...getIconWrapperProps()}>
-        <RadioGroup
-          classNames={{
-            errorMessage: slots.errorMessage({class: classNames?.errorMessage}),
-            description: slots.description({class: classNames?.description}),
-          }}
-          data-slot="radio-group"
-          defaultValue={defaultValue}
-          description={description}
-          errorMessage={errorMessage}
-          isInvalid={isInvalid}
-          isRequired={isRequired}
+      <RadioGroup {...getRadioGroupProps()}>
+        <Radio
+          className={"absolute inset-0 top-0 opacity-0"}
+          data-slot="radio"
           name={name}
-          orientation="horizontal"
-          validate={validate}
-          validationBehavior={validationBehavior}
-          value={ratingValue.selectedValue != -1 ? ratingValue.selectedValue.toString() : null}
+          value={"0"}
+          onBlur={onBlur}
           onChange={onChange}
-          onValueChange={(e) => {
-            setRatingValue({selectedValue: Number(e), hoveredValue: Number(e)});
-          }}
-        >
-          <Radio
-            className={"absolute inset-0 top-0 opacity-0"}
-            data-slot="radio"
-            name={name}
-            value={"0"}
-            onBlur={onBlur}
-            onChange={onChange}
-          />
+        />
+        <div {...getIconWrapperProps()}>
           {children ??
             Array.from(Array(length)).map((_, idx) => (
               <RatingSegment key={"segment-" + idx} icon={icon} index={idx} />
             ))}
-        </RadioGroup>
-      </div>
+        </div>
+      </RadioGroup>
     );
-  }, [
-    children,
-    length,
-    getIconWrapperProps,
-    name,
-    defaultValue,
-    ratingValue,
-    setRatingValue,
-    isInvalid,
-    isRequired,
-    description,
-    errorMessage,
-    slots,
-    classNames,
-    validationBehavior,
-    onBlur,
-    onChange,
-    validate,
-  ]);
+  }, [name, children, length, icon, onBlur, onChange, getIconWrapperProps, getRadioGroupProps]);
 
   const Input = useMemo(
     () => (

diff --git a/packages/components/rating/src/use-rating.ts b/packages/components/rating/src/use-rating.ts
@@ -16,6 +16,7 @@ import {useLocale} from "@react-aria/i18n";
 import {AriaTextFieldProps} from "@react-types/textfield";
 import {useControlledState} from "@react-stately/utils";
 import {useSafeLayoutEffect} from "@nextui-org/use-safe-layout-effect";
+import {RadioGroupProps} from "@nextui-org/radio";
 
 export type RatingValueType = {
   hoveredValue: number;
@@ -87,6 +88,9 @@ interface Props extends HTMLNextUIProps<"div"> {
    *    iconWrapper: "icon-wrapper-classes",
    *    iconSegement: "icon-segment-classes",
    *    icon: "icon-classes",
+   *    input: "input-classes",
+   *    radioButtonsWrapper: "radio-buttons-wrapper-classes",
+   *    radioButtonWrapper: "radio-button-wrapper-classes",
    *    description: "description-classes",
    *    errorMessage: "error-message-classes",
    * }} />
@@ -208,6 +212,7 @@ export function useRating(originalProps: UseRatingProps) {
 
     return props.validate(value);
   };
+
   const isInvalid = props.isInvalid;
 
   const {hoverProps, isHovered: isIconWrapperHovered} = useHover({isDisabled});
@@ -290,6 +295,32 @@ export function useRating(originalProps: UseRatingProps) {
     [domRef, ratingValue, slots, originalProps, originalProps.value],
   );
 
+  const getRadioGroupProps = (props = {}) => {
+    return {
+      name,
+      orientation: "horizontal",
+      defaultValue,
+      description,
+      errorMessage,
+      isInvalid,
+      isRequired,
+      validationBehavior,
+      value: ratingValue.selectedValue != -1 ? ratingValue.selectedValue.toString() : null,
+      classNames: {
+        wrapper: "gap-0.5",
+        errorMessage: slots.errorMessage({class: classNames?.errorMessage}),
+        description: slots.description({class: classNames?.description}),
+      },
+      validate,
+      onChange,
+      onValueChange: (e) => {
+        setRatingValue({selectedValue: Number(e), hoveredValue: Number(e)});
+      },
+      ...props,
+      "data-slot": "radiogroup",
+    } as RadioGroupProps;
+  };
+
   return {
     Component,
     domRef,
@@ -321,6 +352,7 @@ export function useRating(originalProps: UseRatingProps) {
     getMainWrapperProps,
     getIconWrapperProps,
     getInputProps,
+    getRadioGroupProps,
     onChange,
     onBlur,
     validate,

diff --git a/packages/core/theme/src/components/rating.ts b/packages/core/theme/src/components/rating.ts
@@ -6,7 +6,7 @@ const rating = tv({
   slots: {
     base: "flex flex-col w-fit cursor-pointer",
     mainWrapper: "relative",
-    iconWrapper: "inline-flex gap-x-2",
+    iconWrapper: "inline-flex gap-x-0",
     iconSegment: ["relative"],
     icon: [],
     input: [],