Merge branch 'master' into add-support-multi-language-markdown-output

nexxtway · Jul 27, 2020 · 4aa6086 · 4aa6086
2 parents 0a254b8 + dbf3e72
commit 4aa6086
Show file tree

Hide file tree

Showing 12 changed files with 133 additions and 148 deletions.
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
         "prepare:canary": "node scripts/prepare-canary.js"
     },
     "dependencies": {
+        "@rainbow-modules/hooks": "^0.1.2",
         "autosize": "^4.0.2",
         "chart.js": "2.7.3",
         "clipboard-copy": "^2.0.0",

diff --git a/src/components/InternalOverlay/index.js b/src/components/InternalOverlay/index.js
@@ -95,9 +95,10 @@ const InternalOverlay = props => {
         if (isVisible && contentMeta) {
             onOpened();
             disableBodyScroll(undefined, { reserveScrollBarGap: true });
-        } else {
-            enableBodyScroll();
         }
+        return () => {
+            enableBodyScroll();
+        };
     }, [isVisible, contentMeta, onOpened]);
     if (isVisible) {
         if (contentMeta) {

diff --git a/src/components/InternalOverlay/readme.md b/src/components/InternalOverlay/readme.md
@@ -1,8 +1,8 @@
 ##### Using InternalOverlay with default position resolver:
 
 ```js
-import { ButtonIcon } from 'react-rainbow-components';
 import { useRef, useState } from 'react';
+import { ButtonIcon } from 'react-rainbow-components';
 import styled from 'styled-components';
 import RenderIf from '../RenderIf';
 import { useOutsideClick, useWindowResize } from '../../libs/hooks';
@@ -36,7 +36,7 @@ const Text = styled.h1`
     margin-top: 4px;
 `;
 
-const Images = styled(ParisIcon)`
+const Image = styled(ParisIcon)`
     width: 60%;
     height: 60%;
 `;
@@ -45,49 +45,40 @@ const StyledPlusIcon = styled(PlusIcon)`
     pointer-events: none;
 `;
 
-const Component = (props) => {
+const Component = props => {
     const { id, buttonId } = props;
     const triggerRef = useRef(null);
     const dropdownRef = useRef();
-    const iconRef = useRef();
     const [isOpen, setIsOpen] = useState(false);
-    const handleOutsideClick = event => {
-        if (event.target !== triggerRef.current.buttonRef.current) {
-            stopListeningOutsideClick();
-            setIsOpen(false);
-        }        
-    }
-    const handleClick = (event) => {
-        setIsOpen(!isOpen);
-        if (!isOpen) {
-            startListeningOutsideClick();
-        }        
-    };
-    const startListening = () => {
-        startListeningOutsideClick();
-    }
-    const [startListeningOutsideClick, stopListeningOutsideClick] = useOutsideClick(dropdownRef, handleOutsideClick);
+
+    useOutsideClick(
+        dropdownRef,
+        event => {
+            if (event.target !== triggerRef.current.buttonRef.current) {
+                setIsOpen(false);
+            }
+        },
+        isOpen,
+    );
     useWindowResize(() => setIsOpen(false), isOpen);
+
     return (
         <>
             <ButtonIcon
                 id={buttonId}
                 variant="neutral"
                 icon={<StyledPlusIcon />}
                 ref={triggerRef}
-                onClick={handleClick}
+                onClick={() => setIsOpen(!isOpen)}
             />
             <InternalOverlay
                 isVisible={isOpen}
-                render={() => {
-                    return (
-                        <Dropdown id={id} ref={dropdownRef}>
-                            <Images />
-                            <Text>
-                                Paris
-                            </Text>
-                        </Dropdown>);
-                }}
+                render={() => (
+                    <Dropdown id={id} ref={dropdownRef}>
+                        <Image />
+                        <Text>Paris</Text>
+                    </Dropdown>
+                )}
                 triggerElementRef={() => triggerRef.current.buttonRef}
             />
 
@@ -104,15 +95,14 @@ const Component = (props) => {
         <Component />
         <Component />
     </div>
-
 </Container>
 ```
 
 ##### Using InternalOverlay with custom position resolver:
 
 ```js
-import { Button, ButtonIcon } from 'react-rainbow-components';
 import { useRef, useState } from 'react';
+import { Button, ButtonIcon } from 'react-rainbow-components';
 import styled from 'styled-components';
 import RenderIf from '../RenderIf';
 import { useOutsideClick, useWindowResize } from '../../libs/hooks';
@@ -235,19 +225,16 @@ const Component = () => {
     const triggerRef = useRef(null);
     const dropdownRef = useRef();
     const [isOpen, setIsOpen] = useState(false);
-    const handleOutsideClick = event => {
-        stopListeningOutsideClick();
-        if (event.target !== triggerRef.current) {
-            setIsOpen(false);
-        }
-    }
-    const handleClick = () => {
-        setIsOpen(!isOpen);
-        if (!isOpen) {
-            startListeningOutsideClick();
-        }        
-    };
-    const [startListeningOutsideClick, stopListeningOutsideClick] = useOutsideClick(dropdownRef, handleOutsideClick);
+
+    useOutsideClick(
+        dropdownRef,
+        event => {
+            if (event.target !== triggerRef.current) {
+                setIsOpen(false);
+            }
+        },
+        isOpen,
+    );
     useWindowResize(() => setIsOpen(false), isOpen);
 
     return (
@@ -256,37 +243,40 @@ const Component = () => {
                 <Day>May 5</Day>
                 <Event
                     ref={triggerRef}
-                    onClick={handleClick}
-                    type="button">
+                    onClick={() => setIsOpen(!isOpen)}
+                    type="button"
+                >
                     React Rainbow Event
                 </Event>
                 <InternalOverlay
                     isVisible={isOpen}
-                    render={() => {
-                        return (
-                            <Dropdown ref={dropdownRef}>
-                                <Header>
-                                    <ButtonIcon icon={<TrashBorderIcon />} />
-                                    <ButtonIcon icon={<PencilBorderIcon />} className="rainbow-m-left_small" />
-                                    <ButtonIcon icon={<CloseIcon />} className="rainbow-m-left_small" />
-                                </Header>
-                                <div  className="rainbow-flex rainbow-m-around_medium">
-                                    <Icon />
-                                    <div>
-                                        <Title>
-                                            React Rainbow Event
-                                        </Title>
-                                        <Description>
-                                            Wednesday, May 5 ⋅ 11:00 – 11:30am
-                                        </Description>
-                                    </div>
+                    render={() => (
+                        <Dropdown ref={el => {dropdownRef.current = el}}>
+                            <Header>
+                                <ButtonIcon icon={<TrashBorderIcon />} />
+                                <ButtonIcon
+                                    icon={<PencilBorderIcon />}
+                                    className="rainbow-m-left_small"
+                                />
+                                <ButtonIcon
+                                    icon={<CloseIcon />}
+                                    className="rainbow-m-left_small"
+                                    onClick={() => setIsOpen(false)}
+                                />
+                            </Header>
+                            <div className="rainbow-flex rainbow-m-around_medium">
+                                <Icon />
+                                <div>
+                                    <Title>React Rainbow Event</Title>
+                                    <Description>Wednesday, May 5 ⋅ 11:00 – 11:30am</Description>
                                 </div>
-                                <Body>
-                                    React Rainbow is a collection of components that will reliably help you build your application in a snap.
-                                </Body>
-                            </Dropdown>);
-                    }}
-                    triggerElementRef={() => triggerRef}
+                            </div>
+                            <Body>
+                                React Rainbow is a collection of components that will reliably help you build your application in a snap.
+                            </Body>
+                        </Dropdown>
+                    )}
+                    triggerElementRef={triggerRef}
                     positionResolver={positionResolver}
                 />
             </Cell>

diff --git a/src/components/MultiSelect/index.js b/src/components/MultiSelect/index.js
@@ -1,9 +1,9 @@
 import React, { useState, useRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
+import { useOutsideClick } from '@rainbow-modules/hooks';
 import Label from '../Input/label';
 import {
     useUniqueIdentifier,
-    useOutsideClick,
     useErrorMessageId,
     useReduxForm,
     useLabelId,
@@ -57,6 +57,7 @@ const MultiSelect = React.forwardRef((props, ref) => {
     const dropdownRef = useRef();
     const comboboxRef = useRef();
     const inputRef = useRef();
+    const dropdownContainerRef = useRef();
     useImperativeHandle(ref, () => ({
         focus: () => {
             triggerRef.current.focus();
@@ -79,8 +80,6 @@ const MultiSelect = React.forwardRef((props, ref) => {
 
     const closeAndFocusInput = () => {
         setIsOpen(false);
-        // eslint-disable-next-line no-use-before-define
-        stopListeningOutsideClick();
         setTimeout(() => triggerRef.current.focus(), 0);
     };
 
@@ -99,10 +98,6 @@ const MultiSelect = React.forwardRef((props, ref) => {
     const toggleDropdown = () => {
         if (disabled || readOnly) return;
         setIsOpen(!isOpen);
-        if (!isOpen) {
-            // eslint-disable-next-line no-use-before-define
-            startListeningOutsideClick();
-        }
     };
 
     const handleKeyDown = event => {
@@ -147,20 +142,19 @@ const MultiSelect = React.forwardRef((props, ref) => {
         }
     };
 
-    const handleOutsideClick = event => {
-        if (
-            event.target !== triggerRef.current.buttonRef.current &&
-            !triggerRef.current.buttonRef.current.contains(event.target)
-        ) {
-            // eslint-disable-next-line no-use-before-define
-            stopListeningOutsideClick();
-            setIsOpen(false);
-        }
-    };
-    const [startListeningOutsideClick, stopListeningOutsideClick] = useOutsideClick(
-        dropdownRef,
-        handleOutsideClick,
+    useOutsideClick(
+        dropdownContainerRef,
+        event => {
+            if (
+                event.target !== triggerRef.current.buttonRef.current &&
+                !triggerRef.current.buttonRef.current.contains(event.target)
+            ) {
+                setIsOpen(false);
+            }
+        },
+        isOpen,
     );
+
     useWindowResize(() => setIsOpen(false), isOpen);
 
     const selectedCount = Array.isArray(value) ? value.length : 1;
@@ -239,15 +233,17 @@ const MultiSelect = React.forwardRef((props, ref) => {
                     positionResolver={positionResolver}
                     onOpened={() => dropdownRef.current.focus()}
                     render={() => (
-                        <InternalDropdown
-                            id={dropdownId}
-                            value={value}
-                            onChange={handleChange}
-                            ref={dropdownRef}
-                            multiple
-                        >
-                            {children}
-                        </InternalDropdown>
+                        <div ref={dropdownContainerRef}>
+                            <InternalDropdown
+                                id={dropdownId}
+                                value={value}
+                                onChange={handleChange}
+                                ref={dropdownRef}
+                                multiple
+                            >
+                                {children}
+                            </InternalDropdown>
+                        </div>
                     )}
                     triggerElementRef={() => triggerRef.current.buttonRef}
                 />

diff --git a/src/components/PhoneInput/__tests__/phoneinput.spec.js b/src/components/PhoneInput/__tests__/phoneinput.spec.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import PhoneInput from '../';
+
+describe('<PhoneInput />', () => {
+    it('should accept only numbers.', () => {
+        const onChangeMockFn = jest.fn();
+        const wrapper = mount(<PhoneInput label="Phone Number" onChange={onChangeMockFn} />);
+
+        wrapper
+            .find('input[type="tel"]')
+            .first()
+            .simulate('change', { target: { value: 'Your phone number is 0987256983' } });
+        wrapper.update();
+
+        expect(onChangeMockFn).toHaveBeenCalledWith(
+            expect.objectContaining({
+                phone: '0987256983',
+            }),
+        );
+    });
+});
diff --git a/src/components/PhoneInput/countriesDropdown/hooks/useKeyboardNavigation.js b/src/components/PhoneInput/countriesDropdown/hooks/useKeyboardNavigation.js
@@ -84,7 +84,9 @@ export default function useKeyboardNavigation(
 
     useEffect(() => {
         handleActiveChange(0);
-        scrollableRef.current.scrollTo(0, 0);
+        if (scrollableRef.current && scrollableRef.current.scrollTo) {
+            scrollableRef.current.scrollTo(0, 0);
+        }
         activeIndex.current = 0;
     }, [country, handleActiveChange, itemsRef, length, scrollableRef]);
 

diff --git a/src/components/PhoneInput/hooks/useFocusIndex.js b/src/components/PhoneInput/hooks/useFocusIndex.js
@@ -1,23 +1,14 @@
 import { useState, useEffect } from 'react';
-import { useOutsideClick } from '../../../libs/hooks';
 
 export default function useFocusIndex(containerRef, triggerRef, searchRef, inputRef) {
     const [focusIndex, setFocusIndex] = useState(-1);
 
-    const [startListener, stopListener] = useOutsideClick(containerRef, () => {
-        setFocusIndex(-1);
-    });
-
     useEffect(() => {
         if (focusIndex > -1) {
             const refsMap = [triggerRef, searchRef, inputRef];
             refsMap[focusIndex].current.focus();
-            startListener();
         }
-        return () => {
-            stopListener();
-        };
-    }, [focusIndex, inputRef, searchRef, startListener, stopListener, triggerRef]);
+    }, [focusIndex, inputRef, searchRef, triggerRef]);
 
     return [focusIndex, setFocusIndex];
 }