@mxjs/router-modal - npm Package Compare versions

Comparing version 0.2.16 to 0.3.0

CHANGELOG.md

@@ -0,1 +1,22 @@
+# [0.3.0](https://github.com/miaoxing/miaoxing/compare/@mxjs/router-modal@0.2.16...@mxjs/router-modal@0.3.0) (2024-05-01)
+
+
+### Features
+
+* 更新 `react-router` 到 v6 ([9115eb5](https://github.com/miaoxing/miaoxing/commit/9115eb56195a095f592dd9e402b25f7e22365b62))
+* **router-modal:** 更新组件为函数式 ([ee17b5d](https://github.com/miaoxing/miaoxing/commit/ee17b5d44f811382428db4670bbca4ffc6724101))
+
+
+### BREAKING CHANGES
+
+* 更新 `react-router` 到 v6
+
+
+
+
+
+### Dependencies
+
+* **@mxjs/router:** upgrade from `0.2.16` to `0.3.0`
+
 ## [0.2.16](https://github.com/miaoxing/miaoxing/compare/@mxjs/router-modal@0.2.15...@mxjs/router-modal@0.2.16) (2024-03-31)
@@ -2,0 +23,0 @@

ModalEvent.js

@@ -1,48 +0,53 @@
-import React from 'react';
-import {withRouter} from 'react-router';
+import { useEffect } from 'react';
 import PropTypes from 'prop-types';
+import { history } from '@mxjs/app';
 
-export default @withRouter
-class ModalEvent extends React.Component {
-  static defaultProps = {
-    onEnter: null,
-    onExit: null,
-  };
+const ModalEvent = ({ children, onEnter, onExit }) => {
+  let isModal = false;
 
-  static propTypes = {
-    history: PropTypes.object,
-    children: PropTypes.node,
-  };
+  useEffect(() => {
+    const handleEvent = (location, action) => {
+      const nextIsModal = location.state && location.state.modal;
 
-  isModal;
-
-  componentDidMount() {
-    this.unlisten = this.props.history.listen((location, action) => {
-      const isModal = location.state && location.state.modal;
-
-      if (this.isModal && !isModal) {
-        this.handleEvent('onExit', location, action);
+      if (isModal && !nextIsModal) {
+        callEvent(onExit, location, action);
       }
 
-      if (!this.isModal && isModal) {
-        this.handleEvent('onEnter', location, action);
+      if (!isModal && nextIsModal) {
+        callEvent(onEnter, location, action);
       }
 
-      this.isModal = isModal;
+      isModal = nextIsModal;
+    };
+
+    const unlisten = history.listen((location, action) => {
+      handleEvent(location, action);
     });
-  }
 
-  componentWillUnmount() {
-    this.unlisten();
-  }
+    return () => {
+      unlisten();
+    };
+  }, [history, onEnter, onExit]);
 
-  handleEvent(event, location, action) {
-    if (this.props[event]) {
-      this.props[event](location, action);
+  const callEvent = (event, location, action) => {
+    if (event) {
+      event(location, action);
     }
-  }
+  };
 
-  render() {
-    return this.props.children || '';
-  }
-}
+  return children || '';
+};
+
+ModalEvent.defaultProps = {
+  onEnter: null,
+  onExit: null,
+};
+
+ModalEvent.propTypes = {
+  history: PropTypes.object.isRequired,
+  children: PropTypes.node,
+  onEnter: PropTypes.func,
+  onExit: PropTypes.func,
+};
+
+export default ModalEvent;

ModalSwitch.js

@@ -1,75 +0,70 @@
-import React from 'react';
-import {Switch, withRouter} from 'react-router';
+import { useEffect, useState } from 'react';
+import { Switch, useLocation } from 'react-router';
 import ModalView from './ModalView';
 import PropTypes from 'prop-types';
 import ModalContext from '@mxjs/router/ModalContext';
+import { history } from '@mxjs/app';
 
-export {ModalContext};
+export { ModalContext };
 
-/**
- * @link https://reacttraining.com/react-router/web/example/modal-gallery
- */
-export default @withRouter
-class ModalSwitch extends React.Component {
-  static propTypes = {
-    location: PropTypes.object,
-    history: PropTypes.object,
-    children: PropTypes.node,
-  };
+const ModalSwitch = ({ children }) => {
+  const location = useLocation();
+  const [length, setLength] = useState(1);
+  const [previousLocation, setPreviousLocation] = useState(location);
 
-  length = 1;
-  previousLocation = this.props.location;
+  useEffect(() => {
+    const handleUpdate = (nextLocation) => {
+      if (history.action !== 'POP' && (!nextLocation.state || !nextLocation.state.modal)) {
+        setPreviousLocation(location);
+      }
 
-  UNSAFE_componentWillUpdate(nextProps) {
-    let {location} = this.props;
+      const modal = location.state && location.state.modal;
+      const nextModal = nextLocation.state && nextLocation.state.modal;
 
-    // set previousLocation if props.location is not modal
-    if (
-      nextProps.history.action !== 'POP' &&
-      (!location.state || !location.state.modal)
-    ) {
-      this.previousLocation = this.props.location;
-    }
+      if (modal && nextModal) {
+        if (history.action === 'PUSH') {
+          // modal 中下一页
+          setLength(length + 1);
+        } else if (history.action === 'POP') {
+          // modal 中上一页
+          setLength(length - 1);
+        }
+      }
 
-    const modal = location.state && location.state.modal;
-    const nextModal = nextProps.location.state && nextProps.location.state.modal;
-    if (modal && nextModal) {
-      if (nextProps.history.action === 'PUSH') {
-        // modal 中下一页
-        this.length++;
-      } else if (nextProps.history.action === 'POP') {
-        // modal 中上一页
-        this.length--;
+      if (!nextModal) {
+        setLength(1);
       }
-    }
+    };
 
-    if (!nextModal) {
-      // 退出 modal
-      this.length = 1;
-    }
-  }
+    history.listen(handleUpdate);
 
-  isModal() {
-    let {location} = this.props;
-    return location.state &&
-      location.state.modal &&
-      this.previousLocation !== location; // not initial render
-  }
+    return () => {
+      history.listen(handleUpdate);
+    };
+  }, [location, history, length]);
 
-  render() {
-    const isModal = this.isModal();
+  const isModal = () => {
+    return location.state && location.state.modal && previousLocation !== location;
+  };
 
-    return (
-      <ModalContext.Provider value={{isModal: isModal}}>
-        <Switch location={isModal ? this.previousLocation : this.props.location}>
-          {this.props.children}
-        </Switch>
-        {isModal && <ModalView length={this.length}>
-          <Switch>
-            {this.props.children}
-          </Switch>
-        </ModalView>}
-      </ModalContext.Provider>
-    );
-  }
-}
+  return (
+    <ModalContext.Provider value={{ isModal: isModal() }}>
+      <Switch location={isModal() ? previousLocation : location}>
+        {children}
+      </Switch>
+      {isModal() && (
+        <ModalView length={length}>
+          <Switch>{children}</Switch>
+        </ModalView>
+      )}
+    </ModalContext.Provider>
+  );
+};
+
+ModalSwitch.propTypes = {
+  location: PropTypes.object,
+  history: PropTypes.object,
+  children: PropTypes.node,
+};
+
+export default ModalSwitch;

ModalView.js

@@ -1,44 +0,36 @@
-import React from 'react';
-import {Modal} from 'react-bootstrap';
-import {withRouter} from 'react-router';
+import { useState } from 'react';
+import { Modal } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 
-export default @withRouter
-class ModalView extends React.Component {
-  static defaultProps = {
-    length: 1,
-  };
+const ModalView = ({ history, length = 1, children }) => {
+  const [show, setShow] = useState(true);
 
-  static propTypes = {
-    history: PropTypes.object,
-    length: PropTypes.number,
-    children: PropTypes.node,
+  const handleHide = () => {
+    setShow(false);
   };
 
-  state = {
-    show: true,
+  const handleExited = () => {
+    history.go(-length);
   };
 
-  handleHide = () => {
-    this.setState({show: false});
-  };
+  return (
+    <Modal
+      show={show}
+      onHide={handleHide}
+      onExited={handleExited}
+      className="modal-right"
+    >
+      <Modal.Body className="page-content">
+        {children}
+      </Modal.Body>
+    </Modal>
+  );
+};
 
-  handleExited = () => {
-    this.props.history.go(-this.props.length);
-  };
+ModalView.propTypes = {
+  history: PropTypes.object,
+  length: PropTypes.number,
+  children: PropTypes.node,
+};
 
-  render() {
-    return (
-      <Modal
-        show={this.state.show}
-        onHide={this.handleHide}
-        onExited={this.handleExited}
-        className="modal-right"
-      >
-        <Modal.Body className="page-content">
-          {this.props.children}
-        </Modal.Body>
-      </Modal>
-    );
-  }
-}
+export default ModalView;

package.json

 {
   "name": "@mxjs/router-modal",
-  "version": "0.2.16",
+  "version": "0.3.0",
   "main": "index.js",
@@ -13,5 +13,5 @@ "license": "MIT",
     "prop-types": "^15.7.2",
-    "react-router": "^5.2.0",
-    "react-router-dom": "^5.2.0",
-    "@mxjs/router": "^0.2.16"
+    "react-router": "^6",
+    "react-router-dom": "^6",
+    "@mxjs/router": "^0.3.0"
   },
@@ -18,0 +18,0 @@ "devDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16010

increased by2.71%

Worsened metrics

Lines of code

154

decreased by-7.78%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@mxjs/router@0.3.3(transitive)

• + Added@remix-run/router@1.19.2(transitive)

• + Addedreact-router@6.26.2(transitive)

• + Addedreact-router-dom@6.26.2(transitive)

• - Removed@mxjs/router@0.2.16(transitive)

• - Removedhistory@4.10.1(transitive)

• - Removedhoist-non-react-statics@3.3.2(transitive)

• - Removedisarray@0.0.1(transitive)

• - Removedpath-to-regexp@1.9.0(transitive)

• - Removedreact-router@5.3.4(transitive)

• - Removedreact-router-dom@5.3.4(transitive)

• - Removedresolve-pathname@3.0.0(transitive)

• - Removedtiny-invariant@1.3.3(transitive)

• - Removedtiny-warning@1.0.3(transitive)

• - Removedvalue-equal@1.0.1(transitive)

• Updated@mxjs/router@^0.3.0

• Updatedreact-router@^6

• Updatedreact-router-dom@^6