perf: add utility for background class checks

Author: huijiewei

packages/react-ui/src/components/accordion/accordion-root.tsx

@@ -1,38 +1,24 @@
 import { Composite } from "@floating-ui/react";
-import { useState, type KeyboardEvent } from "react";
+import { type KeyboardEvent, useState } from "react";
 import { useControllableState } from "../../hooks";
 import type { PrimitiveProps } from "../../primitives";
 import { CompositeContext, type CompositeContextValue } from "../../primitives/composite/composite-context";
+import type { MultipleValueProps, SingleValueProps } from "../../shared/types";
 import { tx } from "../../utils";
-import { AccordionContext, type AccordionBaseProps, type AccordionContextValue } from "./accordion-context";
+import { type AccordionBaseProps, AccordionContext, type AccordionContextValue } from "./accordion-context";
 
 type AccordionSingleProps = {
   /**
    * 同时打开多个项目
    */
   multiple: false;
 
-  /**
-   * 受控值
-   */
-  value?: string | number | null;
-
-  /**
-   * 默认值
-   */
-  defaultValue?: string | number | null;
-
-  /**
-   * onChange 回调
-   */
-  onChange?: (value: string | number | null) => void;
-
   /**
    * 允许关闭内容, 当 `multiple` 为 `false` 时有效
    * @default false
    */
   collapsible?: boolean;
-};
+} & Omit<SingleValueProps, "multiple">;
 
 type AccordionMultipleProps = {
   /**
@@ -42,22 +28,7 @@ type AccordionMultipleProps = {
   multiple?: true;
 
   collapsible?: never;
-
-  /**
-   * 受控值
-   */
-  value?: (string | number)[];
-
-  /**
-   * 默认值
-   */
-  defaultValue?: (string | number)[];
-
-  /**
-   * onChange 回调
-   */
-  onChange?: (value: (string | number)[]) => void;
-};
+} & Omit<MultipleValueProps, "multiple">;
 
 export type AccordionRootProps = (AccordionMultipleProps | AccordionSingleProps) & AccordionBaseProps;
 

packages/react-ui/src/components/avatar/avatar-root.tsx

@@ -2,6 +2,7 @@ import { isNumber } from "@resolid/utils";
 import { type CSSProperties, useState } from "react";
 import type { ImageLoadStatus } from "../../hooks";
 import type { PrimitiveProps } from "../../primitives";
+import { hasBackgroundClass } from "../../shared/utils";
 import { tx } from "../../utils";
 import { AvatarContext, AvatarStatusContext } from "./avatar-context";
 import { type AvatarBaseProps, useAvatarGroup } from "./avatar-group-context";
@@ -45,7 +46,7 @@ export const AvatarRoot = (props: PrimitiveProps<"div", AvatarRootProps>) => {
         "size-(--sv) relative inline-flex shrink-0 select-none items-center justify-center",
         radiusClass,
         group && "border-bg-normal not-first:ms-(--pv) border-2",
-        !className?.split(" ").some((cls) => cls.startsWith("bg-")) && "bg-bg-subtlest",
+        !hasBackgroundClass(className) && "bg-bg-subtlest",
         className,
       )}
       {...rest}

packages/react-ui/src/components/dialog/dialog-content.tsx

@@ -3,6 +3,7 @@ import type { PrimitiveProps } from "../../primitives";
 import { usePopperAria } from "../../primitives/popper/popper-aria-context";
 import { PopperFloating } from "../../primitives/popper/popper-floating";
 import { usePopperTransition } from "../../primitives/popper/popper-transtion-context";
+import { hasBackgroundClass } from "../../shared/utils";
 import { tx } from "../../utils";
 import { useDialog } from "./dialog-context";
 
@@ -34,7 +35,7 @@ export const DialogContent = (props: PrimitiveProps<"div">) => {
             "relative mx-auto shadow-md transition-opacity",
             status == "open" ? "opacity-100" : "opacity-0",
             scrollBehavior == "inside" && "max-h-[calc(100%-10rem)]",
-            !className?.split(" ").some((cls) => cls.startsWith("bg-")) && "bg-bg-normal",
+            !hasBackgroundClass(className) && "bg-bg-normal",
             className,
           )}
           aria-labelledby={labelId}

packages/react-ui/src/components/drawer/drawer-content.tsx

@@ -3,6 +3,7 @@ import type { PrimitiveProps } from "../../primitives";
 import { usePopperAria } from "../../primitives/popper/popper-aria-context";
 import { PopperFloating } from "../../primitives/popper/popper-floating";
 import { usePopperTransition } from "../../primitives/popper/popper-transtion-context";
