feat: support more placement for popover

Ref #312

components/popover/demo/placement.md

@@ -2,7 +2,7 @@
 
 - order: 1
 
-位置有四个方向。
+位置有十二个方向。
 
 ---
 
@@ -16,23 +16,51 @@ const content = <div>
 </div>;
 
 ReactDOM.render(<div>
-  <Popover placement="left" title={text} overlay={content}>
+  <Popover placement="leftTop" title={text} overlay={content} trigger="click">
+    <button className="ant-btn">左上</button>
+  </Popover>
+  <Popover placement="left" title={text} overlay={content} trigger="click">
     <Button>左</Button>
   </Popover>
-  <Popover placement="top" title={text} overlay={content}>
+  <Popover placement="leftBottom" title={text} overlay={content} trigger="click">
+    <button className="ant-btn">左下</button>
+  </Popover>
+  <br/>
+  <Popover placement="topLeft" title={text} overlay={content} trigger="click">
+    <button className="ant-btn">上左</button>
+  </Popover>
+  <Popover placement="top" title={text} overlay={content} trigger="click">
     <Button>上</Button>
   </Popover>
-  <Popover placement="bottom" title={text} overlay={content}>
+  <Popover placement="topRight" title={text} overlay={content} trigger="click">
+    <button className="ant-btn">上右</button>
+  </Popover>
+  <br/>
+  <Popover placement="bottomLeft" title={text} overlay={content} trigger="click">
+    <button className="ant-btn">下左</button>
+  </Popover>
+  <Popover placement="bottom" title={text} overlay={content} trigger="click">
     <Button>下</Button>
   </Popover>
-  <Popover placement="right" title={text} overlay={content}>
+  <Popover placement="bottomRight" title={text} overlay={content} trigger="click">
+    <button className="ant-btn">下右</button>
+  </Popover>
+  <br/>
+  <Popover placement="rightTop" title={text} overlay={content} trigger="click">
+    <button className="ant-btn">右上</button>
+  </Popover>
+  <Popover placement="right" title={text} overlay={content} trigger="click">
     <Button>右</Button>
   </Popover>
+  <Popover placement="rightBottom" title={text} overlay={content} trigger="click">
+    <button className="ant-btn">右下</button>
+  </Popover>
 </div>, document.getElementById('components-popover-demo-placement'));
 ````
 
 <style>
 .code-box-demo .ant-btn {
   margin-right: 1em;
+  margin-bottom: 1em;
 }
 </style>

components/popover/index.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import Tooltip from 'rc-tooltip';
+
 const prefixCls = 'ant-popover';
 
