From 1705fd262a928f1e316ddc2abf5de3cc7b99f65c Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 29 Feb 2016 12:10:36 +0800 Subject: [PATCH 1/2] update code style --- components/affix/index.jsx | 48 ++++++++++++++++++------------------- style/components/affix.less | 1 + 2 files changed, 25 insertions(+), 24 deletions(-) diff --git a/components/affix/index.jsx b/components/affix/index.jsx index 0c8eb35f65..0d6314c24f 100644 --- a/components/affix/index.jsx +++ b/components/affix/index.jsx @@ -1,13 +1,13 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import rcUtil from 'rc-util'; +import { Dom } from 'rc-util'; import classNames from 'classnames'; function getScroll(w, top) { let ret = w[`page${top ? 'Y' : 'X'}Offset`]; - let method = `scroll${top ? 'Top' : 'Left'}`; + const method = `scroll${top ? 'Top' : 'Left'}`; if (typeof ret !== 'number') { - let d = w.document; + const d = w.document; // ie6,7,8 standard mode ret = d.documentElement[method]; if (typeof ret !== 'number') { @@ -19,42 +19,42 @@ function getScroll(w, top) { } function getOffset(element) { - let rect = element.getBoundingClientRect(); - let body = document.body; - let clientTop = element.clientTop || body.clientTop || 0; - let clientLeft = element.clientLeft || body.clientLeft || 0; - let scrollTop = getScroll(window, true); - let scrollLeft = getScroll(window); + const rect = element.getBoundingClientRect(); + const body = document.body; + const clientTop = element.clientTop || body.clientTop || 0; + const clientLeft = element.clientLeft || body.clientLeft || 0; + const scrollTop = getScroll(window, true); + const scrollLeft = getScroll(window); return { top: rect.top + scrollTop - clientTop, - left: rect.left + scrollLeft - clientLeft + left: rect.left + scrollLeft - clientLeft, }; } -let Affix = React.createClass({ +const Affix = React.createClass({ getDefaultProps() { return { - offset: 0 + offset: 0, }; }, propTypes: { - offset: React.PropTypes.number + offset: React.PropTypes.number, }, getInitialState() { return { affix: false, - affixStyle: null + affixStyle: null, }; }, handleScroll() { - let affix = this.state.affix; - let scrollTop = getScroll(window, true); - let elemOffset = getOffset(ReactDOM.findDOMNode(this)); + const affix = this.state.affix; + const scrollTop = getScroll(window, true); + const elemOffset = getOffset(ReactDOM.findDOMNode(this)); if (!affix && (elemOffset.top - this.props.offset) < scrollTop) { this.setState({ @@ -62,22 +62,22 @@ let Affix = React.createClass({ affixStyle: { top: this.props.offset, left: elemOffset.left, - width: ReactDOM.findDOMNode(this).offsetWidth - } + width: ReactDOM.findDOMNode(this).offsetWidth, + }, }); } if (affix && (elemOffset.top - this.props.offset) > scrollTop) { this.setState({ affix: false, - affixStyle: null + affixStyle: null, }); } }, componentDidMount() { - this.scrollEvent = rcUtil.Dom.addEventListener(window, 'scroll', this.handleScroll); - this.resizeEvent = rcUtil.Dom.addEventListener(window, 'resize', this.handleScroll); + this.scrollEvent = Dom.addEventListener(window, 'scroll', this.handleScroll); + this.resizeEvent = Dom.addEventListener(window, 'resize', this.handleScroll); }, componentWillUnmount() { @@ -92,7 +92,7 @@ let Affix = React.createClass({ render() { const className = classNames({ [this.props.className]: this.props.className, - 'ant-affix': this.state.affix + 'ant-affix': this.state.affix, }); return ( @@ -102,7 +102,7 @@ let Affix = React.createClass({ ); - } + }, }); diff --git a/style/components/affix.less b/style/components/affix.less index c5e8cca7b1..0a56b4143f 100644 --- a/style/components/affix.less +++ b/style/components/affix.less @@ -1,3 +1,4 @@ .ant-affix { position: fixed; + z-index: 10; } From 73fe5cc2c3873da6986d739170690c93a39cf31d Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 29 Feb 2016 16:44:38 +0800 Subject: [PATCH 2/2] support affix bottom, close #1000 --- components/affix/demo/bottom.md | 17 +++++++++ components/affix/demo/offset.md | 2 +- components/affix/index.jsx | 63 +++++++++++++++++++++------------ components/affix/index.md | 3 +- 4 files changed, 60 insertions(+), 25 deletions(-) create mode 100644 components/affix/demo/bottom.md diff --git a/components/affix/demo/bottom.md b/components/affix/demo/bottom.md new file mode 100644 index 0000000000..72b360588f --- /dev/null +++ b/components/affix/demo/bottom.md @@ -0,0 +1,17 @@ +# 下方固定 + +- order: 2 + +固定在屏幕下方 + +--- + +````jsx +import { Affix, Button } from 'antd'; + +ReactDOM.render( + + + +, mountNode); +```` diff --git a/components/affix/demo/offset.md b/components/affix/demo/offset.md index 561c070ab1..f1aba9ccc1 100644 --- a/components/affix/demo/offset.md +++ b/components/affix/demo/offset.md @@ -10,7 +10,7 @@ import { Affix, Button } from 'antd'; ReactDOM.render( - + , mountNode); diff --git a/components/affix/index.jsx b/components/affix/index.jsx index 0d6314c24f..3e1685be28 100644 --- a/components/affix/index.jsx +++ b/components/affix/index.jsx @@ -33,43 +33,60 @@ function getOffset(element) { } const Affix = React.createClass({ - - getDefaultProps() { - return { - offset: 0, - }; - }, - propTypes: { - offset: React.PropTypes.number, + offsetTop: React.PropTypes.number, + offsetBottom: React.PropTypes.number, }, getInitialState() { return { - affix: false, affixStyle: null, }; }, handleScroll() { - const affix = this.state.affix; + let { offsetTop, offsetBottom } = this.props; const scrollTop = getScroll(window, true); const elemOffset = getOffset(ReactDOM.findDOMNode(this)); + const elemSize = { + width: ReactDOM.findDOMNode(this.refs.fixedNode).offsetWidth, + height: ReactDOM.findDOMNode(this.refs.fixedNode).offsetHeight, + }; - if (!affix && (elemOffset.top - this.props.offset) < scrollTop) { - this.setState({ - affix: true, - affixStyle: { - top: this.props.offset, - left: elemOffset.left, - width: ReactDOM.findDOMNode(this).offsetWidth, - }, - }); + const offsetMode = {}; + if (typeof offsetTop !== 'number' && typeof offsetBottom !== 'number') { + offsetMode.top = true; + offsetTop = 0; + } else { + offsetMode.top = typeof offsetTop === 'number'; + offsetMode.bottom = typeof offsetBottom === 'number'; } - if (affix && (elemOffset.top - this.props.offset) > scrollTop) { + if (scrollTop > elemOffset.top - offsetTop && offsetMode.top) { + // Fixed Top + if (!this.state.affixStyle) { + this.setState({ + affixStyle: { + position: 'fixed', + top: offsetTop, + left: elemOffset.left, + }, + }); + } + } else if (scrollTop < elemOffset.top + elemSize.height + offsetBottom - window.innerHeight && + offsetMode.bottom) { + // Fixed Bottom + if (!this.state.affixStyle) { + this.setState({ + affixStyle: { + position: 'fixed', + bottom: offsetBottom, + left: elemOffset.left, + }, + }); + } + } else if (this.state.affixStyle) { this.setState({ - affix: false, affixStyle: null, }); } @@ -92,12 +109,12 @@ const Affix = React.createClass({ render() { const className = classNames({ [this.props.className]: this.props.className, - 'ant-affix': this.state.affix, + 'ant-affix': this.state.affixStyle, }); return (
-
+
{this.props.children}
diff --git a/components/affix/index.md b/components/affix/index.md index 89c2af0c05..9c7a89f9ec 100644 --- a/components/affix/index.md +++ b/components/affix/index.md @@ -18,4 +18,5 @@ | 成员 | 说明 | 类型 | 默认值 | |-------------|----------------|--------------------|--------------| -| offset | 达到指定偏移量后触发 | Number | 0 | +| offsetTop | 距离窗口顶部达到指定偏移量后触发 | Number | | +| offsetBottom | 距离窗口底部达到指定偏移量后触发 | Number | |