Merge branch '2.x' into scrollable_change_class_names

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='scrollable' style={style} onTransitionEnd={this.handleOnTransitionEnd}>
+                <div {...this.props} className={classNames('scrollable', 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,6 +2,7 @@
   --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%;
@@ -37,10 +38,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 useMounted, useUnmounted} from './useMounted';
+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/useMounted/index.js

@@ -15,5 +15,4 @@
  */
 
 import {useMounted} from './useMounted';
-export {useUnmounted} from './useMounted';
 export default useMounted;

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

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 (
-                <div className={`${unmounted ? 'un' : ''}mounted`}/>
-            );
-        };
-        let wrapper = null;
-        act(() => {wrapper = mount(<Elem/>)});
-        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);
-    });
-});

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;