More elegant application of antd (#2840)

* Update .babelrc * Create index.js * Update index.js * Update index.js * Update README.md * Update README.md * Update README.md * Update README.md * Fix linting errors

More elegant application of antd (#2840)
* Update .babelrc * Create index.js * Update index.js * Update index.js * Update README.md * Update README.md * Update README.md * Update README.md * Fix linting errors
ace748dc · starriv · Tim Neutkens · aa096257 · ace748dc · ace748dc
3 changed file
--- a/examples/with-ant-design/.babelrc
+++ b/examples/with-ant-design/.babelrc
 {
-  "presets": [
+  "presets": ["next/babel"],
-    "next/babel"
-  ],
  "plugins": [
-    ["import", {
+    "transform-decorators-legacy",
-      "libraryName": "antd"
+    [
-    }]
+      "import",
+      {
+        "libraryName": "antd",
+        "style": false
+      }
+    ]
  ]
 }
--- a/examples/with-ant-design/index.js
+++ b/examples/with-ant-design/index.js
+import Head from 'next/head'
+export default ({ children }) =>
+  <div>
+    <Head>
+      <meta name='viewport' content='width=device-width, initial-scale=1' />
+      <meta charSet='utf-8' />
+      <link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/antd/2.9.3/antd.min.css' />
+    </Head>
+    <style jsx global>{`
+      body {
+      }
+    `}</style>
+    {children}
+  </div>
--- a/examples/with-ant-design/pages/index.js
+++ b/examples/with-ant-design/pages/index.js
-import Head from 'next/head'
+import Layout from '../index.js'
 import { Form, Select, InputNumber, DatePicker, Switch, Slider, Button, LocaleProvider } from 'antd'
 import enUS from 'antd/lib/locale-provider/en_US'
@@ -6,69 +6,68 @@ const FormItem = Form.Item
 const Option = Select.Option
 export default () => (
-  <LocaleProvider locale={enUS}>
+  <Layout>
-    <div style={{ marginTop: 100 }}>
+    <LocaleProvider locale={enUS}>
-      <Head>
+      <div style={{ marginTop: 100 }}>
-        <link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/antd/2.9.3/antd.min.css' />
+        <Form layout='horizontal'>
-      </Head>
+          <FormItem
-      <Form layout='horizontal'>
+            label='Input Number'
-        <FormItem
+            labelCol={{ span: 8 }}
-          label='Input Number'
+            wrapperCol={{ span: 8 }}
-          labelCol={{ span: 8 }}
-          wrapperCol={{ span: 8 }}
        >
-          <InputNumber size='large' min={1} max={10} style={{ width: 100 }} defaultValue={3} name='inputNumber' />
+            <InputNumber size='large' min={1} max={10} style={{ width: 100 }} defaultValue={3} name='inputNumber' />
-          <a href='#'>Link</a>
+            <a href='#'>Link</a>
-        </FormItem>
+          </FormItem>
-        <FormItem
+          <FormItem
-          label='Switch'
+            label='Switch'
-          labelCol={{ span: 8 }}
+            labelCol={{ span: 8 }}
-          wrapperCol={{ span: 8 }}
+            wrapperCol={{ span: 8 }}
        >
-          <Switch defaultChecked name='switch' />
+            <Switch defaultChecked name='switch' />
-        </FormItem>
+          </FormItem>
-        <FormItem
+          <FormItem
-          label='Slider'
+            label='Slider'
-          labelCol={{ span: 8 }}
+            labelCol={{ span: 8 }}
-          wrapperCol={{ span: 8 }}
+            wrapperCol={{ span: 8 }}
        >
-          <Slider defaultValue={70} />
+            <Slider defaultValue={70} />
-        </FormItem>
+          </FormItem>
-        <FormItem
+          <FormItem
-          label='Select'
+            label='Select'
-          labelCol={{ span: 8 }}
+            labelCol={{ span: 8 }}
-          wrapperCol={{ span: 8 }}
+            wrapperCol={{ span: 8 }}
        >
-          <Select size='large' defaultValue='lucy' style={{ width: 192 }} name='select'>
+            <Select size='large' defaultValue='lucy' style={{ width: 192 }} name='select'>
-            <Option value='jack'>jack</Option>
+              <Option value='jack'>jack</Option>
-            <Option value='lucy'>lucy</Option>
+              <Option value='lucy'>lucy</Option>
-            <Option value='disabled' disabled>disabled</Option>
+              <Option value='disabled' disabled>disabled</Option>
-            <Option value='yiminghe'>yiminghe</Option>
+              <Option value='yiminghe'>yiminghe</Option>
-          </Select>
+            </Select>
-        </FormItem>
+          </FormItem>
-        <FormItem
+          <FormItem
-          label='DatePicker'
+            label='DatePicker'
-          labelCol={{ span: 8 }}
+            labelCol={{ span: 8 }}
-          wrapperCol={{ span: 8 }}
+            wrapperCol={{ span: 8 }}
        >
-          <DatePicker name='startDate' />
+            <DatePicker name='startDate' />
-        </FormItem>
+          </FormItem>
-        <FormItem
+          <FormItem
-          style={{ marginTop: 48 }}
+            style={{ marginTop: 48 }}
-          wrapperCol={{ span: 8, offset: 8 }}
+            wrapperCol={{ span: 8, offset: 8 }}
        >
-          <Button size='large' type='primary' htmlType='submit'>
+            <Button size='large' type='primary' htmlType='submit'>
            OK
          </Button>
-          <Button size='large' style={{ marginLeft: 8 }}>
+            <Button size='large' style={{ marginLeft: 8 }}>
            Cancel
          </Button>
-        </FormItem>
+          </FormItem>
-      </Form>
+        </Form>
-    </div>
+      </div>
-  </LocaleProvider>
+    </LocaleProvider>
+  </Layout>
 )