react-font-picker
Version:
react-font-picker
1 lines • 8.56 kB
JavaScript
!function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var e;e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,e.ReactFontPicker=t()}}(function(){return function t(e,n,o){function i(a,s){if(!n[a]){if(!e[a]){var l="function"==typeof require&&require;if(!s&&l)return l(a,!0);if(r)return r(a,!0);var p=new Error("Cannot find module '"+a+"'");throw p.code="MODULE_NOT_FOUND",p}var c=n[a]={exports:{}};e[a][0].call(c.exports,function(t){var n=e[a][1][t];return i(n?n:t)},c,c.exports,t,e,n,o)}return n[a].exports}for(var r="function"==typeof require&&require,a=0;a<o.length;a++)i(o[a]);return i}({1:[function(t,e,n){(function(t){"use strict";function o(t){return t&&t.__esModule?t:{"default":t}}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function r(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(n,"__esModule",{value:!0});var a=function(){function t(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,n,o){return n&&t(e.prototype,n),o&&t(e,o),e}}(),s=function(t,e,n){for(var o=!0;o;){var i=t,r=e,a=n;o=!1,null===i&&(i=Function.prototype);var s=Object.getOwnPropertyDescriptor(i,r);if(void 0!==s){if("value"in s)return s.value;var l=s.get;if(void 0===l)return;return l.call(a)}var p=Object.getPrototypeOf(i);if(null===p)return;t=p,e=r,n=a,o=!0,s=p=void 0}},l="undefined"!=typeof window?window.React:"undefined"!=typeof t?t.React:null,p=o(l),c=function(t){function e(t){i(this,e),s(Object.getPrototypeOf(e.prototype),"constructor",this).call(this,t),this.onWrapperClick=this.onWrapperClick.bind(this),this.onOptionClick=this.onOptionClick.bind(this),this.onRipple=this.onRipple.bind(this),this.state={isOptionsVisible:!1,selectedFont:this.props.value}}return r(e,t),a(e,[{key:"componentDidMount",value:function(){for(var t=0;t<document.styleSheets.length;t++){var e=document.styleSheets[t],n=e.rules?e.rules:e.cssRules;if("undefined"!=typeof cssRule&&null!==cssRule)for(var o=0;o<n.length;++o)if(".ReactFontPicker"==n[o].selectorText)return}var i=document.createElement("style");i.innerHTML="\n\t\t\t.ReactFontPicker_Wrapper {\n\t\t\t\tposition: relative;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 30px;\n\t\t\t\tborder-bottom: 1px solid #ddd;\n\t\t\t}\n\t\t\t.ReactFontPicker_Wrapper:hover {\n\t\t\t\tcursor: pointer;\n\t\t\t}\n\t\t\t.ReactFontPicker_Label {\n\t\t\t\tposition: absolute;\n\t\t\t\tbottom: 8px;\n\t\t\t\tfont-size: 15px;\n\t\t\t\tcolor: #a0a0a0;\n\t\t\t}\n\t\t\t.ReactFontPicker_LabelFloat {\n\t\t\t\tposition: absolute;\n\t\t\t\tfont-size: 11px;\n\t\t\t\tbottom: 27px;\n\t\t\t\tcolor: #888;\n\t\t\t\t-webkit-transition: .2s all ease-in-out;\n\t\t\t\t-moz-transition: .2s all ease-in-out;\n\t\t\t\t-ms-transition: .2s all ease-in-out;\n\t\t\t\t-o-transition: .2s all ease-in-out;\n\t\t\t\ttransition: .2s all ease-in-out;\n\t\t\t}\n\t\t\t.ReactFontPicker_SelectedOption {\n\t\t\t\tposition: absolute;\n\t\t\t\theight: 25px;\n\t\t\t\tline-height: 35px;\n\t\t\t\tfont-size: 15px;\n\t\t\t}\n\t\t\t.ReactFontPicker_Button {\n\t\t\t\tposition: absolute;\n\t\t\t\tright: 5px;\n\t\t\t\ttop: 12px;\n\t\t\t\twidth: 0;\n\t\t\t\theight: 0;\n\t\t\t\tborder-style: solid;\n\t\t\t\tborder-width: 5px 6px 0 6px;\n\t\t\t\tborder-color: #dddddd transparent transparent transparent;\n\t\t\t}\n\t\t\t.ReactFontPicker_Button:hover {\n\t\t\t\tcursor: pointer;\n\t\t\t}\n\t\t\t.ReactFontPicker_Options {\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: -7.5px;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: auto;\n\t\t\t\tmax-height: 200px;\n\t\t\t\toverflow-y: scroll;\n\t\t\t\tpadding-bottom: 15px;\n\t\t\t\tpadding-top: 15px;\n\t\t\t\tfloat: left;\n\t\t\t\tbackground-color: #fff;\n\n\t\t\t\tbox-shadow: 0px 0px 6px #ddd;\n\t\t\t\tz-index: 999;\n\n\t\t\t\t-webkit-transition: .15s all ease-in-out;\n\t\t\t\t-moz-transition: .15s all ease-in-out;\n\t\t\t\t-ms-transition: .15s all ease-in-out;\n\t\t\t\t-o-transition: .15s all ease-in-out;\n\t\t\t\ttransition: .15s all ease-in-out;\n\t\t\t}\n\t\t\t.ReactFontPicker_OptionsHidden {\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: -7.5px;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 0px;\n\t\t\t\tpadding-bottom: 0;\n\t\t\t\tpadding-top: 0;\n\t\t\t\tbackground-color: #fff;\n\t\t\t\toverflow: hidden;\n\n\t\t\t\tbox-shadow: 0px 0px 6px #ddd;\n\n\t\t\t\t-webkit-transition: .15s all ease-in-out;\n\t\t\t\t-moz-transition: .15s all ease-in-out;\n\t\t\t\t-ms-transition: .15s all ease-in-out;\n\t\t\t\t-o-transition: .15s all ease-in-out;\n\t\t\t\ttransition: .15s all ease-in-out;\n\t\t\t}\n\t\t\t.ReactFontPicker_Option {\n\t\t\t\tdisplay: block;\n\t\t\t\twidth: calc(100% - 20px);\n\t\t\t\tpadding-left: 10px;\n\t\t\t\tpadding-right: 10px;\n\t\t\t\theight: 30px;\n\t\t\t\tline-height: 30px;\n\t\t\t\tfloat: left;\n\n\t\t\t\t-webkit-transition: .1s all ease-in-out;\n\t\t\t\t-moz-transition: .1s all ease-in-out;\n\t\t\t\t-ms-transition: .1s all ease-in-out;\n\t\t\t\t-o-transition: .1s all ease-in-out;\n\t\t\t\ttransition: .1s all ease-in-out;\n\t\t\t}\n\t\t\t.ReactFontPicker_Option:hover {\n\t\t\t\tbackground-color: #eee;\n\t\t\t}\n\t\t\tdiv.ReactFontPicker_Wrapper .ripple {\n\t\t\t\tposition: relative;\n\t\t\t\toverflow: hidden;\n\t\t\t}\n\t\t\tdiv.ReactFontPicker_Wrapper .ripple-effect{\n\t\t\t\tposition: absolute;\n\t\t\t\tborder-radius: 50%;\n\t\t\t\twidth: 50px;\n\t\t\t\theight: 50px;\n\t\t\t\tbackground: white;\n\t\t\t\tanimation: ripple-animation 1.8s;\n\t\t\t}\n\t\t\t@keyframes ripple-animation {\n\t\t\t\tfrom {\n\t\t\t\t\ttransform: scale(1);\n\t\t\t\t\topacity: 0.4;\n\t\t\t\t}\n\t\t\t\tto {\n\t\t\t\t\ttransform: scale(100);\n\t\t\t\t\topacity: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t\t.ReactFontPicker {\n\t\t\t\tdisplay: block;\n\t\t\t}\n\t\t",document.getElementsByTagName("head")[0].appendChild(i)}},{key:"onWrapperClick",value:function(){this.setState({isOptionsVisible:!this.state.isOptionsVisible})}},{key:"onOptionClick",value:function(t,e){t.stopPropagation(),0!=this.state.isOptionsVisible&&("function"==typeof this.props.onChange&&this.props.onChange(e),this.setState({isOptionsVisible:!1,selectedFont:e}))}},{key:"onRipple",value:function(t){t.stopPropagation();var e=t.target,n=document.createElement("div"),o=e.getBoundingClientRect(),i=t.pageX-o.left,r=t.pageY-o.top;n.classList.add("ripple-effect"),n.style.top=parseInt(r-o.height/2)+"px",n.style.left=parseInt(i-o.height)+"px",e.appendChild(n),setTimeout(function(){e.removeChild(n)},500)}},{key:"render",value:function(){var t=this,e=this.props,n=e.label,o=e.fonts,i=e.previews,r=e.activeColor,a=this.props.value||this.state.selectedFont;return p["default"].createElement("div",{className:"ReactFontPicker"},p["default"].createElement("div",{className:"ReactFontPicker_Wrapper",onClick:this.onWrapperClick},p["default"].createElement("div",{className:""===a?"ReactFontPicker_Label":"ReactFontPicker_LabelFloat"},n),p["default"].createElement("div",{className:"ReactFontPicker_SelectedOption"},a),p["default"].createElement("div",{className:"ReactFontPicker_Button"}),p["default"].createElement("div",{className:this.state.isOptionsVisible?"ReactFontPicker_Options":"ReactFontPicker_OptionsHidden"},o.map(function(e,n){var o={};return a==e&&(o.color=r),i&&(o.fontFamily=e),p["default"].createElement("div",{className:"ReactFontPicker_Option ripple",style:o,key:n,onMouseDown:function(e){return t.onRipple(e)},onMouseUp:function(n){return t.onOptionClick(n,e)},onClick:function(n){return t.onOptionClick(n,e)}},e)}))))}}]),e}(l.Component);n["default"]=c,c.propTypes={fonts:l.PropTypes.array,label:l.PropTypes.string,previews:l.PropTypes.bool,activeColor:l.PropTypes.string,value:l.PropTypes.string,onChange:l.PropTypes.func},c.defaultProps={label:"",previews:!0,fonts:["Arial","Arial Narrow","Arial Black","Courier New","Georgia","Lucida Console","Lucida Sans Unicode","Tahoma","Times New Roman","Verdana"],activeColor:"#64B5F6",value:"",onChange:function(t){console.log("FontPicker: "+t)}},n["default"]=c,e.exports=n["default"]}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[1])(1)});