Commit 92f4b2e1 authored by pacome's avatar pacome

[client/alias] added placeholders in input fields

parent fdf138f7
import { Component, createElement } from 'react';
import {
DIV,
SPAN,
INPUT,
} from 'sdi/components/elements';
import { DIV, SPAN, INPUT } from 'sdi/components/elements';
import tr from 'sdi/locale';
import { getFormSelect, getFormReplace } from '../../queries/alias';
import { setFormSelect, setFormReplace, formObserve, saveForm, deleteAlias } from '../../events/alias';
import {
setFormSelect,
setFormReplace,
formObserve,
saveForm,
deleteAlias
} from '../../events/alias';
import { makeRemove, makeLabelAndIcon } from '../button';
import { AliasMessageKey } from 'alias/src/locale';
type TextGetter = () => string;
type TextSetter = (a: string) => void;
......@@ -50,59 +48,75 @@ class Input extends Component<any, VS> {
}
render() {
return (
DIV({ className: this.props.className },
SPAN({ className: 'input-label' }, tr.alias(this.props.label)),
INPUT({
value: this.state.value,
type: 'text',
onChange: e => this.setState({ value: e.currentTarget.value }),
onBlur: () => this.props.s(this.state.value),
}))
return DIV(
{ className: this.props.className },
SPAN({ className: 'input-label' }, tr.alias(this.props.label)),
INPUT({
value: this.state.value,
type: 'text',
placeholder: tr.alias(this.props.placeholder),
onChange: e => this.setState({ value: e.currentTarget.value }),
onBlur: () => this.props.s(this.state.value)
})
);
}
}
const renderInputText =
(className: string, label: AliasMessageKey) =>
(get: TextGetter, set: TextSetter) => {
return createElement(Input, { s: set, g: get, className, label }, { value: '' });
};
const renderSelect =
renderInputText('form-select', 'term')(getFormSelect, setFormSelect);
const renderReplaceFr =
renderInputText('form-replace', 'replaceFR')
(getFormReplace('fr'), setFormReplace('fr'));
const renderReplaceNl =
renderInputText('form-replace', 'replaceNL')
(getFormReplace('nl'), setFormReplace('nl'));
const renderInputText = (
className: string,
label: AliasMessageKey,
placeholder: AliasMessageKey
) => (get: TextGetter, set: TextSetter) => {
return createElement(
Input,
{ s: set, g: get, className, label, placeholder },
{ value: '' }
);
};
const renderSelect = renderInputText(
'form-select',
'term',
'insertTerm'
)(getFormSelect, setFormSelect);
const renderReplaceFr = renderInputText(
'form-replace',
'replaceFR',
'insertAliasFr'
)(getFormReplace('fr'), setFormReplace('fr'));
const renderReplaceNl = renderInputText(
'form-replace',
'replaceNL',
'insertAliasNl'
)(getFormReplace('nl'), setFormReplace('nl'));
const saveBtn = makeLabelAndIcon('save', 2, 'floppy-o', () => tr.alias('save'));
const removeBtn = makeRemove('remove', 3, () => tr.alias('remove'), () => tr.alias('rmvMsgKeyword'));
const renderActions =
() => (
DIV({ className: 'form-actions' },
saveBtn(saveForm),
removeBtn(deleteAlias),
)
const removeBtn = makeRemove(
'remove',
3,
() => tr.alias('remove'),
() => tr.alias('rmvMsgKeyword')
);
const renderActions = () =>
DIV(
{ className: 'form-actions' },
saveBtn(saveForm),
removeBtn(deleteAlias)
);
const render =
() => (
DIV({
className: 'form',
const render = () =>
DIV(
{
className: 'form'
},
renderSelect,
renderReplaceNl,
renderReplaceFr,
renderActions()));
renderSelect,
renderReplaceNl,
renderReplaceFr,
renderActions()
);
export default render;
import { MessageStore, formatMessage } from 'sdi/locale';
const messages = {
aliasDictonary: {
fr: 'Dictionnaire des alias',
nl: 'Woordenboek van aliassen', // nldone
en: 'Alias dictionary',
en: 'Alias dictionary'
},
createAlias: {
fr: 'Créer un nouvel alias',
nl: 'Maak een nieuwe alias aan', // nldone
en: 'Create a new alias',
en: 'Create a new alias'
},
term: {
fr: 'Terme',
nl: 'Term', // nldone
en: 'Term',
en: 'Term'
},
replaceFR: {
fr: 'Alias FR',
nl: 'Alias FR', // nldone
en: 'Alias FR',
en: 'Alias FR'
},
replaceNL: {
fr: 'Alias NL',
nl: 'Alias NL', // nldone
en: 'Alias NL',
en: 'Alias NL'
},
save: {
fr: 'Sauvegarder',
nl: 'Opslaan', // nldone
en: 'Save',
en: 'Save'
},
remove: {
fr: 'Supprimer',
nl: 'Verwijderen', // nldone
en: 'Remove',
en: 'Remove'
},
rmvMsgKeyword: {
fr: 'Souhaitez-vous supprimer l\'alias ?',
fr: "Souhaitez-vous supprimer l'alias ?",
nl: 'Wilt u de alias verwijderen?', // nldone
en: 'Would you like to delete the alias?',
en: 'Would you like to delete the alias?'
},
insertTerm: {
fr: 'Insérez le terme original',
nl: 'De oorspronkelijke term invoegen', // nltocheck
en: 'Insert original term'
},
insertAliasFr: {
fr: `Insérez l'alias en français`,
nl: 'Voer de alias in het Frans in.', // nltocheck
en: 'Insert french alias'
},
insertAliasNl: {
fr: `Insérez l'alias en néerlandais`,
nl: 'Voer de alias in het nederlands in.', // nltocheck
en: 'Insert dutch alias'
}
};
type MDB = typeof messages;
export type AliasMessageKey = keyof MDB;
declare module 'sdi/locale' {
export interface MessageStore {
alias(k: AliasMessageKey): Translated;
}
}
MessageStore.prototype.alias = (k: AliasMessageKey) => formatMessage(messages[k]);
MessageStore.prototype.alias = (k: AliasMessageKey) =>
formatMessage(messages[k]);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment