saleor-dashboard/src/translations/components/TranslationFields/TranslationFieldsShort.tsx

59 lines
1.6 KiB
TypeScript
Raw Normal View History

2019-06-19 14:40:52 +00:00
import TextField from "@material-ui/core/TextField";
import Typography from "@material-ui/core/Typography";
import * as React from "react";
import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
import Form from "@saleor/components/Form";
import i18n from "../../../i18n";
import TranslationFieldsSave from "./TranslationFieldsSave";
interface TranslationFieldsShortProps {
disabled: boolean;
edit: boolean;
initial: string;
saveButtonState: ConfirmButtonTransitionState;
onDiscard: () => void;
onSubmit: (data: string) => void;
}
const TranslationFieldsShort: React.FC<TranslationFieldsShortProps> = ({
disabled,
edit,
initial,
saveButtonState,
onDiscard,
onSubmit
}) =>
edit ? (
<Form
initial={{ translation: initial }}
onSubmit={data => onSubmit(data.translation)}
>
{({ change, data, submit }) => (
<div>
<TextField
disabled={disabled}
fullWidth
label={i18n.t("Translation")}
name="translation"
value={data.translation}
onChange={change}
/>
<TranslationFieldsSave
saveButtonState={saveButtonState}
onDiscard={onDiscard}
onSave={submit}
/>
</div>
)}
</Form>
) : initial === null ? (
<Typography color="textSecondary">
{i18n.t("No translation yet")}
</Typography>
) : (
<Typography>{initial}</Typography>
);
TranslationFieldsShort.displayName = "TranslationFieldsShort";
export default TranslationFieldsShort;