saleor-dashboard/src/plugins/components/PluginInfo/PluginInfo.tsx

92 lines
2.3 KiB
TypeScript
Raw Normal View History

2019-08-26 17:08:32 +00:00
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import {
createStyles,
Theme,
withStyles,
WithStyles
} from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import Typography from "@material-ui/core/Typography";
import React from "react";
import CardTitle from "@saleor/components/CardTitle";
import ControlledSwitch from "@saleor/components/ControlledSwitch";
import FormSpacer from "@saleor/components/FormSpacer";
import Hr from "@saleor/components/Hr";
import i18n from "../../../i18n";
import { FormData } from "../PluginsDetailsPage";
interface PluginInfoProps {
data: FormData;
errors: Partial<{
description: string;
domain: string;
name: string;
}>;
disabled: boolean;
onChange: (event: React.ChangeEvent<any>) => void;
}
const styles = (theme: Theme) =>
createStyles({
title: {
fontSize: 14,
color: "#616161",
paddingTop: 10
},
status: {
fontSize: 16,
color: "#3D3D3D",
paddingTop: 20,
fontWeight: "400"
}
});
const PluginInfo = withStyles(styles, { name: "PluginInfo" })(
({
data,
disabled,
classes,
errors,
onChange
}: PluginInfoProps & WithStyles<typeof styles>) => {
return (
<Card>
<CardTitle
title={i18n.t("Plugin Information and Status", {
context: "plugin configuration"
})}
/>
<CardContent>
<Typography className={classes.title} variant="h6">
{i18n.t("Plugin Name")}
</Typography>
<Typography>{data.name}</Typography>
{data.description && (
<>
<Typography className={classes.title} variant="h6">
{i18n.t("Plugin Description")}
</Typography>
<Typography>{data.description}</Typography>
</>
)}
<FormSpacer />
<Hr />
<Typography className={classes.status} variant="h6">
{i18n.t("Status")}
</Typography>
<ControlledSwitch
checked={data.active}
label={"Set plugin as Active"}
name={"active" as keyof FormData}
onChange={onChange}
/>
</CardContent>
</Card>
);
}
);
PluginInfo.displayName = "PluginInfo";
export default PluginInfo;