fix: modal without history dependency

Author: minheq

package.json

@@ -38,7 +38,6 @@
     "@expo/vector-icons": "9.0.0",
     "exenv": "1.2.2",
     "focus-trap": "4.0.2",
-    "history": "4.7.2",
     "react": "16.7.0",
     "react-art": "16.7.0",
     "react-dom": "16.7.0",
@@ -61,7 +60,6 @@
     "@semantic-release/release-notes-generator": "7.1.4",
     "@types/exenv": "1.2.0",
     "@types/expo__vector-icons": "6.2.3",
-    "@types/history": "4.7.2",
     "@types/jest": "23.3.12",
     "@types/react": "16.7.13",
     "@types/react-dom": "16.0.11",

src/components/Modal/HistoryModal.tsx

@@ -8,7 +8,6 @@ export interface HistoryModalProps extends ModalBaseProps {
   /** (Web) Only works when `useHistory` is true. Hash string to append to location */
   hash?: string | null;
   /** (Web) Only works when `useHistory` is true. Same as hash, but using query string. Query string will take precedence over hash @default null */
-  qs?: string | null;
 }
 
 export default ModalBase;

src/components/Modal/HistoryModal.web.tsx

@@ -1,9 +1,3 @@
-import {
-  createBrowserHistory,
-  History,
-  Location,
-  UnregisterCallback,
-} from 'history';
 import * as React from 'react';
 
 import { HistoryModalProps } from './HistoryModal';
