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

Use responsive table component

Browse source
This commit is contained in:
Krzysztof Bialoglowicz 2019-11-04 15:25:23 +01:00 committed by dominik-zeglen
parent bb5990c4d5
commit 9911f2b278
51 changed files with 161 additions and 161 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/attributes/components/AttributeList/AttributeList.tsx
View file

@ -1,5 +1,4 @@
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableFooter from "@material-ui/core/TableFooter";
@ -8,6 +7,7 @@ import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import Checkbox from "@saleor/components/Checkbox";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import TableHead from "@saleor/components/TableHead";
import TablePagination from "@saleor/components/TablePagination";
@ -75,7 +75,7 @@ const AttributeList: React.FC<AttributeListProps> = ({
const intl = useIntl();
return (
<Table>
<ResponsiveTable>
<TableHead
colSpan={numberOfColumns}
selected={selected}
@ -207,7 +207,7 @@ const AttributeList: React.FC<AttributeListProps> = ({
)
)}
</TableBody>
</Table>
</ResponsiveTable>
);
};
AttributeList.displayName = "AttributeList";

6
src/attributes/components/AttributeValues/AttributeValues.tsx
View file

@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
import Card from "@material-ui/core/Card";
import IconButton from "@material-ui/core/IconButton";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
@ -11,6 +10,7 @@ import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import CardTitle from "@saleor/components/CardTitle";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import {
SortableTableBody,
@ -80,7 +80,7 @@ const AttributeValues: React.FC<AttributeValuesProps> = ({
</Button>
}
/>
<Table>
<ResponsiveTable>
<TableHead>
<TableRow>
<TableCell className={classes.columnDrag} />
@ -138,7 +138,7 @@ const AttributeValues: React.FC<AttributeValuesProps> = ({
)
)}
</SortableTableBody>
</Table>
</ResponsiveTable>
</Card>
);
};

6
src/categories/components/CategoryList/CategoryList.tsx
View file

@ -1,5 +1,4 @@
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableFooter from "@material-ui/core/TableFooter";
@ -9,6 +8,7 @@ import { FormattedMessage } from "react-intl";
import { CategoryFragment } from "@saleor/categories/types/CategoryFragment";
import Checkbox from "@saleor/components/Checkbox";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import TableHead from "@saleor/components/TableHead";
import TablePagination from "@saleor/components/TablePagination";
@ -73,7 +73,7 @@ const CategoryList: React.FC<CategoryListProps> = props => {
const classes = useStyles(props);
return (
<Table>
<ResponsiveTable>
<TableHead
colSpan={numberOfColumns}
selected={selected}
@ -174,7 +174,7 @@ const CategoryList: React.FC<CategoryListProps> = props => {
)
)}
</TableBody>
</Table>
</ResponsiveTable>
);
};

6
src/categories/components/CategoryProductList/CategoryProductList.tsx
View file

@ -1,11 +1,11 @@
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableFooter from "@material-ui/core/TableFooter";
import TableRow from "@material-ui/core/TableRow";
import Checkbox from "@saleor/components/Checkbox";
import Money from "@saleor/components/Money";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import StatusLabel from "@saleor/components/StatusLabel";
import { FormattedMessage, useIntl } from "react-intl";
@ -98,7 +98,7 @@ export const CategoryProductList: React.FC<
return (
<div className={classes.tableContainer}>
<Table className={classes.table}>
<ResponsiveTable className={classes.table}>
<colgroup>
<col />
<col className={classes.colName} />
@ -229,7 +229,7 @@ export const CategoryProductList: React.FC<
)
)}
</TableBody>
</Table>
</ResponsiveTable>
</div>
);
};

6
src/collections/components/CollectionList/CollectionList.tsx
View file

@ -1,5 +1,4 @@
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableFooter from "@material-ui/core/TableFooter";
@ -8,6 +7,7 @@ import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import Checkbox from "@saleor/components/Checkbox";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import StatusLabel from "@saleor/components/StatusLabel";
import TableHead from "@saleor/components/TableHead";
@ -68,7 +68,7 @@ const CollectionList: React.FC<CollectionListProps> = props => {
const intl = useIntl();
return (
<Table>
<ResponsiveTable>
<TableHead
colSpan={numberOfColumns}
selected={selected}
@ -174,7 +174,7 @@ const CollectionList: React.FC<CollectionListProps> = props => {
)
)}
</TableBody>
</Table>
</ResponsiveTable>
);
};

6
src/collections/components/CollectionProducts/CollectionProducts.tsx
View file

@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
import Card from "@material-ui/core/Card";
import IconButton from "@material-ui/core/IconButton";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableFooter from "@material-ui/core/TableFooter";
@ -13,6 +12,7 @@ import { FormattedMessage, useIntl } from "react-intl";
import CardTitle from "@saleor/components/CardTitle";
import Checkbox from "@saleor/components/Checkbox";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import StatusLabel from "@saleor/components/StatusLabel";
import TableCellAvatar, {
@ -114,7 +114,7 @@ const CollectionProducts: React.FC<CollectionProductsProps> = props => {
</Button>
}
/>
<Table className={classes.table}>
<ResponsiveTable className={classes.table}>
<TableHead
colSpan={numberOfColumns}
selected={selected}
@ -232,7 +232,7 @@ const CollectionProducts: React.FC<CollectionProductsProps> = props => {
)
)}
</TableBody>
</Table>
</ResponsiveTable>
</Card>
);
};

6
src/components/AssignCategoryDialog/AssignCategoryDialog.tsx
View file

@ -5,7 +5,6 @@ import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogTitle from "@material-ui/core/DialogTitle";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableRow from "@material-ui/core/TableRow";
@ -17,6 +16,7 @@ import ConfirmButton, {
ConfirmButtonTransitionState
} from "@saleor/components/ConfirmButton";
import FormSpacer from "@saleor/components/FormSpacer";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import useSearchQuery from "@saleor/hooks/useSearchQuery";
import { buttonMessages } from "@saleor/intl";
import { SearchCategories_search_edges_node } from "../../containers/SearchCategories/types/SearchCategories";
@ -123,7 +123,7 @@ const AssignCategoriesDialog: React.FC<AssignCategoriesDialogProps> = props => {
}}
/>
<FormSpacer />
<Table>
<ResponsiveTable>
<TableBody>
{categories &&
categories.map(category => {
@ -156,7 +156,7 @@ const AssignCategoriesDialog: React.FC<AssignCategoriesDialogProps> = props => {
);
})}
</TableBody>
</Table>
</ResponsiveTable>
</DialogContent>
<DialogActions>
<Button onClick={onClose}>

