@ftchinese/ftc-searchbar-react/build/index.es.js

The search bar for FTC, which is a partial of ftc-header. It is the react version.

import React from"react";import ReactDOM from"react-dom";import PropTypes from"prop-types";import classnames from"classnames";import CSSModules from"react-css-modules";function getOffsetTop(e){for(var t=e.offsetTop;e&&e.offsetParent;)t+=(e=e.offsetParent).offsetTop;return t}function getScrollTop(){var e="CSS1Compat"===(document.compatMode||"");return window.pageYOffset||e?document.documentElement.scrollTop:document.body.srcollTop}function styleInject(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}var css=".searchbar_container__2NMmP{\n  font-family:Helvetica Neue,Verdana,Arial,Hiragino Sans GB,WenQuanYi Micro Hei,Heiti SC,STHeiti,Microsoft Yahei,SimSun,sans-serif;\n  font-size:16px;\n  height:44px;\n  width:100%;\n  box-sizing:border-box;\n  background-color:#333;\n  color:#fff;\n  padding:0 10px;\n  margin:0;\n  position:absolute;\n  right:0;\n  top:0; }\n  .searchbar_container__2NMmP .searchbar_content__2WD7P{\n    width:100%;\n    height:100%;\n    position:relative; }\n  .searchbar_container__2NMmP button{\n    border:none;\n    outline:none;\n    cursor:pointer;\n    background-color:transparent;\n    padding:0; }\n  .searchbar_container__2NMmP input{\n    background-color:transparent; }\n\n.searchbar_form__1ddc8{\n  height:100%;\n  margin:0;\n  padding:0;\n  margin-right:44px;\n  position:relative; }\n  .searchbar_form__1ddc8 .searchbar_search-btn__3VLjp{\n    position:absolute;\n    left:0;\n    top:0;\n    width:44px;\n    height:44px;\n    background-position:center;\n    background-size:20px 20px;\n    background-repeat:no-repeat;\n    background-image:url(http://static.ftchinese.com/ftc-icons/svg/white/search-white.svg); }\n  .searchbar_form__1ddc8 .searchbar_input-area__2k216{\n    height:100%;\n    margin:0;\n    margin-left:44px; }\n    .searchbar_form__1ddc8 .searchbar_input-area__2k216 input{\n      width:100%;\n      height:100%;\n      border:1px solid #a7a59b;\n      color:#fff;\n      outline:none;\n      padding-left:5px;\n      font-size:16px; }\n\n.searchbar_switch-btn__1Mip6{\n  position:absolute;\n  right:0px;\n  top:0;\n  width:44px;\n  height:44px;\n  display:block;\n  background-position:center;\n  background-size:20px 20px;\n  background-repeat:no-repeat;\n  background-image:url(http://static.ftchinese.com/ftc-icons/svg/white/cross-white.svg); }\n\n.searchbar_initial-container__n2E9r{\n  width:64px; }\n  .searchbar_initial-container__n2E9r .searchbar_form__1ddc8{\n    display:none; }\n  .searchbar_initial-container__n2E9r .searchbar_switch-btn__1Mip6{\n    background-image:url(http://static.ftchinese.com/ftc-icons/svg/white/search-white.svg); }\n\n.searchbar_sticky__GV2NA{\n  position:fixed;\n  top:0; }\n",searchbar={container:"searchbar_container__2NMmP",content:"searchbar_content__2WD7P",form:"searchbar_form__1ddc8","search-btn":"searchbar_search-btn__3VLjp","input-area":"searchbar_input-area__2k216","switch-btn":"searchbar_switch-btn__1Mip6","initial-container":"searchbar_initial-container__n2E9r",sticky:"searchbar_sticky__GV2NA"};styleInject(css);var _dec,_class,_class2,_temp,classCallCheck=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},createClass=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),inherits=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},possibleConstructorReturn=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},SearchBar=(_dec=CSSModules(searchbar,{allowMultiple:!0}))((_temp=_class2=function(e){function t(e){classCallCheck(this,t);var n=possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.state={stretch:!1,sticky:!1},n.clickSearchSwitch=n.clickSearchSwitch.bind(n),n.stickyWhenScroll=n.stickyWhenScroll.bind(n),n}return inherits(t,e),createClass(t,[{key:"componentDidMount",value:function(){var e=ReactDOM.findDOMNode(this);this.offsetTop=getOffsetTop(e),this.props.sticky&&window.addEventListener("scroll",this.stickyWhenScroll)}},{key:"stickyWhenScroll",value:function(){var e=getScrollTop();this.setState({sticky:e>this.offsetTop})}},{key:"clickSearchSwitch",value:function(){this.setState(function(e){return{stretch:!e.stretch}})}},{key:"renderForm",value:function(){var e=this.props,t=e.postUrl,n=e.placeholderText;return React.createElement("form",{role:"search",styleName:"form",action:t},React.createElement("button",{styleName:"search-btn"})," ",React.createElement("p",{styleName:"input-area"},React.createElement("input",{type:"search",placeholder:n})))}},{key:"renderSwitchBtn",value:function(){return React.createElement("button",{styleName:"switch-btn",onClick:this.clickSearchSwitch})}},{key:"render",value:function(){var e=classnames({container:!0,"initial-container":!this.state.stretch,sticky:this.state.sticky});return React.createElement("div",{styleName:e},React.createElement("div",{styleName:"content"},this.renderForm(),this.renderSwitchBtn()))}}]),t}(React.Component),_class2.propTypes={postUrl:PropTypes.string.isRequired,placeholderText:PropTypes.string,sticky:PropTypes.bool},_class2.defaultProps={placeholderText:"",sticky:!1},_class=_temp))||_class;export default SearchBar;
//# sourceMappingURL=index.es.js.map