update with-antd-mobile example (#2403)

add support custom svg

remove expire tricks

examples/with-antd-mobile/components/MenuBar.js

@@ -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'
   }
 ]

examples/with-antd-mobile/next.config.js

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

examples/with-antd-mobile/package.json

@@ -1,14 +1,14 @@
 {
   "name": "with-antd-mobile",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "dependencies": {
-    "antd-mobile": "^1.1.2",
+    "antd-mobile": "1.4.0",
-    "babel-plugin-import": "^1.1.1",
+    "babel-plugin-import": "^1.2.1",
     "next": "latest",
-    "react": "^15.5.4",
+    "react": "^15.6.1",
-    "react-dom": "^15.5.4",
+    "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",

examples/with-antd-mobile/pages/icon.js

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

examples/with-antd-mobile/pages/trick.js

@@ -1,8 +1,5 @@
 import React, { Component } from 'react'
-import {
+import { WhiteSpace, List, Switch, Menu } from 'antd-mobile'
-  WhiteSpace,
-  List, Switch, Modal, Button, 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) {
+  componentWillMount () {
-    super(props)
-
     this.menuData = [
       {
         label: 'Menu 1',
@@ -58,8 +53,7 @@ export default class Trick extends Component {
     ]
 
     this.state = {
-      switchChecked: true,
+      switchChecked: true
-      modalOpened: false
     }
   }
 
@@ -71,8 +65,7 @@ export default class Trick extends Component {
     } = this.props
 
     const {
-      switchChecked,
+      switchChecked
-      modalOpened
     } = 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}

examples/with-antd-mobile/static/reload.svg

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