6
src/components/AssignCollectionDialog/AssignCollectionDialog.tsx
View file

@ -5,7 +5,6 @@ import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogTitle from "@material-ui/core/DialogTitle";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableRow from "@material-ui/core/TableRow";
@ -13,6 +12,7 @@ import TextField from "@material-ui/core/TextField";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import useSearchQuery from "@saleor/hooks/useSearchQuery";
import { buttonMessages } from "@saleor/intl";
import { SearchCollections_search_edges_node } from "../../containers/SearchCollections/types/SearchCollections";
@ -123,7 +123,7 @@ const AssignCollectionDialog: React.FC<AssignCollectionDialogProps> = props => {
}}
/>
<FormSpacer />
<Table>
<ResponsiveTable>
<TableBody>
{collections &&
collections.map(collection => {
@ -156,7 +156,7 @@ const AssignCollectionDialog: React.FC<AssignCollectionDialogProps> = props => {
);
})}
</TableBody>
</Table>
</ResponsiveTable>
</DialogContent>
<DialogActions>
<Button onClick={onClose}>

6
src/components/AssignProductDialog/AssignProductDialog.tsx
View file

@ -5,7 +5,6 @@ import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogTitle from "@material-ui/core/DialogTitle";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableRow from "@material-ui/core/TableRow";
@ -17,6 +16,7 @@ import ConfirmButton, {
ConfirmButtonTransitionState
} from "@saleor/components/ConfirmButton";
import FormSpacer from "@saleor/components/FormSpacer";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import TableCellAvatar from "@saleor/components/TableCellAvatar";
import useSearchQuery from "@saleor/hooks/useSearchQuery";
import { buttonMessages } from "@saleor/intl";
@ -131,7 +131,7 @@ const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
/>
<FormSpacer />
<div className={classes.scrollArea}>
<Table>
<ResponsiveTable>
<TableBody>
{products &&
products.map(product => {
@ -168,7 +168,7 @@ const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
);
})}
</TableBody>
</Table>
</ResponsiveTable>
</div>
</DialogContent>
<DialogActions>

6
src/components/CountryList/CountryList.tsx
View file

@ -3,7 +3,6 @@ import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import IconButton from "@material-ui/core/IconButton";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableRow from "@material-ui/core/TableRow";
@ -14,6 +13,7 @@ import React from "react";
import { FormattedMessage } from "react-intl";
import CardTitle from "@saleor/components/CardTitle";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import { maybe, renderCollection } from "../../misc";
import { CountryFragment } from "../../taxes/types/CountryFragment";
@ -100,7 +100,7 @@ const CountryList: React.FC<CountryListProps> = props => {
}
/>
<CardContent className={classes.root}>
<Table>
<ResponsiveTable>
<TableBody>
<TableRow className={classes.pointer} onClick={toggleCollapse}>
<TableCell
@ -173,7 +173,7 @@ const CountryList: React.FC<CountryListProps> = props => {
)
)}
</TableBody>
</Table>
</ResponsiveTable>
</CardContent>
</Card>
);

6
src/components/TableCellHeader/TableCellHeader.stories.tsx
View file

@ -1,5 +1,4 @@
import Card from "@material-ui/core/Card";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
@ -7,6 +6,7 @@ import TableRow from "@material-ui/core/TableRow";
import { storiesOf } from "@storybook/react";
import React from "react";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Decorator from "../../storybook/Decorator";
import TableCellHeader, {
TableCellHeaderArrowDirection
@ -25,7 +25,7 @@ const Story: React.FC<StoryProps> = ({
onHeaderClick = () => undefined
}) => (
<Card style={{ margin: "auto", width: 400 }}>
<Table>
<ResponsiveTable>
<TableHead>
<TableRow>
<TableCellHeader
@ -49,7 +49,7 @@ const Story: React.FC<StoryProps> = ({
<TableCell>Juice</TableCell>
</TableRow>
</TableBody>
</Table>
</ResponsiveTable>
</Card>
);
const InteractiveStory: React.FC = () => {

6
src/customers/components/CustomerList/CustomerList.tsx
View file

@ -1,5 +1,4 @@
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableFooter from "@material-ui/core/TableFooter";
@ -8,6 +7,7 @@ import React from "react";
import { FormattedMessage } from "react-intl";
import Checkbox from "@saleor/components/Checkbox";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import TableHead from "@saleor/components/TableHead";
import TablePagination from "@saleor/components/TablePagination";
@ -61,7 +61,7 @@ const CustomerList: React.FC<CustomerListProps> = props => {
const classes = useStyles(props);
return (
<Table>
<ResponsiveTable>
<TableHead
colSpan={numberOfColumns}
selected={selected}
@ -141,7 +141,7 @@ const CustomerList: React.FC<CustomerListProps> = props => {
)
)}
</TableBody>
</Table>
</ResponsiveTable>
);
};
CustomerList.displayName = "CustomerList";

6
src/customers/components/CustomerOrders/CustomerOrders.tsx
View file

@ -1,7 +1,6 @@
import Button from "@material-ui/core/Button";
import Card from "@material-ui/core/Card";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
@ -12,6 +11,7 @@ import { FormattedMessage, useIntl } from "react-intl";
import CardTitle from "@saleor/components/CardTitle";
import { DateTime } from "@saleor/components/Date";
import Money from "@saleor/components/Money";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import StatusLabel from "@saleor/components/StatusLabel";
import { maybe, renderCollection, transformPaymentStatus } from "../../../misc";
@ -60,7 +60,7 @@ const CustomerOrders: React.FC<CustomerOrdersProps> = props => {
</Button>
}
/>
<Table>
<ResponsiveTable>
<TableHead>
<TableRow>
<TableCell>
@ -143,7 +143,7 @@ const CustomerOrders: React.FC<CustomerOrdersProps> = props => {
)
)}
</TableBody>
</Table>
</ResponsiveTable>
</Card>
);
};

6
src/discounts/components/DiscountCategories/DiscountCategories.tsx
View file

