Bump rsuite to 4.1.0

rsuite · Nov 7, 2019 · 26abdec · 26abdec
1 parent 741fb04
commit 26abdec
Show file tree

Hide file tree

Showing 12 changed files with 2,560 additions and 1,515 deletions.
diff --git a/components/Frame/Frame.js b/components/Frame/Frame.js
@@ -1,53 +1,51 @@
 // @flow
 
-import * as React from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import Link from 'next/link';
+import * as React from "react";
+import classNames from "classnames";
+import PropTypes from "prop-types";
 
 import {
   Container,
   Sidebar,
   Sidenav,
   Icon,
-  Header,
   Content,
   Dropdown,
   Nav,
   DOMHelper
-} from 'rsuite';
+} from "rsuite";
 
-import NavToggle from './NavToggle';
-import HeaderAvatar from '../HeaderAvatar';
+import NavToggle from "./NavToggle";
+import HeaderAvatar from "../HeaderAvatar";
 
 const { getHeight, on } = DOMHelper;
 const navs = [
   {
-    key: '1',
+    key: "1",
     icon: <Icon icon="dashboard" />,
-    text: 'Dashboard',
-    link: '/'
+    text: "Dashboard",
+    link: "/"
   },
   {
-    key: '2',
+    key: "2",
     icon: <Icon icon="group" />,
-    text: 'Members',
-    link: '/list/members'
+    text: "Members",
+    link: "/list/members"
   },
   {
-    key: '3',
-    text: 'Errors',
+    key: "3",
+    text: "Errors",
     icon: <Icon icon="exclamation-triangle" />,
     children: [
       {
-        key: '3-1',
-        text: '404',
-        link: '/error/404'
+        key: "3-1",
+        text: "404",
+        link: "/error/404"
       },
       {
-        key: '3-2',
-        text: '500',
-        link: '/error/500'
+        key: "3-2",
+        text: "500",
+        link: "/error/500"
       }
     ]
   }
@@ -59,15 +57,15 @@ class Frame extends React.Component {
     router: PropTypes.object
   };
 
-  constructor(props: Props) {
+  constructor(props) {
     super(props);
     this.state = {
       windowHeight: 0,
       expand: true
     };
   }
   componentDidMount() {
-    this.resizeListenner = on(window, 'resize', this.updateHeight);
+    this.resizeListenner = on(window, "resize", this.updateHeight);
     this.setState({
       windowHeight: getHeight(window)
     });
@@ -96,15 +94,19 @@ class Frame extends React.Component {
         return (
           <Dropdown
             key={item.key}
-            placement="rightTop"
+            placement="rightStart"
             trigger="hover"
             title="Errors"
             icon={item.icon}
             eventKey={item.key}
           >
             {item.children.map((child, index) => {
               return (
-                <Dropdown.Item href={child.link} key={child.key} eventKey={child.key}>
+                <Dropdown.Item
+                  href={child.link}
+                  key={child.key}
+                  eventKey={child.key}
+                >
                   {child.text}
                 </Dropdown.Item>
               );
@@ -114,7 +116,12 @@ class Frame extends React.Component {
       }
 
       return (
-        <Nav.Item href={item.link} key={item.key} eventKey={item.key} icon={item.icon}>
+        <Nav.Item
+          href={item.link}
+          key={item.key}
+          eventKey={item.key}
+          icon={item.icon}
+        >
           {item.text}
         </Nav.Item>
       );
@@ -125,36 +132,40 @@ class Frame extends React.Component {
     const { children, activeKey } = this.props;
     const { expand, windowHeight } = this.state;
 
-    const containerClasses = classNames('page-container', {
-      'container-full': !expand
+    const containerClasses = classNames("page-container", {
+      "container-full": !expand
     });
 
     let navBodyStyle = null;
     if (expand) {
       navBodyStyle = {
         height: windowHeight - 112,
-        overflow: 'auto'
+        overflow: "auto"
       };
     }
 
     return (
       <Container className="frame">
         <Sidebar
-          style={{ display: 'flex', flexDirection: 'column' }}
+          style={{ display: "flex", flexDirection: "column" }}
           width={expand ? 260 : 56}
           collapsible
         >
           <Sidenav.Header>
             <div className="header-hrand">
               <a href="/">
-                <Icon icon="logo-analytics" size="lg" style={{ verticalAlign: 0 }} />
+                <Icon
+                  icon="logo-analytics"
+                  size="lg"
+                  style={{ verticalAlign: 0 }}
+                />
                 <span style={{ marginLeft: 12 }}> RSUITE ANALYTICS</span>
               </a>
             </div>
           </Sidenav.Header>
           <Sidenav
             expanded={expand}
-            defaultOpenKeys={['1', '2', '3']}
+            defaultOpenKeys={["1", "2", "3"]}
             activeKey={activeKey}
             appearance="subtle"
           >

diff --git a/components/Frame/NavToggle.js b/components/Frame/NavToggle.js
@@ -1,32 +1,26 @@
-// @flow
-import React from 'react';
-import { Navbar, Nav, Dropdown, Icon } from 'rsuite';
+import React from "react";
+import { Navbar, Nav, Dropdown, Icon } from "rsuite";
 
 const styles = {
   icon: {
     width: 56,
     height: 56,
-    lineHeight: '56px',
-    textAlign: 'center'
+    lineHeight: "56px",
+    textAlign: "center"
   },
   navItem: {
     width: 56,
-    textAlign: 'center'
+    textAlign: "center"
   }
 };
 
-type Props = {
-  expand?: boolean,
-  onChange?: () => void
-};
-
-const NavToggle = ({ expand, onChange }: Props) => {
+const NavToggle = ({ expand, onChange }) => {
   return (
     <Navbar appearance="subtle" className="nav-toggle">
       <Navbar.Body>
         <Nav>
           <Dropdown
-            placement={expand ? 'topLeft' : 'rightBottom'}
+            placement={expand ? "topStart" : "rightEnd"}
             trigger="click"
             renderTitle={children => {
               return <Icon style={styles.icon} icon="cog" />;
@@ -40,7 +34,7 @@ const NavToggle = ({ expand, onChange }: Props) => {
 
         <Nav pullRight>
           <Nav.Item onClick={onChange} style={styles.navItem}>
-            <Icon icon={expand ? 'angle-left' : 'angle-right'} />
+            <Icon icon={expand ? "angle-left" : "angle-right"} />
           </Nav.Item>
         </Nav>
       </Navbar.Body>

diff --git a/components/Frame/styles.less b/components/Frame/styles.less
@@ -1,4 +1,4 @@
-@import '~rsuite/styles/less/index';
+@import '~rsuite/lib/styles/index.less';
 @import '../HeaderAvatar/styles.less';
 
 //rewrite base color
@@ -11,7 +11,6 @@ body {
 .rs-sidebar {
   position: fixed;
   height: 100vh;
-  z-index: 3;
 }
 .page-container {
   padding-left: 260px;

diff --git a/components/HeaderAvatar/HeaderAvatar.js b/components/HeaderAvatar/HeaderAvatar.js
@@ -1,7 +1,5 @@
-//@flow
-
-import * as React from 'react';
-import { Dropdown, Popover, Whisper, Icon } from 'rsuite';
+import * as React from "react";
+import { Dropdown, Popover, Whisper, Icon } from "rsuite";
 
 const Menu = ({ onSelect }) => (
   <Dropdown.Menu onSelect={onSelect}>
@@ -26,10 +24,9 @@ const MenuPopover = ({ onSelect, ...rest }) => (
   </Popover>
 );
 
-type Props = {};
-class HeaderAvatar extends React.Component<Props> {
+class HeaderAvatar extends React.Component {
   trigger = null;
-  handleSelectMenu = (eventKey: any, event: SyntheticEvent<*>) => {
+  handleSelectMenu = (eventKey, event) => {
     if (this.trigger) {
       this.trigger.hide();
     }

diff --git a/package.json b/package.json
@@ -15,13 +15,13 @@
     "chartist": "^0.11.0",
     "dom-lib": "1.1.0-beta.1",
     "less": "^3.9.0",
-    "next": "^7.0.2",
+    "next": "^9.1.2",
     "next-images": "^1.0.3",
     "react": "^16.6.3",
     "react-chartist": "^0.13.1",
     "react-dom": "^16.6.3",
     "react-intl": "^2.7.2",
-    "rsuite": "^3.5.0"
+    "rsuite": "^4.1.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-export-default-from": "^7.2.0",

diff --git a/pages/components/Modal.js b/pages/components/Modal.js
@@ -20,7 +20,7 @@ class ModalDemo extends React.Component {
     return (
       <div className="modal-container">
         <ButtonToolbar>
-          <Button onClick={this.open}> Open</Button>
+          <Button onClick={this.open}> Open Modal</Button>
         </ButtonToolbar>
 
         <Modal show={this.state.show} onHide={this.close}>