Add ant design mobile example (#1793)

* add antd-mobile example

* update antd-mobile@1.1.2

remove unsupported page

add menu to trick page

examples/with-antd-mobile/.babelrc

@@ -0,0 +1,13 @@
+{
+    "presets": [
+        "next/babel"
+    ],
+    "plugins": [
+        [
+            "import",
+            {
+                "libraryName": "antd-mobile"
+            }
+        ]
+    ]
+}

examples/with-antd-mobile/README.md

@@ -0,0 +1,28 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-material-ui)
+# Ant Design Mobile example
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/zeit/next.js):
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-antd-mobile
+cd with-antd-mobile
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
+
+```bash
+now
+```
+
+## The idea behind the example
+
+This example features how you use [antd-mobile](https://github.com/ant-design/ant-design-mobile) (Ant Design Mobile FrontEnd Framwork) with Next.js.

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

@@ -0,0 +1,16 @@
+import React, { Component } from 'react'
+import { LocaleProvider } from 'antd-mobile'
+import enUS from 'antd-mobile/lib/locale-provider/en_US'
+
+export default class Layout extends Component {
+  render () {
+    const { language, children } = this.props
+    const locale = language.substr(0, 2) === 'en' ? enUS : undefined
+
+    return (
+      <LocaleProvider locale={locale}>
+        {children}
+      </LocaleProvider>
+    )
+  }
+}

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

@@ -0,0 +1,44 @@
+import React, { Component } from 'react'
+import Router from 'next/router'
+import { TabBar, Icon } from 'antd-mobile'
+
+export default class MenuBar extends Component {
+  render () {
+    const {
+      pathname,
+      children
+    } = this.props
+
+    return (
+      <TabBar>
+        {tabBarData.map(({ title, icon, selectedIcon, link, dot, component: Component }) => (
+          <TabBar.Item
+            key={link}
+            title={title}
+            icon={<Icon type={icon} />}
+            selectedIcon={<Icon type={selectedIcon} />}
+            selected={pathname === link}
+            onPress={() => Router.push(link)}
+          >
+            {children}
+          </TabBar.Item>
+        ))}
+      </TabBar>
+    )
+  }
+}
+
+const tabBarData = [
+  {
+    title: 'Home',
+    icon: 'koubei-o',
+    selectedIcon: 'koubei',
+    link: '/home'
+  },
+  {
+    title: 'Trick',
+    icon: 'check-circle-o',
+    selectedIcon: 'check-circle',
+    link: '/trick'
+  }
+]

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

@@ -0,0 +1,54 @@
+const path = require('path')
+const fs = require('fs')
+const requireHacker = require('require-hacker')
+
+function setupRequireHacker () {
+  requireHacker.resolver((filename, module) => {
+    if (filename.endsWith('/style/css')) {
+      return requireHacker.resolve(`${filename}.web.js`, module)
+    }
+  })
+
+  requireHacker.hook('js', filename => {
+    if (
+      filename.endsWith('.web.js') ||
+      !filename.includes('/node_modules/') ||
+      ['antd-mobile', 'rc-swipeout', 'rmc-picker'].every(p => !filename.includes(p))
+    ) return
+
+    const webjs = filename.replace(/\.js$/, '.web.js')
+    if (!fs.existsSync(webjs)) return
+
+    return fs.readFileSync(webjs, { encoding: 'utf8' })
+  })
+
+  requireHacker.hook('css', () => '')
+
+  requireHacker.hook('svg', filename => {
+    return requireHacker.to_javascript_module_source(fs.readFileSync(filename, { encoding: 'utf8' }))
+  })
+}
+
+setupRequireHacker()
+
+function moduleDir (m) {
+  return path.dirname(require.resolve(`${m}/package.json`))
+}
+
+module.exports = {
+  webpack: (config, { dev }) => {
+    config.resolve.extensions = ['.web.js', '.js', '.json']
+
+    config.module.rules.push(
+      {
+        test: /\.(svg)$/i,
+        loader: 'svg-sprite-loader',
+        include: [
+          moduleDir('antd-mobile')
+        ]
+      }
+    )
+
+    return config
+  }
+}

examples/with-antd-mobile/package.json

@@ -0,0 +1,16 @@
+{
+  "dependencies": {
+    "antd-mobile": "^1.1.2",
+    "babel-plugin-import": "^1.1.1",
+    "next": "latest",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
+    "require-hacker": "^3.0.0",
+    "svg-sprite-loader": "~0.3.0"
+  },
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  }
+}

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

