diff --git a/package.json b/package.json index e115219d..604631a0 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,6 @@ "refractor": "^3.0.0", "tslib": "^1.12.0", "use-debounce": "^3.4.3", - "use-resize-observer": "^6.1.0", "yup": "^0.28.3" }, "devDependencies": { diff --git a/src/CodeViewer/__tests__/Viewer.spec.tsx b/src/CodeViewer/__tests__/Viewer.spec.tsx index 9d363c77..e03b302d 100644 --- a/src/CodeViewer/__tests__/Viewer.spec.tsx +++ b/src/CodeViewer/__tests__/Viewer.spec.tsx @@ -19,8 +19,6 @@ jest.mock('../components/BlockCodeViewer/ObservableSet', () => ({ }, })); -jest.mock('use-resize-observer'); - describe('Code Viewer component', () => { afterEach(() => { (parseCode as jest.Mock).mockReset(); diff --git a/src/CodeViewer/components/BlockCodeViewer/BlockCodeViewer.tsx b/src/CodeViewer/components/BlockCodeViewer/BlockCodeViewer.tsx index e38fbc98..b07e891b 100644 --- a/src/CodeViewer/components/BlockCodeViewer/BlockCodeViewer.tsx +++ b/src/CodeViewer/components/BlockCodeViewer/BlockCodeViewer.tsx @@ -1,10 +1,7 @@ import cn from 'classnames'; -import { debounce } from 'lodash'; import * as React from 'react'; -import useResizeObserver from 'use-resize-observer'; import { Classes } from '../../../classes'; -import { SINGLE_LINE_SIZE } from './consts'; import { useSlicedBlocks } from './hooks/useSlicedBlocks'; import { ObservableSet } from './ObservableSet'; import { SingleCodeBlock } from './SingleCodeBlock'; @@ -15,29 +12,17 @@ export interface IBlockCodeViewerProps extends React.HTMLAttributes = ({ className, language, value, showLineNumbers, ...rest }) => { const nodeRef = React.useRef(null); - const [maxLines, setMaxLines] = React.useState(null); + const maxLines = 100; const [observer, setObserver] = React.useState(); const viewportSet = React.useRef(new ObservableSet()); - const slicedBlocks = useSlicedBlocks(value, maxLines === null ? null : Math.max(0, maxLines - 1)); - const lineNumberCharacterCount = String( - slicedBlocks !== null && maxLines !== null ? slicedBlocks.length * maxLines : 0, - ).length; - - React.useLayoutEffect(() => { - if (nodeRef.current !== null) { - setMaxLines(calculateMaxLines(window.innerHeight)); // we have to use window here, as element may not ave any height at this time - } - }, [nodeRef]); + const slicedBlocks = useSlicedBlocks(value ?? '', maxLines - 1); + const lineNumberCharacterCount = String(slicedBlocks.length * maxLines).length; React.useEffect(() => { const { current: viewport } = viewportSet; - if (nodeRef.current === null || maxLines === null) { + if (nodeRef.current === null) { return; } @@ -71,21 +56,7 @@ const BlockCodeViewer: React.FC = ({ className, language, setObserver(void 0); observer.disconnect(); }; - }, [nodeRef, maxLines]); - - useResizeObserver({ - onResize: debounce( - ({ height }) => { - const newMaxLines = calculateMaxLines(height); - if (newMaxLines !== maxLines) { - setMaxLines(newMaxLines); - } - }, - 250, - { leading: true }, - ), - ref: nodeRef, - }); + }, [nodeRef]); return (
 {
-  return React.useMemo(() => {
-    if (maxLines === null) {
-      return null;
-    }
-
+export const useSlicedBlocks = (value: string, maxLines: number) => {
+  return React.useMemo(() => {
     const blocks: SlicedBlock[] = [createSlicedBlock()];
 
     for (let i = 0, n = 0; i < value.length; i++) {
diff --git a/yarn.lock b/yarn.lock
index 8f0dc692..e5ec2801 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15863,13 +15863,6 @@ use-debounce@^3.4.3:
   resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-3.4.3.tgz#5df9322322b3f1b1c263d46413f9facf6d8b56ab"
   integrity sha512-nxy+opOxDccWfhMl36J5BSCTpvcj89iaQk2OZWLAtBJQj7ISCtx1gh+rFbdjGfMl6vtCZf6gke/kYvrkVfHMoA==
 
-use-resize-observer@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/use-resize-observer/-/use-resize-observer-6.1.0.tgz#d4d267a940dbf9c326da6042f8a4bb8c89d29729"
-  integrity sha512-SiPcWHiIQ1CnHmb6PxbYtygqiZXR0U9dNkkbpX9VYnlstUwF8+QqpUTrzh13pjPwcjMVGR+QIC+nvF5ujfFNng==
-  dependencies:
-    resize-observer-polyfill "^1.5.1"
-
 use-sidecar@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.0.2.tgz#e72f582a75842f7de4ef8becd6235a4720ad8af6"