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

64 lines
1.7 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";
2019-08-09 10:26:22 +00:00
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
2019-06-19 14:40:52 +00:00
import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
import Form from "@saleor/components/Form";
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
}) => {
const intl = useIntl();
return edit ? (
2019-06-19 14:40:52 +00:00
<Form
initial={{ translation: initial }}
onSubmit={data => onSubmit(data.translation)}
>
{({ change, data, submit }) => (
<div>
<TextField
disabled={disabled}
fullWidth
label={intl.formatMessage({
defaultMessage: "Translation"
})}
2019-06-19 14:40:52 +00:00
name="translation"
value={data.translation}
onChange={change}
/>
<TranslationFieldsSave
saveButtonState={saveButtonState}
onDiscard={onDiscard}
onSave={submit}
/>
</div>
)}
</Form>
) : initial === null ? (
<Typography color="textSecondary">
<FormattedMessage defaultMessage="No translation yet" />
2019-06-19 14:40:52 +00:00
</Typography>
) : (
<Typography>{initial}</Typography>
);
};
2019-06-19 14:40:52 +00:00
TranslationFieldsShort.displayName = "TranslationFieldsShort";
export default TranslationFieldsShort;