List optimize (ant-design#7736)

* add split props * add size props * add footer & header props
yzxzz · Sep 26, 2017 · c64f46c · c64f46c
1 parent 73000a2
commit c64f46c
Show file tree

Hide file tree

Showing 9 changed files with 291 additions and 64 deletions.
diff --git a/components/list/__tests__/__snapshots__/demo.test.js.snap b/components/list/__tests__/__snapshots__/demo.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`renders ./components/list/demo/basic.md correctly 1`] = `
 <div
-  class="ant-list ant-list-bordered"
+  class="ant-list ant-list-split"
 >
   <div>
     <div
@@ -44,9 +44,7 @@ exports[`renders ./components/list/demo/basic.md correctly 1`] = `
       <div
         class="ant-list-item-content"
       >
-        <div
-          style="padding:24px;"
-        >
+        <div>
           Content
         </div>
       </div>
@@ -107,9 +105,7 @@ exports[`renders ./components/list/demo/basic.md correctly 1`] = `
       <div
         class="ant-list-item-content"
       >
-        <div
-          style="padding:24px;"
-        >
+        <div>
           Content
         </div>
       </div>
@@ -170,9 +166,7 @@ exports[`renders ./components/list/demo/basic.md correctly 1`] = `
       <div
         class="ant-list-item-content"
       >
-        <div
-          style="padding:24px;"
-        >
+        <div>
           Content
         </div>
       </div>
@@ -233,9 +227,7 @@ exports[`renders ./components/list/demo/basic.md correctly 1`] = `
       <div
         class="ant-list-item-content"
       >
-        <div
-          style="padding:24px;"
-        >
+        <div>
           Content
         </div>
       </div>
@@ -275,7 +267,7 @@ exports[`renders ./components/list/demo/basic.md correctly 1`] = `
 
 exports[`renders ./components/list/demo/grid.md correctly 1`] = `
 <div
-  class="ant-list ant-list-bordered ant-list-grid"
+  class="ant-list ant-list-split ant-list-grid"
 >
   <div>
     <div
@@ -446,7 +438,7 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
 exports[`renders ./components/list/demo/infinite-load.md correctly 1`] = `
 <div>
   <div
-    class="ant-list ant-list-bordered"
+    class="ant-list ant-list-split"
   >
     <div />
   </div>
@@ -455,7 +447,7 @@ exports[`renders ./components/list/demo/infinite-load.md correctly 1`] = `
 
 exports[`renders ./components/list/demo/infinite-virtualized-load.md correctly 1`] = `
 <div
-  class="ant-list ant-list-bordered"
+  class="ant-list ant-list-split"
 >
   <div />
   <div