@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
import Card from "@material-ui/core/Card";
import IconButton from "@material-ui/core/IconButton";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableFooter from "@material-ui/core/TableFooter";
@ -13,6 +12,7 @@ import { FormattedMessage, useIntl } from "react-intl";
import CardTitle from "@saleor/components/CardTitle";
import Checkbox from "@saleor/components/Checkbox";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import TableHead from "@saleor/components/TableHead";
import TablePagination from "@saleor/components/TablePagination";
@ -84,7 +84,7 @@ const DiscountCategories: React.FC<DiscountCategoriesProps> = props => {
</Button>
}
/>
<Table>
<ResponsiveTable>
<TableHead
colSpan={numberOfColumns}
selected={selected}
@ -173,7 +173,7 @@ const DiscountCategories: React.FC<DiscountCategoriesProps> = props => {
)
)}
</TableBody>
</Table>
</ResponsiveTable>
</Card>
);
};

6
src/discounts/components/DiscountCollections/DiscountCollections.tsx
View file

@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
import Card from "@material-ui/core/Card";
import IconButton from "@material-ui/core/IconButton";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableFooter from "@material-ui/core/TableFooter";
@ -13,6 +12,7 @@ import { FormattedMessage, useIntl } from "react-intl";
import CardTitle from "@saleor/components/CardTitle";
import Checkbox from "@saleor/components/Checkbox";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import TableHead from "@saleor/components/TableHead";
import TablePagination from "@saleor/components/TablePagination";
@ -84,7 +84,7 @@ const DiscountCollections: React.FC<DiscountCollectionsProps> = props => {
</Button>
}
/>
<Table>
<ResponsiveTable>
<TableHead
colSpan={numberOfColumns}
selected={selected}
@ -173,7 +173,7 @@ const DiscountCollections: React.FC<DiscountCollectionsProps> = props => {
)
)}
</TableBody>
</Table>
</ResponsiveTable>
</Card>
);
};

6
src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx
View file

@ -4,7 +4,6 @@ import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogTitle from "@material-ui/core/DialogTitle";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableRow from "@material-ui/core/TableRow";
@ -21,6 +20,7 @@ import ConfirmButton, {
import Form from "@saleor/components/Form";
import FormSpacer from "@saleor/components/FormSpacer";
import Hr from "@saleor/components/Hr";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
// tslint:disable no-submodule-imports
import { ShopInfo_shop_countries } from "@saleor/components/Shop/types/ShopInfo";
import { buttonMessages } from "@saleor/intl";
@ -122,7 +122,7 @@ const DiscountCountrySelectDialog: React.FC<
description="country selection"
/>
</Typography>
<Table>
<ResponsiveTable>
<TableBody>
{filter(countries, data.query, {
key: "country"
@ -164,7 +164,7 @@ const DiscountCountrySelectDialog: React.FC<
);
})}
</TableBody>
</Table>
</ResponsiveTable>
</DialogContent>
<DialogActions>
<Button onClick={onClose}>

6
src/discounts/components/DiscountProducts/DiscountProducts.tsx
View file

@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
import Card from "@material-ui/core/Card";
import IconButton from "@material-ui/core/IconButton";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableFooter from "@material-ui/core/TableFooter";
@ -13,6 +12,7 @@ import { FormattedMessage, useIntl } from "react-intl";
import CardTitle from "@saleor/components/CardTitle";
import Checkbox from "@saleor/components/Checkbox";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import StatusLabel from "@saleor/components/StatusLabel";
import TableCellAvatar, {
@ -98,7 +98,7 @@ const DiscountProducts: React.FC<SaleProductsProps> = props => {
</Button>
}
/>
<Table>
<ResponsiveTable>
<TableHead
colSpan={numberOfColumns}
selected={selected}
@ -212,7 +212,7 @@ const DiscountProducts: React.FC<SaleProductsProps> = props => {
)
)}
</TableBody>
</Table>
</ResponsiveTable>
</Card>
);
};

6
src/discounts/components/SaleList/SaleList.tsx
View file

@ -1,5 +1,4 @@
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableFooter from "@material-ui/core/TableFooter";
@ -11,6 +10,7 @@ import Checkbox from "@saleor/components/Checkbox";
import Date from "@saleor/components/Date";
import Money from "@saleor/components/Money";
import Percent from "@saleor/components/Percent";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import TableHead from "@saleor/components/TableHead";
import TablePagination from "@saleor/components/TablePagination";
@ -77,7 +77,7 @@ const SaleList: React.FC<SaleListProps> = props => {
const classes = useStyles(props);
return (
<Table>
<ResponsiveTable>
<TableHead
colSpan={numberOfColumns}
selected={selected}
@ -189,7 +189,7 @@ const SaleList: React.FC<SaleListProps> = props => {
)
)}
</TableBody>
</Table>
</ResponsiveTable>
);
};
SaleList.displayName = "SaleList";

6
src/discounts/components/VoucherList/VoucherList.tsx
View file

@ -1,5 +1,4 @@
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableFooter from "@material-ui/core/TableFooter";
@ -11,6 +10,7 @@ import Checkbox from "@saleor/components/Checkbox";
import Date from "@saleor/components/Date";
import Money from "@saleor/components/Money";
import Percent from "@saleor/components/Percent";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import TableHead from "@saleor/components/TableHead";
import TablePagination from "@saleor/components/TablePagination";
@ -92,7 +92,7 @@ const VoucherList: React.FC<VoucherListProps> = props => {
const classes = useStyles(props);
return (
<Table>
<ResponsiveTable>
<TableHead
colSpan={numberOfColumns}
selected={selected}
@ -240,7 +240,7 @@ const VoucherList: React.FC<VoucherListProps> = props => {
)
)}
</TableBody>
</Table>
</ResponsiveTable>
);
};
VoucherList.displayName = "VoucherList";

6
src/home/components/HomeNotificationTable/HomeNotificationTable.tsx
View file

