@arcblock/ux 2.1.18 → 2.1.21

package/src/Datatable/utils.js

@@ -12,18 +12,18 @@ function escapeDangerousCSVCharacters(data) {
 }
 
 function buildCSV(columns, data, options) {
-  const replaceDoubleQuoteInString = columnData =>
+  const replaceDoubleQuoteInString = (columnData) =>
     typeof columnData === 'string' ? columnData.replace(/"/g, '""') : columnData;
 
   // eslint-disable-next-line no-shadow
-  const buildHead = columns => {
+  const buildHead = (columns) => {
     return `${columns
       .reduce(
         (soFar, column) =>
           column.download
-            ? `${soFar}"${escapeDangerousCSVCharacters(
-                replaceDoubleQuoteInString(column.label || column.name)
-              )}"${options.downloadOptions.separator}`
+            ? `${soFar}"${escapeDangerousCSVCharacters(replaceDoubleQuoteInString(column.label || column.name))}"${
+                options.downloadOptions.separator
+              }`
             : soFar,
         ''
       )
@@ -33,14 +33,14 @@ function buildCSV(columns, data, options) {
   const CSVHead = buildHead(columns);
 
   // eslint-disable-next-line no-shadow
-  const buildBody = data => {
+  const buildBody = (data) => {
     if (!data.length) return '';
     return data
       .reduce(
         (soFar, row) =>
           `${soFar}"${row.data
             .filter((_, index) => columns[index].download)
-            .map(columnData => escapeDangerousCSVCharacters(replaceDoubleQuoteInString(columnData)))
+            .map((columnData) => escapeDangerousCSVCharacters(replaceDoubleQuoteInString(columnData)))
             .join(`"${options.downloadOptions.separator}"`)}"\r\n`,
         ''
       )
@@ -65,8 +65,7 @@ function downloadCSV(csv, filename) {
     const dataURI = `data:text/csv;charset=utf-8,${csv}`;
 
     const URL = window.URL || window.webkitURL;
-    const downloadURI =
-      typeof URL.createObjectURL === 'undefined' ? dataURI : URL.createObjectURL(blob);
+    const downloadURI = typeof URL.createObjectURL === 'undefined' ? dataURI : URL.createObjectURL(blob);
 
     const link = document.createElement('a');
     link.setAttribute('href', downloadURI);
@@ -98,15 +97,15 @@ export function handleCSVDownload(props) {
     columnOrderCopy = columns.map((item, idx) => idx);
   }
 
-  data.forEach(row => {
+  data.forEach((row) => {
     const newRow = { index: row.index, data: [] };
-    columnOrderCopy.forEach(idx => {
+    columnOrderCopy.forEach((idx) => {
       newRow.data.push(row.data[idx]);
     });
     dataToDownload.push(newRow);
   });
 
-  columnOrderCopy.forEach(idx => {
+  columnOrderCopy.forEach((idx) => {
     columnsToDownload.push(columns[idx]);
   });
 
@@ -120,7 +119,7 @@ export function handleCSVDownload(props) {
         row.index = index;
 
         return {
-          data: row.data.map(column => {
+          data: row.data.map((column) => {
             i += 1;
 
             // if we have a custom render, which will appear as a react element, we must grab the actual value from data
@@ -128,19 +127,18 @@ export function handleCSVDownload(props) {
             // TODO: Create a utility function for checking whether or not something is a react object
             let val =
               typeof column === 'object' && column !== null && !Array.isArray(column)
-                ? find(data, d => d.index === row.dataIndex).data[i]
+                ? find(data, (d) => d.index === row.dataIndex).data[i]
                 : column;
-            val =
-              typeof val === 'function' ? find(data, d => d.index === row.dataIndex).data[i] : val;
+            val = typeof val === 'function' ? find(data, (d) => d.index === row.dataIndex).data[i] : val;
             return val;
           }),
         };
       });
 
       dataToDownload = [];
-      filteredDataToDownload.forEach(row => {
+      filteredDataToDownload.forEach((row) => {
         const newRow = { index: row.index, data: [] };
-        columnOrderCopy.forEach(idx => {
+        columnOrderCopy.forEach((idx) => {
           newRow.data.push(row.data[idx]);
         });
         dataToDownload.push(newRow);
@@ -149,12 +147,10 @@ export function handleCSVDownload(props) {
 
     // now, check columns:
     if (options.downloadOptions.filterOptions.useDisplayedColumnsOnly) {
-      columnsToDownload = columnsToDownload.filter(_ => _.display === 'true');
+      columnsToDownload = columnsToDownload.filter((_) => _.display === 'true');
 
-      dataToDownload = dataToDownload.map(row => {
-        row.data = row.data.filter(
-          (_, index) => columns[columnOrderCopy[index]].display === 'true'
-        );
+      dataToDownload = dataToDownload.map((row) => {
+        row.data = row.data.filter((_, index) => columns[columnOrderCopy[index]].display === 'true');
         return row;
       });
     }

package/src/Dialog/confirm.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import Button from '../Button';
 import Dialog from './dialog';

package/src/Dialog/dialog.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import MuiDialog from '@mui/material/Dialog';
@@ -16,17 +15,7 @@ import CloseIcon from '@mui/icons-material/Close';
  *   注意: 当设置明确的 width 时, 可能需要同时设置 maxWidth=false (mui dialog 默认 maxWidth=sm, 设置的 width 可能受限)
  * - 添加默认最小尺寸 (300x300), 在需要 先展示 loading 再展示异步数据 的时候避免 loading 阶段窗口过小
  */
-const Dialog = ({
-  children,
-  title,
-  prepend,
-  toolbar,
-  actions,
-  showCloseButton,
-  actionsPosition,
-  PaperProps,
-  ...rest
-}) => {
+function Dialog({ children, title, prepend, toolbar, actions, showCloseButton, actionsPosition, PaperProps, ...rest }) {
   const theme = useTheme();
   // 不管是否是 mobile 设备, 只要屏宽 < sm, dialog 就处于 mobile 模式
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
@@ -48,20 +37,13 @@ const Dialog = ({
   );
 
   const closeButton = (
-    <IconButton
-      className="ux-dialog_closeButton"
-      onClick={e => handleOnClose(e, 'closeButton')}
-      size="large">
+    <IconButton className="ux-dialog_closeButton" onClick={(e) => handleOnClose(e, 'closeButton')} size="large">
       <CloseIcon />
     </IconButton>
   );
 
   return (
-    <StyledMuiDialog
-      fullScreen={isMobile}
-      onClose={handleOnClose}
-      PaperProps={PaperProps}
-      {...rest}>
+    <StyledMuiDialog fullScreen={isMobile} onClose={handleOnClose} PaperProps={PaperProps} {...rest}>
       {showHeader && (
         <Header className="ux-dialog_header" isMobile={isMobile}>
           <div className="ux-dialog_left">
@@ -77,12 +59,10 @@ const Dialog = ({
         </Header>
       )}
       <MuiDialogContent>{children}</MuiDialogContent>
-      {actions && (
-        <DialogActions className={`ux-dialog_actions--${actionsPosition}`}>{actions}</DialogActions>
-      )}
+      {actions && <DialogActions className={`ux-dialog_actions--${actionsPosition}`}>{actions}</DialogActions>}
     </StyledMuiDialog>
   );
-};
+}
 
 Dialog.propTypes = {
   children: PropTypes.node.isRequired,
@@ -109,7 +89,7 @@ Dialog.defaultProps = {
 
 const StyledMuiDialog = styled(MuiDialog)`
   .MuiDialog-paper {
-    ${props => (props.fullScreen ? 'border-radius: 0;' : '')};
+    ${(props) => (props.fullScreen ? 'border-radius: 0;' : '')};
   }
   .MuiDialogContent-root {
     padding: 16px 24px;
@@ -158,7 +138,7 @@ const Header = styled.div`
   }
   .ux-dialog_closeButton {
     /* 使 closeButton 与 content 左/右对齐 */
-    ${props => (props.isMobile ? 'margin-left: -12px;' : 'margin-right: -12px;')}
+    ${(props) => (props.isMobile ? 'margin-left: -12px;' : 'margin-right: -12px;')}
   }
 `;
 

package/src/Dialog/index.js

@@ -1,2 +1,3 @@
+// eslint-disable-next-line no-restricted-exports
 export { default } from './dialog';
 export { default as Confirm } from './confirm';

package/src/DriftBot/index.js

@@ -1,10 +1,10 @@
 /* eslint-disable max-len */
-import React from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 
 import { mergeProps } from '../Util';
 
-export default class DriftBot extends React.Component {
+export default class DriftBot extends Component {
   constructor(props) {
     super(mergeProps(props, DriftBot, ['attributes']));
 

package/src/Earth/index.js

@@ -1,5 +1,5 @@
 /* eslint-disable consistent-return */
-import React, { useReducer, useRef, useEffect } from 'react';
+import { useReducer, useRef, useEffect } from 'react';
 import useSpring from 'react-use/lib/useSpring';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
@@ -94,9 +94,7 @@ export default function Earth({
   const t = useSpring(state.animateDuration, 170, 26);
 
   const isValid =
-    activeMarkerId &&
-    rotateRef.current.markerId !== activeMarkerId &&
-    markers.some(x => x.id === activeMarkerId);
+    activeMarkerId && rotateRef.current.markerId !== activeMarkerId && markers.some((x) => x.id === activeMarkerId);
 
   // Setup path for globe
   const projection = d3
@@ -109,9 +107,7 @@ export default function Earth({
       geoJson
     )
     .rotate(
-      t <= 1 || state.isDragging || !activeMarkerId
-        ? state.rotation
-        : rotateRef.current.iv(t / state.animateDuration)
+      t <= 1 || state.isDragging || !activeMarkerId ? state.rotation : rotateRef.current.iv(t / state.animateDuration)
     );
 
   const pathGenerator = d3.geoPath().projection(projection).pointRadius(2);
@@ -123,7 +119,7 @@ export default function Earth({
       let { p1, p2, r1, r2, markerId } = rotateRef.current;
       // We should only start new animation if the marker has changed
       if (markerId !== activeMarkerId && !state.isDragging) {
-        const marker = markers.find(x => x.id === activeMarkerId);
+        const marker = markers.find((x) => x.id === activeMarkerId);
         p1 = p2;
         p2 = [marker.longitude, marker.latitude];
         r1 = r2;
@@ -151,11 +147,7 @@ export default function Earth({
       // Enable auto rotation
     } else if (enableRotation) {
       const handler = window.requestAnimationFrame(() => {
-        const newRotation = [
-          state.rotation[0] + 2 / rotationSpeed,
-          state.rotation[1],
-          state.rotation[2],
-        ];
+        const newRotation = [state.rotation[0] + 2 / rotationSpeed, state.rotation[1], state.rotation[2]];
         dispatch({ type: 'rotate', payload: { rotation: newRotation } });
       });
 
@@ -165,18 +157,15 @@ export default function Earth({
     }
   });
 
-  const getMousePosition = event => {
+  const getMousePosition = (event) => {
     const node = svgRef.current;
     const rect = node.getBoundingClientRect();
-    const mousePosition = [
-      event.clientX - rect.left - node.clientLeft,
-      event.clientY - rect.top - node.clientTop,
-    ];
+    const mousePosition = [event.clientX - rect.left - node.clientLeft, event.clientY - rect.top - node.clientTop];
 
     return mousePosition;
   };
 
-  const onDragStart = event => {
+  const onDragStart = (event) => {
     const mousePosition = getMousePosition(event);
 
     if (!mousePosition[0]) {
@@ -190,7 +179,7 @@ export default function Earth({
     dispatch({ type: 'dragStart', payload: { mousePosition } });
   };
 
-  const onDrag = event => {
+  const onDrag = (event) => {
     if (state.isDragging === false) {
       return;
     }
@@ -217,8 +206,7 @@ export default function Earth({
       payload: { tooltipIndex: i, mousePosition: getMousePosition(event) },
     });
 
-  const onHideTooltip = () =>
-    dispatch({ type: 'tooltip', payload: { tooltipIndex: -1, mousePosition: null } });
+  const onHideTooltip = () => dispatch({ type: 'tooltip', payload: { tooltipIndex: -1, mousePosition: null } });
 
   const renderMarkers = () =>
     markers.map((x, i) => {
@@ -233,9 +221,9 @@ export default function Earth({
         <g
           key={x.id}
           className={`marker ${isActive ? 'marker--active' : ''}`}
-          onFocus={event => onShowTooltip(event, i)}
+          onFocus={(event) => onShowTooltip(event, i)}
           onBlur={onHideTooltip}
-          onMouseOver={event => onShowTooltip(event, i)}
+          onMouseOver={(event) => onShowTooltip(event, i)}
           onMouseOut={onHideTooltip}>
           <circle
             key="marker-inner"
@@ -277,10 +265,10 @@ export default function Earth({
   };
 
   let activeCountry = null;
-  if (activeMarkerId && markers.some(x => x.id === activeMarkerId)) {
-    const activeMarker = markers.find(x => x.id === activeMarkerId);
+  if (activeMarkerId && markers.some((x) => x.id === activeMarkerId)) {
+    const activeMarker = markers.find((x) => x.id === activeMarkerId);
     activeCountry = geoJson.features.findIndex(
-      x => x.properties && x.properties.name && x.properties.name === activeMarker.country
+      (x) => x.properties && x.properties.name && x.properties.name === activeMarker.country
     );
   }
 
@@ -296,13 +284,7 @@ export default function Earth({
         onMouseUp={onDragEnd}
         ref={svgRef}>
         <rect className="frame" width={width} height={height} />
-        <circle
-          cx={width / 2}
-          cy={height / 2}
-          r={projection.scale()}
-          className="globe"
-          filter="url(#glow)"
-        />
+        <circle cx={width / 2} cy={height / 2} r={projection.scale()} className="globe" filter="url(#glow)" />
         <path className="graticule" d={pathGenerator(d3.geoGraticule().step([10, 10])())} />
         <g className="features">
           {geoJson.features.map((x, i) => (
@@ -390,9 +372,9 @@ Earth.defaultProps = {
 };
 
 const Container = styled.div`
-  background-color: ${props => (props.theme === 'light' ? '#f7f7f7' : '#222')};
-  width: ${props => props.width}px;
-  height: ${props => props.height}px;
+  background-color: ${(props) => (props.theme === 'light' ? '#f7f7f7' : '#222')};
+  width: ${(props) => props.width}px;
+  height: ${(props) => props.height}px;
   position: relative;
   animation-name: zoomIn;
   animation-duration: 1s;
@@ -411,29 +393,29 @@ const Container = styled.div`
   }
 
   .country {
-    fill: ${props => props.colors.land};
-    stroke: ${props => props.colors.border};
+    fill: ${(props) => props.colors.land};
+    stroke: ${(props) => props.colors.border};
     stroke-width: 0.5px;
     transition: fill 300ms ease;
 
     &:hover {
-      fill: ${props => props.colors.activeLand};
+      fill: ${(props) => props.colors.activeLand};
     }
   }
 
   .country--active {
-    fill: ${props => props.colors.activeLand};
+    fill: ${(props) => props.colors.activeLand};
   }
 
   .globe {
-    fill: ${props => props.colors.ocean};
+    fill: ${(props) => props.colors.ocean};
     stroke: rgba(255, 255, 255, 0.5);
     stroke-width: 0.25px;
   }
 
   .graticule {
     fill: none;
-    stroke: ${props => props.colors.graticule};
+    stroke: ${(props) => props.colors.graticule};
   }
 
   .star {
@@ -494,7 +476,7 @@ const Tooltip = styled.div`
   }
 
   .description {
-    margin-top: ${props => props.theme.spacing(1)}px;
+    margin-top: ${(props) => props.theme.spacing(1)}px;
     color: #fff;
     font-size: 12px;
   }

package/src/Empty/index.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Icon from '../Icon';

package/src/ErrorBoundary/fallback.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import useTheme from '@mui/styles/useTheme';
@@ -49,9 +48,9 @@ ErrorFallbackRetry.propTypes = {
 
 const Root = styled.div`
   padding: 16px;
-  border: 2px solid ${props => props.$theme.palette.error.main};
+  border: 2px solid ${(props) => props.$theme.palette.error.main};
   border-radius: 4px;
-  color: ${props => props.$theme.palette.error.main};
+  color: ${(props) => props.$theme.palette.error.main};
   background-color: ${red[50]};
   font-size: 14px;
   h3 {

package/src/Footer/index.js

@@ -1,5 +1,4 @@
 /* eslint-disable react/no-unused-prop-types */
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Typography from '@mui/material/Typography';
@@ -21,10 +20,7 @@ export default function Footer(props) {
           <span className="footer-copy">Copyright &copy; {copyYear} </span>
           <span className="footer-brand">{brand}</span>
         </Typography>
-        <Typography
-          component="p"
-          className="footer-item"
-          style={{ justifyContent: 'flex-end', flexShrink: 0 }}>
+        <Typography component="p" className="footer-item" style={{ justifyContent: 'flex-end', flexShrink: 0 }}>
           Powered by
           <Logo mode={dark ? 'light' : 'dark'} layout="horizontal" className="logo-container" />
         </Typography>
@@ -52,7 +48,7 @@ Footer.defaultProps = {
 const Container = styled.div`
   margin-top: 64px;
   padding: 24px 0 32px;
-  border-top: 1px solid ${props => (props.dark ? props.theme.palette.grey[900] : '#dee2e7')};
+  border-top: 1px solid ${(props) => (props.dark ? props.theme.palette.grey[900] : '#dee2e7')};
   box-sizing: border-box;
   width: 100%;
 
@@ -66,7 +62,7 @@ const Container = styled.div`
     justify-content: space-between;
 
     .footer-item {
-      color: ${props => props.theme.palette.grey[900]};
+      color: ${(props) => props.theme.palette.grey[900]};
       display: flex;
       align-items: center;
       flex-wrap: wrap;

package/src/Header/header.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Box from '@mui/material/Box';
@@ -59,9 +58,9 @@ Header.defaultProps = {
 
 const Root = styled.div`
   position: relative;
-  z-index: ${props => props.$theme.zIndex.appBar};
+  z-index: ${(props) => props.$theme.zIndex.appBar};
   font-size: 14px;
-  background: ${props => props.$theme.palette.common.white};
+  background: ${(props) => props.$theme.palette.common.white};
   .header-container {
     display: flex;
     align-items: center;
@@ -122,7 +121,7 @@ const Root = styled.div`
       padding-right: 0;
     }
   }
-  ${props => props.$theme.breakpoints.down('lg')} {
+  ${(props) => props.$theme.breakpoints.down('lg')} {
     .header-brand {
       margin-right: 12px;
       .header-brand-title {
@@ -132,7 +131,7 @@ const Root = styled.div`
       }
     }
   }
-  ${props => props.$theme.breakpoints.down('md')} {
+  ${(props) => props.$theme.breakpoints.down('md')} {
     .header-container {
       height: 56px;
     }

package/src/Header/responsive-header.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import MenuIcon from '@mui/icons-material/Menu';
@@ -20,9 +20,7 @@ function ResponsiveHeader({ menu, prepend, children, ...rest }) {
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
   const [drawerOpen, setDrawerOpen] = useState(false);
   const _children =
-    typeof children === 'function'
-      ? children({ isMobile, closeMenu: () => setDrawerOpen(false) })
-      : children;
+    typeof children === 'function' ? children({ isMobile, closeMenu: () => setDrawerOpen(false) }) : children;
   const { logo, brand, brandAddon, description } = rest;
   // 如果 children 没有值, 则使用普通的 Header 组件渲染 (此时并没有什么内容需要在 menu 中显示)
   if (!children) {
@@ -32,11 +30,7 @@ function ResponsiveHeader({ menu, prepend, children, ...rest }) {
     <Root
       prepend={
         prepend || (
-          <Button
-            color="inherit"
-            edge="start"
-            className="header-menu"
-            onClick={() => setDrawerOpen(true)}>
+          <Button color="inherit" edge="start" className="header-menu" onClick={() => setDrawerOpen(true)}>
             <MenuIcon />
           </Button>
         )
@@ -81,7 +75,7 @@ const Root = styled(Header)`
   .header-menu {
     display: none;
   }
-  ${props => props.$theme.breakpoints.down('md')} {
+  ${(props) => props.$theme.breakpoints.down('md')} {
     .header-menu {
       display: block;
     }

package/src/Icon/image.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 

package/src/Icon/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
@@ -11,7 +11,7 @@ const variants = {
 };
 
 // eslint-disable-next-line react/prop-types
-const Icon = ({ name, color, size, variant, rounded, style, className, forwardedRef, ...rest }) => {
+function Icon({ name, color, size, variant, rounded, style, className, forwardedRef, ...rest }) {
   const content = (
     <i
       ref={forwardedRef}
@@ -29,7 +29,7 @@ const Icon = ({ name, color, size, variant, rounded, style, className, forwarded
   }
 
   return content;
-};
+}
 
 Icon.propTypes = {
   name: PropTypes.string.isRequired,
@@ -51,10 +51,10 @@ Icon.defaultProps = {
 };
 
 const Span = styled.span`
-  width: ${props => props.size * 2}px;
-  height: ${props => props.size * 2}px;
+  width: ${(props) => props.size * 2}px;
+  height: ${(props) => props.size * 2}px;
   border-radius: 50%;
-  border: 1px solid ${props => props.color};
+  border: 1px solid ${(props) => props.color};
   display: flex;
   justify-content: center;
   align-items: center;
@@ -63,8 +63,8 @@ const Span = styled.span`
   .fas,
   .fal,
   .far {
-    line-height: ${props => props.size}px;
+    line-height: ${(props) => props.size}px;
   }
 `;
 
-export default React.forwardRef((props, ref) => <Icon {...props} forwardedRef={ref} />);
+export default forwardRef((props, ref) => <Icon {...props} forwardedRef={ref} />);

package/src/Img/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import { SvgIcon } from '@mui/material';
@@ -63,6 +63,7 @@ function Img({
   onSuccess,
   ...rest
 }) {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const [ref, inView] = lazy ? useInView({ threshold: 0, triggerOnce: true }) : [null, true];
 
   const [imgState, setImgState] = useState('init');
@@ -81,10 +82,7 @@ function Img({
     }
   }, [placeholder, fallback, src, imgState]);
 
-  const actualRatio = useMemo(() => {
-    if (width && height) return (100 * height) / width;
-    return ratio * 100;
-  });
+  const actualRatio = width && height ? (100 * height) / width : ratio * 100;
 
   const mergedStyle = useMemo(
     () => ({
@@ -94,6 +92,7 @@ function Img({
       backgroundRepeat: repeat,
       paddingTop: `${actualRatio}%`,
     }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [actualSrc, position, size, imgState]
   );
 
@@ -111,7 +110,7 @@ function Img({
       setImgState('loaded');
       onSuccess();
     };
-    img.onerror = err => {
+    img.onerror = (err) => {
       setImgState('error');
       onError(err);
     };
@@ -119,6 +118,7 @@ function Img({
 
   useEffect(() => {
     if (inView) loadImg();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [inView]);
 
   return (