1. add react display name

https://stackoverflow.com/questions/41581130/what-is-react-component-displayname-used-for 2. suppress false eslint error suggestion (no unknown prop)
WebWizrd8 · Oct 8, 2022 · 4995ce0 · 4995ce0
1 parent f2e37a3
commit 4995ce0
Show file tree

Hide file tree

Showing 7 changed files with 119 additions and 109 deletions.
diff --git a/packages/ui/src/layout/MainLayout/Sidebar/MenuList/NavItem/index.js b/packages/ui/src/layout/MainLayout/Sidebar/MenuList/NavItem/index.js
@@ -41,7 +41,9 @@ const NavItem = ({ item, level, navType, onClick, onUploadFile }) => {
     }
 
     let listItemProps = {
-        component: forwardRef((props, ref) => <Link ref={ref} {...props} to={`${config.basename}${item.url}`} target={itemTarget} />)
+        component: forwardRef(function ListItemPropsComponent(props, ref) {
+            return <Link ref={ref} {...props} to={`${config.basename}${item.url}`} target={itemTarget} />
+        })
     }
     if (item?.external) {
         listItemProps = { component: 'a', href: item.url, target: itemTarget }

diff --git a/packages/ui/src/ui-component/Loadable.js b/packages/ui/src/ui-component/Loadable.js
@@ -5,11 +5,13 @@ import Loader from './Loader'
 
 // ==============================|| LOADABLE - LAZY LOADING ||============================== //
 
-const Loadable = (Component) => (props) =>
-    (
-        <Suspense fallback={<Loader />}>
-            <Component {...props} />
-        </Suspense>
-    )
+const Loadable = (Component) =>
+    function WithLoader(props) {
+        return (
+            <Suspense fallback={<Loader />}>
+                <Component {...props} />
+            </Suspense>
+        )
+    }
 
 export default Loadable
diff --git a/packages/ui/src/ui-component/cards/MainCard.js b/packages/ui/src/ui-component/cards/MainCard.js
@@ -12,59 +12,55 @@ const headerSX = {
 
 // ==============================|| CUSTOM MAIN CARD ||============================== //
 
-const MainCard = forwardRef(
-    (
-        {
-            border = true,
-            boxShadow,
-            children,
-            content = true,
-            contentClass = '',
-            contentSX = {},
-            darkTitle,
-            secondary,
-            shadow,
-            sx = {},
-            title,
-            ...others
-        },
-        ref
-    ) => {
-        const theme = useTheme()
+const MainCard = forwardRef(function MainCard(
+    {
+        border = true,
+        boxShadow,
+        children,
+        content = true,
+        contentClass = '',
+        contentSX = {},
+        darkTitle,
+        secondary,
+        shadow,
+        sx = {},
+        title,
+        ...others
+    },
+    ref
+) {
+    const theme = useTheme()
 
-        return (
-            <Card
-                ref={ref}
-                {...others}
-                sx={{
-                    border: border ? '1px solid' : 'none',
-                    borderColor: theme.palette.primary[200] + 75,
-                    ':hover': {
-                        boxShadow: boxShadow ? shadow || '0 2px 14px 0 rgb(32 40 45 / 8%)' : 'inherit'
-                    },
-                    ...sx
-                }}
-            >
-                {/* card header and action */}
-                {!darkTitle && title && <CardHeader sx={headerSX} title={title} action={secondary} />}
-                {darkTitle && title && (
-                    <CardHeader sx={headerSX} title={<Typography variant='h3'>{title}</Typography>} action={secondary} />
-                )}
+    return (
+        <Card
+            ref={ref}
+            {...others}
+            sx={{
+                border: border ? '1px solid' : 'none',
+                borderColor: theme.palette.primary[200] + 75,
+                ':hover': {
+                    boxShadow: boxShadow ? shadow || '0 2px 14px 0 rgb(32 40 45 / 8%)' : 'inherit'
+                },
+                ...sx
+            }}
+        >
+            {/* card header and action */}
+            {!darkTitle && title && <CardHeader sx={headerSX} title={title} action={secondary} />}
+            {darkTitle && title && <CardHeader sx={headerSX} title={<Typography variant='h3'>{title}</Typography>} action={secondary} />}
 
-                {/* content & header divider */}
-                {title && <Divider />}
+            {/* content & header divider */}
+            {title && <Divider />}
 
-                {/* card content */}
-                {content && (
-                    <CardContent sx={contentSX} className={contentClass}>
-                        {children}
-                    </CardContent>
-                )}
-                {!content && children}
-            </Card>
-        )
-    }
-)
+            {/* card content */}
+            {content && (
+                <CardContent sx={contentSX} className={contentClass}>
+                    {children}
+                </CardContent>
+            )}
+            {!content && children}
+        </Card>
+    )
+})
 
 MainCard.propTypes = {
     border: PropTypes.bool,

diff --git a/packages/ui/src/ui-component/extended/AnimateButton.js b/packages/ui/src/ui-component/extended/AnimateButton.js
@@ -5,7 +5,7 @@ import { motion, useCycle } from 'framer-motion'
 
 // ==============================|| ANIMATION BUTTON ||============================== //
 
-const AnimateButton = forwardRef(({ children, type, direction, offset, scale }, ref) => {
+const AnimateButton = forwardRef(function AnimateButton({ children, type, direction, offset, scale }, ref) {
     let offset1
     let offset2
     switch (direction) {

diff --git a/packages/ui/src/ui-component/extended/Transitions.js b/packages/ui/src/ui-component/extended/Transitions.js
@@ -6,7 +6,7 @@ import { Collapse, Fade, Box, Grow, Slide, Zoom } from '@mui/material'
 
 // ==============================|| TRANSITIONS ||============================== //
 
-const Transitions = forwardRef(({ children, position, type, direction, ...others }, ref) => {
+const Transitions = forwardRef(function Transitions({ children, position, type, direction, ...others }, ref) {
     let positionSX = {
         transformOrigin: '0 0 0'
     }

diff --git a/packages/ui/src/views/inputs/ArrayInputParameters.js b/packages/ui/src/views/inputs/ArrayInputParameters.js
@@ -55,31 +55,33 @@ const StyledPopper = styled(Popper)({
     }
 })
 
-const DateCustomInput = forwardRef(({ value, onClick }, ref) => (
-    <button
-        style={{
-            backgroundColor: '#fafafa',
-            paddingTop: 8,
-            paddingBottom: 8,
-            paddingRight: 12,
-            paddingLeft: 12,
-            borderRadius: 12,
-            width: '100%',
-            height: 50,
-            border: `1px solid #BDBDBD`,
-            cursor: 'pointer',
-            fontWeight: 'bold',
-            textAlign: 'start',
-            color: '#212121',
-            opacity: 0.9
-        }}
-        type='button'
-        onClick={onClick}
-        ref={ref}
-    >
-        {value}
-    </button>
-))
+const DateCustomInput = forwardRef(function DateCustomInput({ value, onClick }, ref) {
+    return (
+        <button
+            style={{
+                backgroundColor: '#fafafa',
+                paddingTop: 8,
+                paddingBottom: 8,
+                paddingRight: 12,
+                paddingLeft: 12,
+                borderRadius: 12,
+                width: '100%',
+                height: 50,
+                border: `1px solid #BDBDBD`,
+                cursor: 'pointer',
+                fontWeight: 'bold',
+                textAlign: 'start',
+                color: '#212121',
+                opacity: 0.9
+            }}
+            type='button'
+            onClick={onClick}
+            ref={ref}
+        >
+            {value}
+        </button>
+    )
+})
 
 DateCustomInput.propTypes = {
     value: PropTypes.string,
@@ -289,7 +291,10 @@ const ArrayInputParameters = ({
                                             {input.type === 'folder' && (
                                                 <input
                                                     type='file'
+                                                    // https://github.com/jsx-eslint/eslint-plugin-react/issues/3454
+                                                    // eslint-disable-next-line react/no-unknown-property
                                                     directory=''
+                                                    // eslint-disable-next-line react/no-unknown-property
                                                     webkitdirectory=''
                                                     hidden
                                                     onChange={(e) => handleFolderUpload(e, values, inputName, index)}

diff --git a/packages/ui/src/views/inputs/InputParameters.js b/packages/ui/src/views/inputs/InputParameters.js
@@ -50,31 +50,33 @@ const StyledPopper = styled(Popper)({
     }
 })
 
-const DateCustomInput = forwardRef(({ value, onClick }, ref) => (
-    <button
-        style={{
-            backgroundColor: '#fafafa',
-            paddingTop: 8,
-            paddingBottom: 8,
-            paddingRight: 12,
-            paddingLeft: 12,
-            borderRadius: 12,
-            width: '100%',
-            height: 50,
-            border: `1px solid #BDBDBD`,
-            cursor: 'pointer',
-            fontWeight: 'bold',
-            textAlign: 'start',
-            color: '#212121',
-            opacity: 0.9
-        }}
-        type='button'
-        onClick={onClick}
-        ref={ref}
-    >
-        {value}
-    </button>
-))
+const DateCustomInput = forwardRef(function DateCustomInput({ value, onClick }, ref) {
+    return (
+        <button
+            style={{
+                backgroundColor: '#fafafa',
+                paddingTop: 8,
+                paddingBottom: 8,
+                paddingRight: 12,
+                paddingLeft: 12,
+                borderRadius: 12,
+                width: '100%',
+                height: 50,
+                border: `1px solid #BDBDBD`,
+                cursor: 'pointer',
+                fontWeight: 'bold',
+                textAlign: 'start',
+                color: '#212121',
+                opacity: 0.9
+            }}
+            type='button'
+            onClick={onClick}
+            ref={ref}
+        >
+            {value}
+        </button>
+    )
+})
 
 DateCustomInput.propTypes = {
     value: PropTypes.string,
@@ -274,7 +276,10 @@ const InputParameters = ({
                                                 {input.type === 'folder' && (
                                                     <input
                                                         type='file'
+                                                        // https://github.com/jsx-eslint/eslint-plugin-react/issues/3454
+                                                        // eslint-disable-next-line react/no-unknown-property
                                                         directory=''
+                                                        // eslint-disable-next-line react/no-unknown-property
                                                         webkitdirectory=''
                                                         hidden
                                                         onChange={(e) => handleFolderUpload(e, setFieldValue, values, inputName)}