(http://belka.us)",
30 | "license": "MIT",
31 | "bugs": {
32 | "url": "https://github.com/BelkaLab/react-translatable-input/issues"
33 | },
34 | "homepage": "https://github.com/BelkaLab/react-translatable-input#readme",
35 | "dependencies": {
36 | "flag-icon-css": "^2.4.0",
37 | "language-tags": "^1.0.5",
38 | "react-select": "^1.0.0-rc"
39 | },
40 | "peerDependencies": {
41 | "react": "^15.4.1",
42 | "react-dom": "^15.4.1"
43 | },
44 | "devDependencies": {
45 | "babel-cli": "^6.18.0",
46 | "babel-eslint": "^7.0.0",
47 | "babel-preset-babili": "0.0.8",
48 | "babel-preset-es2015": "^6.16.0",
49 | "babel-preset-react": "^6.16.0",
50 | "cross-env": "^3.1.3",
51 | "stylus": "^0.54.5",
52 | "eslint": "^3.8.1",
53 | "eslint-config-airbnb": "^12.0.0",
54 | "eslint-plugin-import": "^1.16.0",
55 | "eslint-plugin-jsx-a11y": "^2.2.2",
56 | "eslint-plugin-react": "^6.3.0"
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/src/TranslatableInput.js:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line import/no-unresolved, import/extensions
2 | import React, { Component, PropTypes } from 'react';
3 | import Select from 'react-select';
4 | import 'react-select/dist/react-select.css';
5 | import 'flag-icon-css/css/flag-icon.min.css';
6 | import tags from 'language-tags';
7 |
8 | const propTypes = {
9 | lang: PropTypes.string.isRequired, // The current editing language
10 | values: PropTypes.object.isRequired, // The object containing the translated strings
11 | textarea: PropTypes.bool, // Use a textarea for a multi-line input?
12 |
13 | onLanguageChange: PropTypes.func, // Callback on language selection
14 | onValueChange: PropTypes.func, // Callback on text entered
15 | onKeyDown: PropTypes.func, // Callback on keydown when text input is focused
16 |
17 | placeholder: PropTypes.string, // The placeholder to show when the input field is empty
18 | classes: PropTypes.string, // Additional HTML classes to pass to the component
19 | disabled: PropTypes.bool, // Is the component disabled?
20 | showLanguageName: PropTypes.bool, // Show the language name label next to the flag?
21 | langTranslator: PropTypes.func // Translate iso langage codes to language names
22 | };
23 |
24 | class TranslatableInput extends Component {
25 | constructor(props) {
26 | super(props);
27 |
28 | this.state = {
29 | isFocused: false
30 | };
31 | }
32 |
33 | keyPressed(e) {
34 | const { onKeyDown } = this.props;
35 |
36 | if (typeof (onKeyDown) === 'function') {
37 | onKeyDown(e);
38 | }
39 | }
40 |
41 | changeLanguage(lang) {
42 | const { onLanguageChange } = this.props;
43 |
44 | if (typeof (onLanguageChange) === 'function') {
45 | onLanguageChange(lang.value);
46 | }
47 | }
48 |
49 | changeValue(value) {
50 | const { onValueChange, lang } = this.props;
51 |
52 | if (typeof (onValueChange) === 'function') {
53 | onValueChange(value, lang);
54 | }
55 | }
56 |
57 | focused(isFocused) {
58 | this.setState({
59 | isFocused
60 | });
61 | }
62 |
63 | renderFlag(option) {
64 | const { showLanguageName, langTranslator } = this.props;
65 | const tag = tags(option.value);
66 | let langClasses = '';
67 |
68 | if (tag.valid() === false) {
69 | // the default language
70 | const defaultName = typeof (langTranslator) === 'function' ? langTranslator('default') : 'default';
71 | return (
72 |
73 |
77 | { showLanguageName ?
{defaultName}
: null }
78 |
103 |
107 | { showLanguageName ?
{langName}
: null }
108 |
145 |