From 6eb366743daf0f62666fc15f8dadbd7076f8bd63 Mon Sep 17 00:00:00 2001 From: gaeaehrlich Date: Mon, 7 Feb 2022 15:09:50 +0200 Subject: [PATCH 01/13] fix(#77): Removed useUnmounted hook and cleanup of uneMounted --- src/hooks/useMounted/useMounted.js | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/hooks/useMounted/useMounted.js b/src/hooks/useMounted/useMounted.js index e662fc4..7092099 100644 --- a/src/hooks/useMounted/useMounted.js +++ b/src/hooks/useMounted/useMounted.js @@ -20,13 +20,6 @@ export const useMounted = () => { const mounted = useRef(false); useEffect(() => { mounted.current = true; - return () => mounted.current = false; }, []); return mounted.current; -}; - -export const useUnmounted = () => { - const unmounted = useRef(false); - useEffect(() => () => {unmounted.current = true}, []); - return unmounted.current; }; \ No newline at end of file From 79d62cc25bcfdb9da7ad06fd71a48ea61e6a9523 Mon Sep 17 00:00:00 2001 From: gaeaehrlich Date: Mon, 7 Feb 2022 15:30:55 +0200 Subject: [PATCH 02/13] fix(#77): Removed useUnmounted test --- src/hooks/useMounted/useMounted.test.js | 20 +------------------- 1 file changed, 1 insertion(+), 19 deletions(-) diff --git a/src/hooks/useMounted/useMounted.test.js b/src/hooks/useMounted/useMounted.test.js index 80819b1..c172f02 100644 --- a/src/hooks/useMounted/useMounted.test.js +++ b/src/hooks/useMounted/useMounted.test.js @@ -1,7 +1,7 @@ import React from 'react'; import {act} from 'react-dom/test-utils'; import {mount} from 'enzyme'; -import {useMounted, useUnmounted} from './useMounted'; +import {useMounted} from './useMounted'; describe('useMounted()', () => { it('Should return the previous value', () => { @@ -20,21 +20,3 @@ describe('useMounted()', () => { expect(wrapper.find('.unmounted').length).toEqual(0); }); }); - -describe('useUnmounted()', () => { - it('Should return the previous value', () => { - const Elem = () => { - const unmounted = useUnmounted(); - return ( -
- ); - }; - let wrapper = null; - act(() => {wrapper = mount()}); - expect(wrapper.find('.unmounted').length).toEqual(0); - expect(wrapper.find('.mounted').length).toEqual(1); - wrapper.setProps({foo: 'bar'}); // Force an update... - expect(wrapper.find('.mounted').length).toEqual(1); - expect(wrapper.find('.unmounted').length).toEqual(0); - }); -}); \ No newline at end of file From 6be12c0f354af6d49cf5c973ab132e2b0b5ee665 Mon Sep 17 00:00:00 2001 From: gaeaehrlich Date: Mon, 7 Feb 2022 15:34:07 +0200 Subject: [PATCH 03/13] fix(#77): Removed useUnmounted exports --- src/hooks/index.js | 2 +- src/hooks/useMounted/index.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/hooks/index.js b/src/hooks/index.js index 58e6104..a93f9f7 100644 --- a/src/hooks/index.js +++ b/src/hooks/index.js @@ -2,7 +2,7 @@ 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 useMounted, useUnmounted} from './useMounted'; +export {default as useMounted} from './useMounted'; export {default as useDebounce} from './useDebounce'; export {default as useDimensions} from './useDimensions'; export {default as useEventListener} from './useEventListener'; diff --git a/src/hooks/useMounted/index.js b/src/hooks/useMounted/index.js index 7f7b31e..dc4a5c8 100644 --- a/src/hooks/useMounted/index.js +++ b/src/hooks/useMounted/index.js @@ -15,5 +15,4 @@ */ import {useMounted} from './useMounted'; -export {useUnmounted} from './useMounted'; export default useMounted; \ No newline at end of file From 729d5ed68fd7d10ee3a1e219ffb6f9e3633c965c Mon Sep 17 00:00:00 2001 From: gaeaehrlich Date: Sun, 13 Feb 2022 15:42:08 +0200 Subject: [PATCH 04/13] pref(#77) --- src/utility/object/object.test.js | 28 +++++++++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/src/utility/object/object.test.js b/src/utility/object/object.test.js index 54fbe78..bc8d362 100644 --- a/src/utility/object/object.test.js +++ b/src/utility/object/object.test.js @@ -1,4 +1,4 @@ -import {get, set, isEqual, omit, clone} from './object'; +import {get, set, isEqual, omit, clone, EqualityIterators} from './object'; describe('Object', () => { @@ -86,6 +86,32 @@ describe('Object', () => { expect(isEqual(parent1, parent2)).toEqual(false); }); + it('isEqual() with shallow comparison', () => { + expect(isEqual(1, 1, EqualityIterators.SHALLOW)).toEqual(true); + expect(isEqual(true, false, EqualityIterators.SHALLOW)).toEqual(false); + expect(isEqual('hello', 'hello', EqualityIterators.SHALLOW)).toEqual(true); + expect(isEqual([1, 2, 3], [1, 2, 3], EqualityIterators.SHALLOW)).toEqual(true); + expect(isEqual([1, 2, 3], [3, 2, 1], EqualityIterators.SHALLOW)).toEqual(false); + expect(isEqual([{id: 1}], [{id: 2}], EqualityIterators.SHALLOW)).toEqual(false); + expect(isEqual({foo: 'bar'}, {foo: 'bar'}, EqualityIterators.SHALLOW)).toEqual(true); + expect(isEqual({foo: 'bar'}, {bar: 'foo'}, EqualityIterators.SHALLOW)).toEqual(false); + expect(isEqual({foo: [1, 2, {a: 1}]}, {foo: [1, 2, {a: 1}]}, EqualityIterators.SHALLOW)).toEqual(false); + expect(isEqual({foo: [1, 2, {a: 1}]}, {foo: [1, 2, {a: 2}]}, EqualityIterators.SHALLOW)).toEqual(false); + + /* Check Circular Traversal */ + const sub1 = {foo: [1, 2, {a: 1}]}; + const sub2 = {foo: [1, 2, {a: 1}]}; + const parent1 = {foo: [1, 2, {a: 1}], sub1, sub2}; + const parent2 = {foo: [1, 2, {a: 1}], sub1, sub2}; + parent1.aaa = parent2; + parent1.bbb = parent1; + parent2.aaa = parent1; + parent2.bbb = parent2; + expect(isEqual(parent1, parent2, EqualityIterators.SHALLOW)).toEqual(false); + parent2.ccc = 6; + expect(isEqual(parent1, parent2, EqualityIterators.SHALLOW)).toEqual(false); + }); + it('clone()', () => { const source = {foo: 1, bar: 'hello', baz: {baq: 23, test: [1, 2, 3]}}; const target = clone(source); From 5ea0fa4937e243769b42e28e689b259b921914c8 Mon Sep 17 00:00:00 2001 From: gaeaehrlich Date: Wed, 16 Feb 2022 15:15:27 +0200 Subject: [PATCH 05/13] 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 06/13] 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 07/13] 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 08/13] 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 09/13] 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 10/13] 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 11/13] 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 12/13] 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 13/13] 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';