@ftchinese/ftc-searchbar-react
Version:
The search bar for FTC, which is a partial of ftc-header. It is the react version.
3 lines (2 loc) • 6.08 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("react-dom"),require("prop-types"),require("classnames"),require("react-css-modules")):"function"==typeof define&&define.amd?define(["react","react-dom","prop-types","classnames","react-css-modules"],t):e.FtcSearchBar=t(e.React,e.ReactDOM,e.PropTypes,e.classnames,e.CSSModules)}(this,function(e,t,n,r,a){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e,t=t&&t.hasOwnProperty("default")?t.default:t,n=n&&n.hasOwnProperty("default")?n.default:n,r=r&&r.hasOwnProperty("default")?r.default:r,a=a&&a.hasOwnProperty("default")?a.default:a;!function(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))}}(".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");var i,o,c,s=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},h=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}}(),l=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};return a({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"},{allowMultiple:!0})((c=o=function(n){function a(e){s(this,a);var t=l(this,(a.__proto__||Object.getPrototypeOf(a)).call(this,e));return t.state={stretch:!1,sticky:!1},t.clickSearchSwitch=t.clickSearchSwitch.bind(t),t.stickyWhenScroll=t.stickyWhenScroll.bind(t),t}return 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)}(a,e.Component),h(a,[{key:"componentDidMount",value:function(){var e=t.findDOMNode(this);this.offsetTop=function(e){for(var t=e.offsetTop;e&&e.offsetParent;)t+=(e=e.offsetParent).offsetTop;return t}(e),this.props.sticky&&window.addEventListener("scroll",this.stickyWhenScroll)}},{key:"stickyWhenScroll",value:function(){var e,t=(e="CSS1Compat"===(document.compatMode||""),window.pageYOffset||e?document.documentElement.scrollTop:document.body.srcollTop);this.setState({sticky:t>this.offsetTop})}},{key:"clickSearchSwitch",value:function(){this.setState(function(e){return{stretch:!e.stretch}})}},{key:"renderForm",value:function(){var t=this.props,n=t.postUrl,r=t.placeholderText;return e.createElement("form",{role:"search",styleName:"form",action:n},e.createElement("button",{styleName:"search-btn"})," ",e.createElement("p",{styleName:"input-area"},e.createElement("input",{type:"search",placeholder:r})))}},{key:"renderSwitchBtn",value:function(){return e.createElement("button",{styleName:"switch-btn",onClick:this.clickSearchSwitch})}},{key:"render",value:function(){var t=r({container:!0,"initial-container":!this.state.stretch,sticky:this.state.sticky});return e.createElement("div",{styleName:t},e.createElement("div",{styleName:"content"},this.renderForm(),this.renderSwitchBtn()))}}]),a}(),o.propTypes={postUrl:n.string.isRequired,placeholderText:n.string,sticky:n.bool},o.defaultProps={placeholderText:"",sticky:!1},i=c))||i});
//# sourceMappingURL=index.js.map