Published
Edited
Nov 6, 2020
2 stars
{
const languages = ['en', 'it', 'de', 'fr', 'es', 'pt'];
const words = ['pen', 'table', 'pencil', 'fire'];
const appTranslation = {
"en" : {
"language" : {
"en" : "English",
"pt" : "Portuguese",
"it" : "Italian",
"de" : "German",
"es" : "Spanish",
"fr" : "French",
},
"button":{
"validate" : "validate",
}
},
"it" :{
"language" : {
"en" : "Inglese",
"pt" : "Portoghese",
"it" : "Italiano",
"de" : "Tedesco",
"es" : "Spagnolo",
"fr" : "Francese",
},
"button":{
"validate": "valida",
}
}
};
const useState = React.useState;
const StyledLabel = styled.label`
width: 120px;
display: inline-block;
padding: 4px;
:after { content: ":"};
`;
const LanguageInput = ({baseLanguage, language, handleChange, optionalWord, optionalDisabled}) => {
const internalHandler= (event) => handleChange(language, event.target.value);
return htm`
<div>
<${StyledLabel}>${appTranslation[baseLanguage].language[language]}</><input type="text" onChange=${internalHandler} disabled=${optionalDisabled} value=${optionalWord}/>
</div>
`;
};
const InputForm = ({app}) => {
const {language, languages, validateWord, nextWord} = app;
const [word,setWord] = useState(nextWord());
const [translation,setTranslation] = useState({});
const handleSubmit = (event) => {
event.preventDefault();
const isValid = validateWord(word, translation);
if (isValid) {
setWord(nextWord());
}
};
const handleChange = (language, value) => {
const newTranslation = translation;
newTranslation[language] = value;
setTranslation(newTranslation);
}
const languageLabel = appTranslation[language].language[language];
return htm`
<form onSubmit=${handleSubmit}>
<${LanguageInput} baseLanguage=${language} language=${language} handleChange=${handleChange} disabled='true' optionalWord=${word} optionalDisabled=${true}/>
${languages.map( (lang) => {
return htm`<${LanguageInput} baseLanguage=${language} language=${lang} handleChange=${handleChange}/>`
}
)}
<br/>
<button>${appTranslation[language].button["validate"]}</button>
</form>
`;
};
const Application = ({className}) => {
const [index, setIndex] = useState(0);
const defaultLanguage = 'en';
const app = {
"language" : defaultLanguage,
"languages" : languages.filter( item => item !== defaultLanguage),
"nextWord" : () => {
const word = words[index];
//setIndex( (index +1 ) % words.length);
return word;
},
"validateWord": (word, translation) => {
console.log(word, translation);
return true;
}
};
return htm`
<${InputForm} className=${className}
app=${app}
></>
`;
};
return React.render(
htm`
<${StyledApplication}><${Application}/></>
`
);
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