@@ -18,112 +12,92 @@ class HistoryModal extends React.PureComponent<
   HistoryModalState
 > {
   public static defaultProps = {
-    hash: 'mo',
-    useHistory: false,
+    hash: '#modal-open',
   };
+  public initialHref: string | null = null;
 
-  public unlisten: UnregisterCallback | null = null;
-  public history: History | null = null;
   public state = {
     isVisible: false,
   };
 
   public componentDidMount = () => {
-    const { onRequestClose, useHistory } = this.props;
-
-    if (!useHistory) return;
-
-    this.history = createBrowserHistory();
+    this.initialHref = window.location.href;
 
     /**
-     * For back button, if use clicks back button it should be interpreted as a close request
+     * For back button, if use clicks back button it should be interpreted as a close request.
      */
-    this.unlisten = this.history.listen(location => {
-      if (!this.isHistoryActive(location)) {
-        this.setState(() => ({ isVisible: false }));
-        if (onRequestClose) {
-          onRequestClose();
-        }
-      }
-    });
+    window.addEventListener('hashchange', this.handleHashChange, false);
   };
 
   public componentDidUpdate = (prevProps: HistoryModalProps) => {
-    const { visible, useHistory } = this.props;
-
-    if (!useHistory) return;
+    const { visible } = this.props;
 
     if (
       visible &&
       visible !== prevProps.visible &&
-      this.history &&
-      !this.isHistoryActive(this.history.location)
+      history &&
+      !this.isHistoryActive()
     ) {
       this.activateHistory();
     }
   };
 
   public componentWillUnmount() {
-    if (this.unlisten) {
-      this.unlisten();
-    }
+    window.removeEventListener('hashchange', this.handleHashChange, false);
   }
 
-  public handleRequestClose = () => {
+  public handleHashChange = () => {
     const { onRequestClose } = this.props;
 
     if (onRequestClose) {
       onRequestClose();
     }
 
-    if (this.history) {
-      this.history.replace({ hash: '' });
-    }
+    this.setState(() => ({ isVisible: false }));
   };
 
-  public activateHistory = () => {
-    const { hash, qs } = this.props;
-    if (!this.history) return;
+  public handleRequestClose = () => {
+    const { onRequestClose } = this.props;
 
-    if (qs && qs !== null) {
-      this.history.push({ search: qs });
-    } else if (hash && hash !== null) {
-      this.history.push({ hash });
+    if (onRequestClose) {
+      onRequestClose();
     }
 
-    this.setState(() => ({ isVisible: true }));
+    history.replaceState(null, '', this.initialHref);
+    this.setState(() => ({ isVisible: false }));
   };
 
-  public isHistoryActive = (location: Location) => {
-    const { hash, qs } = this.props;
+  public activateHistory = () => {
+    const { hash } = this.props;
 
-    if (qs && qs !== null) {
-      return location.search.includes(qs);
+    this.setState(() => ({ isVisible: true }));
+    if (hash && hash !== null) {
+      history.pushState(null, '', this.initialHref + hash);
     }
+  };
 
-    return hash === location.hash.substring(1);
+  public isHistoryActive = () => {
+    const { hash } = this.props;
+
+    return hash === window.location.hash.substring(1);
   };
 
   public render() {
-    const {
-      hash,
-      qs,
-      useHistory,
-      visible,
-      onRequestClose,
-      ...modalProps
-    } = this.props;
+    const { hash, ...modalProps } = this.props;
     const { isVisible } = this.state;
 
     return (
       <ModalBase
         {...modalProps}
-        // If Modal uses history, use local state and handlers, otherwise forward modal props
-        onRequestClose={useHistory ? this.handleRequestClose : onRequestClose}
-        visible={useHistory ? isVisible : visible}
+        onRequestClose={this.handleRequestClose}
+        visible={isVisible}
       />
     );
   }
 }
 
-export default HistoryModal;
+export default ({ useHistory, ...props }: HistoryModalProps) => {
+  if (useHistory) return <HistoryModal {...props} />;
+
+  return <ModalBase {...props} />;
+};

yarn.lock

@@ -1065,7 +1065,7 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.2.tgz#63985d3d8b02530e0869962f4da09142ee8e200e"
   integrity sha512-n/VQ4mbfr81aqkx/XmVicOLjviMuy02eenSdJY33SVA7S2J42EU0P1H0mOogfYedb3wXA0d/LVtBrgTSm04WEA==
 
-"@expo/vector-icons@^9.0.0":
+"@expo/vector-icons@9.0.0":
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/@expo/vector-icons/-/vector-icons-9.0.0.tgz#7f18e21d3edc8b99b76d7d1b8e26b212393e08b3"
   integrity sha512-k5ndrW3oueW5jRDLt3o8iXKmiU+CvvCZPewOvxY7eRMivi8hIr6TkW6tMCGE1vS5fwmXffIkIpKGZkSbX7TxwA==
@@ -1463,11 +1463,6 @@
     "@types/react-native" "*"
     "@types/react-native-vector-icons" "*"
 
-"@types/history@^4.7.2":
-  version "4.7.2"
-  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.2.tgz#0e670ea254d559241b6eeb3894f8754991e73220"
-  integrity sha512-ui3WwXmjTaY73fOQ3/m3nnajU/Orhi6cEu5rzX+BrAAJxa3eITXZ5ch9suPqtM03OWhAHhPSyBGCN4UKoxO20Q==
-
 "@types/jest@23.3.12":
   version "23.3.12"
   resolved "https://registry.yarnpkg.com/@types/jest/-/jest-23.3.12.tgz#7e0ced251fa94c3bc2d1023d4b84b2992fa06376"
@@ -4895,7 +4890,7 @@ execa@^1.0.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
-exenv@^1.2.2:
+exenv@1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
   integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=
@@ -10410,10 +10405,10 @@ react-sizes@^1.0.4:
     lodash.throttle "^4.1.1"
     prop-types "^15.6.0"
 
-react-spring@^7.0.0:
-  version "7.2.2"
-  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-7.2.2.tgz#dbfb54591574754ed551935ddfc8189da4a73022"
-  integrity sha512-0VlSF148jLfOVHuHr1+G5RZY2YB7lwbyeeBtcGMkh4jb7V1/3JMmwwA1vdd2eTgQQsntl/Et6UMgZ80cFbVk6w==
+react-spring@7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-7.0.0.tgz#a19151672176a63938be53b488f57e4bd6c8c900"
+  integrity sha512-HvWtCDalaHhQYn6VqYV8GHWI8ZuWCC9AzOpMq1f7GQcsbnbHzPwaoYETT5IFMSxne8n1PN4BE19W98ifkZU4RA==
   dependencies:
     "@babel/runtime" "^7.0.0"