Merge branch 'master' of github.com:ant-design/ant-design-mobile

ant-design · Sep 21, 2016 · 2f76536 · 2f76536
2 parents bf921bb + b6253fb
commit 2f76536
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 109 deletions.
diff --git a/components/list/demo/align.md b/components/list/demo/align.md
@@ -1,12 +1,12 @@
 ---
-order: 3
+order: 2
 title: 对齐方式
 ---
 
 双行列表
 
 ````jsx
-import { List, Button } from 'antd-mobile';
+import { List } from 'antd-mobile';
 
 const Brief = List.Item.Brief;
 
@@ -16,7 +16,7 @@ ReactDOM.render(
       renderHeader={() => '对齐'}
     >
       <List.Item
-        extra={<div>内容内容<Brief>辅助文字内容</Brief><Brief>辅助文字内容</Brief></div>}
+        extra={<div>内容内容<Brief>辅助文字内容</Brief></div>}
         arrow="horizontal"
         onClick={() => {}}
         multipleLine
@@ -26,9 +26,12 @@ ReactDOM.render(
         arrow="horizontal"
         onClick={() => {}}
         multipleLine
-      ><div>垂直居中对齐<Brief>辅助文字内容</Brief><Brief>辅助文字内容</Brief></div></List.Item>
+      >
+        垂直居中对齐
+        <Brief>辅助文字内容</Brief>
+      </List.Item>
       <List.Item
-        extra={<div>内容内容<Brief>辅助文字内容</Brief><Brief>辅助文字内容</Brief></div>}
+        extra={<div>内容内容<Brief>辅助文字内容</Brief></div>}
         arrow="horizontal"
         align="top"
         onClick={() => {}}
@@ -41,28 +44,6 @@ ReactDOM.render(
         onClick={() => {}}
         multipleLine
       ><div>顶部对齐<Brief>辅助文字内容</Brief></div></List.Item>
-      <List.Item
-        extra={<div>内容内容<Brief>辅助文字内容</Brief></div>}
-        arrow="horizontal"
-        align="bottom"
-        onClick={() => {}}
-        multipleLine
-      >底部对齐</List.Item>
-      <List.Item
-        extra="内容内容"
-        arrow="horizontal"
-        align="bottom"
-        onClick={() => {}}
-        multipleLine
-      ><div>底部对齐<Brief>辅助文字内容</Brief></div></List.Item>
-      <List.Item
-        extra={<Button
-          size="small"
-          inline
-          onClick={() => alert(111)}
-        >按钮</Button>}
-        multipleLine
-      ><div><div>区域经理</div><Brief>可进行收款、退款、折扣管理、查看数据等操作</Brief></div></List.Item>
     </List>
   </div>
 , mountNode);

diff --git a/components/list/demo/arrow.md b/components/list/demo/arrow.md
@@ -1,5 +1,5 @@
 ---
-order: 2
+order: 1
 title: 是否带箭头/箭头方向
 ---
 
@@ -29,38 +29,33 @@ ReactDOM.render(
     <List
       renderHeader={() => '箭头方向'}
     >
-      <List.Item extra="horizontal,箭头向右" arrow="horizontal" onClick={() => {}}>标题文字</List.Item>
-      <List.Item extra="down,箭头向下" arrow="down" onClick={() => {}}>标题文字</List.Item>
-      <List.Item extra="up,箭头向上" arrow="up" onClick={() => {}}>标题文字</List.Item>
       <List.Item
-        extra={<div>内容内容<List.Item.Brief>辅助文字内容</List.Item.Brief></div>}
+        extra="箭头向右"
         arrow="horizontal"
         onClick={() => {}}
-        multipleLine
-      >标题文字<List.Item.Brief>辅助文字内容</List.Item.Brief></List.Item>
+      >
+        标题文字
+      </List.Item>
       <List.Item
-        extra={<div>内容内容<List.Item.Brief>辅助文字内容</List.Item.Brief></div>}
+        extra="箭头向下"
         arrow="down"
         onClick={() => {}}
-        multipleLine
-      >标题文字<List.Item.Brief>辅助文字内容</List.Item.Brief></List.Item>
+      >
+        标题文字
+      </List.Item>
       <List.Item
-        extra={<div>内容内容<List.Item.Brief>辅助文字内容</List.Item.Brief></div>}
+        extra="箭头向上"
         arrow="up"
-        error
         onClick={() => {}}
-        multipleLine
-      >标题文字<List.Item.Brief>辅助文字内容</List.Item.Brief></List.Item>
+      >
+        标题文字
+      </List.Item>
       <List.Item
-        extra="empty,有箭头坑位"
+        extra="有箭头坑位"
         arrow="empty"
-        onClick={() => {}}
-        multipleLine
       >内容内容</List.Item>
       <List.Item
-        extra="校验报错"
-        error
-        onClick={() => {}}
+        extra="没有箭头坑位"
       >内容内容</List.Item>
     </List>
   </div>

diff --git a/components/list/demo/basic.md b/components/list/demo/basic.md
@@ -1,5 +1,5 @@
 ---
-order: 1
+order: 0
 title: 基本
 ---
 
@@ -16,31 +16,20 @@ let ListExample = React.createClass({
         renderHeader={() => '我是华丽丽的列表头部'}
         renderFooter={() => '我是列表尾部'}
       >
-        <List.Item>没有设置onClick则点击无反馈，文字超长则隐藏</List.Item>
+        <List.Item>标题文字点击无反馈，文字超长则隐藏</List.Item>
         <List.Item wrap>文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行文字超长折行</List.Item>
         <List.Item
           onClick={() => {}}
           extra={undefined}
         >标题文字</List.Item>
         <List.Item
-          extra="内容内容"
+          extra="右边内容"
           onClick={() => {}}
           arrow="horizontal"
         >标题文字</List.Item>
-      </List>
-      <List
-        renderHeader={() => '下拉框'}
-      >
-        <List.Item
-          extra={<select style={{ direction: 'rtl' }} defaultValue="2">
-            <option value="1">选项1</option>
-            <option value="2">选项2</option>
-            <option value="3" disabled>选项3不可选</option>
-          </select>}
-          arrow="horizontal"
-        >下拉框</List.Item>
         <List.Item
           arrow="horizontal"
+          onClick={() => {}}
         >
           <select defaultValue="3">
             <option value="1">选项1</option>
@@ -56,15 +45,10 @@ let ListExample = React.createClass({
           thumb="https://zos.alipayobjects.com/rmsportal/zotStpFiYpNtZNl.png"
           arrow="horizontal"
           onClick={() => {}}
-        >thumb</List.Item>
+        >缩略图</List.Item>
         <List.Item
           thumb="https://zos.alipayobjects.com/rmsportal/zotStpFiYpNtZNl.png"
-        >thumb</List.Item>
-        <List.Item
-          icon=""
-          extra={<img src="https://zos.alipayobjects.com/rmsportal/zotStpFiYpNtZNl.png" width="28" height="28" />}
-          arrow="horizontal"
-        >extra为img标签</List.Item>
+        >缩略图</List.Item>
       </List>
     </form>);
   },

diff --git a/components/list/demo/extra.md b/components/list/demo/extra.md
@@ -0,0 +1,48 @@
+---
+order: 3
+title: Extra
+---
+
+双行列表
+
+````jsx
+import { List, Button } from 'antd-mobile';
+
+const Brief = List.Item.Brief;
+
+ReactDOM.render(
+  <div>
+    <List
+      renderHeader={() => 'Extra'}
+    >
+      <List.Item
+        onClick={() => {}}
+        extra={<select style={{ direction: 'rtl' }} defaultValue="2">
+          <option value="1">选项1</option>
+          <option value="2">选项2</option>
+          <option value="3" disabled>选项3不可选</option>
+        </select>}
+        arrow="horizontal"
+      >下拉框</List.Item>
+      <List.Item
+        onClick={() => {}}
+        extra={<img src="https://zos.alipayobjects.com/rmsportal/zotStpFiYpNtZNl.png" />}
+        arrow="horizontal"
+      >
+        extra为img标签
+      </List.Item>
+      <List.Item
+        extra={<Button
+          size="small"
+          inline
+          onClick={() => alert('点击了按钮')}
+        >按钮</Button>}
+        multipleLine
+      >
+        区域经理
+        <Brief>可进行收款、退款、折扣管理、查看数据等操作</Brief>
+      </List.Item>
+    </List>
+  </div>
+, mountNode);
+````
diff --git a/components/list/demo/form.md b/components/list/demo/form.md
@@ -1,5 +1,5 @@
 ---
-order: 0
+order: 5
 title: 列表项类表单组件大集合(rc-form的基础用法请查看源码)
 ---
 
@@ -43,7 +43,7 @@ let BasicInput = React.createClass({
   },
   onReset() {
     this.props.form.resetFields();
-    alert('重制完成');
+    alert('重置完成');
   },
   validateAccount(rule, value, callback) {
     if (value && value.length > 4) {

diff --git a/components/list/demo/memberdetail.md b/components/list/demo/memberdetail.md
@@ -15,65 +15,54 @@ ReactDOM.render(
         extra="鹿港小镇"
         arrow="horizontal"
         onClick={() => {}}
-      >所属门店</List.Item>
+      >
+        所属门店
+      </List.Item>
       <List.Item
         extra="张三"
         arrow="empty"
-        onClick={() => {}}
-      >员工姓名</List.Item>
+      >
+        员工姓名
+      </List.Item>
       <List.Item
         extra="收银员"
         arrow="empty"
-        onClick={() => {}}
-      >员工角色</List.Item>
+      >
+        员工角色
+      </List.Item>
       <List.Item
         extra="13838383756"
         arrow="empty"
-        onClick={() => {}}
-      >员工手机</List.Item>
+      >
+        员工手机
+      </List.Item>
       <List.Item
         extra="只可退自己的"
         arrow="empty"
-        onClick={() => {}}
-      >退款权限</List.Item>
+      >
+        退款权限
+      </List.Item>
       <List.Item
         extra="其他权限"
         arrow="horizontal"
         onClick={() => {}}
-      >文本信息</List.Item>
+      >
+        权限说明
+      </List.Item>
       <List.Item
         extra={<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAAm0lEQVR4Ae2Whw0DMQwD5Q24gfbfRTslaPlGCGb6vyAe2tdzty1uArAlyz2RMgJLoggsSTUBfUwCSkD49jKCFnhgYegCaZgSIAGlokCHBDk1BR6YspMteHIfRqWbhMc714Y/aMF/Bdgw5mJh5HgmU2u2qITatEAQCEvCe53cp+v3T9ct0E92HH01bcGlBIEVRfDWMGUBU0aQ04I7BEwkp1QhR1sAAAAASUVORK5CYII=" />}
         arrow="horizontal"
         onClick={() => {}}
-      >员工二维码</List.Item>
-      <List.Item
-        extra={<div>zhifubao@alipay.com#<List.Item.Brief>001</List.Item.Brief></div>}
-        arrow="horizontal"
-        onClick={() => {}}
-        multipleLine
-      >垂直居中对齐</List.Item>
-      <List.Item
-        extra={<div>zhifubao@alipay.com#<List.Item.Brief>001</List.Item.Brief></div>}
-        arrow="horizontal"
-        align="top"
-        onClick={() => {}}
-        multipleLine
-      >顶部对齐</List.Item>
-      <List.Item
-        extra={<div>zhifubao@alipay.com#<List.Item.Brief>001</List.Item.Brief></div>}
-        arrow="horizontal"
-        align="bottom"
-        onClick={() => {}}
-        multipleLine
-      >底部对齐</List.Item>
+      >
+        员工二维码
+      </List.Item>
       <List.Item
-        extra={<div>zhifubao@alipay.com#<List.Item.Brief>001</List.Item.Brief></div>}
         arrow="horizontal"
-        align="top"
         onClick={() => {}}
-        multipleLine
         wrap
-      >文字超长折行文字超长折行</List.Item>
+      >
+        文字超长折行文字超长折行文字超长折行文字超长折行
+      </List.Item>
     </List>
   </div>
 , mountNode);

diff --git a/components/list/index.web.tsx b/components/list/index.web.tsx
@@ -3,7 +3,7 @@ import Item from './ListItem';
 import classNames from 'classnames';
 import { ListProps } from './ListPropTypes';
 
-class List extends React.Component<ListProps, any> {
+export default class List extends React.Component<ListProps, any> {
   static Item = Item;
 
   static defaultProps = {
@@ -26,5 +26,3 @@ class List extends React.Component<ListProps, any> {
     );
   }
 }
-
-export default List;