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 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,49 +26,47 @@ 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, onChange
classes, }) => {
onChange const classes = useStyles({});
}: PluginInfoProps & WithStyles<typeof styles>) => { return (
return ( <Card>
<Card> <CardTitle
<CardTitle title={i18n.t("Plugin Information and Status", {
title={i18n.t("Plugin Information and Status", { context: "plugin configuration"
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> </CardContent>
<Typography className={classes.title} variant="h6"> </Card>
{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>
);
}
);
PluginInfo.displayName = "PluginInfo"; PluginInfo.displayName = "PluginInfo";
export default 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 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,63 +24,61 @@ 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, errors,
classes, onChange,
errors, plugin
onChange, }) => {
plugin const classes = useStyles({});
}: PluginSettingsProps & WithStyles<typeof styles>) => { return (
return ( <Card>
<Card> <CardTitle
<CardTitle title={i18n.t("Plugin Settings", {
title={i18n.t("Plugin Settings", { context: "plugin configuration"
context: "plugin configuration" })}
})} />
/> <CardContent>
<CardContent> {data.configuration.map((configuration, index) => (
{data.configuration.map((configuration, index) => ( <div className={classes.item} key={index}>
<div className={classes.item} key={index}> {plugin[index].type === ConfigurationTypeFieldEnum.STRING && (
{plugin[index].type === ConfigurationTypeFieldEnum.STRING && ( <TextField
<TextField disabled={disabled}
disabled={disabled} error={!!errors.name}
error={!!errors.name} helperText={plugin[index].helpText}
helperText={plugin[index].helpText} label={plugin[index].label}
label={plugin[index].label} name={configuration.name}
name={configuration.name} fullWidth
fullWidth value={configuration.value}
value={configuration.value} onChange={onChange}
onChange={onChange} />
/> )}
)} {plugin[index].type === ConfigurationTypeFieldEnum.BOOLEAN && (
{plugin[index].type === ConfigurationTypeFieldEnum.BOOLEAN && ( <ControlledSwitch
<ControlledSwitch checked={
checked={ typeof configuration.value !== "boolean"
typeof configuration.value !== "boolean" ? configuration.value === "true"
? configuration.value === "true" : configuration.value
: configuration.value }
} disabled={disabled}
disabled={disabled} label={plugin[index].label}
label={plugin[index].label} name={configuration.name}
name={configuration.name} onChange={onChange}
onChange={onChange} />
/> )}
)} </div>
</div> ))}
))} </CardContent>
</CardContent> </Card>
</Card> );
); };
}
);
PluginSettings.displayName = "PluginSettings"; PluginSettings.displayName = "PluginSettings";
export default PluginSettings; export default PluginSettings;