@@ -0,0 +1,18 @@
+import Document, { Head, Main, NextScript } from 'next/document'
+
+export default class extends Document {
+  render () {
+    return (
+      <html>
+        <Head>
+          <script src='/static/hd.min.js' />
+          <link rel='stylesheet' type='text/css' href='//unpkg.com/antd-mobile/dist/antd-mobile.min.css' />
+        </Head>
+        <body style={{margin: 0}}>
+          <Main />
+          <NextScript />
+        </body>
+      </html>
+    )
+  }
+}

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

@@ -0,0 +1,54 @@
+import React, {Component} from 'react'
+import {
+  WhiteSpace, WingBlank,
+  NavBar, Icon, Pagination, Steps
+} 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}
+        >
+          <NavBar
+            leftContent='back'
+            mode='light'
+            onLeftClick={() => console.log('onLeftClick')}
+            rightContent={[
+              <Icon key='0' type='search' style={{ marginRight: '0.32rem' }} />,
+              <Icon key='1' type='ellipsis' />
+            ]}
+          >
+            NavBar
+          </NavBar>
+          <WhiteSpace />
+          <Pagination total={5} current={0} />
+          <WhiteSpace />
+          <WingBlank>
+            <Steps current={1}>
+              <Steps.Step title='Finished' description='Most components has supported' />
+              <Steps.Step title='In Progress' description='Switch Modal and Menu' />
+              <Steps.Step title='Waiting' description='1.2.0' />
+            </Steps>
+          </WingBlank>
+        </MenuBar>
+      </Layout>
+    )
+  }
+}

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

@@ -0,0 +1,9 @@
+import { Component } from 'react'
+
+export default class Index extends Component {
+  static async getInitialProps ({ res }) {
+    res.setHeader('Location', '/home')
+    res.statusCode = 302
+    res.end()
+  }
+}

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

@@ -0,0 +1,122 @@
+import React, { Component } from 'react'
+import {
+  WhiteSpace,
+  List, Switch, Modal, Button, Menu
+} from 'antd-mobile'
+import Layout from '../components/Layout'
+import MenuBar from '../components/MenuBar'
+
+export default class Trick extends Component {
+  static getInitialProps ({ req }) {
+    const language = req ? req.headers['accept-language'] : navigator.language
+    const userAgent = req ? req.headers['user-agent'] : navigator.userAgent
+    const android = /android/i.test(userAgent)
+    const platform = android ? 'android' : 'ios'
+
+    return {
+      language,
+      platform
+    }
+  }
+
+  constructor (props) {
+    super(props)
+
+    this.menuData = [
+      {
+        label: 'Menu 1',
+        value: '1',
+        children: [
+          {
+            label: 'Submenu 1-1',
+            value: '11'
+          },
+          {
+            label: 'Submenu 1-2',
+            value: '12'
+          }
+        ]
+      },
+      {
+        label: 'Menu 2',
+        value: '2',
+        children: [
+          {
+            label: 'Submenu 2-1',
+            value: '21'
+          },
+          {
+            label: 'Submenu 2-2',
+            value: '22'
+          },
+          {
+            label: 'Submenu 2-3',
+            value: '23'
+          }
+        ]
+      }
+    ]
+
+    this.state = {
+      switchChecked: true,
+      modalOpened: false
+    }
+  }
+
+  render () {
+    const {
+      language,
+      platform,
+      url: { pathname }
+    } = this.props
+
+    const {
+      switchChecked,
+      modalOpened
+    } = this.state
+
+    return (
+      <Layout language={language}>
+        <MenuBar
+          pathname={pathname}
+        >
+          <WhiteSpace />
+          <List renderHeader={() => 'Switch and Modal platform prop is required in SSR mode'}>
+            <List.Item
+              extra={
+                <Switch
+                  platform={platform}
+                  checked={switchChecked}
+                  onChange={val => this.setState({ switchChecked: val })}
+                />
+              }
+            >
+              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}
+              data={this.menuData}
+            />
+          </List>
+        </MenuBar>
+      </Layout>
+    )
+  }
+}

examples/with-antd-mobile/static/hd.min.js

@@ -0,0 +1,2 @@
+!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=a/2*s*n+"px"},e.exports=t["default"]}]);
+flex(100, 1);