.code-box-demo .ant-popover-wrap > a {
margin-right: 1em;
}
+.code-box-demo .ant-btn {
+ margin-right: 1em;
+ margin-bottom: 1em;
+}
diff --git a/components/popover/demo/placement.md b/components/popover/demo/placement.md
index 3c282d1e31ac719c63c3a0a34a620f3041814be3..5937b4f6dab691e8ff1255cef958fcb55e5ae727 100644
--- a/components/popover/demo/placement.md
+++ b/components/popover/demo/placement.md
@@ -2,7 +2,7 @@
- order: 1
-位置有四个方向。
+位置有十二个方向。
---
@@ -16,23 +16,51 @@ const content =
;
ReactDOM.render(
-
+
+
+
+
-
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
, document.getElementById('components-popover-demo-placement'));
````
diff --git a/components/popover/index.jsx b/components/popover/index.jsx
index 2ba5c222ecfcb059ae2e311a5b6f70366046fe8d..24f685bde6ab1737663dbe591f5c1daba3b3f7d4 100644
--- a/components/popover/index.jsx
+++ b/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,47 @@ export default React.createClass({
overlayStyle: {}
};
},
- render() {
- const overlay =
-
- {this.props.title}
-
-
- {this.props.overlay}
-
-
;
+ 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 (
+ ref="tooltip"
+ {...this.props}
+ overlay={this.getOverlay()}>
{this.props.children}
);
- }
+ },
+
+ getPopupDomNode() {
+ return this.refs.tooltip.refs.trigger.popupDomNode;
+ },
+
+ getOverlay() {
+ return
+
+ {this.props.title}
+
+
+ {this.props.overlay}
+
+
;
+ },
});
+
+export default Popover;
diff --git a/components/popover/index.md b/components/popover/index.md
index 0135ea0efb3e3ae466892214aa2025503b8bcb99..4aeb957fe94e1425c68e5a63c927ded83f90e9de 100644
--- a/components/popover/index.md
+++ b/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 | 无 |
diff --git a/package.json b/package.json
index 74a0466225483a9f9e1cd2c599ce3960cc69231a..e4bea49c4107d3b5144f16d929a4c1ddc2441e74 100644
--- a/package.json
+++ b/package.json
@@ -83,6 +83,7 @@
"eslint-config-airbnb": "^0.1.0",
"eslint-plugin-babel": "^2.1.1",
"eslint-plugin-react": "^3.3.1",
+ "expect.js": "~0.3.1",
"extract-text-webpack-plugin": "^0.8.1",
"gh-pages": "^0.3.1",
"jest-cli": "~0.6.1",
@@ -105,7 +106,7 @@
"clean": "rm -rf _site dist",
"deploy": "rm -rf node_modules && node scripts/install.js && npm run just-deploy",
"just-deploy": "npm run clean && webpack --config webpack.deploy.config.js && NODE_ENV=PRODUCTION nico build && node scripts/deploy.js",
- "lint": "eslint components index.js --ext '.js,.jsx'",
+ "lint": "eslint components test index.js --ext '.js,.jsx'",
"test": "npm run lint && webpack && npm run jest",
"jest": "jest",
"pub": "sh ./scripts/publish.sh",
diff --git a/style/components/popover.less b/style/components/popover.less
index f990e90d21ce6915602301dc35c647d247cc9df6..3f80d2243d1b940fc630cf91257f4c617234ae1d 100644
--- a/style/components/popover.less
+++ b/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%;
+ }
+
}
diff --git a/tests/popover.test.js b/tests/popover.test.js
new file mode 100644
index 0000000000000000000000000000000000000000..1fe285f5ab318d92b23b18dd2cfbd69d71bef1f8
--- /dev/null
+++ b/tests/popover.test.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import expect from 'expect.js';
+import TestUtils from 'react-addons-test-utils';
+
+jest.dontMock('../components/popover/index');
+
+const Popover = require('../components/popover/index');
+
+describe('Popover', function() {
+ it.only('should show overlay when trigger is clicked', () => {
+ const popover = TestUtils.renderIntoDocument(
+
+ show me your code
+
+ );
+
+ expect(popover.getPopupDomNode()).to.be(undefined);
+
+ TestUtils.Simulate.click(
+ TestUtils.findRenderedDOMComponentWithTag(popover, 'a')
+ );
+
+ const popup = popover.getPopupDomNode();
+ expect(popup).not.to.be(undefined);
+ expect(popup.className).to.contain('ant-popover-placement-top');
+ expect(popup.innerHTML).to.match(/
code<\/div>/);
+ expect(popup.innerHTML).to.match(/
console\.log\('hello world'\)<\/div>/);
+ });
+});