Merge pull request #49 from agentlab/feat/modif

Modify AddRDF form
agentlab · Apr 10, 2019 · 5fcf52f · 5fcf52f
2 parents 05dfe0f + 8e084b5
commit 5fcf52f
Showing 1 changed file with 66 additions and 45 deletions.
diff --git a/src/AddRDF.stories.js b/src/AddRDF.stories.js
@@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react';
 import 'antd/dist/antd.css';
 import './index.css';
 
-import { Form, Input, Button, Checkbox,Select, Radio, Layout } from 'antd';
+import { Form, Input, Button, Upload, Checkbox,Select, Radio, Layout, Icon } from 'antd';
 
 
   const { TextArea } = Input;
@@ -27,57 +27,78 @@ import { Form, Input, Button, Checkbox,Select, Radio, Layout } from 'antd';
             } ;
 
       return (
-          <div>
-        <Form layout={formLayout}>
-            <Form.Item  id = "base" {...formItemLayout} label= "Base URI: ">
-
-                 <Layout>
-                    <Input readOnly style={{ width:  '50%'}} ></Input> 
-                    <Checkbox> use base URI as context identifier </Checkbox>
-                 </Layout>
+        <div>
+          <Form layout={formLayout}>
+            <Form.Item id="base" {...formItemLayout} label="Base URI: ">
+              <Layout>
+                <Input readOnly style={{ width: "50%" }} />
+                <Checkbox> use base URI as context identifier </Checkbox>
+              </Layout>
             </Form.Item>
-
-            <Form.Item id = "context" {...formItemLayout} label="Context:">
-                 <Input readOnly style={{ width:  '50%' }} ></Input> 
-            </Form.Item> 
-
-            <Form.Item id = "dataFormat" {...formItemLayout} label="Data format:" >
-                <Layout>
-                <Select defaultValue="(autodetect)" style={{ width: 120 }}>
-                    <Option value="(autodetect)">(autodetect)</Option>
-                    <Option value="N-Triples">N-Triples</Option>
-                    <Option value="RDF/XML">RDF/XML</Option>
-                    <Option value="Turtle">Turtle</Option>
-                </Select>
-                <Radio>Location of the RDF data you wish to upload</Radio> 
-                </Layout>
-            </Form.Item>  
-
-
-            <Form.Item id = "RDFdataUrl" {...formItemLayout} label="RDF Data URL:">
-                <Layout>
-                 <Input readOnly style={{ width:  '50%' }} ></Input>
-                 <Radio>Select the file containing the RDF data you wish to upload</Radio> 
-                 </Layout>
-            </Form.Item> 
 
+            <Form.Item id="context" {...formItemLayout} label="Context:">
+              <Input readOnly style={{ width: "50%" }} />
+            </Form.Item>
 
-            <Form.Item id = "RDFdataFile" {...formItemLayout} label="RDF Data File:">
-                <Layout>
-                <Button style={{ width:  '30%' }} >Выберете файл</Button> 
-                <Radio>Enter the RDF data you wish to upload</Radio>
-                </Layout>
-            </Form.Item> 
+            <Form.Item
+              id="dataFormat"
+              {...formItemLayout}
+              label="Data format:"
+            >
+              <Layout>
+                <Select
+                  defaultValue="(autodetect)"
+                  style={{ width: 120 }}
+                >
+                  <Option value="(autodetect)">(autodetect)</Option>
+                  <Option value="N-Triples">N-Triples</Option>
+                  <Option value="RDF/XML">RDF/XML</Option>
+                  <Option value="Turtle">Turtle</Option>
+                </Select>
+                <Radio>Location of the RDF data you wish to upload</Radio>
+              </Layout>
+            </Form.Item>
 
+            <Form.Item
+              id="RDFdataUrl"
+              {...formItemLayout}
+              label="RDF Data URL:"
+            >
+              <Layout>
+                <Input readOnly style={{ width: "50%" }} />
+                <Radio>
+                  Select the file containing the RDF data you wish to
+                  upload
+                </Radio>
+              </Layout>
+            </Form.Item>
 
-            <Form.Item id = "RDFcontent" {...formItemLayout} label="RDF Content:">
-                <Layout>
-                <TextArea  readOnly rows={4} style={{ width:  '50%' }} />
-                <Button style={{ width:  '30%' }}>Upload</Button>
-                </Layout>
+            <Form.Item label="RDF Data File: " {...formItemLayout}>
+              {
+                <Upload
+                  name="logo"
+                  action="/upload.do"
+                  listType="picture"
+                >
+                  <Button>
+                    <Icon type="upload" /> Click to upload
+                  </Button>
+                </Upload>
+              }
+              <Checkbox>Enter the RDF data you wish to upload</Checkbox>
             </Form.Item>
 
-        </Form>
+            <Form.Item
+              id="RDFcontent"
+              {...formItemLayout}
+              label="RDF Content:"
+            >
+              <Layout>
+                <TextArea readOnly rows={4} style={{ width: "50%" }} />
+                <Button style={{ width: "30%" }}>Upload</Button>
+              </Layout>
+            </Form.Item>
+          </Form>
         </div>
       );
     }