feat(react/tabs): apply default props

trendmicro-frontend · Sep 16, 2024 · 28253d5 · 28253d5
1 parent dd56492
commit 28253d5
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 21 deletions.
diff --git a/packages/react/src/tabs/Tab.js b/packages/react/src/tabs/Tab.js
@@ -3,22 +3,21 @@ import { ariaAttr, callEventHandlers, isNullOrUndefined, warnDeprecatedProps } f
 import { ensureFunction } from 'ensure-type';
 import React, { forwardRef, useState } from 'react';
 import { ButtonBase } from '../button';
+import { useDefaultProps } from '../default-props';
 import config from '../shared/config';
 import { useTabStyle } from './styles';
 import useTabs from './useTabs';
 
 const isIndexEqual = (index1, index2) => !isNullOrUndefined(index1) && !isNullOrUndefined(index2) && (index1 === index2);
 
-const Tab = forwardRef((
-  {
+const Tab = forwardRef((inProps, ref) => {
+  const {
     children,
     disabled: disabledProp,
     index: indexProp,
     onClick,
     ...rest
-  },
-  ref,
-) => {
+  } = useDefaultProps({ props: inProps, name: 'Tab' });
   const [index, setIndex] = useState(indexProp);
   const context = useTabs();
   const registerTab = ensureFunction(context?.registerTab);

diff --git a/packages/react/src/tabs/TabList.js b/packages/react/src/tabs/TabList.js
@@ -1,15 +1,14 @@
 import React, { forwardRef } from 'react';
 import { Box } from '../box';
+import { useDefaultProps } from '../default-props';
 import { useTabListStyle } from './styles';
 import useTabs from './useTabs';
 
-const TabList = forwardRef((
-  {
+const TabList = forwardRef((inProps, ref) => {
+  const {
     'aria-label': ariaLabel,
     ...rest
-  },
-  ref
-) => {
+  } = useDefaultProps({ props: inProps, name: 'TabList' });
   const context = useTabs();
   const orientation = context?.orientation;
   const styleProps = useTabListStyle({ orientation });

diff --git a/packages/react/src/tabs/TabPanel.js b/packages/react/src/tabs/TabPanel.js
@@ -3,20 +3,19 @@ import { ariaAttr, isNullOrUndefined, warnDeprecatedProps } from '@tonic-ui/util
 import { ensureFunction } from 'ensure-type';
 import React, { forwardRef, useState } from 'react';
 import { Box } from '../box';
+import { useDefaultProps } from '../default-props';
 import config from '../shared/config';
 import useTabs from './useTabs';
 import { useTabPanelStyle } from './styles';
 
 const isIndexEqual = (index1, index2) => !isNullOrUndefined(index1) && !isNullOrUndefined(index2) && (index1 === index2);
 
-const TabPanel = forwardRef((
-  {
+const TabPanel = forwardRef((inProps, ref) => {
+  const {
     children,
     index: indexProp,
     ...rest
-  },
-  ref,
-) => {
+  } = useDefaultProps({ props: inProps, name: 'TabPanel' });
   const [index, setIndex] = useState(indexProp);
   const context = useTabs();
   const registerTabPanel = ensureFunction(context?.registerTabPanel);

diff --git a/packages/react/src/tabs/TabPanels.js b/packages/react/src/tabs/TabPanels.js
@@ -1,7 +1,10 @@
 import React, { forwardRef } from 'react';
 import { Box } from '../box';
+import { useDefaultProps } from '../default-props';
+
+const TabPanels = forwardRef((inProps, ref) => {
+  const props = useDefaultProps({ props: inProps, name: 'TabPanels' });
 
-const TabPanels = forwardRef((props, ref) => {
   return (
     <Box
       ref={ref}

diff --git a/packages/react/src/tabs/Tabs.js b/packages/react/src/tabs/Tabs.js
@@ -3,6 +3,7 @@ import { isNullOrUndefined, runIfFn } from '@tonic-ui/utils';
 import memoize from 'micro-memoize';
 import React, { forwardRef, useEffect, useReducer } from 'react';
 import { Box } from '../box';
+import { useDefaultProps } from '../default-props';
 import { defaultOrientation, defaultVariant } from './constants';
 import { TabsContext } from './context';
 import { useTabsStyle } from './styles';
@@ -14,8 +15,8 @@ const stateReducer = (prevState, nextState) => ({
   ...(typeof nextState === 'function' ? nextState(prevState) : nextState),
 });
 
-const Tabs = forwardRef((
-  {
+const Tabs = forwardRef((inProps, ref) => {
+  const {
     children,
     defaultIndex = 0,
     disabled,
@@ -24,9 +25,7 @@ const Tabs = forwardRef((
     orientation = defaultOrientation,
     variant = defaultVariant,
     ...rest
-  },
-  ref,
-) => {
+  } = useDefaultProps({ props: inProps, name: 'Tabs' });
   const tabMap = useConst(() => new Map());
   const tabPanelMap = useConst(() => new Map());
   const [state, setState] = useReducer(stateReducer, {