djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use style hook

Browse source
This commit is contained in:
Krzysztof Bialoglowicz 2019-08-30 13:58:48 +02:00
parent f3382fa544
commit 904f403b0c
2 changed files with 94 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
src/plugins/components/PluginInfo/PluginInfo.tsx
View file

@ -1,7 +1,7 @@
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
import makeStyles from "@material-ui/styles/makeStyles";
import React from "react";
import CardTitle from "@saleor/components/CardTitle";
@ -18,7 +18,7 @@ interface PluginInfoProps {
onChange: (event: React.ChangeEvent<any>) => void;
}
const styles = createStyles({
const useStyles = makeStyles(() => ({
status: {
paddingTop: 20
},
@ -26,49 +26,47 @@ const styles = createStyles({
fontSize: 14,
paddingTop: 10
}
});
}));
const PluginInfo = withStyles(styles, { name: "PluginInfo" })(
({
data,
description,
name,
classes,
onChange
}: PluginInfoProps & WithStyles<typeof styles>) => {
return (
<Card>
<CardTitle
title={i18n.t("Plugin Information and Status", {
context: "plugin configuration"
})}
const PluginInfo: React.StatelessComponent<PluginInfoProps> = ({
data,
description,
name,
onChange
}) => {
const classes = useStyles({});
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>{name}</Typography>
{description && (
<>
<Typography className={classes.title} variant="h6">
{i18n.t("Plugin Description")}
</Typography>
<Typography>{description}</Typography>
</>
)}
<FormSpacer />
<Hr />
<Typography className={classes.status}>{i18n.t("Status")}</Typography>
<ControlledSwitch
checked={data.active}
label={"Set plugin as Active"}
name={"active" as keyof FormData}
onChange={onChange}
/>
<CardContent>
<Typography className={classes.title} variant="h6">
{i18n.t("Plugin Name")}
</Typography>
<Typography>{name}</Typography>
{description && (
<>
<Typography className={classes.title} variant="h6">
{i18n.t("Plugin Description")}
</Typography>
<Typography>{description}</Typography>
</>
)}
<FormSpacer />
<Hr />
<Typography className={classes.status}>{i18n.t("Status")}</Typography>
<ControlledSwitch
checked={data.active}
label={"Set plugin as Active"}
name={"active" as keyof FormData}
onChange={onChange}
/>
</CardContent>
</Card>
);
}
);
</CardContent>
</Card>
);
};
PluginInfo.displayName = "PluginInfo";
export default PluginInfo;

106
src/plugins/components/PluginSettings/PluginSettings.tsx
View file

@ -1,7 +1,7 @@
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import makeStyles from "@material-ui/styles/makeStyles";
import CardTitle from "@saleor/components/CardTitle";
import ControlledSwitch from "@saleor/components/ControlledSwitch";
import { FormErrors } from "@saleor/types";
@ -24,63 +24,61 @@ interface PluginSettingsProps {
}>;
}
const styles = createStyles({
const useStyles = makeStyles(() => ({
item: {
paddingBottom: 10,
paddingTop: 10
}
});
}));
const PluginSettings = withStyles(styles, { name: "PluginSettings" })(
({
data,
disabled,
classes,
errors,
onChange,
plugin
}: PluginSettingsProps & WithStyles<typeof styles>) => {
return (
<Card>
<CardTitle
title={i18n.t("Plugin Settings", {
context: "plugin configuration"
})}
/>
<CardContent>
{data.configuration.map((configuration, index) => (
<div className={classes.item} key={index}>
{plugin[index].type === ConfigurationTypeFieldEnum.STRING && (
<TextField
disabled={disabled}
error={!!errors.name}
helperText={plugin[index].helpText}
label={plugin[index].label}
name={configuration.name}
fullWidth
value={configuration.value}
onChange={onChange}
/>
)}
{plugin[index].type === ConfigurationTypeFieldEnum.BOOLEAN && (
<ControlledSwitch
checked={
typeof configuration.value !== "boolean"
? configuration.value === "true"
: configuration.value
}
disabled={disabled}
label={plugin[index].label}
name={configuration.name}
onChange={onChange}
/>
)}
</div>
))}
</CardContent>
</Card>
);
}
);
const PluginSettings: React.StatelessComponent<PluginSettingsProps> = ({
data,
disabled,
errors,
onChange,
plugin
}) => {
const classes = useStyles({});
return (
<Card>
<CardTitle
title={i18n.t("Plugin Settings", {
context: "plugin configuration"
})}
/>
<CardContent>
{data.configuration.map((configuration, index) => (
<div className={classes.item} key={index}>
{plugin[index].type === ConfigurationTypeFieldEnum.STRING && (
<TextField
disabled={disabled}
error={!!errors.name}
helperText={plugin[index].helpText}
label={plugin[index].label}
name={configuration.name}
fullWidth
value={configuration.value}
onChange={onChange}
/>
)}
{plugin[index].type === ConfigurationTypeFieldEnum.BOOLEAN && (
<ControlledSwitch
checked={
typeof configuration.value !== "boolean"
? configuration.value === "true"
: configuration.value
}
disabled={disabled}
label={plugin[index].label}
name={configuration.name}
onChange={onChange}
/>
)}
</div>
))}
</CardContent>
</Card>
);
};
PluginSettings.displayName = "PluginSettings";
export default PluginSettings;