feat(react/checkbox,react/radio): use useEffectOnceWhen hook to dis…

…play warning message in non-production environments
trendmicro-frontend · Oct 8, 2024 · 09fe838 · 09fe838
1 parent 2421c20
commit 09fe838
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 23 deletions.
diff --git a/packages/react/src/checkbox/Checkbox.js b/packages/react/src/checkbox/Checkbox.js
@@ -1,4 +1,4 @@
-import { useMergeRefs } from '@tonic-ui/react-hooks';
+import { useEffectOnceWhen, useMergeRefs } from '@tonic-ui/react-hooks';
 import { callAll, dataAttr, isNullish } from '@tonic-ui/utils';
 import { ensureArray } from 'ensure-type';
 import React, { forwardRef, useRef } from 'react';
@@ -41,7 +41,7 @@ const Checkbox = forwardRef((inProps, ref) => {
  const inputRef = useRef();
  const combinedInputRef = useMergeRefs(inputRefProp, inputRef);
  const checkboxGroupContext = useCheckboxGroup();
- const isNameConflictRef = useRef(false);
+ let warningMessage = '';
 
  if (checkboxGroupContext) {
  const {
@@ -56,18 +56,11 @@ const Checkbox = forwardRef((inProps, ref) => {
  checked = ensureArray(checkboxGroupValue).includes(value);
  }
  disabled = (disabled ?? checkboxGroupDisabled);
-
- const isNameConflict = (!isNullish(name) && !isNullish(checkboxGroupName) && (name !== checkboxGroupName));
- if (process.env.NODE_ENV !== 'production' && isNameConflict && !isNameConflictRef.current) {
- // Log the warning message only once
- console.error(
- `Warning: The \`Checkbox\` has a \`name\` prop ("${name}") that conflicts with the \`CheckboxGroup\`'s \`name\` prop ("${checkboxGroupName}")`
- );
- isNameConflictRef.current = true;
+ const isNameConflict = !isNullish(name) && !isNullish(checkboxGroupName) && (name !== checkboxGroupName);
+ if (isNameConflict) {
+ warningMessage = `Warning: The \`Checkbox\` has a \`name\` prop ("${name}") that conflicts with the \`CheckboxGroup\`'s \`name\` prop ("${checkboxGroupName}")`;
  }
-
  name = name ?? checkboxGroupName;
-
  onChange = callAll(
  onChange,
  checkboxGroupOnChange,
@@ -81,6 +74,13 @@ const Checkbox = forwardRef((inProps, ref) => {
  variantColor = variantColor ?? defaultVariantColor;
  }
 
+ useEffectOnceWhen(() => {
+ if (process.env.NODE_ENV !== 'production' && !!warningMessage) {
+ // Log the warning message only once
+ console.error(warningMessage);
+ }
+ }, [!!warningMessage]);
+
  const styleProps = useCheckboxStyle({ disabled });
 
  return (

diff --git a/packages/react/src/radio/Radio.js b/packages/react/src/radio/Radio.js
@@ -1,4 +1,4 @@
-import { useMergeRefs } from '@tonic-ui/react-hooks';
+import { useEffectOnceWhen, useMergeRefs } from '@tonic-ui/react-hooks';
 import { callAll, isNullish } from '@tonic-ui/utils';
 import React, { forwardRef, useRef } from 'react';
 import { Box } from '../box';
@@ -39,7 +39,7 @@ const Radio = forwardRef((inProps, ref) => {
  const inputRef = useRef();
  const combinedInputRef = useMergeRefs(inputRefProp, inputRef);
  const radioGroupContext = useRadioGroup();
- const isNameConflictRef = useRef(false);
+ let warningMessage = '';
 
  if (radioGroupContext) {
  const {
@@ -55,17 +55,11 @@ const Radio = forwardRef((inProps, ref) => {
  checked = (radioGroupValue === value);
  }
  disabled = (disabled ?? radioGroupDisabled);
-
- const isNameConflict = (!isNullish(name) && !isNullish(radioGroupName) && (name !== radioGroupName));
- if (process.env.NODE_ENV !== 'production' && isNameConflict && !isNameConflictRef.current) {
- // Log the warning message only once
- console.error(
- `Warning: The \`Radio\` has a \`name\` prop ("${name}") that conflicts with the \`RadioGroup\`'s \`name\` prop ("${radioGroupName}")`
- );
- isNameConflictRef.current = true;
+ const isNameConflict = !isNullish(name) && !isNullish(radioGroupName) && (name !== radioGroupName);
+ if (isNameConflict) {
+ warningMessage = `Warning: The \`Radio\` has a \`name\` prop ("${name}") that conflicts with the \`RadioGroup\`'s \`name\` prop ("${radioGroupName}")`;
  }
  name = (name ?? radioGroupName);
-
  onChange = callAll(
  onChange,
  radioGroupOnChange,
@@ -79,6 +73,13 @@ const Radio = forwardRef((inProps, ref) => {
  variantColor = variantColor ?? defaultVariantColor;
  }
 
+ useEffectOnceWhen(() => {
+ if (process.env.NODE_ENV !== 'production' && !!warningMessage) {
+ // Log the warning message only once
+ console.error(warningMessage);
+ }
+ }, [!!warningMessage]);
+
  const styleProps = useRadioStyle({ disabled });
 
  return (