@@ -475,7 +467,7 @@ exports[`renders ./components/list/demo/infinite-virtualized-load.md correctly 1
 
 exports[`renders ./components/list/demo/meta.md correctly 1`] = `
 <div
-  class="ant-list ant-list-bordered"
+  class="ant-list ant-list-split"
 >
   <div>
     <div
@@ -644,7 +636,7 @@ exports[`renders ./components/list/demo/meta.md correctly 1`] = `
 
 exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
 <div
-  class="ant-list ant-list-bordered ant-list-grid"
+  class="ant-list ant-list-split ant-list-grid"
 >
   <div>
     <div
@@ -813,53 +805,186 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
 `;
 
 exports[`renders ./components/list/demo/simple.md correctly 1`] = `
-<div
-  class="ant-list ant-list-bordered"
->
-  <div>
-    <div
-      class="ant-list-item"
-    >
+<div>
+  <h3
+    style="margin:16px 0;"
+  >
+    Small Size
+  </h3>
+  <div
+    class="ant-list ant-list-sm ant-list-split ant-list-bordered"
+  >
+    <div>
       <div
-        class="ant-list-item-content ant-list-item-content-single"
+        class="ant-list-item"
       >
-        Racing car sprays burning fuel into crowd.
+        <div
+          class="ant-list-item-content ant-list-item-content-single"
+        >
+          Racing car sprays burning fuel into crowd.
+        </div>
       </div>
-    </div>
-    <div
-      class="ant-list-item"
-    >
       <div
-        class="ant-list-item-content ant-list-item-content-single"
+        class="ant-list-item"
       >
-        Japanese princess to wed commoner.
+        <div
+          class="ant-list-item-content ant-list-item-content-single"
+        >
+          Japanese princess to wed commoner.
+        </div>
       </div>
-    </div>
-    <div
-      class="ant-list-item"
-    >
       <div
-        class="ant-list-item-content ant-list-item-content-single"
+        class="ant-list-item"
       >
-        Australian walks 100km after outback crash.
+        <div
+          class="ant-list-item-content ant-list-item-content-single"
+        >
+          Australian walks 100km after outback crash.
+        </div>
+      </div>
+      <div
+        class="ant-list-item"
+      >
+        <div
+          class="ant-list-item-content ant-list-item-content-single"
+        >
+          Man charged over missing wedding girl.
+        </div>
+      </div>
+      <div
+        class="ant-list-item"
+      >
+        <div
+          class="ant-list-item-content ant-list-item-content-single"
+        >
+          Los Angeles battles huge wildfires.
+        </div>
       </div>
     </div>
+  </div>
+  <h3
+    style="margin:16px 0;"
+  >
+    Default Size
+  </h3>
+  <div
+    class="ant-list ant-list-split ant-list-bordered"
+  >
     <div
-      class="ant-list-item"
+      class="ant-list-header"
     >
+      <div>
+        Header
+      </div>
+    </div>
+    <div>
       <div
-        class="ant-list-item-content ant-list-item-content-single"
+        class="ant-list-item"
       >
-        Man charged over missing wedding girl.
+        <div
+          class="ant-list-item-content ant-list-item-content-single"
+        >
+          Racing car sprays burning fuel into crowd.
+        </div>
+      </div>
+      <div
+        class="ant-list-item"
+      >
+        <div
+          class="ant-list-item-content ant-list-item-content-single"
+        >
+          Japanese princess to wed commoner.
+        </div>
+      </div>
+      <div
+        class="ant-list-item"
+      >
+        <div
+          class="ant-list-item-content ant-list-item-content-single"
+        >
+          Australian walks 100km after outback crash.
+        </div>
+      </div>
+      <div
+        class="ant-list-item"
+      >
+        <div
+          class="ant-list-item-content ant-list-item-content-single"
+        >
+          Man charged over missing wedding girl.
+        </div>
+      </div>
+      <div
+        class="ant-list-item"
+      >
+        <div
+          class="ant-list-item-content ant-list-item-content-single"
+        >
+          Los Angeles battles huge wildfires.
+        </div>
       </div>
     </div>
     <div
-      class="ant-list-item"
+      class="ant-list-footer"
     >
+      <div>
+        Footer
+      </div>
+    </div>
+  </div>
+  <h3
+    style="margin:16px 0;"
+  >
+    Large Size
+  </h3>
+  <div
+    class="ant-list ant-list-lg ant-list-split ant-list-bordered"
+  >
+    <div>
+      <div
+        class="ant-list-item"
+      >
+        <div
+          class="ant-list-item-content ant-list-item-content-single"
+        >
+          Racing car sprays burning fuel into crowd.
+        </div>
+      </div>
+      <div
+        class="ant-list-item"
+      >
+        <div
+          class="ant-list-item-content ant-list-item-content-single"
+        >
+          Japanese princess to wed commoner.
+        </div>
+      </div>
+      <div
+        class="ant-list-item"
+      >
+        <div
+          class="ant-list-item-content ant-list-item-content-single"
+        >
+          Australian walks 100km after outback crash.
+        </div>
+      </div>
+      <div
+        class="ant-list-item"
+      >
+        <div
+          class="ant-list-item-content ant-list-item-content-single"
+        >
+          Man charged over missing wedding girl.
+        </div>
+      </div>
       <div
-        class="ant-list-item-content ant-list-item-content-single"
+        class="ant-list-item"
       >
-        Los Angeles battles huge wildfires.
+        <div
+          class="ant-list-item-content ant-list-item-content-single"
+        >
+          Los Angeles battles huge wildfires.
+        </div>
       </div>
     </div>
   </div>
@@ -868,7 +993,7 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
 
 exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
 <div
-  class="ant-list ant-list-vertical ant-list-bordered"
+  class="ant-list ant-list-vertical ant-list-split"
 >
   <div>
     <div

diff --git a/components/list/demo/basic.md b/components/list/demo/basic.md
@@ -63,7 +63,7 @@ class BasicList extends React.Component {
               title={<a href="https://ant.design">{item.title}</a>}
               description="Ant Design, a design language for background applications, is refined by Ant UED Team"
             />
-            <div style={{ padding: 24 }}>Content</div>
+            <div>Content</div>
           </List.Item>
         )}
       />

diff --git a/components/list/demo/infinite-load.md b/components/list/demo/infinite-load.md
@@ -82,7 +82,7 @@ class InfiniteListExample extends React.Component {
                 title={<a href="https://ant.design">{item.title}</a>}
                 description={item.content}
               />
-              <div style={{ padding: 24 }}>Content</div>
+              <div>Content</div>
             </List.Item>
           )}
         >

diff --git a/components/list/demo/infinite-virtualized-load.md b/components/list/demo/infinite-virtualized-load.md
@@ -86,7 +86,7 @@ class VirtualizedExample extends React.Component {
           title={<a href="https://ant.design">{item.title}</a>}
           description={item.content}
         />
-        <div style={{ padding: 24 }}>Content</div>
+        <div>Content</div>
       </List.Item>
     );
   }

diff --git a/components/list/demo/simple.md b/components/list/demo/simple.md
@@ -7,7 +7,11 @@ title:
 
 ## zh-CN
 
-最简单的列表。
+列表拥有大、中、小三种尺寸。
+
+通过设置 `size` 为 `large` `small` 分别把按钮设为大、小尺寸。若不设置 `size`，则尺寸为中。
+
+可通过设置 `header` 和 `footer`，来自定义列表头部和尾部。
 
 ## en-US
 
@@ -25,10 +29,29 @@ const data = [
 ];
 
 ReactDOM.render(
-  <List
-    itemLayout="horizontal"
-    dataSource={data}
-    renderItem={item => (<List.Item>{item}</List.Item>)}
-  />
+  <div>
+    <h3 style={{ margin: '16px 0' }}>Small Size</h3>
+    <List
+      bordered
+      dataSource={data}
+      size="small"
+      renderItem={item => (<List.Item>{item}</List.Item>)}
+    />
+    <h3 style={{ margin: '16px 0' }}>Default Size</h3>
+    <List
+      header={<div>Header</div>}
+      footer={<div>Footer</div>}
+      bordered
+      dataSource={data}
+      renderItem={item => (<List.Item>{item}</List.Item>)}
+    />
+    <h3 style={{ margin: '16px 0' }}>Large Size</h3>
+    <List
+      bordered
+      dataSource={data}
+      size="large"
+      renderItem={item => (<List.Item>{item}</List.Item>)}
+    />
+  </div>
 , mountNode);
 ````