chore(code): adapt code to antd v6

src/components/DropOption/DropOption.js

@@ -9,14 +9,10 @@ const DropOption = ({
   buttonStyle,
   dropdownProps,
 }) => {
-  const menu = menuOptions.map(item => (
-    <Menu.Item key={item.key}>{item.name}</Menu.Item>
-  ))
+  const items = menuOptions.map(item => ({ key: item.key, label: item.name }))
+
   return (
-    <Dropdown
-      overlay={<Menu onClick={onMenuClick}>{menu}</Menu>}
-      {...dropdownProps}
-    >
+    <Dropdown overlay={<Menu onClick={onMenuClick} items={items} />} {...dropdownProps}>
       <Button style={{ border: 'none', ...buttonStyle }}>
         <BarsOutlined style={{ marginRight: 2 }} />
         <DownOutlined />

src/components/Ellipsis/index.js

@@ -40,7 +40,9 @@ export const cutStrByFullLength = (str = '', maxLength) => {
 
 const getTooltip = ({ tooltip, overlayStyle, title, children }) => {
   if (tooltip) {
-    const props = tooltip === true ? { overlayStyle, title } : { ...tooltip, overlayStyle, title };
+    const base = tooltip === true ? {} : { ...tooltip };
+    const styleProp = overlayStyle ? { styles: { root: overlayStyle } } : {};
+    const props = { ...base, ...styleProp, title };
     return <Tooltip {...props}>{children}</Tooltip>;
   }
   return children;
@@ -63,17 +65,17 @@ const EllipsisText = ({ text, length, tooltip, fullWidthRecognition, ...other })
   }
 
   const spanAttrs = tooltip ? {} : { ...other };
-  return getTooltip({
-    tooltip,
-    overlayStyle: TooltipOverlayStyle,
-    title: text,
-    children: (
-      <span {...spanAttrs}>
-        {displayText}
-        {tail}
-      </span>
-    ),
-  });
+      return getTooltip({
+        tooltip,
+        overlayStyle: TooltipOverlayStyle,
+        title: text,
+        children: (
+          <span {...spanAttrs}>
+            {displayText}
+            {tail}
+          </span>
+        ),
+      });
 };
 
 export default class Ellipsis extends Component {

src/components/Layout/Bread.js

@@ -10,29 +10,24 @@ import styles from './Bread.less'
 
 @withRouter
 class Bread extends PureComponent {
-  generateBreadcrumbs = (paths) => {
-    return paths.map((item, key) => {
-      const content = item && (
-        <Fragment>
-          {item.icon && (
-            <span style={{ marginRight: 4 }}>{iconMap[item.icon]}</span>
-          )}
-          {item.name}
-        </Fragment>
-      )
+  generateBreadcrumbItems = paths => {
+    return paths
+      .map((item, key) => {
+        if (!item) return null
 
-      return (
-        item && (
-          <Breadcrumb.Item key={key}>
-            {paths.length - 1 !== key ? (
-              <Link to={item.route || '#'}>{content}</Link>
-            ) : (
-              content
-            )}
-          </Breadcrumb.Item>
+        const content = (
+          <Fragment>
+            {item.icon && <span style={{ marginRight: 4 }}>{iconMap[item.icon]}</span>}
+            {item.name}
+          </Fragment>
         )
-      )
-    })
+
+        return ({
+          key: item.id || key,
+          title: paths.length - 1 !== key ? <Link to={item.route || '#'}>{content}</Link> : content,
+        })
+      })
+      .filter(Boolean)
   }
   render() {
     const { routeList, location } = this.props
@@ -53,11 +48,9 @@ class Bread extends PureComponent {
           },
         ]
 
-    return (
-      <Breadcrumb className={styles.bread}>
-        {this.generateBreadcrumbs(paths)}
-      </Breadcrumb>
-    )
+    const items = this.generateBreadcrumbItems(paths)
+
+    return <Breadcrumb className={styles.bread} items={items} />
   }
 }
 

src/components/Layout/Header.js

@@ -15,7 +15,7 @@ import classnames from 'classnames'
 import config from 'config'
 import styles from './Header.less'
 
-const { SubMenu } = Menu
+
 
 class Header extends PureComponent {
   handleClickMenu = e => {
@@ -32,26 +32,29 @@ class Header extends PureComponent {
       onAllNotificationsRead,
     } = this.props
 
-    const rightContent = [
-      <Menu key="user" mode="horizontal" onClick={this.handleClickMenu}>
-        <SubMenu
-          title={
-            <Fragment>
-              <span style={{ color: '#999', marginRight: 4 }}>
-                <Trans>Hi,</Trans>
-              </span>
-              <span>{username}</span>
-              <Avatar style={{ marginLeft: 8 }} src={avatar} />
-            </Fragment>
-          }
-        >
-          <Menu.Item key="SignOut">
-            <Trans>Sign out</Trans>
-          </Menu.Item>
-        </SubMenu>
-      </Menu>,
+    const userMenuItems = [
+      {
+        key: 'user',
+        label: (
+          <Fragment>
+            <span style={{ color: '#999', marginRight: 4 }}>
+              <Trans>Hi,</Trans>
+            </span>
+            <span>{username}</span>
+            <Avatar style={{ marginLeft: 8 }} src={avatar} />
+          </Fragment>
+        ),
+        children: [
+          {
+            key: 'SignOut',
+            label: <Trans>Sign out</Trans>,
+          },
+        ],
+      },
     ]
 
+    const rightContent = [<Menu key="user" mode="horizontal" onClick={this.handleClickMenu} items={userMenuItems} />]
+
     if (config.i18n) {
       const { languages } = config.i18n
       const language = getLocale()
@@ -59,6 +62,22 @@ class Header extends PureComponent {
         item => item.key === language
       )
 
+      const languageItems = [
+        {
+          key: 'language',
+          label: <Avatar size="small" src={currentLanguage.flag} />,
+          children: languages.map(item => ({
+            key: item.key,
+            label: (
+              <>
+                <Avatar size="small" style={{ marginRight: 8 }} src={item.flag} />
+                {item.title}
+              </>
+            ),
+          })),
+        },
+      ]
+
       rightContent.unshift(
         <Menu
           key="language"
@@ -67,20 +86,8 @@ class Header extends PureComponent {
             setLocale(data.key)
           }}
           mode="horizontal"
-        >
-          <SubMenu title={<Avatar size="small" src={currentLanguage.flag} />}>
-            {languages.map(item => (
-              <Menu.Item key={item.key}>
-                <Avatar
-                  size="small"
-                  style={{ marginRight: 8 }}
-                  src={item.flag}
-                />
-                {item.title}
-              </Menu.Item>
-            ))}
-          </SubMenu>
-        </Menu>
+          items={languageItems}
+        />
       )
     }
 

src/components/Layout/Menu.js

@@ -7,7 +7,7 @@ import { arrayToTree, queryAncestors } from 'utils'
 import iconMap from 'utils/iconMap'
 import store from 'store'
 
-const { SubMenu } = Menu
+// Use `items` prop for Menu (avoid JSX children like Menu.Item/SubMenu)
 
 @withRouter
 class SiderMenu extends PureComponent {
@@ -34,31 +34,30 @@ class SiderMenu extends PureComponent {
     store.set('openKeys', newOpenKeys)
   }
 
-  generateMenus = data => {
+  generateMenuItems = data => {
     return data.map(item => {
       if (item.children) {
-        return (
-          <SubMenu
-            key={item.id}
-            title={
-              <Fragment>
-                {item.icon && iconMap[item.icon]}
-                <span>{item.name}</span>
-              </Fragment>
-            }
-          >
-            {this.generateMenus(item.children)}
-          </SubMenu>
-        )
+        return {
+          key: item.id,
+          label: (
+            <Fragment>
+              {item.icon && iconMap[item.icon]}
+              <span>{item.name}</span>
+            </Fragment>
+          ),
+          children: this.generateMenuItems(item.children),
+        }
       }
-      return (
-        <Menu.Item key={item.id}>
+
+      return {
+        key: item.id,
+        label: (
           <NavLink to={item.route || '#'}>
             {item.icon && iconMap[item.icon]}
             <span>{item.name}</span>
           </NavLink>
-        </Menu.Item>
-      )
+        ),
+      }
     })
   }
 
@@ -91,6 +90,8 @@ class SiderMenu extends PureComponent {
           openKeys: this.state.openKeys,
         }
 
+    const items = this.generateMenuItems(menuTree)
+
     return (
       <Menu
         mode="inline"
@@ -104,10 +105,9 @@ class SiderMenu extends PureComponent {
               }
             : undefined
         }
+        items={items}
         {...menuProps}
-      >
-        {this.generateMenus(menuTree)}
-      </Menu>
+      />
     )
   }
 }

src/layouts/PrimaryLayout.js

@@ -116,7 +116,7 @@ class PrimaryLayout extends PureComponent {
         <Layout>
           {isMobile ? (
             <Drawer
-              maskClosable
+              mask={{ closable: true }}
               closable={false}
               onClose={onCollapseChange.bind(this, !collapsed)}
               open={!collapsed}

src/pages/dashboard/components/numberCard.js

@@ -8,11 +8,7 @@ import styles from './numberCard.less'
 
 function NumberCard({ icon, color, title, number, countUp }) {
   return (
-    <Card
-      className={styles.numberCard}
-      bordered={false}
-      bodyStyle={{ padding: 10 }}
-    >
+    <Card className={styles.numberCard} variant="shadow" styles={{ body: { padding: 10 } }}>
       <span className={styles.iconWarp} style={{ color }}>
         {iconMap[icon]}
       </span>

src/pages/dashboard/index.js

@@ -20,9 +20,11 @@ import styles from './index.less'
 import store from 'store'
 
 const bodyStyle = {
-  bodyStyle: {
-    height: 432,
-    background: '#fff',
+  styles: {
+    body: {
+      height: 432,
+      background: '#fff',
+    },
   },
 }
 
@@ -63,9 +65,11 @@ class Dashboard extends PureComponent {
           {numberCards}
           <Col lg={18} md={24}>
             <Card
-              bordered={false}
-              bodyStyle={{
-                padding: '24px 36px 24px 0',
+              variant="shadow"
+              styles={{
+                body: {
+                  padding: '24px 36px 24px 0',
+                },
               }}
             >
               <Sales data={sales} />
@@ -75,12 +79,14 @@ class Dashboard extends PureComponent {
             <Row gutter={24}>
               <Col lg={24} md={12}>
                 <Card
-                  bordered={false}
+                  variant="shadow"
                   className={styles.weather}
-                  bodyStyle={{
-                    padding: 0,
-                    height: 204,
-                    background: Color.blue,
+                  styles={{
+                    body: {
+                      padding: 0,
+                      height: 204,
+                      background: Color.blue,
+                    },
                   }}
                 >
                   <Weather
@@ -91,12 +97,14 @@ class Dashboard extends PureComponent {
               </Col>
               <Col lg={24} md={12}>
                 <Card
-                  bordered={false}
+                  variant="shadow"
                   className={styles.quote}
-                  bodyStyle={{
-                    padding: 0,
-                    height: 204,
-                    background: Color.peach,
+                  styles={{
+                    body: {
+                      padding: 0,
+                      height: 204,
+                      background: Color.peach,
+                    },
                   }}
                 >
                   <ScrollBar>
@@ -107,12 +115,12 @@ class Dashboard extends PureComponent {
             </Row>
           </Col>
           <Col lg={12} md={24}>
-            <Card bordered={false} {...bodyStyle}>
+            <Card variant="shadow" {...bodyStyle}>
               <RecentSales data={recentSales} />
             </Card>
           </Col>
           <Col lg={12} md={24}>
-            <Card bordered={false} {...bodyStyle}>
+            <Card variant="shadow" {...bodyStyle}>
               <ScrollBar>
                 <Comments data={comments} />
               </ScrollBar>
@@ -120,21 +128,23 @@ class Dashboard extends PureComponent {
           </Col>
           <Col lg={24} md={24}>
             <Card
-              bordered={false}
-              bodyStyle={{
-                padding: '24px 36px 24px 0',
+              variant="shadow"
+              styles={{
+                body: {
+                  padding: '24px 36px 24px 0',
+                },
               }}
             >
               <Completed data={completed} />
             </Card>
           </Col>
           <Col lg={8} md={24}>
-            <Card bordered={false} {...bodyStyle}>
+            <Card variant="shadow" {...bodyStyle}>
               <Browser data={browser} />
             </Card>
           </Col>
           <Col lg={8} md={24}>
-            <Card bordered={false} {...bodyStyle}>
+            <Card variant="shadow" {...bodyStyle}>
               <ScrollBar>
                 <Cpu {...cpu} />
               </ScrollBar>
@@ -142,8 +152,8 @@ class Dashboard extends PureComponent {
           </Col>
           <Col lg={8} md={24}>
             <Card
-              bordered={false}
-              bodyStyle={{ ...bodyStyle.bodyStyle, padding: 0 }}
+              variant="shadow"
+              styles={{ ...bodyStyle.styles, body: { ...bodyStyle.styles.body, padding: 0 } }}
             >
               <User {...user} avatar={avatar} username={username} />
             </Card>

src/pages/post/index.js

@@ -8,7 +8,7 @@ import { t } from "@lingui/macro"
 import { Page } from 'components'
 import List from './components/List'
 
-const { TabPane } = Tabs
+// use `items` prop instead of Tabs.TabPane
 
 const EnumPostStatus = {
   UNPUBLISH: 1,
@@ -62,21 +62,20 @@ class Post extends PureComponent {
               ? String(EnumPostStatus.UNPUBLISH)
               : String(EnumPostStatus.PUBLISHED)
           }
-          onTabClick={this.handleTabClick}
-        >
-          <TabPane
-            tab={t`Publised`}
-            key={String(EnumPostStatus.PUBLISHED)}
-          >
-            <List {...this.listProps} />
-          </TabPane>
-          <TabPane
-            tab={t`Unpublished`}
-            key={String(EnumPostStatus.UNPUBLISH)}
-          >
-            <List {...this.listProps} />
-          </TabPane>
-        </Tabs>
+          onChange={this.handleTabClick}
+          items={[
+            {
+              key: String(EnumPostStatus.PUBLISHED),
+              label: t`Publised`,
+              children: <List {...this.listProps} />,
+            },
+            {
+              key: String(EnumPostStatus.UNPUBLISH),
+              label: t`Unpublished`,
+              children: <List {...this.listProps} />,
+            },
+          ]}
+        />
       </Page>
     )
   }

src/pages/user/components/Modal.js

@@ -40,7 +40,7 @@ class UserModal extends PureComponent {
     const { item = {}, onOk, form, ...modalProps } = this.props
 
     return (
-      (<Modal {...modalProps} onOk={this.handleOk}>
+      <Modal {...modalProps} onOk={this.handleOk}>
         <Form ref={this.formRef} name="control-ref" initialValues={{ ...item, address: item.address && item.address.split(' ') }} layout="horizontal">
           <FormItem name='name' rules={[{ required: true }]}
             label={t`Name`} hasFeedback {...formItemLayout}>
@@ -81,7 +81,7 @@ class UserModal extends PureComponent {
             />
           </FormItem>
         </Form>
-      </Modal>)
+      </Modal>
     );
   }
 }

src/pages/user/index.js

@@ -54,8 +54,8 @@ class User extends PureComponent {
     return {
       item: modalType === 'create' ? {} : currentItem,
       open: modalOpen,
-      destroyOnClose: true,
-      maskClosable: false,
+      destroyOnHidden: true,
+      mask: { closable: false },
       confirmLoading: loading.effects[`user/${modalType}`],
       title: `${
         modalType === 'create' ? t`Create User` : t`Update User`