Update with-ant-design example (#5141)

rafaelalmeidatk · timneutkens · commit 5d147a82c4a2 · 2018-09-12T17:24:37.000+02:00
There is no need to wrap every page with a component when you can use the custom document.
diff --git a/examples/with-ant-design/index.js b/examples/with-ant-design/index.js
diff --git a/examples/with-ant-design/pages/_document.js b/examples/with-ant-design/pages/_document.js
@@ -0,0 +1,19 @@
+import Document, { Head, Main, NextScript } from 'next/document'
+
+export default class MyDocument extends Document {
+  render () {
+    return (
+      <html>
+        <Head>
+          <meta name='viewport' content='width=device-width, initial-scale=1' />
+          <meta charSet='utf-8' />
+          <link rel='stylesheet' href='/_next/static/style.css' />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </html>
+    )
+  }
+}
diff --git a/examples/with-ant-design/pages/index.js b/examples/with-ant-design/pages/index.js
@@ -1,70 +1,67 @@
-import Layout from '../index.js'
 import { Form, Select, InputNumber, DatePicker, Switch, Slider, Button } from 'antd'
 
 const FormItem = Form.Item
 const Option = Select.Option
 
 export default () => (
-  <Layout>
-    <div style={{ marginTop: 100 }}>
-      <Form layout='horizontal'>
-        <FormItem
-          label='Input Number'
-          labelCol={{ span: 8 }}
-          wrapperCol={{ span: 8 }}
-        >
-          <InputNumber size='large' min={1} max={10} style={{ width: 100 }} defaultValue={3} name='inputNumber' />
-          <a href='#'>Link</a>
-        </FormItem>
+  <div style={{ marginTop: 100 }}>
+    <Form layout='horizontal'>
+      <FormItem
+        label='Input Number'
+        labelCol={{ span: 8 }}
+        wrapperCol={{ span: 8 }}
+      >
+        <InputNumber size='large' min={1} max={10} style={{ width: 100 }} defaultValue={3} name='inputNumber' />
+        <a href='#'>Link</a>
+      </FormItem>
 
-        <FormItem
-          label='Switch'
-          labelCol={{ span: 8 }}
-          wrapperCol={{ span: 8 }}
-        >
-          <Switch defaultChecked name='switch' />
-        </FormItem>
+      <FormItem
+        label='Switch'
+        labelCol={{ span: 8 }}
+        wrapperCol={{ span: 8 }}
+      >
+        <Switch defaultChecked name='switch' />
+      </FormItem>
 
-        <FormItem
-          label='Slider'
-          labelCol={{ span: 8 }}
-          wrapperCol={{ span: 8 }}
-        >
-          <Slider defaultValue={70} />
-        </FormItem>
+      <FormItem
+        label='Slider'
+        labelCol={{ span: 8 }}
+        wrapperCol={{ span: 8 }}
+      >
+        <Slider defaultValue={70} />
+      </FormItem>
 
-        <FormItem
-          label='Select'
-          labelCol={{ span: 8 }}
-          wrapperCol={{ span: 8 }}
-        >
-          <Select size='large' defaultValue='lucy' style={{ width: 192 }} name='select'>
-            <Option value='jack'>jack</Option>
-            <Option value='lucy'>lucy</Option>
-            <Option value='disabled' disabled>disabled</Option>
-            <Option value='yiminghe'>yiminghe</Option>
-          </Select>
-        </FormItem>
+      <FormItem
+        label='Select'
+        labelCol={{ span: 8 }}
+        wrapperCol={{ span: 8 }}
+      >
+        <Select size='large' defaultValue='lucy' style={{ width: 192 }} name='select'>
+          <Option value='jack'>jack</Option>
+          <Option value='lucy'>lucy</Option>
+          <Option value='disabled' disabled>disabled</Option>
+          <Option value='yiminghe'>yiminghe</Option>
+        </Select>
+      </FormItem>
 
-        <FormItem
-          label='DatePicker'
-          labelCol={{ span: 8 }}
-          wrapperCol={{ span: 8 }}
-        >
-          <DatePicker name='startDate' />
-        </FormItem>
-        <FormItem
-          style={{ marginTop: 48 }}
-          wrapperCol={{ span: 8, offset: 8 }}
-        >
-          <Button size='large' type='primary' htmlType='submit'>
-          OK
-          </Button>
-          <Button size='large' style={{ marginLeft: 8 }}>
-          Cancel
-          </Button>
-        </FormItem>
-      </Form>
-    </div>
-  </Layout>
+      <FormItem
+        label='DatePicker'
+        labelCol={{ span: 8 }}
+        wrapperCol={{ span: 8 }}
+      >
+        <DatePicker name='startDate' />
+      </FormItem>
+      <FormItem
+        style={{ marginTop: 48 }}
+        wrapperCol={{ span: 8, offset: 8 }}
+      >
+        <Button size='large' type='primary' htmlType='submit'>
+        OK
+        </Button>
+        <Button size='large' style={{ marginLeft: 8 }}>
+        Cancel
+        </Button>
+      </FormItem>
+    </Form>
+  </div>
 )
