feat(react/color-mode): apply default props

trendmicro-frontend · Sep 15, 2024 · d72be6c · d72be6c
1 parent d0ee6bf
commit d72be6c
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 26 deletions.
diff --git a/packages/react/src/color-mode/ColorModeProvider.js b/packages/react/src/color-mode/ColorModeProvider.js
@@ -1,6 +1,7 @@
 import { canUseDOM, noop } from '@tonic-ui/utils';
 import memoize from 'micro-memoize';
 import React, { useCallback, useEffect, useReducer } from 'react';
+import { useDefaultProps } from '../default-props';
 import { ColorModeContext } from './context';
 import { getColorScheme, colorSchemeQuery } from './utils';
 
@@ -18,13 +19,14 @@ const colorModeReducer = (state, nextValue) => {
   return ensureColorMode(nextValue);
 };
 
-const ColorModeProvider = ({
-  children,
-  defaultValue: defaultValueProp,
-  value: valueProp,
-  onChange: onChangeProp,
-  useSystemColorMode,
-}) => {
+const ColorModeProvider = (inProps) => {
+  const {
+    children,
+    defaultValue: defaultValueProp,
+    value: valueProp,
+    onChange: onChangeProp,
+    useSystemColorMode,
+  } = useDefaultProps({ props: inProps, name: 'ColorModeProvider' });
   const defaultColorMode = (defaultValueProp === 'dark') ? 'dark' : 'light';
   const [colorMode, setColorMode] = useReducer(colorModeReducer, ensureColorMode(valueProp ?? defaultColorMode));
 

diff --git a/packages/react/src/color-mode/DarkMode.js b/packages/react/src/color-mode/DarkMode.js
@@ -1,16 +1,21 @@
 import React, { forwardRef } from 'react';
 import { Box } from '../box';
+import { useDefaultProps } from '../default-props';
 import ColorModeProvider from './ColorModeProvider';
 
-const DarkMode = forwardRef((props, ref) => (
-  <ColorModeProvider value="dark">
-    <Box
-      ref={ref}
-      colorScheme="dark"
-      {...props}
-    />
-  </ColorModeProvider>
-));
+const DarkMode = forwardRef((inProps, ref) => {
+  const props = useDefaultProps({ props: inProps, name: 'DarkMode' });
+
+  return (
+    <ColorModeProvider value="dark">
+      <Box
+        ref={ref}
+        colorScheme="dark"
+        {...props}
+      />
+    </ColorModeProvider>
+  );
+});
 
 DarkMode.displayName = 'DarkMode';
 

diff --git a/packages/react/src/color-mode/InvertedMode.js b/packages/react/src/color-mode/InvertedMode.js
@@ -1,9 +1,11 @@
 import React, { forwardRef } from 'react';
 import { Box } from '../box';
+import { useDefaultProps } from '../default-props';
 import ColorModeProvider from './ColorModeProvider';
 import useColorMode from './useColorMode';
 
-const InvertedMode = forwardRef((props, ref) => {
+const InvertedMode = forwardRef((inProps, ref) => {
+  const props = useDefaultProps({ props: inProps, name: 'InvertedMode' });
   const [colorMode] = useColorMode();
   const invertedColorMode = colorMode === 'light' ? 'dark' : 'light';
 

diff --git a/packages/react/src/color-mode/LightMode.js b/packages/react/src/color-mode/LightMode.js
@@ -1,16 +1,21 @@
 import React, { forwardRef } from 'react';
 import { Box } from '../box';
+import { useDefaultProps } from '../default-props';
 import ColorModeProvider from './ColorModeProvider';
 
-const LightMode = forwardRef((props, ref) => (
-  <ColorModeProvider value="light">
-    <Box
-      ref={ref}
-      colorScheme="light"
-      {...props}
-    />
-  </ColorModeProvider>
-));
+const LightMode = forwardRef((inProps, ref) => {
+  const props = useDefaultProps({ props: inProps, name: 'LightMode' });
+
+  return (
+    <ColorModeProvider value="light">
+      <Box
+        ref={ref}
+        colorScheme="light"
+        {...props}
+      />
+    </ColorModeProvider>
+  );
+});
 
 LightMode.displayName = 'LightMode';