2019-06-19 14:40:52 +00:00
|
|
|
import TextField from "@material-ui/core/TextField";
|
|
|
|
import Typography from "@material-ui/core/Typography";
|
2020-05-14 09:30:32 +00:00
|
|
|
import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
|
|
|
|
import Form from "@saleor/components/Form";
|
2019-08-09 10:26:22 +00:00
|
|
|
import React from "react";
|
2019-08-26 21:50:08 +00:00
|
|
|
import { FormattedMessage, useIntl } from "react-intl";
|
2019-06-19 14:40:52 +00:00
|
|
|
|
|
|
|
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
|
2019-08-26 21:50:08 +00:00
|
|
|
}) => {
|
|
|
|
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
|
2019-08-26 21:50:08 +00:00
|
|
|
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">
|
2019-08-26 21:50:08 +00:00
|
|
|
<FormattedMessage defaultMessage="No translation yet" />
|
2019-06-19 14:40:52 +00:00
|
|
|
</Typography>
|
|
|
|
) : (
|
|
|
|
<Typography>{initial}</Typography>
|
|
|
|
);
|
2019-08-26 21:50:08 +00:00
|
|
|
};
|
2019-06-19 14:40:52 +00:00
|
|
|
TranslationFieldsShort.displayName = "TranslationFieldsShort";
|
|
|
|
export default TranslationFieldsShort;
|