pref(#27) - Rename useDimensions() to useResizeObserver(), Move <ClickOutside/> from hooks to tools

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';
 
 * [<ResizeObserver\/>](https://webrix.amdocs.com/docs/tools/resizeobserver)
 * [<Puppeteer\/>](https://webrix.amdocs.com/docs/tools/puppeteer)
+* [<ClickOutside\/>](https://webrix.amdocs.com/docs/tools/clickoutside)

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';

src/hooks/useClickOutside/index.js

@@ -15,5 +15,4 @@
  */
 
 import {useClickOutside} from './useClickOutside';
-export {ClickOutside, ClickOutsideOverride} from './useClickOutside';
 export default useClickOutside;

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}) => (
-    <OverrideContext.Provider value={condition}>
-        {children}
-    </OverrideContext.Provider>
-);
-
-ClickOutsideOverride.propTypes = {
-    condition: func,
-    children: node,
-};

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('<ClickOutside/>', () => {
-        const wrapper = shallow(<ClickOutside><div/></ClickOutside>);
-        expect(() => shallow(<ClickOutside/>)).toThrow();
-        expect(typeof wrapper.find('div').prop('onMouseDownCapture')).toBe('function');
-    });
-
-    it('<ClickOutsideOverride/>', () => {
-        const wrapper = shallow(<ClickOutsideOverride/>);
-        expect(wrapper.find(OverrideContext.Provider)).toHaveLength(1);
-    });
 });

src/hooks/useDimensions/index.js → src/hooks/useResizeObserver/index.js

@@ -14,6 +14,6 @@
  * limitations under the License.
  */
 
-import useDimensions from './useDimensions';
+import useResizeObserver from './useResizeObserver';
 
-export default useDimensions;
+export default useResizeObserver;

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)

src/hooks/useDimensions/useDimensions.test.js → 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 (
         <div>{width},{height}</div>
     );
 };
 
-describe('useDimensions()', () => {
+describe('useResizeObserver()', () => {
     it('Should return the previous value', async () => {
         let wrapper = null;
         let observed = 0, disconnected = 0;

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}) => (
+    <OverrideContext.Provider value={condition}>
+        {children}
+    </OverrideContext.Provider>
+);
+
+ClickOutsideOverride.propTypes = {
+    condition: func,
+    children: node,
+};

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('<ClickOutside/>', () => {
+        const wrapper = shallow(<ClickOutside><div/></ClickOutside>);
+        expect(() => shallow(<ClickOutside/>)).toThrow();
+        expect(typeof wrapper.find('div').prop('onMouseDownCapture')).toBe('function');
+    });
+
+    it('<ClickOutsideOverride/>', () => {
+        const wrapper = shallow(<ClickOutsideOverride/>);
+        expect(wrapper.find(OverrideContext.Provider)).toHaveLength(1);
+    });
+});

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;

src/tools/index.js

@@ -1,2 +1,3 @@
 export {default as ResizeObserver} from './ResizeObserver';
-export {default as Puppeteer, puppet} from './Puppeteer';
+export {default as Puppeteer, puppet} from './Puppeteer';
+export {default as ClickOutside, ClickOutsideOverride} from './ClickOutside';