Use style hook

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

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,16 +26,15 @@ const styles = createStyles({
fontSize: 14,
paddingTop: 10
}
});
}));
const PluginInfo = withStyles(styles, { name: "PluginInfo" })(
({
const PluginInfo: React.StatelessComponent<PluginInfoProps> = ({
data,
description,
name,
classes,
onChange
}: PluginInfoProps & WithStyles<typeof styles>) => {
}) => {
const classes = useStyles({});
return (
<Card>
<CardTitle
@ -68,7 +67,6 @@ const PluginInfo = withStyles(styles, { name: "PluginInfo" })(
</CardContent>
</Card>
);
}
);
};
PluginInfo.displayName = "PluginInfo";
export default PluginInfo;

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,22 +24,21 @@ interface PluginSettingsProps {
}>;
}
const styles = createStyles({
const useStyles = makeStyles(() => ({
item: {
paddingBottom: 10,
paddingTop: 10
}
});
}));
const PluginSettings = withStyles(styles, { name: "PluginSettings" })(
({
const PluginSettings: React.StatelessComponent<PluginSettingsProps> = ({
data,
disabled,
classes,
errors,
onChange,
plugin
}: PluginSettingsProps & WithStyles<typeof styles>) => {
}) => {
const classes = useStyles({});
return (
<Card>
<CardTitle
@ -80,7 +79,6 @@ const PluginSettings = withStyles(styles, { name: "PluginSettings" })(
</CardContent>
</Card>
);
}
);
};
PluginSettings.displayName = "PluginSettings";
export default PluginSettings;