💄Unified CFFormLabel

carefree0910 · May 23, 2023 · d2a8f8d · d2a8f8d
1 parent 1c64b5e
commit d2a8f8d
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 26 deletions.
diff --git a/cfdraw/.web/src/components/CFSelect.tsx b/cfdraw/.web/src/components/CFSelect.tsx
@@ -1,12 +1,11 @@
 import { observer } from "mobx-react-lite";
-import { Box, BoxProps, Flex, FlexProps, TextProps } from "@chakra-ui/react";
+import { Box, BoxProps, Flex, FlexProps, FormLabelProps } from "@chakra-ui/react";
 import { GroupBase, OptionBase, Select } from "chakra-react-select";
 
 import { isUndefined } from "@carefree0910/core";
 
 import { themeStore, useScrollBarSx } from "@/stores/theme";
-import { CFLabel } from "./CFText";
-import CFTooltip from "./CFTooltip";
+import CFTooltip, { CFFormLabel } from "./CFTooltip";
 
 interface SelectItem<T> extends OptionBase {
   value: T;
@@ -80,7 +79,7 @@ function CFSelect<T, isMulti extends boolean>({
 interface ICFScrollableSelect<T, isMulti extends boolean> extends ICFSelect<T, isMulti> {
   label?: string;
   flexProps?: FlexProps;
-  labelProps?: TextProps;
+  labelProps?: FormLabelProps;
 }
 export const CFSrollableSelect = observer(
   <T, isMulti extends boolean>({
@@ -109,9 +108,7 @@ export const CFSrollableSelect = observer(
     if (isUndefined(label)) return <Select tooltip={tooltip} />;
     return (
       <Flex w="100%" h="100%" align="center" {...flexProps}>
-        <CFTooltip label={tooltip}>
-          <CFLabel label={label} {...labelProps} />
-        </CFTooltip>
+        <CFFormLabel label={label} tooltip={{ label: tooltip }} {...labelProps} />
         <Box w="8px" />
         <Select />
       </Flex>

diff --git a/cfdraw/.web/src/components/CFSlider.tsx b/cfdraw/.web/src/components/CFSlider.tsx
@@ -13,9 +13,8 @@ import React, { useCallback, useEffect, useState } from "react";
 import { BoardStore, useGlobalTransform, useIsReady } from "@carefree0910/business";
 
 import { themeStore } from "@/stores/theme";
-import { CFLabel } from "./CFText";
+import { CFFormLabel } from "./CFTooltip";
 import CFInput from "./CFInput";
-import CFTooltip from "./CFTooltip";
 
 export interface ICFSlider extends FlexProps {
   className?: string;
@@ -135,9 +134,7 @@ const CFSlider: React.FC<ICFSlider> = ({
 
   return (
     <Flex className={className} align="center" color={textColor} {...props}>
-      <CFTooltip label={tooltip}>
-        <CFLabel label={label} />
-      </CFTooltip>
+      <CFFormLabel label={label ?? ""} tooltip={{ label: tooltip }} />
       <Slider
         focusThumbOnChange={!iptFocused}
         flex={1}

diff --git a/cfdraw/.web/src/components/CFText.tsx b/cfdraw/.web/src/components/CFText.tsx
@@ -2,25 +2,12 @@ import { forwardRef } from "react";
 import { observer } from "mobx-react-lite";
 import { Text, TextProps } from "@chakra-ui/react";
 
-import { themeStore, useLabelProps } from "@/stores/theme";
+import { themeStore } from "@/stores/theme";
 
 const CFText = forwardRef(function (props: TextProps, ref) {
   const { textColor } = themeStore.styles;
 
   return <Text ref={ref} color={textColor} {...props} />;
 });
-export const CFLabel = observer(
-  forwardRef(function ({ label, ...props }: TextProps & { label?: string }, ref) {
-    return (
-      <>
-        {label && (
-          <CFText {...useLabelProps()} {...props} ref={ref}>
-            {label}
-          </CFText>
-        )}
-      </>
-    );
-  }),
-);
 
 export default observer(CFText);