Use style hook
This commit is contained in:
parent
f3382fa544
commit
904f403b0c
2 changed files with 94 additions and 98 deletions
|
@ -1,7 +1,7 @@
|
||||||
import Card from "@material-ui/core/Card";
|
import Card from "@material-ui/core/Card";
|
||||||
import CardContent from "@material-ui/core/CardContent";
|
import CardContent from "@material-ui/core/CardContent";
|
||||||
import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
|
|
||||||
import Typography from "@material-ui/core/Typography";
|
import Typography from "@material-ui/core/Typography";
|
||||||
|
import makeStyles from "@material-ui/styles/makeStyles";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
import CardTitle from "@saleor/components/CardTitle";
|
import CardTitle from "@saleor/components/CardTitle";
|
||||||
|
@ -18,7 +18,7 @@ interface PluginInfoProps {
|
||||||
onChange: (event: React.ChangeEvent<any>) => void;
|
onChange: (event: React.ChangeEvent<any>) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const styles = createStyles({
|
const useStyles = makeStyles(() => ({
|
||||||
status: {
|
status: {
|
||||||
paddingTop: 20
|
paddingTop: 20
|
||||||
},
|
},
|
||||||
|
@ -26,16 +26,15 @@ const styles = createStyles({
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
paddingTop: 10
|
paddingTop: 10
|
||||||
}
|
}
|
||||||
});
|
}));
|
||||||
|
|
||||||
const PluginInfo = withStyles(styles, { name: "PluginInfo" })(
|
const PluginInfo: React.StatelessComponent<PluginInfoProps> = ({
|
||||||
({
|
|
||||||
data,
|
data,
|
||||||
description,
|
description,
|
||||||
name,
|
name,
|
||||||
classes,
|
|
||||||
onChange
|
onChange
|
||||||
}: PluginInfoProps & WithStyles<typeof styles>) => {
|
}) => {
|
||||||
|
const classes = useStyles({});
|
||||||
return (
|
return (
|
||||||
<Card>
|
<Card>
|
||||||
<CardTitle
|
<CardTitle
|
||||||
|
@ -68,7 +67,6 @@ const PluginInfo = withStyles(styles, { name: "PluginInfo" })(
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
);
|
|
||||||
PluginInfo.displayName = "PluginInfo";
|
PluginInfo.displayName = "PluginInfo";
|
||||||
export default PluginInfo;
|
export default PluginInfo;
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import Card from "@material-ui/core/Card";
|
import Card from "@material-ui/core/Card";
|
||||||
import CardContent from "@material-ui/core/CardContent";
|
import CardContent from "@material-ui/core/CardContent";
|
||||||
import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
|
|
||||||
import TextField from "@material-ui/core/TextField";
|
import TextField from "@material-ui/core/TextField";
|
||||||
|
import makeStyles from "@material-ui/styles/makeStyles";
|
||||||
import CardTitle from "@saleor/components/CardTitle";
|
import CardTitle from "@saleor/components/CardTitle";
|
||||||
import ControlledSwitch from "@saleor/components/ControlledSwitch";
|
import ControlledSwitch from "@saleor/components/ControlledSwitch";
|
||||||
import { FormErrors } from "@saleor/types";
|
import { FormErrors } from "@saleor/types";
|
||||||
|
@ -24,22 +24,21 @@ interface PluginSettingsProps {
|
||||||
}>;
|
}>;
|
||||||
}
|
}
|
||||||
|
|
||||||
const styles = createStyles({
|
const useStyles = makeStyles(() => ({
|
||||||
item: {
|
item: {
|
||||||
paddingBottom: 10,
|
paddingBottom: 10,
|
||||||
paddingTop: 10
|
paddingTop: 10
|
||||||
}
|
}
|
||||||
});
|
}));
|
||||||
|
|
||||||
const PluginSettings = withStyles(styles, { name: "PluginSettings" })(
|
const PluginSettings: React.StatelessComponent<PluginSettingsProps> = ({
|
||||||
({
|
|
||||||
data,
|
data,
|
||||||
disabled,
|
disabled,
|
||||||
classes,
|
|
||||||
errors,
|
errors,
|
||||||
onChange,
|
onChange,
|
||||||
plugin
|
plugin
|
||||||
}: PluginSettingsProps & WithStyles<typeof styles>) => {
|
}) => {
|
||||||
|
const classes = useStyles({});
|
||||||
return (
|
return (
|
||||||
<Card>
|
<Card>
|
||||||
<CardTitle
|
<CardTitle
|
||||||
|
@ -80,7 +79,6 @@ const PluginSettings = withStyles(styles, { name: "PluginSettings" })(
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
);
|
|
||||||
PluginSettings.displayName = "PluginSettings";
|
PluginSettings.displayName = "PluginSettings";
|
||||||
export default PluginSettings;
|
export default PluginSettings;
|
||||||
|
|
Loading…
Reference in a new issue