nelson
/
react-goods
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

add antdmobile

master
燕鹏 4 years ago
parent
ad3bd81d48
commit
12aaa0e889
6 changed files with 165 additions and 32 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      config-overrides.js
  2. 12
      package.json
  3. 17
      src/App.js
  4. 9
      src/App.test.js
  5. 147
      src/components/Tab.jsx
  6. 5
      src/setupTests.js

7
config-overrides.js
View File

@ -0,0 +1,7 @@
const {override, fixBabelImports} = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd-mobile',
style: 'css',
}),
);

12
package.json
View File

@ -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"
}
}

17
src/App.js
View File

@ -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>
);
}

9
src/App.test.js
View File

@ -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();
});

147
src/components/Tab.jsx
View File

@ -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;

5
src/setupTests.js
View File

@ -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';
Write Preview
Loading…
Cancel
Save