@ -1,6 +1,5 @@
import Card from "@material-ui/core/Card";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableRow from "@material-ui/core/TableRow";
@ -10,6 +9,7 @@ import React from "react";
import { FormattedMessage } from "react-intl";
import RequirePermissions from "@saleor/components/RequirePermissions";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import { UserPermissionProps } from "@saleor/types";
import { PermissionEnum } from "@saleor/types/globalTypes";
@ -47,7 +47,7 @@ const HomeNotificationTable: React.FC<HomeNotificationTableProps> = props => {
return (
<Card>
<Table>
<ResponsiveTable>
<TableBody className={classes.tableRow}>
<RequirePermissions
userPermissions={userPermissions}
@ -150,7 +150,7 @@ const HomeNotificationTable: React.FC<HomeNotificationTableProps> = props => {
</TableRow>
</RequirePermissions>
</TableBody>
</Table>
</ResponsiveTable>
</Card>
);
};

6
src/home/components/HomeProductListCard/HomeProductListCard.tsx
View file

@ -1,6 +1,5 @@
import Card from "@material-ui/core/Card";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableRow from "@material-ui/core/TableRow";
@ -11,6 +10,7 @@ import { FormattedMessage, useIntl } from "react-intl";
import CardTitle from "@saleor/components/CardTitle";
import Money from "@saleor/components/Money";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import TableCellAvatar from "@saleor/components/TableCellAvatar";
import { maybe, renderCollection } from "../../../misc";
@ -58,7 +58,7 @@ export const HomeProductList: React.FC<HomeProductListProps> = props => {
id: "homeProductsListCardHeader"
})}
/>
<Table>
<ResponsiveTable>
<TableBody>
{renderCollection(
topProducts,
@ -139,7 +139,7 @@ export const HomeProductList: React.FC<HomeProductListProps> = props => {
)
)}
</TableBody>
</Table>
</ResponsiveTable>
</Card>
);
};

6
src/navigation/components/MenuList/MenuList.tsx
View file

@ -1,6 +1,5 @@
import Card from "@material-ui/core/Card";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableFooter from "@material-ui/core/TableFooter";
@ -11,6 +10,7 @@ import { FormattedMessage } from "react-intl";
import Checkbox from "@saleor/components/Checkbox";
import IconButtonTableCell from "@saleor/components/IconButtonTableCell";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import TableHead from "@saleor/components/TableHead";
import TablePagination from "@saleor/components/TablePagination";
@ -65,7 +65,7 @@ const MenuList: React.FC<MenuListProps> = props => {
return (
<Card>
<Table>
<ResponsiveTable>
<TableHead
colSpan={numberOfColumns}
selected={selected}
@ -156,7 +156,7 @@ const MenuList: React.FC<MenuListProps> = props => {
)
)}
</TableBody>
</Table>
</ResponsiveTable>
</Card>
);
};

6
src/orders/components/OrderDraftDetailsProducts/OrderDraftDetailsProducts.tsx
View file

@ -1,6 +1,5 @@
import IconButton from "@material-ui/core/IconButton";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
@ -14,6 +13,7 @@ import { FormattedMessage } from "react-intl";
import { DebounceForm } from "@saleor/components/DebounceForm";
import Form from "@saleor/components/Form";
import Money from "@saleor/components/Money";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import TableCellAvatar, {
AVATAR_MARGIN
@ -76,7 +76,7 @@ const OrderDraftDetailsProducts: React.FC<
const classes = useStyles(props);
return (
<Table className={classes.table}>
<ResponsiveTable className={classes.table}>
{maybe(() => !!lines.length) && (
<TableHead>
<TableRow>
@ -187,7 +187,7 @@ const OrderDraftDetailsProducts: React.FC<
))
)}
</TableBody>
</Table>
</ResponsiveTable>
);
};
OrderDraftDetailsProducts.displayName = "OrderDraftDetailsProducts";

6
src/orders/components/OrderDraftList/OrderDraftList.tsx
View file

@ -1,5 +1,4 @@
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableFooter from "@material-ui/core/TableFooter";
@ -10,6 +9,7 @@ import { FormattedMessage, useIntl } from "react-intl";
import Checkbox from "@saleor/components/Checkbox";
import { DateTime } from "@saleor/components/Date";
import Money from "@saleor/components/Money";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import TableHead from "@saleor/components/TableHead";
import TablePagination from "@saleor/components/TablePagination";
@ -83,7 +83,7 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = props => {
: undefined;
return (
<Table>
<ResponsiveTable>
<TableHead
colSpan={numberOfColumns}
selected={selected}
@ -194,7 +194,7 @@ export const OrderDraftList: React.FC<OrderDraftListProps> = props => {
)
)}
</TableBody>
</Table>
</ResponsiveTable>
);
};
OrderDraftList.displayName = "OrderDraftList";

6
src/orders/components/OrderFulfillment/OrderFulfillment.tsx
View file

@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
import Card from "@material-ui/core/Card";
import CardActions from "@material-ui/core/CardActions";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
@ -14,6 +13,7 @@ import { FormattedMessage, useIntl } from "react-intl";
import CardMenu from "@saleor/components/CardMenu";
import CardTitle from "@saleor/components/CardTitle";
import Money from "@saleor/components/Money";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import StatusLabel from "@saleor/components/StatusLabel";
import TableCellAvatar, {
@ -142,7 +142,7 @@ const OrderFulfillment: React.FC<OrderFulfillmentProps> = props => {
)
}
/>
<Table className={classes.table}>
<ResponsiveTable className={classes.table}>
<TableHead>
<TableRow>
<TableCell className={classes.colName}>
@ -226,7 +226,7 @@ const OrderFulfillment: React.FC<OrderFulfillmentProps> = props => {
</TableRow>
)}
</TableBody>
</Table>
</ResponsiveTable>
{status === FulfillmentStatus.FULFILLED && !fulfillment.trackingNumber && (
<CardActions>
<Button color="primary" onClick={onTrackingCodeAdd}>

6
src/orders/components/OrderFulfillmentDialog/OrderFulfillmentDialog.tsx
View file

@ -4,7 +4,6 @@ import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogTitle from "@material-ui/core/DialogTitle";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
@ -18,6 +17,7 @@ import ConfirmButton, {
} from "@saleor/components/ConfirmButton";
import Form from "@saleor/components/Form";
import { FormSpacer } from "@saleor/components/FormSpacer";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import TableCellAvatar, {
AVATAR_MARGIN
} from "@saleor/components/TableCellAvatar";
@ -111,7 +111,7 @@ const OrderFulfillmentDialog: React.FC<OrderFulfillmentDialogProps> = props => {
description="dialog header"
/>
</DialogTitle>
<Table className={classes.table}>
<ResponsiveTable className={classes.table}>
<TableHead>
<TableRow>
<TableCell className={classes.colName}>
@ -174,7 +174,7 @@ const OrderFulfillmentDialog: React.FC<OrderFulfillmentDialogProps> = props => {
);
})}
</TableBody>
</Table>
</ResponsiveTable>
<DialogContent>
<FormSpacer />
<TextField

