mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
update with-antd-mobile example (#2403)
add support custom svg remove expire tricks
This commit is contained in:
Colder Xihk
Tim Neutkens
parent
03cad7cba5
commit
b86bbb65a6
|
|
@ -36,9 +36,15 @@ const tabBarData = [
|
|||
link: '/home'
|
||||
},
|
||||
{
|
||||
title: 'Trick',
|
||||
title: 'Icon',
|
||||
icon: 'check-circle-o',
|
||||
selectedIcon: 'check-circle',
|
||||
link: '/icon'
|
||||
},
|
||||
{
|
||||
title: 'Trick',
|
||||
icon: 'cross-circle-o',
|
||||
selectedIcon: 'cross-circle',
|
||||
link: '/trick'
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -10,10 +10,16 @@ function setupRequireHacker () {
|
|||
})
|
||||
|
||||
requireHacker.hook('js', filename => {
|
||||
if (filename.endsWith('/node_modules/hammerjs/hammer.js')) {
|
||||
return `
|
||||
module.exports = {}
|
||||
`
|
||||
}
|
||||
|
||||
if (
|
||||
filename.endsWith('.web.js') ||
|
||||
!filename.includes('/node_modules/') ||
|
||||
['antd-mobile', 'rc-swipeout', 'rmc-picker'].every(p => !filename.includes(p))
|
||||
['antd-mobile', 'rmc-picker'].every(p => !filename.includes(p))
|
||||
) return
|
||||
|
||||
const webjs = filename.replace(/\.js$/, '.web.js')
|
||||
|
|
@ -22,10 +28,9 @@ function setupRequireHacker () {
|
|||
return fs.readFileSync(webjs, { encoding: 'utf8' })
|
||||
})
|
||||
|
||||
requireHacker.hook('css', () => '')
|
||||
|
||||
requireHacker.hook('svg', filename => {
|
||||
return requireHacker.to_javascript_module_source(fs.readFileSync(filename, { encoding: 'utf8' }))
|
||||
const id = path.basename(filename).replace(/\.svg$/, '')
|
||||
return requireHacker.to_javascript_module_source(`#${id}`)
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -40,11 +45,23 @@ module.exports = {
|
|||
config.resolve.extensions = ['.web.js', '.js', '.json']
|
||||
|
||||
config.module.rules.push(
|
||||
{
|
||||
test: /\.(svg)$/i,
|
||||
loader: 'emit-file-loader',
|
||||
options: {
|
||||
name: 'dist/[path][name].[ext]'
|
||||
},
|
||||
include: [
|
||||
moduleDir('antd-mobile'),
|
||||
__dirname
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.(svg)$/i,
|
||||
loader: 'svg-sprite-loader',
|
||||
include: [
|
||||
moduleDir('antd-mobile')
|
||||
moduleDir('antd-mobile'),
|
||||
__dirname
|
||||
]
|
||||
}
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
{
|
||||
"name": "with-antd-mobile",
|
||||
"version": "1.0.0",
|
||||
"version": "1.1.0",
|
||||
"dependencies": {
|
||||
"antd-mobile": "^1.1.2",
|
||||
"babel-plugin-import": "^1.1.1",
|
||||
"antd-mobile": "1.4.0",
|
||||
"babel-plugin-import": "^1.2.1",
|
||||
"next": "latest",
|
||||
"react": "^15.5.4",
|
||||
"react-dom": "^15.5.4",
|
||||
"react": "^15.6.1",
|
||||
"react-dom": "^15.6.1",
|
||||
"require-hacker": "^3.0.0",
|
||||
"svg-sprite-loader": "~0.3.0"
|
||||
"svg-sprite-loader": "0.3.1"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "next",
|
||||
|
|
|
|||
81
examples/with-antd-mobile/pages/icon.js
Normal file
81
examples/with-antd-mobile/pages/icon.js
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
import React, { Component } from 'react'
|
||||
import { WhiteSpace, WingBlank, Card, Icon } from 'antd-mobile'
|
||||
import Layout from '../components/Layout'
|
||||
import MenuBar from '../components/MenuBar'
|
||||
|
||||
export default class Home extends Component {
|
||||
static getInitialProps ({ req }) {
|
||||
const language = req ? req.headers['accept-language'] : navigator.language
|
||||
|
||||
return {
|
||||
language
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
const {
|
||||
language,
|
||||
url: { pathname }
|
||||
} = this.props
|
||||
|
||||
return (
|
||||
<Layout language={language}>
|
||||
<MenuBar
|
||||
pathname={pathname}
|
||||
>
|
||||
<WingBlank>
|
||||
<WhiteSpace />
|
||||
<Card>
|
||||
<Card.Header
|
||||
extra='Internal svg'
|
||||
thumb={<Icon type='check' />}
|
||||
/>
|
||||
<Card.Body>
|
||||
<code>
|
||||
{`<Icon type='check' />`}
|
||||
</code>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
<WhiteSpace />
|
||||
<Card>
|
||||
<Card.Header
|
||||
extra='Custom svg'
|
||||
thumb={<Icon type={require('../static/reload.svg')} />}
|
||||
/>
|
||||
<Card.Body>
|
||||
<code>
|
||||
{`<Icon type={require('../static/reload.svg')} />`}
|
||||
</code>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
<WhiteSpace />
|
||||
<Card>
|
||||
<Card.Header
|
||||
extra='Fill color'
|
||||
thumb={
|
||||
<Icon
|
||||
type={require('../static/reload.svg')}
|
||||
style={{ fill: '#108ee9' }}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Card.Body>
|
||||
<code>{`
|
||||
<Icon
|
||||
type={require('../static/reload.svg')}
|
||||
style={{ fill: '#108ee9' }}
|
||||
/>
|
||||
`}</code>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
<style jsx>{`
|
||||
code {
|
||||
color: gray;
|
||||
}
|
||||
`}</style>
|
||||
</WingBlank>
|
||||
</MenuBar>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,5 @@
|
|||
import React, { Component } from 'react'
|
||||
import {
|
||||
WhiteSpace,
|
||||
List, Switch, Modal, Button, Menu
|
||||
} from 'antd-mobile'
|
||||
import { WhiteSpace, List, Switch, Menu } from 'antd-mobile'
|
||||
import Layout from '../components/Layout'
|
||||
import MenuBar from '../components/MenuBar'
|
||||
|
||||
|
|
@ -19,9 +16,7 @@ export default class Trick extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
componentWillMount () {
|
||||
this.menuData = [
|
||||
{
|
||||
label: 'Menu 1',
|
||||
|
|
@ -58,8 +53,7 @@ export default class Trick extends Component {
|
|||
]
|
||||
|
||||
this.state = {
|
||||
switchChecked: true,
|
||||
modalOpened: false
|
||||
switchChecked: true
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -71,8 +65,7 @@ export default class Trick extends Component {
|
|||
} = this.props
|
||||
|
||||
const {
|
||||
switchChecked,
|
||||
modalOpened
|
||||
switchChecked
|
||||
} = this.state
|
||||
|
||||
return (
|
||||
|
|
@ -81,7 +74,7 @@ export default class Trick extends Component {
|
|||
pathname={pathname}
|
||||
>
|
||||
<WhiteSpace />
|
||||
<List renderHeader={() => 'Switch and Modal platform prop is required in SSR mode'}>
|
||||
<List renderHeader={() => 'Switch platform prop is required in SSR mode'}>
|
||||
<List.Item
|
||||
extra={
|
||||
<Switch
|
||||
|
|
@ -93,22 +86,7 @@ export default class Trick extends Component {
|
|||
>
|
||||
Switch {platform}
|
||||
</List.Item>
|
||||
<Button onClick={() => this.setState({ modalOpened: true })}>
|
||||
Open {platform} modal
|
||||
</Button>
|
||||
</List>
|
||||
<Modal
|
||||
title='Modal'
|
||||
platform={platform}
|
||||
visible={modalOpened}
|
||||
transparent
|
||||
closable
|
||||
footer={[{ text: 'OK', onPress: () => this.setState({ modalOpened: false }) }]}
|
||||
onClose={() => this.setState({ modalOpened: false })}
|
||||
>
|
||||
I am a modal.<br />
|
||||
Must set platform prop
|
||||
</Modal>
|
||||
<List renderHeader={() => 'Menu height prop is required in SSR mode'}>
|
||||
<Menu
|
||||
height={500}
|
||||
|
|
|
|||
1
examples/with-antd-mobile/static/reload.svg
Normal file
1
examples/with-antd-mobile/static/reload.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><title>Share Icons Copy</title><path d="M59.177 29.5s-1.25 0-1.25 2.5c0 14.471-11.786 26.244-26.253 26.244C17.206 58.244 5.417 46.47 5.417 32c0-13.837 11.414-25.29 25.005-26.26v6.252c0 .622-.318 1.635.198 1.985a1.88 1.88 0 0 0 1.75.19l21.37-8.545c.837-.334 1.687-1.133 1.687-2.384C55.425 1.99 53.944 2 53.044 2h-21.37C15.134 2 1.667 15.46 1.667 32c0 16.543 13.467 30 30.007 30 16.538 0 29.918-13.458 29.993-30 .01-2.5-1.24-2.5-1.24-2.5h-1.25" fill-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 553 B |
Loading…
Reference in a new issue