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

Separate visibility Card messages context

Browse source
This commit is contained in:
Krzysztof Bialoglowicz 2019-09-16 03:36:04 +02:00
parent 6d0aacd7ce
commit fdcf2ce872
6 changed files with 124 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/collections/components/CollectionCreatePage/CollectionCreatePage.tsx
View file

@ -15,6 +15,7 @@ import PageHeader from "@saleor/components/PageHeader";
import SaveButtonBar from "@saleor/components/SaveButtonBar";
import SeoForm from "@saleor/components/SeoForm";
import VisibilityCard from "@saleor/components/VisibilityCard";
import useDateLocalize from "@saleor/hooks/useDateLocalize";
import { commonMessages, sectionNames } from "@saleor/intl";
import { UserError } from "../../../types";
import CollectionDetails from "../CollectionDetails/CollectionDetails";
@ -66,6 +67,7 @@ const CollectionCreatePage: React.StatelessComponent<
onSubmit
}: CollectionCreatePageProps) => {
const intl = useIntl();
const localizeDate = useDateLocalize();
return (
<Form errors={errors} initial={initialForm} onSubmit={onSubmit}>
@ -149,7 +151,25 @@ const CollectionCreatePage: React.StatelessComponent<
data={data}
errors={formErrors}
disabled={disabled}
hiddenMessage={intl.formatMessage(
{
defaultMessage: "will be visible from {date}",
description: "collection"
},
{
date: localizeDate(data.publicationDate)
}
)}
onChange={change}
visibleMessage={intl.formatMessage(
{
defaultMessage: "since {date}",
description: "collection"
},
{
date: localizeDate(data.publicationDate)
}
)}
/>
</CardContent>
</Card>

46
src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx
View file

@ -8,11 +8,14 @@ import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
import { Container } from "@saleor/components/Container";
import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
import Form from "@saleor/components/Form";
import FormSpacer from "@saleor/components/FormSpacer";
import Grid from "@saleor/components/Grid";
import Hr from "@saleor/components/Hr";
import PageHeader from "@saleor/components/PageHeader";
import SaveButtonBar from "@saleor/components/SaveButtonBar";
import SeoForm from "@saleor/components/SeoForm";
import VisibilityCard from "@saleor/components/VisibilityCard";
import useDateLocalize from "@saleor/hooks/useDateLocalize";
import { sectionNames } from "@saleor/intl";
import { maybe } from "../../../misc";
import { ListActions, PageListProps } from "../../../types";
@ -59,6 +62,7 @@ const CollectionDetailsPage: React.StatelessComponent<
...collectionProductsProps
}: CollectionDetailsPageProps) => {
const intl = useIntl();
const localizeDate = useDateLocalize();
return (
<Form
@ -124,18 +128,40 @@ const CollectionDetailsPage: React.StatelessComponent<
data={data}
errors={formErrors}
disabled={disabled}
hiddenMessage={intl.formatMessage(
{
defaultMessage: "will be visible from {date}",
description: "collection"
},
{
date: localizeDate(data.publicationDate)
}
)}
onChange={change}
visibleMessage={intl.formatMessage(
{
defaultMessage: "since {date}",
description: "collection"
},
{
date: localizeDate(data.publicationDate)
}
)}
>
<ControlledCheckbox
name={"isFeatured" as keyof CollectionDetailsPageFormData}
label={intl.formatMessage({
defaultMessage: "Feature on Homepage",
description: "switch button"
})}
checked={data.isFeatured}
onChange={change}
disabled={disabled}
/>
<>
<FormSpacer />
<Hr />
<ControlledCheckbox
name={"isFeatured" as keyof CollectionDetailsPageFormData}
label={intl.formatMessage({
defaultMessage: "Feature on Homepage",
description: "switch button"
})}
checked={data.isFeatured}
onChange={change}
disabled={disabled}
/>
</>
</VisibilityCard>
</div>
</div>

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

@ -13,7 +13,6 @@ import { useIntl } from "react-intl";
import CardTitle from "@saleor/components/CardTitle";
import RadioSwitchField from "@saleor/components/RadioSwitchField";
import useDateLocalize from "@saleor/hooks/useDateLocalize";
import { DateContext } from "../Date/DateContext";
const styles = (theme: Theme) =>
@ -48,7 +47,9 @@ interface VisibilityCardProps extends WithStyles<typeof styles> {
};
errors: { [key: string]: string };
disabled?: boolean;
hiddenMessage: string;
onChange: (event: React.ChangeEvent<any>) => void;
visibleMessage: string;
}
export const VisibilityCard = withStyles(styles, {
@ -60,38 +61,25 @@ export const VisibilityCard = withStyles(styles, {
data: { isPublished, publicationDate },
errors,
disabled,
onChange
hiddenMessage,
onChange,
visibleMessage
}: VisibilityCardProps) => {
const intl = useIntl();
const [isPublicationDate, setPublicationDate] = React.useState(
publicationDate === null ? true : false
);
const localizeDate = useDateLocalize();
const dateNow = React.useContext(DateContext);
const visibleSecondLabel = publicationDate
? isPublished
? intl.formatMessage(
{
defaultMessage: "since {date}"
},
{
date: localizeDate(publicationDate)
}
)
? visibleMessage
: null
: null;
const hiddenSecondLabel = publicationDate
? isPublished
? null
: Date.parse(publicationDate) > dateNow
? intl.formatMessage(
{
defaultMessage: "will be visible from {date}"
},
{
date: localizeDate(publicationDate)
}
)
? hiddenMessage
: null
: null;

22
src/pages/components/PageDetailsPage/PageDetailsPage.tsx
View file

@ -17,6 +17,7 @@ import PageHeader from "@saleor/components/PageHeader";
import SaveButtonBar from "@saleor/components/SaveButtonBar";
import SeoForm from "@saleor/components/SeoForm";
import VisibilityCard from "@saleor/components/VisibilityCard";
import useDateLocalize from "@saleor/hooks/useDateLocalize";
import { sectionNames } from "@saleor/intl";
import { maybe } from "../../../misc";
import { UserError } from "../../../types";
@ -54,6 +55,7 @@ const PageDetailsPage: React.StatelessComponent<PageDetailsPageProps> = ({
onSubmit
}) => {
const intl = useIntl();
const localizeDate = useDateLocalize();
const initialForm: FormData = {
content: maybe(
@ -121,9 +123,27 @@ const PageDetailsPage: React.StatelessComponent<PageDetailsPageProps> = ({
<CardSpacer />
<VisibilityCard
data={data}
disabled={disabled}
errors={formErrors}
disabled={disabled}
hiddenMessage={intl.formatMessage(
{
defaultMessage: "will be visible from {date}",
description: "page"
},
{
date: localizeDate(data.publicationDate)
}
)}
onChange={change}
visibleMessage={intl.formatMessage(
{
defaultMessage: "since {date}",
description: "page"
},
{
date: localizeDate(data.publicationDate)
}
)}
/>
</div>
</Grid>

21
src/products/components/ProductCreatePage/ProductCreatePage.tsx
View file

@ -15,6 +15,7 @@ import SeoForm from "@saleor/components/SeoForm";
import VisibilityCard from "@saleor/components/VisibilityCard";
import { SearchCategories_categories_edges_node } from "@saleor/containers/SearchCategories/types/SearchCategories";
import { SearchCollections_collections_edges_node } from "@saleor/containers/SearchCollections/types/SearchCollections";
import useDateLocalize from "@saleor/hooks/useDateLocalize";
import useFormset from "@saleor/hooks/useFormset";
import useStateFromProps from "@saleor/hooks/useStateFromProps";
import { sectionNames } from "@saleor/intl";
@ -98,7 +99,7 @@ export const ProductCreatePage: React.StatelessComponent<
onSubmit
}: ProductCreatePageProps) => {
const intl = useIntl();
const localizeDate = useDateLocalize();
// Form values
const {
change: changeAttributeData,
@ -280,7 +281,25 @@ export const ProductCreatePage: React.StatelessComponent<
data={data}
errors={errors}
disabled={disabled}
hiddenMessage={intl.formatMessage(
{
defaultMessage: "will be visible from {date}",
description: "product"
},
{
date: localizeDate(data.publicationDate)
}
)}
onChange={change}
visibleMessage={intl.formatMessage(
{
defaultMessage: "since {date}",
description: "product"
},
{
date: localizeDate(data.publicationDate)
}
)}
/>
</div>
</Grid>

20
src/products/components/ProductUpdatePage/ProductUpdatePage.tsx
View file

@ -14,6 +14,7 @@ import SeoForm from "@saleor/components/SeoForm";
import VisibilityCard from "@saleor/components/VisibilityCard";
import { SearchCategories_categories_edges_node } from "@saleor/containers/SearchCategories/types/SearchCategories";
import { SearchCollections_collections_edges_node } from "@saleor/containers/SearchCollections/types/SearchCollections";
import useDateLocalize from "@saleor/hooks/useDateLocalize";
import useFormset from "@saleor/hooks/useFormset";
import useStateFromProps from "@saleor/hooks/useStateFromProps";
import { sectionNames } from "@saleor/intl";
@ -109,6 +110,7 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
toolbar
}) => {
const intl = useIntl();
const localizeDate = useDateLocalize();
const attributeInput = React.useMemo(
() => getAttributeInputFromProduct(product),
[product]
@ -290,7 +292,25 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
data={data}
errors={errors}
disabled={disabled}
hiddenMessage={intl.formatMessage(
{
defaultMessage: "will be visible from {date}",
description: "product"
},
{
date: localizeDate(data.publicationDate)
}
)}
onChange={change}
visibleMessage={intl.formatMessage(
{
defaultMessage: "since {date}",
description: "product"
},
{
date: localizeDate(data.publicationDate)
}
)}
/>
</div>
</Grid>