+import { hasBackgroundClass } from "../../shared/utils";
 import { tx } from "../../utils";
 import { useDialog } from "../dialog/dialog-context";
 import { useDrawer } from "./drawer-context";
@@ -52,7 +53,7 @@ export const DrawerContent = (props: PrimitiveProps<"div">) => {
           className={tx(
             "fixed flex flex-col shadow-md transition-[opacity,translate]",
             drawerStyle.base,
-            !className?.split(" ").some((cls) => cls.startsWith("bg-")) && "bg-bg-normal",
+            !hasBackgroundClass(className) && "bg-bg-normal",
             status == "open" ? ["opacity-100", drawerStyle.open] : ["opacity-0", drawerStyle.close],
             className,
           )}

packages/react-ui/src/components/input/input.tsx

@@ -37,16 +37,16 @@ export type InputProps = Partial<InputGroupContextValue> & {
   required?: boolean;
 
   /**
-   * 是否无效
+   * 是否只读
    * @default false
    */
-  invalid?: boolean;
+  readOnly?: boolean;
 
   /**
-   * 是否只读
+   * 是否无效
    * @default false
    */
-  readOnly?: boolean;
+  invalid?: boolean;
 
   /**
    * 是否全宽度

packages/react-ui/src/components/popover/popover-content.tsx

@@ -4,6 +4,7 @@ import { usePopperAria } from "../../primitives/popper/popper-aria-context";
 import { PopperFloating } from "../../primitives/popper/popper-floating";
 import { PopperPositioner } from "../../primitives/popper/popper-positioner";
 import { usePopperTransition } from "../../primitives/popper/popper-transtion-context";
+import { hasBackgroundClass } from "../../shared/utils";
 import { tx } from "../../utils";
 import { Portal } from "../portal/portal";
 import { usePopoverRoot } from "./popover-root-context";
@@ -29,7 +30,7 @@ export const PopoverContent = (props: PrimitiveProps<"div">) => {
             className={tx(
               "border-bd-normal relative border shadow-md transition-opacity",
               status == "open" ? "opacity-100" : "opacity-0",
-              !className?.split(" ").some((cls) => cls.startsWith("bg-")) && "bg-bg-normal",
+              !hasBackgroundClass(className) && "bg-bg-normal",
               className,
             )}
             aria-labelledby={labelId}

packages/react-ui/src/components/radio/radio-group-context.ts

@@ -46,7 +46,7 @@ export type RadioGroupBaseProps = RadioBaseProps & {
   invalid?: boolean;
 
   /**
-   * 值
+   * 可控值
    */
   value?: string | number;
 };

packages/react-ui/src/primitives/popper/popper-backdrop.tsx

@@ -1,4 +1,5 @@
 import type { CSSProperties } from "react";
+import { hasBackgroundClass } from "../../shared/utils";
 import { tx } from "../../utils";
 import type { PrimitiveProps } from "../index";
 import { usePopperTransition } from "./popper-transtion-context";
@@ -19,7 +20,7 @@ export const PopperBackdrop = (props: PrimitiveProps<"div">) => {
         "fixed inset-0 z-50 overflow-auto",
         "duration-(--dv) transition-opacity",
         status == "open" ? "opacity-30" : "opacity-0",
-        !className?.split(" ").some((cls) => cls.startsWith("bg-")) && "bg-black",
+        !hasBackgroundClass(className) && "bg-black",
         className,
       )}
       {...rest}

packages/react-ui/src/shared/types.ts

@@ -1 +1,48 @@
 export type Orientation = "horizontal" | "vertical";
+
+export type SingleValueProps = {
+  /**
+   * 是否多选
+   * @default false
+   */
+  multiple?: false;
+
+  /**
+   * 受控值
+   */
+  value?: string | number | null;
+
+  /**
+   * 默认值
+   * @default null
+   */
+  defaultValue?: string | number | null;
+
+  /**
+   * onChange 回调
+   */
+  onChange?: (value: string | number | null) => void;
+};
+
+export type MultipleValueProps = {
+  /**
+   * 是否多选
+   */
+  multiple?: true;
+
+  /**
+   * 受控值
+   */
+  value?: (string | number)[];
+
+  /**
+   * 默认值
+   * default []
+   */
+  defaultValue?: (string | number)[];
+
+  /**
+   * onChange 回调
+   */
+  onChange?: (value: (string | number)[]) => void;
+};

packages/react-ui/src/shared/utils.ts

@@ -0,0 +1,7 @@
+export const hasBackgroundClass = (className?: string) => {
+  if (!className) {
+    return false;
+  }
+
+  return className.includes("bg-") && className.split(" ").some((cls) => cls.startsWith("bg-"));
+};