6
src/orders/components/OrderList/OrderList.tsx
View file

@ -1,5 +1,4 @@
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableFooter from "@material-ui/core/TableFooter";
@ -10,6 +9,7 @@ import { FormattedMessage, useIntl } from "react-intl";
import Checkbox from "@saleor/components/Checkbox";
import { DateTime } from "@saleor/components/Date";
import Money from "@saleor/components/Money";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import StatusLabel from "@saleor/components/StatusLabel";
import TableHead from "@saleor/components/TableHead";
@ -87,7 +87,7 @@ export const OrderList: React.FC<OrderListProps> = props => {
}))
: undefined;
return (
<Table>
<ResponsiveTable>
<TableHead
colSpan={numberOfColumns}
selected={selected}
@ -232,7 +232,7 @@ export const OrderList: React.FC<OrderListProps> = props => {
)
)}
</TableBody>
</Table>
</ResponsiveTable>
);
};
OrderList.displayName = "OrderList";

6
src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
View file

@ -5,7 +5,6 @@ import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogTitle from "@material-ui/core/DialogTitle";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableRow from "@material-ui/core/TableRow";
@ -19,6 +18,7 @@ import ConfirmButton, {
ConfirmButtonTransitionState
} from "@saleor/components/ConfirmButton";
import Money from "@saleor/components/Money";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import TableCellAvatar from "@saleor/components/TableCellAvatar";
import useSearchQuery from "@saleor/hooks/useSearchQuery";
import { buttonMessages } from "@saleor/intl";
@ -227,7 +227,7 @@ const OrderProductAddDialog: React.FC<OrderProductAddDialogProps> = props => {
}
threshold={10}
>
<Table key="table">
<ResponsiveTable key="table">
<TableBody>
{renderCollection(
products,
@ -316,7 +316,7 @@ const OrderProductAddDialog: React.FC<OrderProductAddDialogProps> = props => {
)
)}
</TableBody>
</Table>
</ResponsiveTable>
</InfiniteScroll>
</DialogContent>
<DialogActions>

6
src/orders/components/OrderUnfulfilledItems/OrderUnfulfilledItems.tsx
View file

@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
import Card from "@material-ui/core/Card";
import CardActions from "@material-ui/core/CardActions";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
@ -12,6 +11,7 @@ import { FormattedMessage, useIntl } from "react-intl";
import CardTitle from "@saleor/components/CardTitle";
import Money from "@saleor/components/Money";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import StatusLabel from "@saleor/components/StatusLabel";
import TableCellAvatar, {
@ -83,7 +83,7 @@ const OrderUnfulfilledItems: React.FC<OrderUnfulfilledItemsProps> = props => {
/>
}
/>
<Table className={classes.table}>
<ResponsiveTable className={classes.table}>
<TableHead>
<TableRow>
<TableCell className={classes.colName}>
@ -160,7 +160,7 @@ const OrderUnfulfilledItems: React.FC<OrderUnfulfilledItemsProps> = props => {
</TableRow>
))}
</TableBody>
</Table>
</ResponsiveTable>
{canFulfill && (
<CardActions>
<Button variant="text" color="primary" onClick={onFulfill}>

6
src/pages/components/PageList/PageList.tsx
View file

@ -1,6 +1,5 @@
import Card from "@material-ui/core/Card";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableFooter from "@material-ui/core/TableFooter";
@ -9,6 +8,7 @@ import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import Checkbox from "@saleor/components/Checkbox";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import StatusLabel from "@saleor/components/StatusLabel";
import TableHead from "@saleor/components/TableHead";
@ -65,7 +65,7 @@ const PageList: React.FC<PageListProps> = props => {
return (
<Card>
<Table>
<ResponsiveTable>
<TableHead
colSpan={numberOfColumns}
selected={selected}
@ -169,7 +169,7 @@ const PageList: React.FC<PageListProps> = props => {
)
)}
</TableBody>
</Table>
</ResponsiveTable>
</Card>
);
};

6
src/plugins/components/PluginsList/PluginsList.tsx
View file

