dtd/lib/anchor/Anchor.js

根据数梦工场视觉规范打造的组件库，感谢react-components和ant design

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var _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),_react=require("react"),React=_interopRequireWildcard(_react),_reactDom=require("react-dom"),ReactDOM=_interopRequireWildcard(_reactDom),_propTypes=require("prop-types"),PropTypes=_interopRequireWildcard(_propTypes),_classnames=require("classnames"),_classnames2=_interopRequireDefault(_classnames),_addEventListener=require("rc-util/lib/Dom/addEventListener"),_addEventListener2=_interopRequireDefault(_addEventListener),_affix=require("../affix"),_affix2=_interopRequireDefault(_affix),_getScroll=require("../_util/getScroll"),_getScroll2=_interopRequireDefault(_getScroll),_getRequestAnimationFrame=require("../_util/getRequestAnimationFrame"),_getRequestAnimationFrame2=_interopRequireDefault(_getRequestAnimationFrame);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}}function getDefaultTarget(){return window}function getOffsetTop(e){if(!e)return 0;if(!e.getClientRects().length)return 0;var t=e.getBoundingClientRect();if(t.width||t.height){var r=e.ownerDocument.documentElement;return t.top-r.clientTop}return t.top}function easeInOutCubic(e,t,r,n){var i=r-t;return(e/=n/2)<1?i/2*e*e*e+t:i/2*((e-=2)*e*e+2)+t}var reqAnimFrame=(0,_getRequestAnimationFrame2.default)(),sharpMatcherRegx=/#([^#]+)$/;function scrollTo(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:0,r=arguments[2],n=3<arguments.length&&void 0!==arguments[3]?arguments[3]:function(){},i=(0,_getScroll2.default)(r(),!0),a=sharpMatcherRegx.exec(e);if(a){var l=document.getElementById(a[1]);if(l){var o=getOffsetTop(l),s=i+o-t,u=Date.now();reqAnimFrame(function e(){var t=Date.now()-u;window.scrollTo(window.pageXOffset,easeInOutCubic(t,i,s,450)),t<450?reqAnimFrame(e):n()}),history.pushState(null,"",e)}}}var Anchor=function(e){function t(e){(0,_classCallCheck3.default)(this,t);var a=(0,_possibleConstructorReturn3.default)(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return a.handleScroll=function(){if(!a.animating){var e=a.props,t=e.offsetTop,r=e.bounds;a.setState({activeLink:a.getCurrentAnchor(t,r)})}},a.handleScrollTo=function(e){var t=a.props,r=t.offsetTop,n=t.target,i=void 0===n?getDefaultTarget:n;a.animating=!0,a.setState({activeLink:e}),scrollTo(e,r,i,function(){a.animating=!1})},a.updateInk=function(){if("undefined"!=typeof document){var e=a.props.prefixCls,t=ReactDOM.findDOMNode(a).getElementsByClassName(e+"-link-title-active")[0];t&&(a.inkNode.style.top=t.offsetTop+t.clientHeight/2-4.5+"px")}},a.saveInkNode=function(e){a.inkNode=e},a.state={activeLink:null},a.links=[],a}return(0,_inherits3.default)(t,e),(0,_createClass3.default)(t,[{key:"getChildContext",value:function(){var r=this;return{antAnchor:{registerLink:function(e){r.links.includes(e)||r.links.push(e)},unregisterLink:function(e){var t=r.links.indexOf(e);-1!==t&&r.links.splice(t,1)},activeLink:this.state.activeLink,scrollTo:this.handleScrollTo}}}},{key:"componentDidMount",value:function(){var e=this.props.target||getDefaultTarget;this.scrollEvent=(0,_addEventListener2.default)(e(),"scroll",this.handleScroll),this.handleScroll()}},{key:"componentWillUnmount",value:function(){this.scrollEvent&&this.scrollEvent.remove()}},{key:"componentDidUpdate",value:function(){this.updateInk()}},{key:"getCurrentAnchor",value:function(){var i=0<arguments.length&&void 0!==arguments[0]?arguments[0]:0,a=1<arguments.length&&void 0!==arguments[1]?arguments[1]:5;if("undefined"==typeof document)return"";var l=[];return this.links.forEach(function(e){var t=sharpMatcherRegx.exec(e.toString());if(t){var r=document.getElementById(t[1]);if(r&&getOffsetTop(r)<i+a){var n=getOffsetTop(r);l.push({link:e,top:n})}}}),l.length?l.reduce(function(e,t){return t.top>e.top?t:e}).link:""}},{key:"render",value:function(){var e=this.props,t=e.prefixCls,r=e.className,n=void 0===r?"":r,i=e.style,a=e.offsetTop,l=e.affix,o=e.showInkInFixed,s=e.children,u=this.state.activeLink,c=(0,_classnames2.default)(t+"-ink-ball",{visible:u}),f=(0,_classnames2.default)(n,t+"-wrapper"),p=(0,_classnames2.default)(t,{fixed:!l&&!o}),d=(0,_extends3.default)({maxHeight:a?"calc(100vh - "+a+"px)":"100vh"},i),h=React.createElement("div",{className:f,style:d},React.createElement("div",{className:p},React.createElement("div",{className:t+"-ink"},React.createElement("span",{className:c,ref:this.saveInkNode})),s));return l?React.createElement(_affix2.default,{offsetTop:a},h):h}}]),t}(React.Component);(exports.default=Anchor).defaultProps={prefixCls:"dt-anchor",affix:!0,showInkInFixed:!1},Anchor.childContextTypes={antAnchor:PropTypes.object},module.exports=exports.default;