fix(csr): 🐛 bug with mounted in checkbox

adaptui · Jan 4, 2022 · 9f2d4db · 9f2d4db
1 parent 9d736d9
commit 9f2d4db
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 13 deletions.
diff --git a/src/checkbox/Checkbox.tsx b/src/checkbox/Checkbox.tsx
@@ -19,7 +19,7 @@ export type CheckboxProps = CheckboxInitialState &
 export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
   (props, ref) => {
     const {
-      ssr,
+      csr,
       label,
       description,
       labelProps,
@@ -29,7 +29,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
       descriptionProps,
     } = useCheckboxProps(props);
 
-    if (!ssr) {
+    if (csr) {
       return null;
     }
 

diff --git a/src/checkbox/CheckboxProps.tsx b/src/checkbox/CheckboxProps.tsx
@@ -4,6 +4,7 @@ import {
   runIfFn,
   splitProps,
 } from "../utils";
+import { useHasMounted } from "..";
 
 import { USE_CHECKBOX_STATE_KEYS } from "./__keys";
 import { CheckboxOwnProps, CheckboxProps } from "./Checkbox";
@@ -43,6 +44,7 @@ export const useCheckboxProps = (
   const { icon, label, description } = state;
   const { className, style, children, ...restProps } = checkboxProps;
   const { componentProps } = getComponentProps(componentMap, children, state);
+  const mounted = useHasMounted();
 
   const _icon: CheckboxState["icon"] =
     componentProps?.iconProps?.children || icon;
@@ -88,7 +90,7 @@ export const useCheckboxProps = (
   };
 
   return {
-    ssr: isEmptyObject(componentProps),
+    csr: !isEmptyObject(componentProps) && !mounted,
     state,
     labelProps,
     inputProps,

diff --git a/src/show-more/ShowMoreButton.tsx b/src/show-more/ShowMoreButton.tsx
@@ -25,4 +25,3 @@ export const ShowMoreButton = createComponent({
   memo: true,
   useHook: useShowMoreButton,
 });
-console.log("%cShowMoreButton", "color: #ff6600", ShowMoreButton);
diff --git a/src/show-more/stories/ShowMoreHorizontal.component.tsx b/src/show-more/stories/ShowMoreHorizontal.component.tsx
@@ -1,9 +1,8 @@
 import * as React from "react";
 
-import { ShowMore, ShowMoreButton, ShowMoreProps } from "../../index";
+import { ShowMore, ShowMoreProps } from "../../index";
 
 export const ShowMoreHorizontal: React.FC<ShowMoreProps> = props => {
-  console.log("%cShowMore", "color: #d0bfff", ShowMoreButton);
   return (
     <div className="overflow-x-scroll w-96">
       <div className="flex flex-row items-center h-10 space-x-2 w-fit">

diff --git a/src/textarea/TextareaBase.tsx b/src/textarea/TextareaBase.tsx
@@ -73,7 +73,6 @@ export const useTextareaBase = createHook<
     const onChange = React.useCallback(
       (event: React.ChangeEvent<HTMLTextAreaElement>) => {
         onChangeRef.current?.(event);
-        console.log("%cevent", "color: #bfffc8", event);
         if (event.defaultPrevented) return;
 
         autoSizeOnChange?.(event);

diff --git a/src/tooltip/Tooltip.tsx b/src/tooltip/Tooltip.tsx
@@ -1,6 +1,5 @@
 import * as React from "react";
 
-import { useHasMounted } from "../hooks/useMounted";
 import { useTheme } from "../theme";
 import { cx, RenderProp, withIconA11y } from "../utils";
 
@@ -21,6 +20,7 @@ export type TooltipProps = TooltipInitialState &
 export const Tooltip = React.forwardRef<HTMLInputElement, TooltipProps>(
   (props, ref) => {
     const {
+      csr,
       state,
       content,
       prefix,
@@ -36,9 +36,7 @@ export const Tooltip = React.forwardRef<HTMLInputElement, TooltipProps>(
     const suffixStyles = cx(theme.suffix);
     const prefixStyles = cx(theme.prefix);
 
-    const mounted = useHasMounted();
-
-    if (!mounted) {
+    if (csr) {
       return null;
     }
 

diff --git a/src/tooltip/TooltipProps.tsx b/src/tooltip/TooltipProps.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { getComponentProps, runIfFn } from "../index";
+import { getComponentProps, runIfFn, useHasMounted } from "../index";
 import { splitProps, withIconA11y } from "../utils";
 
 import { USE_TOOLTIP_STATE_KEYS } from "./__keys";
@@ -41,6 +41,7 @@ export const useTooltipProps = (
     children,
     state,
   );
+  const mounted = useHasMounted();
 
   const referenceChildren: React.ReactNode = (referenceProps: any) =>
     // @ts-ignore
@@ -78,7 +79,7 @@ export const useTooltipProps = (
   };
 
   return {
-    render: false,
+    csr: !mounted,
     state,
     arrowIcon,
     content,