From 12aaa0e889aaa110db20661cbf956f914121f1af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=87=95=E9=B9=8F?= <mail_yanpeng@163.com>
Date: Wed, 30 Sep 2020 18:18:42 +0800
Subject: [PATCH] add antdmobile

---
 config-overrides.js    |   7 ++
 package.json           |  12 +++-
 src/App.js             |  17 +----
 src/App.test.js        |   9 ---
 src/components/Tab.jsx | 147 +++++++++++++++++++++++++++++++++++++++++
 src/setupTests.js      |   5 --
 6 files changed, 165 insertions(+), 32 deletions(-)
 create mode 100644 config-overrides.js
 delete mode 100644 src/App.test.js
 create mode 100644 src/components/Tab.jsx
 delete mode 100644 src/setupTests.js

diff --git a/config-overrides.js b/config-overrides.js
new file mode 100644
index 0000000..5e0e988
--- /dev/null
+++ b/config-overrides.js
@@ -0,0 +1,7 @@
+const {override, fixBabelImports} = require('customize-cra');
+module.exports = override(
+    fixBabelImports('import', {
+        libraryName: 'antd-mobile',
+        style: 'css',
+    }),
+);
\ No newline at end of file
diff --git a/package.json b/package.json
index da64a81..45eea79 100644
--- a/package.json
+++ b/package.json
@@ -6,14 +6,15 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "antd-mobile": "^2.3.4",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.3"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test --env=jsdom",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -30,5 +31,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "babel-plugin-import": "^1.13.0",
+    "customize-cra": "^1.0.0",
+    "react-app-rewired": "^2.1.6"
   }
 }
diff --git a/src/App.js b/src/App.js
index ce9cbd2..c8dae96 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,24 +1,11 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
+import Tab from './components/Tab'
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Tab/>
     </div>
   );
 }
diff --git a/src/App.test.js b/src/App.test.js
deleted file mode 100644
index 4db7ebc..0000000
--- a/src/App.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
diff --git a/src/components/Tab.jsx b/src/components/Tab.jsx
new file mode 100644
index 0000000..90ce111
--- /dev/null
+++ b/src/components/Tab.jsx
@@ -0,0 +1,147 @@
+import React, {Component, Fragment} from 'react';
+import {TabBar} from 'antd-mobile';
+
+class Tab extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            selectedTab: 'redTab',
+            hidden: false,
+            fullScreen: true,
+        };
+    }
+
+    renderContent(pageText) {
+        return (
+            <div style={{backgroundColor: 'white', height: '100%', textAlign: 'center'}}>
+                <div style={{paddingTop: 60}}>Clicked “{pageText}” tab， show “{pageText}” information</div>
+                <a style={{display: 'block', marginTop: 40, marginBottom: 20, color: '#108ee9'}}
+                   onClick={(e) => {
+                       e.preventDefault();
+                       this.setState({
+                           hidden: !this.state.hidden,
+                       });
+                   }}
+                >
+                </a>
+            </div>
+        );
+    }
+
+    render() {
+        return (
+            <div style={this.state.fullScreen ? {
+                position: 'fixed',
+                height: '100%',
+                width: '100%',
+                top: 0
+            } : {height: 400}}>
+                <TabBar
+                    unselectedTintColor="#949494"
+                    tintColor="#33A3F4"
+                    barTintColor="white"
+                    hidden={this.state.hidden}
+                >
+                    <TabBar.Item
+                        title="Life"
+                        key="Life"
+                        icon={<div style={{
+                            width: '22px',
+                            height: '22px',
+                            background: 'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  21px 21px no-repeat'
+                        }}/>}
+                        selectedIcon={<div style={{
+                            width: '22px',
+                            height: '22px',
+                            background: 'url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center /  21px 21px no-repeat'
+                        }}/>}
+                        selected={this.state.selectedTab === 'blueTab'}
+                        badge={1}
+                        onPress={() => {
+                            this.setState({
+                                selectedTab: 'blueTab',
+                            });
+                        }}
+                        data-seed="logId">
+                        {/*{this.renderContent('Life')}*/}
+                    </TabBar.Item>
+                    <TabBar.Item
+                        icon={
+                            <div style={{
+                                width: '22px',
+                                height: '22px',
+                                background: 'url(https://gw.alipayobjects.com/zos/rmsportal/BTSsmHkPsQSPTktcXyTV.svg) center center /  21px 21px no-repeat'
+                            }}
+                            />
+                        }
+                        selectedIcon={
+                            <div style={{
+                                width: '22px',
+                                height: '22px',
+                                background: 'url(https://gw.alipayobjects.com/zos/rmsportal/ekLecvKBnRazVLXbWOnE.svg) center center /  21px 21px no-repeat'
+                            }}
+                            />
+                        }
+                        title="Koubei"
+                        key="Koubei"
+                        badge={'new'}
+                        selected={this.state.selectedTab === 'redTab'}
+                        onPress={() => {
+                            this.setState({
+                                selectedTab: 'redTab',
+                            });
+                        }}
+                        data-seed="logId1"
+                    >
+                        {this.renderContent('Koubei')}
+                    </TabBar.Item>
+                    <TabBar.Item
+                        icon={
+                            <div style={{
+                                width: '22px',
+                                height: '22px',
+                                background: 'url(https://zos.alipayobjects.com/rmsportal/psUFoAMjkCcjqtUCNPxB.svg) center center /  21px 21px no-repeat'
+                            }}
+                            />
+                        }
+                        selectedIcon={
+                            <div style={{
+                                width: '22px',
+                                height: '22px',
+                                background: 'url(https://zos.alipayobjects.com/rmsportal/IIRLrXXrFAhXVdhMWgUI.svg) center center /  21px 21px no-repeat'
+                            }}
+                            />
+                        }
+                        title="Friend"
+                        key="Friend"
+                        dot
+                        selected={this.state.selectedTab === 'greenTab'}
+                        onPress={() => {
+                            this.setState({
+                                selectedTab: 'greenTab',
+                            });
+                        }}
+                    >
+                        {this.renderContent('Friend')}
+                    </TabBar.Item>
+                    <TabBar.Item
+                        icon={{uri: 'https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg'}}
+                        selectedIcon={{uri: 'https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg'}}
+                        title="My"
+                        key="my"
+                        selected={this.state.selectedTab === 'yellowTab'}
+                        onPress={() => {
+                            this.setState({
+                                selectedTab: 'yellowTab',
+                            });
+                        }}
+                    >
+                        {this.renderContent('My')}
+                    </TabBar.Item>
+                </TabBar>
+            </div>
+        );
+    }
+}
+
+export default Tab;
\ No newline at end of file
diff --git a/src/setupTests.js b/src/setupTests.js
deleted file mode 100644
index 74b1a27..0000000
--- a/src/setupTests.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect';