refactor: avoid defining a component inside another component

qlik-oss · Mar 29, 2023 · befae84 · befae84
1 parent 9ca11fe
commit befae84
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 13 deletions.
diff --git a/apis/nucleus/src/components/listbox/components/ListBoxDisclaimer.jsx b/apis/nucleus/src/components/listbox/components/ListBoxDisclaimer.jsx
@@ -3,9 +3,8 @@ import React, { useContext } from 'react';
 import { styled } from '@mui/material/styles';
 import InstanceContext from '../../../contexts/InstanceContext';
 
-export default function ListBoxDisclaimer({ width, text, dense, tooltip }) {
-  const { translator } = useContext(InstanceContext);
-  const StyledText = styled(Typography)(() => ({
+const StyledText = styled(Typography, { shouldForwardProp: (p) => !['width', 'dense'].includes(p) })(
+  ({ width, dense }) => ({
     minWidth: `${width}px`,
     textAlign: 'center',
     fontSize: `${dense ? '12px' : '14px'}`,
@@ -15,11 +14,15 @@ export default function ListBoxDisclaimer({ width, text, dense, tooltip }) {
       whiteSpace: 'nowrap',
       width,
     }),
-  }));
+  })
+);
+
+export default function ListBoxDisclaimer({ width, text, dense, tooltip }) {
+  const { translator } = useContext(InstanceContext);
 
   return (
     <Tooltip title={tooltip ? translator.get(text) : ''}>
-      <StyledText component="div" variant="body1" py="12px">
+      <StyledText width={width} dense={dense} component="div" variant="body1" py="12px">
         {translator.get(text)}
       </StyledText>
     </Tooltip>

diff --git a/apis/nucleus/src/components/listbox/components/ListBoxError.jsx b/apis/nucleus/src/components/listbox/components/ListBoxError.jsx
@@ -2,15 +2,15 @@ import { styled } from '@mui/material/styles';
 import React, { useContext } from 'react';
 import InstanceContext from '../../../contexts/InstanceContext';
 
+const StyledDiv = styled('div')(() => ({
+  display: 'flex',
+  width: '100%',
+  height: '100%',
+  alignItems: 'center',
+  justifyContent: 'center',
+}));
+
 export default function ListBoxError({ text }) {
   const { translator } = useContext(InstanceContext);
-  const StyledDiv = styled('div')(() => ({
-    display: 'flex',
-    width: '100%',
-    height: '100%',
-    alignItems: 'center',
-    justifyContent: 'center',
-  }));
-
   return <StyledDiv>{translator.get(text)}</StyledDiv>;
 }