@ -1,6 +1,5 @@
import Card from "@material-ui/core/Card";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableFooter from "@material-ui/core/TableFooter";
@ -10,6 +9,7 @@ import EditIcon from "@material-ui/icons/Edit";
import React from "react";
import { useIntl } from "react-intl";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import StatusLabel from "@saleor/components/StatusLabel";
import TablePagination from "@saleor/components/TablePagination";
@ -59,7 +59,7 @@ const PluginList: React.FC<PluginListProps> = props => {
const intl = useIntl();
return (
<Card>
<Table>
<ResponsiveTable>
<TableHead>
<TableCell className={classes.colName}>
{intl.formatMessage({
@ -139,7 +139,7 @@ const PluginList: React.FC<PluginListProps> = props => {
)
)}
</TableBody>
</Table>
</ResponsiveTable>
</Card>
);
};

6
src/productTypes/components/AssignAttributeDialog/AssignAttributeDialog.tsx
View file

@ -6,7 +6,6 @@ import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
import makeStyles from "@material-ui/core/styles/makeStyles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableRow from "@material-ui/core/TableRow";
@ -24,6 +23,7 @@ import ConfirmButton, {
import useElementScroll, {
isScrolledToBottom
} from "@saleor/hooks/useElementScroll";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
import useModalDialogOpen from "@saleor/hooks/useModalDialogOpen";
import useSearchQuery from "@saleor/hooks/useSearchQuery";
@ -136,7 +136,7 @@ const AssignAttributeDialog: React.FC<AssignAttributeDialogProps> = ({
threshold={100}
key="infinite-scroll"
>
<Table key="table">
<ResponsiveTable key="table">
<TableBody>
{renderCollection(
attributes,
@ -178,7 +178,7 @@ const AssignAttributeDialog: React.FC<AssignAttributeDialogProps> = ({
)
)}
</TableBody>
</Table>
</ResponsiveTable>
</InfiniteScroll>
</DialogContent>
{errors.length > 0 && (

6
src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx
View file

@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
import Card from "@material-ui/core/Card";
import IconButton from "@material-ui/core/IconButton";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableCell from "@material-ui/core/TableCell";
import TableRow from "@material-ui/core/TableRow";
import DeleteIcon from "@material-ui/icons/Delete";
@ -11,6 +10,7 @@ import { FormattedMessage, useIntl } from "react-intl";
import CardTitle from "@saleor/components/CardTitle";
import Checkbox from "@saleor/components/Checkbox";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import {
SortableTableBody,
@ -111,7 +111,7 @@ const ProductTypeAttributes: React.FC<ProductTypeAttributesProps> = props => {
</Button>
}
/>
<Table>
<ResponsiveTable>
<TableHead
colSpan={numberOfColumns}
disabled={disabled}
@ -196,7 +196,7 @@ const ProductTypeAttributes: React.FC<ProductTypeAttributesProps> = props => {
)
)}
</SortableTableBody>
</Table>
</ResponsiveTable>
</Card>
);
};

6
src/productTypes/components/ProductTypeList/ProductTypeList.tsx
View file

@ -1,5 +1,4 @@
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableFooter from "@material-ui/core/TableFooter";
@ -9,6 +8,7 @@ import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import Checkbox from "@saleor/components/Checkbox";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import TableHead from "@saleor/components/TableHead";
import TablePagination from "@saleor/components/TablePagination";
@ -61,7 +61,7 @@ const ProductTypeList: React.FC<ProductTypeListProps> = props => {
const intl = useIntl();
return (
<Table>
<ResponsiveTable>
<TableHead
colSpan={numberOfColumns}
selected={selected}
@ -185,7 +185,7 @@ const ProductTypeList: React.FC<ProductTypeListProps> = props => {
)
)}
</TableBody>
</Table>
</ResponsiveTable>
);
};
ProductTypeList.displayName = "ProductTypeList";

6
src/products/components/ProductList/ProductList.tsx
View file

@ -1,5 +1,4 @@
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableFooter from "@material-ui/core/TableFooter";
@ -10,6 +9,7 @@ import { FormattedMessage, useIntl } from "react-intl";
import Checkbox from "@saleor/components/Checkbox";
import Money from "@saleor/components/Money";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import StatusLabel from "@saleor/components/StatusLabel";
import TableCellAvatar, {
@ -131,7 +131,7 @@ export const ProductList: React.FC<ProductListProps> = props => {
return (
<div className={classes.tableContainer}>
<Table className={classes.table}>
<ResponsiveTable className={classes.table}>
<colgroup>
<col />
<col className={classes.colName} />
@ -392,7 +392,7 @@ export const ProductList: React.FC<ProductListProps> = props => {
)
)}
</TableBody>
</Table>
</ResponsiveTable>
</div>
);
};

6
src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx
View file

@ -1,7 +1,6 @@
import Button from "@material-ui/core/Button";
import Card from "@material-ui/core/Card";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableRow from "@material-ui/core/TableRow";
@ -10,6 +9,7 @@ import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import CardTitle from "@saleor/components/CardTitle";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import TableCellAvatar from "@saleor/components/TableCellAvatar";
import { maybe, renderCollection } from "../../../misc";
@ -64,7 +64,7 @@ const ProductVariantNavigation: React.FC<
description: "section header"
})}
/>
<Table>
<ResponsiveTable>
<TableBody>
{renderCollection(variants, variant => (
<TableRow
@ -110,7 +110,7 @@ const ProductVariantNavigation: React.FC<
</TableRow>
)}
</TableBody>
</Table>
</ResponsiveTable>
</Card>
);
};

6
src/products/components/ProductVariants/ProductVariants.tsx
View file

@ -3,7 +3,6 @@ import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Hidden from "@material-ui/core/Hidden";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableRow from "@material-ui/core/TableRow";
@ -14,6 +13,7 @@ import { FormattedMessage, useIntl } from "react-intl";
import CardTitle from "@saleor/components/CardTitle";
import Checkbox from "@saleor/components/Checkbox";
import Money from "@saleor/components/Money";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import StatusLabel from "@saleor/components/StatusLabel";
import TableHead from "@saleor/components/TableHead";
@ -133,7 +133,7 @@ export const ProductVariants: React.FC<ProductVariantsProps> = props => {
</CardContent>
)}
{hasVariants && (
<Table className={classes.denseTable}>
<ResponsiveTable className={classes.denseTable}>
<TableHead
colSpan={numberOfColumns}
selected={selected}
@ -237,7 +237,7 @@ export const ProductVariants: React.FC<ProductVariantsProps> = props => {
);
})}
</TableBody>
</Table>
</ResponsiveTable>
)}
</Card>
);

6
src/services/components/ServiceList/ServiceList.tsx
View file

@ -1,6 +1,5 @@
import IconButton from "@material-ui/core/IconButton";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableFooter from "@material-ui/core/TableFooter";
@ -12,6 +11,7 @@ import EditIcon from "@material-ui/icons/Edit";
import React from "react";
import { FormattedMessage } from "react-intl";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import TablePagination from "@saleor/components/TablePagination";
import { maybe, renderCollection, stopPropagation } from "@saleor/misc";
@ -68,7 +68,7 @@ const ServiceList: React.FC<ServiceListProps> = props => {
const classes = useStyles(props);
return (
<Table className={classes.table}>
<ResponsiveTable className={classes.table}>
<TableHead>
<TableRow>
<TableCell className={classes.colName}>
@ -154,7 +154,7 @@ const ServiceList: React.FC<ServiceListProps> = props => {
)
)}
</TableBody>
</Table>
</ResponsiveTable>
);
};
ServiceList.displayName = "ServiceList";

6
src/services/components/ServiceTokens/ServiceTokens.tsx
View file

@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
import Card from "@material-ui/core/Card";
import IconButton from "@material-ui/core/IconButton";
import makeStyles from "@material-ui/core/styles/makeStyles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
@ -12,6 +11,7 @@ import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import CardTitle from "@saleor/components/CardTitle";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import { maybe, renderCollection } from "@saleor/misc";
import { ServiceDetailsFragment_tokens } from "@saleor/services/types/ServiceDetailsFragment";
@ -64,7 +64,7 @@ const ServiceTokens: React.FC<ServiceTokensProps> = props => {
</Button>
}
/>
<Table>
<ResponsiveTable>
<TableHead>
<TableRow>
<TableCell className={classes.colNote}>
@ -117,7 +117,7 @@ const ServiceTokens: React.FC<ServiceTokensProps> = props => {
)
)}
</TableBody>
</Table>
</ResponsiveTable>
</Card>
);
};

10
src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx
View file

