saleor-dashboard/src/translations/components/TranslationsEntitiesListPage/TranslationsEntitiesListPage.tsx

86 lines
2.7 KiB
TypeScript
Raw Normal View History

2019-06-19 14:40:52 +00:00
import Card from "@material-ui/core/Card";
import * as React from "react";
import AppHeader from "@saleor/components/AppHeader";
import Container from "@saleor/components/Container";
import PageHeader from "@saleor/components/PageHeader";
// tslint:disable no-submodule-imports
import { ShopInfo_shop_languages } from "@saleor/components/Shop/types/ShopInfo";
import FilterTabs, { FilterTab } from "@saleor/components/TableFilter";
import i18n from "../../../i18n";
import { maybe } from "../../../misc";
import { TranslatableEntities } from "../../urls";
export interface TranslationsEntitiesListPageProps {
children: React.ReactNode;
filters: TranslationsEntitiesFilters;
language: ShopInfo_shop_languages;
onBack: () => void;
}
export interface TranslationsEntitiesFilters {
current: TranslationsEntitiesListFilterTab;
onCategoriesTabClick: () => void;
onCollectionsTabClick: () => void;
onProductsTabClick: () => void;
onSalesTabClick: () => void;
onVouchersTabClick: () => void;
onPagesTabClick: () => void;
onProductTypesTabClick: () => void;
}
export type TranslationsEntitiesListFilterTab = keyof typeof TranslatableEntities;
const TranslationsEntitiesListPage: React.StatelessComponent<
TranslationsEntitiesListPageProps
> = ({ filters, language, onBack, children }) => (
<Container>
<AppHeader onBack={onBack}>{i18n.t("Languages")}</AppHeader>
<PageHeader
title={i18n.t("Translations to {{ language }}", {
context: "object translation page header",
language: maybe(() => language.language, "...")
})}
/>
<Card>
<FilterTabs
currentTab={([
"categories",
"collections",
"products",
"sales",
"vouchers",
"pages",
"productTypes"
] as TranslationsEntitiesListFilterTab[]).indexOf(filters.current)}
>
<FilterTab
label={i18n.t("Categories")}
onClick={filters.onCategoriesTabClick}
/>
<FilterTab
label={i18n.t("Collections")}
onClick={filters.onCollectionsTabClick}
/>
<FilterTab
label={i18n.t("Products")}
onClick={filters.onProductsTabClick}
/>
<FilterTab label={i18n.t("Sales")} onClick={filters.onSalesTabClick} />
<FilterTab
label={i18n.t("Vouchers")}
onClick={filters.onVouchersTabClick}
/>
<FilterTab label={i18n.t("Pages")} onClick={filters.onPagesTabClick} />
<FilterTab
label={i18n.t("Product Types")}
onClick={filters.onProductTypesTabClick}
/>
</FilterTabs>
{children}
</Card>
</Container>
);
TranslationsEntitiesListPage.displayName = "TranslationsEntitiesListPage";
export default TranslationsEntitiesListPage;