Merge branch '2.x' of https://github.com/open-amdocs/webrix into 2.x

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/components/Movable/Movable.hooks.js

@@ -17,19 +17,22 @@
 import {useRef, useCallback} from 'react';
 
 export const useMove = ops => {
+    const opsRef = useRef(ops);
     const shared = useRef({});
 
+    opsRef.current = ops;
+
     const onBeginMove = useCallback(e => {
-        ops.forEach(({onBeginMove}) => onBeginMove(e, shared.current));
-    }, [ops]);
+        opsRef.current.forEach(({onBeginMove}) => onBeginMove(e, shared.current));
+    }, []);
 
     const onMove = useCallback(e => {
-        ops.forEach(({onMove}) => onMove(e, shared.current));
-    }, [ops]);
+        opsRef.current.forEach(({onMove}) => onMove(e, shared.current));
+    }, []);
 
     const onEndMove = useCallback(e => {
-        ops.forEach(({onEndMove}) => onEndMove(e, shared.current))
-    }, [ops]);
+        opsRef.current.forEach(({onEndMove}) => onEndMove(e, shared.current))
+    }, []);
 
     return {onBeginMove, onMove, onEndMove};
 };

src/components/Movable/Movable.test.js

@@ -32,13 +32,14 @@ describe('<Movable/>', () => {
             expect(stopPropagation.calledOnce).toEqual(true);
             expect(preventDefault.calledOnce).toEqual(true);
         });
+
         it('onMove()', () => {
             const handleOnMove = sinon.spy();
             const wrapper = mount(<Movable onMove={handleOnMove}/>);
             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}]});
 
@@ -78,12 +79,13 @@ describe('<Movable/>', () => {
             expect(event.dx).toEqual(-10);
             expect(event.dy).toEqual(-10);
         });
+
         it('onEndMove()', () => {
             const handleOnEndMove = sinon.spy();
             const wrapper = mount(<Movable onEndMove={handleOnEndMove}/>);
             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});

src/components/Resizable/Resizable.hooks.js

@@ -17,19 +17,22 @@
 import {useRef, useCallback} from 'react';
 
 export const useResize = ops => {
+    const opsRef = useRef(ops);
     const shared = useRef({});
 
+    opsRef.current = ops;
+
     const onBeginResize = useCallback(e => {
-        ops.forEach(({onBeginResize}) => onBeginResize(e, shared.current));
-    }, [ops]);
+        opsRef.current.forEach(({onBeginResize}) => onBeginResize(e, shared.current));
+    }, []);
 
     const onResize = useCallback(e => {
-        ops.forEach(({onResize}) => onResize(e, shared.current));
-    }, [ops]);
+        opsRef.current.forEach(({onResize}) => onResize(e, shared.current));
+    }, []);
 
     const onEndResize = useCallback(e => {
-        ops.forEach(({onEndResize}) => onEndResize(e, shared.current));
-    }, [ops]);
+        opsRef.current.forEach(({onEndResize}) => onEndResize(e, shared.current));
+    }, []);
 
     return {onBeginResize, onResize, onEndResize};
 };

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 (
             <ResizeObserver onResize={this.updateScrollbars}>
-                <div className='scrollbar' style={style} onTransitionEnd={this.handleOnTransitionEnd}>
+                <div {...this.props} className={classNames('scrollbar', className)} onTransitionEnd={this.handleOnTransitionEnd}>
                     {React.cloneElement(element, this.getElementProps(), content)}
                     <Context.Provider value={this.state}>
                         {vsb ? vsb.props.children : <VerticalScrollbar/>}

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,

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);
       }
     }
   }

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();

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();

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';
+export {default as useTimeout} from './useTimeout';

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,
+};