@ -4,7 +4,6 @@ import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogTitle from "@material-ui/core/DialogTitle";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableRow from "@material-ui/core/TableRow";
@ -21,6 +20,7 @@ import ConfirmButton, {
import Form from "@saleor/components/Form";
import FormSpacer from "@saleor/components/FormSpacer";
import Hr from "@saleor/components/Hr";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import { ShopInfo_shop_countries } from "@saleor/components/Shop/types/ShopInfo";
import { buttonMessages } from "@saleor/intl";
@ -122,7 +122,7 @@ const ShippingZoneCountriesAssignDialog: React.FC<
<Typography className={classes.heading} variant="subtitle1">
<FormattedMessage defaultMessage="Quick Pick" />
</Typography>
<Table className={classes.table}>
<ResponsiveTable className={classes.table}>
<TableBody>
<TableRow>
<TableCell className={classes.wideCell}>
@ -149,7 +149,7 @@ const ShippingZoneCountriesAssignDialog: React.FC<
</TableCell>
</TableRow>
</TableBody>
</Table>
</ResponsiveTable>
</DialogContent>
<DialogContent className={classes.container}>
@ -159,7 +159,7 @@ const ShippingZoneCountriesAssignDialog: React.FC<
description="country selection"
/>
</Typography>
<Table className={classes.table}>
<ResponsiveTable className={classes.table}>
<TableBody>
{filter(countries, data.query, {
key: "country"
@ -201,7 +201,7 @@ const ShippingZoneCountriesAssignDialog: React.FC<
);
})}
</TableBody>
</Table>
</ResponsiveTable>
</DialogContent>
<DialogActions>
<Button onClick={onClose}>

6
src/shipping/components/ShippingZoneRates/ShippingZoneRates.tsx
View file

@ -1,7 +1,6 @@
import Button from "@material-ui/core/Button";
import Card from "@material-ui/core/Card";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
@ -15,6 +14,7 @@ import CardTitle from "@saleor/components/CardTitle";
import IconButtonTableCell from "@saleor/components/IconButtonTableCell";
import Money from "@saleor/components/Money";
import MoneyRange from "@saleor/components/MoneyRange";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import WeightRange from "@saleor/components/WeightRange";
import { maybe, renderCollection } from "../../../misc";
@ -82,7 +82,7 @@ const ShippingZoneRates: React.FC<ShippingZoneRatesProps> = props => {
</Button>
}
/>
<Table>
<ResponsiveTable>
<TableHead>
<TableRow>
<TableCell className={classes.nameColumn}>
@ -172,7 +172,7 @@ const ShippingZoneRates: React.FC<ShippingZoneRatesProps> = props => {
)
)}
</TableBody>
</Table>
</ResponsiveTable>
</Card>
);
};

6
src/shipping/components/ShippingZonesList/ShippingZonesList.tsx
View file

@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
import Card from "@material-ui/core/Card";
import IconButton from "@material-ui/core/IconButton";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableFooter from "@material-ui/core/TableFooter";
@ -13,6 +12,7 @@ import { FormattedMessage, useIntl } from "react-intl";
import CardTitle from "@saleor/components/CardTitle";
import Checkbox from "@saleor/components/Checkbox";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import TableHead from "@saleor/components/TableHead";
import TablePagination from "@saleor/components/TablePagination";
@ -88,7 +88,7 @@ const ShippingZonesList: React.FC<ShippingZonesListProps> = props => {
</Button>
}
/>
<Table>
<ResponsiveTable>
<TableHead
colSpan={numberOfColumns}
selected={selected}
@ -183,7 +183,7 @@ const ShippingZonesList: React.FC<ShippingZonesListProps> = props => {
)
)}
</TableBody>
</Table>
</ResponsiveTable>
</Card>
);
};

6
src/siteSettings/components/SiteSettingsKeys/SiteSettingsKeys.tsx
View file

@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
import Card from "@material-ui/core/Card";
import IconButton from "@material-ui/core/IconButton";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
@ -12,6 +11,7 @@ import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import CardTitle from "@saleor/components/CardTitle";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import { authorizationKeyTypes, maybe, renderCollection } from "../../../misc";
import { ICONBUTTON_SIZE } from "../../../theme";
@ -58,7 +58,7 @@ const SiteSettingsKeys: React.FC<SiteSettingsKeysProps> = props => {
</Button>
}
/>
<Table>
<ResponsiveTable>
<TableHead>
<TableRow>
<TableCell>
@ -109,7 +109,7 @@ const SiteSettingsKeys: React.FC<SiteSettingsKeysProps> = props => {
)
)}
</TableBody>
</Table>
</ResponsiveTable>
</Card>
);
};

6
src/staff/components/StaffList/StaffList.tsx
View file

@ -1,5 +1,4 @@
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableFooter from "@material-ui/core/TableFooter";
@ -10,6 +9,7 @@ import classNames from "classnames";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import TablePagination from "@saleor/components/TablePagination";
import {
@ -78,7 +78,7 @@ const StaffList: React.FC<StaffListProps> = props => {
const intl = useIntl();
return (
<Table>
<ResponsiveTable>
<TableHead>
<TableRow>
<TableCell className={classes.wideColumn}>
@ -167,7 +167,7 @@ const StaffList: React.FC<StaffListProps> = props => {
)
)}
</TableBody>
</Table>
</ResponsiveTable>
);
};
StaffList.displayName = "StaffList";

6
src/storybook/stories/components/EditableTableCell.tsx
View file

@ -1,4 +1,3 @@
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
@ -7,6 +6,7 @@ import { storiesOf } from "@storybook/react";
import React from "react";
import EditableTableCell from "@saleor/components/EditableTableCell";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import CardDecorator from "../../CardDecorator";
import Decorator from "../../Decorator";
@ -14,7 +14,7 @@ storiesOf("Generics / EditableTableCell", module)
.addDecorator(CardDecorator)
.addDecorator(Decorator)
.add("default", () => (
<Table>
<ResponsiveTable>
<TableHead>
<TableCell>Some header</TableCell>
<TableCell>Some header</TableCell>
@ -30,5 +30,5 @@ storiesOf("Generics / EditableTableCell", module)
<TableCell>Some value</TableCell>
</TableRow>
</TableBody>
</Table>
</ResponsiveTable>
));

18
src/storybook/stories/components/TablePagination.tsx
View file