-export default React.createClass({
+const Popover = React.createClass({
   getDefaultProps() {
     return {
       prefixCls: prefixCls,
@@ -13,28 +14,42 @@ export default React.createClass({
       overlayStyle: {}
     };
   },
-  render() {
-    const overlay = <div>
-      <div className={prefixCls + '-title'}>
-        {this.props.title}
-      </div>
-      <div className={prefixCls + '-content'}>
-        {this.props.overlay}
-      </div>
-    </div>;
 
+  render() {
     const transitionName = ({
       top: 'zoom-down',
       bottom: 'zoom-up',
       left: 'zoom-right',
-      right: 'zoom-left'
+      right: 'zoom-left',
+      topLeft: 'zoom-down',
+      bottomLeft: 'zoom-up',
+      leftTop: 'zoom-right',
+      rightTop: 'zoom-left',
+      topRight: 'zoom-down',
+      bottomRight: 'zoom-up',
+      leftBottom: 'zoom-right',
+      rightBottom: 'zoom-left',
     })[this.props.placement];
 
     return (
       <Tooltip transitionName={transitionName}
-        {...this.props} overlay={overlay}>
+               {...this.props}
+               overlay={this.getOverlay()}>
         {this.props.children}
       </Tooltip>
     );
-  }
+  },
+
+  getOverlay() {
+    return <div>
+      <div className={prefixCls + '-title'}>
+        {this.props.title}
+      </div>
+      <div className={prefixCls + '-content'}>
+        {this.props.overlay}
+      </div>
+    </div>;
+  },
 });
+
+export default Popover;

components/popover/index.md

@@ -22,5 +22,5 @@
 | trigger   | 触发行为，可选 `hover/focus/click`       | string        | hover  |
 | placement | 气泡框位置，可选 `top/left/right/bottom` | string        | top    |
 | title     | 卡片标题                                 | React.Element | 无     |
-| content   | 卡片内容                                 | React.Element | 无     |
-| overlayClassName | 浮层的类名                        | string        | 无     |
+| overlay   | 卡片内容                                 | React.Element | 无     |
+| prefixCls | 浮层的类名                        | string        | 无     |

style/components/popover.less

@@ -54,7 +54,7 @@
   }
 
   // Offset the popover to account for the popover arrow
-  &-placement-top {
+  &-placement-top, &-placement-topLeft, &-placement-topRight {
     margin-top: -@popover-arrow-width;
     padding-bottom: @popover-distance;
     &:after {
@@ -65,7 +65,7 @@
     }
   }
 
-  &-placement-right {
+  &-placement-right, &-placement-rightTop, &-placement-rightBottom {
     margin-left: @popover-arrow-width;
     padding-left: @popover-distance;
     &:after {
@@ -76,7 +76,7 @@
     }
   }
 
-  &-placement-bottom {
+  &-placement-bottom, &-placement-bottomLeft, &-placement-bottomRight {
     margin-top: @popover-arrow-width;
     padding-top: @popover-distance;
     &:after {
@@ -87,7 +87,7 @@
     }
   }
 
-  &-placement-left {
+  &-placement-left, &-placement-leftTop, &-placement-leftBottom {
     margin-left: -@popover-arrow-width;
     padding-right: @popover-distance;
     &:after {
@@ -165,7 +165,9 @@
     content: "";
   }
 
-  &-placement-top > &-arrow {
+  &-placement-top > &-arrow,
+  &-placement-topLeft > &-arrow,
+  &-placement-topRight > &-arrow {
     left: 50%;
     margin-left: -@popover-arrow-outer-width;
     border-bottom-width: 0;
@@ -179,7 +181,16 @@
       border-top-color: @popover-arrow-color;
     }
   }
-  &-placement-right > &-arrow {
+  &-placement-topLeft > &-arrow {
+    left: 15%;
+  }
+  &-placement-topRight > &-arrow {
+    left: 85%;
+  }
+
+  &-placement-right > &-arrow,
+  &-placement-rightTop > &-arrow,
+  &-placement-rightBottom > &-arrow {
     top: 50%;
     left: @popover-distance - @popover-arrow-outer-width + 1;
     margin-top: -@popover-arrow-outer-width;
@@ -193,7 +204,16 @@
       border-right-color: @popover-arrow-color;
     }
   }
-  &-placement-bottom > &-arrow {
+  &-placement-rightTop > &-arrow {
+    top: 15%;
+  }
+  &-placement-rightBottom > &-arrow {
+    top: 85%;
+  }
+
+  &-placement-bottom > &-arrow,
+  &-placement-bottomLeft > &-arrow,
+  &-placement-bottomRight > &-arrow {
     left: 50%;
     margin-left: -@popover-arrow-outer-width;
     border-top-width: 0;
@@ -207,8 +227,16 @@
       border-bottom-color: @popover-arrow-color;
     }
   }
+  &-placement-bottomLeft > &-arrow {
+    left: 15%;
+  }
+  &-placement-bottomRight > &-arrow {
+    left: 85%;
+  }
 
-  &-placement-left > &-arrow {
+  &-placement-left > &-arrow,
+  &-placement-leftTop > &-arrow,
+  &-placement-leftBottom > &-arrow {
     top: 50%;
     right: @popover-distance - @popover-arrow-outer-width + 1;
     margin-top: -@popover-arrow-outer-width;
@@ -222,4 +250,11 @@
       bottom: -@popover-arrow-width;
     }
   }
+  &-placement-leftTop > &-arrow {
+    top: 15%;
+  }
+  &-placement-leftBottom > &-arrow {
+    top: 85%;
+  }
+
 }