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 a93f9f7..051211b 100644 --- a/src/hooks/index.js +++ b/src/hooks/index.js @@ -1,12 +1,12 @@ 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} 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'; export {default as usePrevious} from './usePrevious'; -export {default as useTimeout} from './useTimeout'; \ No newline at end of file +export {default as useTimeout} from './useTimeout'; 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..a3ff612 100644 --- a/src/hooks/useClickOutside/useClickOutside.js +++ b/src/hooks/useClickOutside/useClickOutside.js @@ -14,8 +14,7 @@ * limitations under the License. */ -import React, {useRef, useCallback, useContext} from 'react'; -import {func, node} from 'prop-types'; +import {useRef, useCallback, useContext} from 'react'; 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..2a34ae1 --- /dev/null +++ b/src/tools/ClickOutside/ClickOutside.jsx @@ -0,0 +1,42 @@ +/** + * 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'; +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