@ -1,7 +1,7 @@
import Table from "@material-ui/core/Table";
import { storiesOf } from "@storybook/react";
import React from "react";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import TablePagination from "@saleor/components/TablePagination";
import CardDecorator from "../../CardDecorator";
import Decorator from "../../Decorator";
@ -10,7 +10,7 @@ storiesOf("Generics / TablePagination", module)
.addDecorator(CardDecorator)
.addDecorator(Decorator)
.add("no previous / next page", () => (
<Table>
<ResponsiveTable>
<TablePagination
colSpan={1}
hasNextPage={false}
@ -18,10 +18,10 @@ storiesOf("Generics / TablePagination", module)
onPreviousPage={undefined}
onNextPage={undefined}
/>
</Table>
</ResponsiveTable>
))
.add("previous page available", () => (
<Table>
<ResponsiveTable>
<TablePagination
colSpan={1}
hasNextPage={false}
@ -29,10 +29,10 @@ storiesOf("Generics / TablePagination", module)
onPreviousPage={undefined}
onNextPage={undefined}
/>
</Table>
</ResponsiveTable>
))
.add("next page available", () => (
<Table>
<ResponsiveTable>
<TablePagination
colSpan={1}
hasNextPage={true}
@ -40,10 +40,10 @@ storiesOf("Generics / TablePagination", module)
onPreviousPage={undefined}
onNextPage={undefined}
/>
</Table>
</ResponsiveTable>
))
.add("both previous and next pages are available", () => (
<Table>
<ResponsiveTable>
<TablePagination
colSpan={1}
hasNextPage={true}
@ -51,5 +51,5 @@ storiesOf("Generics / TablePagination", module)
onPreviousPage={undefined}
onNextPage={undefined}
/>
</Table>
</ResponsiveTable>
));

6
src/taxes/components/CountryList/CountryList.tsx
View file

@ -1,6 +1,5 @@
import Card from "@material-ui/core/Card";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
@ -9,6 +8,7 @@ import classNames from "classnames";
import React from "react";
import { FormattedMessage } from "react-intl";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import { maybe, renderCollection } from "../../../misc";
import { CountryList_shop_countries } from "../../types/CountryList";
@ -34,7 +34,7 @@ const CountryList: React.FC<CountryListProps> = props => {
return (
<Card>
<Table>
<ResponsiveTable>
<TableHead>
<TableRow>
<TableCell>
@ -83,7 +83,7 @@ const CountryList: React.FC<CountryListProps> = props => {
)
)}
</TableBody>
</Table>
</ResponsiveTable>
</Card>
);
};

6
src/taxes/components/CountryTaxesPage/CountryTaxesPage.tsx
View file

@ -1,6 +1,5 @@
import Card from "@material-ui/core/Card";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
@ -12,6 +11,7 @@ import AppHeader from "@saleor/components/AppHeader";
import { Container } from "@saleor/components/Container";
import Grid from "@saleor/components/Grid";
import PageHeader from "@saleor/components/PageHeader";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import { sectionNames } from "@saleor/intl";
import { TaxRateType } from "@saleor/types/globalTypes";
@ -165,7 +165,7 @@ const CountryTaxesPage: React.FC<CountryTaxesPageProps> = props => {
<Grid>
<div>
<Card>
<Table>
<ResponsiveTable>
<TableHead>
<TableRow>
<TableCell className={classes.wideColumn}>
@ -206,7 +206,7 @@ const CountryTaxesPage: React.FC<CountryTaxesPageProps> = props => {
)
)}
</TableBody>
</Table>
</ResponsiveTable>
</Card>
</div>
</Grid>

6
src/translations/components/TranslationsEntitiesList/TranslationsEntitiesList.tsx
View file

@ -1,6 +1,5 @@
import { Omit } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableFooter from "@material-ui/core/TableFooter";
@ -12,6 +11,7 @@ import { FormattedMessage, useIntl } from "react-intl";
import { ListProps } from "../../../types";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import TablePagination from "@saleor/components/TablePagination";
import { maybe, renderCollection } from "../../../misc";
@ -58,7 +58,7 @@ const TranslationsEntitiesList: React.FC<
const intl = useIntl();
return (
<Table>
<ResponsiveTable>
<TableHead>
<TableRow>
<TableCell className={classes.wideColumn}>
@ -126,7 +126,7 @@ const TranslationsEntitiesList: React.FC<
)
)}
</TableBody>
</Table>
</ResponsiveTable>
);
};
TranslationsEntitiesList.displayName = "TranslationsEntitiesList";

6
src/translations/components/TranslationsLanguageList/TranslationsLanguageList.tsx
View file

@ -1,6 +1,5 @@
import Card from "@material-ui/core/Card";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
@ -8,6 +7,7 @@ import TableRow from "@material-ui/core/TableRow";
import React from "react";
import { FormattedMessage } from "react-intl";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import { ShopInfo_shop_languages } from "@saleor/components/Shop/types/ShopInfo";
import Skeleton from "@saleor/components/Skeleton";
import { maybe, renderCollection } from "../../../misc";
@ -35,7 +35,7 @@ const TranslationsLanguageList: React.FC<
return (
<Card>
<Table>
<ResponsiveTable>
<TableHead>
<TableRow>
<TableCell>
@ -70,7 +70,7 @@ const TranslationsLanguageList: React.FC<
)
)}
</TableBody>
</Table>
</ResponsiveTable>
</Card>
);
};

6
src/webhooks/components/WebhooksList/WebhooksList.tsx
View file

@ -1,6 +1,5 @@
import IconButton from "@material-ui/core/IconButton";
import makeStyles from "@material-ui/core/styles/makeStyles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableFooter from "@material-ui/core/TableFooter";
@ -11,6 +10,7 @@ import EditIcon from "@material-ui/icons/Edit";
import React from "react";
import { useIntl } from "react-intl";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton";
import TablePagination from "@saleor/components/TablePagination";
import { maybe, renderCollection, stopPropagation } from "@saleor/misc";
@ -68,7 +68,7 @@ const WebhooksList: React.FC<WebhooksListProps> = ({
const classes = useStyles({});
return (
<Table className={classes.table}>
<ResponsiveTable className={classes.table}>
<TableHead>
<TableRow>
<TableCell className={classes.colName}>
@ -156,7 +156,7 @@ const WebhooksList: React.FC<WebhooksListProps> = ({
)
)}
</TableBody>
</Table>
</ResponsiveTable>
);
};
WebhooksList.displayName = "WebhooksList";