dtd
Version:
根据数梦工场视觉规范打造的组件库，感谢react-components和ant design
1 lines • 6.37 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:!0});var _defineProperty2=require("babel-runtime/helpers/defineProperty"),_defineProperty3=_interopRequireDefault(_defineProperty2),_extends2=require("babel-runtime/helpers/extends"),_extends3=_interopRequireDefault(_extends2),_classCallCheck2=require("babel-runtime/helpers/classCallCheck"),_classCallCheck3=_interopRequireDefault(_classCallCheck2),_createClass2=require("babel-runtime/helpers/createClass"),_createClass3=_interopRequireDefault(_createClass2),_possibleConstructorReturn2=require("babel-runtime/helpers/possibleConstructorReturn"),_possibleConstructorReturn3=_interopRequireDefault(_possibleConstructorReturn2),_inherits2=require("babel-runtime/helpers/inherits"),_inherits3=_interopRequireDefault(_inherits2),_typeof2=require("babel-runtime/helpers/typeof"),_typeof3=_interopRequireDefault(_typeof2),_react=require("react"),React=_interopRequireWildcard(_react),_reactDom=require("react-dom"),ReactDOM=_interopRequireWildcard(_reactDom),_propTypes=require("prop-types"),PropTypes=_interopRequireWildcard(_propTypes),_addEventListener=require("rc-util/lib/Dom/addEventListener"),_addEventListener2=_interopRequireDefault(_addEventListener),_classnames=require("classnames"),_classnames2=_interopRequireDefault(_classnames),_shallowequal=require("shallowequal"),_shallowequal2=_interopRequireDefault(_shallowequal),_omit=require("omit.js"),_omit2=_interopRequireDefault(_omit),_getScroll=require("../_util/getScroll"),_getScroll2=_interopRequireDefault(_getScroll),_throttleByAnimationFrame=require("../_util/throttleByAnimationFrame");function _interopRequireWildcard(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t}function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var __decorate=function(e,t,r,i){var o,l=arguments.length,s=l<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,r):i;if("object"===("undefined"==typeof Reflect?"undefined":(0,_typeof3.default)(Reflect))&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,r,i);else for(var n=e.length-1;0<=n;n--)(o=e[n])&&(s=(l<3?o(s):3<l?o(t,r,s):o(t,r))||s);return 3<l&&s&&Object.defineProperty(t,r,s),s};function getTargetRect(e){return e!==window?e.getBoundingClientRect():{top:0,left:0,bottom:0}}function getOffset(e,t){var r=e.getBoundingClientRect(),i=getTargetRect(t),o=(0,_getScroll2.default)(t,!0),l=(0,_getScroll2.default)(t,!1),s=window.document.body,n=s.clientTop||0,a=s.clientLeft||0;return{top:r.top-i.top+o-n,left:r.left-i.left+l-a,width:r.width,height:r.height}}function noop(){}function getDefaultTarget(){return"undefined"!=typeof window?window:null}var Affix=function(e){function r(){(0,_classCallCheck3.default)(this,r);var t=(0,_possibleConstructorReturn3.default)(this,(r.__proto__||Object.getPrototypeOf(r)).apply(this,arguments));return t.events=["resize","scroll","touchstart","touchmove","touchend","pageshow","load"],t.eventHandlers={},t.state={affixStyle:void 0,placeholderStyle:void 0},t.saveFixedNode=function(e){t.fixedNode=e},t}return(0,_inherits3.default)(r,e),(0,_createClass3.default)(r,[{key:"setAffixStyle",value:function(e,t){var r=this,i=this.props,o=i.onChange,l=void 0===o?noop:o,s=i.target,n=void 0===s?getDefaultTarget:s,a=this.state.affixStyle,u=n()===window;"scroll"===e.type&&a&&t&&u||(0,_shallowequal2.default)(t,a)||this.setState({affixStyle:t},function(){var e=!!r.state.affixStyle;(t&&!a||!t&&a)&&l(e)})}},{key:"setPlaceholderStyle",value:function(e){var t=this.state.placeholderStyle;(0,_shallowequal2.default)(e,t)||this.setState({placeholderStyle:e})}},{key:"updatePosition",value:function(e){var t=this.props,r=t.offsetTop,i=t.offsetBottom,o=t.offset,l=t.target,s=(void 0===l?getDefaultTarget:l)();r=r||o;var n=(0,_getScroll2.default)(s,!0),a=ReactDOM.findDOMNode(this),u=getOffset(a,s),f={width:this.fixedNode.offsetWidth,height:this.fixedNode.offsetHeight},p={top:!1,bottom:!1};"number"!=typeof r&&"number"!=typeof i?(p.top=!0,r=0):(p.top="number"==typeof r,p.bottom="number"==typeof i);var d=getTargetRect(s),c=s.innerHeight||s.clientHeight;if(n>u.top-r&&p.top){var h=u.width,_=d.top+r;this.setAffixStyle(e,{position:"fixed",top:_,left:d.left+u.left,width:h}),this.setPlaceholderStyle({width:h,height:f.height})}else if(n<u.top+f.height+i-c&&p.bottom){var y=s===window?0:window.innerHeight-d.bottom,v=u.width;this.setAffixStyle(e,{position:"fixed",bottom:y+i,left:d.left+u.left,width:v}),this.setPlaceholderStyle({width:v,height:u.height})}else{var m=this.state.affixStyle;"resize"===e.type&&m&&"fixed"===m.position&&a.offsetWidth?this.setAffixStyle(e,(0,_extends3.default)({},m,{width:a.offsetWidth})):this.setAffixStyle(e,null),this.setPlaceholderStyle(null)}}},{key:"componentDidMount",value:function(){var e=this,t=this.props.target||getDefaultTarget;this.timeout=setTimeout(function(){e.setTargetEventListeners(t)})}},{key:"componentWillReceiveProps",value:function(e){this.props.target!==e.target&&(this.clearEventListeners(),this.setTargetEventListeners(e.target),this.updatePosition({}))}},{key:"componentWillUnmount",value:function(){this.clearEventListeners(),clearTimeout(this.timeout),this.updatePosition.cancel()}},{key:"setTargetEventListeners",value:function(e){var t=this,r=e();r&&(this.clearEventListeners(),this.events.forEach(function(e){t.eventHandlers[e]=(0,_addEventListener2.default)(r,e,t.updatePosition)}))}},{key:"clearEventListeners",value:function(){var r=this;this.events.forEach(function(e){var t=r.eventHandlers[e];t&&t.remove&&t.remove()})}},{key:"render",value:function(){var e=(0,_classnames2.default)((0,_defineProperty3.default)({},this.props.prefixCls||"dt-affix",this.state.affixStyle)),t=(0,_omit2.default)(this.props,["prefixCls","offsetTop","offsetBottom","target","onChange"]),r=(0,_extends3.default)({},this.state.placeholderStyle,this.props.style);return React.createElement("div",(0,_extends3.default)({},t,{style:r}),React.createElement("div",{className:e,ref:this.saveFixedNode,style:this.state.affixStyle},this.props.children))}}]),r}(React.Component);(exports.default=Affix).propTypes={offsetTop:PropTypes.number,offsetBottom:PropTypes.number,target:PropTypes.func},__decorate([(0,_throttleByAnimationFrame.throttleByAnimationFrameDecorator)()],Affix.prototype,"updatePosition",null),module.exports=exports.default;