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

components/accordion/demo/accordion.md

@@ -17,7 +17,7 @@ const AccordionExmple = React.createClass({
       <div style={{ marginTop: 10, marginBottom: 10 }}>
         <Accordion accordion openAnimation={{}} className="my-accordion">
           <Accordion.Panel header="标题一">
-            <List>
+            <List className="my-list">
               <List.Item>子内容一</List.Item>
               <List.Item>子内容二</List.Item>
               <List.Item>子内容三</List.Item>
@@ -39,4 +39,10 @@ ReactDOM.render(<AccordionExmple />, mountNode);
 .my-accordion .pad .am-accordion-content-box {
   padding: 0.2rem;
 }
+.my-accordion .my-list .am-list-body {
+  border-top: 0;
+}
+.my-accordion .my-list .am-list-body:after {
+  border-bottom: 0;
+}
 ````

components/accordion/demo/basic.md

@@ -17,7 +17,7 @@ const AccordionExmple = React.createClass({
       <div style={{ marginTop: 10, marginBottom: 10 }}>
         <Accordion defaultActiveKey="0" className="my-accordion">
           <Accordion.Panel header="标题一">
-            <List>
+            <List className="my-list">
               <List.Item>子内容一</List.Item>
               <List.Item>子内容二</List.Item>
               <List.Item>子内容三</List.Item>
@@ -39,4 +39,10 @@ ReactDOM.render(<AccordionExmple />, mountNode);
 .my-accordion .pad .am-accordion-content-box {
   padding: 0.2rem;
 }
+.my-accordion .my-list .am-list-body {
+  border-top: 0;
+}
+.my-accordion .my-list .am-list-body:after {
+  border-bottom: 0;
+}
 ````

components/accordion/style/index.less

@@ -48,6 +48,7 @@
       .@{accordionPrefixCls}-content-box {
         font-size: @font-size-subhead;
         color: @color-text-paragraph;
+        position: relative;
         .hairline-bottom(@border-color-base);
       }
       &.@{accordionPrefixCls}-content-inactive {

components/button/demo/basic.md

@@ -20,7 +20,7 @@ const ButtonExample = React.createClass({
         <Button className="btn" icon={require('!svg-sprite!./reload.svg')}>本地图标</Button>
 
         <div style={{ height: '0.16rem' }} />
-        <Button className="btn" activeStyle={false}>无点击反馈</Button>
+        {/* <Button className="btn" activeStyle={false}>无点击反馈</Button> */}
         <Button className="btn" activeStyle={{ backgroundColor: 'red' }}>自定义点击反馈 style</Button>
 
         <p style={{ margin: 10, color: '#999' }}>inline / small</p>

components/date-picker/demo/basic.md

@@ -51,6 +51,7 @@ let Test = React.createClass({
     const { getFieldProps } = this.props.form;
     return (<div>
       <List
+        className="date-picker-list"
         renderHeader={() => '选择时间'}
         style={{ backgroundColor: 'white' }}
       >
@@ -129,3 +130,8 @@ Test = createForm()(Test);
 
 ReactDOM.render(<Test />, mountNode);
 ````
+````css
+.date-picker-list .am-list-item .am-list-line .am-list-extra {
+  flex-basis: initial;
+}
+````

components/list-view/Indexed.web.tsx

@@ -11,12 +11,13 @@ export default class MIndexedList extends React.Component<tsPropsType, any> {
     listViewPrefixCls: 'am-list-view',
   };
   render() {
+    const { prefixCls, listPrefixCls } = this.props;
     const { restProps, extraProps } = handleProps(this.props, true);
     return (
       <IndexedList
         ref="indexedList"
-        sectionHeaderClassName="am-indexed-list-section-header am-list-body"
-        sectionBodyClassName="am-indexed-list-section-body am-list-body"
+        sectionHeaderClassName={`${prefixCls}-section-header ${listPrefixCls}-body`}
+        sectionBodyClassName={`${prefixCls}-section-body ${listPrefixCls}-body`}
         {...restProps}
         {...extraProps}
       >{this.props.children}</IndexedList>

components/list-view/PropsType.tsx

@@ -2,7 +2,10 @@ interface Props {
   children?: any;
   refreshControl?: any;
   /** web only */
+  className?: string;
   prefixCls?: string;
+  listPrefixCls?: string;
+  listViewPrefixCls?: string;
   useZscroller?: boolean;
 }
 

components/list-view/demo/basic-sticky.md

@@ -143,6 +143,9 @@ const Demo = React.createClass({
           // topOffset: -43,
           // isActive: false, // 关闭 sticky 效果
         }}
+        stickyContainerProps={{
+          className: 'for-stickyContainer-demo',
+        }}
       />
     );
   },

components/list-view/demo/basic.md

@@ -34,6 +34,15 @@ const NUM_SECTIONS = 5;
 const NUM_ROWS_PER_SECTION = 5;
 let pageIndex = 0;
 
+function MyBody(props) {
+  return (
+    <div className="am-list-body my-body">
+      <span style={{ display: 'none' }}>you can custom body wrap element</span>
+      {props.children}
+    </div>
+  );
+}
+
 const Demo = React.createClass({
   getInitialState() {
     const getSectionData = (dataBlob, sectionID) => dataBlob[sectionID];
@@ -137,6 +146,7 @@ const Demo = React.createClass({
         renderSectionHeader={(sectionData) => (
           <div>{`任务 ${sectionData.split(' ')[1]}`}</div>
         )}
+        renderBodyComponent={() => <MyBody />}
         renderRow={row}
         renderSeparator={separator}
         className="fortest"

components/list-view/demo/idxed-sticky.md

@@ -73,7 +73,7 @@ const Demo = React.createClass({
         dataSource={this.state.dataSource}
         renderHeader={() => <span>头部内容请自定义</span>}
         renderFooter={() => <span>尾部内容请自定义</span>}
-        renderSectionHeader={(sectionData) => (<div>{sectionData}</div>)}
+        renderSectionHeader={(sectionData) => (<div className="ih">{sectionData}</div>)}
         renderRow={(rowData) => (<Item>{rowData}</Item>)}
         className="am-list"
         stickyHeader

components/list-view/demo/idxed.md

@@ -50,7 +50,7 @@ const Demo = React.createClass({
         dataSource={this.state.dataSource}
         renderHeader={() => <span>头部内容请自定义</span>}
         renderFooter={() => <span>尾部内容请自定义</span>}
-        renderSectionHeader={(sectionData) => (<div>{sectionData}</div>)}
+        renderSectionHeader={(sectionData) => (<div className="ih">{sectionData}</div>)}
         renderRow={(rowData) => (<Item>{rowData}</Item>)}
         className="fortest"
         style={{

components/list-view/handleProps.tsx

@@ -6,16 +6,15 @@ import List from '../list';
 const { Item } = List;
 
 export default function handleProps(props, isIndexed) {
-  let [{ renderHeader, renderFooter, renderSectionHeader, renderRow }, restProps] =
-    splitObject(props, ['renderHeader', 'renderFooter', 'renderSectionHeader', 'renderRow']);
+  let [{ renderHeader, renderFooter, renderSectionHeader, renderBodyComponent }, restProps] =
+    splitObject(props, ['renderHeader', 'renderFooter', 'renderSectionHeader', 'renderBodyComponent']);
   const listPrefixCls = props.listPrefixCls;
 
   const extraProps = {
     renderHeader: null as any,
     renderFooter: null as any,
     renderSectionHeader: null as any,
-    renderBodyComponent: () => <div className={`${listPrefixCls}-body`} />,
-    renderRow,
+    renderBodyComponent: renderBodyComponent || (() => <div className={`${listPrefixCls}-body`} />),
   };
   if (renderHeader) {
     extraProps.renderHeader =
@@ -28,9 +27,9 @@ export default function handleProps(props, isIndexed) {
   if (renderSectionHeader) {
     extraProps.renderSectionHeader = isIndexed ?
       (sectionData, sectionID) => (<div>
-        <Item>{renderSectionHeader(sectionData, sectionID) }</Item>
+        <Item prefixCls={listPrefixCls}>{renderSectionHeader(sectionData, sectionID) }</Item>
       </div>) :
-      (sectionData, sectionID) => <Item>{renderSectionHeader(sectionData, sectionID)}</Item>;
+      (sectionData, sectionID) => <Item prefixCls={listPrefixCls}>{renderSectionHeader(sectionData, sectionID)}</Item>;
   }
   return { restProps, extraProps };
 }

components/list-view/index.md

@@ -35,7 +35,7 @@ english: ListView
 - useBodyScroll (boolean, false) - 使用 html 的 `body` 作为滚动容器
 - stickyHeader (boolean, false) - 固定区块标题到页面顶部 (注意: 设置后会自动使用 html 的 `body` 作为滚动容器)
     - 开启 sticky 后还可以设置 stickyProps / stickyContainerProps (详见 [react-sticky](https://github.com/captivationsoftware/react-sticky))
-- renderBodyComponent (function, () => React.Element) - 渲染自定义的 body 组件
+- renderBodyComponent (function, () => React.Element) - 自定义 body 的包裹组件
 - renderSectionBodyWrapper (function, (sectionID: any) => React.Element) - 渲染自定义的区块包裹组件
 - useZscroller (boolean, false) - 使用 zscroller 来模拟实现滚动容器 (可用于一些低端 Android 机上)
     - 注意：开启后`useBodyScroll`和`stickyHeader`设置会自动被忽略

components/popover/style/base.less

@@ -27,10 +27,10 @@
   position: absolute;
   width: @popover-arrow-width;
   height: @popover-arrow-width;
-  border-top: @border-width-sm solid @border-color-base;
-  border-left: @border-width-sm solid @border-color-base;
-  border-bottom: 0;
-  border-right: 0;
+  // border-top: @border-width-sm solid @border-color-base;
+  // border-left: @border-width-sm solid @border-color-base;
+  // border-bottom: 0;
+  // border-right: 0;
   background-color: @fill-base;
   transform: rotate(45deg);
   z-index: 0;

components/popover/style/index.less

@@ -11,6 +11,7 @@
   // border: @border-width-sm solid @border-color-base;
   border-radius: @radius-sm;
   box-shadow: 0 0 4px @color-shadow;
+  overflow: hidden; // for popover item active background color not overflow
 }
 
 .@{popoverPrefixCls} .@{popoverPrefixCls}-item {