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

Fix visibility card component

Browse source
This commit is contained in:
Krzysztof Bialoglowicz 2019-09-16 03:00:38 +02:00
parent b6886d8fc8
commit 6d0aacd7ce
10 changed files with 144 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/collections/views/CollectionCreate.tsx
View file

@ -63,11 +63,7 @@ export const CollectionCreate: React.FC = () => {
backgroundImage: formData.backgroundImage.value,
backgroundImageAlt: formData.backgroundImageAlt,
descriptionJson: JSON.stringify(formData.description),
isPublished:
typeof formData.isPublished !== "boolean" &&
formData.isPublished === "true"
? true
: false,
isPublished: formData.isPublished,
name: formData.name,
seo: {
description: formData.seoDescription,

6
src/collections/views/CollectionDetails.tsx
View file

@ -148,11 +148,7 @@ export const CollectionDetails: React.StatelessComponent<
const input: CollectionInput = {
backgroundImageAlt: formData.backgroundImageAlt,
descriptionJson: JSON.stringify(formData.description),
isPublished:
typeof formData.isPublished !== "boolean" &&
formData.isPublished === "true"
? true
: false,
isPublished: formData.isPublished,
name: formData.name,
publicationDate: formData.publicationDate,
seo: {

16
src/components/RadioGroupField/RadioGroupField.tsx
View file

@ -30,11 +30,10 @@ const styles = createStyles({
}
});
interface RadioGroupFieldProps extends WithStyles<typeof styles> {
interface RadioGroupFieldProps {
choices: Array<{
value: string;
label: string | React.ReactNode;
secondLabel?: string | React.ReactNode;
label: React.ReactNode;
}>;
className?: string;
disabled?: boolean;
@ -60,7 +59,7 @@ export const RadioGroupField = withStyles(styles, {
onChange,
name,
hint
}: RadioGroupFieldProps) => {
}: RadioGroupFieldProps & WithStyles<typeof styles>) => {
return (
<FormControl
className={classNames(classes.formControl, className)}
@ -82,14 +81,7 @@ export const RadioGroupField = withStyles(styles, {
value={choice.value}
className={classes.radioLabel}
control={<Radio color="primary" />}
label={
<>
{choice.label}
<span className={classes.secondLabel}>
{choice.secondLabel}
</span>
</>
}
label={choice.label}
key={choice.value}
/>
))

97
src/components/RadioSwitchField/RadioSwitchField.tsx Normal file
View file

@ -0,0 +1,97 @@
import FormControl from "@material-ui/core/FormControl";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Radio from "@material-ui/core/Radio";
import RadioGroup from "@material-ui/core/RadioGroup";
import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
import classNames from "classnames";
import React from "react";
const styles = createStyles({
formControl: {
padding: 0,
width: "100%"
},
formLabel: {
marginLeft: "-5px",
paddingBottom: "10px"
},
radioLabel: {
"& > span": {
padding: "10px 6px"
}
},
secondLabel: {
display: "block",
fontSize: "12px"
}
});
interface RadioSwitchFieldProps {
className?: string;
disabled?: boolean;
error?: boolean;
firstOptionLabel: React.ReactNode;
name?: string;
secondOptionLabel: React.ReactNode;
value?: boolean;
onChange: (event: React.ChangeEvent<any>) => void;
}
export const RadioSwitchField = withStyles(styles, {
name: "RadioSwitchField"
})(
({
className,
classes,
disabled,
error,
firstOptionLabel,
onChange,
name,
secondOptionLabel,
value
}: RadioSwitchFieldProps & WithStyles<typeof styles>) => {
const initialValue = value ? "visible" : "hidden";
const change = event => {
onChange({
target: {
name: event.target.name,
value: event.target.value === "visible" ? true : false
}
} as any);
};
return (
<FormControl
className={classNames(classes.formControl, className)}
error={error}
disabled={disabled}
>
<RadioGroup
aria-label={name}
name={name}
value={initialValue}
onChange={event => change(event)}
>
<FormControlLabel
value="visible"
className={classes.radioLabel}
control={<Radio color="primary" />}
label={firstOptionLabel}
name={name}
/>
<FormControlLabel
value="hidden"
className={classes.radioLabel}
control={<Radio color="primary" />}
label={secondOptionLabel}
name={name}
/>
</RadioGroup>
</FormControl>
);
}
);
RadioSwitchField.displayName = "RadioSwitchField";
export default RadioSwitchField;

2
src/components/RadioSwitchField/index.ts Normal file
View file

@ -0,0 +1,2 @@
export { default } from "./RadioSwitchField";
export * from "./RadioSwitchField";

66
src/components/VisibilityCard/VisibilityCard.tsx
View file

@ -12,8 +12,7 @@ import React from "react";
import { useIntl } from "react-intl";
import CardTitle from "@saleor/components/CardTitle";
import { FormSpacer } from "@saleor/components/FormSpacer";
import RadioGroupField from "@saleor/components/RadioGroupField";
import RadioSwitchField from "@saleor/components/RadioSwitchField";
import useDateLocalize from "@saleor/hooks/useDateLocalize";
import { DateContext } from "../Date/DateContext";
@ -25,6 +24,13 @@ const styles = (theme: Theme) =>
},
marginTop: theme.spacing.unit * 3
},
label: {
lineHeight: 1,
margin: 0
},
secondLabel: {
fontSize: 12
},
setPublicationDate: {
color: theme.palette.primary.main,
cursor: "pointer",
@ -42,7 +48,7 @@ interface VisibilityCardProps extends WithStyles<typeof styles> {
};
errors: { [key: string]: string };
disabled?: boolean;
onChange(event: any);
onChange: (event: React.ChangeEvent<any>) => void;
}
export const VisibilityCard = withStyles(styles, {
@ -62,12 +68,6 @@ export const VisibilityCard = withStyles(styles, {
);
const localizeDate = useDateLocalize();
const dateNow = React.useContext(DateContext);
const isPublishedRadio =
typeof isPublished !== "boolean"
? isPublished
: isPublished
? "true"
: "false";
const visibleSecondLabel = publicationDate
? isPublished
? intl.formatMessage(
@ -95,22 +95,6 @@ export const VisibilityCard = withStyles(styles, {
: null
: null;
const visiblilityPickerChoices = [
{
label: intl.formatMessage({
defaultMessage: "Visible"
}),
secondLabel: visibleSecondLabel,
value: "true"
},
{
label: intl.formatMessage({
defaultMessage: "Hidden"
}),
secondLabel: hiddenSecondLabel,
value: "false"
}
];
return (
<Card>
<CardTitle
@ -120,16 +104,37 @@ export const VisibilityCard = withStyles(styles, {
})}
/>
<CardContent>
<RadioGroupField
choices={visiblilityPickerChoices}
<RadioSwitchField
disabled={disabled}
firstOptionLabel={
<>
<p className={classes.label}>
{intl.formatMessage({
defaultMessage: "Visible"
})}
</p>
<span className={classes.secondLabel}>
{visibleSecondLabel}
</span>
</>
}
name={"isPublished" as keyof FormData}
value={isPublishedRadio}
secondOptionLabel={
<>
<p className={classes.label}>
{intl.formatMessage({
defaultMessage: "Hidden"
})}
</p>
<span className={classes.secondLabel}>{hiddenSecondLabel}</span>
</>
}
value={isPublished}
onChange={onChange}
/>
{isPublishedRadio === "false" && (
{!isPublished && (
<>
{!isPublicationDate && (
{!isPublished && (
<Typography
className={classes.setPublicationDate}
onClick={() => setPublicationDate(!isPublicationDate)}
@ -161,7 +166,6 @@ export const VisibilityCard = withStyles(styles, {
)}
</>
)}
<FormSpacer />
{children}
</CardContent>
</Card>

6
src/pages/views/PageCreate.tsx
View file

@ -59,11 +59,7 @@ export const PageCreate: React.StatelessComponent<PageCreateProps> = () => {
variables: {
input: {
contentJson: JSON.stringify(formData.content),
isPublished:
typeof formData.isPublished !== "boolean" &&
formData.isPublished === "true"
? true
: false,
isPublished: formData.isPublished,
publicationDate: formData.isPublished
? null
: formData.publicationDate === ""

5
src/pages/views/PageDetails.tsx
View file

@ -22,10 +22,7 @@ export interface PageDetailsProps {
const createPageInput = (data: FormData): PageInput => {
return {
contentJson: JSON.stringify(data.content),
isPublished:
typeof data.isPublished !== "boolean" && data.isPublished === "true"
? true
: false,
isPublished: data.isPublished,
publicationDate: data.isPublished
? null
: data.publicationDate === ""

6
src/products/views/ProductCreate.tsx
View file

@ -83,11 +83,7 @@ export const ProductUpdate: React.StatelessComponent<
descriptionJson: JSON.stringify(
formData.description
),
isPublished:
typeof formData.isPublished !== "boolean" &&
formData.isPublished === "true"
? true
: false,
isPublished: formData.isPublished,
name: formData.name,
productType: formData.productType,
publicationDate:

5
src/products/views/ProductUpdate/handlers.ts
View file

@ -25,10 +25,7 @@ export function createUpdateHandler(
collections: data.collections,
descriptionJson: JSON.stringify(data.description),
id: product.id,
isPublished:
typeof data.isPublished !== "boolean" && data.isPublished === "true"
? true
: false,
isPublished: data.isPublished,
name: data.name,
publicationDate:
data.publicationDate !== "" ? data.publicationDate : null,