react-translatable-input
Version:
A ReactJS input component that manages multiple languages
3 lines (1 loc) • 6.12 kB
JavaScript
;Object.defineProperty(exports,'__esModule',{value:!0});var _typeof='function'==typeof Symbol&&'symbol'==typeof Symbol.iterator?function(obj){return typeof obj}:function(obj){return obj&&'function'==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?'symbol':typeof obj};var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,'value'in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){return protoProps&&defineProperties(Constructor.prototype,protoProps),staticProps&&defineProperties(Constructor,staticProps),Constructor}}();var _react=require('react'),_react2=_interopRequireDefault(_react),_reactSelect=require('react-select'),_reactSelect2=_interopRequireDefault(_reactSelect);require('react-select/dist/react-select.css');require('flag-icon-css/css/flag-icon.min.css');var _languageTags=require('language-tags'),_languageTags2=_interopRequireDefault(_languageTags);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError('Cannot call a class as a function')}function _possibleConstructorReturn(self,call){if(!self)throw new ReferenceError('this hasn\'t been initialised - super() hasn\'t been called');return call&&('object'==typeof call||'function'==typeof call)?call:self}function _inherits(subClass,superClass){if('function'!=typeof superClass&&null!==superClass)throw new TypeError('Super expression must either be null or a function, not '+typeof superClass);subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,enumerable:!1,writable:!0,configurable:!0}}),superClass&&(Object.setPrototypeOf?Object.setPrototypeOf(subClass,superClass):subClass.__proto__=superClass)}var propTypes={lang:_react.PropTypes.string.isRequired,values:_react.PropTypes.object.isRequired,textarea:_react.PropTypes.bool,onLanguageChange:_react.PropTypes.func,onValueChange:_react.PropTypes.func,onKeyDown:_react.PropTypes.func,placeholder:_react.PropTypes.string,classes:_react.PropTypes.string,disabled:_react.PropTypes.bool,showLanguageName:_react.PropTypes.bool,langTranslator:_react.PropTypes.func};var TranslatableInput=function(_Component){function TranslatableInput(a){_classCallCheck(this,TranslatableInput);var _this=_possibleConstructorReturn(this,(TranslatableInput.__proto__||Object.getPrototypeOf(TranslatableInput)).call(this,a));return _this.state={isFocused:!1},_this.state={isFocused:!1},_this}return _inherits(TranslatableInput,_Component),_createClass(TranslatableInput,[{key:'keyPressed',value:function keyPressed(a){var b=this.props.onKeyDown;'function'==typeof b&&b(a)}},{key:'changeLanguage',value:function changeLanguage(a){var b=this.props.onLanguageChange;'function'==typeof b&&b(a.value)}},{key:'changeValue',value:function changeValue(a){var _props=this.props,b=_props.onValueChange,c=_props.lang;'function'==typeof b&&b(a,c)}},{key:'focused',value:function focused(a){this.setState({isFocused:a})}},{key:'renderFlag',value:function renderFlag(a){var _props2=this.props,b=_props2.showLanguageName,c=_props2.langTranslator,d=(0,_languageTags2.default)(a.value),f='';if(!1===d.valid()){var j='function'==typeof c?c('default'):'default';return _react2.default.createElement('div',null,_react2.default.createElement('div',{className:'flag-icon flag-icon-default',title:a.value}),b?_react2.default.createElement('div',{className:'language-name',title:j},j):null)}var g='function'==typeof c?c(a.value):a.value,h='default',i=void 0;return'object'==_typeof(d.find('region'))?h=d.find('region').data.subtag:'object'==_typeof(d.find('language'))?(h=d.find('language').data.subtag,i=d.find('language').data.subtag):i='default',void 0!=i&&(f='flag-icon-lang-default flag-icon-lang-'+i+' '),f+='flag-icon flag-icon-'+h,_react2.default.createElement('div',null,_react2.default.createElement('div',{className:f,title:a.value}),b?_react2.default.createElement('div',{className:'language-name',title:g},g):null)}},{key:'render',value:function render(){var _this2=this,_props3=this.props,a=_props3.values,b=_props3.lang,c=_props3.classes,d=_props3.showLanguageName,f=_props3.textarea,g=this.state.isFocused,h=Object.keys(a).filter(function(j){return(0,_languageTags2.default)(j).valid()}).map(function(j){return{label:j,value:j}});a.hasOwnProperty('default')&&h.unshift({label:'default',value:'default'});var i='TranslatableInput';return g&&(i+=' is-focused'),d&&(i+=' has-language-name'),f&&(i+=' uses-textarea'),'string'==typeof c&&(i+=' '+c),_react2.default.createElement('div',{className:i},_react2.default.createElement(_reactSelect2.default,{value:b,options:h,valueRenderer:function valueRenderer(j){return _this2.renderFlag(j)},optionRenderer:function optionRenderer(j){return _this2.renderFlag(j)},onChange:function onChange(j){return _this2.changeLanguage(j)},searchable:!1,clearable:!1,disabled:this.props.disabled,onFocus:function onFocus(){return _this2.focused(!0)},onBlur:function onBlur(){return _this2.focused(!1)}}),f?_react2.default.createElement('textarea',{type:'text',value:a[b],onChange:function onChange(j){return _this2.changeValue(j.target.value)},onKeyDown:function onKeyDown(j){return _this2.keyPressed(j)},placeholder:this.props.placeholder,disabled:this.props.disabled,onFocus:function onFocus(){return _this2.focused(!0)},onBlur:function onBlur(){return _this2.focused(!1)}}):_react2.default.createElement('input',{type:'text',value:a[b],onChange:function onChange(j){return _this2.changeValue(j.target.value)},onKeyDown:function onKeyDown(j){return _this2.keyPressed(j)},placeholder:this.props.placeholder,disabled:this.props.disabled,onFocus:function onFocus(){return _this2.focused(!0)},onBlur:function onBlur(){return _this2.focused(!1)}}))}}]),TranslatableInput}(_react.Component);TranslatableInput.propTypes=propTypes;exports.default=TranslatableInput;