From 5ea0fa4937e243769b42e28e689b259b921914c8 Mon Sep 17 00:00:00 2001 From: gaeaehrlich Date: Wed, 16 Feb 2022 15:15:27 +0200 Subject: [PATCH 1/9] pref(#27) - Rename useDimensions() to useResizeObserver() Move from hooks to tools --- README.md | 3 ++- src/hooks/index.js | 4 +-- src/hooks/useClickOutside/index.js | 1 - src/hooks/useClickOutside/useClickOutside.js | 26 ++----------------- .../useClickOutside/useClickOutside.test.js | 16 ++---------- src/hooks/useDimensions/readme.md | 2 -- .../index.js | 4 +-- src/hooks/useResizeObserver/readme.md | 2 ++ .../useResizeObserver.js} | 0 .../useResizeObserver.test.js} | 6 ++--- src/tools/ClickOutside/ClickOutside.jsx | 26 +++++++++++++++++++ src/tools/ClickOutside/ClickOutside.test.js | 18 +++++++++++++ src/tools/ClickOutside/index.js | 19 ++++++++++++++ src/tools/index.js | 3 ++- 14 files changed, 80 insertions(+), 50 deletions(-) delete mode 100644 src/hooks/useDimensions/readme.md rename src/hooks/{useDimensions => useResizeObserver}/index.js (87%) create mode 100644 src/hooks/useResizeObserver/readme.md rename src/hooks/{useDimensions/useDimensions.js => useResizeObserver/useResizeObserver.js} (100%) rename src/hooks/{useDimensions/useDimensions.test.js => useResizeObserver/useResizeObserver.test.js} (81%) create mode 100644 src/tools/ClickOutside/ClickOutside.jsx create mode 100644 src/tools/ClickOutside/ClickOutside.test.js create mode 100644 src/tools/ClickOutside/index.js diff --git a/README.md b/README.md index d1daa7f..fc2a774 100644 --- a/README.md +++ b/README.md @@ -88,7 +88,7 @@ import {Movable} from 'webrix'; * [useDebounce()](https://webrix.amdocs.com/docs/hooks/usedebounce) * [useThrottle()](https://webrix.amdocs.com/docs/hooks/usethrottle) * [useObject()](https://webrix.amdocs.com/docs/hooks/useobject) -* [useDimensions()](https://webrix.amdocs.com/docs/hooks/usedimensions) +* [useResizeObserver()](https://webrix.amdocs.com/docs/hooks/useResizeObserver) * [useAnimationFrame()](https://webrix.amdocs.com/docs/hooks/useanimationframe) * [useBoundingRectObserver()](https://webrix.amdocs.com/docs/hooks/useboundingrectobserver) * [useEventListener()](https://webrix.amdocs.com/docs/hooks/useeventlistener) @@ -97,3 +97,4 @@ import {Movable} from 'webrix'; * [](https://webrix.amdocs.com/docs/tools/resizeobserver) * [](https://webrix.amdocs.com/docs/tools/puppeteer) +* [](https://webrix.amdocs.com/docs/tools/clickoutside) diff --git a/src/hooks/index.js b/src/hooks/index.js index 58e6104..95c532b 100644 --- a/src/hooks/index.js +++ b/src/hooks/index.js @@ -1,10 +1,10 @@ export {default as useAnimationFrame} from './useAnimationFrame'; export {default as useBooleanState, useVisibilityState, useFocusabilityState} from './useBooleanState'; export {default as useBoundingRectObserver} from './useBoundingRectObserver'; -export {default as useClickOutside, ClickOutside, ClickOutsideOverride} from './useClickOutside'; +export {default as useClickOutside} from './useClickOutside'; export {default as useMounted, useUnmounted} from './useMounted'; export {default as useDebounce} from './useDebounce'; -export {default as useDimensions} from './useDimensions'; +export {default as useResizeObserver} from './useResizeObserver'; export {default as useEventListener} from './useEventListener'; export {default as useThrottle} from './useThrottle'; export {default as useObject} from './useObject'; diff --git a/src/hooks/useClickOutside/index.js b/src/hooks/useClickOutside/index.js index 516eaeb..f0aea3d 100644 --- a/src/hooks/useClickOutside/index.js +++ b/src/hooks/useClickOutside/index.js @@ -15,5 +15,4 @@ */ import {useClickOutside} from './useClickOutside'; -export {ClickOutside, ClickOutsideOverride} from './useClickOutside'; export default useClickOutside; \ No newline at end of file diff --git a/src/hooks/useClickOutside/useClickOutside.js b/src/hooks/useClickOutside/useClickOutside.js index 45b2d8f..cfd4b15 100644 --- a/src/hooks/useClickOutside/useClickOutside.js +++ b/src/hooks/useClickOutside/useClickOutside.js @@ -15,7 +15,6 @@ */ import React, {useRef, useCallback, useContext} from 'react'; -import {func, node} from 'prop-types'; import {_document} from 'utility/mocks'; import useEventListener from '../useEventListener'; import OverrideContext from './useClickOutside.context'; @@ -39,6 +38,8 @@ import OverrideContext from './useClickOutside.context'; * element (for example, when dragging). In such cases the click is still considered as an inside click, * since it originated inside the element. * + * For class components use ClickOutside from 'webrix/tools/ClickOutside' + * * @param {Function} callback */ export const useClickOutside = callback => { @@ -57,26 +58,3 @@ export const useClickOutside = callback => { isClickedInside.current = true; }, [isClickedInside]); }; - -// Use this for class components -export const ClickOutside = ({children, onClickOutside}) => { - const handleOnMouseDownCapture = useClickOutside(onClickOutside); - // We're updating the contained element instead of adding a wrapper since adding - // a wrapper can may affect the styling/behavior - return React.cloneElement( - React.Children.only(children), {onMouseDownCapture: handleOnMouseDownCapture} - ); -}; - -// It is sometimes necessary to modify the condition of the click-outside handler -// of one or more elements. This can be done using the ClickOutsideOverride -export const ClickOutsideOverride = ({condition, children}) => ( - - {children} - -); - -ClickOutsideOverride.propTypes = { - condition: func, - children: node, -}; diff --git a/src/hooks/useClickOutside/useClickOutside.test.js b/src/hooks/useClickOutside/useClickOutside.test.js index 395513c..2665dde 100644 --- a/src/hooks/useClickOutside/useClickOutside.test.js +++ b/src/hooks/useClickOutside/useClickOutside.test.js @@ -2,9 +2,8 @@ import React from 'react'; // https://reactjs.org/docs/hooks-faq.html#how-to-test-components-that-use-hooks import {act} from 'react-dom/test-utils'; import sinon from 'sinon'; -import {mount, shallow} from 'enzyme'; -import OverrideContext from './useClickOutside.context'; -import {useClickOutside, ClickOutside, ClickOutsideOverride} from './useClickOutside'; +import {mount} from 'enzyme'; +import {useClickOutside} from './useClickOutside'; const Elem = callback => { useClickOutside(callback); @@ -33,15 +32,4 @@ describe('useClickOutside()', () => { elem.simulate('click'); expect(callback.callCount).toEqual(0); }); - - it('', () => { - const wrapper = shallow(
); - expect(() => shallow()).toThrow(); - expect(typeof wrapper.find('div').prop('onMouseDownCapture')).toBe('function'); - }); - - it('', () => { - const wrapper = shallow(); - expect(wrapper.find(OverrideContext.Provider)).toHaveLength(1); - }); }); diff --git a/src/hooks/useDimensions/readme.md b/src/hooks/useDimensions/readme.md deleted file mode 100644 index e97cc4c..0000000 --- a/src/hooks/useDimensions/readme.md +++ /dev/null @@ -1,2 +0,0 @@ -See the full documentation of `useDimensions()` at the -[Official Webrix Documentation Site](https://webrix.amdocs.com/docs/hooks/useDimensions) \ No newline at end of file diff --git a/src/hooks/useDimensions/index.js b/src/hooks/useResizeObserver/index.js similarity index 87% rename from src/hooks/useDimensions/index.js rename to src/hooks/useResizeObserver/index.js index c64fd73..9596d5a 100644 --- a/src/hooks/useDimensions/index.js +++ b/src/hooks/useResizeObserver/index.js @@ -14,6 +14,6 @@ * limitations under the License. */ -import useDimensions from './useDimensions'; +import useResizeObserver from './useResizeObserver'; -export default useDimensions; \ No newline at end of file +export default useResizeObserver; \ No newline at end of file diff --git a/src/hooks/useResizeObserver/readme.md b/src/hooks/useResizeObserver/readme.md new file mode 100644 index 0000000..ed9847e --- /dev/null +++ b/src/hooks/useResizeObserver/readme.md @@ -0,0 +1,2 @@ +See the full documentation of `useResizeObserver` at the +[Official Webrix Documentation Site](https://webrix.amdocs.com/docs/hooks/useResizeObserver) \ No newline at end of file diff --git a/src/hooks/useDimensions/useDimensions.js b/src/hooks/useResizeObserver/useResizeObserver.js similarity index 100% rename from src/hooks/useDimensions/useDimensions.js rename to src/hooks/useResizeObserver/useResizeObserver.js diff --git a/src/hooks/useDimensions/useDimensions.test.js b/src/hooks/useResizeObserver/useResizeObserver.test.js similarity index 81% rename from src/hooks/useDimensions/useDimensions.test.js rename to src/hooks/useResizeObserver/useResizeObserver.test.js index b6c6321..8f05046 100644 --- a/src/hooks/useDimensions/useDimensions.test.js +++ b/src/hooks/useResizeObserver/useResizeObserver.test.js @@ -1,16 +1,16 @@ import React from 'react'; import {act} from 'react-dom/test-utils'; import {mount} from 'enzyme'; -import useDimensions, {__RewireAPI__ as rewireAPI} from './useDimensions'; +import useResizeObserver, {__RewireAPI__ as rewireAPI} from './useResizeObserver'; const Elem = () => { - const {width, height} = useDimensions({current: {}}); + const {width, height} = useResizeObserver({current: {}}); return (
{width},{height}
); }; -describe('useDimensions()', () => { +describe('useResizeObserver()', () => { it('Should return the previous value', async () => { let wrapper = null; let observed = 0, disconnected = 0; diff --git a/src/tools/ClickOutside/ClickOutside.jsx b/src/tools/ClickOutside/ClickOutside.jsx new file mode 100644 index 0000000..2d0f11b --- /dev/null +++ b/src/tools/ClickOutside/ClickOutside.jsx @@ -0,0 +1,26 @@ +import React from 'react'; +import {func, node} from 'prop-types'; +import OverrideContext from 'hooks/useClickOutside/useClickOutside.context'; +import {useClickOutside} from 'hooks'; + +export const ClickOutside = ({children, onClickOutside}) => { + const handleOnMouseDownCapture = useClickOutside(onClickOutside); + // We're updating the contained element instead of adding a wrapper since adding + // a wrapper can may affect the styling/behavior + return React.cloneElement( + React.Children.only(children), {onMouseDownCapture: handleOnMouseDownCapture} + ); +}; + +// It is sometimes necessary to modify the condition of the click-outside handler +// of one or more elements. This can be done using the ClickOutsideOverride +export const ClickOutsideOverride = ({condition, children}) => ( + + {children} + +); + +ClickOutsideOverride.propTypes = { + condition: func, + children: node, +}; \ No newline at end of file diff --git a/src/tools/ClickOutside/ClickOutside.test.js b/src/tools/ClickOutside/ClickOutside.test.js new file mode 100644 index 0000000..e30911e --- /dev/null +++ b/src/tools/ClickOutside/ClickOutside.test.js @@ -0,0 +1,18 @@ +import React from 'react'; +// https://reactjs.org/docs/hooks-faq.html#how-to-test-components-that-use-hooks +import { shallow} from 'enzyme'; +import OverrideContext from 'hooks/useClickOutside/useClickOutside.context'; +import {ClickOutside, ClickOutsideOverride} from './ClickOutside'; + +describe('ClickOutside', () => { + it('', () => { + const wrapper = shallow(
); + expect(() => shallow()).toThrow(); + expect(typeof wrapper.find('div').prop('onMouseDownCapture')).toBe('function'); + }); + + it('', () => { + const wrapper = shallow(); + expect(wrapper.find(OverrideContext.Provider)).toHaveLength(1); + }); +}); diff --git a/src/tools/ClickOutside/index.js b/src/tools/ClickOutside/index.js new file mode 100644 index 0000000..5bb1ed7 --- /dev/null +++ b/src/tools/ClickOutside/index.js @@ -0,0 +1,19 @@ +/** + * Copyright (c) 2020, Amdocs Corp. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import {ClickOutside} from './ClickOutside'; +export {ClickOutsideOverride} from './ClickOutside'; +export default ClickOutside; diff --git a/src/tools/index.js b/src/tools/index.js index ec9a1db..ddb4561 100644 --- a/src/tools/index.js +++ b/src/tools/index.js @@ -1,2 +1,3 @@ export {default as ResizeObserver} from './ResizeObserver'; -export {default as Puppeteer, puppet} from './Puppeteer'; \ No newline at end of file +export {default as Puppeteer, puppet} from './Puppeteer'; +export {default as ClickOutside, ClickOutsideOverride} from './ClickOutside'; \ No newline at end of file From 3ca06b0fdf71162d16a694cf55358d289d809458 Mon Sep 17 00:00:00 2001 From: gaeaehrlich Date: Mon, 21 Feb 2022 10:32:24 +0200 Subject: [PATCH 2/9] pref(#56) - Use an internal ref to eliminate the need for useMemo() --- src/components/Movable/Movable.hooks.js | 13 +++++++------ src/components/Resizable/Resizable.hooks.js | 13 +++++++------ 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/src/components/Movable/Movable.hooks.js b/src/components/Movable/Movable.hooks.js index 4b8fe0f..251fbcf 100644 --- a/src/components/Movable/Movable.hooks.js +++ b/src/components/Movable/Movable.hooks.js @@ -17,19 +17,20 @@ import {useRef, useCallback} from 'react'; export const useMove = ops => { + const _ops = useRef([...ops]); const shared = useRef({}); const onBeginMove = useCallback(e => { - ops.forEach(({onBeginMove}) => onBeginMove(e, shared.current)); - }, [ops]); + _ops.current.forEach(({onBeginMove}) => onBeginMove(e, shared.current)); + }, [_ops]); const onMove = useCallback(e => { - ops.forEach(({onMove}) => onMove(e, shared.current)); - }, [ops]); + _ops.current.forEach(({onMove}) => onMove(e, shared.current)); + }, [_ops]); const onEndMove = useCallback(e => { - ops.forEach(({onEndMove}) => onEndMove(e, shared.current)) - }, [ops]); + _ops.current.forEach(({onEndMove}) => onEndMove(e, shared.current)) + }, [_ops]); return {onBeginMove, onMove, onEndMove}; }; \ No newline at end of file diff --git a/src/components/Resizable/Resizable.hooks.js b/src/components/Resizable/Resizable.hooks.js index cc5dbb4..58b0924 100644 --- a/src/components/Resizable/Resizable.hooks.js +++ b/src/components/Resizable/Resizable.hooks.js @@ -17,19 +17,20 @@ import {useRef, useCallback} from 'react'; export const useResize = ops => { + const _ops = useRef([...ops]); const shared = useRef({}); const onBeginResize = useCallback(e => { - ops.forEach(({onBeginResize}) => onBeginResize(e, shared.current)); - }, [ops]); + _ops.current.forEach(({onBeginResize}) => onBeginResize(e, shared.current)); + }, [_ops]); const onResize = useCallback(e => { - ops.forEach(({onResize}) => onResize(e, shared.current)); - }, [ops]); + _ops.current.forEach(({onResize}) => onResize(e, shared.current)); + }, [_ops]); const onEndResize = useCallback(e => { - ops.forEach(({onEndResize}) => onEndResize(e, shared.current)); - }, [ops]); + _ops.current.forEach(({onEndResize}) => onEndResize(e, shared.current)); + }, [_ops]); return {onBeginResize, onResize, onEndResize}; }; \ No newline at end of file From 1031a5b68535ab7e581279a75777abf5bf750d5f Mon Sep 17 00:00:00 2001 From: gaeaehrlich Date: Sun, 27 Feb 2022 12:02:19 +0200 Subject: [PATCH 3/9] removed unnecessary import --- src/hooks/useClickOutside/useClickOutside.js | 2 +- src/tools/ClickOutside/ClickOutside.jsx | 16 ++++++++++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/src/hooks/useClickOutside/useClickOutside.js b/src/hooks/useClickOutside/useClickOutside.js index cfd4b15..a3ff612 100644 --- a/src/hooks/useClickOutside/useClickOutside.js +++ b/src/hooks/useClickOutside/useClickOutside.js @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, {useRef, useCallback, useContext} from 'react'; +import {useRef, useCallback, useContext} from 'react'; import {_document} from 'utility/mocks'; import useEventListener from '../useEventListener'; import OverrideContext from './useClickOutside.context'; diff --git a/src/tools/ClickOutside/ClickOutside.jsx b/src/tools/ClickOutside/ClickOutside.jsx index 2d0f11b..2a34ae1 100644 --- a/src/tools/ClickOutside/ClickOutside.jsx +++ b/src/tools/ClickOutside/ClickOutside.jsx @@ -1,3 +1,19 @@ +/** + * Copyright (c) 2020, Amdocs Corp. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + import React from 'react'; import {func, node} from 'prop-types'; import OverrideContext from 'hooks/useClickOutside/useClickOutside.context'; From 652e1e3866f48e165cfe77d89540b0c909d75c39 Mon Sep 17 00:00:00 2001 From: gaeaehrlich Date: Sun, 27 Feb 2022 18:15:31 +0200 Subject: [PATCH 4/9] pref(#6) - Remove Branding Styles --- src/components/Scrollable/Scrollable.scss | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src/components/Scrollable/Scrollable.scss b/src/components/Scrollable/Scrollable.scss index 0a77b55..0e0870e 100644 --- a/src/components/Scrollable/Scrollable.scss +++ b/src/components/Scrollable/Scrollable.scss @@ -2,17 +2,13 @@ --scrollable-track-thickness: 12px; --scrollable-thumb-thickness: Calc(var(--scrollable-track-thickness)/2); --scrollable-thumb-offset: 3px; + --scrollable-thumb-color: silver; position: relative; max-height: 100%; max-width: 100%; display: flex; - &:hover > .scrollbar-track .scrollbar-thumb .scrollbar-thumb-inner { - opacity: 1; - transition-delay: 0s; - } - .scrollbar-inner { position: relative; overflow: auto; @@ -37,10 +33,7 @@ cursor: pointer; .scrollbar-thumb-inner { - background-color: rgba(28, 34, 43, 0.6); - border-radius: 4px; - opacity: 0; - transition: opacity 0.2s ease-out 0.5s; // The transition delay is used to keep the thumb visible for a short time when the cursor leaves. (see `Scrollable.constants.js`) + background-color: var(--scrollable-thumb-color); } } } From 9a9cfaf72b34e6568e15b7981ecbe51712009d2a Mon Sep 17 00:00:00 2001 From: gaeaehrlich Date: Mon, 28 Feb 2022 11:08:37 +0200 Subject: [PATCH 5/9] fix(#25) - Support all native props --- src/components/Scrollable/Scrollable.jsx | 4 ++-- src/components/Scrollable/Scrollable.props.js | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Scrollable/Scrollable.jsx b/src/components/Scrollable/Scrollable.jsx index 5806be8..63f3e49 100644 --- a/src/components/Scrollable/Scrollable.jsx +++ b/src/components/Scrollable/Scrollable.jsx @@ -167,14 +167,14 @@ export default class Scrollable extends React.PureComponent { }; render() { - const {children, style, element} = this.props; + const {children, element, className} = this.props; const vsb = findChildByType(children, VerticalScrollbarPlaceholder); const hsb = findChildByType(children, HorizontalScrollbarPlaceholder); const content = React.Children.toArray(children).filter(child => ![VerticalScrollbarPlaceholder, HorizontalScrollbarPlaceholder].includes(child.type)); return ( -
+
{React.cloneElement(element, this.getElementProps(), content)} {vsb ? vsb.props.children : } diff --git a/src/components/Scrollable/Scrollable.props.js b/src/components/Scrollable/Scrollable.props.js index d45999d..143516d 100644 --- a/src/components/Scrollable/Scrollable.props.js +++ b/src/components/Scrollable/Scrollable.props.js @@ -15,11 +15,11 @@ */ import React from 'react'; -import {func, shape, node, bool} from 'prop-types'; +import {func, node, bool, string} from 'prop-types'; import {noop} from 'utility/memory'; export const propTypes = { - style: shape({}), + className: string, onScroll: func, onUpdate: func, scrollOnDOMChange: bool, @@ -29,7 +29,7 @@ export const propTypes = { }; export const defaultProps = { - style: null, + className: null, onScroll: noop, onUpdate: noop, scrollOnDOMChange: true, From 64afb315426e17568bdcc071bd95e27c93e4b04a Mon Sep 17 00:00:00 2001 From: gaeaehrlich Date: Mon, 28 Feb 2022 17:21:31 +0200 Subject: [PATCH 6/9] pref(#56) - Use an internal ref to eliminate the need for useMemo() --- src/components/Movable/Movable.hooks.js | 16 +++++++++------- src/components/Resizable/Resizable.hooks.js | 16 +++++++++------- .../HorizontalScrollbar/HorizontalScrollbar.jsx | 4 ++-- .../VerticalScrollbar/VerticalScrollbar.jsx | 4 ++-- 4 files changed, 22 insertions(+), 18 deletions(-) diff --git a/src/components/Movable/Movable.hooks.js b/src/components/Movable/Movable.hooks.js index 251fbcf..47f4700 100644 --- a/src/components/Movable/Movable.hooks.js +++ b/src/components/Movable/Movable.hooks.js @@ -17,20 +17,22 @@ import {useRef, useCallback} from 'react'; export const useMove = ops => { - const _ops = useRef([...ops]); + const opsRef = useRef(ops); const shared = useRef({}); + opsRef.current = ops; + const onBeginMove = useCallback(e => { - _ops.current.forEach(({onBeginMove}) => onBeginMove(e, shared.current)); - }, [_ops]); + opsRef.current.forEach(({onBeginMove}) => onBeginMove(e, shared.current)); + }, []); const onMove = useCallback(e => { - _ops.current.forEach(({onMove}) => onMove(e, shared.current)); - }, [_ops]); + opsRef.current.forEach(({onMove}) => onMove(e, shared.current)); + }, []); const onEndMove = useCallback(e => { - _ops.current.forEach(({onEndMove}) => onEndMove(e, shared.current)) - }, [_ops]); + opsRef.current.forEach(({onEndMove}) => onEndMove(e, shared.current)) + }, []); return {onBeginMove, onMove, onEndMove}; }; \ No newline at end of file diff --git a/src/components/Resizable/Resizable.hooks.js b/src/components/Resizable/Resizable.hooks.js index 58b0924..a6ad245 100644 --- a/src/components/Resizable/Resizable.hooks.js +++ b/src/components/Resizable/Resizable.hooks.js @@ -17,20 +17,22 @@ import {useRef, useCallback} from 'react'; export const useResize = ops => { - const _ops = useRef([...ops]); + const opsRef = useRef(ops); const shared = useRef({}); + opsRef.current = ops; + const onBeginResize = useCallback(e => { - _ops.current.forEach(({onBeginResize}) => onBeginResize(e, shared.current)); - }, [_ops]); + opsRef.current.forEach(({onBeginResize}) => onBeginResize(e, shared.current)); + }, []); const onResize = useCallback(e => { - _ops.current.forEach(({onResize}) => onResize(e, shared.current)); - }, [_ops]); + opsRef.current.forEach(({onResize}) => onResize(e, shared.current)); + }, []); const onEndResize = useCallback(e => { - _ops.current.forEach(({onEndResize}) => onEndResize(e, shared.current)); - }, [_ops]); + opsRef.current.forEach(({onEndResize}) => onEndResize(e, shared.current)); + }, []); return {onBeginResize, onResize, onEndResize}; }; \ No newline at end of file diff --git a/src/components/Scrollable/components/HorizontalScrollbar/HorizontalScrollbar.jsx b/src/components/Scrollable/components/HorizontalScrollbar/HorizontalScrollbar.jsx index 0cef8b4..caa4183 100644 --- a/src/components/Scrollable/components/HorizontalScrollbar/HorizontalScrollbar.jsx +++ b/src/components/Scrollable/components/HorizontalScrollbar/HorizontalScrollbar.jsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, {useContext, useMemo, useRef} from 'react'; +import React, {useContext, useRef} from 'react'; import Movable from 'components/Movable'; import Context from '../../Scrollable.context'; import {CSS_VARS} from '../../Scrollable.constants'; @@ -25,7 +25,7 @@ const HorizontalScrollbar = () => { const track = useRef(); const thumb = useRef(); const {container, scrollLeft, cssVarsOnTracks} = useContext(Context); - const props = Movable.useMove(useMemo(() => [move(container, thumb, track)], [container])); + const props = Movable.useMove([move(container, thumb, track)]); const handleOnClick = e => { e.stopPropagation(); diff --git a/src/components/Scrollable/components/VerticalScrollbar/VerticalScrollbar.jsx b/src/components/Scrollable/components/VerticalScrollbar/VerticalScrollbar.jsx index 5fb8e69..161df43 100644 --- a/src/components/Scrollable/components/VerticalScrollbar/VerticalScrollbar.jsx +++ b/src/components/Scrollable/components/VerticalScrollbar/VerticalScrollbar.jsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import React, {useContext, useMemo, useRef} from 'react'; +import React, {useContext, useRef} from 'react'; import Movable from 'components/Movable'; import Context from '../../Scrollable.context'; import {CSS_VARS} from '../../Scrollable.constants'; @@ -25,7 +25,7 @@ const VerticalScrollbar = () => { const track = useRef(); const thumb = useRef(); const {container, scrollTop, cssVarsOnTracks} = useContext(Context); - const props = Movable.useMove(useMemo(() => [move(container, thumb, track)], [container])); + const props = Movable.useMove([move(container, thumb, track)]); const handleOnClick = e => { e.stopPropagation(); From b2d34e2560d1afde7033a10048fe04bb63abccd6 Mon Sep 17 00:00:00 2001 From: gaeaehrlich Date: Wed, 2 Mar 2022 10:23:46 +0200 Subject: [PATCH 7/9] redundant commit --- src/components/Movable/Movable.test.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Movable/Movable.test.js b/src/components/Movable/Movable.test.js index f60ab6b..638b827 100644 --- a/src/components/Movable/Movable.test.js +++ b/src/components/Movable/Movable.test.js @@ -32,6 +32,7 @@ describe('', () => { expect(stopPropagation.calledOnce).toEqual(true); expect(preventDefault.calledOnce).toEqual(true); }); + it('onMove()', () => { const handleOnMove = sinon.spy(); const wrapper = mount(); @@ -78,6 +79,7 @@ describe('', () => { expect(event.dx).toEqual(-10); expect(event.dy).toEqual(-10); }); + it('onEndMove()', () => { const handleOnEndMove = sinon.spy(); const wrapper = mount(); From 9f5a12c3de970284454289c81d8cefbcb824a363 Mon Sep 17 00:00:00 2001 From: gaeaehrlich Date: Wed, 2 Mar 2022 10:45:40 +0200 Subject: [PATCH 8/9] redundant commit --- src/components/Movable/Movable.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Movable/Movable.test.js b/src/components/Movable/Movable.test.js index 638b827..0b436db 100644 --- a/src/components/Movable/Movable.test.js +++ b/src/components/Movable/Movable.test.js @@ -39,7 +39,7 @@ describe('', () => { const handlers = {}; let event; - document.addEventListener = (type, handler) => handlers[type] = handler; + document.addEventListener = (type, handler) => {handlers[type] = handler}; wrapper.simulate('mousedown', {clientX: 10, clientY: 10}); wrapper.simulate('touchstart', {changedTouches: [{clientX: 10, clientY: 10}]}); @@ -85,7 +85,7 @@ describe('', () => { const wrapper = mount(); const handlers = {}; - document.addEventListener = (type, handler) => handlers[type] = handler; + document.addEventListener = (type, handler) => {handlers[type] = handler}; document.removeEventListener = sinon.spy(); wrapper.simulate('mousedown', {clientX: 10, clientY: 10}); From bbedd6fe485afe4fbd09d2f81f88385ba393e899 Mon Sep 17 00:00:00 2001 From: Yair Even Or Date: Wed, 6 Apr 2022 23:17:03 +0300 Subject: [PATCH 9/9] manually resolved previous conflict --- src/hooks/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/hooks/index.js b/src/hooks/index.js index 95c532b..051211b 100644 --- a/src/hooks/index.js +++ b/src/hooks/index.js @@ -2,11 +2,11 @@ export {default as useAnimationFrame} from './useAnimationFrame'; export {default as useBooleanState, useVisibilityState, useFocusabilityState} from './useBooleanState'; export {default as useBoundingRectObserver} from './useBoundingRectObserver'; export {default as useClickOutside} from './useClickOutside'; -export {default as useMounted, useUnmounted} from './useMounted'; +export {default as useMounted} from './useMounted'; export {default as useDebounce} from './useDebounce'; export {default as useResizeObserver} from './useResizeObserver'; export {default as useEventListener} from './useEventListener'; export {default as useThrottle} from './useThrottle'; export {default as useObject} from './useObject'; export {default as usePrevious} from './usePrevious'; -export {default as useTimeout} from './useTimeout'; \ No newline at end of file +export {default as useTimeout} from './useTimeout';