diff --git a/package-lock.json b/package-lock.json index e400ff786..765febf80 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20308,9 +20308,9 @@ "dev": true }, "typescript": { - "version": "3.5.3", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.5.3.tgz", - "integrity": "sha512-ACzBtm/PhXBDId6a6sDJfroT2pOWt/oOnk4/dElG5G33ZL776N3Y6/6bKZJBFpd+b05F3Ct9qDjMeJmRWtE2/g==" + "version": "3.7.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.7.2.tgz", + "integrity": "sha512-ml7V7JfiN2Xwvcer+XAf2csGO1bPBdRbFCkYBczNZggrBZ9c7G3riSUeJmqEU5uOtXNPMhE3n+R4FA/3YOAWOQ==" }, "ua-parser-js": { "version": "0.7.20", diff --git a/package.json b/package.json index db6bc6a6a..c630a8c32 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,7 @@ "react-sortable-tree": "^2.6.2", "react-svg": "^2.2.11", "slugify": "^1.3.4", - "typescript": "^3.5.3", + "typescript": "^3.6.4", "url-join": "^4.0.1", "use-react-router": "^1.0.7" }, diff --git a/src/attributes/components/AttributeBulkDeleteDialog/index.ts b/src/attributes/components/AttributeBulkDeleteDialog/index.ts index 12ecc2424..5a718a0bf 100644 --- a/src/attributes/components/AttributeBulkDeleteDialog/index.ts +++ b/src/attributes/components/AttributeBulkDeleteDialog/index.ts @@ -1,2 +1,2 @@ -export { default } from './AttributeBulkDeleteDialog'; -export * from './AttributeBulkDeleteDialog'; \ No newline at end of file +export { default } from "./AttributeBulkDeleteDialog"; +export * from "./AttributeBulkDeleteDialog"; diff --git a/src/attributes/components/AttributeDeleteDialog/index.ts b/src/attributes/components/AttributeDeleteDialog/index.ts index d3f62c3df..8f34c2b14 100644 --- a/src/attributes/components/AttributeDeleteDialog/index.ts +++ b/src/attributes/components/AttributeDeleteDialog/index.ts @@ -1,2 +1,2 @@ -export { default } from './AttributeDeleteDialog'; -export * from './AttributeDeleteDialog'; \ No newline at end of file +export { default } from "./AttributeDeleteDialog"; +export * from "./AttributeDeleteDialog"; diff --git a/src/attributes/components/AttributeDetails/index.ts b/src/attributes/components/AttributeDetails/index.ts index 93e888b1e..295325b2f 100644 --- a/src/attributes/components/AttributeDetails/index.ts +++ b/src/attributes/components/AttributeDetails/index.ts @@ -1,2 +1,2 @@ -export { default } from './AttributeDetails'; -export * from './AttributeDetails'; \ No newline at end of file +export { default } from "./AttributeDetails"; +export * from "./AttributeDetails"; diff --git a/src/attributes/components/AttributeList/index.ts b/src/attributes/components/AttributeList/index.ts index 4a094ce5f..9b2e63fa5 100644 --- a/src/attributes/components/AttributeList/index.ts +++ b/src/attributes/components/AttributeList/index.ts @@ -1,2 +1,2 @@ -export { default } from './AttributeList'; -export * from './AttributeList'; \ No newline at end of file +export { default } from "./AttributeList"; +export * from "./AttributeList"; diff --git a/src/attributes/components/AttributeListPage/index.ts b/src/attributes/components/AttributeListPage/index.ts index e044052b6..2633c7769 100644 --- a/src/attributes/components/AttributeListPage/index.ts +++ b/src/attributes/components/AttributeListPage/index.ts @@ -1,2 +1,2 @@ -export { default } from './AttributeListPage'; -export * from './AttributeListPage'; \ No newline at end of file +export { default } from "./AttributeListPage"; +export * from "./AttributeListPage"; diff --git a/src/attributes/components/AttributePage/index.ts b/src/attributes/components/AttributePage/index.ts index 08880e9d8..b73b512a1 100644 --- a/src/attributes/components/AttributePage/index.ts +++ b/src/attributes/components/AttributePage/index.ts @@ -1,2 +1,2 @@ -export { default } from './AttributePage'; -export * from './AttributePage'; \ No newline at end of file +export { default } from "./AttributePage"; +export * from "./AttributePage"; diff --git a/src/attributes/components/AttributeProperties/index.ts b/src/attributes/components/AttributeProperties/index.ts index 4f02c2478..df50bbd1b 100644 --- a/src/attributes/components/AttributeProperties/index.ts +++ b/src/attributes/components/AttributeProperties/index.ts @@ -1,2 +1,2 @@ -export { default } from './AttributeProperties'; -export * from './AttributeProperties'; \ No newline at end of file +export { default } from "./AttributeProperties"; +export * from "./AttributeProperties"; diff --git a/src/attributes/components/AttributeValueDeleteDialog/index.ts b/src/attributes/components/AttributeValueDeleteDialog/index.ts index b58e72f50..10bdf1147 100644 --- a/src/attributes/components/AttributeValueDeleteDialog/index.ts +++ b/src/attributes/components/AttributeValueDeleteDialog/index.ts @@ -1,2 +1,2 @@ -export { default } from './AttributeValueDeleteDialog'; -export * from './AttributeValueDeleteDialog'; \ No newline at end of file +export { default } from "./AttributeValueDeleteDialog"; +export * from "./AttributeValueDeleteDialog"; diff --git a/src/attributes/components/AttributeValueEditDialog/index.ts b/src/attributes/components/AttributeValueEditDialog/index.ts index 1dfc3d061..567f5dff8 100644 --- a/src/attributes/components/AttributeValueEditDialog/index.ts +++ b/src/attributes/components/AttributeValueEditDialog/index.ts @@ -1,2 +1,2 @@ -export { default } from './AttributeValueEditDialog'; -export * from './AttributeValueEditDialog'; \ No newline at end of file +export { default } from "./AttributeValueEditDialog"; +export * from "./AttributeValueEditDialog"; diff --git a/src/attributes/components/AttributeValues/index.ts b/src/attributes/components/AttributeValues/index.ts index dae7f6baf..02874e273 100644 --- a/src/attributes/components/AttributeValues/index.ts +++ b/src/attributes/components/AttributeValues/index.ts @@ -1,2 +1,2 @@ -export { default } from './AttributeValues'; -export * from './AttributeValues'; \ No newline at end of file +export { default } from "./AttributeValues"; +export * from "./AttributeValues"; diff --git a/src/attributes/views/AttributeList/filters.ts b/src/attributes/views/AttributeList/filters.ts index 51db99dc9..e6f2b9d1d 100644 --- a/src/attributes/views/AttributeList/filters.ts +++ b/src/attributes/views/AttributeList/filters.ts @@ -12,12 +12,12 @@ import { export const PRODUCT_FILTERS_KEY = "productFilters"; export function getFilterVariables( - params: AttributeListUrlFilters - ): AttributeFilterInput { - return { - search: params.query - }; - } + params: AttributeListUrlFilters +): AttributeFilterInput { + return { + search: params.query + }; +} export const { deleteFilterTab, diff --git a/src/auth/components/LoginLoading/LoginLoading.tsx b/src/auth/components/LoginLoading/LoginLoading.tsx index f53b921aa..63ecfae8d 100644 --- a/src/auth/components/LoginLoading/LoginLoading.tsx +++ b/src/auth/components/LoginLoading/LoginLoading.tsx @@ -1,21 +1,26 @@ import CircularProgress from "@material-ui/core/CircularProgress"; -import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import React from "react"; -const styles = createStyles({ - root: { - alignItems: "center", - display: "flex", - height: "100vh", - justifyContent: "center" - } -}); -const LoginLoading = withStyles(styles, { name: "LoginLoading" })( - ({ classes }: WithStyles) => ( +const useStyles = makeStyles( + { + root: { + alignItems: "center", + display: "flex", + height: "100vh", + justifyContent: "center" + } + }, + { name: "LoginLoading" } +); +const LoginLoading: React.FC = props => { + const classes = useStyles(props); + + return (
- ) -); + ); +}; LoginLoading.displayName = "LoginLoading"; export default LoginLoading; diff --git a/src/auth/components/LoginPage/LoginPage.tsx b/src/auth/components/LoginPage/LoginPage.tsx index 554fde389..fc68ed093 100644 --- a/src/auth/components/LoginPage/LoginPage.tsx +++ b/src/auth/components/LoginPage/LoginPage.tsx @@ -1,10 +1,5 @@ import Button from "@material-ui/core/Button"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; import Typography from "@material-ui/core/Typography"; import React from "react"; @@ -19,8 +14,8 @@ export interface FormData { password: string; } -const styles = theme => - createStyles({ +const useStyles = makeStyles( + theme => ({ buttonContainer: { display: "flex", justifyContent: "flex-end" @@ -42,89 +37,86 @@ const styles = theme => marginBottom: theme.spacing(3), padding: theme.spacing(1.5) } - }); + }), + { name: "LoginCard" } +); -export interface LoginCardProps extends WithStyles { +export interface LoginCardProps { error: boolean; disableLoginButton: boolean; onPasswordRecovery: () => void; onSubmit?(event: FormData); } -const LoginCard = withStyles(styles, { name: "LoginCard" })( - ({ - classes, - error, - disableLoginButton, - onPasswordRecovery, - onSubmit - }: LoginCardProps) => { - const intl = useIntl(); +const LoginCard: React.FC = props => { + const { error, disableLoginButton, onPasswordRecovery, onSubmit } = props; - return ( -
- {({ change: handleChange, data, submit: handleSubmit }) => ( - <> - {error && ( -
- - - -
- )} - - - - -
- + const classes = useStyles(props); + const intl = useIntl(); + + return ( + + {({ change: handleChange, data, submit: handleSubmit }) => ( + <> + {error && ( +
+ + +
- - - - - - )} - - ); - } -); + )} + + + + +
+ +
+ + + + + + )} + + ); +}; LoginCard.displayName = "LoginCard"; export default LoginCard; diff --git a/src/auth/misc.ts b/src/auth/misc.ts index 497d8a650..975ffc5cf 100644 --- a/src/auth/misc.ts +++ b/src/auth/misc.ts @@ -1,4 +1,4 @@ -import { PermissionEnum } from '../types/globalTypes' +import { PermissionEnum } from "../types/globalTypes"; import { User } from "./types/User"; export const hasPermission = (permission: PermissionEnum, user: User) => diff --git a/src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx b/src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx index 0ca2bf615..aa1eb6a2b 100644 --- a/src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx +++ b/src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx @@ -4,19 +4,14 @@ import DialogActions from "@material-ui/core/DialogActions"; import DialogContent from "@material-ui/core/DialogContent"; import DialogContentText from "@material-ui/core/DialogContentText"; import DialogTitle from "@material-ui/core/DialogTitle"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import React from "react"; import { FormattedMessage } from "react-intl"; import { buttonMessages } from "@saleor/intl"; -const styles = theme => - createStyles({ +const useStyles = makeStyles( + theme => ({ deleteButton: { "&:hover": { backgroundColor: theme.palette.error.main @@ -24,49 +19,58 @@ const styles = theme => backgroundColor: theme.palette.error.main, color: theme.palette.error.contrastText } - }); + }), + { + name: "CategoryDeleteDialog" + } +); -export interface CategoryDeleteDialogProps extends WithStyles { +export interface CategoryDeleteDialogProps { open: boolean; name: string; onClose(); onConfirm(); } -const CategoryDeleteDialog = withStyles(styles, { - name: "CategoryDeleteDialog" -})(({ classes, name, open, onConfirm, onClose }: CategoryDeleteDialogProps) => ( - - - - - - +const CategoryDeleteDialog: React.FC = props => { + const { name, open, onConfirm, onClose } = props; + + const classes = useStyles(props); + + return ( + + {name} - }} + defaultMessage="Delete category" + description="dialog title" /> - - - - - - - -)); + + + + {name} + }} + /> + + + + + + + + ); +}; + CategoryDeleteDialog.displayName = "CategoryDeleteDialog"; export default CategoryDeleteDialog; diff --git a/src/categories/components/CategoryList/CategoryList.tsx b/src/categories/components/CategoryList/CategoryList.tsx index bed629fb4..8426d628b 100644 --- a/src/categories/components/CategoryList/CategoryList.tsx +++ b/src/categories/components/CategoryList/CategoryList.tsx @@ -1,9 +1,4 @@ -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +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"; @@ -20,8 +15,8 @@ import TablePagination from "@saleor/components/TablePagination"; import { maybe, renderCollection } from "@saleor/misc"; import { ListActions, ListProps } from "@saleor/types"; -const styles = theme => - createStyles({ +const useStyles = makeStyles( + theme => ({ [theme.breakpoints.up("lg")]: { colName: { width: 840 @@ -45,7 +40,9 @@ const styles = theme => tableRow: { cursor: "pointer" } - }); + }), + { name: "CategoryList" } +); interface CategoryListProps extends ListProps, ListActions { categories?: CategoryFragment[]; @@ -55,10 +52,9 @@ interface CategoryListProps extends ListProps, ListActions { const numberOfColumns = 4; -const CategoryList = withStyles(styles, { name: "CategoryList" })( - ({ +const CategoryList: React.FC = props => { + const { categories, - classes, disabled, settings, pageInfo, @@ -72,7 +68,11 @@ const CategoryList = withStyles(styles, { name: "CategoryList" })( onPreviousPage, onUpdateListSettings, onRowClick - }: CategoryListProps & WithStyles) => ( + } = props; + + const classes = useStyles(props); + + return (
- ) -); + ); +}; + CategoryList.displayName = "CategoryList"; export default CategoryList; diff --git a/src/categories/components/CategoryProductList/CategoryProductList.tsx b/src/categories/components/CategoryProductList/CategoryProductList.tsx index e734f1c25..82499e54f 100644 --- a/src/categories/components/CategoryProductList/CategoryProductList.tsx +++ b/src/categories/components/CategoryProductList/CategoryProductList.tsx @@ -1,9 +1,4 @@ -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +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"; @@ -25,8 +20,8 @@ import { ListActions, ListProps } from "@saleor/types"; import React from "react"; import { CategoryDetails_category_products_edges_node } from "../../types/CategoryDetails"; -const styles = theme => - createStyles({ +const useStyles = makeStyles( + theme => ({ [theme.breakpoints.up("lg")]: { colName: { width: "auto" @@ -69,20 +64,20 @@ const styles = theme => textRight: { textAlign: "right" } - }); + }), + { + name: "CategoryProductList" + } +); -interface CategoryProductListProps - extends ListProps, - ListActions, - WithStyles { +interface CategoryProductListProps extends ListProps, ListActions { products: CategoryDetails_category_products_edges_node[]; } -export const CategoryProductList = withStyles(styles, { - name: "CategoryProductList" -})( - ({ - classes, +export const CategoryProductList: React.FC< + CategoryProductListProps +> = props => { + const { disabled, isChecked, pageInfo, @@ -94,150 +89,150 @@ export const CategoryProductList = withStyles(styles, { onNextPage, onPreviousPage, onRowClick - }: CategoryProductListProps) => { - const intl = useIntl(); + } = props; - const numberOfColumns = 5; + const classes = useStyles(props); + const intl = useIntl(); - return ( -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {renderCollection( - products, - product => { - const isSelected = product ? isChecked(product.id) : false; + const numberOfColumns = 5; - return ( - +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {renderCollection( + products, + product => { + const isSelected = product ? isChecked(product.id) : false; + + return ( + + + toggle(product.id)} + /> + + product.thumbnail.url)} > - - toggle(product.id)} + {product ? product.name : } + + + {product && product.productType ? ( + product.productType.name + ) : ( + + )} + + + {product && + maybe(() => product.isAvailable !== undefined) ? ( + - - product.thumbnail.url)} - > - {product ? product.name : } - - - {product && product.productType ? ( - product.productType.name - ) : ( - - )} - - - {product && - maybe(() => product.isAvailable !== undefined) ? ( - - ) : ( - - )} - - - {maybe(() => product.basePrice) && - maybe(() => product.basePrice.amount) !== undefined && - maybe(() => product.basePrice.currency) !== undefined ? ( - - ) : ( - - )} - - - ); - }, - () => ( - - - + ) : ( + + )} + + + {maybe(() => product.basePrice) && + maybe(() => product.basePrice.amount) !== undefined && + maybe(() => product.basePrice.currency) !== undefined ? ( + + ) : ( + + )} - ) - )} - -
-
- ); - } -); + ); + }, + () => ( + + + + + + ) + )} + + +
+ ); +}; + CategoryProductList.displayName = "CategoryProductList"; export default CategoryProductList; diff --git a/src/collections/components/CollectionImage/CollectionImage.tsx b/src/collections/components/CollectionImage/CollectionImage.tsx index df388b051..a4cb01d32 100644 --- a/src/collections/components/CollectionImage/CollectionImage.tsx +++ b/src/collections/components/CollectionImage/CollectionImage.tsx @@ -1,9 +1,4 @@ -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -19,8 +14,8 @@ import Skeleton from "@saleor/components/Skeleton"; import { commonMessages } from "@saleor/intl"; import { CollectionDetails_collection_backgroundImage } from "../../types/CollectionDetails"; -const styles = theme => - createStyles({ +const useStyles = makeStyles( + theme => ({ PhotosIcon: { height: "64px", margin: "0 auto", @@ -50,7 +45,11 @@ const styles = theme => position: "relative", width: 148 } - }); + }), + { + name: "CollectionImage" + } +); export interface CollectionImageProps { data: { @@ -62,83 +61,78 @@ export interface CollectionImageProps { onImageUpload: (file: File) => void; } -export const CollectionImage = withStyles(styles)( - ({ - classes, - data, - onImageUpload, - image, - onChange, - onImageDelete - }: CollectionImageProps & WithStyles) => { - const anchor = React.useRef(); - const intl = useIntl(); +export const CollectionImage: React.FC = props => { + const { data, onImageUpload, image, onChange, onImageDelete } = props; - const handleImageUploadButtonClick = () => anchor.current.click(); + const anchor = React.useRef(); + const classes = useStyles(props); + const intl = useIntl(); - return ( - - - - onImageUpload(event.target.files[0])} - type="file" - ref={anchor} - /> - - } - /> - {image === undefined ? ( - -
-
- -
-
- - ) : image === null ? ( - - ) : ( - - - - )} - {image && ( + const handleImageUploadButtonClick = () => anchor.current.click(); + + return ( + + -
- - - + + onImageUpload(event.target.files[0])} + type="file" + ref={anchor} + /> - )} - - ); - } -); + } + /> + {image === undefined ? ( + +
+
+ +
+
+ + ) : image === null ? ( + + ) : ( + + + + )} + {image && ( + <> +
+ + + + + )} + + ); +}; + CollectionImage.displayName = "CollectionImage"; export default CollectionImage; diff --git a/src/collections/components/CollectionList/CollectionList.tsx b/src/collections/components/CollectionList/CollectionList.tsx index 6439a4829..e54764f5d 100644 --- a/src/collections/components/CollectionList/CollectionList.tsx +++ b/src/collections/components/CollectionList/CollectionList.tsx @@ -1,9 +1,4 @@ -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +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"; @@ -21,8 +16,8 @@ import { maybe, renderCollection } from "@saleor/misc"; import { ListActions, ListProps } from "@saleor/types"; import { CollectionList_collections_edges_node } from "../../types/CollectionList"; -const styles = theme => - createStyles({ +const useStyles = makeStyles( + theme => ({ [theme.breakpoints.up("lg")]: { colAvailability: { width: 240 @@ -42,20 +37,18 @@ const styles = theme => tableRow: { cursor: "pointer" as "pointer" } - }); + }), + { name: "CollectionList" } +); -interface CollectionListProps - extends ListProps, - ListActions, - WithStyles { +interface CollectionListProps extends ListProps, ListActions { collections: CollectionList_collections_edges_node[]; } const numberOfColumns = 5; -const CollectionList = withStyles(styles, { name: "CollectionList" })( - ({ - classes, +const CollectionList: React.FC = props => { + const { collections, disabled, settings, @@ -69,122 +62,121 @@ const CollectionList = withStyles(styles, { name: "CollectionList" })( toggle, toggleAll, toolbar - }: CollectionListProps) => { - const intl = useIntl(); + } = props; - return ( - - - - - - - - - - - - - - - - - - - {renderCollection( - collections, - collection => { - const isSelected = collection ? isChecked(collection.id) : false; - return ( - collection.id)} + const classes = useStyles(props); + const intl = useIntl(); + + return ( +
+ + + + + + + + + + + + + + + + + + {renderCollection( + collections, + collection => { + const isSelected = collection ? isChecked(collection.id) : false; + return ( + collection.id)} + > + + toggle(collection.id)} + /> + + + {maybe(() => collection.name, )} + + + {maybe( + () => collection.products.totalCount, + + )} + + collection.isPublished)} > - - toggle(collection.id)} - /> - - - {maybe( - () => collection.name, - - )} - - - {maybe( - () => collection.products.totalCount, - - )} - - collection.isPublished)} - > - {maybe( - () => ( - - ), - - )} - - - ); - }, - () => ( - - - + {maybe( + () => ( + + ), + + )} - ) - )} - -
- ); - } -); + ); + }, + () => ( + + + + + + ) + )} + + + ); +}; + CollectionList.displayName = "CollectionList"; export default CollectionList; diff --git a/src/collections/components/CollectionProducts/CollectionProducts.tsx b/src/collections/components/CollectionProducts/CollectionProducts.tsx index b34eef03f..871ba72b6 100644 --- a/src/collections/components/CollectionProducts/CollectionProducts.tsx +++ b/src/collections/components/CollectionProducts/CollectionProducts.tsx @@ -1,12 +1,7 @@ import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; import IconButton from "@material-ui/core/IconButton"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +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"; @@ -29,13 +24,13 @@ import { maybe, renderCollection } from "../../../misc"; import { ListActions, PageListProps } from "../../../types"; import { CollectionDetails_collection } from "../../types/CollectionDetails"; -const styles = theme => - createStyles({ +const useStyles = makeStyles( + theme => ({ colActions: { "&:last-child": { paddingRight: 0 }, - width: 76 + theme.spacing(0.5) + width: 76 + theme.spacing(0.5) }, colName: { paddingLeft: 0, @@ -56,21 +51,19 @@ const styles = theme => tableRow: { cursor: "pointer" } - }); + }), + { name: "CollectionProducts" } +); -export interface CollectionProductsProps - extends PageListProps, - ListActions, - WithStyles { +export interface CollectionProductsProps extends PageListProps, ListActions { collection: CollectionDetails_collection; onProductUnassign: (id: string, event: React.MouseEvent) => void; } const numberOfColumns = 5; -const CollectionProducts = withStyles(styles, { name: "CollectionProducts" })( - ({ - classes, +const CollectionProducts: React.FC = props => { + const { collection, disabled, onAdd, @@ -84,165 +77,165 @@ const CollectionProducts = withStyles(styles, { name: "CollectionProducts" })( toggle, toggleAll, toolbar - }: CollectionProductsProps) => { - const intl = useIntl(); + } = props; - return ( - - collection.name, "...") - } - ) - ) : ( - - ) - } - toolbar={ - - } - /> - - - collection.products.edges.map(edge => edge.node) - )} - toggleAll={toggleAll} - toolbar={toolbar} - > - - - - - - - - - - - - - - - - pageInfo.hasNextPage)} - onNextPage={onNextPage} - hasPreviousPage={maybe(() => pageInfo.hasPreviousPage)} - onPreviousPage={onPreviousPage} - /> - - - - {renderCollection( - maybe(() => collection.products.edges.map(edge => edge.node)), - product => { - const isSelected = product ? isChecked(product.id) : false; + const classes = useStyles(props); + const intl = useIntl(); - return ( - - - toggle(product.id)} - /> - - product.thumbnail.url)} - > - {maybe(() => product.name, )} - - - {maybe( - () => product.productType.name, - - )} - - - {maybe( - () => ( - - ), - - )} - - - onProductUnassign(product.id, event)} - > - - - - - ); + return ( + + ( - - - - + { + name: maybe(() => collection.name, "...") + } + ) + ) : ( + + ) + } + toolbar={ + + } + /> +
+ collection.products.edges.map(edge => edge.node))} + toggleAll={toggleAll} + toolbar={toolbar} + > + + + + + + + + + + + + + + + + pageInfo.hasNextPage)} + onNextPage={onNextPage} + hasPreviousPage={maybe(() => pageInfo.hasPreviousPage)} + onPreviousPage={onPreviousPage} + /> + + + + {renderCollection( + maybe(() => collection.products.edges.map(edge => edge.node)), + product => { + const isSelected = product ? isChecked(product.id) : false; + + return ( + + + toggle(product.id)} + /> + + product.thumbnail.url)} + > + {maybe(() => product.name, )} + + + {maybe( + () => product.productType.name, + + )} + + + {maybe( + () => ( + + ), + + )} + + + onProductUnassign(product.id, event)} + > + + - ) - )} - -
- - ); - } -); + ); + }, + () => ( + + + + + + + ) + )} + + + + ); +}; + CollectionProducts.displayName = "CollectionProducts"; export default CollectionProducts; diff --git a/src/components/AccountPermissions/AccountPermissions.tsx b/src/components/AccountPermissions/AccountPermissions.tsx index 24ef19b7b..d518673da 100644 --- a/src/components/AccountPermissions/AccountPermissions.tsx +++ b/src/components/AccountPermissions/AccountPermissions.tsx @@ -1,11 +1,6 @@ import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -15,21 +10,23 @@ import { ControlledCheckbox } from "@saleor/components/ControlledCheckbox"; import { ShopInfo_shop_permissions } from "@saleor/components/Shop/types/ShopInfo"; import Skeleton from "@saleor/components/Skeleton"; -const styles = theme => - createStyles({ +const useStyles = makeStyles( + theme => ({ checkboxContainer: { marginTop: theme.spacing() }, hr: { - backgroundColor: theme.overrides.MuiCard.root.borderColor, + backgroundColor: theme.palette.divider, border: "none", height: 1, marginBottom: 0, marginTop: 0 } - }); + }), + { name: "AccountPermissions" } +); -interface AccountPermissionsProps extends WithStyles { +interface AccountPermissionsProps { permissions: ShopInfo_shop_permissions[]; data: { hasFullAccess: boolean; @@ -39,89 +36,85 @@ interface AccountPermissionsProps extends WithStyles { onChange: (event: React.ChangeEvent, cb?: () => void) => void; } -const AccountPermissions = withStyles(styles, { name: "AccountPermissions" })( - ({ - classes, - data, - disabled, - permissions, - onChange - }: AccountPermissionsProps) => { - const intl = useIntl(); +const AccountPermissions: React.FC = props => { + const { data, disabled, permissions, onChange } = props; - const handleFullAccessChange = (event: React.ChangeEvent) => - onChange(event, () => - onChange({ - target: { - name: "permissions", - value: event.target.value ? permissions.map(perm => perm.code) : [] - } - } as any) - ); - const handlePermissionChange = (event: React.ChangeEvent) => { + const classes = useStyles(props); + const intl = useIntl(); + + const handleFullAccessChange = (event: React.ChangeEvent) => + onChange(event, () => onChange({ target: { name: "permissions", - value: event.target.value - ? data.permissions.concat([event.target.name]) - : data.permissions.filter(perm => perm !== event.target.name) + value: event.target.value ? permissions.map(perm => perm.code) : [] } - } as any); - }; - return ( - - - - - - -
- -
- - {!data.hasFullAccess && ( - <> -
- - {permissions === undefined ? ( - - ) : ( - permissions.map(perm => ( -
- userPerm === perm.code - ).length === 1 - } - disabled={disabled} - label={perm.name.replace(/\./, "")} - name={perm.code} - onChange={handlePermissionChange} - /> -
- )) - )} - - - )} - + } as any) ); - } -); + const handlePermissionChange = (event: React.ChangeEvent) => { + onChange({ + target: { + name: "permissions", + value: event.target.value + ? data.permissions.concat([event.target.name]) + : data.permissions.filter(perm => perm !== event.target.name) + } + } as any); + }; + return ( + + + + + + +
+ +
+ + {!data.hasFullAccess && ( + <> +
+ + {permissions === undefined ? ( + + ) : ( + permissions.map(perm => ( +
+ userPerm === perm.code + ).length === 1 + } + disabled={disabled} + label={perm.name.replace(/\./, "")} + name={perm.code} + onChange={handlePermissionChange} + /> +
+ )) + )} + + + )} + + ); +}; + AccountPermissions.displayName = "AccountPermissions"; export default AccountPermissions; diff --git a/src/components/ActionDialog/ActionDialog.tsx b/src/components/ActionDialog/ActionDialog.tsx index 9515a5496..0c19fab82 100644 --- a/src/components/ActionDialog/ActionDialog.tsx +++ b/src/components/ActionDialog/ActionDialog.tsx @@ -3,12 +3,7 @@ import Dialog from "@material-ui/core/Dialog"; import DialogActions from "@material-ui/core/DialogActions"; import DialogContent from "@material-ui/core/DialogContent"; import DialogTitle from "@material-ui/core/DialogTitle"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import classNames from "classnames"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -18,8 +13,8 @@ import ConfirmButton, { ConfirmButtonTransitionState } from "../ConfirmButton/ConfirmButton"; -const styles = theme => - createStyles({ +const useStyles = makeStyles( + theme => ({ deleteButton: { "&:hover": { backgroundColor: theme.palette.error.main @@ -27,9 +22,11 @@ const styles = theme => backgroundColor: theme.palette.error.main, color: theme.palette.error.contrastText } - }); + }), + { name: "ActionDialog" } +); -interface ActionDialogProps extends WithStyles { +interface ActionDialogProps { children?: React.ReactNode; confirmButtonLabel?: string; confirmButtonState: ConfirmButtonTransitionState; @@ -40,10 +37,9 @@ interface ActionDialogProps extends WithStyles { onConfirm(); } -const ActionDialog = withStyles(styles, { name: "ActionDialog" })( - ({ +const ActionDialog: React.FC = props => { + const { children, - classes, confirmButtonLabel, confirmButtonState, open, @@ -51,35 +47,37 @@ const ActionDialog = withStyles(styles, { name: "ActionDialog" })( variant, onConfirm, onClose - }: ActionDialogProps) => { - const intl = useIntl(); + } = props; + + const classes = useStyles(props); + const intl = useIntl(); + + return ( + + {title} + {children} + + + + {confirmButtonLabel || + (variant === "delete" + ? intl.formatMessage(buttonMessages.delete) + : intl.formatMessage(buttonMessages.confirm))} + + + + ); +}; - return ( - - {title} - {children} - - - - {confirmButtonLabel || - (variant === "delete" - ? intl.formatMessage(buttonMessages.delete) - : intl.formatMessage(buttonMessages.confirm))} - - - - ); - } -); ActionDialog.displayName = "ActionDialog"; export default ActionDialog; diff --git a/src/components/AddressEdit/AddressEdit.tsx b/src/components/AddressEdit/AddressEdit.tsx index e2f624d94..ebb4b9d5c 100644 --- a/src/components/AddressEdit/AddressEdit.tsx +++ b/src/components/AddressEdit/AddressEdit.tsx @@ -1,9 +1,4 @@ -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; import React from "react"; import { useIntl } from "react-intl"; @@ -16,16 +11,15 @@ import SingleAutocompleteSelectField, { SingleAutocompleteChoiceType } from "../SingleAutocompleteSelectField"; -const styles = theme => - createStyles({ - root: { - display: "grid", - gridColumnGap: theme.spacing(2), - gridTemplateColumns: "1fr 1fr" - } - }); +const useStyles = makeStyles(theme => ({ + root: { + display: "grid", + gridColumnGap: theme.spacing(2), + gridTemplateColumns: "1fr 1fr" + } +})); -interface AddressEditProps extends WithStyles { +interface AddressEditProps { countries: SingleAutocompleteChoiceType[]; countryDisplayValue: string; data: AddressTypeInput; @@ -35,9 +29,8 @@ interface AddressEditProps extends WithStyles { onCountryChange(event: React.ChangeEvent); } -const AddressEdit = withStyles(styles, { name: "AddressEdit" })( - ({ - classes, +const AddressEdit: React.FC = props => { + const { countries, countryDisplayValue, data, @@ -45,164 +38,165 @@ const AddressEdit = withStyles(styles, { name: "AddressEdit" })( errors, onChange, onCountryChange - }: AddressEditProps) => { - const intl = useIntl(); + } = props; + const classes = useStyles(props); - return ( - <> -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- - - - - -
-
- -
-
- -
-
+ const intl = useIntl(); - -
-
- -
-
- -
+ return ( + <> +
+
+
- - ); - } -); +
+ +
+
+ +
+
+ +
+
+ +
+
+ + + + + +
+
+ +
+
+ +
+
+ + +
+
+ +
+
+ +
+
+ + ); +}; AddressEdit.displayName = "AddressEdit"; export default AddressEdit; diff --git a/src/components/AppHeader/AppHeader.tsx b/src/components/AppHeader/AppHeader.tsx index b9f2f00ee..07f2e815e 100644 --- a/src/components/AppHeader/AppHeader.tsx +++ b/src/components/AppHeader/AppHeader.tsx @@ -1,10 +1,5 @@ import Portal from "@material-ui/core/Portal"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import ArrowBackIcon from "@material-ui/icons/ArrowBack"; import React from "react"; @@ -16,45 +11,44 @@ export interface AppHeaderProps { onBack(); } -const styles = theme => - createStyles({ - backArrow: { - fontSize: 30 +const useStyles = makeStyles(theme => ({ + backArrow: { + fontSize: 30 + }, + menuButton: { + flex: "0 0 auto", + marginLeft: -theme.spacing(2), + marginRight: theme.spacing(), + marginTop: -theme.spacing(2) + }, + root: { + "&:hover": { + color: theme.typography.body1.color }, - menuButton: { - flex: "0 0 auto", - marginLeft: -theme.spacing(2), - marginRight: theme.spacing(), - marginTop: -theme.spacing(2) - }, - root: { - "&:hover": { - color: theme.typography.body1.color - }, - alignItems: "center", - color: theme.palette.grey[500], - cursor: "pointer", - display: "flex", - marginTop: theme.spacing(0.5), - transition: theme.transitions.duration.standard + "ms" - }, - skeleton: { - marginBottom: theme.spacing(2), - width: "10rem" - }, - title: { - color: "inherit", - flex: 1, - marginLeft: theme.spacing(), - textTransform: "uppercase" - } - }); -const AppHeader = withStyles(styles, { name: "AppHeader" })( - ({ - children, - classes, - onBack - }: AppHeaderProps & WithStyles) => ( + alignItems: "center", + color: theme.palette.grey[500], + cursor: "pointer", + display: "flex", + marginTop: theme.spacing(0.5), + transition: theme.transitions.duration.standard + "ms" + }, + skeleton: { + marginBottom: theme.spacing(2), + width: "10rem" + }, + title: { + color: "inherit", + flex: 1, + marginLeft: theme.spacing(), + textTransform: "uppercase" + } +})); +const AppHeader: React.FC = props => { + const { children, onBack } = props; + + const classes = useStyles(props); + + return ( {anchor => anchor ? ( @@ -71,7 +65,7 @@ const AppHeader = withStyles(styles, { name: "AppHeader" })( ) : null } - ) -); + ); +}; AppHeader.displayName = "AppHeader"; export default AppHeader; diff --git a/src/components/AppHeader/index.ts b/src/components/AppHeader/index.ts index a17981843..a54b9f38a 100644 --- a/src/components/AppHeader/index.ts +++ b/src/components/AppHeader/index.ts @@ -1,2 +1,2 @@ -export { default } from './AppHeader'; -export * from './AppHeader'; \ No newline at end of file +export { default } from "./AppHeader"; +export * from "./AppHeader"; diff --git a/src/components/AppLayout/AppLayout.tsx b/src/components/AppLayout/AppLayout.tsx index 250ace005..bacdc3954 100644 --- a/src/components/AppLayout/AppLayout.tsx +++ b/src/components/AppLayout/AppLayout.tsx @@ -8,7 +8,7 @@ import MenuItem from "@material-ui/core/MenuItem"; import Menu from "@material-ui/core/MenuList"; import Paper from "@material-ui/core/Paper"; import Popper from "@material-ui/core/Popper"; -import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import classNames from "classnames"; import React from "react"; import SVG from "react-inlinesvg"; @@ -36,8 +36,8 @@ import createMenuStructure from "./menuStructure"; import ResponsiveDrawer from "./ResponsiveDrawer"; import ThemeSwitch from "./ThemeSwitch"; -const styles = theme => - createStyles({ +const useStyles = makeStyles( + theme => ({ appAction: { [theme.breakpoints.down("sm")]: { left: 0, @@ -263,249 +263,232 @@ const styles = theme => viewContainer: { minHeight: `calc(100vh - ${theme.spacing(2) + appLoaderHeight + 70}px)` } - }); + }), + { + name: "AppLayout" + } +); interface AppLayoutProps { children: React.ReactNode; } -const AppLayout = withStyles(styles, { - name: "AppLayout" -})( - withRouter, any>( - ({ - classes, - children, - location - }: AppLayoutProps & - WithStyles & - RouteComponentProps) => { - const { isDark, toggleTheme } = useTheme(); - const [isMenuSmall, setMenuSmall] = useLocalStorage("isMenuSmall", false); - const [isDrawerOpened, setDrawerState] = React.useState(false); - const [isMenuOpened, setMenuState] = React.useState(false); - const appActionAnchor = React.useRef(); - const appHeaderAnchor = React.useRef(); - const anchor = React.useRef(); - const { logout, user } = useUser(); - const navigate = useNavigator(); - const intl = useIntl(); +const AppLayout = withRouter, any>( + ({ children, location }: AppLayoutProps & RouteComponentProps) => { + const classes = useStyles({}); + const { isDark, toggleTheme } = useTheme(); + const [isMenuSmall, setMenuSmall] = useLocalStorage("isMenuSmall", false); + const [isDrawerOpened, setDrawerState] = React.useState(false); + const [isMenuOpened, setMenuState] = React.useState(false); + const appActionAnchor = React.useRef(); + const appHeaderAnchor = React.useRef(); + const anchor = React.useRef(); + const { logout, user } = useUser(); + const navigate = useNavigator(); + const intl = useIntl(); - const menuStructure = createMenuStructure(intl); - const configurationMenu = createConfigurationMenu(intl); - const userPermissions = maybe(() => user.permissions, []); + const menuStructure = createMenuStructure(intl); + const configurationMenu = createConfigurationMenu(intl); + const userPermissions = maybe(() => user.permissions, []); - const renderConfigure = configurationMenu.some(section => - section.menuItems.some( - menuItem => - !!userPermissions.find( - userPermission => userPermission.code === menuItem.permission - ) - ) - ); + const renderConfigure = configurationMenu.some(section => + section.menuItems.some( + menuItem => + !!userPermissions.find( + userPermission => userPermission.code === menuItem.permission + ) + ) + ); - const handleLogout = () => { - setMenuState(false); - logout(); - }; + const handleLogout = () => { + setMenuState(false); + logout(); + }; - const handleViewerProfile = () => { - setMenuState(false); - navigate(staffMemberDetailsUrl(user.id)); - }; + const handleViewerProfile = () => { + setMenuState(false); + navigate(staffMemberDetailsUrl(user.id)); + }; - const handleMenuItemClick = ( - url: string, - event: React.MouseEvent - ) => { - event.stopPropagation(); - event.preventDefault(); - setDrawerState(false); - navigate(url); - }; + const handleMenuItemClick = (url: string, event: React.MouseEvent) => { + event.stopPropagation(); + event.preventDefault(); + setDrawerState(false); + navigate(url); + }; - const handleIsMenuSmall = () => { - setMenuSmall(!isMenuSmall); - }; + const handleIsMenuSmall = () => { + setMenuSmall(!isMenuSmall); + }; - return ( - - {({ isProgress }) => ( - - -
-
- setDrawerState(false)} - open={isDrawerOpened} - small={!isMenuSmall} - > -
- -
- -
- -
- - - -
-
+ {({ isProgress }) => ( + + +
+
+ setDrawerState(false)} + open={isDrawerOpened} + small={!isMenuSmall} > - {isProgress ? ( - + - ) : ( -
- )} -
-
- -
+
+ +
+ +
+ + + +
+
+ {isProgress ? ( + + ) : ( +
+ )} +
+
+ +
+
setDrawerState(!isDrawerOpened)} + > + + + + +
+
+
+
+
setDrawerState(!isDrawerOpened)} + className={classes.userMenuContainer} + ref={anchor} > - - - - -
-
-
-
- + ) + } + className={classes.userChip} + label={ + <> + {user.email} + + + } + onClick={() => setMenuState(!isMenuOpened)} /> -
- - ) - } - className={classes.userChip} - label={ - <> - {user.email} - - - } - onClick={() => setMenuState(!isMenuOpened)} - /> - - {({ TransitionProps, placement }) => ( - - - - setMenuState(false) - } - mouseEvent="onClick" - > - - - - - - - - - - - - )} - -
+ {({ TransitionProps, placement }) => ( + + + setMenuState(false)} + mouseEvent="onClick" + > + + + + + + + + + + + + )} +
- -
-
{children}
+
+
-
+
{children}
+
- - - )} - - ); - } - ) +
+ + + )} + + ); + } ); export default AppLayout; diff --git a/src/components/AppLayout/MenuList.tsx b/src/components/AppLayout/MenuList.tsx index f0c633d1e..410ac2301 100644 --- a/src/components/AppLayout/MenuList.tsx +++ b/src/components/AppLayout/MenuList.tsx @@ -1,9 +1,4 @@ -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import classNames from "classnames"; import React from "react"; @@ -24,92 +19,41 @@ import { orderDraftListUrl, orderListUrl } from "../../orders/urls"; import MenuNested from "./MenuNested"; import { IMenuItem } from "./menuStructure"; -const styles = theme => - createStyles({ - menuIcon: { - "& svg": { - height: 32, - width: 32 - }, - display: "inline-block", - position: "relative", - top: 8 +const useStyles = makeStyles(theme => ({ + menuIcon: { + "& svg": { + height: 32, + width: 32 }, - menuIconDark: { - "& path": { - fill: theme.palette.common.white - } + display: "inline-block", + position: "relative", + top: 8 + }, + menuIconDark: { + "& path": { + fill: theme.palette.common.white + } + }, + menuIconSmall: { + left: -5 + }, + menuIsActive: { + boxShadow: "0px 0px 12px 1px rgba(0,0,0,0.2)" + }, + menuItemHover: { + "& p": { + fontSize: 14, + transition: "color 0.5s ease, opacity 0.3s ease-out" }, - menuIconSmall: { - left: -5 + "& path": { + transition: "fill 0.5s ease" }, - menuIsActive: { - boxShadow: "0px 0px 12px 1px rgba(0,0,0,0.2)" - }, - menuItemHover: { + "&:hover": { "& p": { - fontSize: 14, - transition: "color 0.5s ease, opacity 0.3s ease-out" - }, - "& path": { - transition: "fill 0.5s ease" - }, - "&:hover": { - "& p": { - color: theme.palette.primary.main - }, - "& path": { - fill: theme.palette.primary.main - }, - "&:before": { - borderLeft: `solid 2px ${theme.palette.primary.main}`, - content: "''", - height: 33, - left: -20, - position: "absolute", - top: 8 - }, - color: theme.palette.primary.main - }, - cursor: "pointer", - position: "relative" - }, - menuList: { - display: "flex", - flexDirection: "column", - height: "100%", - marginLeft: theme.spacing(4), - marginTop: theme.spacing(2), - paddingBottom: theme.spacing(3) - }, - menuListItem: { - alignItems: "center", - display: "block", - marginBottom: theme.spacing(5), - paddingLeft: 0, - textDecoration: "none", - transition: theme.transitions.duration.standard + "ms" - }, - menuListItemActive: { - "& $menuListItemText": { color: theme.palette.primary.main }, "& path": { - color: theme.palette.primary.main, fill: theme.palette.primary.main - } - }, - menuListItemOpen: { - "&:after": { - borderBottom: `10px solid transparent`, - borderLeft: `10px solid ${theme.palette.background.paper}`, - borderTop: `10px solid transparent`, - content: "''", - height: 0, - position: "absolute", - right: -35, - top: 15, - width: 0 }, "&:before": { borderLeft: `solid 2px ${theme.palette.primary.main}`, @@ -119,47 +63,97 @@ const styles = theme => position: "absolute", top: 8 }, - position: "relative" + color: theme.palette.primary.main }, - menuListItemText: { - "&:hover": { - color: theme.palette.primary.main - }, - bottom: 0, - cursor: "pointer", - fontSize: "1rem", - fontWeight: 500, - left: 30, - opacity: 1, - paddingLeft: 16, - position: "absolute", - textTransform: "uppercase", - transition: "opacity 0.5s ease" + cursor: "pointer", + position: "relative" + }, + menuList: { + display: "flex", + flexDirection: "column", + height: "100%", + marginLeft: theme.spacing(4), + marginTop: theme.spacing(2), + paddingBottom: theme.spacing(3) + }, + menuListItem: { + alignItems: "center", + display: "block", + marginBottom: theme.spacing(5), + paddingLeft: 0, + textDecoration: "none", + transition: theme.transitions.duration.standard + "ms" + }, + menuListItemActive: { + "& $menuListItemText": { + color: theme.palette.primary.main }, - menuListItemTextHide: { - bottom: 0, - left: 30, - opacity: 0, - position: "absolute" - }, - subMenu: { - padding: "0 15px" - }, - subMenuDrawer: { - background: "#000", - cursor: "pointer", - height: "100vh", - left: 0, - opacity: 0.2, - position: "absolute", - top: 0, - width: 0, - zIndex: -2 - }, - subMenuDrawerOpen: { - width: `100vw` + "& path": { + color: theme.palette.primary.main, + fill: theme.palette.primary.main } - }); + }, + menuListItemOpen: { + "&:after": { + borderBottom: `10px solid transparent`, + borderLeft: `10px solid ${theme.palette.background.paper}`, + borderTop: `10px solid transparent`, + content: "''", + height: 0, + position: "absolute", + right: -35, + top: 15, + width: 0 + }, + "&:before": { + borderLeft: `solid 2px ${theme.palette.primary.main}`, + content: "''", + height: 33, + left: -20, + position: "absolute", + top: 8 + }, + position: "relative" + }, + menuListItemText: { + "&:hover": { + color: theme.palette.primary.main + }, + bottom: 0, + cursor: "pointer", + fontSize: "1rem", + fontWeight: 500, + left: 30, + opacity: 1, + paddingLeft: 16, + position: "absolute", + textTransform: "uppercase", + transition: "opacity 0.5s ease" + }, + menuListItemTextHide: { + bottom: 0, + left: 30, + opacity: 0, + position: "absolute" + }, + subMenu: { + padding: "0 15px" + }, + subMenuDrawer: { + background: "#000", + cursor: "pointer", + height: "100vh", + left: 0, + opacity: 0.2, + position: "absolute", + top: 0, + width: 0, + zIndex: -2 + }, + subMenuDrawerOpen: { + width: `100vw` + } +})); interface MenuListProps { className?: string; @@ -176,9 +170,8 @@ export interface IActiveSubMenu { label: string | null; } -const MenuList = withStyles(styles, { name: "MenuList" })( - ({ - classes, +const MenuList: React.FC = props => { + const { className, menuItems, isMenuSmall, @@ -186,134 +179,89 @@ const MenuList = withStyles(styles, { name: "MenuList" })( user, renderConfigure, onMenuItemClick - }: MenuListProps & WithStyles) => { - const { isDark } = useTheme(); - const [activeSubMenu, setActiveSubMenu] = React.useState({ + } = props; + + const classes = useStyles(props); + + const { isDark } = useTheme(); + const [activeSubMenu, setActiveSubMenu] = React.useState({ + isActive: false, + label: null + }); + const intl = useIntl(); + + const configutationMenu = createConfigurationMenu(intl).map(menu => { + menu.menuItems.map(item => + user.permissions.map(perm => perm.code).includes(item.permission) + ); + }); + + const handleSubMenu = itemLabel => { + setActiveSubMenu({ + isActive: + itemLabel === activeSubMenu.label ? !activeSubMenu.isActive : true, + label: itemLabel + }); + }; + + const closeSubMenu = (menuItemUrl, event) => { + setActiveSubMenu({ isActive: false, label: null }); - const intl = useIntl(); + if (menuItemUrl && event) { + onMenuItemClick(menuItemUrl, event); + event.stopPropagation(); + event.preventDefault(); + } + }; - const configutationMenu = createConfigurationMenu(intl).map(menu => { - menu.menuItems.map(item => - user.permissions.map(perm => perm.code).includes(item.permission) - ); - }); + return ( +
+ {/* FIXME: this .split("?")[0] looks gross */} + {menuItems.map(menuItem => { + const isActive = (menuItem: IMenuItem) => + location.split("?")[0] === orderDraftListUrl().split("?")[0] && + menuItem.url.split("?")[0] === orderListUrl().split("?")[0] + ? false + : !!matchPath(location.split("?")[0], { + exact: menuItem.url.split("?")[0] === "/", + path: menuItem.url.split("?")[0] + }); - const handleSubMenu = itemLabel => { - setActiveSubMenu({ - isActive: - itemLabel === activeSubMenu.label ? !activeSubMenu.isActive : true, - label: itemLabel - }); - }; + if ( + menuItem.permission && + !user.permissions.map(perm => perm.code).includes(menuItem.permission) + ) { + return null; + } - const closeSubMenu = (menuItemUrl, event) => { - setActiveSubMenu({ - isActive: false, - label: null - }); - if (menuItemUrl && event) { - onMenuItemClick(menuItemUrl, event); - event.stopPropagation(); - event.preventDefault(); - } - }; - - return ( -
- {/* FIXME: this .split("?")[0] looks gross */} - {menuItems.map(menuItem => { - const isActive = (menuItem: IMenuItem) => - location.split("?")[0] === orderDraftListUrl().split("?")[0] && - menuItem.url.split("?")[0] === orderListUrl().split("?")[0] - ? false - : !!matchPath(location.split("?")[0], { - exact: menuItem.url.split("?")[0] === "/", - path: menuItem.url.split("?")[0] - }); - - if ( - menuItem.permission && - !user.permissions - .map(perm => perm.code) - .includes(menuItem.permission) - ) { - return null; - } - - if (!menuItem.url) { - const isAnyChildActive = menuItem.children.reduce( - (acc, child) => acc || isActive(child), - false - ); - - return ( -
-
handleSubMenu(menuItem.ariaLabel)} - > - - - {menuItem.label} - -
- -
closeSubMenu(null, event)} - className={classNames(classes.subMenuDrawer, { - [classes.subMenuDrawerOpen]: activeSubMenu.isActive - })} - /> -
- ); - } + if (!menuItem.url) { + const isAnyChildActive = menuItem.children.reduce( + (acc, child) => acc || isActive(child), + false + ); return ( - closeSubMenu(menuItem.url, event)} key={menuItem.label} > -
+
handleSubMenu(menuItem.ariaLabel)} + >
- + +
closeSubMenu(null, event)} + className={classNames(classes.subMenuDrawer, { + [classes.subMenuDrawerOpen]: activeSubMenu.isActive + })} + /> +
); - })} - {renderConfigure && configutationMenu.length > 0 && ( + } + + return ( closeSubMenu(configurationMenuUrl, event)} + className={classNames(classes.menuListItem, { + [classes.menuListItemActive]: isActive(menuItem) + })} + href={createHref(menuItem.url)} + onClick={event => closeSubMenu(menuItem.url, event)} + key={menuItem.label} >
- + {menuItem.label}
- )} -
- ); - } -); + ); + })} + {renderConfigure && configutationMenu.length > 0 && ( + closeSubMenu(configurationMenuUrl, event)} + > +
+ + + + +
+ + )} +
+ ); +}; + +MenuList.displayName = "MenuList"; export default MenuList; diff --git a/src/components/AppLayout/MenuNested.tsx b/src/components/AppLayout/MenuNested.tsx index 26e41739e..4b486f21d 100644 --- a/src/components/AppLayout/MenuNested.tsx +++ b/src/components/AppLayout/MenuNested.tsx @@ -1,10 +1,5 @@ import Hidden from "@material-ui/core/Hidden"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import classNames from "classnames"; import React from "react"; @@ -17,89 +12,88 @@ import { drawerWidthExpanded } from "./consts"; import { IActiveSubMenu } from "./MenuList"; import { IMenuItem } from "./menuStructure"; -const styles = theme => - createStyles({ - menuListNested: { - background: theme.palette.background.paper, - height: "100vh", - position: "absolute", - right: 0, - top: 0, - transition: `right ${theme.transitions.duration.shorter}ms ease`, - width: 300, - zIndex: -1 +const useStyles = makeStyles(theme => ({ + menuListNested: { + background: theme.palette.background.paper, + height: "100vh", + position: "absolute", + right: 0, + top: 0, + transition: `right ${theme.transitions.duration.shorter}ms ease`, + width: 300, + zIndex: -1 + }, + menuListNestedClose: { + "& svg": { + fill: theme.palette.primary.main, + left: 7, + position: "relative", + top: -2 }, - menuListNestedClose: { - "& svg": { - fill: theme.palette.primary.main, - left: 7, - position: "relative", - top: -2 - }, - border: `solid 1px #EAEAEA`, - borderRadius: "100%", - cursor: "pointer", - height: 32, - position: "absolute", - right: 32, - top: 35, - transform: "rotate(180deg)", - width: 32 + border: `solid 1px #EAEAEA`, + borderRadius: "100%", + cursor: "pointer", + height: 32, + position: "absolute", + right: 32, + top: 35, + transform: "rotate(180deg)", + width: 32 + }, + menuListNestedCloseDark: { + border: `solid 1px #252728` + }, + menuListNestedHide: { + opacity: 0 + }, + menuListNestedIcon: { + "& path": { + fill: "initial" }, - menuListNestedCloseDark: { - border: `solid 1px #252728` - }, - menuListNestedHide: { - opacity: 0 - }, - menuListNestedIcon: { - "& path": { - fill: "initial" - }, - "& svg": { height: 32, position: "relative", top: 7, width: 32 } - }, - menuListNestedIconDark: { - "& path": { - fill: theme.palette.common.white + "& svg": { height: 32, position: "relative", top: 7, width: 32 } + }, + menuListNestedIconDark: { + "& path": { + fill: theme.palette.common.white + } + }, + menuListNestedItem: { + "&:hover": { + "& p": { + color: theme.palette.primary.main } }, - menuListNestedItem: { - "&:hover": { - "& p": { - color: theme.palette.primary.main - } - }, - display: "block", - marginBottom: theme.spacing(2), - padding: "0px 30px", - textDecoration: "none" + display: "block", + marginBottom: theme.spacing(2), + padding: "0px 30px", + textDecoration: "none" + }, + menuListNestedOpen: { + [theme.breakpoints.down("sm")]: { + right: 0, + width: drawerWidthExpanded, + zIndex: 2 }, - menuListNestedOpen: { - [theme.breakpoints.down("sm")]: { - right: 0, - width: drawerWidthExpanded, - zIndex: 2 - }, - right: -300, - zIndex: -1 + right: -300, + zIndex: -1 + }, + subHeader: { + borderBottom: "solid 1px #EAEAEA", + margin: "30px", + marginBottom: 39, + paddingBottom: 22 + }, + subHeaderDark: { + borderBottom: "solid 1px #252728" + }, + subHeaderTitle: { + [theme.breakpoints.up("md")]: { + paddingLeft: 0 }, - subHeader: { - borderBottom: "solid 1px #EAEAEA", - margin: "30px", - marginBottom: 39, - paddingBottom: 22 - }, - subHeaderDark: { - borderBottom: "solid 1px #252728" - }, - subHeaderTitle: { - [theme.breakpoints.up("md")]: { - paddingLeft: 0 - }, - display: "inline", - paddingLeft: 10 - } - }); + display: "inline", + paddingLeft: 10 + } +})); export interface MenuNestedProps { activeItem: IActiveSubMenu; @@ -112,86 +106,85 @@ export interface MenuNestedProps { onMenuItemClick: (url: string, event: React.MouseEvent) => void; } -const MenuNested = withStyles(styles, { name: "MenuNested" })( - ({ +const MenuNested: React.FC = props => { + const { activeItem, ariaLabel, - classes, + closeSubMenu, icon, menuItem, onMenuItemClick, title - }: MenuNestedProps & WithStyles) => { - const menuItems = menuItem.children; - const { isDark } = useTheme(); - const closeMenu = (menuItemUrl, event) => { - onMenuItemClick(menuItemUrl, event); - closeSubMenu({ - isActive: false, - label: null - }); - event.stopPropagation(); - event.preventDefault(); - }; - return ( - <> -
{ + onMenuItemClick(menuItemUrl, event); + closeSubMenu({ + isActive: false, + label: null + }); + event.stopPropagation(); + event.preventDefault(); + }; + return ( + <> + - - ); - } -); + {item.label} + + ))} +
+ + ); +}; + +MenuNested.displayName = "MenuNested"; export default MenuNested; diff --git a/src/components/AppLayout/ResponsiveDrawer.tsx b/src/components/AppLayout/ResponsiveDrawer.tsx index 976fe3a63..6925a5076 100644 --- a/src/components/AppLayout/ResponsiveDrawer.tsx +++ b/src/components/AppLayout/ResponsiveDrawer.tsx @@ -1,16 +1,11 @@ import Drawer from "@material-ui/core/Drawer"; import Hidden from "@material-ui/core/Hidden"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import React from "react"; import { drawerWidth, drawerWidthExpanded } from "./consts"; -const styles = theme => - createStyles({ +const useStyles = makeStyles( + theme => ({ drawerDesktop: { backgroundColor: theme.palette.background.paper, border: "none", @@ -29,17 +24,23 @@ const styles = theme => drawerMobile: { width: drawerWidthExpanded } - }); + }), + { name: "ResponsiveDrawer" } +); -interface ResponsiveDrawerProps extends WithStyles { +interface ResponsiveDrawerProps { children?: React.ReactNode; open: boolean; small: boolean; onClose?(); } -const ResponsiveDrawer = withStyles(styles, { name: "ResponsiveDrawer" })( - ({ children, classes, onClose, open, small }: ResponsiveDrawerProps) => ( +const ResponsiveDrawer: React.FC = props => { + const { children, onClose, open, small } = props; + + const classes = useStyles(props); + + return ( <> - ) -); + ); +}; export default ResponsiveDrawer; diff --git a/src/components/AppLayout/ThemeSwitch.tsx b/src/components/AppLayout/ThemeSwitch.tsx index 5fcc02e8a..9384afeb3 100644 --- a/src/components/AppLayout/ThemeSwitch.tsx +++ b/src/components/AppLayout/ThemeSwitch.tsx @@ -1,43 +1,52 @@ -import { Theme, withStyles } from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import Switch, { SwitchProps } from "@material-ui/core/Switch"; import React from "react"; import MoonIcon from "../../icons/Moon"; import SunIcon from "../../icons/Sun"; -const switchStyles = theme => ({ - bar: { - "$colorPrimary$checked + &": { - backgroundColor: theme.palette.background.paper +const useStyles = makeStyles( + theme => ({ + bar: { + "$colorPrimary$checked + &": { + backgroundColor: theme.palette.background.paper + }, + background: theme.palette.background.paper }, - background: theme.palette.background.paper - }, - checked: { - "& svg": { - background: theme.palette.primary.main, - color: theme.palette.background.paper + checked: { + "& svg": { + background: theme.palette.primary.main, + color: theme.palette.background.paper + } + }, + colorPrimary: {}, + root: { + "& svg": { + background: theme.palette.primary.main, + borderRadius: "100%", + height: 20, + width: 20 + }, + width: 58 } - }, - colorPrimary: {}, - root: { - "& svg": { - background: theme.palette.primary.main, - borderRadius: "100%", - height: 20, - width: 20 - }, - width: 58 + }), + { + name: "ThemeSwitch" } -}); -const ThemeSwitch = withStyles(switchStyles, { - name: "ThemeSwitch" -})((props: SwitchProps) => ( - } - checkedIcon={} - /> -)); +); +const ThemeSwitch: React.FC = props => { + const classes = useStyles(props); + + return ( + } + checkedIcon={} + /> + ); +}; + ThemeSwitch.displayName = "ThemeSwitch"; export default ThemeSwitch; diff --git a/src/components/AppLayout/index.ts b/src/components/AppLayout/index.ts index 41632b30c..990e3e03d 100644 --- a/src/components/AppLayout/index.ts +++ b/src/components/AppLayout/index.ts @@ -1,2 +1,2 @@ -export { default } from './AppLayout'; -export * from './AppLayout'; \ No newline at end of file +export { default } from "./AppLayout"; +export * from "./AppLayout"; diff --git a/src/components/AssignCategoryDialog/AssignCategoryDialog.tsx b/src/components/AssignCategoryDialog/AssignCategoryDialog.tsx index f45196049..d58a01ba8 100644 --- a/src/components/AssignCategoryDialog/AssignCategoryDialog.tsx +++ b/src/components/AssignCategoryDialog/AssignCategoryDialog.tsx @@ -4,7 +4,7 @@ import Dialog from "@material-ui/core/Dialog"; import DialogActions from "@material-ui/core/DialogActions"; import DialogContent from "@material-ui/core/DialogContent"; import DialogTitle from "@material-ui/core/DialogTitle"; -import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles"; +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"; @@ -27,7 +27,7 @@ export interface FormData { query: string; } -const styles = createStyles({ +const useStyles = makeStyles({ avatar: { "&:first-child": { paddingLeft: 0 @@ -44,7 +44,7 @@ const styles = createStyles({ } }); -interface AssignCategoriesDialogProps extends WithStyles { +interface AssignCategoriesDialogProps { categories: SearchCategories_search_edges_node[]; confirmButtonState: ConfirmButtonTransitionState; open: boolean; @@ -71,11 +71,8 @@ function handleCategoryAssign( } } -const AssignCategoriesDialog = withStyles(styles, { - name: "AssignCategoriesDialog" -})( - ({ - classes, +const AssignCategoriesDialog: React.FC = props => { + const { confirmButtonState, open, loading, @@ -83,102 +80,103 @@ const AssignCategoriesDialog = withStyles(styles, { onClose, onFetch, onSubmit - }: AssignCategoriesDialogProps) => { - const intl = useIntl(); - const [query, onQueryChange] = useSearchQuery(onFetch); - const [selectedCategories, setSelectedCategories] = React.useState< - SearchCategories_search_edges_node[] - >([]); + } = props; + const classes = useStyles(props); - const handleSubmit = () => onSubmit(selectedCategories); + const intl = useIntl(); + const [query, onQueryChange] = useSearchQuery(onFetch); + const [selectedCategories, setSelectedCategories] = React.useState< + SearchCategories_search_edges_node[] + >([]); - return ( - - + const handleSubmit = () => onSubmit(selectedCategories); + + return ( + + + + + + + }} + /> + + + + {categories && + categories.map(category => { + const isSelected = !!selectedCategories.find( + selectedCategories => selectedCategories.id === category.id + ); + + return ( + + + + handleCategoryAssign( + category, + isSelected, + selectedCategories, + setSelectedCategories + ) + } + /> + + + {category.name} + + + ); + })} + +
+ + + + - - - - }} - /> - - - - {categories && - categories.map(category => { - const isSelected = !!selectedCategories.find( - selectedCategories => selectedCategories.id === category.id - ); - - return ( - - - - handleCategoryAssign( - category, - isSelected, - selectedCategories, - setSelectedCategories - ) - } - /> - - - {category.name} - - - ); - })} - -
- - - - - - - - - ); - } -); + + + + ); +}; AssignCategoriesDialog.displayName = "AssignCategoriesDialog"; export default AssignCategoriesDialog; diff --git a/src/components/AssignCollectionDialog/AssignCollectionDialog.tsx b/src/components/AssignCollectionDialog/AssignCollectionDialog.tsx index f0e011c70..24ff87786 100644 --- a/src/components/AssignCollectionDialog/AssignCollectionDialog.tsx +++ b/src/components/AssignCollectionDialog/AssignCollectionDialog.tsx @@ -4,7 +4,7 @@ import Dialog from "@material-ui/core/Dialog"; import DialogActions from "@material-ui/core/DialogActions"; import DialogContent from "@material-ui/core/DialogContent"; import DialogTitle from "@material-ui/core/DialogTitle"; -import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles"; +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"; @@ -27,7 +27,7 @@ export interface FormData { query: string; } -const styles = createStyles({ +const useStyles = makeStyles({ avatar: { "&:first-child": { paddingLeft: 0 @@ -44,7 +44,7 @@ const styles = createStyles({ } }); -interface AssignCollectionDialogProps extends WithStyles { +interface AssignCollectionDialogProps { collections: SearchCollections_search_edges_node[]; confirmButtonState: ConfirmButtonTransitionState; open: boolean; @@ -71,11 +71,8 @@ function handleCollectionAssign( } } -const AssignCollectionDialog = withStyles(styles, { - name: "AssignCollectionDialog" -})( - ({ - classes, +const AssignCollectionDialog: React.FC = props => { + const { confirmButtonState, open, loading, @@ -83,103 +80,103 @@ const AssignCollectionDialog = withStyles(styles, { onClose, onFetch, onSubmit - }: AssignCollectionDialogProps) => { - const intl = useIntl(); - const [query, onQueryChange] = useSearchQuery(onFetch); - const [selectedCollections, setSelectedCollections] = React.useState< - SearchCollections_search_edges_node[] - >([]); + } = props; + const classes = useStyles(props); - const handleSubmit = () => onSubmit(selectedCollections); + const intl = useIntl(); + const [query, onQueryChange] = useSearchQuery(onFetch); + const [selectedCollections, setSelectedCollections] = React.useState< + SearchCollections_search_edges_node[] + >([]); - return ( - - + const handleSubmit = () => onSubmit(selectedCollections); + + return ( + + + + + + + }} + /> + + + + {collections && + collections.map(collection => { + const isSelected = !!selectedCollections.find( + selectedCollection => selectedCollection.id === collection.id + ); + + return ( + + + + handleCollectionAssign( + collection, + isSelected, + selectedCollections, + setSelectedCollections + ) + } + /> + + + {collection.name} + + + ); + })} + +
+ + + + - - - - }} - /> - - - - {collections && - collections.map(collection => { - const isSelected = !!selectedCollections.find( - selectedCollection => - selectedCollection.id === collection.id - ); - - return ( - - - - handleCollectionAssign( - collection, - isSelected, - selectedCollections, - setSelectedCollections - ) - } - /> - - - {collection.name} - - - ); - })} - -
- - - - - - - - - ); - } -); + + + + ); +}; AssignCollectionDialog.displayName = "AssignCollectionDialog"; export default AssignCollectionDialog; diff --git a/src/components/AssignProductDialog/AssignProductDialog.tsx b/src/components/AssignProductDialog/AssignProductDialog.tsx index fff198a2e..9714965c0 100644 --- a/src/components/AssignProductDialog/AssignProductDialog.tsx +++ b/src/components/AssignProductDialog/AssignProductDialog.tsx @@ -4,7 +4,7 @@ import Dialog from "@material-ui/core/Dialog"; import DialogActions from "@material-ui/core/DialogActions"; import DialogContent from "@material-ui/core/DialogContent"; import DialogTitle from "@material-ui/core/DialogTitle"; -import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles"; +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"; @@ -29,7 +29,7 @@ export interface FormData { query: string; } -const styles = createStyles({ +const useStyles = makeStyles({ avatar: { "&:first-child": { paddingLeft: 0 @@ -77,11 +77,8 @@ function handleProductAssign( } } -const AssignProductDialog = withStyles(styles, { - name: "AssignProductDialog" -})( - ({ - classes, +const AssignProductDialog: React.FC = props => { + const { confirmButtonState, open, loading, @@ -89,109 +86,110 @@ const AssignProductDialog = withStyles(styles, { onClose, onFetch, onSubmit - }: AssignProductDialogProps & WithStyles) => { - const intl = useIntl(); - const [query, onQueryChange] = useSearchQuery(onFetch); - const [selectedProducts, setSelectedProducts] = React.useState< - SearchProducts_search_edges_node[] - >([]); + } = props; + const classes = useStyles(props); - const handleSubmit = () => onSubmit(selectedProducts); + const intl = useIntl(); + const [query, onQueryChange] = useSearchQuery(onFetch); + const [selectedProducts, setSelectedProducts] = React.useState< + SearchProducts_search_edges_node[] + >([]); - return ( - - - - - - - }} - /> - -
- - - {products && - products.map(product => { - const isSelected = selectedProducts.some( - selectedProduct => selectedProduct.id === product.id - ); + const handleSubmit = () => onSubmit(selectedProducts); - return ( - - product.thumbnail.url)} + return ( + + + + + + + }} + /> + +
+
+ + {products && + products.map(product => { + const isSelected = selectedProducts.some( + selectedProduct => selectedProduct.id === product.id + ); + + return ( + + product.thumbnail.url)} + /> + + {product.name} + + + + handleProductAssign( + product, + isSelected, + selectedProducts, + setSelectedProducts + ) + } /> - - {product.name} - - - - handleProductAssign( - product, - isSelected, - selectedProducts, - setSelectedProducts - ) - } - /> - - - ); - })} - -
-
- - - - - - - - - ); - } -); + + + ); + })} + + +
+ + + + + + + + + ); +}; AssignProductDialog.displayName = "AssignProductDialog"; export default AssignProductDialog; diff --git a/src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx b/src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx index 51ac89961..a59c44723 100644 --- a/src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx +++ b/src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx @@ -1,12 +1,7 @@ import CircularProgress from "@material-ui/core/CircularProgress"; import MenuItem from "@material-ui/core/MenuItem"; import Paper from "@material-ui/core/Paper"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; import ArrowBack from "@material-ui/icons/ArrowBack"; import Downshift from "downshift"; @@ -43,31 +38,27 @@ const DebounceAutocomplete: React.ComponentType< DebounceProps > = Debounce; -const styles = theme => - createStyles({ - container: { - flexGrow: 1, - position: "relative" - }, - menuBack: { - marginLeft: -theme.spacing(.5), - marginRight: theme.spacing(1) - }, - paper: { - left: 0, - marginTop: theme.spacing(), - padding: theme.spacing(), - position: "absolute", - right: 0, - zIndex: 2 - }, - root: {} - }); -const AutocompleteSelectMenu = withStyles(styles, { - name: "AutocompleteSelectMenu" -})( - ({ - classes, +const useStyles = makeStyles(theme => ({ + container: { + flexGrow: 1, + position: "relative" + }, + menuBack: { + marginLeft: -theme.spacing(0.5), + marginRight: theme.spacing(1) + }, + paper: { + left: 0, + marginTop: theme.spacing(), + padding: theme.spacing(), + position: "absolute", + right: 0, + zIndex: 2 + }, + root: {} +})); +const AutocompleteSelectMenu: React.FC = props => { + const { disabled, displayValue, error, @@ -79,117 +70,118 @@ const AutocompleteSelectMenu = withStyles(styles, { placeholder, onChange, onInputChange - }: AutocompleteSelectMenuProps & WithStyles) => { - const [inputValue, setInputValue] = React.useState(displayValue || ""); - const [menuPath, setMenuPath] = React.useState([]); + } = props; + const classes = useStyles(props); - const handleChange = (value: string) => - onChange({ - target: { - name, - value - } - } as any); + const [inputValue, setInputValue] = React.useState(displayValue || ""); + const [menuPath, setMenuPath] = React.useState([]); - // Validate if option values are duplicated - React.useEffect(() => { - if (!validateMenuOptions(options)) { - throw validationError; + const handleChange = (value: string) => + onChange({ + target: { + name, + value } - }, []); + } as any); - // Navigate back to main menu after input field change - React.useEffect(() => setMenuPath([]), [options]); + // Validate if option values are duplicated + React.useEffect(() => { + if (!validateMenuOptions(options)) { + throw validationError; + } + }, []); - // Reset input value after displayValue change - React.useEffect(() => setInputValue(displayValue), [displayValue]); + // Navigate back to main menu after input field change + React.useEffect(() => setMenuPath([]), [options]); - return ( - - {debounceFn => ( - (item ? item.label : "")} - onSelect={handleChange} - > - {({ getItemProps, isOpen, openMenu, closeMenu, selectItem }) => { - return ( -
- , - id: undefined, - onBlur: () => { - closeMenu(); - setMenuPath([]); - setInputValue(displayValue); - }, - onChange: event => { - debounceFn(event.target.value); - setInputValue(event.target.value); - }, - onFocus: () => openMenu(), - placeholder - }} - disabled={disabled} - error={error} - helperText={helperText} - label={label} - fullWidth={true} - value={inputValue} - /> - {isOpen && ( - - {options.length ? ( - <> - {menuPath.length > 0 && ( - - setMenuPath( - menuPath.slice(0, menuPath.length - 2) - ) - } - > - - - - )} - {(menuPath.length - ? getMenuItemByPath(options, menuPath).children - : options - ).map((suggestion, index) => ( - - suggestion.value - ? selectItem(suggestion.value) - : setMenuPath([...menuPath, index]) - } - > - {suggestion.label} - - ))} - - ) : ( - - - - )} - - )} -
- ); - }} - - )} - - ); - } -); + // Reset input value after displayValue change + React.useEffect(() => setInputValue(displayValue), [displayValue]); + + return ( + + {debounceFn => ( + (item ? item.label : "")} + onSelect={handleChange} + > + {({ getItemProps, isOpen, openMenu, closeMenu, selectItem }) => { + return ( +
+ , + id: undefined, + onBlur: () => { + closeMenu(); + setMenuPath([]); + setInputValue(displayValue); + }, + onChange: event => { + debounceFn(event.target.value); + setInputValue(event.target.value); + }, + onFocus: () => openMenu(), + placeholder + }} + disabled={disabled} + error={error} + helperText={helperText} + label={label} + fullWidth={true} + value={inputValue} + /> + {isOpen && ( + + {options.length ? ( + <> + {menuPath.length > 0 && ( + + setMenuPath( + menuPath.slice(0, menuPath.length - 2) + ) + } + > + + + + )} + {(menuPath.length + ? getMenuItemByPath(options, menuPath).children + : options + ).map((suggestion, index) => ( + + suggestion.value + ? selectItem(suggestion.value) + : setMenuPath([...menuPath, index]) + } + > + {suggestion.label} + + ))} + + ) : ( + + + + )} + + )} +
+ ); + }} + + )} + + ); +}; AutocompleteSelectMenu.displayName = "AutocompleteSelectMenu"; export default AutocompleteSelectMenu; diff --git a/src/components/AutocompleteSelectMenu/index.ts b/src/components/AutocompleteSelectMenu/index.ts index 3a0e4e0d2..a49ff0536 100644 --- a/src/components/AutocompleteSelectMenu/index.ts +++ b/src/components/AutocompleteSelectMenu/index.ts @@ -1,2 +1,2 @@ -export { default } from './AutocompleteSelectMenu'; -export * from './AutocompleteSelectMenu'; \ No newline at end of file +export { default } from "./AutocompleteSelectMenu"; +export * from "./AutocompleteSelectMenu"; diff --git a/src/components/CardMenu/CardMenu.tsx b/src/components/CardMenu/CardMenu.tsx index 35348e964..3de7e73be 100644 --- a/src/components/CardMenu/CardMenu.tsx +++ b/src/components/CardMenu/CardMenu.tsx @@ -1,12 +1,7 @@ import IconButton from "@material-ui/core/IconButton"; import Menu from "@material-ui/core/Menu"; import MenuItem from "@material-ui/core/MenuItem"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import MoreVertIcon from "@material-ui/icons/MoreVert"; import React from "react"; @@ -23,80 +18,73 @@ export interface CardMenuProps { menuItems: CardMenuItem[]; } -const styles = theme => - createStyles({ - iconButton: { - background: theme.palette.background.paper, - borderRadius: "100%", - height: 32, - padding: 0, - width: 32 - } - }); - -const CardMenu = withStyles(styles, { - name: "CardMenu" -})( - ({ - className, - classes, - disabled, - menuItems - }: CardMenuProps & WithStyles) => { - const [anchorEl, setAnchor] = React.useState(null); - - const handleClick = (event: React.MouseEvent) => { - setAnchor(event.currentTarget); - }; - - const handleClose = () => { - setAnchor(null); - }; - - const handleMenuClick = (menuItemIndex: number) => { - menuItems[menuItemIndex].onSelect(); - handleClose(); - }; - - const open = !!anchorEl; - - return ( -
- - - - - {menuItems.map((menuItem, menuItemIndex) => ( - handleMenuClick(menuItemIndex)} - key={menuItem.label} - > - {menuItem.label} - - ))} - -
- ); +const useStyles = makeStyles(theme => ({ + iconButton: { + background: theme.palette.background.paper, + borderRadius: "100%", + height: 32, + padding: 0, + width: 32 } -); +})); + +const CardMenu: React.FC = props => { + const { className, disabled, menuItems } = props; + const classes = useStyles(props); + + const [anchorEl, setAnchor] = React.useState(null); + + const handleClick = (event: React.MouseEvent) => { + setAnchor(event.currentTarget); + }; + + const handleClose = () => { + setAnchor(null); + }; + + const handleMenuClick = (menuItemIndex: number) => { + menuItems[menuItemIndex].onSelect(); + handleClose(); + }; + + const open = !!anchorEl; + + return ( +
+ + + + + {menuItems.map((menuItem, menuItemIndex) => ( + handleMenuClick(menuItemIndex)} + key={menuItem.label} + > + {menuItem.label} + + ))} + +
+ ); +}; CardMenu.displayName = "CardMenu"; export default CardMenu; diff --git a/src/components/CardSpacer.tsx b/src/components/CardSpacer.tsx index 6daf9a0fa..71ca51d55 100644 --- a/src/components/CardSpacer.tsx +++ b/src/components/CardSpacer.tsx @@ -1,29 +1,25 @@ -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import React from "react"; -const styles = theme => - createStyles({ - spacer: { - [theme.breakpoints.down("sm")]: { - marginTop: theme.spacing(1) - }, - marginTop: theme.spacing(3) - } - }); +const useStyles = makeStyles(theme => ({ + spacer: { + [theme.breakpoints.down("sm")]: { + marginTop: theme.spacing(1) + }, + marginTop: theme.spacing(3) + } +})); -interface CardSpacerProps extends WithStyles { +interface CardSpacerProps { children?: React.ReactNode; } -export const CardSpacer = withStyles(styles, { name: "CardSpacer" })( - ({ classes, children }: CardSpacerProps) => ( -
{children}
- ) -); +export const CardSpacer: React.FC = props => { + const { children } = props; + + const classes = useStyles(props); + + return
{children}
; +}; CardSpacer.displayName = "CardSpacer"; export default CardSpacer; diff --git a/src/components/CardTitle/CardTitle.tsx b/src/components/CardTitle/CardTitle.tsx index d8be9e9bb..eb565e834 100644 --- a/src/components/CardTitle/CardTitle.tsx +++ b/src/components/CardTitle/CardTitle.tsx @@ -1,42 +1,36 @@ -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import classNames from "classnames"; import React from "react"; -const styles = theme => - createStyles({ - children: theme.mixins.gutters({}), - constantHeight: { - height: 56 - }, - hr: { - border: "none", - borderTop: `1px solid ${theme.overrides.MuiCard.root.borderColor}`, - height: 0, - marginBottom: 0, - marginTop: 0, - width: "100%" - }, - root: theme.mixins.gutters({ - alignItems: "center", - display: "flex", - minHeight: 56 - }), - title: { - flex: 1, - lineHeight: 1 - }, - toolbar: { - marginRight: -theme.spacing(1) - } - }); +const useStyles = makeStyles(theme => ({ + children: theme.mixins.gutters({}), + constantHeight: { + height: 56 + }, + hr: { + border: "none", + borderTop: `1px solid ${theme.palette.divider}`, + height: 0, + marginBottom: 0, + marginTop: 0, + width: "100%" + }, + root: theme.mixins.gutters({ + alignItems: "center", + display: "flex", + minHeight: 56 + }), + title: { + flex: 1, + lineHeight: 1 + }, + toolbar: { + marginRight: -theme.spacing(1) + } +})); -interface CardTitleProps extends WithStyles { +interface CardTitleProps { children?: React.ReactNode; className?: string; height?: "default" | "const"; @@ -45,24 +39,27 @@ interface CardTitleProps extends WithStyles { onClick?: (event: React.MouseEvent) => void; } -const CardTitle = withStyles(styles, { name: "CardTitle" })( - ({ - classes, +const CardTitle: React.FC = props => { + const { className, children, height, title, toolbar, onClick, - ...props - }: CardTitleProps) => ( + ...rest + } = props; + + const classes = useStyles(props); + + return ( <>
{children}
- ) -); + ); +}; CardTitle.displayName = "CardTitle"; export default CardTitle; diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index 38d173eed..63eb4ff0f 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -1,12 +1,6 @@ -import { Omit } from "@material-ui/core"; import ButtonBase from "@material-ui/core/ButtonBase"; import { CheckboxProps as MuiCheckboxProps } from "@material-ui/core/Checkbox"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import { fade } from "@material-ui/core/styles/colorManipulator"; import classNames from "classnames"; import React from "react"; @@ -25,116 +19,116 @@ export type CheckboxProps = Omit< onChange?: (event: React.ChangeEvent) => void; }; -const styles = theme => - createStyles({ - box: { - "&$checked": { - "&:before": { - background: theme.palette.primary.main, - color: theme.palette.background.paper, - content: '"\\2713"', - fontWeight: "bold", - textAlign: "center" - }, - borderColor: theme.palette.primary.main - }, - "&$disabled": { - borderColor: theme.palette.grey[200] - }, - "&$indeterminate": { - "&:before": { - background: theme.palette.primary.main, - height: 2, - top: 5 - }, - borderColor: theme.palette.primary.main - }, +const useStyles = makeStyles(theme => ({ + box: { + "&$checked": { "&:before": { - background: "rgba(0, 0, 0, 0)", - content: '""', - height: 14, - left: -1, - position: "absolute", - top: -1, - transition: theme.transitions.duration.short + "ms", - width: 14 + background: theme.palette.primary.main, + color: theme.palette.background.paper, + content: '"\\2713"', + fontWeight: "bold", + textAlign: "center" }, - - WebkitAppearance: "none", - border: `1px solid ${theme.palette.action.active}`, - boxSizing: "border-box", - cursor: "pointer", + borderColor: theme.palette.primary.main + }, + "&$disabled": { + borderColor: theme.palette.grey[200] + }, + "&$indeterminate": { + "&:before": { + background: theme.palette.primary.main, + height: 2, + top: 5 + }, + borderColor: theme.palette.primary.main + }, + "&:before": { + background: "rgba(0, 0, 0, 0)", + content: '""', height: 14, - outline: "0", - position: "relative", - userSelect: "none", + left: -1, + position: "absolute", + top: -1, + transition: theme.transitions.duration.short + "ms", width: 14 }, - checked: {}, - disabled: {}, - indeterminate: {}, - root: { - "&:hover": { - background: fade(theme.palette.primary.main, 0.1) - }, - alignSelf: "start", - borderRadius: "100%", - cursor: "pointer", - display: "flex", - height: 30, - justifyContent: "center", - margin: "5px 9px", - width: 30 - } - }); -const Checkbox = withStyles(styles, { name: "Checkbox" })( - ({ + + WebkitAppearance: "none", + border: `1px solid ${theme.palette.action.active}`, + boxSizing: "border-box", + cursor: "pointer", + height: 14, + outline: "0", + position: "relative", + userSelect: "none", + width: 14 + }, + checked: {}, + disabled: {}, + indeterminate: {}, + root: { + "&:hover": { + background: fade(theme.palette.primary.main, 0.1) + }, + alignSelf: "start", + borderRadius: "100%", + cursor: "pointer", + display: "flex", + height: 30, + justifyContent: "center", + margin: "5px 9px", + width: 30 + } +})); +const Checkbox: React.FC = props => { + const { checked, className, - classes, + disabled, disableClickPropagation, indeterminate, onChange, value, name, - ...props - }: CheckboxProps & WithStyles) => { - const inputRef = React.useRef(null); - const handleClick = React.useCallback( - disableClickPropagation - ? event => { - event.stopPropagation(); - inputRef.current.click(); - } - : () => inputRef.current.click(), - [] - ); + ...rest + } = props; + const classes = useStyles(props); - return ( - (null); + const handleClick = React.useCallback( + disableClickPropagation + ? event => { + event.stopPropagation(); + inputRef.current.click(); + } + : () => inputRef.current.click(), + [] + ); + + return ( + + - - - ); - } -); + type="checkbox" + name={name} + value={checked !== undefined && checked.toString()} + ref={inputRef} + onChange={onChange} + /> + + ); +}; Checkbox.displayName = "Checkbox"; export default Checkbox; diff --git a/src/components/Checkbox/index.ts b/src/components/Checkbox/index.ts index 3d46e4f82..364664ba8 100644 --- a/src/components/Checkbox/index.ts +++ b/src/components/Checkbox/index.ts @@ -1,2 +1,2 @@ -export { default } from './Checkbox'; -export * from './Checkbox'; \ No newline at end of file +export { default } from "./Checkbox"; +export * from "./Checkbox"; diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index f409874b9..db1456434 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -1,9 +1,4 @@ -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import { fade } from "@material-ui/core/styles/colorManipulator"; import Typography from "@material-ui/core/Typography"; import CloseIcon from "@material-ui/icons/Close"; @@ -16,32 +11,30 @@ export interface ChipProps { onClose?: () => void; } -const styles = theme => - createStyles({ - closeIcon: { - cursor: "pointer", - fontSize: 16, - marginLeft: theme.spacing(), - verticalAlign: "middle" - }, - label: { - color: theme.palette.common.white - }, - root: { - background: fade(theme.palette.secondary.main, 0.8), - borderRadius: 8, - display: "inline-block", - marginRight: theme.spacing(2), - padding: "6px 12px" - } - }); -const Chip = withStyles(styles, { name: "Chip" })( - ({ - classes, - className, - label, - onClose - }: ChipProps & WithStyles) => ( +const useStyles = makeStyles(theme => ({ + closeIcon: { + cursor: "pointer", + fontSize: 16, + marginLeft: theme.spacing(), + verticalAlign: "middle" + }, + label: { + color: theme.palette.common.white + }, + root: { + background: fade(theme.palette.secondary.main, 0.8), + borderRadius: 8, + display: "inline-block", + marginRight: theme.spacing(2), + padding: "6px 12px" + } +})); +const Chip: React.FC = props => { + const { className, label, onClose } = props; + + const classes = useStyles(props); + + return (
{label} @@ -50,7 +43,7 @@ const Chip = withStyles(styles, { name: "Chip" })( )}
- ) -); + ); +}; Chip.displayName = "Chip"; export default Chip; diff --git a/src/components/Chip/index.ts b/src/components/Chip/index.ts index 6de8518ff..a548b9f1e 100644 --- a/src/components/Chip/index.ts +++ b/src/components/Chip/index.ts @@ -1,2 +1,2 @@ -export { default } from './Chip'; -export * from './Chip'; \ No newline at end of file +export { default } from "./Chip"; +export * from "./Chip"; diff --git a/src/components/ColumnPicker/ColumnPickerContent.tsx b/src/components/ColumnPicker/ColumnPickerContent.tsx index ef4a238dd..8580d4391 100644 --- a/src/components/ColumnPicker/ColumnPickerContent.tsx +++ b/src/components/ColumnPicker/ColumnPickerContent.tsx @@ -55,7 +55,7 @@ const useStyles = makeStyles(theme => ({ padding: 0 }, dropShadow: { - boxShadow: `0px -5px 10px 0px ${theme.overrides.MuiCard.root.borderColor}` + boxShadow: `0px -5px 10px 0px ${theme.palette.divider}` }, loadMoreLoaderContainer: { alignItems: "center", diff --git a/src/components/ConfirmButton/ConfirmButton.tsx b/src/components/ConfirmButton/ConfirmButton.tsx index 27f046f26..d570afbf4 100644 --- a/src/components/ConfirmButton/ConfirmButton.tsx +++ b/src/components/ConfirmButton/ConfirmButton.tsx @@ -1,11 +1,10 @@ -import { Omit } from "@material-ui/core"; import Button, { ButtonProps } from "@material-ui/core/Button"; import CircularProgress from "@material-ui/core/CircularProgress"; import { createStyles, Theme, - withStyles, - WithStyles + WithStyles, + withStyles } from "@material-ui/core/styles"; import CheckIcon from "@material-ui/icons/Check"; import { buttonMessages } from "@saleor/intl"; @@ -19,7 +18,7 @@ export type ConfirmButtonTransitionState = | "error" | "default"; -const styles = theme => +const styles = (theme: Theme) => createStyles({ error: { "&:hover": { diff --git a/src/components/Container.tsx b/src/components/Container.tsx index 47b1311d0..c2e48752a 100644 --- a/src/components/Container.tsx +++ b/src/components/Container.tsx @@ -1,35 +1,31 @@ -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import classNames from "classnames"; import React from "react"; -const styles = theme => - createStyles({ - root: { - [theme.breakpoints.up("lg")]: { - marginLeft: "auto", - marginRight: "auto", - maxWidth: theme.breakpoints.width("lg") - }, - [theme.breakpoints.up("sm")]: { - padding: theme.spacing(0, 3) - }, - padding: theme.spacing(0, 1) - } - }); +const useStyles = makeStyles(theme => ({ + root: { + [theme.breakpoints.up("lg")]: { + marginLeft: "auto", + marginRight: "auto", + maxWidth: theme.breakpoints.width("lg") + }, + [theme.breakpoints.up("sm")]: { + padding: theme.spacing(0, 3) + }, + padding: theme.spacing(0, 1) + } +})); -interface ContainerProps extends WithStyles { +interface ContainerProps { className?: string; } -export const Container = withStyles(styles, { - name: "Container" -})(({ classes, className, ...props }: ContainerProps) => ( -
-)); +export const Container: React.FC = props => { + const { className, ...rest } = props; + + const classes = useStyles(props); + + return
; +}; Container.displayName = "Container"; export default Container; diff --git a/src/components/ControlledSwitch.tsx b/src/components/ControlledSwitch.tsx index 78900c13d..2254a485a 100644 --- a/src/components/ControlledSwitch.tsx +++ b/src/components/ControlledSwitch.tsx @@ -1,19 +1,18 @@ -import { createStyles, Theme, withStyles, WithStyles } from "@material-ui/core"; +import { makeStyles } from "@material-ui/core"; import FormControlLabel from "@material-ui/core/FormControlLabel"; import Switch from "@material-ui/core/Switch"; import React from "react"; -const styles = theme => - createStyles({ - label: { - marginLeft: theme.spacing(3.5) - }, - labelText: { - fontSize: 14 - } - }); +const useStyles = makeStyles(theme => ({ + label: { + marginLeft: theme.spacing(3.5) + }, + labelText: { + fontSize: 14 + } +})); -interface ControlledSwitchProps extends WithStyles { +interface ControlledSwitchProps { checked: boolean; disabled?: boolean; label: string | React.ReactNode; @@ -23,11 +22,8 @@ interface ControlledSwitchProps extends WithStyles { onChange?(event: React.ChangeEvent); } -export const ControlledSwitch = withStyles(styles, { - name: "ControlledSwitch" -})( - ({ - classes, +export const ControlledSwitch: React.FC = props => { + const { checked, disabled, onChange, @@ -35,7 +31,11 @@ export const ControlledSwitch = withStyles(styles, { name, secondLabel, uncheckedLabel - }: ControlledSwitchProps) => ( + } = props; + + const classes = useStyles(props); + + return ( - ) -); + ); +}; ControlledSwitch.displayName = "ControlledSwitch"; export default ControlledSwitch; diff --git a/src/components/CountryList/CountryList.tsx b/src/components/CountryList/CountryList.tsx index 1a1928eed..7924c0d3f 100644 --- a/src/components/CountryList/CountryList.tsx +++ b/src/components/CountryList/CountryList.tsx @@ -2,12 +2,7 @@ import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; import IconButton from "@material-ui/core/IconButton"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +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"; @@ -32,158 +27,155 @@ export interface CountryListProps { onCountryUnassign: (country: string) => void; } -const styles = theme => - createStyles({ - iconCell: { - "&:last-child": { - paddingRight: 0 - }, - width: 48 + theme.spacing(2) +const useStyles = makeStyles(theme => ({ + iconCell: { + "&:last-child": { + paddingRight: 0 }, - indicator: { - color: theme.palette.text.disabled, - display: "inline-block", - left: 0, - marginRight: theme.spacing(.5), - position: "absolute" + width: 48 + theme.spacing(2) + }, + indicator: { + color: theme.palette.text.disabled, + display: "inline-block", + left: 0, + marginRight: theme.spacing(0.5), + position: "absolute" + }, + offsetCell: { + "&:first-child": { + paddingLeft: theme.spacing(3) }, - offsetCell: { - "&:first-child": { - paddingLeft: theme.spacing(3) - }, - position: "relative" + position: "relative" + }, + pointer: { + cursor: "pointer" + }, + root: { + "&:last-child": { + paddingBottom: 0 }, - pointer: { - cursor: "pointer" - }, - root: { - "&:last-child": { - paddingBottom: 0 - }, - paddingTop: 0 - }, - rotate: { - transform: "rotate(180deg)" - }, - textRight: { - textAlign: "right" - }, - toLeft: { - "&:first-child": { - paddingLeft: 0 - } - }, - wideColumn: { - width: "100%" + paddingTop: 0 + }, + rotate: { + transform: "rotate(180deg)" + }, + textRight: { + textAlign: "right" + }, + toLeft: { + "&:first-child": { + paddingLeft: 0 } - }); + }, + wideColumn: { + width: "100%" + } +})); -const CountryList = withStyles(styles, { - name: "CountryList" -})( - ({ - classes, +const CountryList: React.FC = props => { + const { countries, disabled, emptyText, title, onCountryAssign, onCountryUnassign - }: CountryListProps & WithStyles) => { - const [isCollapsed, setCollapseStatus] = React.useState(true); - const toggleCollapse = () => setCollapseStatus(!isCollapsed); + } = props; + const classes = useStyles(props); - return ( - - - - - } - /> - - - - - - countries.length.toString(), "...") - }} + const [isCollapsed, setCollapseStatus] = React.useState(true); + const toggleCollapse = () => setCollapseStatus(!isCollapsed); + + return ( + + + + + } + /> + +
+ + + + countries.length.toString(), "...") + }} + /> + + + + - - - - - - - - {!isCollapsed && - renderCollection( - countries, - (country, countryIndex) => ( - - - {maybe( - () => ( - <> - {(countryIndex === 0 || - countries[countryIndex].country[0] !== - countries[countryIndex - 1].country[0]) && ( - - {country.country[0]} - - )} - {country.country} - - ), - - )} - - + + + {!isCollapsed && + renderCollection( + countries, + (country, countryIndex) => ( + + + {maybe( + () => ( + <> + {(countryIndex === 0 || + countries[countryIndex].country[0] !== + countries[countryIndex - 1].country[0]) && ( + + {country.country[0]} + + )} + {country.country} + + ), + + )} + + + onCountryUnassign(country.code)} > - onCountryUnassign(country.code)} - > - - - - - ), - () => ( - - - {emptyText} - - - ) - )} - -
- - - ); - } -); + + + + + ), + () => ( + + + {emptyText} + + + ) + )} + + + + + ); +}; export default CountryList; diff --git a/src/components/Debounce.tsx b/src/components/Debounce.tsx index 5d5c67571..6189ba60c 100644 --- a/src/components/Debounce.tsx +++ b/src/components/Debounce.tsx @@ -1,7 +1,7 @@ import React from "react"; export interface DebounceProps { - children: ((props: (...args: T[]) => void) => React.ReactNode); + children: (props: (...args: T[]) => void) => React.ReactNode; debounceFn: (...args: T[]) => void; time?: number; } diff --git a/src/components/DeleteFilterTabDialog/index.ts b/src/components/DeleteFilterTabDialog/index.ts index 3f4ef0d56..0502c29ae 100644 --- a/src/components/DeleteFilterTabDialog/index.ts +++ b/src/components/DeleteFilterTabDialog/index.ts @@ -1,2 +1,2 @@ -export { default } from './DeleteFilterTabDialog'; -export * from './DeleteFilterTabDialog'; \ No newline at end of file +export { default } from "./DeleteFilterTabDialog"; +export * from "./DeleteFilterTabDialog"; diff --git a/src/components/EditableTableCell/EditableTableCell.tsx b/src/components/EditableTableCell/EditableTableCell.tsx index 75cc7d56c..b9acac21b 100644 --- a/src/components/EditableTableCell/EditableTableCell.tsx +++ b/src/components/EditableTableCell/EditableTableCell.tsx @@ -1,11 +1,6 @@ import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import TableCell from "@material-ui/core/TableCell"; import TextField, { TextFieldProps } from "@material-ui/core/TextField"; import Typography from "@material-ui/core/Typography"; @@ -14,38 +9,37 @@ import React from "react"; import useForm from "@saleor/hooks/useForm"; -const styles = theme => - createStyles({ - card: { - border: `1px solid ${theme.overrides.MuiCard.root.borderColor}` - }, - container: { - position: "relative" - }, - overlay: { - cursor: "pointer", - height: "100vh", - left: 0, - position: "fixed", - top: 0, - width: "100vw", - zIndex: 1 - }, - root: { - left: 0, - minWidth: theme.spacing(20), - position: "absolute", - top: 0, - width: `calc(100% + ${theme.spacing(4)}px)`, - zIndex: 2 - }, - text: { - cursor: "pointer", - fontSize: "0.8125rem" - } - }); +const useStyles = makeStyles(theme => ({ + card: { + border: `1px solid ${theme.palette.divider}` + }, + container: { + position: "relative" + }, + overlay: { + cursor: "pointer", + height: "100vh", + left: 0, + position: "fixed", + top: 0, + width: "100vw", + zIndex: 1 + }, + root: { + left: 0, + minWidth: theme.spacing(20), + position: "absolute", + top: 0, + width: `calc(100% + ${theme.spacing(4)}px)`, + zIndex: 2 + }, + text: { + cursor: "pointer", + fontSize: "0.8125rem" + } +})); -interface EditableTableCellProps extends WithStyles { +interface EditableTableCellProps { className?: string; defaultValue?: string; focused?: boolean; @@ -54,54 +48,52 @@ interface EditableTableCellProps extends WithStyles { onConfirm(value: string): any; } -export const EditableTableCell = withStyles(styles, { - name: "EditableTableCell" -})( - ({ - classes, +export const EditableTableCell: React.FC = props => { + const { className, defaultValue, focused, InputProps, value, onConfirm - }: EditableTableCellProps) => { - const handleConfirm = (data: { value: string }) => { - disable(); - onConfirm(data.value); - }; + } = props; + const classes = useStyles(props); - const [opened, setOpenStatus] = React.useState(focused); - const { change, data } = useForm({ value }, [], handleConfirm); - const enable = () => setOpenStatus(true); - const disable = () => setOpenStatus(false); + const handleConfirm = (data: { value: string }) => { + disable(); + onConfirm(data.value); + }; - return ( - - {opened &&
} - - {value || defaultValue} - - {opened && ( -
- - - - - -
- )} - - ); - } -); + const [opened, setOpenStatus] = React.useState(focused); + const { change, data } = useForm({ value }, [], handleConfirm); + const enable = () => setOpenStatus(true); + const disable = () => setOpenStatus(false); + + return ( + + {opened &&
} + + {value || defaultValue} + + {opened && ( +
+ + + + + +
+ )} + + ); +}; EditableTableCell.displayName = "EditableTableCell"; export default EditableTableCell; diff --git a/src/components/ErrorPage/ErrorPage.tsx b/src/components/ErrorPage/ErrorPage.tsx index 3314c57ca..77b6ba041 100644 --- a/src/components/ErrorPage/ErrorPage.tsx +++ b/src/components/ErrorPage/ErrorPage.tsx @@ -1,10 +1,5 @@ import Button from "@material-ui/core/Button"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import React from "react"; import SVG from "react-inlinesvg"; @@ -12,57 +7,60 @@ import { FormattedMessage } from "react-intl"; import notFoundImage from "@assets/images/what.svg"; -export interface ErrorPageProps extends WithStyles { +export interface ErrorPageProps { onBack: () => void; } -const styles = theme => - createStyles({ - bottomHeader: { - fontWeight: 600 as 600, - textTransform: "uppercase" +const useStyles = makeStyles(theme => ({ + bottomHeader: { + fontWeight: 600 as 600, + textTransform: "uppercase" + }, + button: { + marginTop: theme.spacing(2), + padding: 20 + }, + container: { + [theme.breakpoints.down("sm")]: { + gridTemplateColumns: "1fr", + padding: theme.spacing(3), + width: "100%" }, - button: { - marginTop: theme.spacing(2), - padding: 20 + display: "grid", + gridTemplateColumns: "1fr 487px", + margin: "0 auto", + width: 830 + }, + innerContainer: { + [theme.breakpoints.down("sm")]: { + order: 1, + textAlign: "center" }, - container: { - [theme.breakpoints.down("sm")]: { - gridTemplateColumns: "1fr", - padding: theme.spacing(3), - width: "100%" - }, - display: "grid", - gridTemplateColumns: "1fr 487px", - margin: "0 auto", - width: 830 - }, - innerContainer: { - [theme.breakpoints.down("sm")]: { - order: 1, - textAlign: "center" - }, - display: "flex", - flexDirection: "column", - justifyContent: "center" - }, - notFoundImage: { - "& svg": { - width: "100%" - } - }, - root: { - alignItems: "center", - display: "flex", - height: "calc(100vh - 88px)" - }, - upperHeader: { - fontWeight: 600 as 600 + display: "flex", + flexDirection: "column", + justifyContent: "center" + }, + notFoundImage: { + "& svg": { + width: "100%" } - }); + }, + root: { + alignItems: "center", + display: "flex", + height: "calc(100vh - 88px)" + }, + upperHeader: { + fontWeight: 600 as 600 + } +})); -const ErrorPage = withStyles(styles, { name: "NotFoundPage" })( - ({ classes, onBack }: ErrorPageProps) => ( +const ErrorPage: React.FC = props => { + const { onBack } = props; + + const classes = useStyles(props); + + return (
@@ -99,7 +97,7 @@ const ErrorPage = withStyles(styles, { name: "NotFoundPage" })(
- ) -); + ); +}; ErrorPage.displayName = "ErrorPage"; export default ErrorPage; diff --git a/src/components/ExtendedPageHeader/ExtendedPageHeader.tsx b/src/components/ExtendedPageHeader/ExtendedPageHeader.tsx index adc7cefdb..70d1c6a1a 100644 --- a/src/components/ExtendedPageHeader/ExtendedPageHeader.tsx +++ b/src/components/ExtendedPageHeader/ExtendedPageHeader.tsx @@ -1,55 +1,53 @@ -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import classNames from "classnames"; import React from "react"; -const styles = theme => - createStyles({ - action: { - flex: "0 0 auto" - }, - grid: { - padding: theme.spacing(2) - }, - menuButton: { - flex: "0 0 auto", - marginLeft: -theme.spacing(2), - marginRight: theme.spacing(3), - marginTop: -theme.spacing(2) - }, - root: { - alignItems: "center", - display: "flex", - marginBottom: theme.spacing(3) - }, - subtitle: { - alignItems: "center", - display: "flex", - marginBottom: theme.spacing(2) - }, - title: { - flex: 1, - paddingBottom: theme.spacing(2) - } - }); +const useStyles = makeStyles(theme => ({ + action: { + flex: "0 0 auto" + }, + grid: { + padding: theme.spacing(2) + }, + menuButton: { + flex: "0 0 auto", + marginLeft: -theme.spacing(2), + marginRight: theme.spacing(3), + marginTop: -theme.spacing(2) + }, + root: { + alignItems: "center", + display: "flex", + marginBottom: theme.spacing(3) + }, + subtitle: { + alignItems: "center", + display: "flex", + marginBottom: theme.spacing(2) + }, + title: { + flex: 1, + paddingBottom: theme.spacing(2) + } +})); -interface ExtendedPageHeaderProps extends WithStyles { +interface ExtendedPageHeaderProps { children?: React.ReactNode; className?: string; title?: React.ReactNode; } -const ExtendedPageHeader = withStyles(styles, { name: "ExtendedPageHeader" })( - ({ children, classes, className, title }: ExtendedPageHeaderProps) => ( +const ExtendedPageHeader: React.FC = props => { + const { children, className, title } = props; + + const classes = useStyles(props); + + return (
{title}
{children}
- ) -); + ); +}; ExtendedPageHeader.displayName = "ExtendedPageHeader"; export default ExtendedPageHeader; diff --git a/src/components/ExternalLink/ExternalLink.tsx b/src/components/ExternalLink/ExternalLink.tsx index 3255f54ea..d81d933ab 100644 --- a/src/components/ExternalLink/ExternalLink.tsx +++ b/src/components/ExternalLink/ExternalLink.tsx @@ -1,36 +1,31 @@ -import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import Typography, { TypographyProps } from "@material-ui/core/Typography"; import React from "react"; -const styles = createStyles({ +const useStyles = makeStyles({ link: { textDecoration: "none" } }); -interface ExternalLinkProps - extends React.HTMLProps, - WithStyles { +interface ExternalLinkProps extends React.HTMLProps { href: string; className?: string; typographyProps?: TypographyProps; } -const ExternalLink = withStyles(styles, { name: "ExternalLink" })( - ({ - classes, - className, - children, - href, - typographyProps, - ...props - }: ExternalLinkProps) => ( - +const ExternalLink: React.FC = props => { + const { className, children, href, typographyProps, ...rest } = props; + + const classes = useStyles(props); + + return ( + {children} - ) -); + ); +}; ExternalLink.displayName = "ExternalLink"; export default ExternalLink; diff --git a/src/components/FileUpload/FileUpload.tsx b/src/components/FileUpload/FileUpload.tsx index 6c71f53f7..a70681b38 100644 --- a/src/components/FileUpload/FileUpload.tsx +++ b/src/components/FileUpload/FileUpload.tsx @@ -1,10 +1,10 @@ import Button from "@material-ui/core/Button"; -import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; import React from "react"; import { FormattedMessage } from "react-intl"; -const styles = createStyles({ +const useStyles = makeStyles({ fileUploadField: { display: "none" }, @@ -16,15 +16,19 @@ const styles = createStyles({ } }); -interface FileUploadProps extends WithStyles { +interface FileUploadProps { disabled?: boolean; name?: string; value?: any; onChange?(event: React.ChangeEvent); } -const FileUpload = withStyles(styles, { name: "FileUpload" })( - ({ classes, disabled, name, value, onChange }: FileUploadProps) => ( +const FileUpload: React.FC = props => { + const { disabled, name, value, onChange } = props; + + const classes = useStyles(props); + + return (
- ) -); + ); +}; FileUpload.displayName = "FileUpload"; export default FileUpload; diff --git a/src/components/Filter/Filter.tsx b/src/components/Filter/Filter.tsx index 48930357c..0f5e2a166 100644 --- a/src/components/Filter/Filter.tsx +++ b/src/components/Filter/Filter.tsx @@ -2,7 +2,7 @@ import ButtonBase from "@material-ui/core/ButtonBase"; import Grow from "@material-ui/core/Grow"; import Paper from "@material-ui/core/Paper"; import Popper from "@material-ui/core/Popper"; -import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import { fade } from "@material-ui/core/styles/colorManipulator"; import Typography from "@material-ui/core/Typography"; import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown"; @@ -21,129 +21,120 @@ export interface FilterProps { onFilterAdd: (filter: FilterContentSubmitData) => void; } -const styles = theme => - createStyles({ - addFilterButton: { - "&$filterButton": { - "&:hover, &:focus": { - backgroundColor: fade(theme.palette.primary.main, 0.1) - }, - backgroundColor: theme.palette.background.paper, - border: `1px solid ${theme.palette.primary.main}`, - cursor: "pointer", - marginBottom: 0, - marginRight: theme.spacing(2), - marginTop: 0, - transition: theme.transitions.duration.short + "ms" - } - }, - addFilterButtonActive: { - "&$addFilterButton": { +const useStyles = makeStyles(theme => ({ + addFilterButton: { + "&$filterButton": { + "&:hover, &:focus": { backgroundColor: fade(theme.palette.primary.main, 0.1) - } - }, - addFilterIcon: { - transition: theme.transitions.duration.short + "ms" - }, - addFilterText: { - color: theme.palette.primary.main, - fontSize: 14, - fontWeight: 600 as 600, - marginRight: 4, - textTransform: "uppercase" - }, - filterButton: { - alignItems: "center", - backgroundColor: fade(theme.palette.primary.main, 0.6), - borderRadius: "4px", - display: "flex", - height: 40, - justifyContent: "space-around", - margin: theme.spacing(2, 1), - marginLeft: 0, - padding: theme.spacing(0, 2), - position: "relative" - }, - paper: { - "& p": { - paddingBottom: 10 }, - marginTop: theme.spacing(2), - padding: theme.spacing(2), - width: 240 - }, - popover: { - zIndex: 1 - }, - rotate: { - transform: "rotate(180deg)" + backgroundColor: theme.palette.background.paper, + border: `1px solid ${theme.palette.primary.main}`, + cursor: "pointer", + marginBottom: 0, + marginRight: theme.spacing(2), + marginTop: 0, + transition: theme.transitions.duration.short + "ms" } - }); -const Filter = withStyles(styles, { name: "Filter" })( - ({ - classes, - currencySymbol, - filterLabel, - menu, - onFilterAdd - }: FilterProps & WithStyles) => { - const anchor = React.useRef(); - const [isFilterMenuOpened, setFilterMenuOpened] = React.useState(false); - - return ( -
- setFilterMenuOpened(!isFilterMenuOpened)} - > - - - - - - - {({ TransitionProps, placement }) => ( - - - {filterLabel} - { - onFilterAdd(data); - setFilterMenuOpened(false); - }} - /> - - - )} - -
- ); + }, + addFilterButtonActive: { + "&$addFilterButton": { + backgroundColor: fade(theme.palette.primary.main, 0.1) + } + }, + addFilterIcon: { + transition: theme.transitions.duration.short + "ms" + }, + addFilterText: { + color: theme.palette.primary.main, + fontSize: 14, + fontWeight: 600 as 600, + marginRight: 4, + textTransform: "uppercase" + }, + filterButton: { + alignItems: "center", + backgroundColor: fade(theme.palette.primary.main, 0.6), + borderRadius: "4px", + display: "flex", + height: 40, + justifyContent: "space-around", + margin: theme.spacing(2, 1), + marginLeft: 0, + padding: theme.spacing(0, 2), + position: "relative" + }, + paper: { + "& p": { + paddingBottom: 10 + }, + marginTop: theme.spacing(2), + padding: theme.spacing(2), + width: 240 + }, + popover: { + zIndex: 1 + }, + rotate: { + transform: "rotate(180deg)" } -); +})); +const Filter: React.FC = props => { + const { currencySymbol, filterLabel, menu, onFilterAdd } = props; + const classes = useStyles(props); + + const anchor = React.useRef(); + const [isFilterMenuOpened, setFilterMenuOpened] = React.useState(false); + + return ( +
+ setFilterMenuOpened(!isFilterMenuOpened)} + > + + + + + + + {({ TransitionProps, placement }) => ( + + + {filterLabel} + { + onFilterAdd(data); + setFilterMenuOpened(false); + }} + /> + + + )} + +
+ ); +}; Filter.displayName = "Filter"; export default Filter; diff --git a/src/components/Filter/FilterActions.tsx b/src/components/Filter/FilterActions.tsx index c2331a5ed..3d5cdbcc7 100644 --- a/src/components/Filter/FilterActions.tsx +++ b/src/components/Filter/FilterActions.tsx @@ -17,6 +17,7 @@ const useInputStyles = makeStyles({ const Search: React.FC = props => { const classes = useInputStyles({}); + return ( - createStyles({ - spacer: { - marginTop: theme.spacing(3) - } - }); +const useStyles = makeStyles(theme => ({ + spacer: { + marginTop: theme.spacing(3) + } +})); -interface FormSpacerProps extends WithStyles { +interface FormSpacerProps { children?: React.ReactNode; } -export const FormSpacer = withStyles(styles, { name: "FormSpacer" })( - ({ classes, children }: FormSpacerProps) => ( -
{children}
- ) -); +export const FormSpacer: React.FC = props => { + const { children } = props; + + const classes = useStyles(props); + + return
{children}
; +}; FormSpacer.displayName = "FormSpacer"; export default FormSpacer; diff --git a/src/components/Grid/Grid.tsx b/src/components/Grid/Grid.tsx index 2d96f6a86..2d90dd9fa 100644 --- a/src/components/Grid/Grid.tsx +++ b/src/components/Grid/Grid.tsx @@ -1,43 +1,41 @@ -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import classNames from "classnames"; import React from "react"; export type GridVariant = "default" | "inverted" | "uniform"; -export interface GridProps extends WithStyles { +export interface GridProps { children: React.ReactNodeArray | React.ReactNode; className?: string; variant?: GridVariant; } -const styles = theme => - createStyles({ - default: { - gridTemplateColumns: "9fr 4fr" - }, - inverted: { - gridTemplateColumns: "4fr 9fr" - }, - root: { - display: "grid", - gridColumnGap: theme.spacing(3), - gridRowGap: theme.spacing(3), - [theme.breakpoints.down("sm")]: { - gridRowGap: theme.spacing(1), - gridTemplateColumns: "1fr" - } - }, - uniform: { - gridTemplateColumns: "1fr 1fr" +const useStyles = makeStyles(theme => ({ + default: { + gridTemplateColumns: "9fr 4fr" + }, + inverted: { + gridTemplateColumns: "4fr 9fr" + }, + root: { + display: "grid", + gridColumnGap: theme.spacing(3), + gridRowGap: theme.spacing(3), + [theme.breakpoints.down("sm")]: { + gridRowGap: theme.spacing(1), + gridTemplateColumns: "1fr" } - }); + }, + uniform: { + gridTemplateColumns: "1fr 1fr" + } +})); -export const Grid = withStyles(styles, { name: "Grid" })( - ({ className, children, classes, variant }: GridProps) => ( +export const Grid: React.FC = props => { + const { className, children, variant } = props; + + const classes = useStyles(props); + + return (
{children}
- ) -); + ); +}; Grid.displayName = "Grid"; Grid.defaultProps = { variant: "default" diff --git a/src/components/Hr.tsx b/src/components/Hr.tsx index 24fd02828..edc39e5bc 100644 --- a/src/components/Hr.tsx +++ b/src/components/Hr.tsx @@ -1,9 +1,4 @@ -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import classNames from "classnames"; import React from "react"; @@ -11,22 +6,23 @@ interface HrProps { className?: string; } -const styles = theme => - createStyles({ - root: { - backgroundColor: theme.overrides.MuiCard.root.borderColor, - border: "none", - display: "block", - height: 1, - margin: 0, - width: "100%" - } - }); +const useStyles = makeStyles(theme => ({ + root: { + backgroundColor: theme.palette.divider, + border: "none", + display: "block", + height: 1, + margin: 0, + width: "100%" + } +})); -export const Hr = withStyles(styles, { name: "Hr" })( - ({ className, classes }: HrProps & WithStyles) => ( -
- ) -); +export const Hr: React.FC = props => { + const { className } = props; + + const classes = useStyles(props); + + return
; +}; Hr.displayName = "Hr"; export default Hr; diff --git a/src/components/IconButtonTableCell/IconButtonTableCell.tsx b/src/components/IconButtonTableCell/IconButtonTableCell.tsx index f8bbf5f09..a8f58bd02 100644 --- a/src/components/IconButtonTableCell/IconButtonTableCell.tsx +++ b/src/components/IconButtonTableCell/IconButtonTableCell.tsx @@ -1,10 +1,5 @@ import IconButton from "@material-ui/core/IconButton"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import TableCell from "@material-ui/core/TableCell"; import React from "react"; @@ -17,23 +12,26 @@ export interface IconButtonTableCellProps { onClick: () => void; } -const styles = theme => - createStyles({ - root: { - "&:last-child": { - paddingRight: 0 - }, - paddingRight: 0, - width: ICONBUTTON_SIZE + theme.spacing(.5) - } - }); -const IconButtonTableCell = withStyles(styles, { name: "IconButtonTableCell" })( - ({ +const useStyles = makeStyles(theme => ({ + root: { + "&:last-child": { + paddingRight: 0 + }, + paddingRight: 0, + width: ICONBUTTON_SIZE + theme.spacing(0.5) + } +})); +const IconButtonTableCell: React.FC = props => { + const { children, - classes, + disabled, onClick - }: IconButtonTableCellProps & WithStyles) => ( + } = props; + + const classes = useStyles(props); + + return ( - ) -); + ); +}; IconButtonTableCell.displayName = "IconButtonTableCell"; export default IconButtonTableCell; diff --git a/src/components/IconButtonTableCell/index.ts b/src/components/IconButtonTableCell/index.ts index ec9027bd4..aa267536f 100644 --- a/src/components/IconButtonTableCell/index.ts +++ b/src/components/IconButtonTableCell/index.ts @@ -1,2 +1,2 @@ -export { default } from './IconButtonTableCell'; -export * from './IconButtonTableCell'; \ No newline at end of file +export { default } from "./IconButtonTableCell"; +export * from "./IconButtonTableCell"; diff --git a/src/components/ImageTile/ImageTile.tsx b/src/components/ImageTile/ImageTile.tsx index d10f3f0bb..9e71294a5 100644 --- a/src/components/ImageTile/ImageTile.tsx +++ b/src/components/ImageTile/ImageTile.tsx @@ -1,55 +1,49 @@ -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import React from "react"; import IconButton from "@material-ui/core/IconButton"; import DeleteIcon from "@material-ui/icons/Delete"; import EditIcon from "@material-ui/icons/Edit"; -const styles = theme => - createStyles({ - image: { - height: "100%", - objectFit: "contain", - userSelect: "none", - width: "100%" +const useStyles = makeStyles(theme => ({ + image: { + height: "100%", + objectFit: "contain", + userSelect: "none", + width: "100%" + }, + imageContainer: { + "&:hover, &.dragged": { + "& $imageOverlay": { + display: "block" + } }, - imageContainer: { - "&:hover, &.dragged": { - "& $imageOverlay": { - display: "block" - } - }, - background: theme.palette.background.paper, - border: `1px solid ${theme.overrides.MuiCard.root.borderColor}`, - borderRadius: theme.spacing(), - height: 148, - overflow: "hidden", - padding: theme.spacing(2), - position: "relative", - width: 148 - }, - imageOverlay: { - background: "rgba(0, 0, 0, 0.6)", - cursor: "move", - display: "none", - height: 148, - left: 0, - position: "absolute", - top: 0, - width: 148 - }, - imageOverlayToolbar: { - display: "flex", - justifyContent: "flex-end" - } - }); + background: theme.palette.background.paper, + border: `1px solid ${theme.palette.divider}`, + borderRadius: theme.spacing(), + height: 148, + overflow: "hidden", + padding: theme.spacing(2), + position: "relative", + width: 148 + }, + imageOverlay: { + background: "rgba(0, 0, 0, 0.6)", + cursor: "move", + display: "none", + height: 148, + left: 0, + position: "absolute", + top: 0, + width: 148 + }, + imageOverlayToolbar: { + display: "flex", + justifyContent: "flex-end" + } +})); -interface ImageTileProps extends WithStyles { +interface ImageTileProps { image: { alt?: string; url: string; @@ -58,8 +52,12 @@ interface ImageTileProps extends WithStyles { onImageEdit?: (event: React.ChangeEvent) => void; } -const ImageTile = withStyles(styles, { name: "ImageTile" })( - ({ classes, onImageDelete, onImageEdit, image }: ImageTileProps) => ( +const ImageTile: React.FC = props => { + const { onImageDelete, onImageEdit, image } = props; + + const classes = useStyles(props); + + return (
@@ -77,7 +75,7 @@ const ImageTile = withStyles(styles, { name: "ImageTile" })(
{image.alt}
- ) -); + ); +}; ImageTile.displayName = "ImageTile"; export default ImageTile; diff --git a/src/components/ImageUpload/ImageUpload.tsx b/src/components/ImageUpload/ImageUpload.tsx index 4857d0dce..5216a0013 100644 --- a/src/components/ImageUpload/ImageUpload.tsx +++ b/src/components/ImageUpload/ImageUpload.tsx @@ -1,9 +1,4 @@ -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import { fade } from "@material-ui/core/styles/colorManipulator"; import Typography from "@material-ui/core/Typography"; import classNames from "classnames"; @@ -22,55 +17,58 @@ interface ImageUploadProps { onImageUpload: (file: File) => void; } -const styles = theme => - createStyles({ - containerDragActive: { - background: fade(theme.palette.primary.main, 0.1), - color: theme.palette.primary.main - }, - fileField: { - display: "none" - }, - imageContainer: { - background: "#ffffff", - border: "1px solid #eaeaea", - borderRadius: theme.spacing(), - height: 148, - justifySelf: "start", - overflow: "hidden", - padding: theme.spacing(2), - position: "relative", - transition: theme.transitions.duration.standard + "s", - width: 148 - }, - photosIcon: { - height: "64px", - margin: "0 auto", - width: "64px" - }, - photosIconContainer: { - padding: theme.spacing(5, 0), - textAlign: "center" - }, - uploadText: { - color: theme.typography.body1.color, - fontSize: 12, - fontWeight: 600, - textTransform: "uppercase" - } - }); +const useStyles = makeStyles(theme => ({ + containerDragActive: { + background: fade(theme.palette.primary.main, 0.1), + color: theme.palette.primary.main + }, + fileField: { + display: "none" + }, + imageContainer: { + background: "#ffffff", + border: "1px solid #eaeaea", + borderRadius: theme.spacing(), + height: 148, + justifySelf: "start", + overflow: "hidden", + padding: theme.spacing(2), + position: "relative", + transition: theme.transitions.duration.standard + "s", + width: 148 + }, + photosIcon: { + height: "64px", + margin: "0 auto", + width: "64px" + }, + photosIconContainer: { + padding: theme.spacing(5, 0), + textAlign: "center" + }, + uploadText: { + color: theme.typography.body1.color, + fontSize: 12, + fontWeight: 600, + textTransform: "uppercase" + } +})); -export const ImageUpload = withStyles(styles, { name: "ImageUpload" })( - ({ +export const ImageUpload: React.FC = props => { + const { children, - classes, + className, disableClick, isActiveClassName, iconContainerActiveClassName, iconContainerClassName, onImageUpload - }: ImageUploadProps & WithStyles) => ( + } = props; + + const classes = useStyles(props); + + return ( onImageUpload(files[0])} @@ -107,7 +105,7 @@ export const ImageUpload = withStyles(styles, { name: "ImageUpload" })( )} - ) -); + ); +}; ImageUpload.displayName = "ImageUpload"; export default ImageUpload; diff --git a/src/components/LanguageSwitch/LanguageSwitch.tsx b/src/components/LanguageSwitch/LanguageSwitch.tsx index 8d0a58831..d5235f703 100644 --- a/src/components/LanguageSwitch/LanguageSwitch.tsx +++ b/src/components/LanguageSwitch/LanguageSwitch.tsx @@ -5,12 +5,7 @@ import MenuItem from "@material-ui/core/MenuItem"; import Menu from "@material-ui/core/MenuList"; import Paper from "@material-ui/core/Paper"; import Popper from "@material-ui/core/Popper"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import ArrowDropDown from "@material-ui/icons/ArrowDropDown"; import classNames from "classnames"; @@ -26,109 +21,104 @@ export interface LanguageSwitchProps { onLanguageChange: (lang: LanguageCodeEnum) => void; } -const styles = theme => - createStyles({ - arrow: { - color: theme.palette.primary.main, - transition: theme.transitions.duration.standard + "ms" - }, - container: { - paddingBottom: theme.spacing(1) - }, - menuContainer: { - cursor: "pointer", - display: "flex", - justifyContent: "space-between", - minWidth: 90, - padding: theme.spacing(), - position: "relative" - }, - menuItem: { - textAlign: "justify" - }, - menuPaper: { - maxHeight: `calc(100vh - ${theme.spacing(2)}px)`, - overflow: "scroll" - }, - popover: { - zIndex: 1 - }, - rotate: { - transform: "rotate(180deg)" - } - }); -const LanguageSwitch = withStyles(styles, { name: "LanguageSwitch" })( - ({ - classes, - currentLanguage, - languages, - onLanguageChange - }: LanguageSwitchProps & WithStyles) => { - const [isExpanded, setExpandedState] = React.useState(false); - const anchor = React.useRef(); - - return ( -
- setExpandedState(!isExpanded)} - > - {currentLanguage} - - - - {({ TransitionProps, placement }) => ( - - - setExpandedState(false)} - mouseEvent="onClick" - > - {languages.map(lang => ( - - { - setExpandedState(false); - onLanguageChange(lang.code); - }} - > - - - - ))} - - - - )} - -
- ); +const useStyles = makeStyles(theme => ({ + arrow: { + color: theme.palette.primary.main, + transition: theme.transitions.duration.standard + "ms" + }, + container: { + paddingBottom: theme.spacing(1) + }, + menuContainer: { + cursor: "pointer", + display: "flex", + justifyContent: "space-between", + minWidth: 90, + padding: theme.spacing(), + position: "relative" + }, + menuItem: { + textAlign: "justify" + }, + menuPaper: { + maxHeight: `calc(100vh - ${theme.spacing(2)}px)`, + overflow: "scroll" + }, + popover: { + zIndex: 1 + }, + rotate: { + transform: "rotate(180deg)" } -); +})); +const LanguageSwitch: React.FC = props => { + const { currentLanguage, languages, onLanguageChange } = props; + const classes = useStyles(props); + + const [isExpanded, setExpandedState] = React.useState(false); + const anchor = React.useRef(); + + return ( +
+ setExpandedState(!isExpanded)} + > + {currentLanguage} + + + + {({ TransitionProps, placement }) => ( + + + setExpandedState(false)} + mouseEvent="onClick" + > + {languages.map(lang => ( + + { + setExpandedState(false); + onLanguageChange(lang.code); + }} + > + + + + ))} + + + + )} + +
+ ); +}; LanguageSwitch.displayName = "LanguageSwitch"; export default LanguageSwitch; diff --git a/src/components/LanguageSwitch/index.ts b/src/components/LanguageSwitch/index.ts index 4c425527e..3d4e2e8f1 100644 --- a/src/components/LanguageSwitch/index.ts +++ b/src/components/LanguageSwitch/index.ts @@ -1,2 +1,2 @@ -export { default } from './LanguageSwitch'; -export * from './LanguageSwitch'; \ No newline at end of file +export { default } from "./LanguageSwitch"; +export * from "./LanguageSwitch"; diff --git a/src/components/Link.tsx b/src/components/Link.tsx index 9c1f1f454..996f78a94 100644 --- a/src/components/Link.tsx +++ b/src/components/Link.tsx @@ -1,49 +1,44 @@ -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import Typography, { TypographyProps } from "@material-ui/core/Typography"; import classNames from "classnames"; import React from "react"; -const styles = theme => - createStyles({ - primary: { - color: theme.palette.primary.main - }, - root: { - cursor: "pointer", - display: "inline" - }, - secondary: { - color: theme.palette.primary.main - }, - underline: { - textDecoration: "underline" - } - }); +const useStyles = makeStyles(theme => ({ + primary: { + color: theme.palette.primary.main + }, + root: { + cursor: "pointer", + display: "inline" + }, + secondary: { + color: theme.palette.primary.main + }, + underline: { + textDecoration: "underline" + } +})); -interface LinkProps - extends React.AnchorHTMLAttributes, - WithStyles { +interface LinkProps extends React.AnchorHTMLAttributes { color?: "primary" | "secondary"; underline?: boolean; typographyProps?: TypographyProps; onClick: () => void; } -const Link = withStyles(styles, { name: "Link" })( - ({ - classes, +const Link: React.FC = props => { + const { className, children, color = "primary", underline = false, onClick, ...linkProps - }: LinkProps) => ( + } = props; + + const classes = useStyles(props); + + return ( {children} - ) -); + ); +}; Link.displayName = "Link"; export default Link; diff --git a/src/components/ListField/ListField.tsx b/src/components/ListField/ListField.tsx index 2ec8e3c3e..a1265c3d1 100644 --- a/src/components/ListField/ListField.tsx +++ b/src/components/ListField/ListField.tsx @@ -1,4 +1,3 @@ -import { Omit } from "@material-ui/core"; import Button from "@material-ui/core/Button"; import { createStyles, @@ -17,7 +16,7 @@ interface ListFieldState { value: string; } -const styles = theme => +const styles = (theme: Theme) => createStyles({ chip: { marginBottom: theme.spacing(1) diff --git a/src/components/MenuToggle.tsx b/src/components/MenuToggle.tsx index dc27ecccf..a7daaffab 100644 --- a/src/components/MenuToggle.tsx +++ b/src/components/MenuToggle.tsx @@ -2,15 +2,13 @@ import React from "react"; interface MenuToggleProps { ariaOwns?: string; - children: (( - props: { - actions: { - open: () => void; - close: () => void; - }; - open: boolean; - } - ) => React.ReactElement); + children: (props: { + actions: { + open: () => void; + close: () => void; + }; + open: boolean; + }) => React.ReactElement; } interface MenuToggleState { diff --git a/src/components/Money/index.ts b/src/components/Money/index.ts index e8e2d3a59..3589ba868 100644 --- a/src/components/Money/index.ts +++ b/src/components/Money/index.ts @@ -1,15 +1,15 @@ -import Money from "./Money"; +import { IMoney } from "./Money"; export { default } from "./Money"; export * from "./Money"; -export function addMoney(init: Money, ...args: Money[]): Money { +export function addMoney(init: IMoney, ...args: IMoney[]): IMoney { return { amount: args.reduce((acc, curr) => acc + curr.amount, init.amount), currency: init.currency }; } -export function subtractMoney(init: Money, ...args: Money[]): Money { +export function subtractMoney(init: IMoney, ...args: IMoney[]): IMoney { return { amount: args.reduce((acc, curr) => acc - curr.amount, init.amount), currency: init.currency diff --git a/src/components/MoneyRange/MoneyRange.tsx b/src/components/MoneyRange/MoneyRange.tsx index 5e789e36a..4e154ba7e 100644 --- a/src/components/MoneyRange/MoneyRange.tsx +++ b/src/components/MoneyRange/MoneyRange.tsx @@ -2,7 +2,7 @@ import React from "react"; import { useIntl } from "react-intl"; import { LocaleConsumer } from "../Locale"; -import IMoney from "../Money"; +import { IMoney } from "../Money"; export interface MoneyRangeProps { from?: IMoney; diff --git a/src/components/MoneyRange/index.ts b/src/components/MoneyRange/index.ts index 131c9f9a5..84826e016 100644 --- a/src/components/MoneyRange/index.ts +++ b/src/components/MoneyRange/index.ts @@ -1,2 +1,2 @@ -export { default } from './MoneyRange'; -export * from './MoneyRange'; \ No newline at end of file +export { default } from "./MoneyRange"; +export * from "./MoneyRange"; diff --git a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx index 8843fd71d..eee7f7831 100644 --- a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx +++ b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx @@ -1,10 +1,5 @@ import IconButton from "@material-ui/core/IconButton"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; import Typography from "@material-ui/core/Typography"; import CloseIcon from "@material-ui/icons/Close"; @@ -20,43 +15,42 @@ import MultiAutocompleteSelectFieldContent, { MultiAutocompleteChoiceType } from "./MultiAutocompleteSelectFieldContent"; -const styles = theme => - createStyles({ - chip: { - width: "100%" - }, - chipClose: { - height: 32, - padding: 0, - width: 32 - }, - chipContainer: { - display: "flex", - flexDirection: "column", - marginTop: theme.spacing(1) - }, - chipInner: { - "& svg": { - color: theme.palette.primary.contrastText - }, - alignItems: "center", - background: fade(theme.palette.primary.main, 0.8), - borderRadius: 18, - color: theme.palette.primary.contrastText, - display: "flex", - justifyContent: "space-between", - margin: theme.spacing(1, 0), - paddingLeft: theme.spacing(2), - paddingRight: theme.spacing(1) - }, - chipLabel: { +const useStyles = makeStyles(theme => ({ + chip: { + width: "100%" + }, + chipClose: { + height: 32, + padding: 0, + width: 32 + }, + chipContainer: { + display: "flex", + flexDirection: "column", + marginTop: theme.spacing(1) + }, + chipInner: { + "& svg": { color: theme.palette.primary.contrastText }, - container: { - flexGrow: 1, - position: "relative" - } - }); + alignItems: "center", + background: fade(theme.palette.primary.main, 0.8), + borderRadius: 18, + color: theme.palette.primary.contrastText, + display: "flex", + justifyContent: "space-between", + margin: theme.spacing(1, 0), + paddingLeft: theme.spacing(2), + paddingRight: theme.spacing(1) + }, + chipLabel: { + color: theme.palette.primary.contrastText + }, + container: { + flexGrow: 1, + position: "relative" + } +})); export interface MultiAutocompleteSelectFieldProps extends Partial { @@ -77,14 +71,15 @@ const DebounceAutocomplete: React.ComponentType< DebounceProps > = Debounce; -export const MultiAutocompleteSelectFieldComponent = withStyles(styles, { - name: "MultiAutocompleteSelectField" -})( - ({ +const MultiAutocompleteSelectFieldComponent: React.FC< + MultiAutocompleteSelectFieldProps +> = props => { + const { allowCustomValues, choices, - classes, + displayValues, + hasMore, helperText, label, @@ -95,107 +90,109 @@ export const MultiAutocompleteSelectFieldComponent = withStyles(styles, { fetchChoices, onChange, onFetchMore, - ...props - }: MultiAutocompleteSelectFieldProps & WithStyles) => { - const handleSelect = ( - item: string, - downshiftOpts?: ControllerStateAndHelpers - ) => { - if (downshiftOpts) { - downshiftOpts.reset({ inputValue: "" }); - } - onChange({ - target: { name, value: item } - } as any); - }; + ...rest + } = props; + const classes = useStyles(props); - return ( - <> - ""} - > - {({ - getInputProps, - getItemProps, - isOpen, - toggleMenu, - highlightedIndex, - inputValue - }) => { - const displayCustomValue = - inputValue && - inputValue.length > 0 && - allowCustomValues && - !choices.find( - choice => - choice.label.toLowerCase() === inputValue.toLowerCase() - ); + const handleSelect = ( + item: string, + downshiftOpts?: ControllerStateAndHelpers + ) => { + if (downshiftOpts) { + downshiftOpts.reset({ inputValue: "" }); + } + onChange({ + target: { name, value: item } + } as any); + }; - return ( -
- - -
- ), - id: undefined, - onClick: toggleMenu - }} - helperText={helperText} - label={label} - fullWidth={true} - /> - {isOpen && (!!inputValue || !!choices.length) && ( - !value.includes(choice.value) - )} - displayCustomValue={displayCustomValue} - displayValues={displayValues} - getItemProps={getItemProps} - hasMore={hasMore} - highlightedIndex={highlightedIndex} - loading={loading} - inputValue={inputValue} - onFetchMore={onFetchMore} - /> - )} -
+ return ( + <> + ""} + > + {({ + getInputProps, + getItemProps, + isOpen, + toggleMenu, + highlightedIndex, + inputValue + }) => { + const displayCustomValue = + inputValue && + inputValue.length > 0 && + allowCustomValues && + !choices.find( + choice => choice.label.toLowerCase() === inputValue.toLowerCase() ); - }} - -
- {displayValues.map(value => ( -
-
- - {value.label} - - handleSelect(value.value)} - > - - -
+ + return ( +
+ + toggleMenu()} /> +
+ ), + id: undefined, + onClick: toggleMenu + }} + helperText={helperText} + label={label} + fullWidth={true} + /> + {isOpen && (!!inputValue || !!choices.length) && ( + !value.includes(choice.value) + )} + displayCustomValue={displayCustomValue} + displayValues={displayValues} + getItemProps={getItemProps} + hasMore={hasMore} + highlightedIndex={highlightedIndex} + loading={loading} + inputValue={inputValue} + onFetchMore={onFetchMore} + /> + )}
- ))} -
- - ); - } -); + ); + }} + +
+ {displayValues.map(value => ( +
+
+ + {value.label} + + handleSelect(value.value)} + > + + +
+
+ ))} +
+ + ); +}; + const MultiAutocompleteSelectField: React.FC< MultiAutocompleteSelectFieldProps > = ({ choices, fetchChoices, ...props }) => { const [query, setQuery] = React.useState(""); + if (fetchChoices) { return ( @@ -220,5 +217,6 @@ const MultiAutocompleteSelectField: React.FC< /> ); }; + MultiAutocompleteSelectField.displayName = "MultiAutocompleteSelectField"; export default MultiAutocompleteSelectField; diff --git a/src/components/MultiSelectField/MultiSelectField.tsx b/src/components/MultiSelectField/MultiSelectField.tsx index 0c7a02dce..4cc592a08 100644 --- a/src/components/MultiSelectField/MultiSelectField.tsx +++ b/src/components/MultiSelectField/MultiSelectField.tsx @@ -4,34 +4,28 @@ import FormHelperText from "@material-ui/core/FormHelperText"; import InputLabel from "@material-ui/core/InputLabel"; import MenuItem from "@material-ui/core/MenuItem"; import Select, { SelectProps } from "@material-ui/core/Select"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import React from "react"; import { FormattedMessage } from "react-intl"; import Checkbox from "../Checkbox"; -const styles = theme => - createStyles({ - checkbox: { - marginRight: -theme.spacing(2) - }, - formControl: { - width: "100%" - }, - menuItem: { - alignItems: "center", - display: "flex", - justifyContent: "space-between", - width: "100%" - } - }); +const useStyles = makeStyles(theme => ({ + checkbox: { + marginRight: -theme.spacing(2) + }, + formControl: { + width: "100%" + }, + menuItem: { + alignItems: "center", + display: "flex", + justifyContent: "space-between", + width: "100%" + } +})); -interface MultiSelectFieldProps extends WithStyles { +interface MultiSelectFieldProps { choices: Array<{ value: string; label: string; @@ -46,11 +40,8 @@ interface MultiSelectFieldProps extends WithStyles { onChange(event: any); } -export const MultiSelectField = withStyles(styles, { - name: "MultiSelectField" -})( - ({ - classes, +export const MultiSelectField: React.FC = props => { + const { disabled, error, label, @@ -60,66 +51,67 @@ export const MultiSelectField = withStyles(styles, { name, hint, selectProps - }: MultiSelectFieldProps) => { - const choicesByKey = disabled - ? {} - : choices.reduce((prev, curr) => { - prev[curr.value] = curr.label; - return prev; - }, {}); + } = props; + const classes = useStyles(props); - return ( - { + prev[curr.value] = curr.label; + return prev; + }, {}); + + return ( + + {label && {label}} + - (choiceValues as string[]) - .map(choiceValue => choicesByKey[choiceValue]) - .join(", ") - } - value={value} - name={name} - onChange={onChange} - input={} - {...selectProps} - > - {choices.length > 0 ? ( - choices.map(choice => { - const isSelected = !!value.find( - selectedChoice => selectedChoice === choice.value - ); + {choices.length > 0 ? ( + choices.map(choice => { + const isSelected = !!value.find( + selectedChoice => selectedChoice === choice.value + ); - return ( - -
- {choice.label} - -
- - ); - }) - ) : ( - - - - )} - - {hint && {hint}} - - ); - } -); + return ( + +
+ {choice.label} + +
+ + ); + }) + ) : ( + + + + )} + + {hint && {hint}} + + ); +}; MultiSelectField.defaultProps = { value: [] }; diff --git a/src/components/NotFoundPage/NotFoundPage.tsx b/src/components/NotFoundPage/NotFoundPage.tsx index 5c795005b..3dc5d923f 100644 --- a/src/components/NotFoundPage/NotFoundPage.tsx +++ b/src/components/NotFoundPage/NotFoundPage.tsx @@ -1,10 +1,5 @@ import Button from "@material-ui/core/Button"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import React from "react"; import SVG from "react-inlinesvg"; @@ -12,54 +7,57 @@ import { FormattedMessage } from "react-intl"; import notFoundImage from "@assets/images/not-found-404.svg"; -const styles = theme => - createStyles({ - button: { - marginTop: theme.spacing(2), - padding: 20 +const useStyles = makeStyles(theme => ({ + button: { + marginTop: theme.spacing(2), + padding: 20 + }, + container: { + [theme.breakpoints.down("sm")]: { + gridTemplateColumns: "1fr", + padding: theme.spacing(3), + width: "100%" }, - container: { - [theme.breakpoints.down("sm")]: { - gridTemplateColumns: "1fr", - padding: theme.spacing(3), - width: "100%" - }, - display: "grid", - gridTemplateColumns: "1fr 487px", - margin: "0 auto", - width: 830 + display: "grid", + gridTemplateColumns: "1fr 487px", + margin: "0 auto", + width: 830 + }, + header: { + fontWeight: 600 as 600 + }, + innerContainer: { + [theme.breakpoints.down("sm")]: { + order: 1, + textAlign: "center" }, - header: { - fontWeight: 600 as 600 - }, - innerContainer: { - [theme.breakpoints.down("sm")]: { - order: 1, - textAlign: "center" - }, - display: "flex", - flexDirection: "column", - justifyContent: "center" - }, - notFoundImage: { - "& svg": { - width: "100%" - } - }, - root: { - alignItems: "center", - display: "flex", - height: "100vh", - width: "100vw" + display: "flex", + flexDirection: "column", + justifyContent: "center" + }, + notFoundImage: { + "& svg": { + width: "100%" } - }); + }, + root: { + alignItems: "center", + display: "flex", + height: "100vh", + width: "100vw" + } +})); -interface NotFoundPageProps extends WithStyles { +interface NotFoundPageProps { onBack: () => void; } -const NotFoundPage = withStyles(styles, { name: "NotFoundPage" })( - ({ classes, onBack }: NotFoundPageProps) => ( +const NotFoundPage: React.FC = props => { + const { onBack } = props; + + const classes = useStyles(props); + + return (
@@ -93,7 +91,7 @@ const NotFoundPage = withStyles(styles, { name: "NotFoundPage" })(
- ) -); + ); +}; NotFoundPage.displayName = "NotFoundPage"; export default NotFoundPage; diff --git a/src/components/PageHeader/PageHeader.tsx b/src/components/PageHeader/PageHeader.tsx index a78a5198b..a78c57737 100644 --- a/src/components/PageHeader/PageHeader.tsx +++ b/src/components/PageHeader/PageHeader.tsx @@ -1,35 +1,33 @@ -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import React from "react"; import ExtendedPageHeader from "../ExtendedPageHeader"; import Skeleton from "../Skeleton"; -const styles = theme => - createStyles({ - root: { - display: "flex" - }, - title: { - flex: 1, - fontSize: 24, - paddingBottom: theme.spacing(2) - } - }); +const useStyles = makeStyles(theme => ({ + root: { + display: "flex" + }, + title: { + flex: 1, + fontSize: 24, + paddingBottom: theme.spacing(2) + } +})); -interface PageHeaderProps extends WithStyles { +interface PageHeaderProps { children?: React.ReactNode; className?: string; title?: string; } -const PageHeader = withStyles(styles)( - ({ children, classes, className, title }: PageHeaderProps) => ( +const PageHeader: React.FC = props => { + const { children, className, title } = props; + + const classes = useStyles(props); + + return (
{children}
 - ) -); + ); +}; + PageHeader.displayName = "PageHeader"; export default PageHeader; diff --git a/src/components/PhoneField/PhoneField.tsx b/src/components/PhoneField/PhoneField.tsx index 126e8d404..53d963aad 100644 --- a/src/components/PhoneField/PhoneField.tsx +++ b/src/components/PhoneField/PhoneField.tsx @@ -1,24 +1,18 @@ -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; import React from "react"; import SingleSelectField from "@saleor/components/SingleSelectField"; -const styles = theme => - createStyles({ - root: { - display: "grid", - gridColumnGap: theme.spacing(2), - gridTemplateColumns: "5rem 1fr" - } - }); +const useStyles = makeStyles(theme => ({ + root: { + display: "grid", + gridColumnGap: theme.spacing(2), + gridTemplateColumns: "5rem 1fr" + } +})); -interface PhoneFieldProps extends WithStyles { +interface PhoneFieldProps { name: string; prefix: string; number: string; @@ -27,16 +21,19 @@ interface PhoneFieldProps extends WithStyles { onChange(event: React.ChangeEvent); } -const PhoneField = withStyles(styles, { name: "PhoneField" })( - ({ - classes, +const PhoneField: React.FC = props => { + const { name, number: phoneNumber, prefix, prefixes, label, onChange - }: PhoneFieldProps) => ( + } = props; + + const classes = useStyles(props); + + return (
- ) -); + ); +}; PhoneField.displayName = "PhoneField"; export default PhoneField; diff --git a/src/components/PriceField/PriceField.tsx b/src/components/PriceField/PriceField.tsx index e44602fa9..7fe765662 100644 --- a/src/components/PriceField/PriceField.tsx +++ b/src/components/PriceField/PriceField.tsx @@ -1,32 +1,31 @@ import { InputProps } from "@material-ui/core/Input"; import InputAdornment from "@material-ui/core/InputAdornment"; -import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; import React from "react"; -const styles = theme => - createStyles({ - currencySymbol: { - fontSize: "0.875rem" - }, - inputContainer: { - display: "grid", - gridTemplateColumns: "1fr 2rem 1fr" - }, - pullDown: { - marginTop: theme.spacing(2) - }, - separator: { - marginTop: theme.spacing(3), - textAlign: "center", - width: "100%" - }, - widgetContainer: { - marginTop: theme.spacing(2) - } - }); +const useStyles = makeStyles(theme => ({ + currencySymbol: { + fontSize: "0.875rem" + }, + inputContainer: { + display: "grid", + gridTemplateColumns: "1fr 2rem 1fr" + }, + pullDown: { + marginTop: theme.spacing(2) + }, + separator: { + marginTop: theme.spacing(3), + textAlign: "center", + width: "100%" + }, + widgetContainer: { + marginTop: theme.spacing(2) + } +})); -interface PriceFieldProps extends WithStyles { +interface PriceFieldProps { className?: string; currencySymbol?: string; disabled?: boolean; @@ -39,8 +38,8 @@ interface PriceFieldProps extends WithStyles { onChange(event: any); } -export const PriceField = withStyles(styles, { name: "PriceField" })( - ({ +export const PriceField: React.FC = props => { + const { className, disabled, error, @@ -48,11 +47,14 @@ export const PriceField = withStyles(styles, { name: "PriceField" })( hint, currencySymbol, name, - classes, onChange, value, InputProps - }: PriceFieldProps) => ( + } = props; + + const classes = useStyles(props); + + return ( - ) -); + ); +}; PriceField.defaultProps = { name: "price" }; diff --git a/src/components/RadioSwitchField/RadioSwitchField.tsx b/src/components/RadioSwitchField/RadioSwitchField.tsx index dbff28317..0c715f729 100644 --- a/src/components/RadioSwitchField/RadioSwitchField.tsx +++ b/src/components/RadioSwitchField/RadioSwitchField.tsx @@ -2,11 +2,11 @@ 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 { makeStyles } from "@material-ui/core/styles"; import classNames from "classnames"; import React from "react"; -const styles = createStyles({ +const useStyles = makeStyles({ formControl: { padding: 0, width: "100%" @@ -37,12 +37,9 @@ interface RadioSwitchFieldProps { onChange: (event: React.ChangeEvent) => void; } -export const RadioSwitchField = withStyles(styles, { - name: "RadioSwitchField" -})( - ({ +export const RadioSwitchField: React.FC = props => { + const { className, - classes, disabled, error, firstOptionLabel, @@ -50,48 +47,49 @@ export const RadioSwitchField = withStyles(styles, { name, secondOptionLabel, value - }: RadioSwitchFieldProps & WithStyles) => { - const initialValue = value ? "true" : "false"; + } = props; + const classes = useStyles(props); - const change = event => { - onChange({ - target: { - name: event.target.name, - value: event.target.value === "true" ? true : false - } - } as any); - }; + const initialValue = value ? "true" : "false"; - return ( - { + onChange({ + target: { + name: event.target.name, + value: event.target.value === "true" ? true : false + } + } as any); + }; + + return ( + + change(event)} > - } + label={firstOptionLabel} name={name} - value={initialValue} - onChange={event => change(event)} - > - } - label={firstOptionLabel} - name={name} - /> - } - label={secondOptionLabel} - name={name} - /> - - - ); - } -); + /> + } + label={secondOptionLabel} + name={name} + /> + + + ); +}; RadioSwitchField.displayName = "RadioSwitchField"; export default RadioSwitchField; diff --git a/src/components/RichTextEditor/ImageEntity.tsx b/src/components/RichTextEditor/ImageEntity.tsx index 7b3dd5b10..4f6787ad9 100644 --- a/src/components/RichTextEditor/ImageEntity.tsx +++ b/src/components/RichTextEditor/ImageEntity.tsx @@ -4,12 +4,7 @@ import Grow from "@material-ui/core/Grow"; import IconButton from "@material-ui/core/IconButton"; import Paper from "@material-ui/core/Paper"; import Popper from "@material-ui/core/Popper"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import DeleteIcon from "@material-ui/icons/Delete"; import { ContentState } from "draft-js"; import React from "react"; @@ -23,92 +18,84 @@ interface ImageEntityProps { onRemove: (entityKey: string) => void; } -const styles = theme => - createStyles({ - anchor: { - display: "inline-block" - }, - container: { - alignItems: "center", - display: "flex" - }, - image: { maxWidth: "100%" }, - inline: { - display: "inline-block" - }, - root: { - alignItems: "center", - display: "flex", - minHeight: 72, - padding: theme.spacing(1.5) - } - }); - -const ImageEntity = withStyles(styles, { - name: "ImageEntity" -})( - ({ - classes, - contentState, - entityKey, - onEdit, - onRemove - }: ImageEntityProps & WithStyles) => { - const [isOpened, setOpenStatus] = React.useState(false); - const anchor = React.useRef(); - - const disable = () => setOpenStatus(false); - const toggle = () => setOpenStatus(!isOpened); - - return ( - <> -
- - {({ TransitionProps, placement }) => ( - - - -
- - onRemove(entityKey)}> - - -
- - - - )} - -
- - - ); +const useStyles = makeStyles(theme => ({ + anchor: { + display: "inline-block" + }, + container: { + alignItems: "center", + display: "flex" + }, + image: { maxWidth: "100%" }, + inline: { + display: "inline-block" + }, + root: { + alignItems: "center", + display: "flex", + minHeight: 72, + padding: theme.spacing(1.5) } -); +})); + +const ImageEntity: React.FC = props => { + const { contentState, entityKey, onEdit, onRemove } = props; + const classes = useStyles(props); + + const [isOpened, setOpenStatus] = React.useState(false); + const anchor = React.useRef(); + + const disable = () => setOpenStatus(false); + const toggle = () => setOpenStatus(!isOpened); + + return ( + <> +
+ + {({ TransitionProps, placement }) => ( + + + +
+ + onRemove(entityKey)}> + + +
+ + + + )} + +
+ + + ); +}; export default ImageEntity; diff --git a/src/components/RichTextEditor/LinkEntity.tsx b/src/components/RichTextEditor/LinkEntity.tsx index 890cd422f..29c38a808 100644 --- a/src/components/RichTextEditor/LinkEntity.tsx +++ b/src/components/RichTextEditor/LinkEntity.tsx @@ -4,12 +4,7 @@ import Grow from "@material-ui/core/Grow"; import IconButton from "@material-ui/core/IconButton"; import Paper from "@material-ui/core/Paper"; import Popper from "@material-ui/core/Popper"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import DeleteIcon from "@material-ui/icons/Delete"; import { ContentState } from "draft-js"; @@ -27,106 +22,97 @@ interface LinkEntityProps { onRemove: (entityKey: string) => void; } -const styles = theme => - createStyles({ - anchor: { - display: "inline-block" - }, - container: { - alignItems: "center", - display: "flex" - }, - inline: { - display: "inline-block" - }, - popover: { - zIndex: 1 - }, - root: { - alignItems: "center", - display: "flex", - minHeight: 72, - padding: theme.spacing(1.5, 1.5, 1.5, 3) - }, - separator: { - backgroundColor: theme.palette.grey[300], - display: "inline-block", - height: 30, - marginLeft: theme.spacing(2), - marginRight: theme.spacing(), - width: 1 - } - }); - -const LinkEntity = withStyles(styles, { - name: "LinkEntity" -})( - ({ - classes, - children, - contentState, - entityKey, - onEdit, - onRemove - }: LinkEntityProps & WithStyles) => { - const [isOpened, setOpenStatus] = React.useState(false); - const anchor = React.useRef(); - - const disable = () => setOpenStatus(false); - const toggle = () => setOpenStatus(!isOpened); - - return ( - <> -
- - {({ TransitionProps, placement }) => ( - - - -
- - {contentState.getEntity(entityKey).getData().url} - - - - onRemove(entityKey)}> - - -
- - - - )} - -
- - {children} - - - ); +const useStyles = makeStyles(theme => ({ + anchor: { + display: "inline-block" + }, + container: { + alignItems: "center", + display: "flex" + }, + inline: { + display: "inline-block" + }, + popover: { + zIndex: 1 + }, + root: { + alignItems: "center", + display: "flex", + minHeight: 72, + padding: theme.spacing(1.5, 1.5, 1.5, 3) + }, + separator: { + backgroundColor: theme.palette.grey[300], + display: "inline-block", + height: 30, + marginLeft: theme.spacing(2), + marginRight: theme.spacing(), + width: 1 } -); +})); + +const LinkEntity: React.FC = props => { + const { children, contentState, entityKey, onEdit, onRemove } = props; + const classes = useStyles(props); + + const [isOpened, setOpenStatus] = React.useState(false); + const anchor = React.useRef(); + + const disable = () => setOpenStatus(false); + const toggle = () => setOpenStatus(!isOpened); + + return ( + <> +
+ + {({ TransitionProps, placement }) => ( + + + +
+ + {contentState.getEntity(entityKey).getData().url} + + + + onRemove(entityKey)}> + + +
+ + + + )} + +
+ + {children} + + + ); +}; export default LinkEntity; diff --git a/src/components/RichTextEditor/RichTextEditor.tsx b/src/components/RichTextEditor/RichTextEditor.tsx index 63c18f01e..08ed8dd8b 100644 --- a/src/components/RichTextEditor/RichTextEditor.tsx +++ b/src/components/RichTextEditor/RichTextEditor.tsx @@ -1,9 +1,4 @@ -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import { fade } from "@material-ui/core/styles/colorManipulator"; import Typography from "@material-ui/core/Typography"; import classNames from "classnames"; @@ -45,159 +40,158 @@ export interface RichTextEditorProps { onChange: (event: React.ChangeEvent) => void; } -const styles = theme => - createStyles({ - error: { - color: theme.palette.error.main - }, - helperText: { - marginTop: theme.spacing(0.75) - }, - input: { - position: "relative" - }, - label: { - fontSize: theme.typography.caption.fontSize, - left: 12, - position: "absolute", - top: 9 - }, - linkIcon: { - marginTop: 2 - }, - root: { - "& .DraftEditor": { - "&-editorContainer": { - "& .public-DraftEditor-content": { - lineHeight: 1.62 - }, - "& a": { - color: theme.palette.primary.light - }, - "&:after": { - background: theme.palette.getContrastText( - theme.palette.background.default - ), - bottom: -11, - content: "''", - display: "block", - height: 2, - left: -12, - position: "absolute", - transform: "scaleX(0) scaleY(0)", - width: "calc(100% + 24px)" - }, - position: "relative" +const useStyles = makeStyles(theme => ({ + error: { + color: theme.palette.error.main + }, + helperText: { + marginTop: theme.spacing(0.75) + }, + input: { + position: "relative" + }, + label: { + fontSize: theme.typography.caption.fontSize, + left: 12, + position: "absolute", + top: 9 + }, + linkIcon: { + marginTop: 2 + }, + root: { + "& .DraftEditor": { + "&-editorContainer": { + "& .public-DraftEditor-content": { + lineHeight: 1.62 }, - "&-root": { - ...theme.typography.body1 - } + "& a": { + color: theme.palette.primary.light + }, + "&:after": { + background: theme.palette.getContrastText( + theme.palette.background.default + ), + bottom: -11, + content: "''", + display: "block", + height: 2, + left: -12, + position: "absolute", + transform: "scaleX(0) scaleY(0)", + width: "calc(100% + 24px)" + }, + position: "relative" }, - "& .Draftail": { - "&-Editor": { - "&--focus": { - boxShadow: `inset 0px 0px 0px 2px ${theme.palette.primary.main}` - }, - "&:hover": { - borderColor: theme.palette.primary.main - }, - border: `1px ${theme.overrides.MuiOutlinedInput.root.borderColor} solid`, - borderRadius: 4, - padding: "27px 12px 10px", - position: "relative", - transition: theme.transitions.duration.shortest + "ms" + "&-root": { + ...theme.typography.body1 + } + }, + "& .Draftail": { + "&-Editor": { + "&--focus": { + boxShadow: `inset 0px 0px 0px 2px ${theme.palette.primary.main}` }, - "&-Toolbar": { - "&Button": { - "& svg": { - padding: 2 - }, - "&--active": { - "&:hover": { - background: theme.palette.primary.main - }, - "&:not(:hover)": { - borderRightColor: theme.palette.primary.main - }, + "&:hover": { + borderColor: theme.palette.primary.main + }, + border: `1px ${theme.palette.divider} solid`, + borderRadius: 4, + padding: "27px 12px 10px", + position: "relative", + transition: theme.transitions.duration.shortest + "ms" + }, + "&-Toolbar": { + "&Button": { + "& svg": { + padding: 2 + }, + "&--active": { + "&:hover": { background: theme.palette.primary.main }, - "&:focus": { - "&:active": { - "&:after": { - background: fade(theme.palette.primary.main, 0.3), - borderRadius: "100%", - content: "''", - display: "block", - height: "100%", - width: "100%" - } - } + "&:not(:hover)": { + borderRightColor: theme.palette.primary.main }, - "&:hover": { - background: fade(theme.palette.primary.main, 0.3) - }, - alignItems: "center", - background: "none", - border: "none", - borderRight: `1px ${theme.overrides.MuiCard.root.borderColor} solid`, - color: theme.typography.body1.color, - cursor: "pointer", - display: "inline-flex", - height: 36, - justifyContent: "center", - padding: theme.spacing(1) + 2, - transition: theme.transitions.duration.short + "ms", - width: 36 + background: theme.palette.primary.main }, - "&Group": { - "&:last-of-type": { - "& .Draftail-ToolbarButton": { - "&:last-of-type": { - border: "none" - } + "&:focus": { + "&:active": { + "&:after": { + background: fade(theme.palette.primary.main, 0.3), + borderRadius: "100%", + content: "''", + display: "block", + height: "100%", + width: "100%" } - }, - display: "flex" + } }, - background: theme.palette.background.default, - border: `1px ${theme.overrides.MuiCard.root.borderColor} solid`, + "&:hover": { + background: fade(theme.palette.primary.main, 0.3) + }, + alignItems: "center", + background: "none", + border: "none", + borderRight: `1px ${theme.palette.divider} solid`, + color: theme.typography.body1.color, + cursor: "pointer", display: "inline-flex", - flexWrap: "wrap", - marginBottom: theme.spacing(), - marginTop: 10, - [theme.breakpoints.down(460)]: { - width: "min-content" - } + height: 36, + justifyContent: "center", + padding: theme.spacing(1) + 2, + transition: theme.transitions.duration.short + "ms", + width: 36 }, - "&-block": { - "&--blockquote": { - borderLeft: `2px solid ${theme.overrides.MuiCard.root.borderColor}`, - margin: 0, - padding: theme.spacing(1, 2) - } + "&Group": { + "&:last-of-type": { + "& .Draftail-ToolbarButton": { + "&:last-of-type": { + border: "none" + } + } + }, + display: "flex" + }, + background: theme.palette.background.default, + border: `1px ${theme.palette.divider} solid`, + display: "inline-flex", + flexWrap: "wrap", + marginBottom: theme.spacing(), + marginTop: 10, + [theme.breakpoints.down(460)]: { + width: "min-content" } }, - "&$error": { - "& .Draftail": { - "&-Editor": { - borderColor: theme.palette.error.main - } + "&-block": { + "&--blockquote": { + borderLeft: `2px solid ${theme.palette.divider}`, + margin: 0, + padding: theme.spacing(1, 2) } } }, - scroll: { - "& .DraftEditor": { - "&-editorContainer": { - "& .public-DraftEditor-content": { - lineHeight: 1.62 - } + "&$error": { + "& .Draftail": { + "&-Editor": { + borderColor: theme.palette.error.main } } - }, - smallIcon: { - marginLeft: 10 } - }); + }, + scroll: { + "& .DraftEditor": { + "&-editorContainer": { + "& .public-DraftEditor-content": { + lineHeight: 1.62 + } + } + } + }, + smallIcon: { + marginLeft: 10 + } +})); function handleSave( value: any, @@ -215,17 +209,12 @@ function handleSave( } } -const RichTextEditor = withStyles(styles, { name: "RichTextEditor" })( - ({ - classes, - error, - helperText, - initial, - label, - name, - scroll, - onChange - }: RichTextEditorProps & WithStyles) => ( +const RichTextEditor: React.FC = props => { + const { error, helperText, initial, label, name, scroll, onChange } = props; + + const classes = useStyles(props); + + return (
)}
- ) -); + ); +}; + RichTextEditor.displayName = "RichTextEditor"; RichTextEditor.defaultProps = { scroll: true diff --git a/src/components/RichTextEditor/index.ts b/src/components/RichTextEditor/index.ts index 2a07ed090..79b8bbcb3 100644 --- a/src/components/RichTextEditor/index.ts +++ b/src/components/RichTextEditor/index.ts @@ -1,2 +1,2 @@ -export { default } from './RichTextEditor'; -export * from './RichTextEditor'; \ No newline at end of file +export { default } from "./RichTextEditor"; +export * from "./RichTextEditor"; diff --git a/src/components/SaveButtonBar/SaveButtonBar.tsx b/src/components/SaveButtonBar/SaveButtonBar.tsx index 17dfb27b8..079f675fc 100644 --- a/src/components/SaveButtonBar/SaveButtonBar.tsx +++ b/src/components/SaveButtonBar/SaveButtonBar.tsx @@ -1,11 +1,6 @@ import Button from "@material-ui/core/Button"; import Portal from "@material-ui/core/Portal"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import classNames from "classnames"; import React from "react"; import { useIntl } from "react-intl"; @@ -19,48 +14,47 @@ import ConfirmButton, { } from "../ConfirmButton/ConfirmButton"; import Container from "../Container"; -const styles = theme => - createStyles({ - button: { - marginRight: theme.spacing(1) - }, - cancelButton: { - marginRight: theme.spacing(2) - }, - container: { - display: "flex", - paddingBottom: theme.spacing(2), - paddingTop: theme.spacing(2), - [theme.breakpoints.down("sm")]: { - marginTop: theme.spacing(1) - } - }, - deleteButton: { - "&:hover": { - backgroundColor: theme.palette.error.dark - }, - backgroundColor: theme.palette.error.main, - color: theme.palette.error.contrastText - }, - root: { - background: theme.palette.background.default, - borderTop: "1px solid transparent", - boxShadow: `0 -5px 5px 0 ${theme.overrides.MuiCard.root.borderColor}`, - height: "100%", - transition: `box-shadow ${theme.transitions.duration.shortest}ms` - }, - spacer: { - flex: "1" - }, - stop: { - "&$root": { - borderTopColor: theme.overrides.MuiCard.root.borderColor, - boxShadow: `0 0 0 0 ${theme.overrides.MuiCard.root.borderColor}` - } +const useStyles = makeStyles(theme => ({ + button: { + marginRight: theme.spacing(1) + }, + cancelButton: { + marginRight: theme.spacing(2) + }, + container: { + display: "flex", + paddingBottom: theme.spacing(2), + paddingTop: theme.spacing(2), + [theme.breakpoints.down("sm")]: { + marginTop: theme.spacing(1) } - }); + }, + deleteButton: { + "&:hover": { + backgroundColor: theme.palette.error.dark + }, + backgroundColor: theme.palette.error.main, + color: theme.palette.error.contrastText + }, + root: { + background: theme.palette.background.default, + borderTop: "1px solid transparent", + boxShadow: `0 -5px 5px 0 ${theme.palette.divider}`, + height: "100%", + transition: `box-shadow ${theme.transitions.duration.shortest}ms` + }, + spacer: { + flex: "1" + }, + stop: { + "&$root": { + borderTopColor: theme.palette.divider, + boxShadow: `0 0 0 0 ${theme.palette.divider}` + } + } +})); -interface SaveButtonBarProps extends WithStyles { +interface SaveButtonBarProps { disabled: boolean; state: ConfirmButtonTransitionState; labels?: { @@ -73,77 +67,77 @@ interface SaveButtonBarProps extends WithStyles { onSave(event: any); } -export const SaveButtonBar = withStyles(styles, { name: "SaveButtonBar" })( - ({ - classes, +export const SaveButtonBar: React.FC = props => { + const { disabled, labels, state, onCancel, onDelete, onSave, - ...props - }: SaveButtonBarProps) => { - const intl = useIntl(); - const scrollPosition = useWindowScroll(); - const scrolledToBottom = - scrollPosition.y + window.innerHeight >= document.body.scrollHeight; + ...rest + } = props; + const classes = useStyles(props); - return ( - - {anchor => - anchor ? ( - -
- - {!!onDelete && ( - - )} -
+ const intl = useIntl(); + const scrollPosition = useWindowScroll(); + const scrolledToBottom = + scrollPosition.y + window.innerHeight >= document.body.scrollHeight; + + return ( + + {anchor => + anchor ? ( + +
+ + {!!onDelete && ( - - {maybe( - () => labels.save, - intl.formatMessage(buttonMessages.save) - )} - - -
- - ) : null - } - - ); - } -); + )} +
+ + + {maybe( + () => labels.save, + intl.formatMessage(buttonMessages.save) + )} + + +
+ + ) : null + } + + ); +}; SaveButtonBar.displayName = "SaveButtonBar"; export default SaveButtonBar; diff --git a/src/components/SaveFilterTabDialog/index.ts b/src/components/SaveFilterTabDialog/index.ts index 8b281bdd2..3346fa1e7 100644 --- a/src/components/SaveFilterTabDialog/index.ts +++ b/src/components/SaveFilterTabDialog/index.ts @@ -1,2 +1,2 @@ -export { default } from './SaveFilterTabDialog'; -export * from './SaveFilterTabDialog'; \ No newline at end of file +export { default } from "./SaveFilterTabDialog"; +export * from "./SaveFilterTabDialog"; diff --git a/src/components/SeoForm/SeoForm.tsx b/src/components/SeoForm/SeoForm.tsx index 26f9c489a..0363c8933 100644 --- a/src/components/SeoForm/SeoForm.tsx +++ b/src/components/SeoForm/SeoForm.tsx @@ -1,12 +1,7 @@ import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; import Typography from "@material-ui/core/Typography"; import classNames from "classnames"; @@ -16,55 +11,54 @@ import { FormattedMessage, useIntl } from "react-intl"; import CardTitle from "../CardTitle"; import FormSpacer from "../FormSpacer"; -const styles = theme => - createStyles({ - addressBar: { - color: "#006621", - fontSize: "13px", - lineHeight: "16px", - marginBottom: "2px", - overflow: "hidden", - textOverflow: "ellipsis", - whiteSpace: "nowrap" +const useStyles = makeStyles(theme => ({ + addressBar: { + color: "#006621", + fontSize: "13px", + lineHeight: "16px", + marginBottom: "2px", + overflow: "hidden", + textOverflow: "ellipsis", + whiteSpace: "nowrap" + }, + container: { + width: "100%" + }, + descriptionBar: { + color: "#545454", + fontSize: "13px", + lineHeight: "18px", + overflowWrap: "break-word" + }, + helperText: { + marginBottom: theme.spacing(3) + }, + label: { + flex: 1 + }, + labelContainer: { + "& span": { + paddingRight: 30 }, - container: { - width: "100%" - }, - descriptionBar: { - color: "#545454", - fontSize: "13px", - lineHeight: "18px", - overflowWrap: "break-word" - }, - helperText: { - marginBottom: theme.spacing(3) - }, - label: { - flex: 1 - }, - labelContainer: { - "& span": { - paddingRight: 30 - }, - display: "flex" - }, - preview: { - minHeight: theme.spacing(10) - }, - title: { - padding: 0 - }, - titleBar: { - color: "#1a0dab", - fontSize: "18px", - lineHeight: "21px", - overflowWrap: "break-word", - textDecoration: "none", - wordWrap: "break-word" - } - }); + display: "flex" + }, + preview: { + minHeight: theme.spacing(10) + }, + title: { + padding: 0 + }, + titleBar: { + color: "#1a0dab", + fontSize: "18px", + lineHeight: "21px", + overflowWrap: "break-word", + textDecoration: "none", + wordWrap: "break-word" + } +})); -interface SeoFormProps extends WithStyles { +interface SeoFormProps { description?: string; descriptionPlaceholder: string; disabled?: boolean; @@ -76,9 +70,8 @@ interface SeoFormProps extends WithStyles { onClick?(); } -const SeoForm = withStyles(styles, { name: "SeoForm" })( - ({ - classes, +const SeoForm: React.FC = props => { + const { description, descriptionPlaceholder, disabled, @@ -87,107 +80,108 @@ const SeoForm = withStyles(styles, { name: "SeoForm" })( title, titlePlaceholder, onChange - }: SeoFormProps) => { - const intl = useIntl(); - const [expanded, setExpansionStatus] = React.useState(false); - const toggleExpansion = () => setExpansionStatus(!expanded); + } = props; + const classes = useStyles(props); - return ( - - - - - } - /> - - {helperText && ( - - {helperText} - - )} - {expanded && ( -
- -
- -
- {title.length > 0 && ( - - - - )} + const intl = useIntl(); + const [expanded, setExpansionStatus] = React.useState(false); + const toggleExpansion = () => setExpansionStatus(!expanded); + + return ( + + + + + } + /> + + {helperText && ( + + {helperText} + + )} + {expanded && ( +
+ +
+
- } - helperText={intl.formatMessage({ - defaultMessage: - "If empty, the preview shows what will be autogenerated." - })} - value={title.slice(0, 69)} - disabled={loading || disabled} - placeholder={titlePlaceholder} - onChange={onChange} - fullWidth - /> - - -
- -
- {description.length > 0 && ( - - - - )} + {title.length > 0 && ( + + + + )} +
+ } + helperText={intl.formatMessage({ + defaultMessage: + "If empty, the preview shows what will be autogenerated." + })} + value={title.slice(0, 69)} + disabled={loading || disabled} + placeholder={titlePlaceholder} + onChange={onChange} + fullWidth + /> + + +
+
- } - helperText={intl.formatMessage({ - defaultMessage: - "If empty, the preview shows what will be autogenerated." - })} - value={description ? description.slice(0, 299) : undefined} - onChange={onChange} - disabled={loading || disabled} - fullWidth - multiline - placeholder={descriptionPlaceholder} - rows={10} - /> -
- )} - - - ); - } -); + {description.length > 0 && ( + + + + )} +
+ } + helperText={intl.formatMessage({ + defaultMessage: + "If empty, the preview shows what will be autogenerated." + })} + value={description ? description.slice(0, 299) : undefined} + onChange={onChange} + disabled={loading || disabled} + fullWidth + multiline + placeholder={descriptionPlaceholder} + rows={10} + /> +
+ )} + + + ); +}; SeoForm.displayName = "SeoForm"; export default SeoForm; diff --git a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx index d9ee6d375..374522e1f 100644 --- a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx +++ b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx @@ -1,5 +1,5 @@ import { InputProps } from "@material-ui/core/Input"; -import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; import Downshift from "downshift"; import { filter } from "fuzzaldrin"; @@ -13,7 +13,7 @@ import { FetchMoreProps } from "@saleor/types"; import ArrowDropdownIcon from "../../icons/ArrowDropdown"; import Debounce, { DebounceProps } from "../Debounce"; -const styles = createStyles({ +const useStyles = makeStyles({ container: { flexGrow: 1, position: "relative" @@ -42,12 +42,12 @@ const DebounceAutocomplete: React.ComponentType< DebounceProps > = Debounce; -const SingleAutocompleteSelectFieldComponent = withStyles(styles, { - name: "SingleAutocompleteSelectField" -})( - ({ +const SingleAutocompleteSelectFieldComponent: React.FC< + SingleAutocompleteSelectFieldProps +> = props => { + const { choices, - classes, + allowCustomValues, disabled, displayValue, @@ -64,110 +64,111 @@ const SingleAutocompleteSelectFieldComponent = withStyles(styles, { fetchChoices, onChange, onFetchMore, - ...props - }: SingleAutocompleteSelectFieldProps & WithStyles) => { - const [prevDisplayValue] = useStateFromProps(displayValue); + ...rest + } = props; + const classes = useStyles(props); - const handleChange = item => - onChange({ - target: { - name, - value: item - } - } as any); + const [prevDisplayValue] = useStateFromProps(displayValue); - return ( - - {debounceFn => ( - displayValue} - onInputValueChange={value => debounceFn(value)} - onSelect={handleChange} - selectedItem={value} - > - {({ - getInputProps, - getItemProps, - isOpen, - inputValue, - selectedItem, - toggleMenu, - closeMenu, - highlightedIndex, - reset - }) => { - const isCustomValueSelected = - choices && selectedItem - ? choices.filter(c => c.value === selectedItem).length === 0 - : false; - const hasInputValueChanged = prevDisplayValue !== displayValue; + const handleChange = item => + onChange({ + target: { + name, + value: item + } + } as any); - if (hasInputValueChanged) { - reset({ inputValue: displayValue }); - } + return ( + + {debounceFn => ( + displayValue} + onInputValueChange={value => debounceFn(value)} + onSelect={handleChange} + selectedItem={value} + > + {({ + getInputProps, + getItemProps, + isOpen, + inputValue, + selectedItem, + toggleMenu, + closeMenu, + highlightedIndex, + reset + }) => { + const isCustomValueSelected = + choices && selectedItem + ? choices.filter(c => c.value === selectedItem).length === 0 + : false; + const hasInputValueChanged = prevDisplayValue !== displayValue; - const displayCustomValue = - inputValue && - inputValue.length > 0 && - allowCustomValues && - !choices.find( - choice => - choice.label.toLowerCase() === inputValue.toLowerCase() - ); + if (hasInputValueChanged) { + reset({ inputValue: displayValue }); + } - return ( -
- - -
- ), - error, - id: undefined, - onBlur: closeMenu, - onClick: toggleMenu - }} - error={error} - disabled={disabled} - helperText={helperText} - label={label} - fullWidth={true} - /> - {isOpen && (!!inputValue || !!choices.length) && ( - - )} -
+ const displayCustomValue = + inputValue && + inputValue.length > 0 && + allowCustomValues && + !choices.find( + choice => + choice.label.toLowerCase() === inputValue.toLowerCase() ); - }} - - )} - - ); - } -); + + return ( +
+ + +
+ ), + error, + id: undefined, + onBlur: closeMenu, + onClick: toggleMenu + }} + error={error} + disabled={disabled} + helperText={helperText} + label={label} + fullWidth={true} + /> + {isOpen && (!!inputValue || !!choices.length) && ( + + )} +
+ ); + }} + + )} + + ); +}; const SingleAutocompleteSelectField: React.FC< SingleAutocompleteSelectFieldProps -> = ({ choices, fetchChoices, ...props }) => { +> = ({ choices, fetchChoices, ...rest }) => { const [query, setQuery] = React.useState(""); if (fetchChoices) { return ( @@ -175,7 +176,7 @@ const SingleAutocompleteSelectField: React.FC< {debounceFn => ( )} @@ -189,7 +190,7 @@ const SingleAutocompleteSelectField: React.FC< choices={filter(choices, query, { key: "label" })} - {...props} + {...rest} /> ); }; diff --git a/src/components/SingleSelectField/SingleSelectField.tsx b/src/components/SingleSelectField/SingleSelectField.tsx index bf47fd2d9..c3b275cfc 100644 --- a/src/components/SingleSelectField/SingleSelectField.tsx +++ b/src/components/SingleSelectField/SingleSelectField.tsx @@ -4,12 +4,12 @@ import InputLabel from "@material-ui/core/InputLabel"; import MenuItem from "@material-ui/core/MenuItem"; import OutlinedInput from "@material-ui/core/OutlinedInput"; import Select, { SelectProps } from "@material-ui/core/Select"; -import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import classNames from "classnames"; import React from "react"; import { FormattedMessage } from "react-intl"; -const styles = createStyles({ +const useStyles = makeStyles({ formControl: { "& label": { top: "-3px" @@ -18,7 +18,7 @@ const styles = createStyles({ } }); -interface SingleSelectFieldProps extends WithStyles { +interface SingleSelectFieldProps { choices: Array<{ value: string; label: string | React.ReactNode; @@ -35,12 +35,10 @@ interface SingleSelectFieldProps extends WithStyles { onChange(event: any); } -export const SingleSelectField = withStyles(styles, { - name: "SingleSelectField" -})( - ({ +export const SingleSelectField: React.FC = props => { + const { className, - classes, + disabled, error, label, @@ -51,49 +49,50 @@ export const SingleSelectField = withStyles(styles, { hint, selectProps, placeholder - }: SingleSelectFieldProps) => { - const choicesByKey: { [key: string]: string } = - choices === undefined - ? {} - : choices.reduce((prev, curr) => { - prev[curr.value] = curr.label; - return prev; - }, {}); + } = props; + const classes = useStyles(props); - return ( - { + prev[curr.value] = curr.label; + return prev; + }, {}); + + return ( + + {label} + - choiceValue ? choicesByKey[choiceValue.toString()] : placeholder - } - value={value || ""} - onChange={onChange} - input={} - {...selectProps} - > - {choices.length > 0 ? ( - choices.map(choice => ( - - {choice.label} - - )) - ) : ( - - + {choices.length > 0 ? ( + choices.map(choice => ( + + {choice.label} - )} - - {hint && {hint}} - - ); - } -); + )) + ) : ( + + + + )} + + {hint && {hint}} + + ); +}; SingleSelectField.displayName = "SingleSelectField"; export default SingleSelectField; diff --git a/src/components/Skeleton.tsx b/src/components/Skeleton.tsx index c27078806..bb5ded45f 100644 --- a/src/components/Skeleton.tsx +++ b/src/components/Skeleton.tsx @@ -1,45 +1,43 @@ -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import classNames from "classnames"; import React from "react"; -const styles = theme => - createStyles({ - "@keyframes skeleton-animation": { - "0%": { - opacity: 0.6 - }, - "100%": { - opacity: 1 - } +const useStyles = makeStyles(theme => ({ + "@keyframes skeleton-animation": { + "0%": { + opacity: 0.6 }, - primary: { - "&$skeleton": { - background: theme.palette.primary.main - } - }, - skeleton: { - animation: "skeleton-animation .75s linear infinite forwards alternate", - background: theme.palette.background.default, - borderRadius: 4, - display: "block", - height: "0.8em", - margin: "0.2em 0" + "100%": { + opacity: 1 } - }); + }, + primary: { + "&$skeleton": { + background: theme.palette.primary.main + } + }, + skeleton: { + animation: "skeleton-animation .75s linear infinite forwards alternate", + background: theme.palette.background.default, + borderRadius: 4, + display: "block", + height: "0.8em", + margin: "0.2em 0" + } +})); -interface SkeletonProps extends WithStyles { +interface SkeletonProps { className?: string; primary?: boolean; style?: React.CSSProperties; } -const Skeleton = withStyles(styles, { name: "Skeleton" })( - ({ className, classes, primary, style }: SkeletonProps) => ( +const Skeleton: React.FC = props => { + const { className, primary, style } = props; + + const classes = useStyles(props); + + return ( ‌ - ) -); + ); +}; Skeleton.displayName = "Skeleton"; export default Skeleton; diff --git a/src/components/SortableTable/SortableTableBody.tsx b/src/components/SortableTable/SortableTableBody.tsx index 047492fd3..0902aca99 100644 --- a/src/components/SortableTable/SortableTableBody.tsx +++ b/src/components/SortableTable/SortableTableBody.tsx @@ -20,13 +20,14 @@ const useStyles = makeStyles(theme => ({ }, background: theme.palette.background.paper, fontFamily: theme.typography.fontFamily, - fontSize: theme.overrides.MuiTableCell.root.fontSize, + // FIXME: you damn know what + // fontSize: theme.overrides.MuiTableCell.root.fontSize, opacity: 0.5 } })); const SortableTableBody: React.FC< - TableBodyProps & SortableTableBodyProps + Omit > = props => { const classes = useStyles({}); diff --git a/src/components/StatusLabel/StatusLabel.tsx b/src/components/StatusLabel/StatusLabel.tsx index 3fc6c8103..d1ad3d4e9 100644 --- a/src/components/StatusLabel/StatusLabel.tsx +++ b/src/components/StatusLabel/StatusLabel.tsx @@ -1,15 +1,10 @@ import yellow from "@material-ui/core/colors/yellow"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import Typography, { TypographyProps } from "@material-ui/core/Typography"; import classNames from "classnames"; import React from "react"; -const styles = theme => { +const useStyles = makeStyles(theme => { const dot = { borderRadius: "100%", content: "''", @@ -20,7 +15,8 @@ const styles = theme => { top: "calc(50% - 5px)", width: 8 }; - return createStyles({ + + return { errorDot: { "&:before": { backgroundColor: theme.palette.error.main, ...dot } }, @@ -38,24 +34,22 @@ const styles = theme => { successDot: { "&:before": { backgroundColor: theme.palette.primary.main, ...dot } } - }); -}; + }; +}); -interface StatusLabelProps extends WithStyles { +interface StatusLabelProps { className?: string; label: string | React.ReactNode; status: "success" | "neutral" | "error" | string; typographyProps?: TypographyProps; } -const StatusLabel = withStyles(styles, { name: "StatusLabel" })( - ({ - classes, - className, - label, - status, - typographyProps - }: StatusLabelProps) => ( +const StatusLabel: React.FC = props => { + const { className, label, status, typographyProps } = props; + + const classes = useStyles(props); + + return (
- ) -); + ); +}; StatusLabel.displayName = "StatusLabel"; export default StatusLabel; diff --git a/src/components/Tab/Tab.tsx b/src/components/Tab/Tab.tsx index c1b64b5cb..4b8d0e94a 100644 --- a/src/components/Tab/Tab.tsx +++ b/src/components/Tab/Tab.tsx @@ -1,16 +1,11 @@ -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import { fade } from "@material-ui/core/styles/colorManipulator"; import Typography from "@material-ui/core/Typography"; import classNames from "classnames"; import React from "react"; -const styles = theme => - createStyles({ +const useStyles = makeStyles( + theme => ({ active: { color: theme.typography.caption.color }, @@ -35,17 +30,23 @@ const styles = theme => padding: theme.spacing(1), transition: theme.transitions.duration.short + "ms" } - }); + }), + { name: "Tab" } +); -interface TabProps extends WithStyles { +interface TabProps { children?: React.ReactNode; isActive: boolean; changeTab: (index: T) => void; } export function Tab(value: T) { - return withStyles(styles, { name: "Tab" })( - ({ classes, children, isActive, changeTab }: TabProps) => ( + const Component: React.FC> = props => { + const { children, isActive, changeTab } = props; + + const classes = useStyles(props); + + return ( (value: T) { > {children} - ) - ); + ); + }; + + return Component; } export default Tab; diff --git a/src/components/Tab/TabContainer.tsx b/src/components/Tab/TabContainer.tsx index 53cd063d5..74515878d 100644 --- a/src/components/Tab/TabContainer.tsx +++ b/src/components/Tab/TabContainer.tsx @@ -1,27 +1,23 @@ -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import React from "react"; export interface TabContainerProps { children: React.ReactNode | React.ReactNodeArray; } -const styles = theme => - createStyles({ - root: { - borderBottom: `1px solid ${theme.overrides.MuiCard.root.borderColor}` - } - }); +const useStyles = makeStyles(theme => ({ + root: { + borderBottom: `1px solid ${theme.palette.divider}` + } +})); -const TabContainer = withStyles(styles, { - name: "TabContainer" -})(({ classes, children }: TabContainerProps & WithStyles) => ( -
{children}
-)); +const TabContainer: React.FC = props => { + const { children } = props; + + const classes = useStyles(props); + + return
{children}
; +}; TabContainer.displayName = "TabContainer"; export default TabContainer; diff --git a/src/components/Tab/Tabs.tsx b/src/components/Tab/Tabs.tsx index 429553019..5c4b90202 100644 --- a/src/components/Tab/Tabs.tsx +++ b/src/components/Tab/Tabs.tsx @@ -1,12 +1,10 @@ import React from "react"; export interface TabsProps { - children: ( - props: { - changeTab: (index: number) => void; - currentTab: number; - } - ) => React.ReactNode; + children: (props: { + changeTab: (index: number) => void; + currentTab: number; + }) => React.ReactNode; } interface TabsState { diff --git a/src/components/TableCellAvatar/TableCellAvatar.tsx b/src/components/TableCellAvatar/TableCellAvatar.tsx index 10c8cabbc..4bcd0e9bd 100644 --- a/src/components/TableCellAvatar/TableCellAvatar.tsx +++ b/src/components/TableCellAvatar/TableCellAvatar.tsx @@ -1,10 +1,5 @@ import Avatar from "@material-ui/core/Avatar"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import TableCell from "@material-ui/core/TableCell"; import Cached from "@material-ui/icons/Cached"; import classNames from "classnames"; @@ -14,48 +9,44 @@ import Image from "../../icons/Image"; export const AVATAR_MARGIN = 56; -const styles = theme => - createStyles({ - avatar: { - background: "none", - border: `1px solid ${theme.overrides.MuiCard.root.borderColor}`, - borderRadius: 2, - color: "#bdbdbd", - display: "inline-flex", - padding: theme.spacing(.5) - }, - children: { - alignSelf: "center", - marginLeft: theme.spacing(2), - width: "100%" - }, - content: { - alignItems: "center", - display: "flex" - }, - root: { - paddingRight: theme.spacing(3), - width: "1%" - } - }); +const useStyles = makeStyles(theme => ({ + avatar: { + background: "none", + border: `1px solid ${theme.palette}`, + borderRadius: 2, + color: "#bdbdbd", + display: "inline-flex", + padding: theme.spacing(0.5) + }, + children: { + alignSelf: "center", + marginLeft: theme.spacing(2), + width: "100%" + }, + content: { + alignItems: "center", + display: "flex" + }, + root: { + paddingRight: theme.spacing(3), + width: "1%" + } +})); -interface TableCellAvatarProps extends WithStyles { +interface TableCellAvatarProps { className?: string; thumbnail?: string; avatarProps?: string; children?: React.ReactNode | React.ReactNodeArray; } -const TableCellAvatar = withStyles(styles, { name: "TableCellAvatar" })( - ({ - classes, - children, - className, - thumbnail, - avatarProps, - ...props - }: TableCellAvatarProps) => ( - +const TableCellAvatar: React.FC = props => { + const { children, className, thumbnail, avatarProps, ...rest } = props; + + const classes = useStyles(props); + + return ( +
{thumbnail === undefined ? ( @@ -74,7 +65,7 @@ const TableCellAvatar = withStyles(styles, { name: "TableCellAvatar" })(
{children}
 - ) -); + ); +}; TableCellAvatar.displayName = "TableCellAvatar"; export default TableCellAvatar; diff --git a/src/components/TableFilter/FilterChips.tsx b/src/components/TableFilter/FilterChips.tsx index 296a6ad7a..8c14e28ec 100644 --- a/src/components/TableFilter/FilterChips.tsx +++ b/src/components/TableFilter/FilterChips.tsx @@ -6,7 +6,6 @@ import ClearIcon from "@material-ui/icons/Clear"; import React from "react"; import { FormattedMessage } from "react-intl"; -import Filter from "../Filter"; import FilterActions, { FilterActionsProps } from "../Filter/FilterActions"; import Hr from "../Hr"; import Link from "../Link"; diff --git a/src/components/TableFilter/FilterTab.tsx b/src/components/TableFilter/FilterTab.tsx index 83b438807..0042784ed 100644 --- a/src/components/TableFilter/FilterTab.tsx +++ b/src/components/TableFilter/FilterTab.tsx @@ -1,45 +1,43 @@ -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import Tab from "@material-ui/core/Tab"; import classNames from "classnames"; import React from "react"; -const styles = theme => - createStyles({ - selectedTabLabel: { - "&$tabLabel": { - color: theme.typography.body1.color - } - }, - tabLabel: { - "&:hover": { - color: theme.typography.body1.color - }, - color: theme.typography.caption.color, - fontSize: "1rem", - fontWeight: 400 - }, - tabRoot: { - minWidth: "80px", - opacity: 1, - paddingTop: theme.spacing(1), - textTransform: "initial" as "initial" +const useStyles = makeStyles(theme => ({ + selectedTabLabel: { + "&$tabLabel": { + color: theme.typography.body1.color } - }); + }, + tabLabel: { + "&:hover": { + color: theme.typography.body1.color + }, + color: theme.typography.caption.color, + fontSize: "1rem", + fontWeight: 400 + }, + tabRoot: { + minWidth: "80px", + opacity: 1, + paddingTop: theme.spacing(1), + textTransform: "initial" as "initial" + } +})); -interface FilterTabProps extends WithStyles { +interface FilterTabProps { onClick: () => void; label: string; selected?: boolean; value?: number; } -export const FilterTab = withStyles(styles, { name: "FilterTab" })( - ({ classes, onClick, label, selected, value }: FilterTabProps) => ( +export const FilterTab: React.FC = props => { + const { onClick, label, selected, value } = props; + + const classes = useStyles(props); + + return ( - ) -); + ); +}; FilterTab.displayName = "FilterTab"; export default FilterTab; diff --git a/src/components/TableFilter/FilterTabs.tsx b/src/components/TableFilter/FilterTabs.tsx index a5ca4a9b2..a516a64ca 100644 --- a/src/components/TableFilter/FilterTabs.tsx +++ b/src/components/TableFilter/FilterTabs.tsx @@ -1,27 +1,25 @@ -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import Tabs from "@material-ui/core/Tabs"; import React from "react"; -const styles = theme => - createStyles({ - tabsRoot: { - borderBottom: `1px solid ${theme.overrides.MuiCard.root.borderColor}`, - paddingLeft: theme.spacing(3) - } - }); +const useStyles = makeStyles(theme => ({ + tabsRoot: { + borderBottom: `1px solid ${theme.palette.divider}`, + paddingLeft: theme.spacing(3) + } +})); -interface FilterTabsProps extends WithStyles { +interface FilterTabsProps { children?: React.ReactNode; currentTab: number; } -export const FilterTabs = withStyles(styles, { name: "FilterTabs" })( - ({ classes, children, currentTab }: FilterTabsProps) => ( +export const FilterTabs: React.FC = props => { + const { children, currentTab } = props; + + const classes = useStyles(props); + + return ( {children} - ) -); + ); +}; export default FilterTabs; diff --git a/src/components/TableHead/TableHead.tsx b/src/components/TableHead/TableHead.tsx index 805995afa..b1c408a8e 100644 --- a/src/components/TableHead/TableHead.tsx +++ b/src/components/TableHead/TableHead.tsx @@ -1,9 +1,4 @@ -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import { fade } from "@material-ui/core/styles/colorManipulator"; import TableCell from "@material-ui/core/TableCell"; import MuiTableHead, { @@ -29,66 +24,62 @@ export interface TableHeadProps extends MuiTableHeadProps { toggleAll?: (items: Node[], selected: number) => void; } -const styles = theme => - createStyles({ - cell: { - padding: 0 - }, - checkboxPartialSelect: { - "& input": { - "&:before": { - background: [theme.palette.background.paper, "!important"] as any, - border: `solid 1px ${theme.palette.primary.main}`, - content: "''" - }, - background: theme.palette.background.paper +const useStyles = makeStyles(theme => ({ + cell: { + padding: 0 + }, + checkboxPartialSelect: { + "& input": { + "&:before": { + background: [theme.palette.background.paper, "!important"] as any, + border: `solid 1px ${theme.palette.primary.main}`, + content: "''" }, - "&:after": { - background: theme.palette.primary.main, - content: "''", - height: 2, - position: "absolute", - width: 6 - } + background: theme.palette.background.paper }, - checkboxSelected: { - backgroundColor: fade(theme.palette.primary.main, 0.05) - }, - container: { - alignItems: "center", - display: "flex", - height: 47, - marginRight: -theme.spacing(2) - }, - dragRows: { - padding: 0, - width: 52 - }, - padding: { - "&:last-child": { - padding: 0 - } - }, - root: { - backgroundColor: fade(theme.palette.primary.main, 0.05), - paddingLeft: 0, - paddingRight: 24 - }, - spacer: { - flex: 1 - }, - toolbar: { - "& > *": { - marginLeft: theme.spacing(1) - } + "&:after": { + background: theme.palette.primary.main, + content: "''", + height: 2, + position: "absolute", + width: 6 } - }); + }, + checkboxSelected: { + backgroundColor: fade(theme.palette.primary.main, 0.05) + }, + container: { + alignItems: "center", + display: "flex", + height: 47, + marginRight: -theme.spacing(2) + }, + dragRows: { + padding: 0, + width: 52 + }, + padding: { + "&:last-child": { + padding: 0 + } + }, + root: { + backgroundColor: fade(theme.palette.primary.main, 0.05), + paddingLeft: 0, + paddingRight: 24 + }, + spacer: { + flex: 1 + }, + toolbar: { + "& > *": { + marginLeft: theme.spacing(1) + } + } +})); -const TableHead = withStyles(styles, { - name: "TableHead" -})( - ({ - classes, +const TableHead: React.FC = props => { + const { children, colSpan, disabled, @@ -98,65 +89,66 @@ const TableHead = withStyles(styles, { toggleAll, toolbar, ...muiTableHeadProps - }: TableHeadProps & WithStyles) => { - return ( - - - {dragRows && (items === undefined || items.length > 0) && ( - + + {dragRows && (items === undefined || items.length > 0) && ( + + )} + {(items === undefined || items.length > 0) && ( + + selected && selected > 0 })} + checked={selected === 0 ? false : true} + disabled={disabled} + onChange={() => toggleAll(items, selected)} /> - )} - {(items === undefined || items.length > 0) && ( + + )} + {selected ? ( + <> - selected && selected > 0 - })} - checked={selected === 0 ? false : true} - disabled={disabled} - onChange={() => toggleAll(items, selected)} - /> +
+ {selected && ( + + + + )} +
+ {toolbar &&
{toolbar}
} +
- )} - {selected ? ( - <> - -
- {selected && ( - - - - )} -
- {toolbar &&
{toolbar}
} -
- - - ) : ( - children - )} - - - ); - } -); + + ) : ( + children + )} + + + ); +}; TableHead.displayName = "TableHead"; export default TableHead; diff --git a/src/components/TableHead/index.ts b/src/components/TableHead/index.ts index bbb62bd2f..c65d8a283 100644 --- a/src/components/TableHead/index.ts +++ b/src/components/TableHead/index.ts @@ -1,2 +1,2 @@ -export { default } from './TableHead'; -export * from './TableHead'; \ No newline at end of file +export { default } from "./TableHead"; +export * from "./TableHead"; diff --git a/src/components/TablePagination/TablePagination.tsx b/src/components/TablePagination/TablePagination.tsx index 254df9987..831b235c8 100644 --- a/src/components/TablePagination/TablePagination.tsx +++ b/src/components/TablePagination/TablePagination.tsx @@ -1,12 +1,5 @@ -// @inheritedComponent TableCell - import { IconButtonProps } from "@material-ui/core/IconButton"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import TableCell from "@material-ui/core/TableCell"; import Toolbar from "@material-ui/core/Toolbar"; import React from "react"; @@ -16,50 +9,48 @@ import { maybe } from "@saleor/misc"; import { ListSettings } from "../../types"; import TablePaginationActions from "./TablePaginationActions"; -const styles = theme => - createStyles({ - actions: { - color: theme.palette.text.secondary, - flexShrink: 0, - marginLeft: theme.spacing(2.5) - }, - caption: { - flexShrink: 0 - }, - input: { - flexShrink: 0, - fontSize: "inherit" - }, - root: { - "&:last-child": { - padding: 0 - } - }, - select: { - paddingLeft: theme.spacing(), - paddingRight: theme.spacing(2) - }, - selectIcon: { - top: 1 - }, - selectRoot: { - color: theme.palette.text.secondary, - marginLeft: theme.spacing(), - marginRight: theme.spacing(4) - }, - spacer: { - flex: "1 1 100%" - }, - toolbar: { - height: 56, - minHeight: 56, - paddingLeft: 2, - paddingRight: 2 +const useStyles = makeStyles(theme => ({ + actions: { + color: theme.palette.text.secondary, + flexShrink: 0, + marginLeft: theme.spacing(2.5) + }, + caption: { + flexShrink: 0 + }, + input: { + flexShrink: 0, + fontSize: "inherit" + }, + root: { + "&:last-child": { + padding: 0 } - }); + }, + select: { + paddingLeft: theme.spacing(), + paddingRight: theme.spacing(2) + }, + selectIcon: { + top: 1 + }, + selectRoot: { + color: theme.palette.text.secondary, + marginLeft: theme.spacing(), + marginRight: theme.spacing(4) + }, + spacer: { + flex: "1 1 100%" + }, + toolbar: { + height: 56, + minHeight: 56, + paddingLeft: 2, + paddingRight: 2 + } +})); -interface TablePaginationProps extends WithStyles { - Actions?: typeof TablePaginationActions; +interface TablePaginationProps { backIconButtonProps?: Partial; colSpan: number; component?: string | typeof TableCell; @@ -72,11 +63,9 @@ interface TablePaginationProps extends WithStyles { onUpdateListSettings?(key: keyof ListSettings, value: any): void; } -const TablePagination = withStyles(styles, { name: "TablePagination" })( - ({ - Actions, +const TablePagination: React.FC = props => { + const { backIconButtonProps, - classes, colSpan: colSpanProp, component: Component, settings, @@ -87,40 +76,41 @@ const TablePagination = withStyles(styles, { name: "TablePagination" })( onPreviousPage, onUpdateListSettings, ...other - }: TablePaginationProps) => { - let colSpan; + } = props; + const classes = useStyles(props); - if (Component === TableCell || Component === "td") { - colSpan = colSpanProp || 1000; - } + let colSpan; - return ( - - -
- {maybe(() => settings.rowNumber) && ( - - )} -
- - - - ); + if (Component === TableCell || Component === "td") { + colSpan = colSpanProp || 1000; } -); + + return ( + + +
+ {maybe(() => settings.rowNumber) && ( + + )} +
+ + + + ); +}; TablePagination.defaultProps = { - Actions: TablePaginationActions, component: TableCell }; diff --git a/src/components/TablePagination/TablePaginationActions.tsx b/src/components/TablePagination/TablePaginationActions.tsx index 3ed70bad3..97d428e60 100644 --- a/src/components/TablePagination/TablePaginationActions.tsx +++ b/src/components/TablePagination/TablePaginationActions.tsx @@ -1,10 +1,5 @@ import IconButton from "@material-ui/core/IconButton"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles, useTheme as useMuiTheme } from "@material-ui/core/styles"; import { fade } from "@material-ui/core/styles/colorManipulator"; import ArrowLeft from "@material-ui/icons/ArrowLeft"; import ArrowRight from "@material-ui/icons/ArrowRight"; @@ -12,51 +7,49 @@ import useTheme from "@saleor/hooks/useTheme"; import classNames from "classnames"; import React from "react"; -const styles = theme => - createStyles({ - dark: { +const useStyles = makeStyles(theme => ({ + dark: { + "& svg": { + color: theme.palette.primary.main + }, + "&$disabled": { "& svg": { - color: theme.palette.primary.main - }, - "&$disabled": { - "& svg": { - color: fade(theme.palette.primary.main, 0.2) - } - }, - "&:focus, &:hover": { - "& > span:first-of-type": { - backgroundColor: fade(theme.palette.primary.main, 0.2) - } + color: fade(theme.palette.primary.main, 0.2) } }, - disabled: {}, - iconButton: { + "&:focus, &:hover": { "& > span:first-of-type": { - backgroundColor: theme.palette.background.default, - borderRadius: "100%", - transition: theme.transitions.duration.standard + "ms" - }, - "& svg": { - border: `solid 1px #BDBDBD`, - borderRadius: "50%" - }, - "&:focus, &:hover": { - "& > span:first-of-type": { - backgroundColor: fade(theme.palette.primary.main, 0.2) - }, - backgroundColor: "transparent" - }, - padding: 6 - }, - root: { - color: theme.palette.text.secondary, - flexShrink: 0, - margin: theme.spacing(0, 2.5) + backgroundColor: fade(theme.palette.primary.main, 0.2) + } } - }); + }, + disabled: {}, + iconButton: { + "& > span:first-of-type": { + backgroundColor: theme.palette.background.default, + borderRadius: "100%", + transition: theme.transitions.duration.standard + "ms" + }, + "& svg": { + border: `solid 1px #BDBDBD`, + borderRadius: "50%" + }, + "&:focus, &:hover": { + "& > span:first-of-type": { + backgroundColor: fade(theme.palette.primary.main, 0.2) + }, + backgroundColor: "transparent" + }, + padding: 6 + }, + root: { + color: theme.palette.text.secondary, + flexShrink: 0, + margin: theme.spacing(0, 2.5) + } +})); -export interface TablePaginationActionsProps - extends WithStyles { +export interface TablePaginationActionsProps { backIconButtonProps?: any; classes: any; className?: string; @@ -67,53 +60,53 @@ export interface TablePaginationActionsProps onPreviousPage(event); } -export const TablePaginationActions = withStyles(styles, { - name: "TablePaginationActions", - withTheme: true -})( - ({ +export const TablePaginationActions: React.FC< + TablePaginationActionsProps +> = props => { + const { backIconButtonProps, - classes, className, hasNextPage, hasPreviousPage, nextIconButtonProps, onNextPage, onPreviousPage, - theme, ...other - }: TablePaginationActionsProps) => { - const { isDark } = useTheme(); - return ( -
- - {theme.direction === "rtl" ? : } - - - {theme.direction === "rtl" ? : } - -
- ); - } -); + } = props; + const classes = useStyles(props); + + const { isDark } = useTheme(); + const { direction } = useMuiTheme(); + + return ( +
+ + {direction === "rtl" ? : } + + + {direction === "rtl" ? : } + +
+ ); +}; TablePaginationActions.displayName = "TablePaginationActions"; export default TablePaginationActions; diff --git a/src/components/TextFieldWithChoice/TextFieldWithChoice.tsx b/src/components/TextFieldWithChoice/TextFieldWithChoice.tsx index 2bf8c6408..9f634bf5b 100644 --- a/src/components/TextFieldWithChoice/TextFieldWithChoice.tsx +++ b/src/components/TextFieldWithChoice/TextFieldWithChoice.tsx @@ -4,7 +4,7 @@ import MenuItem from "@material-ui/core/MenuItem"; import Menu from "@material-ui/core/MenuList"; import Paper from "@material-ui/core/Paper"; import Popper from "@material-ui/core/Popper"; -import { createStyles, WithStyles, withStyles } from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import TextField, { TextFieldProps } from "@material-ui/core/TextField"; import Typography from "@material-ui/core/Typography"; import DropdownIcon from "@material-ui/icons/ArrowDropDown"; @@ -23,7 +23,7 @@ export type TextFieldWithChoiceProps = TextFieldProps & { }; }; -const styles = createStyles({ +const useStyles = makeStyles({ adornment: { alignItems: "center", cursor: "pointer", @@ -34,99 +34,93 @@ const styles = createStyles({ } }); -const TextFieldWithChoice = withStyles(styles, { - name: "TextFieldWithChoices" -})( - ({ - ChoiceProps, - InputProps, - classes, - onChange, - ...props - }: TextFieldWithChoiceProps & WithStyles) => { - const anchor = React.useRef(); +const TextFieldWithChoice: React.FC = props => { + const { ChoiceProps, InputProps, onChange, ...rest } = props; + const classes = useStyles(props); - return ( - - {({ - open: menuOpen, - actions: { open: openMenu, close: closeMenu } - }) => { - const handleSelect = value => { - onChange({ - target: { - name: ChoiceProps.name, - value - } - } as any); - closeMenu(); - }; + const anchor = React.useRef(); + + return ( + + {({ + open: menuOpen, + actions: { open: openMenu, close: closeMenu } + }) => { + const handleSelect = value => { + onChange({ + target: { + name: ChoiceProps.name, + value + } + } as any); + closeMenu(); + }; + + return ( + <> +
+ + {ChoiceProps.label} + + {ChoiceProps.values ? : null} +
+ + {({ TransitionProps, placement }) => ( + + + + + {ChoiceProps.values.map(choice => ( + handleSelect(choice.value)} + key={choice.value} + > + {choice.label} + + ))} + + + + + )} + + + ); + }} + + ) + }} + /> + ); +}; - return ( - <> -
- - {ChoiceProps.label} - - {ChoiceProps.values ? : null} -
- - {({ TransitionProps, placement }) => ( - - - - - {ChoiceProps.values.map(choice => ( - handleSelect(choice.value)} - key={choice.value} - > - {choice.label} - - ))} - - - - - )} - - - ); - }} - - ) - }} - /> - ); - } -); TextFieldWithChoice.displayName = "TextFieldWithChoice"; export default TextFieldWithChoice; diff --git a/src/components/Timeline/Timeline.tsx b/src/components/Timeline/Timeline.tsx index fbdcc165b..e5d26d3e1 100644 --- a/src/components/Timeline/Timeline.tsx +++ b/src/components/Timeline/Timeline.tsx @@ -2,19 +2,14 @@ import Avatar from "@material-ui/core/Avatar"; import Button from "@material-ui/core/Button"; import CardContent from "@material-ui/core/CardContent"; import deepPurple from "@material-ui/core/colors/deepPurple"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; import PersonIcon from "@material-ui/icons/Person"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; -const styles = theme => - createStyles({ +const useStyles = makeStyles( + theme => ({ avatar: { "& span": { height: "100%", @@ -61,79 +56,85 @@ const styles = theme => paddingLeft: theme.spacing(3) }, root: { - borderColor: theme.overrides.MuiCard.root.borderColor, + borderColor: theme.palette.divider, borderStyle: "solid", borderWidth: "0 0 0 2px", marginLeft: 20, paddingLeft: theme.spacing(3) } - }); + }), + { name: "Timeline" } +); -interface TimelineProps extends WithStyles { +interface TimelineProps { children?: React.ReactNode; } -interface TimelineAddNoteProps extends WithStyles { +interface TimelineAddNoteProps { message: string; reset: () => void; onChange(event: React.ChangeEvent); onSubmit(event: React.FormEvent); } -export const Timeline = withStyles(styles, { name: "Timeline" })( - ({ classes, children }: TimelineProps) => ( -
{children}
- ) -); +export const Timeline: React.FC = props => { + const { children } = props; -export const TimelineAddNote = withStyles(styles, { name: "TimelineAddNote" })( - ({ classes, message, onChange, onSubmit, reset }: TimelineAddNoteProps) => { - const intl = useIntl(); + const classes = useStyles(props); - const submit = e => { - reset(); - onSubmit(e); - }; + return
{children}
; +}; + +export const TimelineAddNote: React.FC = props => { + const { message, onChange, onSubmit, reset } = props; + const classes = useStyles(props); + + const intl = useIntl(); + + const submit = e => { + reset(); + onSubmit(e); + }; + + return ( +
+ + + + + submit(e)} + > + + + ) + }} + variant="outlined" + /> + +
+ ); +}; - return ( -
- - - - - submit(e)} - > - - - ) - }} - variant="outlined" - /> - -
- ); - } -); Timeline.displayName = "Timeline"; export default Timeline; diff --git a/src/components/Timeline/TimelineEvent.tsx b/src/components/Timeline/TimelineEvent.tsx index d870e0c69..906b7dfa9 100644 --- a/src/components/Timeline/TimelineEvent.tsx +++ b/src/components/Timeline/TimelineEvent.tsx @@ -1,78 +1,76 @@ import ExpansionPanel from "@material-ui/core/ExpansionPanel"; import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails"; import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; import React from "react"; import { DateTime } from "../Date"; -const styles = theme => - createStyles({ - date: { - color: theme.typography.caption.color, +const useStyles = makeStyles(theme => ({ + date: { + color: theme.typography.caption.color + }, + dateExpander: { + color: theme.typography.caption.color, + position: "absolute", + right: theme.spacing(3) + }, + dot: { + backgroundColor: theme.palette.primary.main, + borderRadius: "100%", + height: 8, + left: -29, + position: "absolute", + top: 6, + width: 8 + }, + noExpander: { + alignItems: "center", + display: "flex", + justifyContent: "space-between", + marginBottom: theme.spacing(), + marginLeft: theme.spacing(3), + width: "100%" + }, + panel: { + "&:before": { + display: "none" }, - dateExpander:{ - color: theme.typography.caption.color, + background: "none", + width: "100%" + }, + root: { + "&:last-child:after": { + background: theme.palette.background.default, + content: "''", + height: "calc(50% - 4px)", + left: -theme.spacing(3) - 2, position: "absolute", - right: theme.spacing(3) + top: "calc(50% + 4px)", + width: "2px" }, - dot: { - backgroundColor: theme.palette.primary.main, - borderRadius: "100%", - height: 8, - left: -29, - position: "absolute", - top: 6, - width: 8 - }, - noExpander: { - alignItems: "center", - display: "flex", - justifyContent: "space-between", - marginBottom: theme.spacing(), - marginLeft: theme.spacing(3), - width: "100%" - }, - panel: { - "&:before": { - display: "none" - }, - background: "none", - width: "100%" - }, - root: { - "&:last-child:after": { - background: theme.palette.background.default, - content: "''", - height: "calc(50% - 4px)", - left: -theme.spacing(3) - 2, - position: "absolute", - top: "calc(50% + 4px)", - width: "2px" - }, - alignItems: "center", - display: "flex", - marginBottom: theme.spacing(3), - position: "relative", - width: "100%" - } - }); + alignItems: "center", + display: "flex", + marginBottom: theme.spacing(3), + position: "relative", + width: "100%" + } +})); -interface TimelineEventProps extends WithStyles { +interface TimelineEventProps { children?: React.ReactNode; date: string; title: string; } -export const TimelineEvent = withStyles(styles)( - ({ classes, children, date, title }: TimelineEventProps) => ( +export const TimelineEvent: React.FC = props => { + const { children, date, title } = props; + + const classes = useStyles(props); + + return (
{children ? ( @@ -94,7 +92,7 @@ export const TimelineEvent = withStyles(styles)(
)}
- ) -); + ); +}; TimelineEvent.displayName = "TimelineEvent"; export default TimelineEvent; diff --git a/src/components/Timeline/TimelineNote.tsx b/src/components/Timeline/TimelineNote.tsx index 967c16e26..83764208a 100644 --- a/src/components/Timeline/TimelineNote.tsx +++ b/src/components/Timeline/TimelineNote.tsx @@ -2,12 +2,7 @@ import Avatar from "@material-ui/core/Avatar"; import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; import * as colors from "@material-ui/core/colors"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import PersonIcon from "@material-ui/icons/Person"; import CRC from "crc-32"; @@ -34,40 +29,39 @@ const palette = [ colors.yellow ].map(color => color[500]); -const styles = theme => - createStyles({ - avatar: { - left: -45, - position: "absolute", - top: 0 +const useStyles = makeStyles(theme => ({ + avatar: { + left: -45, + position: "absolute", + top: 0 + }, + card: { + marginBottom: theme.spacing(3), + marginLeft: theme.spacing(3), + position: "relative" + }, + cardContent: { + "&:last-child": { + padding: 16 }, - card: { - marginBottom: theme.spacing(3), - marginLeft: theme.spacing(3), - position: "relative" + boxShadow: "0px 5px 10px rgba(0, 0, 0, 0.05)" + }, + root: { + position: "relative" + }, + title: { + "& p": { + fontSize: "14px" }, - cardContent: { - "&:last-child": { - padding: 16 - }, - boxShadow: "0px 5px 10px rgba(0, 0, 0, 0.05)" - }, - root: { - position: "relative" - }, - title: { - "& p": { - fontSize: "14px" - }, - alignItems: "center", - display: "flex", - justifyContent: "space-between", - marginBottom: theme.spacing(), - paddingLeft: theme.spacing(3) - } - }); + alignItems: "center", + display: "flex", + justifyContent: "space-between", + marginBottom: theme.spacing(), + paddingLeft: theme.spacing(3) + } +})); -interface TimelineNoteProps extends WithStyles { +interface TimelineNoteProps { date: string; message: string | null; user: { @@ -75,8 +69,12 @@ interface TimelineNoteProps extends WithStyles { }; } -export const TimelineNote = withStyles(styles, { name: "TimelineNote" })( - ({ classes, date, user, message }: TimelineNoteProps) => ( +export const TimelineNote: React.FC = props => { + const { date, user, message } = props; + + const classes = useStyles(props); + + return (
- ) -); + ); +}; TimelineNote.displayName = "TimelineNote"; export default TimelineNote; diff --git a/src/components/VisibilityCard/VisibilityCard.tsx b/src/components/VisibilityCard/VisibilityCard.tsx index 2ad12014e..01372d0ed 100644 --- a/src/components/VisibilityCard/VisibilityCard.tsx +++ b/src/components/VisibilityCard/VisibilityCard.tsx @@ -1,11 +1,6 @@ import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; import Typography from "@material-ui/core/Typography"; import React from "react"; @@ -15,39 +10,38 @@ import CardTitle from "@saleor/components/CardTitle"; import RadioSwitchField from "@saleor/components/RadioSwitchField"; import { DateContext } from "../Date/DateContext"; -const styles = theme => - createStyles({ - children: { - "& button": { - margin: "0 9px" - }, - "& label": { - marginTop: theme.spacing(2.5) - } +const useStyles = makeStyles(theme => ({ + children: { + "& button": { + margin: "0 9px" }, - date: { - "& svg": { - fill: theme.palette.primary.main - }, - marginTop: theme.spacing(3) - }, - label: { - lineHeight: 1, - margin: 0 - }, - secondLabel: { - fontSize: 12 - }, - setPublicationDate: { - color: theme.palette.primary.main, - cursor: "pointer", - fontSize: "14px", - paddingTop: "15px", - textDecoration: "underline" + "& label": { + marginTop: theme.spacing(2.5) } - }); + }, + date: { + "& svg": { + fill: theme.palette.primary.main + }, + marginTop: theme.spacing(3) + }, + label: { + lineHeight: 1, + margin: 0 + }, + secondLabel: { + fontSize: 12 + }, + setPublicationDate: { + color: theme.palette.primary.main, + cursor: "pointer", + fontSize: "14px", + paddingTop: "15px", + textDecoration: "underline" + } +})); -interface VisibilityCardProps extends WithStyles { +interface VisibilityCardProps { children?: React.ReactNode | React.ReactNodeArray; data: { isPublished: boolean; @@ -60,113 +54,110 @@ interface VisibilityCardProps extends WithStyles { visibleMessage: string; } -export const VisibilityCard = withStyles(styles, { - name: "VisibilityCard" -})( - ({ +export const VisibilityCard: React.FC = props => { + const { children, - classes, + data: { isPublished, publicationDate }, errors, disabled, hiddenMessage, onChange, visibleMessage - }: VisibilityCardProps) => { - const intl = useIntl(); - const [isPublicationDate, setPublicationDate] = React.useState( - publicationDate === null ? true : false - ); - const dateNow = React.useContext(DateContext); - const visibleSecondLabel = publicationDate - ? isPublished - ? visibleMessage - : null - : null; - const hiddenSecondLabel = publicationDate - ? isPublished - ? null - : Date.parse(publicationDate) > dateNow - ? hiddenMessage - : null - : null; + } = props; + const classes = useStyles(props); - return ( - - - - -

- {intl.formatMessage({ - defaultMessage: "Visible" - })} -

- - {visibleSecondLabel} - - - } - name={"isPublished" as keyof FormData} - secondOptionLabel={ - <> -

- {intl.formatMessage({ - defaultMessage: "Hidden" - })} -

- {hiddenSecondLabel} - - } - value={isPublished} - onChange={onChange} - /> - {!isPublished && ( + const intl = useIntl(); + const [isPublicationDate, setPublicationDate] = React.useState( + publicationDate === null ? true : false + ); + const dateNow = React.useContext(DateContext); + const visibleSecondLabel = publicationDate + ? isPublished + ? visibleMessage + : null + : null; + const hiddenSecondLabel = publicationDate + ? isPublished + ? null + : Date.parse(publicationDate) > dateNow + ? hiddenMessage + : null + : null; + + return ( + + + + - {!isPublished && ( - setPublicationDate(!isPublicationDate)} - > - {intl.formatMessage({ - defaultMessage: "Set publication date" - })} - - )} - {isPublicationDate && ( - - )} +

+ {intl.formatMessage({ + defaultMessage: "Visible" + })} +

+ {visibleSecondLabel} - )} -
{children}
- - - ); - } -); + } + name={"isPublished" as keyof FormData} + secondOptionLabel={ + <> +

+ {intl.formatMessage({ + defaultMessage: "Hidden" + })} +

+ {hiddenSecondLabel} + + } + value={isPublished} + onChange={onChange} + /> + {!isPublished && ( + <> + {!isPublished && ( + setPublicationDate(!isPublicationDate)} + > + {intl.formatMessage({ + defaultMessage: "Set publication date" + })} + + )} + {isPublicationDate && ( + + )} + + )} +
{children}
+ + + ); +}; VisibilityCard.displayName = "VisibilityCard"; export default VisibilityCard; diff --git a/src/components/Weight/index.ts b/src/components/Weight/index.ts index 1a73fcf9a..85ecccd23 100644 --- a/src/components/Weight/index.ts +++ b/src/components/Weight/index.ts @@ -1,2 +1,2 @@ -export { default } from './Weight'; -export * from './Weight'; \ No newline at end of file +export { default } from "./Weight"; +export * from "./Weight"; diff --git a/src/components/WeightRange/index.ts b/src/components/WeightRange/index.ts index b07752efe..a321e36f9 100644 --- a/src/components/WeightRange/index.ts +++ b/src/components/WeightRange/index.ts @@ -1,2 +1,2 @@ -export { default } from './WeightRange'; -export * from './WeightRange'; \ No newline at end of file +export { default } from "./WeightRange"; +export * from "./WeightRange"; diff --git a/src/configuration/ConfigurationPage.tsx b/src/configuration/ConfigurationPage.tsx index f3c9cd0e4..ce6976363 100644 --- a/src/configuration/ConfigurationPage.tsx +++ b/src/configuration/ConfigurationPage.tsx @@ -1,11 +1,6 @@ import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import React from "react"; import { useIntl } from "react-intl"; @@ -31,62 +26,61 @@ export interface MenuSection { menuItems: MenuItem[]; } -const styles = theme => - createStyles({ - card: { - "&:hover": { - boxShadow: "0px 5px 15px rgba(0, 0, 0, 0.15);" - }, - cursor: "pointer", - marginBottom: theme.spacing(3), - transition: theme.transitions.duration.standard + "ms" +const useStyles = makeStyles(theme => ({ + card: { + "&:hover": { + boxShadow: "0px 5px 15px rgba(0, 0, 0, 0.15);" }, - cardContent: { - // Overrides Material-UI default theme - "&:last-child": { - paddingBottom: 16 - }, - display: "grid", - gridColumnGap: theme.spacing(4), - gridTemplateColumns: "48px 1fr" + cursor: "pointer", + marginBottom: theme.spacing(3), + transition: theme.transitions.duration.standard + "ms" + }, + cardContent: { + // Overrides Material-UI default theme + "&:last-child": { + paddingBottom: 16 }, - cardDisabled: { - "& $icon, & $sectionTitle, & $sectionDescription": { - color: theme.palette.text.disabled - }, - marginBottom: theme.spacing(3) + display: "grid", + gridColumnGap: theme.spacing(4), + gridTemplateColumns: "48px 1fr" + }, + cardDisabled: { + "& $icon, & $sectionTitle, & $sectionDescription": { + color: theme.palette.text.disabled }, - configurationCategory: { - [theme.breakpoints.down("md")]: { - gridTemplateColumns: "1fr" - }, - borderTop: `solid 1px ${theme.palette.divider}`, - display: "grid", - gridColumnGap: theme.spacing(4) + "px", - gridTemplateColumns: "1fr 3fr", - paddingTop: theme.spacing(3) + marginBottom: theme.spacing(3) + }, + configurationCategory: { + [theme.breakpoints.down("md")]: { + gridTemplateColumns: "1fr" }, - configurationItem: { - display: "grid", - gridColumnGap: theme.spacing(4), - gridTemplateColumns: "1fr 1fr" - }, - configurationLabel: { - paddingBottom: 20 - }, - header: { - margin: 0 - }, - icon: { - color: theme.palette.primary.main, - fontSize: 48 - }, - sectionDescription: {}, - sectionTitle: { - fontSize: 20, - fontWeight: 600 as 600 - } - }); + borderTop: `solid 1px ${theme.palette.divider}`, + display: "grid", + gridColumnGap: theme.spacing(4) + "px", + gridTemplateColumns: "1fr 3fr", + paddingTop: theme.spacing(3) + }, + configurationItem: { + display: "grid", + gridColumnGap: theme.spacing(4), + gridTemplateColumns: "1fr 1fr" + }, + configurationLabel: { + paddingBottom: 20 + }, + header: { + margin: 0 + }, + icon: { + color: theme.palette.primary.main, + fontSize: 48 + }, + sectionDescription: {}, + sectionTitle: { + fontSize: 20, + fontWeight: 600 as 600 + } +})); export interface ConfigurationPageProps { menu: MenuSection[]; @@ -94,64 +88,58 @@ export interface ConfigurationPageProps { onSectionClick: (sectionName: string) => void; } -export const ConfigurationPage = withStyles(styles, { - name: "ConfigurationPage" -})( - ({ - classes, - menu: menus, - user, - onSectionClick - }: ConfigurationPageProps & WithStyles) => { - const intl = useIntl(); - return ( - - - {menus - .filter(menu => - menu.menuItems.some(menuItem => - hasPermission(menuItem.permission, user) - ) +export const ConfigurationPage: React.FC = props => { + const { menu: menus, user, onSectionClick } = props; + const classes = useStyles(props); + + const intl = useIntl(); + return ( + + + {menus + .filter(menu => + menu.menuItems.some(menuItem => + hasPermission(menuItem.permission, user) ) - .map((menu, menuIndex) => ( -
-
- {menu.label} -
-
- {menu.menuItems - .filter(menuItem => hasPermission(menuItem.permission, user)) - .map((item, itemIndex) => ( - onSectionClick(item.url)} - key={itemIndex} - > - -
{item.icon}
-
- - {item.title} - - - {item.description} - -
- - - ))} -
+ ) + .map((menu, menuIndex) => ( +
+
+ {menu.label}
- ))} - - ); - } -); +
+ {menu.menuItems + .filter(menuItem => hasPermission(menuItem.permission, user)) + .map((item, itemIndex) => ( + onSectionClick(item.url)} + key={itemIndex} + > + +
{item.icon}
+
+ + {item.title} + + + {item.description} + +
+ + + ))} +
+
+ ))} + + ); +}; ConfigurationPage.displayName = "ConfigurationPage"; export default ConfigurationPage; diff --git a/src/customers/components/CustomerAddress/CustomerAddress.tsx b/src/customers/components/CustomerAddress/CustomerAddress.tsx index cc3da80ab..eb16509a3 100644 --- a/src/customers/components/CustomerAddress/CustomerAddress.tsx +++ b/src/customers/components/CustomerAddress/CustomerAddress.tsx @@ -2,7 +2,7 @@ import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; import CardActions from "@material-ui/core/CardActions"; import CardContent from "@material-ui/core/CardContent"; -import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -25,7 +25,7 @@ export interface CustomerAddressProps { onSetAsDefault: (type: AddressTypeEnum) => void; } -const styles = createStyles({ +const useStyles = makeStyles({ actions: { flexDirection: "row" }, @@ -40,82 +40,82 @@ const styles = createStyles({ flexDirection: "column" } }); -const CustomerAddress = withStyles(styles, { name: "CustomerAddress" })( - ({ +const CustomerAddress: React.FC = props => { + const { address, - classes, disabled, isDefaultBillingAddress, isDefaultShippingAddress, onEdit, onRemove, onSetAsDefault - }: CustomerAddressProps & WithStyles) => { - const intl = useIntl(); + } = props; + const classes = useStyles(props); - return ( - - - {isDefaultBillingAddress && isDefaultShippingAddress - ? intl.formatMessage({ - defaultMessage: "Default Address" - }) - : isDefaultShippingAddress - ? intl.formatMessage({ - defaultMessage: "Default Shipping Address" - }) - : isDefaultBillingAddress - ? intl.formatMessage({ - defaultMessage: "Default Billing Address" - }) - : null} - - ) : ( - - ) - } - height="const" - toolbar={ - onSetAsDefault(AddressTypeEnum.SHIPPING) - }, - { - label: intl.formatMessage({ - defaultMessage: "Set as default billing address", - description: "button" - }), - onSelect: () => onSetAsDefault(AddressTypeEnum.BILLING) - } - ]} - /> - } - /> - - - -
- - - - -
- - ); - } -); + const intl = useIntl(); + + return ( + + + {isDefaultBillingAddress && isDefaultShippingAddress + ? intl.formatMessage({ + defaultMessage: "Default Address" + }) + : isDefaultShippingAddress + ? intl.formatMessage({ + defaultMessage: "Default Shipping Address" + }) + : isDefaultBillingAddress + ? intl.formatMessage({ + defaultMessage: "Default Billing Address" + }) + : null} + + ) : ( + + ) + } + height="const" + toolbar={ + onSetAsDefault(AddressTypeEnum.SHIPPING) + }, + { + label: intl.formatMessage({ + defaultMessage: "Set as default billing address", + description: "button" + }), + onSelect: () => onSetAsDefault(AddressTypeEnum.BILLING) + } + ]} + /> + } + /> + + + +
+ + + + +
+ + ); +}; CustomerAddress.displayName = "CustomerAddress"; export default CustomerAddress; diff --git a/src/customers/components/CustomerAddress/index.ts b/src/customers/components/CustomerAddress/index.ts index 937bf0048..6dc6dd7dc 100644 --- a/src/customers/components/CustomerAddress/index.ts +++ b/src/customers/components/CustomerAddress/index.ts @@ -1,2 +1,2 @@ -export { default } from './CustomerAddress'; -export * from './CustomerAddress'; \ No newline at end of file +export { default } from "./CustomerAddress"; +export * from "./CustomerAddress"; diff --git a/src/customers/components/CustomerAddressDialog/index.ts b/src/customers/components/CustomerAddressDialog/index.ts index a5f6e9973..4206dac00 100644 --- a/src/customers/components/CustomerAddressDialog/index.ts +++ b/src/customers/components/CustomerAddressDialog/index.ts @@ -1,2 +1,2 @@ -export { default } from './CustomerAddressDialog'; -export * from './CustomerAddressDialog'; \ No newline at end of file +export { default } from "./CustomerAddressDialog"; +export * from "./CustomerAddressDialog"; diff --git a/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx b/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx index 4f98c2752..4ff11c32b 100644 --- a/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx +++ b/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx @@ -1,10 +1,5 @@ import Button from "@material-ui/core/Button"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import React from "react"; @@ -28,32 +23,30 @@ export interface CustomerAddressListPageProps { onSetAsDefault: (id: string, type: AddressTypeEnum) => void; } -const styles = theme => - createStyles({ - addButton: { - marginTop: theme.spacing(2) - }, - description: { - marginTop: theme.spacing(1) - }, - empty: { - margin: `${theme.spacing(13)}px auto 0`, - textAlign: "center", - width: 600 - }, - root: { - columnGap: theme.spacing(3), - display: "grid", - gridTemplateColumns: "repeat(3, 1fr)", - rowGap: theme.spacing(3) - } - }); +const useStyles = makeStyles(theme => ({ + addButton: { + marginTop: theme.spacing(2) + }, + description: { + marginTop: theme.spacing(1) + }, + empty: { + margin: `${theme.spacing(13)}px auto 0`, + textAlign: "center", + width: 600 + }, + root: { + columnGap: theme.spacing(3), + display: "grid", + gridTemplateColumns: "repeat(3, 1fr)", + rowGap: theme.spacing(3) + } +})); -const CustomerAddressListPage = withStyles(styles, { - name: "CustomerAddressListPage" -})( - ({ - classes, +const CustomerAddressListPage: React.FC< + CustomerAddressListPageProps +> = props => { + const { customer, disabled, onAdd, @@ -61,95 +54,96 @@ const CustomerAddressListPage = withStyles(styles, { onEdit, onRemove, onSetAsDefault - }: CustomerAddressListPageProps & WithStyles) => { - const intl = useIntl(); + } = props; + const classes = useStyles(props); - const isEmpty = maybe(() => customer.addresses.length) === 0; - const fullName = maybe( - () => [customer.firstName, customer.lastName].join(" "), - "..." - ); + const intl = useIntl(); - return ( - - - customer.addresses.length) === 0; + const fullName = maybe( + () => [customer.firstName, customer.lastName].join(" "), + "..." + ); + + return ( + + + + + {!isEmpty && ( + - - {!isEmpty && ( - + + + )} + {isEmpty ? ( +
+ + + + + + + +
+ ) : ( +
+ {renderCollection( + maybe(() => customer.addresses), + (address, addressNumber) => ( + customer.defaultBillingAddress.id) === + maybe(() => address.id) + } + isDefaultShippingAddress={ + maybe(() => customer.defaultShippingAddress.id) === + maybe(() => address.id) + } + onEdit={() => onEdit(address.id)} + onRemove={() => onRemove(address.id)} + onSetAsDefault={type => onSetAsDefault(address.id, type)} + key={maybe(() => address.id, "skeleton")} /> - - - )} - {isEmpty ? ( -
- - - - - - - -
- ) : ( -
- {renderCollection( - maybe(() => customer.addresses), - (address, addressNumber) => ( - customer.defaultBillingAddress.id) === - maybe(() => address.id) - } - isDefaultShippingAddress={ - maybe(() => customer.defaultShippingAddress.id) === - maybe(() => address.id) - } - onEdit={() => onEdit(address.id)} - onRemove={() => onRemove(address.id)} - onSetAsDefault={type => onSetAsDefault(address.id, type)} - key={maybe(() => address.id, "skeleton")} - /> - ) - )} -
- )} - - ); - } -); + ) + )} +
+ )} + + ); +}; CustomerAddressListPage.displayName = "CustomerAddressListPage"; export default CustomerAddressListPage; diff --git a/src/customers/components/CustomerAddressListPage/index.ts b/src/customers/components/CustomerAddressListPage/index.ts index a2fe444c5..6bf91f468 100644 --- a/src/customers/components/CustomerAddressListPage/index.ts +++ b/src/customers/components/CustomerAddressListPage/index.ts @@ -1,2 +1,2 @@ -export { default } from './CustomerAddressListPage'; -export * from './CustomerAddressListPage'; \ No newline at end of file +export { default } from "./CustomerAddressListPage"; +export * from "./CustomerAddressListPage"; diff --git a/src/customers/components/CustomerAddresses/CustomerAddresses.tsx b/src/customers/components/CustomerAddresses/CustomerAddresses.tsx index 4b1ddb548..c2e85983a 100644 --- a/src/customers/components/CustomerAddresses/CustomerAddresses.tsx +++ b/src/customers/components/CustomerAddresses/CustomerAddresses.tsx @@ -1,12 +1,7 @@ import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -18,105 +13,99 @@ import { buttonMessages } from "@saleor/intl"; import { maybe } from "../../../misc"; import { CustomerDetails_user } from "../../types/CustomerDetails"; -const styles = theme => - createStyles({ - label: { - fontWeight: 600, - marginBottom: theme.spacing(1) - } - }); +const useStyles = makeStyles(theme => ({ + label: { + fontWeight: 600, + marginBottom: theme.spacing(1) + } +})); -export interface CustomerAddressesProps extends WithStyles { +export interface CustomerAddressesProps { customer: CustomerDetails_user; disabled: boolean; onAddressManageClick: () => void; } -const CustomerAddresses = withStyles(styles, { name: "CustomerAddresses" })( - ({ - classes, - customer, - disabled, - onAddressManageClick - }: CustomerAddressesProps) => { - const intl = useIntl(); +const CustomerAddresses: React.FC = props => { + const { customer, disabled, onAddressManageClick } = props; + const classes = useStyles(props); - return ( - - - - - } - /> - {maybe(() => customer.defaultBillingAddress.id) !== - maybe(() => customer.defaultShippingAddress.id) ? ( - <> - {maybe(() => customer.defaultBillingAddress) !== null && ( - - - - - customer.defaultBillingAddress)} + const intl = useIntl(); + + return ( + + + + + } + /> + {maybe(() => customer.defaultBillingAddress.id) !== + maybe(() => customer.defaultShippingAddress.id) ? ( + <> + {maybe(() => customer.defaultBillingAddress) !== null && ( + + + - - )} - {maybe( - () => - customer.defaultBillingAddress && - customer.defaultShippingAddress - ) &&
} - {maybe(() => customer.defaultShippingAddress) && ( - - - - - customer.defaultShippingAddress)} - /> - - )} - - ) : maybe(() => customer.defaultBillingAddress) === null && - maybe(() => customer.defaultShippingAddress) === null ? ( - - - - - - ) : ( - - - + customer.defaultBillingAddress)} /> - - customer.defaultBillingAddress)} + + )} + {maybe( + () => + customer.defaultBillingAddress && customer.defaultShippingAddress + ) &&
} + {maybe(() => customer.defaultShippingAddress) && ( + + + + + customer.defaultShippingAddress)} + /> + + )} + + ) : maybe(() => customer.defaultBillingAddress) === null && + maybe(() => customer.defaultShippingAddress) === null ? ( + + + + + + ) : ( + + + - - )} - - ); - } -); + + customer.defaultBillingAddress)} + /> + + )} + + ); +}; CustomerAddresses.displayName = "CustomerAddresses"; export default CustomerAddresses; diff --git a/src/customers/components/CustomerCreateAddress/CustomerCreateAddress.tsx b/src/customers/components/CustomerCreateAddress/CustomerCreateAddress.tsx index efc42590a..9e43094cc 100644 --- a/src/customers/components/CustomerCreateAddress/CustomerCreateAddress.tsx +++ b/src/customers/components/CustomerCreateAddress/CustomerCreateAddress.tsx @@ -1,6 +1,6 @@ import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; -import { createStyles, WithStyles, withStyles } from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -12,13 +12,13 @@ import { SingleAutocompleteChoiceType } from "@saleor/components/SingleAutocompl import { FormErrors } from "../../../types"; import { AddressTypeInput } from "../../types"; -const styles = createStyles({ +const useStyles = makeStyles({ overflow: { overflow: "visible" } }); -export interface CustomerCreateAddressProps extends WithStyles { +export interface CustomerCreateAddressProps { countries: SingleAutocompleteChoiceType[]; countryDisplayName: string; data: AddressTypeInput; @@ -28,11 +28,8 @@ export interface CustomerCreateAddressProps extends WithStyles { onCountryChange(event: React.ChangeEvent); } -const CustomerCreateAddress = withStyles(styles, { - name: "CustomerCreateAddress" -})( - ({ - classes, +const CustomerCreateAddress: React.FC = props => { + const { countries, countryDisplayName, data, @@ -40,35 +37,36 @@ const CustomerCreateAddress = withStyles(styles, { errors, onChange, onCountryChange - }: CustomerCreateAddressProps) => { - const intl = useIntl(); + } = props; + const classes = useStyles(props); - return ( - - + + + + + + + - - - - - - - - - ); - } -); + + + ); +}; CustomerCreateAddress.displayName = "CustomerCreateAddress"; export default CustomerCreateAddress; diff --git a/src/customers/components/CustomerCreateDetails/CustomerCreateDetails.tsx b/src/customers/components/CustomerCreateDetails/CustomerCreateDetails.tsx index 35f9c727d..fa3c16910 100644 --- a/src/customers/components/CustomerCreateDetails/CustomerCreateDetails.tsx +++ b/src/customers/components/CustomerCreateDetails/CustomerCreateDetails.tsx @@ -1,11 +1,6 @@ import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; import React from "react"; import { useIntl } from "react-intl"; @@ -15,83 +10,75 @@ import { commonMessages } from "@saleor/intl"; import { FormErrors } from "../../../types"; import { CustomerCreatePageFormData } from "../CustomerCreatePage"; -const styles = theme => - createStyles({ - root: { - display: "grid", - gridColumnGap: theme.spacing(2), - gridRowGap: theme.spacing(3), - gridTemplateColumns: "1fr 1fr" - } - }); +const useStyles = makeStyles(theme => ({ + root: { + display: "grid", + gridColumnGap: theme.spacing(2), + gridRowGap: theme.spacing(3), + gridTemplateColumns: "1fr 1fr" + } +})); -export interface CustomerCreateDetailsProps extends WithStyles { +export interface CustomerCreateDetailsProps { data: CustomerCreatePageFormData; disabled: boolean; errors: FormErrors<"customerFirstName" | "customerLastName" | "email">; onChange: (event: React.ChangeEvent) => void; } -const CustomerCreateDetails = withStyles(styles, { - name: "CustomerCreateDetails" -})( - ({ - classes, - data, - disabled, - errors, - onChange - }: CustomerCreateDetailsProps) => { - const intl = useIntl(); +const CustomerCreateDetails: React.FC = props => { + const { data, disabled, errors, onChange } = props; + const classes = useStyles(props); - return ( - - - -
- - - -
- - - ); - } -); + const intl = useIntl(); + + return ( + + + +
+ + + +
+ + + ); +}; CustomerCreateDetails.displayName = "CustomerCreateDetails"; export default CustomerCreateDetails; diff --git a/src/customers/components/CustomerDetails/CustomerDetails.tsx b/src/customers/components/CustomerDetails/CustomerDetails.tsx index ae19a3ce0..5496ed387 100644 --- a/src/customers/components/CustomerDetails/CustomerDetails.tsx +++ b/src/customers/components/CustomerDetails/CustomerDetails.tsx @@ -1,11 +1,6 @@ import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; import Typography from "@material-ui/core/Typography"; import moment from "moment-timezone"; @@ -19,20 +14,19 @@ import Skeleton from "@saleor/components/Skeleton"; import { commonMessages } from "@saleor/intl"; import { CustomerDetails_user } from "../../types/CustomerDetails"; -const styles = theme => - createStyles({ - cardTitle: { - height: 64 - }, - root: { - display: "grid" as "grid", - gridColumnGap: theme.spacing(2), - gridRowGap: theme.spacing(3), - gridTemplateColumns: "1fr 1fr" - } - }); +const useStyles = makeStyles(theme => ({ + cardTitle: { + height: 64 + }, + root: { + display: "grid" as "grid", + gridColumnGap: theme.spacing(2), + gridRowGap: theme.spacing(3), + gridTemplateColumns: "1fr 1fr" + } +})); -export interface CustomerDetailsProps extends WithStyles { +export interface CustomerDetailsProps { customer: CustomerDetails_user; data: { firstName: string; @@ -51,107 +45,101 @@ export interface CustomerDetailsProps extends WithStyles { onChange: (event: React.ChangeEvent) => void; } -const CustomerDetails = withStyles(styles, { name: "CustomerDetails" })( - ({ - classes, - customer, - data, - disabled, - errors, - onChange - }: CustomerDetailsProps) => { - const intl = useIntl(); +const CustomerDetails: React.FC = props => { + const { customer, data, disabled, errors, onChange } = props; + const classes = useStyles(props); - return ( - - - - {customer && customer.dateJoined ? ( - - - - ) : ( - - )} - - } + const intl = useIntl(); + + return ( + + + + {customer && customer.dateJoined ? ( + + + + ) : ( + + )} + + } + /> + + - - - -
- - -
- + +
- - - - ); - } -); +
+ + + + + + + ); +}; CustomerDetails.displayName = "CustomerDetails"; export default CustomerDetails; diff --git a/src/customers/components/CustomerList/CustomerList.tsx b/src/customers/components/CustomerList/CustomerList.tsx index e85d3be31..6452f48b1 100644 --- a/src/customers/components/CustomerList/CustomerList.tsx +++ b/src/customers/components/CustomerList/CustomerList.tsx @@ -1,9 +1,4 @@ -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +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"; @@ -20,39 +15,34 @@ import { getUserName, maybe, renderCollection } from "@saleor/misc"; import { ListActions, ListProps } from "@saleor/types"; import { ListCustomers_customers_edges_node } from "../../types/ListCustomers"; -const styles = theme => - createStyles({ - [theme.breakpoints.up("lg")]: { - colEmail: {}, - colName: {}, - colOrders: { - width: 200 - } - }, +const useStyles = makeStyles(theme => ({ + [theme.breakpoints.up("lg")]: { colEmail: {}, - colName: { - paddingLeft: 0 - }, + colName: {}, colOrders: { - textAlign: "center" - }, - tableRow: { - cursor: "pointer" + width: 200 } - }); + }, + colEmail: {}, + colName: { + paddingLeft: 0 + }, + colOrders: { + textAlign: "center" + }, + tableRow: { + cursor: "pointer" + } +})); -export interface CustomerListProps - extends ListProps, - ListActions, - WithStyles { +export interface CustomerListProps extends ListProps, ListActions { customers: ListCustomers_customers_edges_node[]; } const numberOfColumns = 4; -const CustomerList = withStyles(styles, { name: "CustomerList" })( - ({ - classes, +const CustomerList: React.FC = props => { + const { settings, disabled, customers, @@ -66,7 +56,11 @@ const CustomerList = withStyles(styles, { name: "CustomerList" })( toggleAll, selected, isChecked - }: CustomerListProps) => ( + } = props; + + const classes = useStyles(props); + + return (
- ) -); + ); +}; CustomerList.displayName = "CustomerList"; export default CustomerList; diff --git a/src/customers/components/CustomerOrders/CustomerOrders.tsx b/src/customers/components/CustomerOrders/CustomerOrders.tsx index 61a8cb392..254d17e88 100644 --- a/src/customers/components/CustomerOrders/CustomerOrders.tsx +++ b/src/customers/components/CustomerOrders/CustomerOrders.tsx @@ -1,6 +1,6 @@ import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; -import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles"; +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"; @@ -17,7 +17,7 @@ import StatusLabel from "@saleor/components/StatusLabel"; import { maybe, renderCollection, transformPaymentStatus } from "../../../misc"; import { CustomerDetails_user_orders_edges_node } from "../../types/CustomerDetails"; -const styles = createStyles({ +const useStyles = makeStyles({ link: { cursor: "pointer" }, @@ -26,134 +26,127 @@ const styles = createStyles({ } }); -export interface CustomerOrdersProps extends WithStyles { +export interface CustomerOrdersProps { orders: CustomerDetails_user_orders_edges_node[]; onViewAllOrdersClick: () => void; onRowClick: (id: string) => void; } -const CustomerOrders = withStyles(styles, { name: "CustomerOrders" })( - ({ - classes, - orders, - onRowClick, - onViewAllOrdersClick - }: CustomerOrdersProps) => { - const intl = useIntl(); +const CustomerOrders: React.FC = props => { + const { orders, onRowClick, onViewAllOrdersClick } = props; + const classes = useStyles(props); - const orderList = orders - ? orders.map(order => ({ - ...order, - paymentStatus: transformPaymentStatus(order.paymentStatus, intl) - })) - : undefined; - return ( - - + const intl = useIntl(); + + const orderList = orders + ? orders.map(order => ({ + ...order, + paymentStatus: transformPaymentStatus(order.paymentStatus, intl) + })) + : undefined; + return ( + + + + + } + /> + + + + - - } - /> -
- - - - - - - - - - - - - - - - - - {renderCollection( - orderList, - order => ( - onRowClick(order.id) : undefined} - key={order ? order.id : "skeleton"} - > - - {maybe(() => order.number) ? ( - "#" + order.number - ) : ( - - )} - - - {maybe(() => order.created) ? ( - - ) : ( - - )} - - - {maybe(() => order.paymentStatus.status) !== undefined ? ( - order.paymentStatus.status === null ? null : ( - - ) - ) : ( - - )} - - - {maybe(() => order.total.gross) ? ( - - ) : ( - - )} - - - ), - () => ( - - - - - - ) - )} - -
- - ); - } -); + + + + + + + + + + + + + + {renderCollection( + orderList, + order => ( + onRowClick(order.id) : undefined} + key={order ? order.id : "skeleton"} + > + + {maybe(() => order.number) ? ( + "#" + order.number + ) : ( + + )} + + + {maybe(() => order.created) ? ( + + ) : ( + + )} + + + {maybe(() => order.paymentStatus.status) !== undefined ? ( + order.paymentStatus.status === null ? null : ( + + ) + ) : ( + + )} + + + {maybe(() => order.total.gross) ? ( + + ) : ( + + )} + + + ), + () => ( + + + + + + ) + )} + + + + ); +}; + CustomerOrders.displayName = "CustomerOrders"; export default CustomerOrders; diff --git a/src/customers/components/CustomerStats/CustomerStats.tsx b/src/customers/components/CustomerStats/CustomerStats.tsx index 123ce8caf..f751782ce 100644 --- a/src/customers/components/CustomerStats/CustomerStats.tsx +++ b/src/customers/components/CustomerStats/CustomerStats.tsx @@ -1,11 +1,6 @@ import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -17,75 +12,72 @@ import Skeleton from "@saleor/components/Skeleton"; import { maybe } from "../../../misc"; import { CustomerDetails_user } from "../../types/CustomerDetails"; -const styles = theme => - createStyles({ - label: { - marginBottom: theme.spacing(1) - }, - value: { - fontSize: 24 - } - }); +const useStyles = makeStyles(theme => ({ + label: { + marginBottom: theme.spacing(1) + }, + value: { + fontSize: 24 + } +})); -export interface CustomerStatsProps extends WithStyles { +export interface CustomerStatsProps { customer: CustomerDetails_user; } -const CustomerStats = withStyles(styles, { name: "CustomerStats" })( - ({ classes, customer }: CustomerStatsProps) => { - const intl = useIntl(); +const CustomerStats: React.FC = props => { + const { customer } = props; + const classes = useStyles(props); - return ( - - - - - - - {maybe( - () => ( - - {customer.lastLogin === null ? ( - "-" - ) : ( - - )} - - ), - - )} - -
- - - - - {maybe( - () => ( - - {customer.lastPlacedOrder.edges.length === 0 ? ( - "-" - ) : ( - - )} - - ), - - )} - - - ); - } -); + const intl = useIntl(); + + return ( + + + + + + + {maybe( + () => ( + + {customer.lastLogin === null ? ( + "-" + ) : ( + + )} + + ), + + )} + +
+ + + + + {maybe( + () => ( + + {customer.lastPlacedOrder.edges.length === 0 ? ( + "-" + ) : ( + + )} + + ), + + )} + + + ); +}; CustomerStats.displayName = "CustomerStats"; export default CustomerStats; diff --git a/src/discounts/components/DiscountCategories/DiscountCategories.tsx b/src/discounts/components/DiscountCategories/DiscountCategories.tsx index 74a5faf00..c7e60843a 100644 --- a/src/discounts/components/DiscountCategories/DiscountCategories.tsx +++ b/src/discounts/components/DiscountCategories/DiscountCategories.tsx @@ -1,12 +1,7 @@ import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; import IconButton from "@material-ui/core/IconButton"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +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"; @@ -32,33 +27,30 @@ export interface DiscountCategoriesProps extends ListProps, ListActions { onCategoryUnassign: (id: string) => void; } -const styles = theme => - createStyles({ - iconCell: { - "&:last-child": { - paddingRight: 0 - }, - width: 48 + theme.spacing(.5) +const useStyles = makeStyles(theme => ({ + iconCell: { + "&:last-child": { + paddingRight: 0 }, - tableRow: { - cursor: "pointer" - }, - textRight: { - textAlign: "right" - }, - wideColumn: { - width: "60%" - } - }); + width: 48 + theme.spacing(0.5) + }, + tableRow: { + cursor: "pointer" + }, + textRight: { + textAlign: "right" + }, + wideColumn: { + width: "60%" + } +})); const numberOfColumns = 4; -const DiscountCategories = withStyles(styles, { - name: "DiscountCategories" -})( - ({ +const DiscountCategories: React.FC = props => { + const { discount: sale, - classes, + disabled, pageInfo, onCategoryAssign, @@ -71,123 +63,119 @@ const DiscountCategories = withStyles(styles, { toggleAll, selected, isChecked - }: DiscountCategoriesProps & WithStyles) => { - const intl = useIntl(); + } = props; + const classes = useStyles(props); - return ( - - + const intl = useIntl(); + + return ( + + + + + } + /> + + sale.categories.edges.map(edge => edge.node))} + toggleAll={toggleAll} + toolbar={toolbar} + > + <> + + + + - - } - /> -
- sale.categories.edges.map(edge => edge.node))} - toggleAll={toggleAll} - toolbar={toolbar} - > - <> - - - - - - - - - - - - - - - - {renderCollection( - maybe(() => sale.categories.edges.map(edge => edge.node)), - category => { - const isSelected = category ? isChecked(category.id) : false; + + + + + + + + + + + {renderCollection( + maybe(() => sale.categories.edges.map(edge => edge.node)), + category => { + const isSelected = category ? isChecked(category.id) : false; - return ( - - - toggle(category.id)} - /> - - - {maybe( - () => category.name, - - )} - - - {maybe( - () => category.products.totalCount, - - )} - - - { - event.stopPropagation(); - onCategoryUnassign(category.id); - }} - > - - - - - ); - }, - () => ( - - - + return ( + + + toggle(category.id)} + /> + + + {maybe(() => category.name, )} + + + {maybe( + () => category.products.totalCount, + + )} + + + { + event.stopPropagation(); + onCategoryUnassign(category.id); + }} + > + + - ) - )} - -
- - ); - } -); + ); + }, + () => ( + + + + + + ) + )} + + + + ); +}; DiscountCategories.displayName = "DiscountCategories"; export default DiscountCategories; diff --git a/src/discounts/components/DiscountCollections/DiscountCollections.tsx b/src/discounts/components/DiscountCollections/DiscountCollections.tsx index e1898ecbd..b903b2cee 100644 --- a/src/discounts/components/DiscountCollections/DiscountCollections.tsx +++ b/src/discounts/components/DiscountCollections/DiscountCollections.tsx @@ -1,12 +1,7 @@ import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; import IconButton from "@material-ui/core/IconButton"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +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"; @@ -32,33 +27,30 @@ export interface DiscountCollectionsProps extends ListProps, ListActions { onCollectionUnassign: (id: string) => void; } -const styles = theme => - createStyles({ - iconCell: { - "&:last-child": { - paddingRight: 0 - }, - width: 48 + theme.spacing(.5) +const useStyles = makeStyles(theme => ({ + iconCell: { + "&:last-child": { + paddingRight: 0 }, - tableRow: { - cursor: "pointer" - }, - textRight: { - textAlign: "right" - }, - wideColumn: { - width: "60%" - } - }); + width: 48 + theme.spacing(0.5) + }, + tableRow: { + cursor: "pointer" + }, + textRight: { + textAlign: "right" + }, + wideColumn: { + width: "60%" + } +})); const numberOfColumns = 4; -const DiscountCollections = withStyles(styles, { - name: "DiscountCollections" -})( - ({ +const DiscountCollections: React.FC = props => { + const { discount: sale, - classes, + disabled, pageInfo, onCollectionAssign, @@ -71,122 +63,119 @@ const DiscountCollections = withStyles(styles, { toggle, toggleAll, toolbar - }: DiscountCollectionsProps & WithStyles) => { - const intl = useIntl(); + } = props; + const classes = useStyles(props); - return ( - - - - - } - /> - - sale.collections.edges.map(edge => edge.node))} - toggleAll={toggleAll} - toolbar={toolbar} - > - - - - - - - - - - - - - - - {renderCollection( - maybe(() => sale.collections.edges.map(edge => edge.node)), - collection => { - const isSelected = collection - ? isChecked(collection.id) - : false; - return ( - - - toggle(collection.id)} - /> - - - {maybe( - () => collection.name, - - )} - - - {maybe( - () => collection.products.totalCount, - - )} - - - { - event.stopPropagation(); - onCollectionUnassign(collection.id); - }} - > - - - - - ); - }, - () => ( - - - + const intl = useIntl(); + + return ( + + + + + } + /> +
+ sale.collections.edges.map(edge => edge.node))} + toggleAll={toggleAll} + toolbar={toolbar} + > + + + + + + + + + + + + + + + {renderCollection( + maybe(() => sale.collections.edges.map(edge => edge.node)), + collection => { + const isSelected = collection ? isChecked(collection.id) : false; + return ( + + + toggle(collection.id)} + /> + + + {maybe( + () => collection.name, + + )} + + + {maybe( + () => collection.products.totalCount, + + )} + + + { + event.stopPropagation(); + onCollectionUnassign(collection.id); + }} + > + + - ) - )} - -
- - ); - } -); + ); + }, + () => ( + + + + + + ) + )} + + + + ); +}; DiscountCollections.displayName = "DiscountCollections"; export default DiscountCollections; diff --git a/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx b/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx index 9e8e8e1c8..5a865c866 100644 --- a/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx +++ b/src/discounts/components/DiscountCountrySelectDialog/DiscountCountrySelectDialog.tsx @@ -3,12 +3,7 @@ import Dialog from "@material-ui/core/Dialog"; import DialogActions from "@material-ui/core/DialogActions"; import DialogContent from "@material-ui/core/DialogContent"; import DialogTitle from "@material-ui/core/DialogTitle"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +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"; @@ -45,158 +40,154 @@ export interface DiscountCountrySelectDialogProps { onConfirm: (data: FormData) => void; } -const styles = theme => - createStyles({ - checkboxCell: { - paddingLeft: 0 - }, - container: { - maxHeight: 500 - }, - heading: { - marginBottom: theme.spacing(2), - marginTop: theme.spacing(2) - }, - wideCell: { - width: "100%" - } - }); -const DiscountCountrySelectDialog = withStyles(styles, { - name: "DiscountCountrySelectDialog" -})( - ({ - classes, +const useStyles = makeStyles(theme => ({ + checkboxCell: { + paddingLeft: 0 + }, + container: { + maxHeight: 500 + }, + heading: { + marginBottom: theme.spacing(2), + marginTop: theme.spacing(2) + }, + wideCell: { + width: "100%" + } +})); +const DiscountCountrySelectDialog: React.FC< + DiscountCountrySelectDialogProps +> = props => { + const { confirmButtonState, onClose, countries, open, initial, onConfirm - }: DiscountCountrySelectDialogProps & WithStyles) => { - const intl = useIntl(); + } = props; + const classes = useStyles(props); - const initialForm: FormData = { - allCountries: true, - countries: initial, - query: "" - }; - return ( - -
- {({ data, change }) => { - const countrySelectionMap = countries.reduce((acc, country) => { - acc[country.code] = !!data.countries.find( - selectedCountries => selectedCountries === country.code - ); - return acc; - }, {}); + const intl = useIntl(); - return ( - <> - - - - - - - - - change(event, () => fetch(data.query))} - label={intl.formatMessage({ - defaultMessage: "Filter Countries", - description: "search box label" - })} - placeholder={intl.formatMessage({ - defaultMessage: "Search by country name", - description: "search box placeholder" - })} - fullWidth - /> - -
- - - - - - - {filter(countries, data.query, { - key: "country" - }).map(country => { - const isChecked = countrySelectionMap[country.code]; - - return ( - - - {country.country} - - - - isChecked - ? change({ - target: { - name: "countries" as keyof FormData, - value: data.countries.filter( - selectedCountries => - selectedCountries !== country.code - ) - } - } as any) - : change({ - target: { - name: "countries" as keyof FormData, - value: [ - ...data.countries, - country.code - ] - } - } as any) - } - /> - - - ); - })} - -
- - - - - - - - + const initialForm: FormData = { + allCountries: true, + countries: initial, + query: "" + }; + return ( + + + {({ data, change }) => { + const countrySelectionMap = countries.reduce((acc, country) => { + acc[country.code] = !!data.countries.find( + selectedCountries => selectedCountries === country.code ); - }} - -
- ); - } -); + return acc; + }, {}); + + return ( + <> + + + + + + + + + change(event, () => fetch(data.query))} + label={intl.formatMessage({ + defaultMessage: "Filter Countries", + description: "search box label" + })} + placeholder={intl.formatMessage({ + defaultMessage: "Search by country name", + description: "search box placeholder" + })} + fullWidth + /> + +
+ + + + + + + {filter(countries, data.query, { + key: "country" + }).map(country => { + const isChecked = countrySelectionMap[country.code]; + + return ( + + + {country.country} + + + + isChecked + ? change({ + target: { + name: "countries" as keyof FormData, + value: data.countries.filter( + selectedCountries => + selectedCountries !== country.code + ) + } + } as any) + : change({ + target: { + name: "countries" as keyof FormData, + value: [...data.countries, country.code] + } + } as any) + } + /> + + + ); + })} + +
+ + + + + + + + + ); + }} + + + ); +}; DiscountCountrySelectDialog.displayName = "DiscountCountrySelectDialog"; export default DiscountCountrySelectDialog; diff --git a/src/discounts/components/DiscountCountrySelectDialog/index.ts b/src/discounts/components/DiscountCountrySelectDialog/index.ts index cbbee8a48..c76469875 100644 --- a/src/discounts/components/DiscountCountrySelectDialog/index.ts +++ b/src/discounts/components/DiscountCountrySelectDialog/index.ts @@ -1,2 +1,2 @@ -export { default } from './DiscountCountrySelectDialog'; -export * from './DiscountCountrySelectDialog'; \ No newline at end of file +export { default } from "./DiscountCountrySelectDialog"; +export * from "./DiscountCountrySelectDialog"; diff --git a/src/discounts/components/DiscountProducts/DiscountProducts.tsx b/src/discounts/components/DiscountProducts/DiscountProducts.tsx index 727b681aa..a2436d017 100644 --- a/src/discounts/components/DiscountProducts/DiscountProducts.tsx +++ b/src/discounts/components/DiscountProducts/DiscountProducts.tsx @@ -1,12 +1,7 @@ import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; import IconButton from "@material-ui/core/IconButton"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +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"; @@ -36,43 +31,40 @@ export interface SaleProductsProps extends ListProps, ListActions { onProductUnassign: (id: string) => void; } -const styles = theme => - createStyles({ - colActions: { - "&:last-child": { - paddingRight: 0 - }, - width: 76 + theme.spacing(.5) +const useStyles = makeStyles(theme => ({ + colActions: { + "&:last-child": { + paddingRight: 0 }, - colName: { - paddingLeft: 0, - width: "auto" - }, - colNameLabel: { - marginLeft: AVATAR_MARGIN - }, - colPublished: { - width: 150 - }, - colType: { - width: 200 - }, - table: { - tableLayout: "fixed" - }, - tableRow: { - cursor: "pointer" - } - }); + width: 76 + theme.spacing(0.5) + }, + colName: { + paddingLeft: 0, + width: "auto" + }, + colNameLabel: { + marginLeft: AVATAR_MARGIN + }, + colPublished: { + width: 150 + }, + colType: { + width: 200 + }, + table: { + tableLayout: "fixed" + }, + tableRow: { + cursor: "pointer" + } +})); const numberOfColumns = 5; -const DiscountProducts = withStyles(styles, { - name: "DiscountProducts" -})( - ({ +const DiscountProducts: React.FC = props => { + const { discount: sale, - classes, + disabled, pageInfo, onRowClick, @@ -85,145 +77,144 @@ const DiscountProducts = withStyles(styles, { toggle, toggleAll, toolbar - }: SaleProductsProps & WithStyles) => { - const intl = useIntl(); + } = props; + const classes = useStyles(props); - return ( - - - - - } - /> - - sale.products.edges.map(edge => edge.node))} - toggleAll={toggleAll} - toolbar={toolbar} - > - - - - - - - - - - - - - - - - - - - - {renderCollection( - maybe(() => sale.products.edges.map(edge => edge.node)), - product => { - const isSelected = product ? isChecked(product.id) : false; - return ( - + + + + } + /> +
+ sale.products.edges.map(edge => edge.node))} + toggleAll={toggleAll} + toolbar={toolbar} + > + + + + + + + + + + + + + + + + + + + + {renderCollection( + maybe(() => sale.products.edges.map(edge => edge.node)), + product => { + const isSelected = product ? isChecked(product.id) : false; + return ( + + + toggle(product.id)} + /> + + product.thumbnail.url)} > - - toggle(product.id)} + {maybe(() => product.name, )} + + + {maybe( + () => product.productType.name, + + )} + + + {product && product.isPublished !== undefined ? ( + - - product.thumbnail.url)} + ) : ( + + )} + + + { + event.stopPropagation(); + onProductUnassign(product.id); + }} > - {maybe(() => product.name, )} - - - {maybe( - () => product.productType.name, - - )} - - - {product && product.isPublished !== undefined ? ( - - ) : ( - - )} - - - { - event.stopPropagation(); - onProductUnassign(product.id); - }} - > - - - - - ); - }, - () => ( - - - + + - ) - )} - -
- - ); - } -); + ); + }, + () => ( + + + + + + ) + )} + + + + ); +}; DiscountProducts.displayName = "DiscountProducts"; export default DiscountProducts; diff --git a/src/discounts/components/SaleList/SaleList.tsx b/src/discounts/components/SaleList/SaleList.tsx index 52e5a43ae..5cdcedae1 100644 --- a/src/discounts/components/SaleList/SaleList.tsx +++ b/src/discounts/components/SaleList/SaleList.tsx @@ -1,9 +1,4 @@ -import { - createStyles, - Theme, - WithStyles, - withStyles -} from "@material-ui/core/styles"; +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"; @@ -29,44 +24,40 @@ export interface SaleListProps extends ListProps, ListActions { sales: SaleList_sales_edges_node[]; } -const styles = theme => - createStyles({ - [theme.breakpoints.up("lg")]: { - colEnd: { - width: 250 - }, - colName: {}, - colStart: { - width: 250 - }, - colValue: { - width: 200 - } - }, +const useStyles = makeStyles(theme => ({ + [theme.breakpoints.up("lg")]: { colEnd: { - textAlign: "right" - }, - colName: { - paddingLeft: 0 + width: 250 }, + colName: {}, colStart: { - textAlign: "right" + width: 250 }, colValue: { - textAlign: "right" - }, - tableRow: { - cursor: "pointer" + width: 200 } - }); + }, + colEnd: { + textAlign: "right" + }, + colName: { + paddingLeft: 0 + }, + colStart: { + textAlign: "right" + }, + colValue: { + textAlign: "right" + }, + tableRow: { + cursor: "pointer" + } +})); const numberOfColumns = 5; -const SaleList = withStyles(styles, { - name: "SaleList" -})( - ({ - classes, +const SaleList: React.FC = props => { + const { settings, defaultCurrency, disabled, @@ -81,7 +72,11 @@ const SaleList = withStyles(styles, { toggle, toggleAll, toolbar - }: SaleListProps & WithStyles) => ( + } = props; + + const classes = useStyles(props); + + return (
- ) -); + ); +}; SaleList.displayName = "SaleList"; export default SaleList; diff --git a/src/discounts/components/VoucherCreatePage/index.ts b/src/discounts/components/VoucherCreatePage/index.ts index b38cb8083..b8c177c64 100644 --- a/src/discounts/components/VoucherCreatePage/index.ts +++ b/src/discounts/components/VoucherCreatePage/index.ts @@ -1,2 +1,2 @@ -export { default } from './VoucherCreatePage'; -export * from './VoucherCreatePage'; \ No newline at end of file +export { default } from "./VoucherCreatePage"; +export * from "./VoucherCreatePage"; diff --git a/src/discounts/components/VoucherList/VoucherList.tsx b/src/discounts/components/VoucherList/VoucherList.tsx index b517d75d9..9ed3c1974 100644 --- a/src/discounts/components/VoucherList/VoucherList.tsx +++ b/src/discounts/components/VoucherList/VoucherList.tsx @@ -1,9 +1,4 @@ -import { - createStyles, - Theme, - WithStyles, - withStyles -} from "@material-ui/core/styles"; +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"; @@ -29,59 +24,55 @@ export interface VoucherListProps extends ListProps, ListActions { vouchers: VoucherList_vouchers_edges_node[]; } -const styles = theme => - createStyles({ - [theme.breakpoints.up("lg")]: { - colEnd: { - width: 180 - }, - colMinSpent: { - width: 150 - }, - colName: {}, - colStart: { - width: 180 - }, - colUses: { - width: 150 - }, - colValue: { - width: 150 - } - }, +const useStyles = makeStyles(theme => ({ + [theme.breakpoints.up("lg")]: { colEnd: { - textAlign: "right" + width: 180 }, colMinSpent: { - textAlign: "right" - }, - colName: { - paddingLeft: 0 + width: 150 }, + colName: {}, colStart: { - textAlign: "right" + width: 180 }, colUses: { - textAlign: "right" + width: 150 }, colValue: { - textAlign: "right" - }, - tableRow: { - cursor: "pointer" - }, - textRight: { - textAlign: "right" + width: 150 } - }); + }, + colEnd: { + textAlign: "right" + }, + colMinSpent: { + textAlign: "right" + }, + colName: { + paddingLeft: 0 + }, + colStart: { + textAlign: "right" + }, + colUses: { + textAlign: "right" + }, + colValue: { + textAlign: "right" + }, + tableRow: { + cursor: "pointer" + }, + textRight: { + textAlign: "right" + } +})); const numberOfColumns = 7; -const VoucherList = withStyles(styles, { - name: "VoucherList" -})( - ({ - classes, +const VoucherList: React.FC = props => { + const { settings, defaultCurrency, disabled, @@ -96,7 +87,11 @@ const VoucherList = withStyles(styles, { toggle, toggleAll, toolbar - }: VoucherListProps & WithStyles) => ( + } = props; + + const classes = useStyles(props); + + return (
- ) -); + ); +}; VoucherList.displayName = "VoucherList"; export default VoucherList; diff --git a/src/home/components/HomeActivityCard/HomeActivityCard.tsx b/src/home/components/HomeActivityCard/HomeActivityCard.tsx index 252ee2317..e58b89faa 100644 --- a/src/home/components/HomeActivityCard/HomeActivityCard.tsx +++ b/src/home/components/HomeActivityCard/HomeActivityCard.tsx @@ -2,7 +2,7 @@ import Card from "@material-ui/core/Card"; import List from "@material-ui/core/List"; import ListItem from "@material-ui/core/ListItem"; import ListItemText from "@material-ui/core/ListItemText"; -import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -14,7 +14,7 @@ import { renderCollection } from "../../../misc"; import { Home_activities_edges_node } from "../../types/Home"; import { getActivityMessage } from "./activityMessages"; -const styles = createStyles({ +const useStyles = makeStyles({ loadingProducts: { paddingBottom: "10px", paddingTop: "10px" @@ -25,65 +25,66 @@ const styles = createStyles({ } }); -interface HomeActivityCardProps extends WithStyles { +interface HomeActivityCardProps { activities: Home_activities_edges_node[]; } -const HomeActivityCard = withStyles(styles, { name: "HomeActivityCard" })( - ({ classes, activities }: HomeActivityCardProps) => { - const intl = useIntl(); +const HomeActivityCard: React.FC = props => { + const { activities } = props; + const classes = useStyles(props); - return ( - - - - {renderCollection( - activities, - (activity, activityId) => ( - - {activity ? ( - - {getActivityMessage(activity, intl)} - - } - secondary={} - /> - ) : ( - - - - - - )} - - ), - () => ( - + const intl = useIntl(); + + return ( + + + + {renderCollection( + activities, + (activity, activityId) => ( + + {activity ? ( - + {getActivityMessage(activity, intl)} } + secondary={} /> - - ) - )} - - - ); - } -); + ) : ( + + + + + + )} + + ), + () => ( + + + + + } + /> + + ) + )} + + + ); +}; HomeActivityCard.displayName = "HomeActivityCard"; export default HomeActivityCard; diff --git a/src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx b/src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx index e43f1ff04..be53ce9e1 100644 --- a/src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx +++ b/src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx @@ -1,68 +1,66 @@ import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; import { IconProps } from "@material-ui/core/Icon"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import React from "react"; import { FormattedMessage } from "react-intl"; -const styles = theme => - createStyles({ - cardContent: { - "&:last-child": { - padding: theme.spacing(2, 3) - }, - display: "grid", - gridColumnGap: theme.spacing(3), - gridTemplateColumns: "1fr 64px" +const useStyles = makeStyles(theme => ({ + cardContent: { + "&:last-child": { + padding: theme.spacing(2, 3) }, - cardSpacing: { - [theme.breakpoints.down("sm")]: { - marginBottom: theme.spacing(1) - }, - marginBottom: theme.spacing(3) + display: "grid", + gridColumnGap: theme.spacing(3), + gridTemplateColumns: "1fr 64px" + }, + cardSpacing: { + [theme.breakpoints.down("sm")]: { + marginBottom: theme.spacing(1) }, - cardSubtitle: { - fontSize: 12, - height: "20px", - lineHeight: 0.9 - }, - cardTitle: { - fontSize: 20, - fontWeight: 500 as 500 - }, - icon: { - color: theme.palette.primary.contrastText, - fontSize: 54, - margin: ".5rem .3rem" - }, - iconBackground: { - backgroundColor: theme.palette.background.default, - borderRadius: "8px", - color: "white", - fontSize: "54px", - height: "100%", - padding: "10px 5px 0px 5px", - width: "100%" - }, - value: { - textAlign: "right" - } - }); + marginBottom: theme.spacing(3) + }, + cardSubtitle: { + fontSize: 12, + height: "20px", + lineHeight: 0.9 + }, + cardTitle: { + fontSize: 20, + fontWeight: 500 as 500 + }, + icon: { + color: theme.palette.primary.contrastText, + fontSize: 54, + margin: ".5rem .3rem" + }, + iconBackground: { + backgroundColor: theme.palette.background.default, + borderRadius: "8px", + color: "white", + fontSize: "54px", + height: "100%", + padding: "10px 5px 0px 5px", + width: "100%" + }, + value: { + textAlign: "right" + } +})); -interface HomeAnalyticsCardProps extends WithStyles { +interface HomeAnalyticsCardProps { icon: React.ReactElement; title: string; children?: React.ReactNode; } -const HomeAnalyticsCard = withStyles(styles, { name: "HomeAnalyticsCard" })( - ({ children, classes, title, icon }: HomeAnalyticsCardProps) => ( +const HomeAnalyticsCard: React.FC = props => { + const { children, title, icon } = props; + + const classes = useStyles(props); + + return (
@@ -90,7 +88,7 @@ const HomeAnalyticsCard = withStyles(styles, { name: "HomeAnalyticsCard" })(
{icon}
- ) -); + ); +}; HomeAnalyticsCard.displayName = "HomeAnalyticsCard"; export default HomeAnalyticsCard; diff --git a/src/home/components/HomeHeader/HomeHeader.tsx b/src/home/components/HomeHeader/HomeHeader.tsx index 97da6490f..fb61e5a77 100644 --- a/src/home/components/HomeHeader/HomeHeader.tsx +++ b/src/home/components/HomeHeader/HomeHeader.tsx @@ -1,34 +1,32 @@ -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import React from "react"; import { FormattedMessage } from "react-intl"; import Skeleton from "@saleor/components/Skeleton"; -const styles = theme => - createStyles({ - headerContainer: { - marginBottom: theme.spacing(3) - }, - pageHeader: { - fontWeight: 600 as 600 - }, - subtitle: { - color: theme.typography.caption.color - } - }); +const useStyles = makeStyles(theme => ({ + headerContainer: { + marginBottom: theme.spacing(3) + }, + pageHeader: { + fontWeight: 600 as 600 + }, + subtitle: { + color: theme.typography.caption.color + } +})); -interface HomeOrdersCardProps extends WithStyles { +interface HomeOrdersCardProps { userName: string; } -const HomeOrdersCard = withStyles(styles, { name: "HomeOrdersCard" })( - ({ classes, userName }: HomeOrdersCardProps) => ( +const HomeOrdersCard: React.FC = props => { + const { userName } = props; + + const classes = useStyles(props); + + return (
{userName ? ( @@ -56,7 +54,7 @@ const HomeOrdersCard = withStyles(styles, { name: "HomeOrdersCard" })( )}
- ) -); + ); +}; HomeOrdersCard.displayName = "HomeOrdersCard"; export default HomeOrdersCard; diff --git a/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx b/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx index 2a78ee0a1..f7c311d69 100644 --- a/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx +++ b/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx @@ -1,10 +1,5 @@ import Card from "@material-ui/core/Card"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +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"; @@ -19,15 +14,14 @@ import Skeleton from "@saleor/components/Skeleton"; import { UserPermissionProps } from "@saleor/types"; import { PermissionEnum } from "@saleor/types/globalTypes"; -const styles = theme => - createStyles({ - arrowIcon: { - width: theme.spacing(4) - }, - tableRow: { - cursor: "pointer" - } - }); +const useStyles = makeStyles(theme => ({ + arrowIcon: { + width: theme.spacing(4) + }, + tableRow: { + cursor: "pointer" + } +})); interface HomeNotificationTableProps extends UserPermissionProps { ordersToCapture: number; @@ -38,11 +32,8 @@ interface HomeNotificationTableProps extends UserPermissionProps { onProductsOutOfStockClick: () => void; } -const HomeNotificationTable = withStyles(styles, { - name: "HomeNotificationTable" -})( - ({ - classes, +const HomeNotificationTable: React.FC = props => { + const { onOrdersToCaptureClick, onOrdersToFulfillClick, onProductsOutOfStockClick, @@ -50,7 +41,11 @@ const HomeNotificationTable = withStyles(styles, { ordersToFulfill, productsOutOfStock, userPermissions - }: HomeNotificationTableProps & WithStyles) => ( + } = props; + + const classes = useStyles(props); + + return ( @@ -157,7 +152,7 @@ const HomeNotificationTable = withStyles(styles, {
- ) -); + ); +}; HomeNotificationTable.displayName = "HomeNotificationTable"; export default HomeNotificationTable; diff --git a/src/home/components/HomePage/HomePage.tsx b/src/home/components/HomePage/HomePage.tsx index 16664dc58..916ec647f 100644 --- a/src/home/components/HomePage/HomePage.tsx +++ b/src/home/components/HomePage/HomePage.tsx @@ -1,9 +1,4 @@ -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import React from "react"; import CardSpacer from "@saleor/components/CardSpacer"; @@ -27,20 +22,19 @@ import HomeHeader from "../HomeHeader"; import HomeNotificationTable from "../HomeNotificationTable/HomeNotificationTable"; import HomeProductListCard from "../HomeProductListCard"; -const styles = theme => - createStyles({ - cardContainer: { - display: "grid", - gridColumnGap: theme.spacing(3), - gridTemplateColumns: "1fr 1fr", - [theme.breakpoints.down("sm")]: { - gridColumnGap: theme.spacing(1) - }, - [theme.breakpoints.down("xs")]: { - gridTemplateColumns: "1fr" - } +const useStyles = makeStyles(theme => ({ + cardContainer: { + display: "grid", + gridColumnGap: theme.spacing(3), + gridTemplateColumns: "1fr 1fr", + [theme.breakpoints.down("sm")]: { + gridColumnGap: theme.spacing(1) + }, + [theme.breakpoints.down("xs")]: { + gridTemplateColumns: "1fr" } - }); + } +})); export interface HomePageProps extends UserPermissionProps { activities: Home_activities_edges_node[]; @@ -57,9 +51,8 @@ export interface HomePageProps extends UserPermissionProps { onProductsOutOfStockClick: () => void; } -const HomePage = withStyles(styles, { name: "HomePage" })( - ({ - classes, +const HomePage: React.FC = props => { + const { userName, orders, sales, @@ -73,7 +66,11 @@ const HomePage = withStyles(styles, { name: "HomePage" })( ordersToFulfill, productsOutOfStock, userPermissions - }: HomePageProps & WithStyles) => ( + } = props; + + const classes = useStyles(props); + + return ( @@ -140,7 +137,7 @@ const HomePage = withStyles(styles, { name: "HomePage" })(
- ) -); + ); +}; HomePage.displayName = "HomePage"; export default HomePage; diff --git a/src/home/components/HomeProductListCard/HomeProductListCard.tsx b/src/home/components/HomeProductListCard/HomeProductListCard.tsx index e1b50c2b2..215ad30d4 100644 --- a/src/home/components/HomeProductListCard/HomeProductListCard.tsx +++ b/src/home/components/HomeProductListCard/HomeProductListCard.tsx @@ -1,10 +1,5 @@ import Card from "@material-ui/core/Card"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +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"; @@ -21,133 +16,133 @@ import TableCellAvatar from "@saleor/components/TableCellAvatar"; import { maybe, renderCollection } from "../../../misc"; import { Home_productTopToday_edges_node } from "../../types/Home"; -const styles = theme => - createStyles({ - avatarProps: { - height: 64, - width: 64 - }, - avatarSpacing: { - paddingBottom: theme.spacing(2), - paddingRight: theme.spacing(), - paddingTop: theme.spacing(2) - }, - label: { - paddingLeft: 0 - }, - noProducts: { - paddingBottom: 20, - paddingTop: 20 - }, - tableRow: { - cursor: "pointer" - } - }); +const useStyles = makeStyles(theme => ({ + avatarProps: { + height: 64, + width: 64 + }, + avatarSpacing: { + paddingBottom: theme.spacing(2), + paddingRight: theme.spacing(), + paddingTop: theme.spacing(2) + }, + label: { + paddingLeft: 0 + }, + noProducts: { + paddingBottom: 20, + paddingTop: 20 + }, + tableRow: { + cursor: "pointer" + } +})); -interface HomeProductListProps extends WithStyles { +interface HomeProductListProps { topProducts: Home_productTopToday_edges_node[]; onRowClick: (productId: string, variantId: string) => void; } -export const HomeProductList = withStyles(styles, { name: "HomeProductList" })( - ({ classes, topProducts, onRowClick }: HomeProductListProps) => { - const intl = useIntl(); +export const HomeProductList: React.FC = props => { + const { topProducts, onRowClick } = props; + const classes = useStyles(props); - return ( - - - - - {renderCollection( - topProducts, - variant => ( - onRowClick(variant.product.id, variant.id) - : undefined - } - > - variant.product.thumbnail.url)} - avatarProps={classes.avatarProps} - /> + const intl = useIntl(); - - {variant ? ( - <> - - {variant.product.name} - - - {maybe(() => - variant.attributes - .map(attribute => attribute.value.name) - .join(" / ") - )} - - - +
+ + {renderCollection( + topProducts, + variant => ( + onRowClick(variant.product.id, variant.id) + : undefined + } + > + variant.product.thumbnail.url)} + avatarProps={classes.avatarProps} + /> + + + {variant ? ( + <> + + {variant.product.name} + + + {maybe(() => + variant.attributes + .map(attribute => attribute.value.name) + .join(" / ") + )} + + + - - - ) : ( + description="number of ordered products" + id="homeProductListCardOrders" + values={{ + amount: variant.quantityOrdered + }} + /> + + + ) : ( + + )} + + + + + {maybe( + () => ( + + ), )} - - - - - {maybe( - () => ( - - ), - - )} - - - - ), - () => ( - - - - - - - - ) - )} - -
- - ); - } -); + + + + ), + () => ( + + + + + + + + ) + )} + + + + ); +}; HomeProductList.displayName = "HomeProductList"; export default HomeProductList; diff --git a/src/icons/AccountCircle.tsx b/src/icons/AccountCircle.tsx index efe95777e..f7c28d096 100644 --- a/src/icons/AccountCircle.tsx +++ b/src/icons/AccountCircle.tsx @@ -1,7 +1,7 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const AccountCircle = createSvgIcon( +const AccountCircle = createSvgIcon( <> @@ -14,7 +14,8 @@ export const AccountCircle = createSvgIcon( /> - + , + "AccountCircle" ); -AccountCircle.displayName = "AccountCircle"; + export default AccountCircle; diff --git a/src/icons/ArrowDropdown.tsx b/src/icons/ArrowDropdown.tsx index a072df495..472d8fc0e 100644 --- a/src/icons/ArrowDropdown.tsx +++ b/src/icons/ArrowDropdown.tsx @@ -1,10 +1,11 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const NoPhoto = createSvgIcon( +const ArrowDropdown = createSvgIcon( - + , + "ArrowDropdown" ); -NoPhoto.displayName = "NoPhoto"; -export default NoPhoto; + +export default ArrowDropdown; diff --git a/src/icons/ArrowSort.tsx b/src/icons/ArrowSort.tsx index 8fd77f548..4455903c0 100644 --- a/src/icons/ArrowSort.tsx +++ b/src/icons/ArrowSort.tsx @@ -1,7 +1,7 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const ArrowSort = createSvgIcon( +const ArrowSort = createSvgIcon( <> -); -ArrowSort.displayName = "ArrowSort"; +, "ArrowSort") + export default ArrowSort; diff --git a/src/icons/Attributes.tsx b/src/icons/Attributes.tsx index ff3b99560..bf3fb437b 100644 --- a/src/icons/Attributes.tsx +++ b/src/icons/Attributes.tsx @@ -1,7 +1,7 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const Attributes = createSvgIcon( +const Attributes = createSvgIcon( <> -); -Attributes.displayName = "Attributes"; +, "Attributes") + export default Attributes; diff --git a/src/icons/Ballot.tsx b/src/icons/Ballot.tsx index 587c3379c..bb33bdb3c 100644 --- a/src/icons/Ballot.tsx +++ b/src/icons/Ballot.tsx @@ -1,7 +1,7 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const Ballot = createSvgIcon( +const Ballot = createSvgIcon( <> @@ -12,6 +12,6 @@ export const Ballot = createSvgIcon( -); -Ballot.displayName = "Ballot"; +, "Ballot") + export default Ballot; diff --git a/src/icons/BoldIcon.tsx b/src/icons/BoldIcon.tsx index 56a480e56..bbc865c18 100644 --- a/src/icons/BoldIcon.tsx +++ b/src/icons/BoldIcon.tsx @@ -1,10 +1,10 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const BoldIcon = createSvgIcon( +const BoldIcon = createSvgIcon( <> -); -BoldIcon.displayName = "BoldIcon"; +, "BoldIcon") + export default BoldIcon; diff --git a/src/icons/Bot.tsx b/src/icons/Bot.tsx index 926c20fe0..176688f6c 100644 --- a/src/icons/Bot.tsx +++ b/src/icons/Bot.tsx @@ -1,13 +1,13 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const Bot = createSvgIcon( +const Bot = createSvgIcon( -); -Bot.displayName = "Bot"; +, "Bot") + export default Bot; diff --git a/src/icons/Calendar.tsx b/src/icons/Calendar.tsx index 3df4eb749..abbf8ca86 100644 --- a/src/icons/Calendar.tsx +++ b/src/icons/Calendar.tsx @@ -22,7 +22,7 @@ export const Calendar = createSvgIcon( - + , + "Calendar" ); -Calendar.displayName = "Calendar"; export default Calendar; diff --git a/src/icons/Draggable.tsx b/src/icons/Draggable.tsx index 245d84a6f..e263aa752 100644 --- a/src/icons/Draggable.tsx +++ b/src/icons/Draggable.tsx @@ -1,7 +1,7 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const Draggable = createSvgIcon( +const Draggable = createSvgIcon( <> -); -Draggable.displayName = "Draggable"; +, "Draggable") + export default Draggable; diff --git a/src/icons/Folder.tsx b/src/icons/Folder.tsx index 74a16ed95..3267c949b 100644 --- a/src/icons/Folder.tsx +++ b/src/icons/Folder.tsx @@ -1,12 +1,12 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const Folder = createSvgIcon( +const Folder = createSvgIcon( <> -); -Folder.displayName = "Folder"; +, "Folder") + export default Folder; diff --git a/src/icons/HeaderOne.tsx b/src/icons/HeaderOne.tsx index 0d0d9eb07..1926b1e22 100644 --- a/src/icons/HeaderOne.tsx +++ b/src/icons/HeaderOne.tsx @@ -1,11 +1,11 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const HeaderOne = createSvgIcon( +const HeaderOne = createSvgIcon( <> -); -HeaderOne.displayName = "HeaderOne"; +, "HeaderOne") + export default HeaderOne; diff --git a/src/icons/HeaderThree.tsx b/src/icons/HeaderThree.tsx index f33495274..145256b38 100644 --- a/src/icons/HeaderThree.tsx +++ b/src/icons/HeaderThree.tsx @@ -1,11 +1,11 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const HeaderThree = createSvgIcon( +const HeaderThree = createSvgIcon( <> -); -HeaderThree.displayName = "HeaderThree"; +, "HeaderThree") + export default HeaderThree; diff --git a/src/icons/HeaderTwo.tsx b/src/icons/HeaderTwo.tsx index f2775da8f..a73ee3ff4 100644 --- a/src/icons/HeaderTwo.tsx +++ b/src/icons/HeaderTwo.tsx @@ -1,11 +1,11 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const HeaderTwo = createSvgIcon( +const HeaderTwo = createSvgIcon( <> -); -HeaderTwo.displayName = "HeaderTwo"; +, "HeaderTwo") + export default HeaderTwo; diff --git a/src/icons/Home.tsx b/src/icons/Home.tsx index 91b1fd8a7..3a06e35c4 100644 --- a/src/icons/Home.tsx +++ b/src/icons/Home.tsx @@ -1,12 +1,12 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const Home = createSvgIcon( +const Home = createSvgIcon( <> -); -Home.displayName = "Home"; +, "Home") + export default Home; diff --git a/src/icons/Image.tsx b/src/icons/Image.tsx index 00e4e9238..85256850b 100644 --- a/src/icons/Image.tsx +++ b/src/icons/Image.tsx @@ -1,7 +1,7 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const Image = createSvgIcon( +const Image = createSvgIcon( <> -); -Image.displayName = "Image"; +, "Image") + export default Image; diff --git a/src/icons/ItalicIcon.tsx b/src/icons/ItalicIcon.tsx index eb750528a..eaf45abdd 100644 --- a/src/icons/ItalicIcon.tsx +++ b/src/icons/ItalicIcon.tsx @@ -1,10 +1,10 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const ItalicIcon = createSvgIcon( +const ItalicIcon = createSvgIcon( <> -); -ItalicIcon.displayName = "ItalicIcon"; +, "ItalicIcon") + export default ItalicIcon; diff --git a/src/icons/LinkIcon.tsx b/src/icons/LinkIcon.tsx index 0865ae2a0..280970b39 100644 --- a/src/icons/LinkIcon.tsx +++ b/src/icons/LinkIcon.tsx @@ -1,10 +1,10 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const LinkIcon = createSvgIcon( +const LinkIcon = createSvgIcon( <> -); -LinkIcon.displayName = "LinkIcon"; +, "LinkIcon") + export default LinkIcon; diff --git a/src/icons/LocalShipping.tsx b/src/icons/LocalShipping.tsx index 6eab76ef3..c6e54804c 100644 --- a/src/icons/LocalShipping.tsx +++ b/src/icons/LocalShipping.tsx @@ -1,12 +1,12 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const LocalShipping = createSvgIcon( +const LocalShipping = createSvgIcon( <> -); -LocalShipping.displayName = "LocalShipping"; +, "LocalShipping") + export default LocalShipping; diff --git a/src/icons/Monetization.tsx b/src/icons/Monetization.tsx index b315a839d..d8a737c43 100644 --- a/src/icons/Monetization.tsx +++ b/src/icons/Monetization.tsx @@ -1,7 +1,7 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const Monetization = createSvgIcon( +const Monetization = createSvgIcon( <> @@ -9,6 +9,6 @@ export const Monetization = createSvgIcon( -); -Monetization.displayName = "Monetization"; +, "Monetization") + export default Monetization; diff --git a/src/icons/Moon.tsx b/src/icons/Moon.tsx index acbd52ee2..dbfddea6d 100644 --- a/src/icons/Moon.tsx +++ b/src/icons/Moon.tsx @@ -1,7 +1,7 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const Moon = createSvgIcon( +const Moon = createSvgIcon( <> -); -Moon.displayName = "Moon"; +, "Moon") + export default Moon; diff --git a/src/icons/Navigation.tsx b/src/icons/Navigation.tsx index 37056dad9..c128e30d2 100644 --- a/src/icons/Navigation.tsx +++ b/src/icons/Navigation.tsx @@ -1,7 +1,7 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const Navigation = createSvgIcon( +const Navigation = createSvgIcon( <> -); -Navigation.displayName = "Navigation"; +, "Navigation") + export default Navigation; diff --git a/src/icons/NoPhoto.tsx b/src/icons/NoPhoto.tsx index c83d77a73..33dda5582 100644 --- a/src/icons/NoPhoto.tsx +++ b/src/icons/NoPhoto.tsx @@ -1,10 +1,10 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const NoPhoto = createSvgIcon( +const NoPhoto = createSvgIcon( -); -NoPhoto.displayName = "NoPhoto"; +, "NoPhoto") + export default NoPhoto; diff --git a/src/icons/OrderedListIcon.tsx b/src/icons/OrderedListIcon.tsx index 95a76af22..76517b348 100644 --- a/src/icons/OrderedListIcon.tsx +++ b/src/icons/OrderedListIcon.tsx @@ -1,10 +1,10 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const OrderedListIcon = createSvgIcon( +const OrderedListIcon = createSvgIcon( <> -); -OrderedListIcon.displayName = "OrderedListIcon"; +, "OrderedListIcon") + export default OrderedListIcon; diff --git a/src/icons/Orders.tsx b/src/icons/Orders.tsx index 40cba08f6..aca432220 100644 --- a/src/icons/Orders.tsx +++ b/src/icons/Orders.tsx @@ -1,7 +1,7 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const Orders = createSvgIcon( +const Orders = createSvgIcon( <> -); -Orders.displayName = "Orders"; +, "Orders") + export default Orders; diff --git a/src/icons/Pages.tsx b/src/icons/Pages.tsx index 6db2775af..c4b010527 100644 --- a/src/icons/Pages.tsx +++ b/src/icons/Pages.tsx @@ -1,7 +1,7 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const Pages = createSvgIcon( +const Pages = createSvgIcon( <> -); -Pages.displayName = "Pages"; +, "Pages") + export default Pages; diff --git a/src/icons/Plugins.tsx b/src/icons/Plugins.tsx index c5b518de5..ef23371dc 100644 --- a/src/icons/Plugins.tsx +++ b/src/icons/Plugins.tsx @@ -1,7 +1,7 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const Plugins = createSvgIcon( +const Plugins = createSvgIcon( <> -); -Plugins.displayName = "Plugins"; +, "Plugins") + export default Plugins; diff --git a/src/icons/ProductTypes.tsx b/src/icons/ProductTypes.tsx index 54fdbda6a..bdeeea8a9 100644 --- a/src/icons/ProductTypes.tsx +++ b/src/icons/ProductTypes.tsx @@ -1,7 +1,7 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const ProductTypes = createSvgIcon( +const ProductTypes = createSvgIcon( <> -); -ProductTypes.displayName = "ProductTypes"; +, "ProductTypes") + export default ProductTypes; diff --git a/src/icons/QuotationIcon.tsx b/src/icons/QuotationIcon.tsx index 0d49f21b4..b67a5246b 100644 --- a/src/icons/QuotationIcon.tsx +++ b/src/icons/QuotationIcon.tsx @@ -1,10 +1,10 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const QuotationIcon = createSvgIcon( +const QuotationIcon = createSvgIcon( <> -); -QuotationIcon.displayName = "QuotationIcon"; +, "QuotationIcon") + export default QuotationIcon; diff --git a/src/icons/Sales.tsx b/src/icons/Sales.tsx index 7b9525679..f621216c5 100644 --- a/src/icons/Sales.tsx +++ b/src/icons/Sales.tsx @@ -1,7 +1,7 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const Sales = createSvgIcon( +const Sales = createSvgIcon( <> -); -Sales.displayName = "Sales"; +, "Sales") + export default Sales; diff --git a/src/icons/ShippingMethods.tsx b/src/icons/ShippingMethods.tsx index 4ee47bf8f..e552267a0 100644 --- a/src/icons/ShippingMethods.tsx +++ b/src/icons/ShippingMethods.tsx @@ -1,7 +1,7 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const ShippingMethods = createSvgIcon( +const ShippingMethods = createSvgIcon( <> -); -ShippingMethods.displayName = "ShippingMethods"; +, "ShippingMethods") + export default ShippingMethods; diff --git a/src/icons/Shop.tsx b/src/icons/Shop.tsx index 1cc474bfb..215f80a0f 100644 --- a/src/icons/Shop.tsx +++ b/src/icons/Shop.tsx @@ -1,7 +1,7 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const Shop = createSvgIcon( +const Shop = createSvgIcon( <> @@ -9,6 +9,6 @@ export const Shop = createSvgIcon( -); -Shop.displayName = "Shop"; +, "Shop") + export default Shop; diff --git a/src/icons/SiteSettings.tsx b/src/icons/SiteSettings.tsx index 53cc0388a..a161305eb 100644 --- a/src/icons/SiteSettings.tsx +++ b/src/icons/SiteSettings.tsx @@ -1,7 +1,7 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const SiteSettings = createSvgIcon( +const SiteSettings = createSvgIcon( <> -); -SiteSettings.displayName = "SiteSettings"; +, "SiteSettings") + export default SiteSettings; diff --git a/src/icons/StaffMembers.tsx b/src/icons/StaffMembers.tsx index 2b1e0a05b..6b1aa270e 100644 --- a/src/icons/StaffMembers.tsx +++ b/src/icons/StaffMembers.tsx @@ -1,7 +1,7 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const StaffMembers = createSvgIcon( +const StaffMembers = createSvgIcon( <> -); -StaffMembers.displayName = "StaffMembers"; +, "StaffMembers") + export default StaffMembers; diff --git a/src/icons/StoreMall.tsx b/src/icons/StoreMall.tsx index 753ba2d15..cacfd4df2 100644 --- a/src/icons/StoreMall.tsx +++ b/src/icons/StoreMall.tsx @@ -1,12 +1,12 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const StoreMall = createSvgIcon( +const StoreMall = createSvgIcon( <> -); -StoreMall.displayName = "StoreMall"; +, "StoreMall") + export default StoreMall; diff --git a/src/icons/StrikethroughIcon.tsx b/src/icons/StrikethroughIcon.tsx index accad0a5f..ef9a135b8 100644 --- a/src/icons/StrikethroughIcon.tsx +++ b/src/icons/StrikethroughIcon.tsx @@ -1,10 +1,10 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const HeaderOne = createSvgIcon( +const HeaderOne = createSvgIcon( <> -); -HeaderOne.displayName = "HeaderOne"; +, "HeaderOne") + export default HeaderOne; diff --git a/src/icons/Sun.tsx b/src/icons/Sun.tsx index 310ee1907..2a8b15aa9 100644 --- a/src/icons/Sun.tsx +++ b/src/icons/Sun.tsx @@ -1,7 +1,7 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const Sun = createSvgIcon( +const Sun = createSvgIcon( <> -); -Sun.displayName = "Sun"; +, "Sun") + export default Sun; diff --git a/src/icons/Taxes.tsx b/src/icons/Taxes.tsx index 7e3ba83cd..08a77e56f 100644 --- a/src/icons/Taxes.tsx +++ b/src/icons/Taxes.tsx @@ -1,7 +1,7 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const Taxes = createSvgIcon( +const Taxes = createSvgIcon( <> -); -Taxes.displayName = "Taxes"; +, "Taxes") + export default Taxes; diff --git a/src/icons/Truck.tsx b/src/icons/Truck.tsx index f90abaa5b..fea266be7 100644 --- a/src/icons/Truck.tsx +++ b/src/icons/Truck.tsx @@ -1,10 +1,13 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const Truck = createSvgIcon( +const Truck = createSvgIcon( <> - + -); -Truck.displayName = "Truck"; +, "Truck") + export default Truck; diff --git a/src/icons/UnorderedListIcon.tsx b/src/icons/UnorderedListIcon.tsx index d92de9a2b..7d0242632 100644 --- a/src/icons/UnorderedListIcon.tsx +++ b/src/icons/UnorderedListIcon.tsx @@ -1,10 +1,10 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const UnorderedListIcon = createSvgIcon( +const UnorderedListIcon = createSvgIcon( <> -); -UnorderedListIcon.displayName = "UnorderedListIcon"; +, "UnorderedListIcon") + export default UnorderedListIcon; diff --git a/src/icons/Unstyled.tsx b/src/icons/Unstyled.tsx index 0fc19f44a..1a8b9bd8d 100644 --- a/src/icons/Unstyled.tsx +++ b/src/icons/Unstyled.tsx @@ -1,7 +1,7 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const Unstyled = createSvgIcon( +const Unstyled = createSvgIcon( <> -); -Unstyled.displayName = "Unstyled"; +, "Unstyled") + export default Unstyled; diff --git a/src/icons/Webhooks.tsx b/src/icons/Webhooks.tsx index 051893abe..9b8387cbf 100644 --- a/src/icons/Webhooks.tsx +++ b/src/icons/Webhooks.tsx @@ -1,7 +1,7 @@ import createSvgIcon from "@material-ui/icons/utils/createSvgIcon"; import React from "react"; -export const Webhooks = createSvgIcon( +const Webhooks = createSvgIcon( <> -); -Webhooks.displayName = "Webhooks"; +, "Webhooks") + export default Webhooks; diff --git a/src/navigation/components/MenuCreateDialog/index.ts b/src/navigation/components/MenuCreateDialog/index.ts index afef4b52e..ee03b92ec 100644 --- a/src/navigation/components/MenuCreateDialog/index.ts +++ b/src/navigation/components/MenuCreateDialog/index.ts @@ -1,2 +1,2 @@ -export { default } from './MenuCreateDialog'; -export * from './MenuCreateDialog'; \ No newline at end of file +export { default } from "./MenuCreateDialog"; +export * from "./MenuCreateDialog"; diff --git a/src/navigation/components/MenuDetailsPage/index.ts b/src/navigation/components/MenuDetailsPage/index.ts index 3ebbd4695..253da8b34 100644 --- a/src/navigation/components/MenuDetailsPage/index.ts +++ b/src/navigation/components/MenuDetailsPage/index.ts @@ -1,2 +1,2 @@ -export { default } from './MenuDetailsPage'; -export * from './MenuDetailsPage'; \ No newline at end of file +export { default } from "./MenuDetailsPage"; +export * from "./MenuDetailsPage"; diff --git a/src/navigation/components/MenuItems/MenuItems.tsx b/src/navigation/components/MenuItems/MenuItems.tsx index 58638f34d..a02954aa8 100644 --- a/src/navigation/components/MenuItems/MenuItems.tsx +++ b/src/navigation/components/MenuItems/MenuItems.tsx @@ -3,12 +3,7 @@ import Card from "@material-ui/core/Card"; import CardActions from "@material-ui/core/CardActions"; import IconButton from "@material-ui/core/IconButton"; import Paper from "@material-ui/core/Paper"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import DeleteIcon from "@material-ui/icons/Delete"; import EditIcon from "@material-ui/icons/Edit"; @@ -39,252 +34,250 @@ export interface MenuItemsProps { onUndo: () => void; } -const styles = theme => - createStyles({ - actions: { - flexDirection: "row" +const useStyles = makeStyles(theme => ({ + actions: { + flexDirection: "row" + }, + container: { + background: theme.palette.grey[200] + }, + darkContainer: { + background: `${theme.palette.grey[800]} !important` + }, + deleteButton: { + marginRight: theme.spacing(1) + }, + dragIcon: { + cursor: "grab" + }, + nodeTitle: { + cursor: "pointer", + marginLeft: theme.spacing(7) + }, + root: { + "& .rst__collapseButton": { + display: "none" }, - container: { - background: theme.palette.grey[200] - }, - darkContainer: { - background: `${theme.palette.grey[800]} !important` - }, - deleteButton: { - marginRight: theme.spacing(1) - }, - dragIcon: { - cursor: "grab" - }, - nodeTitle: { - cursor: "pointer", - marginLeft: theme.spacing(7) - }, - root: { - "& .rst__collapseButton": { - display: "none" - }, - "& .rst__node": { - "&:first-of-type": { - "& $row": { - borderTop: `1px ${theme.overrides.MuiCard.root.borderColor} solid` - } + "& .rst__node": { + "&:first-of-type": { + "& $row": { + borderTop: `1px ${theme.palette.divider} solid` } } - }, - row: { - alignItems: "center", - background: theme.palette.background.paper, - borderBottom: `1px ${theme.overrides.MuiCard.root.borderColor} solid`, - borderRadius: 0, - display: "flex", - flexDirection: "row", - height: NODE_HEIGHT, - justifyContent: "flex-start", - paddingLeft: theme.spacing(3) - }, - rowContainer: { - "& > *": { - opacity: 1, - transition: `opacity ${theme.transitions.duration.standard}ms` - }, - transition: `margin ${theme.transitions.duration.standard}ms` - }, - rowContainerDragged: { - "&$rowContainer": { - "&:before": { - background: theme.palette.background.paper, - border: `1px solid ${theme.palette.primary.main}`, - borderRadius: "100%", - content: "''", - height: 7, - left: 0, - position: "absolute", - top: -3, - width: 7 - }, - borderTop: `1px solid ${theme.palette.primary.main}`, - height: 0, - position: "relative", - top: -1 - } - }, - rowContainerPlaceholder: { - opacity: 0 - }, - spacer: { - flex: 1 } - }); + }, + row: { + alignItems: "center", + background: theme.palette.background.paper, + borderBottom: `1px ${theme.palette.divider} solid`, + borderRadius: 0, + display: "flex", + flexDirection: "row", + height: NODE_HEIGHT, + justifyContent: "flex-start", + paddingLeft: theme.spacing(3) + }, + rowContainer: { + "& > *": { + opacity: 1, + transition: `opacity ${theme.transitions.duration.standard}ms` + }, + transition: `margin ${theme.transitions.duration.standard}ms` + }, + rowContainerDragged: { + "&$rowContainer": { + "&:before": { + background: theme.palette.background.paper, + border: `1px solid ${theme.palette.primary.main}`, + borderRadius: "100%", + content: "''", + height: 7, + left: 0, + position: "absolute", + top: -3, + width: 7 + }, + borderTop: `1px solid ${theme.palette.primary.main}`, + height: 0, + position: "relative", + top: -1 + } + }, + rowContainerPlaceholder: { + opacity: 0 + }, + spacer: { + flex: 1 + } +})); -const Placeholder = withStyles(styles, { - name: "Placeholder" -})(({ classes }: WithStyles) => ( - - - - - -)); +const Placeholder: React.FC = props => { + const classes = useStyles(props); -const Node = withStyles(styles, { - name: "Node" -})( - ({ - classes, + return ( + + + + + + ); +}; + +const Node: React.FC = props => { + const { node, path, connectDragPreview, connectDragSource, isDragging - }: NodeRendererProps & WithStyles) => { - const draggedClassName = classNames( - classes.rowContainer, - classes.rowContainerDragged - ); - const defaultClassName = isDragging - ? draggedClassName - : classes.rowContainer; - const placeholderClassName = classNames( - classes.rowContainer, - classes.rowContainerPlaceholder - ); + } = props; + const classes = useStyles(props); - const [className, setClassName] = React.useState(defaultClassName); - React.useEffect(() => setClassName(defaultClassName), [isDragging]); + const draggedClassName = classNames( + classes.rowContainer, + classes.rowContainerDragged + ); + const defaultClassName = isDragging ? draggedClassName : classes.rowContainer; + const placeholderClassName = classNames( + classes.rowContainer, + classes.rowContainerPlaceholder + ); - const handleDragStart = () => { - setClassName(placeholderClassName); - setTimeout(() => setClassName(defaultClassName), 0); - }; + const [className, setClassName] = React.useState(defaultClassName); + React.useEffect(() => setClassName(defaultClassName), [isDragging]); - return connectDragPreview( -
- - {connectDragSource( -
- -
- )} - - {node.title} - -
- - - - - - node.onChange({ - id: node.id as any, - type: "remove" - }) - } - > - - - -
- ); - } -); + const handleDragStart = () => { + setClassName(placeholderClassName); + setTimeout(() => setClassName(defaultClassName), 0); + }; -const MenuItems = withStyles(styles, { name: "MenuItems" })( - ({ + return connectDragPreview( +
+ + {connectDragSource( +
+ +
+ )} + + {node.title} + +
+ + + + + + node.onChange({ + id: node.id as any, + type: "remove" + }) + } + > + + + +
+ ); +}; + +const MenuItems: React.FC = props => { + const { canUndo, - classes, + items, onChange, onItemAdd, onItemClick, onItemEdit, onUndo - }: MenuItemsProps & WithStyles) => { - const intl = useIntl(); - const { isDark } = useTheme(); + } = props; + const classes = useStyles(props); - return ( - - - - - } - /> -
- {items === undefined ? ( - - ) : ( - ({ - className: classes.row, - style: { - marginLeft: NODE_MARGIN * (path.length - 1) - } - })} - isVirtualized={false} - rowHeight={NODE_HEIGHT} - treeData={items.map(item => - getNodeData(item, onChange, onItemClick, onItemEdit) - )} - theme={{ - nodeContentRenderer: Node as any - }} - onChange={newTree => - onChange( - getDiff( - items.map(item => - getNodeData(item, onChange, onItemClick, onItemEdit) - ), - newTree as TreeItem[] - ) - ) - } - placeholderRenderer={Placeholder as any} - /> - )} -
- - - - - ); - } -); + } + /> +
+ {items === undefined ? ( + + ) : ( + ({ + className: classes.row, + style: { + marginLeft: NODE_MARGIN * (path.length - 1) + } + })} + isVirtualized={false} + rowHeight={NODE_HEIGHT} + treeData={items.map(item => + getNodeData(item, onChange, onItemClick, onItemEdit) + )} + theme={{ + nodeContentRenderer: Node as any + }} + onChange={newTree => + onChange( + getDiff( + items.map(item => + getNodeData(item, onChange, onItemClick, onItemEdit) + ), + newTree as TreeItem[] + ) + ) + } + placeholderRenderer={Placeholder as any} + /> + )} +
+ + + + + ); +}; MenuItems.displayName = "MenuItems"; export default MenuItems; diff --git a/src/navigation/components/MenuList/MenuList.tsx b/src/navigation/components/MenuList/MenuList.tsx index 69bc0154f..191b0a19f 100644 --- a/src/navigation/components/MenuList/MenuList.tsx +++ b/src/navigation/components/MenuList/MenuList.tsx @@ -1,10 +1,5 @@ import Card from "@material-ui/core/Card"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +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"; @@ -28,30 +23,28 @@ export interface MenuListProps extends ListProps, ListActions { onDelete: (id: string) => void; } -const styles = theme => - createStyles({ - [theme.breakpoints.up("lg")]: { - colItems: { - width: 200 - }, - colTitle: {} - }, +const useStyles = makeStyles(theme => ({ + [theme.breakpoints.up("lg")]: { colItems: { - textAlign: "right" + width: 200 }, - colTitle: { - paddingLeft: 0 - }, - row: { - cursor: "pointer" - } - }); + colTitle: {} + }, + colItems: { + textAlign: "right" + }, + colTitle: { + paddingLeft: 0 + }, + row: { + cursor: "pointer" + } +})); const numberOfColumns = 4; -const MenuList = withStyles(styles, { name: "MenuList" })( - ({ - classes, +const MenuList: React.FC = props => { + const { settings, disabled, isChecked, @@ -66,7 +59,11 @@ const MenuList = withStyles(styles, { name: "MenuList" })( toggle, toggleAll, toolbar - }: MenuListProps & WithStyles) => ( + } = props; + + const classes = useStyles(props); + + return (
- ) -); + ); +}; MenuList.displayName = "MenuList"; export default MenuList; diff --git a/src/navigation/components/MenuList/index.ts b/src/navigation/components/MenuList/index.ts index 298313288..aea30ef3a 100644 --- a/src/navigation/components/MenuList/index.ts +++ b/src/navigation/components/MenuList/index.ts @@ -1,2 +1,2 @@ -export { default } from './MenuList'; -export * from './MenuList'; \ No newline at end of file +export { default } from "./MenuList"; +export * from "./MenuList"; diff --git a/src/navigation/components/MenuListPage/index.ts b/src/navigation/components/MenuListPage/index.ts index eac89a2b2..3fda12ebd 100644 --- a/src/navigation/components/MenuListPage/index.ts +++ b/src/navigation/components/MenuListPage/index.ts @@ -1,2 +1,2 @@ -export { default } from './MenuListPage'; -export * from './MenuListPage'; \ No newline at end of file +export { default } from "./MenuListPage"; +export * from "./MenuListPage"; diff --git a/src/navigation/components/MenuProperties/index.ts b/src/navigation/components/MenuProperties/index.ts index cbbaabac0..7e8070acf 100644 --- a/src/navigation/components/MenuProperties/index.ts +++ b/src/navigation/components/MenuProperties/index.ts @@ -1,2 +1,2 @@ -export { default } from './MenuProperties'; -export * from './MenuProperties'; \ No newline at end of file +export { default } from "./MenuProperties"; +export * from "./MenuProperties"; diff --git a/src/orders/components/OrderAddressEditDialog/OrderAddressEditDialog.tsx b/src/orders/components/OrderAddressEditDialog/OrderAddressEditDialog.tsx index 56b031f97..2acf37594 100644 --- a/src/orders/components/OrderAddressEditDialog/OrderAddressEditDialog.tsx +++ b/src/orders/components/OrderAddressEditDialog/OrderAddressEditDialog.tsx @@ -3,7 +3,7 @@ import Dialog from "@material-ui/core/Dialog"; import DialogActions from "@material-ui/core/DialogActions"; import DialogContent from "@material-ui/core/DialogContent"; import DialogTitle from "@material-ui/core/DialogTitle"; -import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -22,13 +22,13 @@ import { UserError } from "@saleor/types"; import { AddressInput } from "@saleor/types/globalTypes"; import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler"; -const styles = createStyles({ +const useStyles = makeStyles({ overflow: { overflowY: "visible" } }); -interface OrderAddressEditDialogProps extends WithStyles { +interface OrderAddressEditDialogProps { confirmButtonState: ConfirmButtonTransitionState; address: AddressTypeInput; open: boolean; @@ -42,12 +42,9 @@ interface OrderAddressEditDialogProps extends WithStyles { onConfirm(data: AddressInput); } -const OrderAddressEditDialog = withStyles(styles, { - name: "OrderAddressEditDialog" -})( - ({ +const OrderAddressEditDialog: React.FC = props => { + const { address, - classes, confirmButtonState, open, errors, @@ -55,85 +52,83 @@ const OrderAddressEditDialog = withStyles(styles, { countries, onClose, onConfirm - }: OrderAddressEditDialogProps) => { - const intl = useIntl(); - const [countryDisplayName, setCountryDisplayName] = useStateFromProps( - maybe( - () => countries.find(country => address.country === country.code).label - ) - ); - const { - errors: validationErrors, - submit: handleSubmit - } = useAddressValidation(onConfirm); - const dialogErrors = useModalDialogErrors( - [...errors, ...validationErrors], - open - ); + } = props; - const countryChoices = countries.map(country => ({ - label: country.label, - value: country.code - })); + const classes = useStyles(props); + const intl = useIntl(); + const [countryDisplayName, setCountryDisplayName] = useStateFromProps( + maybe( + () => countries.find(country => address.country === country.code).label + ) + ); + const { + errors: validationErrors, + submit: handleSubmit + } = useAddressValidation(onConfirm); + const dialogErrors = useModalDialogErrors( + [...errors, ...validationErrors], + open + ); - return ( - -
- {({ change, data, errors, submit }) => { - const handleCountrySelect = createSingleAutocompleteSelectHandler( - change, - setCountryDisplayName, - countryChoices - ); + const countryChoices = countries.map(country => ({ + label: country.label, + value: country.code + })); + + return ( + + + {({ change, data, errors, submit }) => { + const handleCountrySelect = createSingleAutocompleteSelectHandler( + change, + setCountryDisplayName, + countryChoices + ); + + return ( + <> + + {variant === "billing" + ? intl.formatMessage({ + defaultMessage: "Edit Billing Address", + description: "dialog header" + }) + : intl.formatMessage({ + defaultMessage: "Edit Shipping Address", + description: "dialog header" + })} + + + + + + + + + + + + ); + }} + +
+ ); +}; - return ( - <> - - {variant === "billing" - ? intl.formatMessage({ - defaultMessage: "Edit Billing Address", - description: "dialog header" - }) - : intl.formatMessage({ - defaultMessage: "Edit Shipping Address", - description: "dialog header" - })} - - - - - - - - - - - - ); - }} - - - ); - } -); OrderAddressEditDialog.displayName = "OrderAddressEditDialog"; export default OrderAddressEditDialog; diff --git a/src/orders/components/OrderBulkCancelDialog/index.ts b/src/orders/components/OrderBulkCancelDialog/index.ts index 25c157c84..5571ff2a0 100644 --- a/src/orders/components/OrderBulkCancelDialog/index.ts +++ b/src/orders/components/OrderBulkCancelDialog/index.ts @@ -1,2 +1,2 @@ -export { default } from './OrderBulkCancelDialog'; -export * from './OrderBulkCancelDialog'; \ No newline at end of file +export { default } from "./OrderBulkCancelDialog"; +export * from "./OrderBulkCancelDialog"; diff --git a/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx b/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx index 8dfbf773a..2ace728db 100644 --- a/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx +++ b/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx @@ -4,12 +4,7 @@ import DialogActions from "@material-ui/core/DialogActions"; import DialogContent from "@material-ui/core/DialogContent"; import DialogContentText from "@material-ui/core/DialogContentText"; import DialogTitle from "@material-ui/core/DialogTitle"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -24,18 +19,17 @@ export interface FormData { restock: boolean; } -const styles = theme => - createStyles({ - deleteButton: { - "&:hover": { - backgroundColor: theme.palette.error.main - }, - backgroundColor: theme.palette.error.main, - color: theme.palette.error.contrastText - } - }); +const useStyles = makeStyles(theme => ({ + deleteButton: { + "&:hover": { + backgroundColor: theme.palette.error.main + }, + backgroundColor: theme.palette.error.main, + color: theme.palette.error.contrastText + } +})); -interface OrderCancelDialogProps extends WithStyles { +interface OrderCancelDialogProps { confirmButtonState: ConfirmButtonTransitionState; number: string; open: boolean; @@ -43,79 +37,76 @@ interface OrderCancelDialogProps extends WithStyles { onSubmit(data: FormData); } -const OrderCancelDialog = withStyles(styles, { name: "OrderCancelDialog" })( - ({ - classes, +const OrderCancelDialog: React.FC = props => { + const { confirmButtonState, number: orderNumber, open, onSubmit, onClose - }: OrderCancelDialogProps) => { - const intl = useIntl(); + } = props; + const classes = useStyles(props); - return ( - -
- {({ data, change }) => { - return ( - <> - - - - - - - - - - - - - - - - - ); - }} -
- - ); - } -); + const intl = useIntl(); + + return ( + +
+ {({ data, change }) => ( + <> + + + + + + + + + + + + + + + + + )} +
+ + ); +}; OrderCancelDialog.displayName = "OrderCancelDialog"; export default OrderCancelDialog; diff --git a/src/orders/components/OrderCustomer/OrderCustomer.tsx b/src/orders/components/OrderCustomer/OrderCustomer.tsx index 2d9aff57c..0665e269a 100644 --- a/src/orders/components/OrderCustomer/OrderCustomer.tsx +++ b/src/orders/components/OrderCustomer/OrderCustomer.tsx @@ -1,12 +1,7 @@ import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -29,27 +24,26 @@ import { customerUrl } from "../../../customers/urls"; import { createHref, maybe } from "../../../misc"; import { OrderDetails_order } from "../../types/OrderDetails"; -const styles = theme => - createStyles({ - sectionHeader: { - alignItems: "center", - display: "flex", - marginBottom: theme.spacing(3) - }, - sectionHeaderTitle: { - flex: 1, - fontWeight: 600 as 600, - lineHeight: 1, - textTransform: "uppercase" - }, - sectionHeaderToolbar: { - marginRight: -theme.spacing(2) - }, - userEmail: { - fontWeight: 600 as 600, - marginBottom: theme.spacing(1) - } - }); +const useStyles = makeStyles(theme => ({ + sectionHeader: { + alignItems: "center", + display: "flex", + marginBottom: theme.spacing(3) + }, + sectionHeaderTitle: { + flex: 1, + fontWeight: 600 as 600, + lineHeight: 1, + textTransform: "uppercase" + }, + sectionHeaderToolbar: { + marginRight: -theme.spacing(2) + }, + userEmail: { + fontWeight: 600 as 600, + marginBottom: theme.spacing(1) + } +})); export interface OrderCustomerProps extends Partial, @@ -66,9 +60,8 @@ export interface OrderCustomerProps onShippingAddressEdit?: () => void; } -const OrderCustomer = withStyles(styles, { name: "OrderCustomer" })( - ({ - classes, +const OrderCustomer: React.FC = props => { + const { canEditAddresses, canEditCustomer, fetchUsers, @@ -82,291 +75,289 @@ const OrderCustomer = withStyles(styles, { name: "OrderCustomer" })( onFetchMore: onFetchMoreUsers, onProfileView, onShippingAddressEdit - }: OrderCustomerProps & WithStyles) => { - const intl = useIntl(); + } = props; + const classes = useStyles(props); - const user = maybe(() => order.user); - const userEmail = maybe(()=>order.userEmail) + const intl = useIntl(); - const [userDisplayName, setUserDisplayName] = useStateFromProps( - maybe(() => user.email, "") - ); - const [isInEditMode, setEditModeStatus] = React.useState(false); - const toggleEditMode = () => setEditModeStatus(!isInEditMode); + const user = maybe(() => order.user); + const userEmail = maybe(() => order.userEmail); - const billingAddress = maybe(() => order.billingAddress); - const shippingAddress = maybe(() => order.shippingAddress); + const [userDisplayName, setUserDisplayName] = useStateFromProps( + maybe(() => user.email, "") + ); + const [isInEditMode, setEditModeStatus] = React.useState(false); + const toggleEditMode = () => setEditModeStatus(!isInEditMode); - return ( - - order.billingAddress); + const shippingAddress = maybe(() => order.shippingAddress); + + return ( + + + - - ) - } - /> - - {user === undefined ? ( - - ) : isInEditMode && canEditCustomer ? ( -
- {({ change, data }) => { - const handleChange = (event: React.ChangeEvent) => { - change(event); - const value = event.target.value; + {intl.formatMessage(buttonMessages.edit)} + + + ) + } + /> + + {user === undefined ? ( + + ) : isInEditMode && canEditCustomer ? ( + + {({ change, data }) => { + const handleChange = (event: React.ChangeEvent) => { + change(event); + const value = event.target.value; - onCustomerEdit({ - [value.includes("@") ? "userEmail" : "user"]: value - }); - toggleEditMode(); - }; - const userChoices = maybe(() => users, []).map(user => ({ - label: user.email, - value: user.id - })); - const handleUserChange = createSingleAutocompleteSelectHandler( - handleChange, - setUserDisplayName, - userChoices - ); - return ( - - ); - }} - - ) : user === null ? ( - userEmail === null ? ( - - - - ) : ( - {userEmail} - ) + onCustomerEdit({ + [value.includes("@") ? "userEmail" : "user"]: value + }); + toggleEditMode(); + }; + const userChoices = maybe(() => users, []).map(user => ({ + label: user.email, + value: user.id + })); + const handleUserChange = createSingleAutocompleteSelectHandler( + handleChange, + setUserDisplayName, + userChoices + ); + return ( + + ); + }} + + ) : user === null ? ( + userEmail === null ? ( + + + ) : ( - <> - - {user.email} - - -
- - - -
- - {/* TODO: Uncomment it after adding ability to filter + {userEmail} + ) + ) : ( + <> + {user.email} + +
+ + + +
+ + {/* TODO: Uncomment it after adding ability to filter orders by customer */} - {/*
+ {/*
*/} - - )} - - {!!user && ( - <> -
- -
- - - -
- - {maybe(() => order.userEmail) === undefined ? ( - - ) : order.userEmail === null ? ( - - - - ) : ( - order.userEmail)}`} - typographyProps={{ color: "primary" }} - > - {maybe(() => order.userEmail)} - - )} - )} -
- -
- - - - {canEditAddresses && ( -
- -
+ + {!!user && ( + <> +
+ +
+ + + +
+ + {maybe(() => order.userEmail) === undefined ? ( + + ) : order.userEmail === null ? ( + + + + ) : ( + order.userEmail)}`} + typographyProps={{ color: "primary" }} + > + {maybe(() => order.userEmail)} + )} -
- {shippingAddress === undefined ? ( - - ) : shippingAddress === null ? ( - - - - ) : ( - <> - {shippingAddress.companyName && ( - {shippingAddress.companyName} - )} - - {shippingAddress.firstName} {shippingAddress.lastName} - - - {shippingAddress.streetAddress1} -
- {shippingAddress.streetAddress2} - - - {shippingAddress.postalCode} {shippingAddress.city} - {shippingAddress.cityArea - ? ", " + shippingAddress.cityArea - : ""} - - - {shippingAddress.countryArea - ? shippingAddress.countryArea + - ", " + - shippingAddress.country.country - : shippingAddress.country.country} - - {shippingAddress.phone} - + + + )} +
+ +
+ + + + {canEditAddresses && ( +
+ +
)} - -
- -
- - - - {canEditAddresses && ( -
- -
+
+ {shippingAddress === undefined ? ( + + ) : shippingAddress === null ? ( + + + + ) : ( + <> + {shippingAddress.companyName && ( + {shippingAddress.companyName} )} -
- {billingAddress === undefined ? ( - - ) : billingAddress === null ? ( - + {shippingAddress.firstName} {shippingAddress.lastName} - ) : maybe(() => shippingAddress.id) === billingAddress.id ? ( - + {shippingAddress.streetAddress1} +
+ {shippingAddress.streetAddress2} - ) : ( - <> - {billingAddress.companyName && ( - {billingAddress.companyName} - )} - - {billingAddress.firstName} {billingAddress.lastName} - - - {billingAddress.streetAddress1} -
- {billingAddress.streetAddress2} - - - {billingAddress.postalCode} {billingAddress.city} - {billingAddress.cityArea ? ", " + billingAddress.cityArea : ""} - - - {billingAddress.countryArea - ? billingAddress.countryArea + - ", " + - billingAddress.country.country - : billingAddress.country.country} - - {billingAddress.phone} - + + {shippingAddress.postalCode} {shippingAddress.city} + {shippingAddress.cityArea ? ", " + shippingAddress.cityArea : ""} + + + {shippingAddress.countryArea + ? shippingAddress.countryArea + + ", " + + shippingAddress.country.country + : shippingAddress.country.country} + + {shippingAddress.phone} + + )} + +
+ +
+ + + + {canEditAddresses && ( +
+ +
)} - - - ); - } -); +
+ {billingAddress === undefined ? ( + + ) : billingAddress === null ? ( + + + + ) : maybe(() => shippingAddress.id) === billingAddress.id ? ( + + + + ) : ( + <> + {billingAddress.companyName && ( + {billingAddress.companyName} + )} + + {billingAddress.firstName} {billingAddress.lastName} + + + {billingAddress.streetAddress1} +
+ {billingAddress.streetAddress2} + + + {billingAddress.postalCode} {billingAddress.city} + {billingAddress.cityArea ? ", " + billingAddress.cityArea : ""} + + + {billingAddress.countryArea + ? billingAddress.countryArea + + ", " + + billingAddress.country.country + : billingAddress.country.country} + + {billingAddress.phone} + + )} + + + ); +}; + OrderCustomer.displayName = "OrderCustomer"; export default OrderCustomer; diff --git a/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx b/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx index 6530aadf1..e26c1b47a 100644 --- a/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx +++ b/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx @@ -1,9 +1,4 @@ -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import React from "react"; import { useIntl } from "react-intl"; @@ -28,16 +23,15 @@ import OrderHistory, { FormData as HistoryFormData } from "../OrderHistory"; import OrderPayment from "../OrderPayment/OrderPayment"; import OrderUnfulfilledItems from "../OrderUnfulfilledItems/OrderUnfulfilledItems"; -const styles = theme => - createStyles({ - date: { - marginBottom: theme.spacing(3), - marginTop: -theme.spacing(2) - }, - header: { - marginBottom: 0 - } - }); +const useStyles = makeStyles(theme => ({ + date: { + marginBottom: theme.spacing(3), + marginTop: -theme.spacing(2) + }, + header: { + marginBottom: 0 + } +})); export interface OrderDetailsPageProps extends UserPermissionProps { order: OrderDetails_order; @@ -65,9 +59,8 @@ export interface OrderDetailsPageProps extends UserPermissionProps { onProfileView(); } -const OrderDetailsPage = withStyles(styles, { name: "OrderDetailsPage" })( - ({ - classes, +const OrderDetailsPage: React.FC = props => { + const { order, userPermissions, onBack, @@ -83,107 +76,108 @@ const OrderDetailsPage = withStyles(styles, { name: "OrderDetailsPage" })( onPaymentVoid, onShippingAddressEdit, onProfileView - }: OrderDetailsPageProps & WithStyles) => { - const intl = useIntl(); + } = props; + const classes = useStyles(props); - const canCancel = maybe(() => order.status) !== OrderStatus.CANCELED; - const canEditAddresses = maybe(() => order.status) !== OrderStatus.CANCELED; - const canFulfill = maybe(() => order.status) !== OrderStatus.CANCELED; - const unfulfilled = maybe(() => order.lines, []).filter( - line => line.quantityFulfilled < line.quantity - ); + const intl = useIntl(); - return ( - - - {intl.formatMessage(sectionNames.orders)} - - order.number) ? "#" + order.number : undefined} - > - {canCancel && ( - order.status) !== OrderStatus.CANCELED; + const canEditAddresses = maybe(() => order.status) !== OrderStatus.CANCELED; + const canFulfill = maybe(() => order.status) !== OrderStatus.CANCELED; + const unfulfilled = maybe(() => order.lines, []).filter( + line => line.quantityFulfilled < line.quantity + ); + + return ( + + + {intl.formatMessage(sectionNames.orders)} + + order.number) ? "#" + order.number : undefined} + > + {canCancel && ( + + )} + +
+ {order && order.created ? ( + + + + ) : ( + + )} +
+ +
+ {unfulfilled.length > 0 && ( + )} - -
- {order && order.created ? ( - - - - ) : ( - + {renderCollection( + maybe(() => order.fulfillments), + (fulfillment, fulfillmentIndex) => ( + fulfillment.id, "loading")}> + {!(unfulfilled.length === 0 && fulfillmentIndex === 0) && ( + + )} + order.number)} + onOrderFulfillmentCancel={() => + onFulfillmentCancel(fulfillment.id) + } + onTrackingCodeAdd={() => + onFulfillmentTrackingNumberUpdate(fulfillment.id) + } + /> + + ) )} + + + order.events)} + onNoteAdd={onNoteAdd} + />
- -
- {unfulfilled.length > 0 && ( - - )} - {renderCollection( - maybe(() => order.fulfillments), - (fulfillment, fulfillmentIndex) => ( - fulfillment.id, "loading")}> - {!(unfulfilled.length === 0 && fulfillmentIndex === 0) && ( - - )} - order.number)} - onOrderFulfillmentCancel={() => - onFulfillmentCancel(fulfillment.id) - } - onTrackingCodeAdd={() => - onFulfillmentTrackingNumberUpdate(fulfillment.id) - } - /> - - ) - )} - - - order.events)} - onNoteAdd={onNoteAdd} - /> -
-
- - - order.customerNote)} /> -
- - - ); - } -); +
+ + + order.customerNote)} /> +
+ + + ); +}; OrderDetailsPage.displayName = "OrderDetailsPage"; export default OrderDetailsPage; diff --git a/src/orders/components/OrderDraftDetailsProducts/OrderDraftDetailsProducts.tsx b/src/orders/components/OrderDraftDetailsProducts/OrderDraftDetailsProducts.tsx index 816669352..6b4d2d18d 100644 --- a/src/orders/components/OrderDraftDetailsProducts/OrderDraftDetailsProducts.tsx +++ b/src/orders/components/OrderDraftDetailsProducts/OrderDraftDetailsProducts.tsx @@ -1,10 +1,5 @@ import IconButton from "@material-ui/core/IconButton"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +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"; @@ -30,59 +25,57 @@ export interface FormData { quantity: number; } -const styles = theme => - createStyles({ - colAction: { - "&:last-child": { - paddingRight: 0 - }, - width: 76 + theme.spacing(0.5) +const useStyles = makeStyles(theme => ({ + colAction: { + "&:last-child": { + paddingRight: 0 }, - colName: { - width: "auto" + width: 76 + theme.spacing(0.5) + }, + colName: { + width: "auto" + }, + colNameLabel: { + marginLeft: AVATAR_MARGIN + }, + colPrice: { + textAlign: "right", + width: 150 + }, + colQuantity: { + textAlign: "right", + width: 80 + }, + colTotal: { + textAlign: "right", + width: 150 + }, + quantityField: { + "& input": { + padding: "12px 12px 10px", + textAlign: "right" }, - colNameLabel: { - marginLeft: AVATAR_MARGIN - }, - colPrice: { - textAlign: "right", - width: 150 - }, - colQuantity: { - textAlign: "right", - width: 80 - }, - colTotal: { - textAlign: "right", - width: 150 - }, - quantityField: { - "& input": { - padding: "12px 12px 10px", - textAlign: "right" - }, - width: 60 - }, - table: { - tableLayout: "fixed" - } - }); + width: 60 + }, + table: { + tableLayout: "fixed" + } +})); -interface OrderDraftDetailsProductsProps extends WithStyles { +interface OrderDraftDetailsProductsProps { lines: OrderDetails_order_lines[]; onOrderLineChange: (id: string, data: FormData) => void; onOrderLineRemove: (id: string) => void; } -const OrderDraftDetailsProducts = withStyles(styles, { - name: "OrderDraftDetailsProducts" -})( - ({ - classes, - lines, - onOrderLineChange, - onOrderLineRemove - }: OrderDraftDetailsProductsProps) => ( +const OrderDraftDetailsProducts: React.FC< + OrderDraftDetailsProductsProps +> = props => { + const { lines, onOrderLineChange, onOrderLineRemove } = props; + + const classes = useStyles(props); + + return ( {maybe(() => !!lines.length) && ( @@ -130,7 +123,7 @@ const OrderDraftDetailsProducts = withStyles(styles, { > {maybe(() => line.productName && line.productSku) ? ( <> - {line.productName} + {line.productName} {line.productSku} ) : ( @@ -195,7 +188,7 @@ const OrderDraftDetailsProducts = withStyles(styles, { )}
- ) -); + ); +}; OrderDraftDetailsProducts.displayName = "OrderDraftDetailsProducts"; export default OrderDraftDetailsProducts; diff --git a/src/orders/components/OrderDraftDetailsSummary/OrderDraftDetailsSummary.tsx b/src/orders/components/OrderDraftDetailsSummary/OrderDraftDetailsSummary.tsx index 0b026cdf4..ab9a50f7c 100644 --- a/src/orders/components/OrderDraftDetailsSummary/OrderDraftDetailsSummary.tsx +++ b/src/orders/components/OrderDraftDetailsSummary/OrderDraftDetailsSummary.tsx @@ -1,9 +1,4 @@ -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import React from "react"; import { FormattedMessage } from "react-intl"; @@ -13,27 +8,30 @@ import Skeleton from "@saleor/components/Skeleton"; import { maybe } from "../../../misc"; import { OrderDetails_order } from "../../types/OrderDetails"; -const styles = theme => - createStyles({ - root: { - ...theme.typography.body1, - lineHeight: 1.9, - width: "100%" - }, - textRight: { - textAlign: "right" - } - }); +const useStyles = makeStyles(theme => ({ + root: { + ...theme.typography.body1, + lineHeight: 1.9, + width: "100%" + }, + textRight: { + textAlign: "right" + } +})); -interface OrderDraftDetailsSummaryProps extends WithStyles { +interface OrderDraftDetailsSummaryProps { order: OrderDetails_order; onShippingMethodEdit: () => void; } -const OrderDraftDetailsSummary = withStyles(styles, { - name: "OrderDraftDetailsSummary" -})( - ({ classes, order, onShippingMethodEdit }: OrderDraftDetailsSummaryProps) => ( +const OrderDraftDetailsSummary: React.FC< + OrderDraftDetailsSummaryProps +> = props => { + const { order, onShippingMethodEdit } = props; + + const classes = useStyles(props); + + return ( @@ -134,7 +132,7 @@ const OrderDraftDetailsSummary = withStyles(styles, {
- ) -); + ); +}; OrderDraftDetailsSummary.displayName = "OrderDraftDetailsSummary"; export default OrderDraftDetailsSummary; diff --git a/src/orders/components/OrderDraftList/OrderDraftList.tsx b/src/orders/components/OrderDraftList/OrderDraftList.tsx index c7fc86ae2..41cbe6751 100644 --- a/src/orders/components/OrderDraftList/OrderDraftList.tsx +++ b/src/orders/components/OrderDraftList/OrderDraftList.tsx @@ -1,9 +1,4 @@ -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +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"; @@ -27,45 +22,40 @@ import { import { ListActions, ListProps } from "@saleor/types"; import { OrderDraftList_draftOrders_edges_node } from "../../types/OrderDraftList"; -const styles = theme => - createStyles({ - [theme.breakpoints.up("lg")]: { - colCustomer: { - width: 300 - }, - colDate: { - width: 300 - }, - colNumber: { - width: 120 - }, - colTotal: {} +const useStyles = makeStyles(theme => ({ + [theme.breakpoints.up("lg")]: { + colCustomer: { + width: 300 + }, + colDate: { + width: 300 }, - colCustomer: {}, - colDate: {}, colNumber: { - paddingLeft: 0 + width: 120 }, - colTotal: { - textAlign: "right" - }, - link: { - cursor: "pointer" - } - }); + colTotal: {} + }, + colCustomer: {}, + colDate: {}, + colNumber: { + paddingLeft: 0 + }, + colTotal: { + textAlign: "right" + }, + link: { + cursor: "pointer" + } +})); -interface OrderDraftListProps - extends ListProps, - ListActions, - WithStyles { +interface OrderDraftListProps extends ListProps, ListActions { orders: OrderDraftList_draftOrders_edges_node[]; } const numberOfColumns = 5; -export const OrderDraftList = withStyles(styles, { name: "OrderDraftList" })( - ({ - classes, +export const OrderDraftList: React.FC = props => { + const { disabled, settings, orders, @@ -79,132 +69,133 @@ export const OrderDraftList = withStyles(styles, { name: "OrderDraftList" })( toggle, toggleAll, toolbar - }: OrderDraftListProps) => { - const intl = useIntl(); + } = props; + const classes = useStyles(props); - const orderDraftList = orders - ? orders.map(order => ({ - ...order, - paymentStatus: transformPaymentStatus(order.paymentStatus, intl), - status: transformOrderStatus(order.status, intl) - })) - : undefined; + const intl = useIntl(); - return ( - - - - - - - - - - - - - - - - - - - - - - {renderCollection( - orderDraftList, - order => { - const isSelected = order ? isChecked(order.id) : false; + const orderDraftList = orders + ? orders.map(order => ({ + ...order, + paymentStatus: transformPaymentStatus(order.paymentStatus, intl), + status: transformOrderStatus(order.status, intl) + })) + : undefined; - return ( - - - toggle(order.id)} - /> - - - {maybe(() => order.number) ? ( - "#" + order.number - ) : ( - - )} - - - {maybe(() => order.created) ? ( - - ) : ( - - )} - - - {maybe(() => order.billingAddress) ? ( - <> - {order.billingAddress.firstName} -   - {order.billingAddress.lastName} - - ) : maybe(() => order.userEmail) !== undefined ? ( - order.userEmail - ) : ( - - )} - - - {maybe(() => order.total.gross) ? ( - - ) : ( - - )} - - - ); - }, - () => ( - - - + return ( +
+ + + + + + + + + + + + + + + + + + + + + {renderCollection( + orderDraftList, + order => { + const isSelected = order ? isChecked(order.id) : false; + + return ( + + + toggle(order.id)} + /> + + + {maybe(() => order.number) ? ( + "#" + order.number + ) : ( + + )} + + + {maybe(() => order.created) ? ( + + ) : ( + + )} + + + {maybe(() => order.billingAddress) ? ( + <> + {order.billingAddress.firstName} +   + {order.billingAddress.lastName} + + ) : maybe(() => order.userEmail) !== undefined ? ( + order.userEmail + ) : ( + + )} + + + {maybe(() => order.total.gross) ? ( + + ) : ( + + )} - ) - )} - -
- ); - } -); + ); + }, + () => ( + + + + + + ) + )} + + + ); +}; OrderDraftList.displayName = "OrderDraftList"; export default OrderDraftList; diff --git a/src/orders/components/OrderDraftList/index.ts b/src/orders/components/OrderDraftList/index.ts index 96f0cae70..5733dc916 100644 --- a/src/orders/components/OrderDraftList/index.ts +++ b/src/orders/components/OrderDraftList/index.ts @@ -1,2 +1,2 @@ -export { default } from './OrderDraftList'; -export * from './OrderDraftList'; \ No newline at end of file +export { default } from "./OrderDraftList"; +export * from "./OrderDraftList"; diff --git a/src/orders/components/OrderDraftListPage/index.ts b/src/orders/components/OrderDraftListPage/index.ts index 5814e7cb1..de5e8daab 100644 --- a/src/orders/components/OrderDraftListPage/index.ts +++ b/src/orders/components/OrderDraftListPage/index.ts @@ -1,2 +1,2 @@ -export { default } from './OrderDraftListPage'; -export * from './OrderDraftListPage'; \ No newline at end of file +export { default } from "./OrderDraftListPage"; +export * from "./OrderDraftListPage"; diff --git a/src/orders/components/OrderDraftPage/OrderDraftPage.tsx b/src/orders/components/OrderDraftPage/OrderDraftPage.tsx index 444dce1f7..77cf46f3a 100644 --- a/src/orders/components/OrderDraftPage/OrderDraftPage.tsx +++ b/src/orders/components/OrderDraftPage/OrderDraftPage.tsx @@ -1,9 +1,4 @@ -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import React from "react"; import { useIntl } from "react-intl"; @@ -28,16 +23,15 @@ import OrderDraftDetails from "../OrderDraftDetails/OrderDraftDetails"; import { FormData as OrderDraftDetailsProductsFormData } from "../OrderDraftDetailsProducts"; import OrderHistory, { FormData as HistoryFormData } from "../OrderHistory"; -const styles = theme => - createStyles({ - date: { - marginBottom: theme.spacing(3), - marginLeft: theme.spacing(7) - }, - header: { - marginBottom: 0 - } - }); +const useStyles = makeStyles(theme => ({ + date: { + marginBottom: theme.spacing(3), + marginLeft: theme.spacing(7) + }, + header: { + marginBottom: 0 + } +})); export interface OrderDraftPageProps extends FetchMoreProps, @@ -70,9 +64,8 @@ export interface OrderDraftPageProps onProfileView: () => void; } -const OrderDraftPage = withStyles(styles, { name: "OrderDraftPage" })( - ({ - classes, +const OrderDraftPage: React.FC = props => { + const { disabled, fetchUsers, hasMore, @@ -94,86 +87,87 @@ const OrderDraftPage = withStyles(styles, { name: "OrderDraftPage" })( users, usersLoading, userPermissions - }: OrderDraftPageProps & WithStyles) => { - const intl = useIntl(); + } = props; + const classes = useStyles(props); - return ( - - - {intl.formatMessage(sectionNames.draftOrders)} - - order.number) ? "#" + order.number : undefined} - > - - -
- {order && order.created ? ( - - - - ) : ( - - )} -
- -
- - order.events)} - onNoteAdd={onNoteAdd} - /> -
-
- -
- - order.canFinalize)} - onCancel={onBack} - onSave={onDraftFinalize} - labels={{ - save: intl.formatMessage({ - defaultMessage: "Finalize", - description: "button" - }) - }} + const intl = useIntl(); + + return ( + + + {intl.formatMessage(sectionNames.draftOrders)} + + order.number) ? "#" + order.number : undefined} + > + - - ); - } -); + +
+ {order && order.created ? ( + + + + ) : ( + + )} +
+ +
+ + order.events)} + onNoteAdd={onNoteAdd} + /> +
+
+ +
+ + order.canFinalize)} + onCancel={onBack} + onSave={onDraftFinalize} + labels={{ + save: intl.formatMessage({ + defaultMessage: "Finalize", + description: "button" + }) + }} + /> + + ); +}; OrderDraftPage.displayName = "OrderDraftPage"; export default OrderDraftPage; diff --git a/src/orders/components/OrderFulfillment/OrderFulfillment.tsx b/src/orders/components/OrderFulfillment/OrderFulfillment.tsx index 55191de7d..a3be33a78 100644 --- a/src/orders/components/OrderFulfillment/OrderFulfillment.tsx +++ b/src/orders/components/OrderFulfillment/OrderFulfillment.tsx @@ -1,12 +1,7 @@ import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; import CardActions from "@material-ui/core/CardActions"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +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"; @@ -28,43 +23,42 @@ import { maybe, renderCollection } from "../../../misc"; import { FulfillmentStatus } from "../../../types/globalTypes"; import { OrderDetails_order_fulfillments } from "../../types/OrderDetails"; -const styles = theme => - createStyles({ - clickableRow: { - cursor: "pointer" - }, - colName: { - width: "auto" - }, - colNameLabel: { - marginLeft: AVATAR_MARGIN - }, - colPrice: { - textAlign: "right", - width: 120 - }, - colQuantity: { - textAlign: "center", - width: 120 - }, - colTotal: { - textAlign: "right", - width: 120 - }, +const useStyles = makeStyles(theme => ({ + clickableRow: { + cursor: "pointer" + }, + colName: { + width: "auto" + }, + colNameLabel: { + marginLeft: AVATAR_MARGIN + }, + colPrice: { + textAlign: "right", + width: 120 + }, + colQuantity: { + textAlign: "center", + width: 120 + }, + colTotal: { + textAlign: "right", + width: 120 + }, - orderNumber: { - display: "inline", - marginLeft: theme.spacing(1) - }, - statusBar: { - paddingTop: 0 - }, - table: { - tableLayout: "fixed" - } - }); + orderNumber: { + display: "inline", + marginLeft: theme.spacing(1) + }, + statusBar: { + paddingTop: 0 + }, + table: { + tableLayout: "fixed" + } +})); -interface OrderFulfillmentProps extends WithStyles { +interface OrderFulfillmentProps { fulfillment: OrderDetails_order_fulfillments; orderNumber: string; onOrderFulfillmentCancel: () => void; @@ -73,178 +67,178 @@ interface OrderFulfillmentProps extends WithStyles { const numberOfColumns = 3; -const OrderFulfillment = withStyles(styles, { name: "OrderFulfillment" })( - ({ - classes, +const OrderFulfillment: React.FC = props => { + const { fulfillment, orderNumber, onOrderFulfillmentCancel, onTrackingCodeAdd - }: OrderFulfillmentProps) => { - const intl = useIntl(); + } = props; + const classes = useStyles(props); - const lines = maybe(() => fulfillment.lines); - const status = maybe(() => fulfillment.status); - const quantity = lines - ? lines.map(line => line.quantity).reduce((prev, curr) => prev + curr, 0) - : "..."; + const intl = useIntl(); - return ( - - - {status === FulfillmentStatus.FULFILLED - ? intl.formatMessage( - { - defaultMessage: "Fulfilled ({quantity})", - description: "section header" - }, - { - quantity - } - ) - : intl.formatMessage( - { - defaultMessage: "Fulfilled ({quantity})", - description: "section header" - }, - { - quantity - } - )} - - {maybe( - () => `#${orderNumber}-${fulfillment.fulfillmentOrder}` + const lines = maybe(() => fulfillment.lines); + const status = maybe(() => fulfillment.status); + const quantity = lines + ? lines.map(line => line.quantity).reduce((prev, curr) => prev + curr, 0) + : "..."; + + return ( + + + {status === FulfillmentStatus.FULFILLED + ? intl.formatMessage( + { + defaultMessage: "Fulfilled ({quantity})", + description: "section header" + }, + { + quantity + } + ) + : intl.formatMessage( + { + defaultMessage: "Fulfilled ({quantity})", + description: "section header" + }, + { + quantity + } )} - - + + {maybe( + () => `#${orderNumber}-${fulfillment.fulfillmentOrder}` + )} + + + } + status={ + status === FulfillmentStatus.FULFILLED ? "success" : "error" + } + /> + ) : ( + + ) + } + toolbar={ + maybe(() => fulfillment.status) === FulfillmentStatus.FULFILLED && ( + - ) : ( - - ) - } - toolbar={ - maybe(() => fulfillment.status) === FulfillmentStatus.FULFILLED && ( - - ) - } - /> - - - - - - - - - + ]} + /> + ) + } + /> +
+ + + + + + + + + + + + + + + + + + + {renderCollection(lines, line => ( + line.id)} + > + line.orderLine.thumbnail.url)} + > + {maybe(() => line.orderLine.productName) || } + + + {maybe(() => line.quantity) || } - + {maybe(() => line.orderLine.unitPrice.gross) ? ( + + ) : ( + + )} + {maybe( + () => line.quantity * line.orderLine.unitPrice.gross.amount + ) ? ( + + ) : ( + + )} + + + ))} + {maybe(() => fulfillment.trackingNumber) && ( + + - - - {renderCollection(lines, line => ( - line.id)} - > - line.orderLine.thumbnail.url)} - > - {maybe(() => line.orderLine.productName) || } - - - {maybe(() => line.quantity) || } - - - {maybe(() => line.orderLine.unitPrice.gross) ? ( - - ) : ( - - )} - - - {maybe( - () => line.quantity * line.orderLine.unitPrice.gross.amount - ) ? ( - - ) : ( - - )} - - - ))} - {maybe(() => fulfillment.trackingNumber) && ( - - - - - - )} - -
- {status === FulfillmentStatus.FULFILLED && !fulfillment.trackingNumber && ( - - - - )} - - ); - } -); + )} + + + {status === FulfillmentStatus.FULFILLED && !fulfillment.trackingNumber && ( + + + + )} + + ); +}; OrderFulfillment.displayName = "OrderFulfillment"; export default OrderFulfillment; diff --git a/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx b/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx index d174d6625..8272eb8e4 100644 --- a/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx +++ b/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx @@ -4,12 +4,7 @@ import DialogActions from "@material-ui/core/DialogActions"; import DialogContent from "@material-ui/core/DialogContent"; import DialogContentText from "@material-ui/core/DialogContentText"; import DialogTitle from "@material-ui/core/DialogTitle"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -24,83 +19,83 @@ export interface FormData { restock: boolean; } -const styles = theme => - createStyles({ - deleteButton: { - "&:hover": { - backgroundColor: theme.palette.error.main - }, - backgroundColor: theme.palette.error.main, - color: theme.palette.error.contrastText - } - }); +const useStyles = makeStyles(theme => ({ + deleteButton: { + "&:hover": { + backgroundColor: theme.palette.error.main + }, + backgroundColor: theme.palette.error.main, + color: theme.palette.error.contrastText + } +})); -interface OrderFulfillmentCancelDialogProps extends WithStyles { +interface OrderFulfillmentCancelDialogProps { confirmButtonState: ConfirmButtonTransitionState; open: boolean; onClose(); onConfirm(data: FormData); } -const OrderFulfillmentCancelDialog = withStyles(styles, { - name: "OrderFulfillmentCancelDialog" -})( - ({ +const OrderFulfillmentCancelDialog: React.FC< + OrderFulfillmentCancelDialogProps +> = props => { + const { confirmButtonState, - classes, + open, onConfirm, onClose - }: OrderFulfillmentCancelDialogProps) => { - const intl = useIntl(); + } = props; + const classes = useStyles(props); - return ( - -
- {({ change, data, submit }) => ( - <> - + const intl = useIntl(); + + return ( + + + {({ change, data, submit }) => ( + <> + + + + + + + + + + + + - - - - - - - - - - - - - - - )} -
- - ); - } -); + + + + )} + + + ); +}; OrderFulfillmentCancelDialog.displayName = "OrderFulfillmentCancelDialog"; export default OrderFulfillmentCancelDialog; diff --git a/src/orders/components/OrderFulfillmentDialog/OrderFulfillmentDialog.tsx b/src/orders/components/OrderFulfillmentDialog/OrderFulfillmentDialog.tsx index 7dbcc6003..e08f923e6 100644 --- a/src/orders/components/OrderFulfillmentDialog/OrderFulfillmentDialog.tsx +++ b/src/orders/components/OrderFulfillmentDialog/OrderFulfillmentDialog.tsx @@ -3,12 +3,7 @@ import Dialog from "@material-ui/core/Dialog"; import DialogActions from "@material-ui/core/DialogActions"; import DialogContent from "@material-ui/core/DialogContent"; import DialogTitle from "@material-ui/core/DialogTitle"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +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"; @@ -35,38 +30,37 @@ export interface FormData { trackingNumber: string; } -const styles = theme => - createStyles({ - colName: { - width: "auto" - }, - colNameLabel: { - marginLeft: AVATAR_MARGIN - }, - colQuantity: { - textAlign: "right", - width: 150 - }, - colQuantityContent: { - alignItems: "center", - display: "inline-flex" - }, - colSku: { - width: 120 - }, - quantityInput: { - width: "4rem" - }, - remainingQuantity: { - marginLeft: theme.spacing(), - paddingTop: 14 - }, - table: { - tableLayout: "fixed" - } - }); +const useStyles = makeStyles(theme => ({ + colName: { + width: "auto" + }, + colNameLabel: { + marginLeft: AVATAR_MARGIN + }, + colQuantity: { + textAlign: "right", + width: 150 + }, + colQuantityContent: { + alignItems: "center", + display: "inline-flex" + }, + colSku: { + width: 120 + }, + quantityInput: { + width: "4rem" + }, + remainingQuantity: { + marginLeft: theme.spacing(), + paddingTop: 14 + }, + table: { + tableLayout: "fixed" + } +})); -export interface OrderFulfillmentDialogProps extends WithStyles { +export interface OrderFulfillmentDialogProps { confirmButtonState: ConfirmButtonTransitionState; open: boolean; lines: OrderDetails_order_lines[]; @@ -74,153 +68,146 @@ export interface OrderFulfillmentDialogProps extends WithStyles { onSubmit(data: FormData); } -const OrderFulfillmentDialog = withStyles(styles, { - name: "OrderFulfillmentDialog" -})( - ({ - classes, - confirmButtonState, - open, - lines, - onClose, - onSubmit - }: OrderFulfillmentDialogProps) => { - const intl = useIntl(); +const OrderFulfillmentDialog: React.FC = props => { + const { confirmButtonState, open, lines, onClose, onSubmit } = props; - return ( - -
- lines.map( - product => product.quantity - product.quantityFulfilled - ), - [] - ), - trackingNumber: "" - }} - onSubmit={onSubmit} - > - {({ data, change }) => { - const handleQuantityChange = ( - productIndex: number, - event: React.ChangeEvent - ) => { - const newData = data.lines; - newData[productIndex] = event.target.value; - change({ - target: { - name: "lines", - value: newData - } - } as any); - }; - return ( - <> - - - - - - - - - - - - - - - - - - - - - {lines.map((product, productIndex) => { - const remainingQuantity = - product.quantity - product.quantityFulfilled; - return ( - - product.thumbnail.url)} - > - {product.productName} - - - {product.productSku} - - -
- - handleQuantityChange(productIndex, event) - } - error={ - remainingQuantity < data.lines[productIndex] - } - /> -
- / {remainingQuantity} -
+ const classes = useStyles(props); + const intl = useIntl(); + + return ( + + + lines.map( + product => product.quantity - product.quantityFulfilled + ), + [] + ), + trackingNumber: "" + }} + onSubmit={onSubmit} + > + {({ data, change }) => { + const handleQuantityChange = ( + productIndex: number, + event: React.ChangeEvent + ) => { + const newData = data.lines; + newData[productIndex] = event.target.value; + change({ + target: { + name: "lines", + value: newData + } + } as any); + }; + return ( + <> + + + +
+ + + + + + + + + + + + + + + + + {lines.map((product, productIndex) => { + const remainingQuantity = + product.quantity - product.quantityFulfilled; + return ( + + product.thumbnail.url)} + > + {product.productName} + + + {product.productSku} + + +
+ + handleQuantityChange(productIndex, event) + } + error={ + remainingQuantity < data.lines[productIndex] + } + /> +
+ / {remainingQuantity}
- - - ); - })} - -
- - - - - - - - - - - - ); - }} - -
- ); - } -); +
+ + + ); + })} + + + + + + + + + + + + + + ); + }} + + + ); +}; + OrderFulfillmentDialog.displayName = "OrderFulfillmentDialog"; export default OrderFulfillmentDialog; diff --git a/src/orders/components/OrderHistory/OrderHistory.tsx b/src/orders/components/OrderHistory/OrderHistory.tsx index dd423f3f3..d33d4eab4 100644 --- a/src/orders/components/OrderHistory/OrderHistory.tsx +++ b/src/orders/components/OrderHistory/OrderHistory.tsx @@ -1,9 +1,4 @@ -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import React from "react"; import { FormattedMessage, IntlShape, useIntl } from "react-intl"; @@ -177,74 +172,74 @@ const getEventMessage = (event: OrderDetails_order_events, intl: IntlShape) => { } }; -const styles = theme => - createStyles({ - header: { - fontWeight: 500, - marginBottom: theme.spacing(1) - }, - root: { marginTop: theme.spacing(4) }, - user: { - marginBottom: theme.spacing(1) - } - }); +const useStyles = makeStyles(theme => ({ + header: { + fontWeight: 500, + marginBottom: theme.spacing(1) + }, + root: { marginTop: theme.spacing(4) }, + user: { + marginBottom: theme.spacing(1) + } +})); -interface OrderHistoryProps extends WithStyles { +interface OrderHistoryProps { history: OrderDetails_order_events[]; onNoteAdd: (data: FormData) => void; } -const OrderHistory = withStyles(styles, { name: "OrderHistory" })( - ({ classes, history, onNoteAdd }: OrderHistoryProps) => { - const intl = useIntl(); +const OrderHistory: React.FC = props => { + const { history, onNoteAdd } = props; + const classes = useStyles(props); - return ( -
- - - -
- {history ? ( - -
- {({ change, data, reset, submit }) => ( - - )} - - {history - .slice() - .reverse() - .map(event => { - if (event.type === OrderEventsEnum.NOTE_ADDED) { - return ( - - ); - } + const intl = useIntl(); + + return ( +
+ + + +
+ {history ? ( + +
+ {({ change, data, reset, submit }) => ( + + )} + + {history + .slice() + .reverse() + .map(event => { + if (event.type === OrderEventsEnum.NOTE_ADDED) { return ( - ); - })} -
- ) : ( - - )} -
- ); - } -); + } + return ( + + ); + })} +
+ ) : ( + + )} +
+ ); +}; OrderHistory.displayName = "OrderHistory"; export default OrderHistory; diff --git a/src/orders/components/OrderList/OrderList.tsx b/src/orders/components/OrderList/OrderList.tsx index c799b5005..52babdc26 100644 --- a/src/orders/components/OrderList/OrderList.tsx +++ b/src/orders/components/OrderList/OrderList.tsx @@ -1,9 +1,4 @@ -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +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"; @@ -28,49 +23,44 @@ import { import { ListActions, ListProps } from "@saleor/types"; import { OrderList_orders_edges_node } from "../../types/OrderList"; -const styles = theme => - createStyles({ - [theme.breakpoints.up("lg")]: { - colCustomer: { - width: 220 - }, - colDate: {}, - colFulfillment: { - width: 230 - }, - colNumber: { - width: 120 - }, - colPayment: { - width: 220 - }, - colTotal: {} +const useStyles = makeStyles(theme => ({ + [theme.breakpoints.up("lg")]: { + colCustomer: { + width: 220 }, - colCustomer: {}, colDate: {}, - colFulfillment: {}, - colNumber: {}, - colPayment: {}, - colTotal: { - textAlign: "right" + colFulfillment: { + width: 230 }, - link: { - cursor: "pointer" - } - }); + colNumber: { + width: 120 + }, + colPayment: { + width: 220 + }, + colTotal: {} + }, + colCustomer: {}, + colDate: {}, + colFulfillment: {}, + colNumber: {}, + colPayment: {}, + colTotal: { + textAlign: "right" + }, + link: { + cursor: "pointer" + } +})); -interface OrderListProps - extends ListProps, - ListActions, - WithStyles { +interface OrderListProps extends ListProps, ListActions { orders: OrderList_orders_edges_node[]; } const numberOfColumns = 7; -export const OrderList = withStyles(styles, { name: "OrderList" })( - ({ - classes, +export const OrderList: React.FC = props => { + const { disabled, settings, orders, @@ -84,165 +74,166 @@ export const OrderList = withStyles(styles, { name: "OrderList" })( toggle, toggleAll, toolbar - }: OrderListProps) => { - const intl = useIntl(); + } = props; + const classes = useStyles(props); - const orderList = orders - ? orders.map(order => ({ - ...order, - paymentStatus: transformPaymentStatus(order.paymentStatus, intl), - status: transformOrderStatus(order.status, intl) - })) - : undefined; - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - {renderCollection( - orderList, - order => { - const isSelected = order ? isChecked(order.id) : false; + const intl = useIntl(); - return ( - - - toggle(order.id)} - /> - - - {maybe(() => order.number) ? ( - "#" + order.number - ) : ( - - )} - - - {maybe(() => order.created) ? ( - - ) : ( - - )} - - - {maybe(() => order.billingAddress) ? ( - <> - {order.billingAddress.firstName} -   - {order.billingAddress.lastName} - - ) : maybe(() => order.userEmail) !== undefined ? ( - order.userEmail - ) : ( - - )} - - - {maybe(() => order.paymentStatus.status) !== undefined ? ( - order.paymentStatus.status === null ? null : ( - - ) - ) : ( - - )} - - - {maybe(() => order.status) ? ( + const orderList = orders + ? orders.map(order => ({ + ...order, + paymentStatus: transformPaymentStatus(order.paymentStatus, intl), + status: transformOrderStatus(order.status, intl) + })) + : undefined; + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + {renderCollection( + orderList, + order => { + const isSelected = order ? isChecked(order.id) : false; + + return ( + + + toggle(order.id)} + /> + + + {maybe(() => order.number) ? ( + "#" + order.number + ) : ( + + )} + + + {maybe(() => order.created) ? ( + + ) : ( + + )} + + + {maybe(() => order.billingAddress) ? ( + <> + {order.billingAddress.firstName} +   + {order.billingAddress.lastName} + + ) : maybe(() => order.userEmail) !== undefined ? ( + order.userEmail + ) : ( + + )} + + + {maybe(() => order.paymentStatus.status) !== undefined ? ( + order.paymentStatus.status === null ? null : ( - ) : ( - - )} - - - {maybe(() => order.total.gross) ? ( - - ) : ( - - )} - - - ); - }, - () => ( - - - + ) + ) : ( + + )} + + + {maybe(() => order.status) ? ( + + ) : ( + + )} + + + {maybe(() => order.total.gross) ? ( + + ) : ( + + )} - ) - )} - -
- ); - } -); + ); + }, + () => ( + + + + + + ) + )} + + + ); +}; OrderList.displayName = "OrderList"; export default OrderList; diff --git a/src/orders/components/OrderPayment/OrderPayment.tsx b/src/orders/components/OrderPayment/OrderPayment.tsx index 76ce530a0..e8b020c4a 100644 --- a/src/orders/components/OrderPayment/OrderPayment.tsx +++ b/src/orders/components/OrderPayment/OrderPayment.tsx @@ -2,12 +2,7 @@ import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; import CardActions from "@material-ui/core/CardActions"; import CardContent from "@material-ui/core/CardContent"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -20,22 +15,21 @@ import { maybe, transformPaymentStatus } from "../../../misc"; import { OrderAction, OrderStatus } from "../../../types/globalTypes"; import { OrderDetails_order } from "../../types/OrderDetails"; -const styles = theme => - createStyles({ - root: { - ...theme.typography.body1, - lineHeight: 1.9, - width: "100%" - }, - textRight: { - textAlign: "right" - }, - totalRow: { - fontWeight: 600 - } - }); +const useStyles = makeStyles(theme => ({ + root: { + ...theme.typography.body1, + lineHeight: 1.9, + width: "100%" + }, + textRight: { + textAlign: "right" + }, + totalRow: { + fontWeight: 600 + } +})); -interface OrderPaymentProps extends WithStyles { +interface OrderPaymentProps { order: OrderDetails_order; onCapture: () => void; onMarkAsPaid: () => void; @@ -43,253 +37,245 @@ interface OrderPaymentProps extends WithStyles { onVoid: () => void; } -const OrderPayment = withStyles(styles, { name: "OrderPayment" })( - ({ - classes, - order, - onCapture, - onMarkAsPaid, - onRefund, - onVoid - }: OrderPaymentProps) => { - const intl = useIntl(); +const OrderPayment: React.FC = props => { + const { order, onCapture, onMarkAsPaid, onRefund, onVoid } = props; + const classes = useStyles(props); - const canCapture = maybe(() => order.actions, []).includes( - OrderAction.CAPTURE - ); - const canVoid = maybe(() => order.actions, []).includes(OrderAction.VOID); - const canRefund = maybe(() => order.actions, []).includes( - OrderAction.REFUND - ); - const canMarkAsPaid = maybe(() => order.actions, []).includes( - OrderAction.MARK_AS_PAID - ); - const payment = transformPaymentStatus( - maybe(() => order.paymentStatus), - intl - ); - return ( - - order.paymentStatus) === undefined ? ( - - ) : ( - - ) - } - /> - - - - - + + + + + + + + + + + + + + + + + +
+ const intl = useIntl(); + + const canCapture = maybe(() => order.actions, []).includes( + OrderAction.CAPTURE + ); + const canVoid = maybe(() => order.actions, []).includes(OrderAction.VOID); + const canRefund = maybe(() => order.actions, []).includes(OrderAction.REFUND); + const canMarkAsPaid = maybe(() => order.actions, []).includes( + OrderAction.MARK_AS_PAID + ); + const payment = transformPaymentStatus( + maybe(() => order.paymentStatus), + intl + ); + return ( + + order.paymentStatus) === undefined ? ( + + ) : ( + + ) + } + /> + + + + + + - - - - - - - - - - - - - - - - - - -
+ + + {maybe(() => order.lines) === undefined ? ( + + ) : ( line.quantity) + .reduce((curr, prev) => prev + curr, 0) + }} /> - - {maybe(() => order.lines) === undefined ? ( - - ) : ( - line.quantity) - .reduce((curr, prev) => prev + curr, 0) - }} - /> - )} - - {maybe(() => order.subtotal.gross) === undefined ? ( - - ) : ( - - )} -
- - - {maybe(() => order.total.tax) === undefined ? ( - - ) : order.total.tax.amount > 0 ? ( - intl.formatMessage({ - defaultMessage: "VAT included", - description: "vat included in order price" - }) - ) : ( - intl.formatMessage({ - defaultMessage: "does not apply", - description: "vat not included in order price", - id: "orderPaymentVATDoesNotApply" - }) - )} - - {maybe(() => order.total.tax) === undefined ? ( - - ) : ( - - )} -
- - - {maybe(() => order.shippingMethodName) === undefined && - maybe(() => order.shippingPrice) === undefined ? ( - - ) : order.shippingMethodName === null ? ( - intl.formatMessage({ - defaultMessage: "does not apply", - description: "order does not require shipping", - id: "orderPaymentShippingDoesNotApply" - }) - ) : ( - order.shippingMethodName - )} - - {maybe(() => order.shippingPrice.gross) === undefined ? ( - - ) : ( - - )} -
- - - - {maybe(() => order.total.gross) === undefined ? ( - - ) : ( - - )} -
- -
- - - - - - - - - - - - - - - - -
- - - {maybe(() => order.totalAuthorized.amount) === undefined ? ( - - ) : ( - - )} -
- - - {maybe(() => order.totalCaptured.amount) === undefined ? ( - - ) : ( - - )} -
- - - {maybe( - () => order.total.gross.amount && order.totalCaptured.amount - ) === undefined ? ( - - ) : ( - - )} -
- - {maybe(() => order.status) !== OrderStatus.CANCELED && - (canCapture || canRefund || canVoid || canMarkAsPaid) && ( - <> -
- - {canCapture && ( - )} - {canRefund && ( - + 		+ {maybe(() => order.subtotal.gross) === undefined ? ( + + ) : ( + )} - {canVoid && ( - +
+ + + {maybe(() => order.total.tax) === undefined ? ( + + ) : order.total.tax.amount > 0 ? ( + intl.formatMessage({ + defaultMessage: "VAT included", + description: "vat included in order price" + }) + ) : ( + intl.formatMessage({ + defaultMessage: "does not apply", + description: "vat not included in order price", + id: "orderPaymentVATDoesNotApply" + }) )} - {canMarkAsPaid && ( - + + {maybe(() => order.total.tax) === undefined ? ( + + ) : ( + )} - - - )} - - ); - } -); +
+ + + {maybe(() => order.shippingMethodName) === undefined && + maybe(() => order.shippingPrice) === undefined ? ( + + ) : order.shippingMethodName === null ? ( + intl.formatMessage({ + defaultMessage: "does not apply", + description: "order does not require shipping", + id: "orderPaymentShippingDoesNotApply" + }) + ) : ( + order.shippingMethodName + )} + + {maybe(() => order.shippingPrice.gross) === undefined ? ( + + ) : ( + + )} +
+ + + + {maybe(() => order.total.gross) === undefined ? ( + + ) : ( + + )} +
+ +
+ + + + + + + + + + + + + + + + +
+ + + {maybe(() => order.totalAuthorized.amount) === undefined ? ( + + ) : ( + + )} +
+ + + {maybe(() => order.totalCaptured.amount) === undefined ? ( + + ) : ( + + )} +
+ + + {maybe( + () => order.total.gross.amount && order.totalCaptured.amount + ) === undefined ? ( + + ) : ( + + )} +
+ + {maybe(() => order.status) !== OrderStatus.CANCELED && + (canCapture || canRefund || canVoid || canMarkAsPaid) && ( + <> +
+ + {canCapture && ( + + )} + {canRefund && ( + + )} + {canVoid && ( + + )} + {canMarkAsPaid && ( + + )} + + + )} + + ); +}; OrderPayment.displayName = "OrderPayment"; export default OrderPayment; diff --git a/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx b/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx index 585aba999..e1d5b55da 100644 --- a/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx +++ b/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx @@ -4,12 +4,7 @@ import Dialog from "@material-ui/core/Dialog"; import DialogActions from "@material-ui/core/DialogActions"; import DialogContent from "@material-ui/core/DialogContent"; import DialogTitle from "@material-ui/core/DialogTitle"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +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"; @@ -34,49 +29,48 @@ import { SearchOrderVariant_search_edges_node_variants } from "../../types/SearchOrderVariant"; -const styles = theme => - createStyles({ - avatar: { - paddingLeft: 0 - }, - colName: { - paddingLeft: 0 - }, - colVariantCheckbox: { - padding: 0 - }, - content: { - overflowY: "scroll" - }, - grayText: { - color: theme.palette.text.disabled - }, - loadMoreLoaderContainer: { - alignItems: "center", - display: "flex", - height: theme.spacing(3), - justifyContent: "center" - }, - overflow: { - overflowY: "visible" - }, - productCheckboxCell: { - "&:first-child": { - paddingLeft: 0, - paddingRight: 0 - } - }, - textRight: { - textAlign: "right" - }, - variantCheckbox: { - left: theme.spacing(), - position: "relative" - }, - wideCell: { - width: "100%" +const useStyles = makeStyles(theme => ({ + avatar: { + paddingLeft: 0 + }, + colName: { + paddingLeft: 0 + }, + colVariantCheckbox: { + padding: 0 + }, + content: { + overflowY: "scroll" + }, + grayText: { + color: theme.palette.text.disabled + }, + loadMoreLoaderContainer: { + alignItems: "center", + display: "flex", + height: theme.spacing(3), + justifyContent: "center" + }, + overflow: { + overflowY: "visible" + }, + productCheckboxCell: { + "&:first-child": { + paddingLeft: 0, + paddingRight: 0 } - }); + }, + textRight: { + textAlign: "right" + }, + variantCheckbox: { + left: theme.spacing(), + position: "relative" + }, + wideCell: { + width: "100%" + } +})); type SetVariantsAction = ( data: SearchOrderVariant_search_edges_node_variants[] @@ -154,11 +148,8 @@ const onVariantAdd = ( ) : setVariants([...variants, variant]); -const OrderProductAddDialog = withStyles(styles, { - name: "OrderProductAddDialog" -})( - ({ - classes, +const OrderProductAddDialog: React.FC = props => { + const { confirmButtonState, open, loading, @@ -168,181 +159,182 @@ const OrderProductAddDialog = withStyles(styles, { onFetchMore, onClose, onSubmit - }: OrderProductAddDialogProps & WithStyles) => { - const intl = useIntl(); - const [query, onQueryChange] = useSearchQuery(onFetch); - const [variants, setVariants] = React.useState< - SearchOrderVariant_search_edges_node_variants[] - >([]); + } = props; + const classes = useStyles(props); - const selectedVariantsToProductsMap = products - ? products.map(product => - product.variants.map(variant => isVariantSelected(variant, variants)) - ) - : []; - const productsWithAllVariantsSelected = products - ? products.map(product => - hasAllVariantsSelected(product.variants, variants) - ) - : []; + const intl = useIntl(); + const [query, onQueryChange] = useSearchQuery(onFetch); + const [variants, setVariants] = React.useState< + SearchOrderVariant_search_edges_node_variants[] + >([]); - const handleSubmit = () => onSubmit(variants); + const selectedVariantsToProductsMap = products + ? products.map(product => + product.variants.map(variant => isVariantSelected(variant, variants)) + ) + : []; + const productsWithAllVariantsSelected = products + ? products.map(product => + hasAllVariantsSelected(product.variants, variants) + ) + : []; - return ( - - - - - - - }} - /> - - - - -
- } - threshold={10} - > - - - {renderCollection( - products, - (product, productIndex) => ( - - - - - onProductAdd( - product, - productIndex, - productsWithAllVariantsSelected, - variants, - setVariants - ) - } - /> - - product.thumbnail.url)} - /> - - {maybe(() => product.name)} - - - {maybe(() => product.variants, []).map( - (variant, variantIndex) => ( - - - - - onVariantAdd( - variant, - variantIndex, - productIndex, - variants, - selectedVariantsToProductsMap, - setVariants - ) - } - /> - - -
{variant.name}
-
- -
- - - - - - ) - )} - - ), - () => ( + const handleSubmit = () => onSubmit(variants); + + return ( + + + + + + + }} + /> + + + + + + } + threshold={10} + > +
+ + {renderCollection( + products, + (product, productIndex) => ( + - - + + + onProductAdd( + product, + productIndex, + productsWithAllVariantsSelected, + variants, + setVariants + ) + } + /> + + product.thumbnail.url)} + /> + + {maybe(() => product.name)} - ) - )} - -
- - - - - - - - - - ); - } -); + {maybe(() => product.variants, []).map( + (variant, variantIndex) => ( + + + + + onVariantAdd( + variant, + variantIndex, + productIndex, + variants, + selectedVariantsToProductsMap, + setVariants + ) + } + /> + + +
{variant.name}
+
+ +
+ + + + + + ) + )} + + ), + () => ( + + + + + + ) + )} + + + + + + + + + + + + ); +}; OrderProductAddDialog.displayName = "OrderProductAddDialog"; export default OrderProductAddDialog; diff --git a/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx b/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx index 1da23f7a0..0aa8900f2 100644 --- a/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx +++ b/src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx @@ -3,12 +3,7 @@ import Dialog from "@material-ui/core/Dialog"; import DialogActions from "@material-ui/core/DialogActions"; import DialogContent from "@material-ui/core/DialogContent"; import DialogTitle from "@material-ui/core/DialogTitle"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import React from "react"; import { FormattedMessage } from "react-intl"; @@ -25,27 +20,26 @@ export interface FormData { shippingMethod: string; } -const styles = theme => - createStyles({ - dialog: { - overflowY: "visible" - }, - menuItem: { - display: "flex", - width: "100%" - }, - root: { - overflowY: "visible", - width: theme.breakpoints.values.sm - }, - shippingMethodName: { - flex: 1, - overflowX: "hidden", - textOverflow: "ellipsis" - } - }); +const useStyles = makeStyles(theme => ({ + dialog: { + overflowY: "visible" + }, + menuItem: { + display: "flex", + width: "100%" + }, + root: { + overflowY: "visible", + width: theme.breakpoints.values.sm + }, + shippingMethodName: { + flex: 1, + overflowX: "hidden", + textOverflow: "ellipsis" + } +})); -interface OrderShippingMethodEditDialogProps extends WithStyles { +interface OrderShippingMethodEditDialogProps { confirmButtonState: ConfirmButtonTransitionState; open: boolean; shippingMethod: string; @@ -54,73 +48,73 @@ interface OrderShippingMethodEditDialogProps extends WithStyles { onSubmit?(data: FormData); } -const OrderShippingMethodEditDialog = withStyles(styles, { - name: "OrderShippingMethodEditDialog" -})( - ({ - classes, +const OrderShippingMethodEditDialog: React.FC< + OrderShippingMethodEditDialogProps +> = props => { + const { confirmButtonState, open, shippingMethod, shippingMethods, onClose, onSubmit - }: OrderShippingMethodEditDialogProps) => { - const choices = shippingMethods - ? shippingMethods.map(s => ({ - label: ( -
- {s.name} -   - - - -
- ), - value: s.id - })) - : []; - const initialForm: FormData = { - shippingMethod - }; - return ( - - - - -
- {({ change, data }) => ( - <> - - - - - - - - - - - )} -
- - ); - } -); + } = props; + const classes = useStyles(props); + + const choices = shippingMethods + ? shippingMethods.map(s => ({ + label: ( +
+ {s.name} +   + + + +
+ ), + value: s.id + })) + : []; + const initialForm: FormData = { + shippingMethod + }; + return ( + + + + +
+ {({ change, data }) => ( + <> + + + + + + + + + + + )} +
+ + ); +}; OrderShippingMethodEditDialog.displayName = "OrderShippingMethodEditDialog"; export default OrderShippingMethodEditDialog; diff --git a/src/orders/components/OrderUnfulfilledItems/OrderUnfulfilledItems.tsx b/src/orders/components/OrderUnfulfilledItems/OrderUnfulfilledItems.tsx index c0ff1a313..7dac6d301 100644 --- a/src/orders/components/OrderUnfulfilledItems/OrderUnfulfilledItems.tsx +++ b/src/orders/components/OrderUnfulfilledItems/OrderUnfulfilledItems.tsx @@ -1,7 +1,7 @@ import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; import CardActions from "@material-ui/core/CardActions"; -import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles"; +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"; @@ -20,7 +20,7 @@ import TableCellAvatar, { import { maybe } from "../../../misc"; import { OrderDetails_order_lines } from "../../types/OrderDetails"; -const styles = createStyles({ +const useStyles = makeStyles({ clickableRow: { cursor: "pointer" }, @@ -51,15 +51,16 @@ const styles = createStyles({ } }); -interface OrderUnfulfilledItemsProps extends WithStyles { +interface OrderUnfulfilledItemsProps { canFulfill: boolean; lines: OrderDetails_order_lines[]; onFulfill: () => void; } -const OrderUnfulfilledItems = withStyles(styles, { - name: "OrderUnfulfilledItems" -})(({ canFulfill, classes, lines, onFulfill }: OrderUnfulfilledItemsProps) => { +const OrderUnfulfilledItems: React.FC = props => { + const { canFulfill, lines, onFulfill } = props; + const classes = useStyles(props); + const intl = useIntl(); return ( @@ -169,6 +170,6 @@ const OrderUnfulfilledItems = withStyles(styles, { )}
); -}); +}; OrderUnfulfilledItems.displayName = "OrderUnfulfilledItems"; export default OrderUnfulfilledItems; diff --git a/src/pages/components/PageDetailsPage/index.ts b/src/pages/components/PageDetailsPage/index.ts index c299df7ee..20a714c9c 100644 --- a/src/pages/components/PageDetailsPage/index.ts +++ b/src/pages/components/PageDetailsPage/index.ts @@ -1,2 +1,2 @@ -export { default } from './PageDetailsPage'; -export * from './PageDetailsPage'; \ No newline at end of file +export { default } from "./PageDetailsPage"; +export * from "./PageDetailsPage"; diff --git a/src/pages/components/PageInfo/PageInfo.tsx b/src/pages/components/PageInfo/PageInfo.tsx index 955aa6892..a319d8f72 100644 --- a/src/pages/components/PageInfo/PageInfo.tsx +++ b/src/pages/components/PageInfo/PageInfo.tsx @@ -1,6 +1,6 @@ import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; -import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; import React from "react"; import { useIntl } from "react-intl"; @@ -22,61 +22,53 @@ export interface PageInfoProps { onChange: (event: React.ChangeEvent) => void; } -const styles = createStyles({ +const useStyles = makeStyles({ root: { overflow: "visible" } }); -const PageInfo = withStyles(styles, { - name: "PageInfo" -})( - ({ - classes, - data, - disabled, - errors, - page, - onChange - }: PageInfoProps & WithStyles) => { - const intl = useIntl(); +const PageInfo: React.FC = props => { + const { data, disabled, errors, page, onChange } = props; + const classes = useStyles(props); - return ( - - + + + - - - - JSON.parse(page.contentJson))} - label={intl.formatMessage({ - defaultMessage: "Content", - description: "page content" - })} - name={"content" as keyof FormData} - onChange={onChange} - /> - - - ); - } -); + + JSON.parse(page.contentJson))} + label={intl.formatMessage({ + defaultMessage: "Content", + description: "page content" + })} + name={"content" as keyof FormData} + onChange={onChange} + /> + + + ); +}; PageInfo.displayName = "PageInfo"; export default PageInfo; diff --git a/src/pages/components/PageInfo/index.ts b/src/pages/components/PageInfo/index.ts index 8bcf98a76..ae5d57a86 100644 --- a/src/pages/components/PageInfo/index.ts +++ b/src/pages/components/PageInfo/index.ts @@ -1,2 +1,2 @@ -export { default } from './PageInfo'; -export * from './PageInfo'; \ No newline at end of file +export { default } from "./PageInfo"; +export * from "./PageInfo"; diff --git a/src/pages/components/PageList/PageList.tsx b/src/pages/components/PageList/PageList.tsx index 3e7b48a02..006d96326 100644 --- a/src/pages/components/PageList/PageList.tsx +++ b/src/pages/components/PageList/PageList.tsx @@ -1,10 +1,5 @@ import Card from "@material-ui/core/Card"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +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"; @@ -26,32 +21,30 @@ export interface PageListProps extends ListProps, ListActions { pages: PageList_pages_edges_node[]; } -const styles = theme => - createStyles({ - [theme.breakpoints.up("lg")]: { - colSlug: { - width: 250 - }, - colTitle: {}, - colVisibility: { - width: 200 - } +const useStyles = makeStyles(theme => ({ + [theme.breakpoints.up("lg")]: { + colSlug: { + width: 250 }, - colSlug: {}, - colTitle: { - paddingLeft: 0 - }, - colVisibility: {}, - link: { - cursor: "pointer" + colTitle: {}, + colVisibility: { + width: 200 } - }); + }, + colSlug: {}, + colTitle: { + paddingLeft: 0 + }, + colVisibility: {}, + link: { + cursor: "pointer" + } +})); const numberOfColumns = 4; -const PageList = withStyles(styles, { name: "PageList" })( - ({ - classes, +const PageList: React.FC = props => { + const { settings, pages, disabled, @@ -65,121 +58,120 @@ const PageList = withStyles(styles, { name: "PageList" })( toggle, toggleAll, toolbar - }: PageListProps & WithStyles) => { - const intl = useIntl(); + } = props; + const classes = useStyles(props); - return ( - - - - - - - - - - - - - - - - - - - - {renderCollection( - pages, - page => { - const isSelected = page ? isChecked(page.id) : false; + const intl = useIntl(); - return ( - - - toggle(page.id)} - /> - - - {maybe(() => page.title, )} - - - {maybe(() => page.slug, )} - - - {maybe( - () => ( - - ), - - )} - - - ); - }, - () => ( - - - + return ( + +
+ + + + + + + + + + + + + + + + + + {renderCollection( + pages, + page => { + const isSelected = page ? isChecked(page.id) : false; + + return ( + + + toggle(page.id)} + /> + + + {maybe(() => page.title, )} + + + {maybe(() => page.slug, )} + + + {maybe( + () => ( + + ), + + )} - ) - )} - -
- - ); - } -); + ); + }, + () => ( + + + + + + ) + )} + + + + ); +}; PageList.displayName = "PageList"; export default PageList; diff --git a/src/pages/components/PageList/index.ts b/src/pages/components/PageList/index.ts index 0b888e9db..ceef274c3 100644 --- a/src/pages/components/PageList/index.ts +++ b/src/pages/components/PageList/index.ts @@ -1,2 +1,2 @@ -export { default } from './PageList'; -export * from './PageList'; \ No newline at end of file +export { default } from "./PageList"; +export * from "./PageList"; diff --git a/src/pages/components/PageListPage/index.ts b/src/pages/components/PageListPage/index.ts index c5d589974..f91170df4 100644 --- a/src/pages/components/PageListPage/index.ts +++ b/src/pages/components/PageListPage/index.ts @@ -1,2 +1,2 @@ -export { default } from './PageListPage'; -export * from './PageListPage'; \ No newline at end of file +export { default } from "./PageListPage"; +export * from "./PageListPage"; diff --git a/src/pages/components/PageSlug/index.ts b/src/pages/components/PageSlug/index.ts index 06056b307..d307cb899 100644 --- a/src/pages/components/PageSlug/index.ts +++ b/src/pages/components/PageSlug/index.ts @@ -1,2 +1,2 @@ -export { default } from './PageSlug'; -export * from './PageSlug'; \ No newline at end of file +export { default } from "./PageSlug"; +export * from "./PageSlug"; diff --git a/src/plugins/components/PluginsList/PluginsList.tsx b/src/plugins/components/PluginsList/PluginsList.tsx index 82d446902..b8e694d06 100644 --- a/src/plugins/components/PluginsList/PluginsList.tsx +++ b/src/plugins/components/PluginsList/PluginsList.tsx @@ -1,10 +1,5 @@ import Card from "@material-ui/core/Card"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +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"; @@ -27,31 +22,29 @@ export interface PluginListProps extends ListProps { plugins: Plugins_plugins_edges_node[]; } -const styles = theme => - createStyles({ - [theme.breakpoints.up("lg")]: { - colAction: { - "& svg": { - color: theme.palette.primary.main - }, - textAlign: "right" +const useStyles = makeStyles(theme => ({ + [theme.breakpoints.up("lg")]: { + colAction: { + "& svg": { + color: theme.palette.primary.main }, - colActive: {}, - colName: {} + textAlign: "right" as "right" }, - colAction: {}, colActive: {}, - colName: {}, - link: { - cursor: "pointer" - } - }); + colName: {} + }, + colAction: {}, + colActive: {}, + colName: {}, + link: { + cursor: "pointer" + } +})); const numberOfColumns = 4; -const PluginList = withStyles(styles, { name: "PluginList" })( - ({ - classes, +const PluginList: React.FC = props => { + const { settings, plugins, disabled, @@ -60,96 +53,95 @@ const PluginList = withStyles(styles, { name: "PluginList" })( onRowClick, onUpdateListSettings, onPreviousPage - }: PluginListProps & WithStyles) => { - const intl = useIntl(); - return ( - - - - - {intl.formatMessage({ - defaultMessage: "Name", - description: "plugin name" - })} - - - {intl.formatMessage({ - defaultMessage: "Active", - description: "plugin status" - })} - - - {intl.formatMessage({ - defaultMessage: "Action", - description: "user action bar" - })} - - - - - - - - - {renderCollection( - plugins, - plugin => { - return ( - - - {maybe(() => plugin.name, )} - - - {maybe( - () => ( - - ), - - )} - - -
- -
- - - ); - }, - () => ( - - - {intl.formatMessage({ - defaultMessage: "No plugins found" - })} + } = props; + const classes = useStyles(props); + + const intl = useIntl(); + return ( + +
+ + + {intl.formatMessage({ + defaultMessage: "Name", + description: "plugin name" + })} + + + {intl.formatMessage({ + defaultMessage: "Active", + description: "plugin status" + })} + + + {intl.formatMessage({ + defaultMessage: "Action", + description: "user action bar" + })} + + + + + + + + + {renderCollection( + plugins, + plugin => { + return ( + + + {maybe(() => plugin.name, )} + + + {maybe( + () => ( + + ), + + )} + + +
+ +
- ) - )} - -
- - ); - } -); + ); + }, + () => ( + + + {intl.formatMessage({ + defaultMessage: "No plugins found" + })} + + + ) + )} + + + + ); +}; PluginList.displayName = "PluginList"; export default PluginList; diff --git a/src/productTypes/components/AssignAttributeDialog/index.ts b/src/productTypes/components/AssignAttributeDialog/index.ts index 2960aa002..b82623cee 100644 --- a/src/productTypes/components/AssignAttributeDialog/index.ts +++ b/src/productTypes/components/AssignAttributeDialog/index.ts @@ -1,2 +1,2 @@ -export { default } from './AssignAttributeDialog'; -export * from './AssignAttributeDialog'; \ No newline at end of file +export { default } from "./AssignAttributeDialog"; +export * from "./AssignAttributeDialog"; diff --git a/src/productTypes/components/ProductTypeAttributeUnassignDialog/index.ts b/src/productTypes/components/ProductTypeAttributeUnassignDialog/index.ts index dc8bd0a03..35eade813 100644 --- a/src/productTypes/components/ProductTypeAttributeUnassignDialog/index.ts +++ b/src/productTypes/components/ProductTypeAttributeUnassignDialog/index.ts @@ -1,2 +1,2 @@ -export { default } from './ProductTypeAttributeUnassignDialog'; -export * from './ProductTypeAttributeUnassignDialog'; \ No newline at end of file +export { default } from "./ProductTypeAttributeUnassignDialog"; +export * from "./ProductTypeAttributeUnassignDialog"; diff --git a/src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx b/src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx index d21b6749c..70ec32531 100644 --- a/src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx +++ b/src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx @@ -1,12 +1,7 @@ import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; import IconButton from "@material-ui/core/IconButton"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +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"; @@ -30,25 +25,24 @@ import { ProductTypeDetails_productType_variantAttributes } from "../../types/ProductTypeDetails"; -const styles = theme => - createStyles({ - colName: {}, - colSlug: { - width: 300 +const useStyles = makeStyles(theme => ({ + colName: {}, + colSlug: { + width: 300 + }, + iconCell: { + "&:last-child": { + paddingRight: 0 }, - iconCell: { - "&:last-child": { - paddingRight: 0 - }, - width: 48 + theme.spacing(1.5) - }, - link: { - cursor: "pointer" - }, - textLeft: { - textAlign: "left" - } - }); + width: 48 + theme.spacing(1.5) + }, + link: { + cursor: "pointer" + }, + textLeft: { + textAlign: "left" + } +})); interface ProductTypeAttributesProps extends ListActions { attributes: @@ -64,12 +58,10 @@ interface ProductTypeAttributesProps extends ListActions { const numberOfColumns = 5; -const ProductTypeAttributes = withStyles(styles, { - name: "ProductTypeAttributes" -})( - ({ +const ProductTypeAttributes: React.FC = props => { + const { attributes, - classes, + disabled, isChecked, selected, @@ -81,131 +73,132 @@ const ProductTypeAttributes = withStyles(styles, { onAttributeClick, onAttributeReorder, onAttributeUnassign - }: ProductTypeAttributesProps & WithStyles) => { - const intl = useIntl(); + } = props; + const classes = useStyles(props); - return ( - + - onAttributeAssign(AttributeTypeEnum[type])} - > - - - } - /> - - onAttributeAssign(AttributeTypeEnum[type])} > - - - - - - - - - - {renderCollection( - attributes, - (attribute, attributeIndex) => { - const isSelected = attribute ? isChecked(attribute.id) : false; + + + } + /> +
+ + + + + + + + + + + {renderCollection( + attributes, + (attribute, attributeIndex) => { + const isSelected = attribute ? isChecked(attribute.id) : false; - return ( - onAttributeClick(attribute.id) - : undefined - } - key={maybe(() => attribute.id)} - index={attributeIndex || 0} - data-tc="id" - data-tc-id={maybe(() => attribute.id)} - > - - toggle(attribute.id)} - /> - - - {maybe(() => attribute.name) ? ( - attribute.name - ) : ( - - )} - - - {maybe(() => attribute.slug) ? ( - attribute.slug - ) : ( - - )} - - - - onAttributeUnassign(attribute.id) - )} - > - - - - - ); - }, - () => ( - - - + return ( + onAttributeClick(attribute.id) + : undefined + } + key={maybe(() => attribute.id)} + index={attributeIndex || 0} + data-tc="id" + data-tc-id={maybe(() => attribute.id)} + > + + toggle(attribute.id)} + /> - - ) - )} - -
- - ); - } -); + + {maybe(() => attribute.name) ? ( + attribute.name + ) : ( + + )} + + + {maybe(() => attribute.slug) ? ( + attribute.slug + ) : ( + + )} + + + + onAttributeUnassign(attribute.id) + )} + > + + + + + ); + }, + () => ( + + + + + + ) + )} + + + + ); +}; ProductTypeAttributes.displayName = "ProductTypeAttributes"; export default ProductTypeAttributes; diff --git a/src/productTypes/components/ProductTypeBulkAttributeUnassignDialog/index.ts b/src/productTypes/components/ProductTypeBulkAttributeUnassignDialog/index.ts index e6df37e86..8724c5f55 100644 --- a/src/productTypes/components/ProductTypeBulkAttributeUnassignDialog/index.ts +++ b/src/productTypes/components/ProductTypeBulkAttributeUnassignDialog/index.ts @@ -1,2 +1,2 @@ -export { default } from './ProductTypeBulkAttributeUnassignDialog'; -export * from './ProductTypeBulkAttributeUnassignDialog'; \ No newline at end of file +export { default } from "./ProductTypeBulkAttributeUnassignDialog"; +export * from "./ProductTypeBulkAttributeUnassignDialog"; diff --git a/src/productTypes/components/ProductTypeDeleteDialog/index.ts b/src/productTypes/components/ProductTypeDeleteDialog/index.ts index 4c9e6f92d..70a362a77 100644 --- a/src/productTypes/components/ProductTypeDeleteDialog/index.ts +++ b/src/productTypes/components/ProductTypeDeleteDialog/index.ts @@ -1,2 +1,2 @@ -export { default } from './ProductTypeDeleteDialog'; -export * from './ProductTypeDeleteDialog'; \ No newline at end of file +export { default } from "./ProductTypeDeleteDialog"; +export * from "./ProductTypeDeleteDialog"; diff --git a/src/productTypes/components/ProductTypeDetails/ProductTypeDetails.tsx b/src/productTypes/components/ProductTypeDetails/ProductTypeDetails.tsx index 6a9d6643d..4283e5587 100644 --- a/src/productTypes/components/ProductTypeDetails/ProductTypeDetails.tsx +++ b/src/productTypes/components/ProductTypeDetails/ProductTypeDetails.tsx @@ -1,6 +1,6 @@ import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; -import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; import React from "react"; import { useIntl } from "react-intl"; @@ -9,13 +9,13 @@ import CardTitle from "@saleor/components/CardTitle"; import { commonMessages } from "@saleor/intl"; import { FormErrors } from "@saleor/types"; -const styles = createStyles({ +const useStyles = makeStyles({ root: { overflow: "visible" } }); -interface ProductTypeDetailsProps extends WithStyles { +interface ProductTypeDetailsProps { data?: { name: string; }; @@ -24,32 +24,33 @@ interface ProductTypeDetailsProps extends WithStyles { onChange: (event: React.ChangeEvent) => void; } -const ProductTypeDetails = withStyles(styles, { name: "ProductTypeDetails" })( - ({ classes, data, disabled, errors, onChange }: ProductTypeDetailsProps) => { - const intl = useIntl(); +const ProductTypeDetails: React.FC = props => { + const { data, disabled, errors, onChange } = props; + const classes = useStyles(props); - return ( - - + + + - - - - - ); - } -); + + + ); +}; ProductTypeDetails.displayName = "ProductTypeDetails"; export default ProductTypeDetails; diff --git a/src/productTypes/components/ProductTypeList/ProductTypeList.tsx b/src/productTypes/components/ProductTypeList/ProductTypeList.tsx index 03b4ff584..eb45189aa 100644 --- a/src/productTypes/components/ProductTypeList/ProductTypeList.tsx +++ b/src/productTypes/components/ProductTypeList/ProductTypeList.tsx @@ -1,9 +1,4 @@ -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +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"; @@ -21,39 +16,34 @@ import { maybe, renderCollection } from "../../../misc"; import { ListActions, ListProps } from "../../../types"; import { ProductTypeList_productTypes_edges_node } from "../../types/ProductTypeList"; -const styles = theme => - createStyles({ - [theme.breakpoints.up("lg")]: { - colName: {}, - colTax: { - width: 300 - }, - colType: { - width: 300 - } +const useStyles = makeStyles(theme => ({ + [theme.breakpoints.up("lg")]: { + colName: {}, + colTax: { + width: 300 }, - colName: { - paddingLeft: 0 - }, - colTax: {}, - colType: {}, - link: { - cursor: "pointer" + colType: { + width: 300 } - }); + }, + colName: { + paddingLeft: 0 + }, + colTax: {}, + colType: {}, + link: { + cursor: "pointer" + } +})); -interface ProductTypeListProps - extends ListProps, - ListActions, - WithStyles { +interface ProductTypeListProps extends ListProps, ListActions { productTypes: ProductTypeList_productTypes_edges_node[]; } const numberOfColumns = 4; -const ProductTypeList = withStyles(styles, { name: "ProductTypeList" })( - ({ - classes, +const ProductTypeList: React.FC = props => { + const { disabled, productTypes, pageInfo, @@ -65,140 +55,138 @@ const ProductTypeList = withStyles(styles, { name: "ProductTypeList" })( toggle, toggleAll, toolbar - }: ProductTypeListProps) => { - const intl = useIntl(); + } = props; + const classes = useStyles(props); - return ( - - - - - - - - - - - - - - - - - - - {renderCollection( - productTypes, - productType => { - const isSelected = productType - ? isChecked(productType.id) - : false; - return ( - productType.id)} - > - - toggle(productType.id)} - /> - - - {productType ? ( + const intl = useIntl(); + + return ( +
+ + + + + + + + + + + + + + + + + + {renderCollection( + productTypes, + productType => { + const isSelected = productType ? isChecked(productType.id) : false; + return ( + productType.id)} + > + + toggle(productType.id)} + /> + + + {productType ? ( + <> + {productType.name} + + {maybe(() => productType.hasVariants) + ? intl.formatMessage({ + defaultMessage: "Configurable", + description: "product type" + }) + : intl.formatMessage({ + defaultMessage: "Simple product", + description: "product type" + })} + + + ) : ( + + )} + + + {maybe(() => productType.isShippingRequired) !== undefined ? ( + productType.isShippingRequired ? ( <> - {productType.name} - - {maybe(() => productType.hasVariants) - ? intl.formatMessage({ - defaultMessage: "Configurable", - description: "product type" - }) - : intl.formatMessage({ - defaultMessage: "Simple product", - description: "product type" - })} - + ) : ( - - )} - - - {maybe(() => productType.isShippingRequired) !== - undefined ? ( - productType.isShippingRequired ? ( - <> - - - ) : ( - <> - - - ) - ) : ( - - )} - - - {maybe(() => productType.taxType) ? ( - productType.taxType.description - ) : ( - - )} - - - ); - }, - () => ( - - - + <> + + + ) + ) : ( + + )} + + + {maybe(() => productType.taxType) ? ( + productType.taxType.description + ) : ( + + )} - ) - )} - -
- ); - } -); + ); + }, + () => ( + + + + + + ) + )} + + + ); +}; ProductTypeList.displayName = "ProductTypeList"; export default ProductTypeList; diff --git a/src/productTypes/components/ProductTypeTaxes/ProductTypeTaxes.tsx b/src/productTypes/components/ProductTypeTaxes/ProductTypeTaxes.tsx index 3b2985c9a..ac2cdc27f 100644 --- a/src/productTypes/components/ProductTypeTaxes/ProductTypeTaxes.tsx +++ b/src/productTypes/components/ProductTypeTaxes/ProductTypeTaxes.tsx @@ -1,6 +1,6 @@ import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; -import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import React from "react"; import { useIntl } from "react-intl"; @@ -10,7 +10,7 @@ import { ProductTypeDetails_taxTypes } from "@saleor/productTypes/types/ProductT import { maybe } from "../../../misc"; import { ProductTypeForm } from "../ProductTypeDetailsPage/ProductTypeDetailsPage"; -interface ProductTypeTaxesProps extends WithStyles { +interface ProductTypeTaxesProps { data: { taxType: string; }; @@ -20,56 +20,50 @@ interface ProductTypeTaxesProps extends WithStyles { onChange: (event: React.ChangeEvent) => void; } -const styles = createStyles({ +const useStyles = makeStyles({ root: { overflow: "visible" } }); -const ProductTypeTaxes = withStyles(styles, { name: "ProductTypeTaxes" })( - ({ - classes, - data, - disabled, - taxTypes, - taxTypeDisplayName, - onChange - }: ProductTypeTaxesProps) => { - const intl = useIntl(); +const ProductTypeTaxes: React.FC = props => { + const { data, disabled, taxTypes, taxTypeDisplayName, onChange } = props; + const classes = useStyles(props); - return ( - - + + + + taxTypes.map(c => ({ label: c.description, value: c.taxCode })), + [] + )} + InputProps={{ + autoComplete: "off" + }} /> - - - taxTypes.map(c => ({ label: c.description, value: c.taxCode })), - [] - )} - InputProps={{ - autoComplete: "off" - }} - /> - - - ); - } -); + + + ); +}; ProductTypeTaxes.displayName = "ProductTypeTaxes"; export default ProductTypeTaxes; diff --git a/src/productTypes/views/ProductTypeUpdate/errors.tsx b/src/productTypes/views/ProductTypeUpdate/errors.tsx index d61ce121b..5e2c83535 100644 --- a/src/productTypes/views/ProductTypeUpdate/errors.tsx +++ b/src/productTypes/views/ProductTypeUpdate/errors.tsx @@ -8,16 +8,14 @@ interface ProductTypeUpdateErrorsState { formErrors: UserError[]; } interface ProductTypeUpdateErrorsProps { - children: ( - props: { - errors: ProductTypeUpdateErrorsState; - set: { - addAttributeErrors: (errors: UserError[]) => void; - editAttributeErrors: (errors: UserError[]) => void; - formErrors: (errors: UserError[]) => void; - }; - } - ) => React.ReactNode; + children: (props: { + errors: ProductTypeUpdateErrorsState; + set: { + addAttributeErrors: (errors: UserError[]) => void; + editAttributeErrors: (errors: UserError[]) => void; + formErrors: (errors: UserError[]) => void; + }; + }) => React.ReactNode; } export class ProductTypeUpdateErrors extends React.Component< diff --git a/src/products/components/ProductAttributes/index.ts b/src/products/components/ProductAttributes/index.ts index 090807d29..340bf9b54 100644 --- a/src/products/components/ProductAttributes/index.ts +++ b/src/products/components/ProductAttributes/index.ts @@ -1,2 +1,2 @@ -export { default } from './ProductAttributes'; -export * from './ProductAttributes'; \ No newline at end of file +export { default } from "./ProductAttributes"; +export * from "./ProductAttributes"; diff --git a/src/products/components/ProductImageNavigation/ProductImageNavigation.tsx b/src/products/components/ProductImageNavigation/ProductImageNavigation.tsx index 21089272f..c56095efd 100644 --- a/src/products/components/ProductImageNavigation/ProductImageNavigation.tsx +++ b/src/products/components/ProductImageNavigation/ProductImageNavigation.tsx @@ -1,11 +1,6 @@ import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import classNames from "classnames"; import React from "react"; import { useIntl } from "react-intl"; @@ -13,40 +8,39 @@ import { useIntl } from "react-intl"; import CardTitle from "@saleor/components/CardTitle"; import Skeleton from "@saleor/components/Skeleton"; -const styles = theme => - createStyles({ - card: { - marginBottom: theme.spacing(2) - }, - highlightedImageContainer: { - borderColor: theme.palette.primary.main - }, - image: { - height: "100%", - objectFit: "contain", - userSelect: "none", - width: "100%" - }, - imageContainer: { - background: "#ffffff", - border: "2px solid #eaeaea", - borderRadius: theme.spacing(), - cursor: "pointer", - height: 48, - overflow: "hidden", - padding: theme.spacing(.5), - position: "relative" - }, - root: { - display: "grid", - gridColumnGap: theme.spacing(2), - gridRowGap: theme.spacing(1), - gridTemplateColumns: "repeat(4, 1fr)" - }, - toolbar: { marginTop: -theme.spacing(.5) } - }); +const useStyles = makeStyles(theme => ({ + card: { + marginBottom: theme.spacing(2) + }, + highlightedImageContainer: { + borderColor: theme.palette.primary.main + }, + image: { + height: "100%", + objectFit: "contain", + userSelect: "none", + width: "100%" + }, + imageContainer: { + background: "#ffffff", + border: "2px solid #eaeaea", + borderRadius: theme.spacing(), + cursor: "pointer", + height: 48, + overflow: "hidden", + padding: theme.spacing(0.5), + position: "relative" + }, + root: { + display: "grid", + gridColumnGap: theme.spacing(2), + gridRowGap: theme.spacing(1), + gridTemplateColumns: "repeat(4, 1fr)" + }, + toolbar: { marginTop: -theme.spacing(0.5) } +})); -interface ProductImageNavigationProps extends WithStyles { +interface ProductImageNavigationProps { disabled: boolean; images?: Array<{ id: string; @@ -56,49 +50,42 @@ interface ProductImageNavigationProps extends WithStyles { onRowClick: (id: string) => () => void; } -const ProductImageNavigation = withStyles(styles, { - name: "ProductImageNavigation" -})( - ({ - classes, - highlighted, - images, - onRowClick - }: ProductImageNavigationProps) => { - const intl = useIntl(); +const ProductImageNavigation: React.FC = props => { + const { highlighted, images, onRowClick } = props; + const classes = useStyles(props); - return ( - - - - {images === undefined ? ( - - ) : ( -
- {images.map(image => ( -
- -
- ))} -
- )} - - - ); - } -); + const intl = useIntl(); + + return ( + + + + {images === undefined ? ( + + ) : ( +
+ {images.map(image => ( +
+ +
+ ))} +
+ )} + + + ); +}; ProductImageNavigation.displayName = "ProductImageNavigation"; export default ProductImageNavigation; diff --git a/src/products/components/ProductImagePage/ProductImagePage.tsx b/src/products/components/ProductImagePage/ProductImagePage.tsx index dd1dc1ee8..69a988851 100644 --- a/src/products/components/ProductImagePage/ProductImagePage.tsx +++ b/src/products/components/ProductImagePage/ProductImagePage.tsx @@ -1,11 +1,6 @@ import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; import React from "react"; import { useIntl } from "react-intl"; @@ -22,24 +17,23 @@ import Skeleton from "@saleor/components/Skeleton"; import { commonMessages } from "@saleor/intl"; import ProductImageNavigation from "../ProductImageNavigation"; -const styles = theme => - createStyles({ - image: { - height: "100%", - objectFit: "contain", - width: "100%" - }, - imageContainer: { - background: "#ffffff", - border: "1px solid #eaeaea", - borderRadius: theme.spacing(), - margin: `0 auto ${theme.spacing(2)}px`, - maxWidth: 552, - padding: theme.spacing(2) - } - }); +const useStyles = makeStyles(theme => ({ + image: { + height: "100%", + objectFit: "contain", + width: "100%" + }, + imageContainer: { + background: "#ffffff", + border: "1px solid #eaeaea", + borderRadius: theme.spacing(), + margin: `0 auto ${theme.spacing(2)}px`, + maxWidth: 552, + padding: theme.spacing(2) + } +})); -interface ProductImagePageProps extends WithStyles { +interface ProductImagePageProps { image?: { id: string; alt: string; @@ -58,9 +52,8 @@ interface ProductImagePageProps extends WithStyles { onSubmit: (data: { description: string }) => void; } -const ProductImagePage = withStyles(styles, { name: "ProductImagePage" })( - ({ - classes, +const ProductImagePage: React.FC = props => { + const { disabled, image, images, @@ -70,90 +63,89 @@ const ProductImagePage = withStyles(styles, { name: "ProductImagePage" })( onDelete, onRowClick, onSubmit - }: ProductImagePageProps) => { - const intl = useIntl(); + } = props; - return ( -
- {({ change, data, hasChanged, submit }) => { - return ( - - {product} - + {({ change, data, hasChanged, submit }) => ( + + {product} + + +
+ - -
- + + + - - - - - - -
-
- - - - {!!image ? ( -
- -
- ) : ( - - )} - - -
- - - - ); - }} - - ); - } -); + + +
+
+ + + + {!!image ? ( +
+ +
+ ) : ( + + )} + + +
+ + + + )} + + ); +}; ProductImagePage.displayName = "ProductImagePage"; export default ProductImagePage; diff --git a/src/products/components/ProductImages/ProductImages.tsx b/src/products/components/ProductImages/ProductImages.tsx index 6dbf2a0a1..b132d134e 100644 --- a/src/products/components/ProductImages/ProductImages.tsx +++ b/src/products/components/ProductImages/ProductImages.tsx @@ -1,115 +1,108 @@ import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; -import classNames from "classnames"; -import { useIntl } from "react-intl"; - -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import CardTitle from "@saleor/components/CardTitle"; import ImageTile from "@saleor/components/ImageTile"; import ImageUpload from "@saleor/components/ImageUpload"; import { commonMessages } from "@saleor/intl"; import { ReorderAction } from "@saleor/types"; +import classNames from "classnames"; import React from "react"; +import { useIntl } from "react-intl"; import { SortableContainer, SortableElement } from "react-sortable-hoc"; import { ProductDetails_product_images } from "../../types/ProductDetails"; -const styles = theme => - createStyles({ - card: { - marginTop: theme.spacing(2), - [theme.breakpoints.down("sm")]: { - marginTop: 0 - } - }, - fileField: { - display: "none" - }, - icon: { - color: "rgba(255, 255, 255, 0.54)" - }, - image: { - height: "100%", - objectFit: "contain", - userSelect: "none", - width: "100%" - }, - imageContainer: { - "&:hover, &.dragged": { - "& $imageOverlay": { - display: "block" - } - }, - background: "#ffffff", - border: "1px solid #eaeaea", - borderRadius: theme.spacing(), - height: 140, - margin: "auto", - overflow: "hidden", - padding: theme.spacing(2), - position: "relative", - width: 140 - }, - imageGridContainer: { - position: "relative" - }, - imageOverlay: { - background: "rgba(0, 0, 0, 0.6)", - cursor: "move", - display: "none", - height: 140, - left: 0, - padding: theme.spacing(2), - position: "absolute", - top: 0, - width: 140 - }, - imageOverlayToolbar: { - alignContent: "flex-end", - display: "flex", - position: "relative", - right: -theme.spacing(3), - top: -theme.spacing(2) - }, - imageUpload: { - height: "100%", - left: 0, - position: "absolute", - top: 0, - width: "100%" - }, - imageUploadActive: { - zIndex: 1 - }, - imageUploadIcon: { - display: "none" - }, - imageUploadIconActive: { - display: "block" - }, - root: { - display: "grid", - gridColumnGap: theme.spacing(2), - gridRowGap: theme.spacing(2), - gridTemplateColumns: "repeat(4, 1fr)", - [theme.breakpoints.down("sm")]: { - gridTemplateColumns: "repeat(3, 1fr)" - }, - [theme.breakpoints.down("xs")]: { - gridTemplateColumns: "repeat(2, 1fr)" - } - }, - rootDragActive: { - opacity: 0.2 +const useStyles = makeStyles(theme => ({ + card: { + marginTop: theme.spacing(2), + [theme.breakpoints.down("sm")]: { + marginTop: 0 } - }); + }, + fileField: { + display: "none" + }, + icon: { + color: "rgba(255, 255, 255, 0.54)" + }, + image: { + height: "100%", + objectFit: "contain", + userSelect: "none", + width: "100%" + }, + imageContainer: { + "&:hover, &.dragged": { + "& $imageOverlay": { + display: "block" + } + }, + background: "#ffffff", + border: "1px solid #eaeaea", + borderRadius: theme.spacing(), + height: 140, + margin: "auto", + overflow: "hidden", + padding: theme.spacing(2), + position: "relative", + width: 140 + }, + imageGridContainer: { + position: "relative" + }, + imageOverlay: { + background: "rgba(0, 0, 0, 0.6)", + cursor: "move", + display: "none", + height: 140, + left: 0, + padding: theme.spacing(2), + position: "absolute", + top: 0, + width: 140 + }, + imageOverlayToolbar: { + alignContent: "flex-end", + display: "flex", + position: "relative", + right: -theme.spacing(3), + top: -theme.spacing(2) + }, + imageUpload: { + height: "100%", + left: 0, + position: "absolute", + top: 0, + width: "100%" + }, + imageUploadActive: { + zIndex: 1 + }, + imageUploadIcon: { + display: "none" + }, + imageUploadIconActive: { + display: "block" + }, + root: { + display: "grid", + gridColumnGap: theme.spacing(2), + gridRowGap: theme.spacing(2), + gridTemplateColumns: "repeat(4, 1fr)", + [theme.breakpoints.down("sm")]: { + gridTemplateColumns: "repeat(3, 1fr)" + }, + [theme.breakpoints.down("xs")]: { + gridTemplateColumns: "repeat(2, 1fr)" + } + }, + rootDragActive: { + opacity: 0.2 + } +})); -interface ProductImagesProps extends WithStyles { +interface ProductImagesProps { placeholderImage?: string; images: ProductDetails_product_images[]; loading?: boolean; @@ -147,34 +140,23 @@ interface ImageListContainerProps { } const ImageListContainer = SortableContainer( - withStyles(styles, { name: "ImageListContainer" })( - ({ - classes, - items, - onImageDelete, - onImageEdit, - ...props - }: ImageListContainerProps & WithStyles) => { - return ( -
- {items.map((image, index) => ( - - ))} -
- ); - } + ({ items, onImageDelete, onImageEdit, ...props }) => ( +
+ {items.map((image, index) => ( + + ))} +
) ); -const ProductImages = withStyles(styles, { name: "ProductImages" })( - ({ - classes, +const ProductImages: React.FC = props => { + const { images, placeholderImage, loading, @@ -182,83 +164,84 @@ const ProductImages = withStyles(styles, { name: "ProductImages" })( onImageDelete, onImageReorder, onImageUpload - }: ProductImagesProps) => { - const intl = useIntl(); - const upload = React.useRef(null); + } = props; - return ( - - - - onImageUpload(event.target.files[0])} - type="file" - ref={upload} - /> - - } - /> -
- {images === undefined ? ( - -
-
- -
+ const classes = useStyles(props); + const intl = useIntl(); + const upload = React.useRef(null); + + return ( + + + + onImageUpload(event.target.files[0])} + type="file" + ref={upload} + /> + + } + /> +
+ {images === undefined ? ( + +
+
+
- - ) : images.length > 0 ? ( - <> - - {({ isDragActive }) => ( - - - - )} - - - ) : ( - - )} -
- - ); - } -); +
+ + ) : images.length > 0 ? ( + <> + + {({ isDragActive }) => ( + + + + )} + + + ) : ( + + )} +
+ + ); +}; ProductImages.displayName = "ProductImages"; export default ProductImages; diff --git a/src/products/components/ProductList/ProductList.tsx b/src/products/components/ProductList/ProductList.tsx index 1dc17c578..2040e6235 100644 --- a/src/products/components/ProductList/ProductList.tsx +++ b/src/products/components/ProductList/ProductList.tsx @@ -1,9 +1,4 @@ -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +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"; @@ -38,59 +33,58 @@ import TDisplayColumn, { } from "@saleor/utils/columns/DisplayColumn"; import { getArrowDirection } from "@saleor/utils/sort"; -const styles = theme => - createStyles({ - [theme.breakpoints.up("lg")]: { - colName: { - width: "auto" - }, - colPrice: { - width: 200 - }, - colPublished: { - width: 200 - }, - colType: { - width: 200 - } - }, - colAttribute: { - width: 150 - }, - colFill: { - padding: 0, - width: "100%" - }, +const useStyles = makeStyles(theme => ({ + [theme.breakpoints.up("lg")]: { colName: { - "&$colNameFixed": { - width: 250 - } - }, - colNameFixed: {}, - colNameHeader: { - marginLeft: AVATAR_MARGIN + width: "auto" }, colPrice: { - textAlign: "right" + width: 200 }, - colPublished: {}, - colType: {}, - link: { - cursor: "pointer" + colPublished: { + width: 200 }, - table: { - tableLayout: "fixed" - }, - tableContainer: { - overflowX: "scroll" - }, - textLeft: { - textAlign: "left" - }, - textRight: { - textAlign: "right" + colType: { + width: 200 } - }); + }, + colAttribute: { + width: 150 + }, + colFill: { + padding: 0, + width: "100%" + }, + colName: { + "&$colNameFixed": { + width: 250 + } + }, + colNameFixed: {}, + colNameHeader: { + marginLeft: AVATAR_MARGIN + }, + colPrice: { + textAlign: "right" + }, + colPublished: {}, + colType: {}, + link: { + cursor: "pointer" + }, + table: { + tableLayout: "fixed" + }, + tableContainer: { + overflowX: "scroll" + }, + textLeft: { + textAlign: "left" + }, + textRight: { + textAlign: "right" + } +})); const DisplayColumn = TDisplayColumn as React.FunctionComponent< DisplayColumnProps @@ -99,17 +93,16 @@ const DisplayColumn = TDisplayColumn as React.FunctionComponent< interface ProductListProps extends ListProps, ListActions, - SortPage, - WithStyles { + SortPage { activeAttributeSortId: string; gridAttributes: AvailableInGridAttributes_grid_edges_node[]; products: ProductList_products_edges_node[]; } -export const ProductList = withStyles(styles, { name: "ProductList" })( - ({ +export const ProductList: React.FC = props => { + const { activeAttributeSortId, - classes, + settings, disabled, isChecked, @@ -126,296 +119,282 @@ export const ProductList = withStyles(styles, { name: "ProductList" })( onUpdateListSettings, onRowClick, onSort - }: ProductListProps) => { - const intl = useIntl(); + } = props; - const gridAttributesFromSettings = settings.columns.filter( - isAttributeColumnValue - ); - const numberOfColumns = 2 + settings.columns.length; + const classes = useStyles(props); + const intl = useIntl(); - return ( -
- - - - - - - - - - - {gridAttributesFromSettings.map(gridAttribute => ( - - ))} - - - - - +
+ + + + + + + + + + {gridAttributesFromSettings.map(gridAttribute => ( + + ))} + + + + + + 4 + })} + direction={ + sort.sort === ProductListUrlSortField.name + ? getArrowDirection(sort.asc) + : undefined + } + onClick={() => onSort(ProductListUrlSortField.name)} > + + + + + 4 - })} + className={classes.colType} direction={ - sort.sort === ProductListUrlSortField.name + sort.sort === ProductListUrlSortField.productType ? getArrowDirection(sort.asc) : undefined } - onClick={() => onSort(ProductListUrlSortField.name)} + onClick={() => onSort(ProductListUrlSortField.productType)} > - - - + - + + onSort(ProductListUrlSortField.status)} > + + + + {gridAttributesFromSettings.map(gridAttributeFromSettings => { + const attributeId = getAttributeIdFromColumnValue( + gridAttributeFromSettings + ); + + return ( onSort(ProductListUrlSortField.productType)} - > - - - - - + onSort(ProductListUrlSortField.attribute, attributeId) } - onClick={() => onSort(ProductListUrlSortField.status)} + key={gridAttributeFromSettings} > - + {maybe( + () => + gridAttributes.find( + gridAttribute => attributeId === gridAttribute.id + ).name, + + )} - - {gridAttributesFromSettings.map(gridAttributeFromSettings => { - const attributeId = getAttributeIdFromColumnValue( - gridAttributeFromSettings - ); + ); + })} + + onSort(ProductListUrlSortField.price)} + > + + + + + + + + + + + {renderCollection( + products, + product => { + const isSelected = product ? isChecked(product.id) : false; return ( - - onSort(ProductListUrlSortField.attribute, attributeId) - } - key={gridAttributeFromSettings} + product.id)} > - {maybe( - () => - gridAttributes.find( - gridAttribute => attributeId === gridAttribute.id - ).name, - - )} - - ); - })} - - onSort(ProductListUrlSortField.price)} - > - - - - - - - - - - - {renderCollection( - products, - product => { - const isSelected = product ? isChecked(product.id) : false; - - return ( - product.id)} - > - - toggle(product.id)} - /> - - product.thumbnail.url)} - data-tc="name" - > - {maybe(() => product.name, )} - - - - {product && product.productType ? ( - product.productType.name - ) : ( - - )} - - - - product.isAvailable)} - > - {product && - maybe(() => product.isAvailable !== undefined) ? ( - - ) : ( - - )} - - - {gridAttributesFromSettings.map(gridAttribute => ( - - {maybe(() => { - const attribute = product.attributes.find( - attribute => - attribute.attribute.id === - getAttributeIdFromColumnValue(gridAttribute) - ); - if (attribute) { - return attribute.values - .map(value => value.name) - .join(", "); - } - return "-"; - }, )} - - ))} - - - {maybe(() => product.basePrice) && - maybe(() => product.basePrice.amount) !== undefined && - maybe(() => product.basePrice.currency) !== - undefined ? ( - - ) : ( - - )} - - - - ); - }, - () => ( - - - + + toggle(product.id)} + /> + product.thumbnail.url)} + data-tc="name" + > + {maybe(() => product.name, )} + + + + {product && product.productType ? ( + product.productType.name + ) : ( + + )} + + + + product.isAvailable)} + > + {product && + maybe(() => product.isAvailable !== undefined) ? ( + + ) : ( + + )} + + + {gridAttributesFromSettings.map(gridAttribute => ( + + {maybe(() => { + const attribute = product.attributes.find( + attribute => + attribute.attribute.id === + getAttributeIdFromColumnValue(gridAttribute) + ); + if (attribute) { + return attribute.values + .map(value => value.name) + .join(", "); + } + return "-"; + }, )} + + ))} + + + {maybe(() => product.basePrice) && + maybe(() => product.basePrice.amount) !== undefined && + maybe(() => product.basePrice.currency) !== undefined ? ( + + ) : ( + + )} + + - ) - )} - -
-
- ); - } -); + ); + }, + () => ( + + + + + + ) + )} + + +
+ ); +}; ProductList.displayName = "ProductList"; export default ProductList; diff --git a/src/products/components/ProductOrganization/ProductOrganization.tsx b/src/products/components/ProductOrganization/ProductOrganization.tsx index 52151a425..312e7188d 100644 --- a/src/products/components/ProductOrganization/ProductOrganization.tsx +++ b/src/products/components/ProductOrganization/ProductOrganization.tsx @@ -1,11 +1,6 @@ import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -30,21 +25,20 @@ interface ProductType { name: string; } -const styles = theme => - createStyles({ - card: { - overflow: "visible" - }, - cardSubtitle: { - fontSize: "1rem", - marginBottom: theme.spacing(.5) - }, - label: { - marginBottom: theme.spacing(.5) - } - }); +const useStyles = makeStyles(theme => ({ + card: { + overflow: "visible" + }, + cardSubtitle: { + fontSize: "1rem", + marginBottom: theme.spacing(0.5) + }, + label: { + marginBottom: theme.spacing(0.5) + } +})); -interface ProductOrganizationProps extends WithStyles { +interface ProductOrganizationProps { canChangeType: boolean; categories?: SingleAutocompleteChoiceType[]; categoryInputDisplayValue: string; @@ -71,12 +65,12 @@ interface ProductOrganizationProps extends WithStyles { onProductTypeChange?: (event: ChangeEvent) => void; } -const ProductOrganization = withStyles(styles, { name: "ProductOrganization" })( - ({ +const ProductOrganization: React.FC = props => { + const { canChangeType, categories, categoryInputDisplayValue, - classes, + collections, collectionsInputDisplayValue, data, @@ -94,106 +88,107 @@ const ProductOrganization = withStyles(styles, { name: "ProductOrganization" })( onCategoryChange, onCollectionChange, onProductTypeChange - }: ProductOrganizationProps) => { - const intl = useIntl(); + } = props; - return ( - - - - {canChangeType ? ( - - ) : ( - <> - - - - {maybe(() => productType.name, "...")} - - - - - - {maybe( - () => - productType.hasVariants - ? intl.formatMessage({ - defaultMessage: "Configurable", - description: "product is configurable" - }) - : intl.formatMessage({ - defaultMessage: "Simple", - description: "product is not configurable" - }), - "..." - )} - - - )} - -
- + const classes = useStyles(props); + const intl = useIntl(); + + return ( + + + + {canChangeType ? ( - -
- - - - - ); - } -); + ) : ( + <> + + + + {maybe(() => productType.name, "...")} + + + + + + {maybe( + () => + productType.hasVariants + ? intl.formatMessage({ + defaultMessage: "Configurable", + description: "product is configurable" + }) + : intl.formatMessage({ + defaultMessage: "Simple", + description: "product is not configurable" + }), + "..." + )} + + + )} + +
+ + + +
+ + + + + ); +}; ProductOrganization.displayName = "ProductOrganization"; export default ProductOrganization; diff --git a/src/products/components/ProductPricing/ProductPricing.tsx b/src/products/components/ProductPricing/ProductPricing.tsx index 56c39da9c..e49b1b2c8 100644 --- a/src/products/components/ProductPricing/ProductPricing.tsx +++ b/src/products/components/ProductPricing/ProductPricing.tsx @@ -1,11 +1,6 @@ import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import React from "react"; import { useIntl } from "react-intl"; @@ -13,16 +8,15 @@ import CardTitle from "@saleor/components/CardTitle"; import ControlledCheckbox from "@saleor/components/ControlledCheckbox"; import PriceField from "@saleor/components/PriceField"; -const styles = theme => - createStyles({ - root: { - display: "grid", - gridColumnGap: theme.spacing(2), - gridTemplateColumns: "1fr 1fr" - } - }); +const useStyles = makeStyles(theme => ({ + root: { + display: "grid", + gridColumnGap: theme.spacing(2), + gridTemplateColumns: "1fr 1fr" + } +})); -interface ProductPricingProps extends WithStyles { +interface ProductPricingProps { currency?: string; data: { chargeTaxes: boolean; @@ -32,46 +26,47 @@ interface ProductPricingProps extends WithStyles { onChange: (event: React.ChangeEvent) => void; } -const ProductPricing = withStyles(styles, { name: "ProductPricing" })( - ({ classes, currency, data, disabled, onChange }: ProductPricingProps) => { - const intl = useIntl(); +const ProductPricing: React.FC = props => { + const { currency, data, disabled, onChange } = props; + const classes = useStyles(props); - return ( - - + + - + + +
+ - - -
- -
- - - ); - } -); +
+ + + ); +}; ProductPricing.displayName = "ProductPricing"; export default ProductPricing; diff --git a/src/products/components/ProductStock/ProductStock.tsx b/src/products/components/ProductStock/ProductStock.tsx index e9af6d832..a7f1fe670 100644 --- a/src/products/components/ProductStock/ProductStock.tsx +++ b/src/products/components/ProductStock/ProductStock.tsx @@ -1,11 +1,6 @@ import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; import React from "react"; import { useIntl } from "react-intl"; @@ -14,16 +9,15 @@ import CardTitle from "@saleor/components/CardTitle"; import { maybe } from "../../../misc"; import { ProductDetails_product } from "../../types/ProductDetails"; -const styles = theme => - createStyles({ - root: { - display: "grid", - gridColumnGap: theme.spacing(2), - gridTemplateColumns: "1fr 1fr" - } - }); +const useStyles = makeStyles(theme => ({ + root: { + display: "grid", + gridColumnGap: theme.spacing(2), + gridTemplateColumns: "1fr 1fr" + } +})); -interface ProductStockProps extends WithStyles { +interface ProductStockProps { data: { sku: string; stockQuantity: number; @@ -34,71 +28,65 @@ interface ProductStockProps extends WithStyles { onChange: (event: React.ChangeEvent) => void; } -const ProductStock = withStyles(styles, { name: "ProductStock" })( - ({ - classes, - data, - disabled, - product, - onChange, - errors - }: ProductStockProps) => { - const intl = useIntl(); +const ProductStock: React.FC = props => { + const { data, disabled, product, onChange, errors } = props; + const classes = useStyles(props); - return ( - - - -
- - product.variants[0].quantityAllocated - ) - } - ) - : undefined - } - /> -
- - - ); - } -); + const intl = useIntl(); + + return ( + + + +
+ + product.variants[0].quantityAllocated + ) + } + ) + : undefined + } + /> +
+ + + ); +}; ProductStock.displayName = "ProductStock"; export default ProductStock; diff --git a/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx b/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx index c6b53ec82..48a77b484 100644 --- a/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx +++ b/src/products/components/ProductVariantDeleteDialog/ProductVariantDeleteDialog.tsx @@ -4,12 +4,7 @@ import DialogActions from "@material-ui/core/DialogActions"; import DialogContent from "@material-ui/core/DialogContent"; import DialogContentText from "@material-ui/core/DialogContentText"; import DialogTitle from "@material-ui/core/DialogTitle"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import React from "react"; import { FormattedMessage } from "react-intl"; @@ -18,19 +13,17 @@ import ConfirmButton, { } from "@saleor/components/ConfirmButton"; import { buttonMessages } from "@saleor/intl"; -const styles = theme => - createStyles({ - deleteButton: { - "&:hover": { - backgroundColor: theme.palette.error.main - }, - backgroundColor: theme.palette.error.main, - color: theme.palette.error.contrastText - } - }); +const useStyles = makeStyles(theme => ({ + deleteButton: { + "&:hover": { + backgroundColor: theme.palette.error.main + }, + backgroundColor: theme.palette.error.main, + color: theme.palette.error.contrastText + } +})); -export interface ProductVariantDeleteDialogProps - extends WithStyles { +export interface ProductVariantDeleteDialogProps { confirmButtonState: ConfirmButtonTransitionState; open: boolean; name: string; @@ -38,17 +31,14 @@ export interface ProductVariantDeleteDialogProps onConfirm?(); } -const ProductVariantDeleteDialog = withStyles(styles, { - name: "ProductVariantDeleteDialog" -})( - ({ - classes, - confirmButtonState, - name, - open, - onConfirm, - onClose - }: ProductVariantDeleteDialogProps) => ( +const ProductVariantDeleteDialog: React.FC< + ProductVariantDeleteDialogProps +> = props => { + const { confirmButtonState, name, open, onConfirm, onClose } = props; + + const classes = useStyles(props); + + return ( - ) -); + ); +}; ProductVariantDeleteDialog.displayName = "ProductVariantDeleteDialog"; export default ProductVariantDeleteDialog; diff --git a/src/products/components/ProductVariantImageSelectDialog/ProductVariantImageSelectDialog.tsx b/src/products/components/ProductVariantImageSelectDialog/ProductVariantImageSelectDialog.tsx index 13ec51bbf..4c85038d1 100644 --- a/src/products/components/ProductVariantImageSelectDialog/ProductVariantImageSelectDialog.tsx +++ b/src/products/components/ProductVariantImageSelectDialog/ProductVariantImageSelectDialog.tsx @@ -3,12 +3,7 @@ import Dialog from "@material-ui/core/Dialog"; import DialogActions from "@material-ui/core/DialogActions"; import DialogContent from "@material-ui/core/DialogContent"; import DialogTitle from "@material-ui/core/DialogTitle"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import classNames from "classnames"; import React from "react"; import { FormattedMessage } from "react-intl"; @@ -16,43 +11,41 @@ import { FormattedMessage } from "react-intl"; import { buttonMessages } from "@saleor/intl"; import { ProductImage } from "../../types/ProductImage"; -const styles = theme => - createStyles({ - image: { - height: "100%", - objectFit: "contain", - userSelect: "none", - width: "100%" - }, - imageContainer: { - background: "#ffffff", - border: "1px solid #eaeaea", - borderRadius: theme.spacing(), - cursor: "pointer", - height: theme.spacing(21.5), - overflow: "hidden", - padding: theme.spacing(2), - position: "relative", - transitionDuration: theme.transitions.duration.standard + "ms" - }, - root: { - display: "grid", - gridColumnGap: theme.spacing(2), - gridRowGap: theme.spacing(2), - gridTemplateColumns: "repeat(3, 1fr)", - maxWidth: "100%", - width: theme.breakpoints.values.lg, - [theme.breakpoints.down("sm")]: { - gridTemplateColumns: "repeat(2, 1fr)" - } - }, - selectedImageContainer: { - borderColor: theme.palette.primary.main +const useStyles = makeStyles(theme => ({ + image: { + height: "100%", + objectFit: "contain", + userSelect: "none", + width: "100%" + }, + imageContainer: { + background: "#ffffff", + border: "1px solid #eaeaea", + borderRadius: theme.spacing(), + cursor: "pointer", + height: theme.spacing(21.5), + overflow: "hidden", + padding: theme.spacing(2), + position: "relative", + transitionDuration: theme.transitions.duration.standard + "ms" + }, + root: { + display: "grid", + gridColumnGap: theme.spacing(2), + gridRowGap: theme.spacing(2), + gridTemplateColumns: "repeat(3, 1fr)", + maxWidth: "100%", + width: theme.breakpoints.values.lg, + [theme.breakpoints.down("sm")]: { + gridTemplateColumns: "repeat(2, 1fr)" } - }); + }, + selectedImageContainer: { + borderColor: theme.palette.primary.main + } +})); -interface ProductVariantImageSelectDialogProps - extends WithStyles { +interface ProductVariantImageSelectDialogProps { images?: ProductImage[]; selectedImages?: string[]; open: boolean; @@ -60,17 +53,14 @@ interface ProductVariantImageSelectDialogProps onImageSelect(id: string); } -const ProductVariantImageSelectDialog = withStyles(styles, { - name: "ProductVariantImageSelectDialog" -})( - ({ - classes, - images, - open, - selectedImages, - onClose, - onImageSelect - }: ProductVariantImageSelectDialogProps) => ( +const ProductVariantImageSelectDialog: React.FC< + ProductVariantImageSelectDialogProps +> = props => { + const { images, open, selectedImages, onClose, onImageSelect } = props; + + const classes = useStyles(props); + + return ( - ) -); + ); +}; ProductVariantImageSelectDialog.displayName = "ProductVariantImageSelectDialog"; export default ProductVariantImageSelectDialog; diff --git a/src/products/components/ProductVariantImages/ProductVariantImages.tsx b/src/products/components/ProductVariantImages/ProductVariantImages.tsx index 396d93d95..68a8209ca 100644 --- a/src/products/components/ProductVariantImages/ProductVariantImages.tsx +++ b/src/products/components/ProductVariantImages/ProductVariantImages.tsx @@ -1,12 +1,7 @@ import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -15,46 +10,48 @@ import CardTitle from "@saleor/components/CardTitle"; import Skeleton from "@saleor/components/Skeleton"; import { ProductImage } from "../../types/ProductImage"; -const styles = theme => - createStyles({ - gridElement: { - "& img": { - width: "100%" - } - }, - helpText: { - gridColumnEnd: "span 4" - }, - image: { - height: "100%", - objectFit: "contain", +const useStyles = makeStyles(theme => ({ + gridElement: { + "& img": { width: "100%" - }, - imageContainer: { - background: "#ffffff", - border: "1px solid #eaeaea", - borderRadius: theme.spacing(), - height: theme.spacing(17.5), - marginBottom: theme.spacing(2), - padding: theme.spacing(2) - }, - root: { - display: "grid", - gridColumnGap: theme.spacing(2), - gridTemplateColumns: "repeat(4, 1fr)" } - }); + }, + helpText: { + gridColumnEnd: "span 4" + }, + image: { + height: "100%", + objectFit: "contain", + width: "100%" + }, + imageContainer: { + background: "#ffffff", + border: "1px solid #eaeaea", + borderRadius: theme.spacing(), + height: theme.spacing(17.5), + marginBottom: theme.spacing(2), + padding: theme.spacing(2) + }, + root: { + display: "grid", + gridColumnGap: theme.spacing(2), + gridTemplateColumns: "repeat(4, 1fr)" + } +})); -interface ProductVariantImagesProps extends WithStyles { +interface ProductVariantImagesProps { images?: ProductImage[]; placeholderImage?: string; disabled: boolean; onImageAdd(); } -export const ProductVariantImages = withStyles(styles, { - name: "ProductVariantImages" -})(({ classes, disabled, images, onImageAdd }: ProductVariantImagesProps) => { +export const ProductVariantImages: React.FC< + ProductVariantImagesProps +> = props => { + const { disabled, images, onImageAdd } = props; + + const classes = useStyles(props); const intl = useIntl(); return ( @@ -99,6 +96,6 @@ export const ProductVariantImages = withStyles(styles, { ); -}); +}; ProductVariantImages.displayName = "ProductVariantImages"; export default ProductVariantImages; diff --git a/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx b/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx index 72d5df7b9..8e3dc7661 100644 --- a/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx +++ b/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx @@ -1,11 +1,6 @@ import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +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"; @@ -21,30 +16,29 @@ import { maybe, renderCollection } from "../../../misc"; import { ProductVariantCreateData_product_variants } from "../../types/ProductVariantCreateData"; import { ProductVariantDetails_productVariant } from "../../types/ProductVariantDetails"; -const styles = theme => - createStyles({ - colName: { - paddingLeft: 0, - textAlign: [["left"], "!important"] as any +const useStyles = makeStyles(theme => ({ + colName: { + paddingLeft: 0, + textAlign: [["left"], "!important"] as any + }, + link: { + cursor: "pointer" + }, + tabActive: { + "&:before": { + background: theme.palette.primary.main, + content: '""', + height: "100%", + left: 0, + position: "absolute", + top: 0, + width: 2 }, - link: { - cursor: "pointer" - }, - tabActive: { - "&:before": { - background: theme.palette.primary.main, - content: '""', - height: "100%", - left: 0, - position: "absolute", - top: 0, - width: 2 - }, - position: "relative" - } - }); + position: "relative" + } +})); -interface ProductVariantNavigationProps extends WithStyles { +interface ProductVariantNavigationProps { current?: string; fallbackThumbnail: string; variants: @@ -54,80 +48,71 @@ interface ProductVariantNavigationProps extends WithStyles { onRowClick: (variantId: string) => void; } -const ProductVariantNavigation = withStyles(styles, { - name: "ProductVariantNavigation" -})( - ({ - classes, - current, - fallbackThumbnail, - variants, - onAdd, - onRowClick - }: ProductVariantNavigationProps) => { - const intl = useIntl(); +const ProductVariantNavigation: React.FC< + ProductVariantNavigationProps +> = props => { + const { current, fallbackThumbnail, variants, onAdd, onRowClick } = props; - return ( - - - - - {renderCollection(variants, variant => ( - onRowClick(variant.id) : undefined} - > - variant.images[0].url, - fallbackThumbnail - )} - /> - - {variant ? variant.name || variant.sku : } - - - ))} - {onAdd ? ( - - - - - - ) : ( - - - + const classes = useStyles(props); + const intl = useIntl(); + + return ( + + +
+ + {renderCollection(variants, variant => ( + onRowClick(variant.id) : undefined} + > + variant.images[0].url, + fallbackThumbnail + )} + /> + + {variant ? variant.name || variant.sku : } + + + ))} + {onAdd ? ( + + +
- - ); - } -); + + + + ) : ( + + + + + + + )} + + + + ); +}; ProductVariantNavigation.displayName = "ProductVariantNavigation"; export default ProductVariantNavigation; diff --git a/src/products/components/ProductVariantPrice/ProductVariantPrice.tsx b/src/products/components/ProductVariantPrice/ProductVariantPrice.tsx index e24d3dcb1..f5c4e069f 100644 --- a/src/products/components/ProductVariantPrice/ProductVariantPrice.tsx +++ b/src/products/components/ProductVariantPrice/ProductVariantPrice.tsx @@ -1,27 +1,21 @@ import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import React from "react"; import { useIntl } from "react-intl"; import CardTitle from "@saleor/components/CardTitle"; import PriceField from "@saleor/components/PriceField"; -const styles = theme => - createStyles({ - grid: { - display: "grid", - gridColumnGap: theme.spacing(2), - gridTemplateColumns: "1fr 1fr" - } - }); +const useStyles = makeStyles(theme => ({ + grid: { + display: "grid", + gridColumnGap: theme.spacing(2), + gridTemplateColumns: "1fr 1fr" + } +})); -interface ProductVariantPriceProps extends WithStyles { +interface ProductVariantPriceProps { currencySymbol?: string; priceOverride?: string; costPrice?: string; @@ -30,77 +24,77 @@ interface ProductVariantPriceProps extends WithStyles { onChange(event: any); } -const ProductVariantPrice = withStyles(styles, { name: "ProductVariantPrice" })( - ({ - classes, +const ProductVariantPrice: React.FC = props => { + const { currencySymbol, costPrice, errors, priceOverride, loading, onChange - }: ProductVariantPriceProps) => { - const intl = useIntl(); + } = props; + const classes = useStyles(props); - return ( - - - -
-
- -
-
- -
+ const intl = useIntl(); + + return ( + + + +
+
+
- - - ); - } -); +
+ +
+
+ + + ); +}; ProductVariantPrice.displayName = "ProductVariantPrice"; export default ProductVariantPrice; diff --git a/src/products/components/ProductVariantStock/ProductVariantStock.tsx b/src/products/components/ProductVariantStock/ProductVariantStock.tsx index 90ec8b43f..8e1e2d99b 100644 --- a/src/products/components/ProductVariantStock/ProductVariantStock.tsx +++ b/src/products/components/ProductVariantStock/ProductVariantStock.tsx @@ -1,27 +1,21 @@ import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; import React from "react"; import { useIntl } from "react-intl"; import CardTitle from "@saleor/components/CardTitle"; -const styles = theme => - createStyles({ - grid: { - display: "grid", - gridColumnGap: theme.spacing(2), - gridTemplateColumns: "1fr 1fr" - } - }); +const useStyles = makeStyles(theme => ({ + grid: { + display: "grid", + gridColumnGap: theme.spacing(2), + gridTemplateColumns: "1fr 1fr" + } +})); -interface ProductVariantStockProps extends WithStyles { +interface ProductVariantStockProps { errors: { quantity?: string; sku?: string; @@ -33,76 +27,69 @@ interface ProductVariantStockProps extends WithStyles { onChange(event: any); } -const ProductVariantStock = withStyles(styles, { name: "ProductVariantStock" })( - ({ - classes, - errors, - sku, - quantity, - stockAllocated, - loading, - onChange - }: ProductVariantStockProps) => { - const intl = useIntl(); +const ProductVariantStock: React.FC = props => { + const { errors, sku, quantity, stockAllocated, loading, onChange } = props; + const classes = useStyles(props); - return ( - - - -
-
- -
-
- -
+ const intl = useIntl(); + + return ( + + + +
+
+
- - - ); - } -); +
+ +
+
+ + + ); +}; ProductVariantStock.displayName = "ProductVariantStock"; export default ProductVariantStock; diff --git a/src/products/components/ProductVariants/ProductVariants.tsx b/src/products/components/ProductVariants/ProductVariants.tsx index 9b7ee9a45..3e81ee4f2 100644 --- a/src/products/components/ProductVariants/ProductVariants.tsx +++ b/src/products/components/ProductVariants/ProductVariants.tsx @@ -2,12 +2,7 @@ import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; import Hidden from "@material-ui/core/Hidden"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +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"; @@ -27,8 +22,8 @@ import { ListActions } from "../../../types"; import { ProductDetails_product_variants } from "../../types/ProductDetails"; import { ProductVariant_costPrice } from "../../types/ProductVariant"; -const styles = theme => - createStyles({ +const useStyles = makeStyles( + theme => ({ [theme.breakpoints.up("lg")]: { colName: {}, colPrice: { @@ -61,9 +56,11 @@ const styles = theme => textRight: { textAlign: "right" as "right" } - }); + }), + { name: "ProductVariants" } +); -interface ProductVariantsProps extends ListActions, WithStyles { +interface ProductVariantsProps extends ListActions { disabled: boolean; variants: ProductDetails_product_variants[]; fallbackPrice?: ProductVariant_costPrice; @@ -74,9 +71,8 @@ interface ProductVariantsProps extends ListActions, WithStyles { const numberOfColumns = 5; -export const ProductVariants = withStyles(styles, { name: "ProductVariants" })( - ({ - classes, +export const ProductVariants: React.FC = props => { + const { disabled, variants, fallbackPrice, @@ -88,164 +84,163 @@ export const ProductVariants = withStyles(styles, { name: "ProductVariants" })( toggle, toggleAll, toolbar - }: ProductVariantsProps) => { - const intl = useIntl(); - const hasVariants = maybe(() => variants.length > 0, true); + } = props; + const classes = useStyles(props); - return ( - - - - - ) : ( - - ) - } - /> - {!variants.length && ( - - - - - - )} - {hasVariants && ( - - variants.length > 0, true); + + return ( + + - + + + ) : ( + + ) + } + /> + {!variants.length && ( + + + + + + )} + {hasVariants && ( +
+ + + + + + + + + + + + - - - - - - - - - - - - - - {renderCollection(variants, variant => { - const isSelected = variant ? isChecked(variant.id) : false; + + + + {renderCollection(variants, variant => { + const isSelected = variant ? isChecked(variant.id) : false; - return ( - + + toggle(variant.id)} + /> + + + {variant ? variant.name || variant.sku : } + + variant.stockQuantity > 0 + )} > - - toggle(variant.id)} + {variant ? ( + 0 ? "success" : "error"} + label={ + variant.stockQuantity > 0 + ? intl.formatMessage({ + defaultMessage: "Available", + description: "product variant status" + }) + : intl.formatMessage({ + defaultMessage: "Unavailable", + description: "product variant status" + }) + } /> - - - {variant ? variant.name || variant.sku : } - - variant.stockQuantity > 0 - )} - > + ) : ( + + )} + + + {variant ? variant.sku : } + + + {variant ? ( - 0 ? "success" : "error" - } - label={ - variant.stockQuantity > 0 - ? intl.formatMessage({ - defaultMessage: "Available", - description: "product variant status" - }) - : intl.formatMessage({ - defaultMessage: "Unavailable", - description: "product variant status" - }) - } - /> + variant.priceOverride ? ( + + ) : fallbackPrice ? ( + + ) : ( + + ) ) : ( )} - - {variant ? variant.sku : } - - - - {variant ? ( - variant.priceOverride ? ( - - ) : fallbackPrice ? ( - - ) : ( - - ) - ) : ( - - )} - - - - ); - })} - -
- )} - - ); - } -); + + + ); + })} + + + )} + + ); +}; ProductVariants.displayName = "ProductVariants"; export default ProductVariants; diff --git a/src/services/components/ServiceList/ServiceList.tsx b/src/services/components/ServiceList/ServiceList.tsx index b0a3a80a8..576b87f22 100644 --- a/src/services/components/ServiceList/ServiceList.tsx +++ b/src/services/components/ServiceList/ServiceList.tsx @@ -1,10 +1,5 @@ import IconButton from "@material-ui/core/IconButton"; -import { - createStyles, - Theme, - WithStyles, - withStyles -} from "@material-ui/core/styles"; +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"; @@ -28,41 +23,37 @@ export interface ServiceListProps extends ListProps { onRemove: (id: string) => void; } -const styles = theme => - createStyles({ - [theme.breakpoints.up("lg")]: { - colName: { - "&&": { - width: "auto" - } - } - }, - colAction: { - "&&": { - paddingRight: theme.spacing(1) - }, - textAlign: "right", - width: 100 - }, +const useStyles = makeStyles(theme => ({ + [theme.breakpoints.up("lg")]: { colName: { - paddingLeft: 0, - width: 250 - }, - table: { - tableLayout: "fixed" - }, - tableRow: { - cursor: "pointer" + "&&": { + width: "auto" + } } - }); + }, + colAction: { + "&&": { + paddingRight: theme.spacing(1) + }, + textAlign: "right", + width: 100 + }, + colName: { + paddingLeft: 0, + width: 250 + }, + table: { + tableLayout: "fixed" + }, + tableRow: { + cursor: "pointer" + } +})); const numberOfColumns = 2; -const ServiceList = withStyles(styles, { - name: "ServiceList" -})( - ({ - classes, +const ServiceList: React.FC = props => { + const { settings, disabled, onNextPage, @@ -72,7 +63,11 @@ const ServiceList = withStyles(styles, { onRowClick, pageInfo, services - }: ServiceListProps & WithStyles) => ( + } = props; + + const classes = useStyles(props); + + return ( @@ -160,7 +155,7 @@ const ServiceList = withStyles(styles, { )}
- ) -); + ); +}; ServiceList.displayName = "ServiceList"; export default ServiceList; diff --git a/src/shipping/components/ShippingWeightUnitForm/index.ts b/src/shipping/components/ShippingWeightUnitForm/index.ts index 8c4dc991f..e33895dee 100644 --- a/src/shipping/components/ShippingWeightUnitForm/index.ts +++ b/src/shipping/components/ShippingWeightUnitForm/index.ts @@ -1,2 +1,2 @@ -export { default } from './ShippingWeightUnitForm'; -export * from './ShippingWeightUnitForm'; \ No newline at end of file +export { default } from "./ShippingWeightUnitForm"; +export * from "./ShippingWeightUnitForm"; diff --git a/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx b/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx index e1e5cf4e4..0503a31f0 100644 --- a/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx +++ b/src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx @@ -3,12 +3,7 @@ import Dialog from "@material-ui/core/Dialog"; import DialogActions from "@material-ui/core/DialogActions"; import DialogContent from "@material-ui/core/DialogContent"; import DialogTitle from "@material-ui/core/DialogTitle"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +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"; @@ -26,7 +21,6 @@ import ConfirmButton, { import Form from "@saleor/components/Form"; import FormSpacer from "@saleor/components/FormSpacer"; import Hr from "@saleor/components/Hr"; -// tslint:disable no-submodule-imports import { ShopInfo_shop_countries } from "@saleor/components/Shop/types/ShopInfo"; import { buttonMessages } from "@saleor/intl"; @@ -46,30 +40,28 @@ export interface ShippingZoneCountriesAssignDialogProps { onConfirm: (data: FormData) => void; } -const styles = theme => - createStyles({ - checkboxCell: { - paddingLeft: 0 - }, - container: { - maxHeight: 400 - }, - heading: { - marginBottom: theme.spacing(2), - marginTop: theme.spacing(2) - }, - table: { - border: "1px solid " + theme.palette.grey[200] - }, - wideCell: { - width: "100%" - } - }); -const ShippingZoneCountriesAssignDialog = withStyles(styles, { - name: "ShippingZoneCountriesAssignDialog" -})( - ({ - classes, +const useStyles = makeStyles(theme => ({ + checkboxCell: { + paddingLeft: 0 + }, + container: { + maxHeight: 400 + }, + heading: { + marginBottom: theme.spacing(2), + marginTop: theme.spacing(2) + }, + table: { + border: "1px solid " + theme.palette.grey[200] + }, + wideCell: { + width: "100%" + } +})); +const ShippingZoneCountriesAssignDialog: React.FC< + ShippingZoneCountriesAssignDialogProps +> = props => { + const { confirmButtonState, isDefault, onClose, @@ -77,165 +69,163 @@ const ShippingZoneCountriesAssignDialog = withStyles(styles, { open, initial, onConfirm - }: ShippingZoneCountriesAssignDialogProps & WithStyles) => { - const intl = useIntl(); + } = props; - const initialForm: FormData = { - countries: initial, - query: "", - restOfTheWorld: isDefault - }; - return ( - -
- {({ data, change }) => { - const countrySelectionMap = countries.reduce((acc, country) => { - acc[country.code] = !!data.countries.find( - selectedCountries => selectedCountries === country.code - ); - return acc; - }, {}); + const classes = useStyles(props); + const intl = useIntl(); - return ( - <> - - - - - - - - - change(event, () => fetch(data.query))} - label={intl.formatMessage({ - defaultMessage: "Search Countries" - })} - placeholder={intl.formatMessage({ - defaultMessage: "Search by country name" - })} - fullWidth - /> - -
- - - - - - - - - - - - - - - - - change({ - target: { - name: "restOfTheWorld" as keyof FormData, - value: !data.restOfTheWorld - } - } as any) - } - /> - - - -
- - - - - - - - - {filter(countries, data.query, { - key: "country" - }).map(country => { - const isChecked = countrySelectionMap[country.code]; - - return ( - - - {country.country} - - - - isChecked - ? change({ - target: { - name: "countries" as keyof FormData, - value: data.countries.filter( - selectedCountries => - selectedCountries !== country.code - ) - } - } as any) - : change({ - target: { - name: "countries" as keyof FormData, - value: [ - ...data.countries, - country.code - ] - } - } as any) - } - /> - - - ); - })} - -
- - - - - - - - + const initialForm: FormData = { + countries: initial, + query: "", + restOfTheWorld: isDefault + }; + return ( + + + {({ data, change }) => { + const countrySelectionMap = countries.reduce((acc, country) => { + acc[country.code] = !!data.countries.find( + selectedCountries => selectedCountries === country.code ); - }} - -
- ); - } -); + return acc; + }, {}); + + return ( + <> + + + + + + + + + change(event, () => fetch(data.query))} + label={intl.formatMessage({ + defaultMessage: "Search Countries" + })} + placeholder={intl.formatMessage({ + defaultMessage: "Search by country name" + })} + fullWidth + /> + +
+ + + + + + + + + + + + + + + + + change({ + target: { + name: "restOfTheWorld" as keyof FormData, + value: !data.restOfTheWorld + } + } as any) + } + /> + + + +
+ + + + + + + + + {filter(countries, data.query, { + key: "country" + }).map(country => { + const isChecked = countrySelectionMap[country.code]; + + return ( + + + {country.country} + + + + isChecked + ? change({ + target: { + name: "countries" as keyof FormData, + value: data.countries.filter( + selectedCountries => + selectedCountries !== country.code + ) + } + } as any) + : change({ + target: { + name: "countries" as keyof FormData, + value: [...data.countries, country.code] + } + } as any) + } + /> + + + ); + })} + +
+ + + + + + + + + ); + }} + + + ); +}; ShippingZoneCountriesAssignDialog.displayName = "ShippingZoneCountriesAssignDialog"; export default ShippingZoneCountriesAssignDialog; diff --git a/src/shipping/components/ShippingZoneCountriesAssignDialog/index.ts b/src/shipping/components/ShippingZoneCountriesAssignDialog/index.ts index 882ec3f99..500b27dd1 100644 --- a/src/shipping/components/ShippingZoneCountriesAssignDialog/index.ts +++ b/src/shipping/components/ShippingZoneCountriesAssignDialog/index.ts @@ -1,2 +1,2 @@ -export { default } from './ShippingZoneCountriesAssignDialog'; -export * from './ShippingZoneCountriesAssignDialog'; \ No newline at end of file +export { default } from "./ShippingZoneCountriesAssignDialog"; +export * from "./ShippingZoneCountriesAssignDialog"; diff --git a/src/shipping/components/ShippingZoneCreatePage/index.ts b/src/shipping/components/ShippingZoneCreatePage/index.ts index 6c7ccbdd5..3a73c93ea 100644 --- a/src/shipping/components/ShippingZoneCreatePage/index.ts +++ b/src/shipping/components/ShippingZoneCreatePage/index.ts @@ -1,2 +1,2 @@ -export { default } from './ShippingZoneCreatePage'; -export * from './ShippingZoneCreatePage'; \ No newline at end of file +export { default } from "./ShippingZoneCreatePage"; +export * from "./ShippingZoneCreatePage"; diff --git a/src/shipping/components/ShippingZoneDetailsPage/index.ts b/src/shipping/components/ShippingZoneDetailsPage/index.ts index 1bfd26b13..17871daff 100644 --- a/src/shipping/components/ShippingZoneDetailsPage/index.ts +++ b/src/shipping/components/ShippingZoneDetailsPage/index.ts @@ -1,2 +1,2 @@ -export { default } from './ShippingZoneDetailsPage'; -export * from './ShippingZoneDetailsPage'; \ No newline at end of file +export { default } from "./ShippingZoneDetailsPage"; +export * from "./ShippingZoneDetailsPage"; diff --git a/src/shipping/components/ShippingZoneInfo/index.ts b/src/shipping/components/ShippingZoneInfo/index.ts index a04821eb0..bdf18dd66 100644 --- a/src/shipping/components/ShippingZoneInfo/index.ts +++ b/src/shipping/components/ShippingZoneInfo/index.ts @@ -1,2 +1,2 @@ -export { default } from './ShippingZoneInfo'; -export * from './ShippingZoneInfo'; \ No newline at end of file +export { default } from "./ShippingZoneInfo"; +export * from "./ShippingZoneInfo"; diff --git a/src/shipping/components/ShippingZoneRateDialog/ShippingZoneRateDialog.tsx b/src/shipping/components/ShippingZoneRateDialog/ShippingZoneRateDialog.tsx index 523be0d61..2ef00d1f1 100644 --- a/src/shipping/components/ShippingZoneRateDialog/ShippingZoneRateDialog.tsx +++ b/src/shipping/components/ShippingZoneRateDialog/ShippingZoneRateDialog.tsx @@ -3,12 +3,7 @@ import Dialog from "@material-ui/core/Dialog"; import DialogActions from "@material-ui/core/DialogActions"; import DialogContent from "@material-ui/core/DialogContent"; import DialogTitle from "@material-ui/core/DialogTitle"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; import Typography from "@material-ui/core/Typography"; import React from "react"; @@ -50,8 +45,8 @@ export interface ShippingZoneRateDialogProps { onSubmit: (data: FormData) => void; } -const styles = theme => - createStyles({ +const useStyles = makeStyles( + theme => ({ grid: { display: "grid", gridColumnGap: theme.spacing(2), @@ -61,13 +56,15 @@ const styles = theme => marginBottom: theme.spacing(2), marginTop: theme.spacing(2) } - }); -const ShippingZoneRateDialog = withStyles(styles, { - name: "ShippingZoneRateDialog" -})( - ({ + }), + { + name: "ShippingZoneRateDialog" + } +); +const ShippingZoneRateDialog: React.FC = props => { + const { action, - classes, + confirmButtonState, defaultCurrency, disabled, @@ -77,283 +74,281 @@ const ShippingZoneRateDialog = withStyles(styles, { open, rate, variant - }: ShippingZoneRateDialogProps & WithStyles) => { - const intl = useIntl(); + } = props; - const initialForm: FormData = - action === "create" - ? { - isFree: false, - maxValue: "", - minValue: "", - name: "", - noLimits: false, - price: "" - } - : { - isFree: maybe(() => rate.price.amount === 0, false), - maxValue: - variant === ShippingMethodTypeEnum.PRICE - ? maybe(() => rate.maximumOrderPrice.amount.toString(), "") - : maybe(() => rate.maximumOrderWeight.value.toString(), ""), - minValue: - variant === ShippingMethodTypeEnum.PRICE - ? maybe(() => rate.minimumOrderPrice.amount.toString(), "") - : maybe(() => rate.minimumOrderWeight.value.toString(), ""), - name: maybe(() => rate.name, ""), - noLimits: false, - price: maybe(() => rate.price.amount.toString(), "") - }; - if (action === "edit") { - initialForm.noLimits = !initialForm.maxValue && !initialForm.minValue; - } + const classes = useStyles(props); + const intl = useIntl(); - return ( - -
- {({ change, data, errors: formErrors, hasChanged }) => { - const typedFormErrors: FormErrors< - | "minimumOrderPrice" - | "minimumOrderWeight" - | "maximumOrderPrice" - | "maximumOrderWeight" - | "price" - | "name" - > = formErrors; - return ( - <> - - {variant === ShippingMethodTypeEnum.PRICE - ? action === "create" - ? intl.formatMessage({ - defaultMessage: "Add Price Rate", - description: "dialog header" - }) - : intl.formatMessage({ - defaultMessage: "Edit Price Rate", - description: "dialog header" - }) - : action === "create" + const initialForm: FormData = + action === "create" + ? { + isFree: false, + maxValue: "", + minValue: "", + name: "", + noLimits: false, + price: "" + } + : { + isFree: maybe(() => rate.price.amount === 0, false), + maxValue: + variant === ShippingMethodTypeEnum.PRICE + ? maybe(() => rate.maximumOrderPrice.amount.toString(), "") + : maybe(() => rate.maximumOrderWeight.value.toString(), ""), + minValue: + variant === ShippingMethodTypeEnum.PRICE + ? maybe(() => rate.minimumOrderPrice.amount.toString(), "") + : maybe(() => rate.minimumOrderWeight.value.toString(), ""), + name: maybe(() => rate.name, ""), + noLimits: false, + price: maybe(() => rate.price.amount.toString(), "") + }; + if (action === "edit") { + initialForm.noLimits = !initialForm.maxValue && !initialForm.minValue; + } + + return ( + + + {({ change, data, errors: formErrors, hasChanged }) => { + const typedFormErrors: FormErrors< + | "minimumOrderPrice" + | "minimumOrderWeight" + | "maximumOrderPrice" + | "maximumOrderWeight" + | "price" + | "name" + > = formErrors; + return ( + <> + + {variant === ShippingMethodTypeEnum.PRICE + ? action === "create" ? intl.formatMessage({ - defaultMessage: "Add Weight Rate", - description: - "add weight based shipping method, dialog header" + defaultMessage: "Add Price Rate", + description: "dialog header" }) : intl.formatMessage({ - defaultMessage: "Edit Weight Rate", - description: - "edit weight based shipping method, dialog header" - })} - - - - -
- - {!!variant ? ( - <> - - {variant === ShippingMethodTypeEnum.PRICE - ? intl.formatMessage({ - defaultMessage: "Value range", - description: "order price range" - }) - : intl.formatMessage({ - defaultMessage: "Weight range", - description: "order weight range" - })} - - - - - {variant === ShippingMethodTypeEnum.PRICE - ? intl.formatMessage({ - defaultMessage: - "This rate will apply to all orders of all prices" - }) - : intl.formatMessage({ - defaultMessage: - "This rate will apply to all orders of all weights" - })} - - - } - checked={data.noLimits} - onChange={change} - disabled={disabled} - /> - {!data.noLimits && ( - <> - -
- - -
- - )} - - ) : ( - - )} - -
- - - - - - {!data.isFree && ( - <> - -
- + + + +
+ + {!!variant ? ( + <> + + {variant === ShippingMethodTypeEnum.PRICE + ? intl.formatMessage({ + defaultMessage: "Value range", + description: "order price range" + }) + : intl.formatMessage({ + defaultMessage: "Weight range", + description: "order weight range" })} - name={"price" as keyof FormData} - type="number" - value={data.price} - onChange={change} - InputProps={{ - endAdornment: defaultCurrency - }} - /> -
- - )} - - - - - {action === "create" - ? intl.formatMessage({ - defaultMessage: "Create rate", - description: "button" - }) - : intl.formatMessage({ - defaultMessage: "Update rate", - description: "button" + + + + + {variant === ShippingMethodTypeEnum.PRICE + ? intl.formatMessage({ + defaultMessage: + "This rate will apply to all orders of all prices" + }) + : intl.formatMessage({ + defaultMessage: + "This rate will apply to all orders of all weights" + })} + + + } + checked={data.noLimits} + onChange={change} + disabled={disabled} + /> + {!data.noLimits && ( + <> + +
+ + +
+ + )} + + ) : ( + + )} + +
+ + + + + + {!data.isFree && ( + <> + +
+ - - - ); - }} - -
- ); - } -); + name={"price" as keyof FormData} + type="number" + value={data.price} + onChange={change} + InputProps={{ + endAdornment: defaultCurrency + }} + /> +
+ + )} + + + + + {action === "create" + ? intl.formatMessage({ + defaultMessage: "Create rate", + description: "button" + }) + : intl.formatMessage({ + defaultMessage: "Update rate", + description: "button" + })} + + + + ); + }} + + + ); +}; ShippingZoneRateDialog.displayName = "ShippingZoneRateDialog"; export default ShippingZoneRateDialog; diff --git a/src/shipping/components/ShippingZoneRateDialog/index.ts b/src/shipping/components/ShippingZoneRateDialog/index.ts index 3aa84f45e..45ef7d694 100644 --- a/src/shipping/components/ShippingZoneRateDialog/index.ts +++ b/src/shipping/components/ShippingZoneRateDialog/index.ts @@ -1,2 +1,2 @@ -export { default } from './ShippingZoneRateDialog'; -export * from './ShippingZoneRateDialog'; \ No newline at end of file +export { default } from "./ShippingZoneRateDialog"; +export * from "./ShippingZoneRateDialog"; diff --git a/src/shipping/components/ShippingZoneRates/ShippingZoneRates.tsx b/src/shipping/components/ShippingZoneRates/ShippingZoneRates.tsx index 18eb25ed1..6645be304 100644 --- a/src/shipping/components/ShippingZoneRates/ShippingZoneRates.tsx +++ b/src/shipping/components/ShippingZoneRates/ShippingZoneRates.tsx @@ -1,11 +1,6 @@ import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +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"; @@ -35,152 +30,151 @@ export interface ShippingZoneRatesProps { onRateRemove: (id: string) => void; } -const styles = theme => - createStyles({ - alignRight: { - "&:last-child": { - paddingRight: 0 - }, - paddingRight: 0, - width: ICONBUTTON_SIZE + theme.spacing(.5) +const useStyles = makeStyles(theme => ({ + alignRight: { + "&:last-child": { + paddingRight: 0 }, - nameColumn: { - width: 300 - }, - valueColumn: { - width: 300 - } - }); -const ShippingZoneRates = withStyles(styles, { name: "ShippingZoneRates" })( - ({ - classes, + paddingRight: 0, + width: ICONBUTTON_SIZE + theme.spacing(0.5) + }, + nameColumn: { + width: 300 + }, + valueColumn: { + width: 300 + } +})); +const ShippingZoneRates: React.FC = props => { + const { disabled, onRateAdd, onRateEdit, onRateRemove, rates, variant - }: ShippingZoneRatesProps & WithStyles) => { - const intl = useIntl(); + } = props; - return ( - - + const classes = useStyles(props); + const intl = useIntl(); + + return ( + + + + + } + /> + + + + - - } - /> -
- - - - - - - {variant === "price" - ? intl.formatMessage({ - defaultMessage: "Value Range", - description: "shipping method price range" - }) - : intl.formatMessage({ - defaultMessage: "Weight Range", - description: "shipping method weight range" - })} - - - - - - - - - - {renderCollection( - rates, - rate => ( - onRateEdit(rate.id) : undefined} - > - - {maybe(() => rate.name, )} - - - {maybe( - () => - variant === "price" ? ( - - ) : ( - - ), - - )} - - - {maybe( - () => ( - + + + {variant === "price" + ? intl.formatMessage({ + defaultMessage: "Value Range", + description: "shipping method price range" + }) + : intl.formatMessage({ + defaultMessage: "Weight Range", + description: "shipping method weight range" + })} + + + + + + + + + + {renderCollection( + rates, + rate => ( + onRateEdit(rate.id) : undefined} + > + + {maybe(() => rate.name, )} + + + {maybe( + () => + variant === "price" ? ( + + ) : ( + ), - - )} - - onRateEdit(rate.id)} - > - - - onRateRemove(rate.id)} - > - - - - ), - () => ( - - - - - - ) - )} - -
- - ); - } -); + + )} + + + {maybe( + () => ( + + ), + + )} + + onRateEdit(rate.id)} + > + + + onRateRemove(rate.id)} + > + + + + ), + () => ( + + + + + + ) + )} + + + + ); +}; ShippingZoneRates.displayName = "ShippingZoneRates"; export default ShippingZoneRates; diff --git a/src/shipping/components/ShippingZoneRates/index.ts b/src/shipping/components/ShippingZoneRates/index.ts index 65c1ae1ce..7e1c9215f 100644 --- a/src/shipping/components/ShippingZoneRates/index.ts +++ b/src/shipping/components/ShippingZoneRates/index.ts @@ -1,2 +1,2 @@ -export { default } from './ShippingZoneRates'; -export * from './ShippingZoneRates'; \ No newline at end of file +export { default } from "./ShippingZoneRates"; +export * from "./ShippingZoneRates"; diff --git a/src/shipping/components/ShippingZonesList/ShippingZonesList.tsx b/src/shipping/components/ShippingZonesList/ShippingZonesList.tsx index 7e6f2c2c0..aa7f12cd2 100644 --- a/src/shipping/components/ShippingZonesList/ShippingZonesList.tsx +++ b/src/shipping/components/ShippingZonesList/ShippingZonesList.tsx @@ -1,12 +1,7 @@ import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; import IconButton from "@material-ui/core/IconButton"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +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"; @@ -32,32 +27,30 @@ export interface ShippingZonesListProps extends ListProps, ListActions { onRemove: (id: string) => void; } -const styles = theme => - createStyles({ - [theme.breakpoints.up("lg")]: { - colCountries: {}, - colName: { width: 200 } - }, - alignRight: { - "&:last-child": { - paddingRight: theme.spacing(1) - }, - width: ICONBUTTON_SIZE + theme.spacing(.5) - }, +const useStyles = makeStyles(theme => ({ + [theme.breakpoints.up("lg")]: { colCountries: {}, - colName: { - paddingLeft: 0 + colName: { width: 200 } + }, + alignRight: { + "&:last-child": { + paddingRight: theme.spacing(1) }, - row: { - cursor: "pointer" - } - }); + width: ICONBUTTON_SIZE + theme.spacing(0.5) + }, + colCountries: {}, + colName: { + paddingLeft: 0 + }, + row: { + cursor: "pointer" + } +})); const numberOfColumns = 4; -const ShippingZonesList = withStyles(styles, { name: "ShippingZonesList" })( - ({ - classes, +const ShippingZonesList: React.FC = props => { + const { disabled, settings, onAdd, @@ -73,127 +66,126 @@ const ShippingZonesList = withStyles(styles, { name: "ShippingZonesList" })( toggle, toggleAll, toolbar - }: ShippingZonesListProps & WithStyles) => { - const intl = useIntl(); + } = props; - return ( - - - - - } - /> - - - - - - - - - - - - - - - - - {renderCollection( - shippingZones, - shippingZone => { - const isSelected = shippingZone - ? isChecked(shippingZone.id) - : false; + const classes = useStyles(props); + const intl = useIntl(); - return ( - - - toggle(shippingZone.id)} - /> - - - {maybe( - () => shippingZone.name, - - )} - - - {maybe( - () => shippingZone.countries.length, - - )} - - - { - event.stopPropagation(); - onRemove(shippingZone.id); - }} - > - - - - - ); - }, - () => ( - - - + return ( + + + + + } + /> +
+ + + + + + + + + + + + + + + + {renderCollection( + shippingZones, + shippingZone => { + const isSelected = shippingZone + ? isChecked(shippingZone.id) + : false; + + return ( + + + toggle(shippingZone.id)} + /> + + + {maybe( + () => shippingZone.name, + + )} + + + {maybe( + () => shippingZone.countries.length, + + )} + + + { + event.stopPropagation(); + onRemove(shippingZone.id); + }} + > + + - ) - )} - -
- - ); - } -); + ); + }, + () => ( + + + + + + ) + )} + + + + ); +}; ShippingZonesList.displayName = "ShippingZonesList"; export default ShippingZonesList; diff --git a/src/shipping/components/ShippingZonesList/index.ts b/src/shipping/components/ShippingZonesList/index.ts index f6f03db27..eb4b4d6b8 100644 --- a/src/shipping/components/ShippingZonesList/index.ts +++ b/src/shipping/components/ShippingZonesList/index.ts @@ -1,2 +1,2 @@ -export { default } from './ShippingZonesList'; -export * from './ShippingZonesList'; \ No newline at end of file +export { default } from "./ShippingZonesList"; +export * from "./ShippingZonesList"; diff --git a/src/shipping/components/ShippingZonesListPage/index.ts b/src/shipping/components/ShippingZonesListPage/index.ts index 199420676..6a8b2e669 100644 --- a/src/shipping/components/ShippingZonesListPage/index.ts +++ b/src/shipping/components/ShippingZonesListPage/index.ts @@ -1,2 +1,2 @@ -export { default } from './ShippingZonesListPage'; -export * from './ShippingZonesListPage'; \ No newline at end of file +export { default } from "./ShippingZonesListPage"; +export * from "./ShippingZonesListPage"; diff --git a/src/siteSettings/components/SiteSettingsAddress/SiteSettingsAddress.tsx b/src/siteSettings/components/SiteSettingsAddress/SiteSettingsAddress.tsx index 214a21ac0..aeda43ec6 100644 --- a/src/siteSettings/components/SiteSettingsAddress/SiteSettingsAddress.tsx +++ b/src/siteSettings/components/SiteSettingsAddress/SiteSettingsAddress.tsx @@ -1,6 +1,6 @@ import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; -import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; import React from "react"; import { useIntl } from "react-intl"; @@ -16,7 +16,7 @@ import { ChangeEvent } from "@saleor/hooks/useForm"; import { FormErrors } from "@saleor/types"; import { SiteSettingsPageFormData } from "../SiteSettingsPage"; -interface SiteSettingsAddressProps extends WithStyles { +interface SiteSettingsAddressProps { countries: SingleAutocompleteChoiceType[]; data: SiteSettingsPageFormData; displayCountry: string; @@ -26,15 +26,14 @@ interface SiteSettingsAddressProps extends WithStyles { onCountryChange: (event: ChangeEvent) => void; } -const styles = createStyles({ +const useStyles = makeStyles({ root: { overflow: "visible" } }); -const SiteSettingsAddress = withStyles(styles, { name: "SiteSettingsAddress" })( - ({ - classes, +const SiteSettingsAddress: React.FC = props => { + const { countries, data, disabled, @@ -42,131 +41,132 @@ const SiteSettingsAddress = withStyles(styles, { name: "SiteSettingsAddress" })( errors, onChange, onCountryChange - }: SiteSettingsAddressProps) => { - const intl = useIntl(); + } = props; + const classes = useStyles(props); - return ( - - + + + - + + + + + + - - + + + + - - - - - - - - - - - - - - - ); - } -); + + + + + + ); +}; SiteSettingsAddress.displayName = "SiteSettingsAddress"; export default SiteSettingsAddress; diff --git a/src/siteSettings/components/SiteSettingsKeys/SiteSettingsKeys.tsx b/src/siteSettings/components/SiteSettingsKeys/SiteSettingsKeys.tsx index 27bc7b4c1..995cf39d3 100644 --- a/src/siteSettings/components/SiteSettingsKeys/SiteSettingsKeys.tsx +++ b/src/siteSettings/components/SiteSettingsKeys/SiteSettingsKeys.tsx @@ -1,12 +1,7 @@ import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; import IconButton from "@material-ui/core/IconButton"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +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"; @@ -23,103 +18,100 @@ import { ICONBUTTON_SIZE } from "../../../theme"; import { AuthorizationKeyType } from "../../../types/globalTypes"; import { SiteSettings_shop_authorizationKeys } from "../../types/SiteSettings"; -const styles = theme => - createStyles({ - iconCell: { - "&:last-child": { - paddingRight: 0 - }, - width: ICONBUTTON_SIZE + theme.spacing(.5) - } - }); +const useStyles = makeStyles(theme => ({ + iconCell: { + "&:last-child": { + paddingRight: 0 + }, + width: ICONBUTTON_SIZE + theme.spacing(0.5) + } +})); -interface SiteSettingsKeysProps extends WithStyles { +interface SiteSettingsKeysProps { disabled: boolean; keys: SiteSettings_shop_authorizationKeys[]; onAdd: () => void; onRemove: (name: AuthorizationKeyType) => void; } -const SiteSettingsKeys = withStyles(styles, { name: "SiteSettingsKeys" })( - ({ classes, disabled, keys, onAdd, onRemove }: SiteSettingsKeysProps) => { - const intl = useIntl(); +const SiteSettingsKeys: React.FC = props => { + const { disabled, keys, onAdd, onRemove } = props; + const classes = useStyles(props); - return ( - - - - - } - /> - - - - - - - - - - - - - - {renderCollection( - keys, - key => ( - key.name)} - > - - {maybe( - () => authorizationKeyTypes[key.name], - - )} - - - {maybe(() => key.key, )} - - - onRemove(key.name)}> - - - - - ), - () => ( - - - - - - ) - )} - -
- - ); - } -); + const intl = useIntl(); + + return ( + + + + + } + /> + + + + + + + + + + + + + + {renderCollection( + keys, + key => ( + key.name)}> + + {maybe( + () => authorizationKeyTypes[key.name], + + )} + + + {maybe(() => key.key, )} + + + onRemove(key.name)}> + + + + + ), + () => ( + + + + + + ) + )} + +
+ + ); +}; SiteSettingsKeys.displayName = "SiteSettingsKeys"; export default SiteSettingsKeys; diff --git a/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx b/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx index c94c1b06d..62b966d5d 100644 --- a/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx +++ b/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx @@ -3,12 +3,7 @@ import Dialog from "@material-ui/core/Dialog"; import DialogActions from "@material-ui/core/DialogActions"; import DialogContent from "@material-ui/core/DialogContent"; import DialogTitle from "@material-ui/core/DialogTitle"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; import Typography from "@material-ui/core/Typography"; import React from "react"; @@ -37,27 +32,26 @@ const initialForm: FormData = { lastName: "" }; -const styles = theme => - createStyles({ - hr: { - backgroundColor: "#eaeaea", - border: "none", - height: 1, - marginBottom: 0 - }, - sectionTitle: { - fontWeight: 600 as 600, - marginBottom: theme.spacing(), - marginTop: theme.spacing(2) - }, - textFieldGrid: { - display: "grid", - gridColumnGap: theme.spacing(2), - gridTemplateColumns: "1fr 1fr" - } - }); +const useStyles = makeStyles(theme => ({ + hr: { + backgroundColor: "#eaeaea", + border: "none", + height: 1, + marginBottom: 0 + }, + sectionTitle: { + fontWeight: 600 as 600, + marginBottom: theme.spacing(), + marginTop: theme.spacing(2) + }, + textFieldGrid: { + display: "grid", + gridColumnGap: theme.spacing(2), + gridTemplateColumns: "1fr 1fr" + } +})); -interface StaffAddMemberDialogProps extends WithStyles { +interface StaffAddMemberDialogProps { confirmButtonState: ConfirmButtonTransitionState; errors: UserError[]; open: boolean; @@ -65,103 +59,95 @@ interface StaffAddMemberDialogProps extends WithStyles { onConfirm: (data: FormData) => void; } -const StaffAddMemberDialog = withStyles(styles, { - name: "StaffAddMemberDialog" -})( - ({ - classes, - confirmButtonState, - errors, - open, - onClose, - onConfirm - }: StaffAddMemberDialogProps) => { - const intl = useIntl(); +const StaffAddMemberDialog: React.FC = props => { + const { confirmButtonState, errors, open, onClose, onConfirm } = props; + const classes = useStyles(props); - return ( - -
- {({ change, data, errors: formErrors, hasChanged }) => ( - <> - - - - -
- - -
- + const intl = useIntl(); + + return ( + + + {({ change, data, errors: formErrors, hasChanged }) => ( + <> + + + + +
- -
- - - - - - - - - - - - - - - - - )} - -
- ); - } -); +
+ + + +
+ + + + + + + + + + + + + + + + + )} + + + ); +}; StaffAddMemberDialog.displayName = "StaffAddMemberDialog"; export default StaffAddMemberDialog; diff --git a/src/staff/components/StaffList/StaffList.tsx b/src/staff/components/StaffList/StaffList.tsx index 5f58d6b7b..1c65cd16f 100644 --- a/src/staff/components/StaffList/StaffList.tsx +++ b/src/staff/components/StaffList/StaffList.tsx @@ -1,9 +1,4 @@ -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +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"; @@ -26,51 +21,49 @@ import { import { ListProps } from "@saleor/types"; import { StaffList_staffUsers_edges_node } from "../../types/StaffList"; -const styles = theme => - createStyles({ - avatar: { - alignItems: "center", - borderRadius: "100%", - display: "grid", - float: "left", - height: 47, - justifyContent: "center", - marginRight: theme.spacing(1), - overflow: "hidden", - width: 47 +const useStyles = makeStyles(theme => ({ + avatar: { + alignItems: "center", + borderRadius: "100%", + display: "grid", + float: "left", + height: 47, + justifyContent: "center", + marginRight: theme.spacing(1), + overflow: "hidden", + width: 47 + }, + avatarDefault: { + "& p": { + color: "#fff", + lineHeight: "47px" }, - avatarDefault: { - "& p": { - color: "#fff", - lineHeight: "47px" - }, - background: theme.palette.primary.main, - height: 47, - textAlign: "center", - width: 47 - }, - avatarImage: { - pointerEvents: "none", - width: "100%" - }, - statusText: { - color: "#9E9D9D" - }, - tableRow: { - cursor: "pointer" - }, - wideColumn: { - width: "80%" - } - }); + background: theme.palette.primary.main, + height: 47, + textAlign: "center", + width: 47 + }, + avatarImage: { + pointerEvents: "none", + width: "100%" + }, + statusText: { + color: "#9E9D9D" + }, + tableRow: { + cursor: "pointer" + }, + wideColumn: { + width: "80%" + } +})); -interface StaffListProps extends ListProps, WithStyles { +interface StaffListProps extends ListProps { staffMembers: StaffList_staffUsers_edges_node[]; } -const StaffList = withStyles(styles, { name: "StaffList" })( - ({ - classes, +const StaffList: React.FC = props => { + const { settings, disabled, onNextPage, @@ -79,108 +72,103 @@ const StaffList = withStyles(styles, { name: "StaffList" })( onRowClick, pageInfo, staffMembers - }: StaffListProps) => { - const intl = useIntl(); + } = props; - return ( - - - - - - - - - - - - - - + + + + - - - - {renderCollection( - staffMembers, - staffMember => ( - - -
- {maybe(() => staffMember.avatar.url) ? ( - staffMember.avatar.url)} - /> - ) : ( -
- {getUserInitials(staffMember)} -
- )} -
- - {getUserName(staffMember) || } - - - {maybe( - () => - staffMember.isActive - ? intl.formatMessage({ - defaultMessage: "Active", - description: "staff member status" - }) - : intl.formatMessage({ - defaultMessage: "Inactive", - description: "staff member status" - }), - - )} - - - + + + + + + + + + + + + + {renderCollection( + staffMembers, + staffMember => ( + + +
+ {maybe(() => staffMember.avatar.url) ? ( + staffMember.avatar.url)} + /> + ) : ( +
+ {getUserInitials(staffMember)} +
+ )} +
+ + {getUserName(staffMember) || } + + {maybe( - () => staffMember.email, + () => + staffMember.isActive + ? intl.formatMessage({ + defaultMessage: "Active", + description: "staff member status" + }) + : intl.formatMessage({ + defaultMessage: "Inactive", + description: "staff member status" + }), )} - - - ), - () => ( - - - - - - ) - )} - -
- ); - } -); + + + + {maybe(() => staffMember.email, )} + + + ), + () => ( + + + + + + ) + )} + + + ); +}; StaffList.displayName = "StaffList"; export default StaffList; diff --git a/src/staff/components/StaffProperties/StaffProperties.tsx b/src/staff/components/StaffProperties/StaffProperties.tsx index 7854fe08a..b6a5e8311 100644 --- a/src/staff/components/StaffProperties/StaffProperties.tsx +++ b/src/staff/components/StaffProperties/StaffProperties.tsx @@ -1,11 +1,6 @@ import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import TextField from "@material-ui/core/TextField"; import Typography from "@material-ui/core/Typography"; import React from "react"; @@ -18,8 +13,8 @@ import { commonMessages } from "@saleor/intl"; import { getUserInitials, maybe } from "../../../misc"; import { StaffMemberDetails_user } from "../../types/StaffMemberDetails"; -const styles = theme => - createStyles({ +const useStyles = makeStyles( + theme => ({ avatar: { "& svg": { fill: "#fff" @@ -93,9 +88,11 @@ const styles = theme => gridColumnGap: theme.spacing(4), gridTemplateColumns: "120px 1fr" } - }); + }), + { name: "StaffProperties" } +); -interface StaffPropertiesProps extends WithStyles { +interface StaffPropertiesProps { canEditAvatar: boolean; className?: string; data: { @@ -110,106 +107,106 @@ interface StaffPropertiesProps extends WithStyles { onImageUpload: (file: File) => void; } -const StaffProperties = withStyles(styles, { name: "StaffProperties" })( - ({ +const StaffProperties: React.FC = props => { + const { canEditAvatar, - classes, className, data, staffMember, onChange, onImageDelete, onImageUpload - }: StaffPropertiesProps) => { - const intl = useIntl(); - const imgInputAnchor = React.createRef(); + } = props; - const clickImgInput = () => imgInputAnchor.current.click(); + const classes = useStyles(props); + const intl = useIntl(); + const imgInputAnchor = React.createRef(); - return ( - - - -
-
-
- {maybe(() => staffMember.avatar.url) ? ( - staffMember.avatar.url)} - /> - ) : ( -
- {getUserInitials(data)} -
- )} - {canEditAvatar && ( -
- - - - - - - - onImageUpload(event.target.files[0])} - type="file" - ref={imgInputAnchor} + const clickImgInput = () => imgInputAnchor.current.click(); + + return ( + + + +
+
+
+ {maybe(() => staffMember.avatar.url) ? ( + staffMember.avatar.url)} + /> + ) : ( +
+ {getUserInitials(data)} +
+ )} + {canEditAvatar && ( +
+ + + -
- )} -
+ + + + + onImageUpload(event.target.files[0])} + type="file" + ref={imgInputAnchor} + /> +
+ )}
-
-
-
- -
-
- -
-
- -
+
+
+
+
+ +
+
+ +
+
+
- - - ); - } -); +
+ + + ); +}; StaffProperties.displayName = "StaffProperties"; export default StaffProperties; diff --git a/src/storybook/Stories.test.ts b/src/storybook/Stories.test.ts index a79facced..7fe2b2a2d 100644 --- a/src/storybook/Stories.test.ts +++ b/src/storybook/Stories.test.ts @@ -1,5 +1,4 @@ -import createGenerateClassName from "@material-ui/core/styles/createGenerateClassName"; -import createHookGenerateClassName from "@material-ui/styles/createGenerateClassName"; +import { createGenerateClassName } from "@material-ui/core/styles"; import initStoryshots from "@storybook/addon-storyshots"; // tslint:disable no-submodule-imports import generateRandomKey from "draft-js/lib/generateRandomKey"; @@ -16,13 +15,6 @@ jest.mock("@material-ui/core/styles/createGenerateClassName"); } ); -jest.mock("@material-ui/styles/createGenerateClassName"); -(createHookGenerateClassName as any).mockImplementation( - () => (rule, stylesheet) => { - return [stylesheet.options.meta, rule.key, "id"].join("-"); - } -); - jest.mock("draft-js/lib/generateRandomKey"); (generateRandomKey as any).mockImplementation(() => "testKey"); diff --git a/src/storybook/stories/components/StatusLabel.tsx b/src/storybook/stories/components/StatusLabel.tsx index 633459ff1..755a8633d 100644 --- a/src/storybook/stories/components/StatusLabel.tsx +++ b/src/storybook/stories/components/StatusLabel.tsx @@ -6,8 +6,8 @@ import CardDecorator from "../../CardDecorator"; import Decorator from "../../Decorator"; storiesOf("Generics / StatusLabel", module) -.addDecorator(CardDecorator) -.addDecorator(Decorator) + .addDecorator(CardDecorator) + .addDecorator(Decorator) .add("when success", () => ( )) diff --git a/src/taxes/components/CountryList/CountryList.tsx b/src/taxes/components/CountryList/CountryList.tsx index bc01c1b85..97235b2cd 100644 --- a/src/taxes/components/CountryList/CountryList.tsx +++ b/src/taxes/components/CountryList/CountryList.tsx @@ -1,5 +1,5 @@ import Card from "@material-ui/core/Card"; -import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles"; +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"; @@ -13,7 +13,7 @@ import Skeleton from "@saleor/components/Skeleton"; import { maybe, renderCollection } from "../../../misc"; import { CountryList_shop_countries } from "../../types/CountryList"; -const styles = createStyles({ +const useStyles = makeStyles({ tableRow: { cursor: "pointer" }, @@ -22,13 +22,17 @@ const styles = createStyles({ } }); -interface CountryListProps extends WithStyles { +interface CountryListProps { countries: CountryList_shop_countries[]; onRowClick: (code: string) => void; } -const CountryList = withStyles(styles, { name: "CountryList" })( - ({ classes, onRowClick, countries }: CountryListProps) => ( +const CountryList: React.FC = props => { + const { onRowClick, countries } = props; + + const classes = useStyles(props); + + return ( @@ -81,7 +85,7 @@ const CountryList = withStyles(styles, { name: "CountryList" })(
- ) -); + ); +}; CountryList.displayName = "CountryList"; export default CountryList; diff --git a/src/taxes/components/CountryTaxesPage/CountryTaxesPage.tsx b/src/taxes/components/CountryTaxesPage/CountryTaxesPage.tsx index ad251f9e3..9cd0a2e76 100644 --- a/src/taxes/components/CountryTaxesPage/CountryTaxesPage.tsx +++ b/src/taxes/components/CountryTaxesPage/CountryTaxesPage.tsx @@ -1,5 +1,5 @@ import Card from "@material-ui/core/Card"; -import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles"; +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"; @@ -18,7 +18,7 @@ import { TaxRateType } from "@saleor/types/globalTypes"; import { maybe, renderCollection } from "../../../misc"; import { CountryList_shop_countries_vat_reducedRates } from "../../types/CountryList"; -const styles = createStyles({ +const useStyles = makeStyles({ wideColumn: { width: "80%" } @@ -135,87 +135,83 @@ export interface CountryTaxesPageProps { onBack: () => void; } -const CountryTaxesPage = withStyles(styles, { name: "CountryTaxesPage" })( - ({ - classes, - countryName, - taxCategories, - onBack - }: CountryTaxesPageProps & WithStyles) => { - const intl = useIntl(); - const translatedTaxRates = translateTaxRates(intl); +const CountryTaxesPage: React.FC = props => { + const { countryName, taxCategories, onBack } = props; - return ( - - - {intl.formatMessage(sectionNames.taxes)} - - - -
- - - - - - - - - - - - - - {renderCollection( - taxCategories, - taxCategory => ( - - - {maybe( - () => translatedTaxRates[taxCategory.rateType], - - )} - - - {maybe( - () => taxCategory.rate, - - )} - - - ), - () => ( - - - - - - ) - )} - -
- -
- - - ); - } -); + const classes = useStyles(props); + const intl = useIntl(); + const translatedTaxRates = translateTaxRates(intl); + + return ( + + + {intl.formatMessage(sectionNames.taxes)} + + + +
+ + + + + + + + + + + + + + {renderCollection( + taxCategories, + taxCategory => ( + + + {maybe( + () => translatedTaxRates[taxCategory.rateType], + + )} + + + {maybe( + () => taxCategory.rate, + + )} + + + ), + () => ( + + + + + + ) + )} + +
+ +
+ + + ); +}; CountryTaxesPage.displayName = "CountryTaxesPage"; export default CountryTaxesPage; diff --git a/src/taxes/components/TaxConfiguration/TaxConfiguration.tsx b/src/taxes/components/TaxConfiguration/TaxConfiguration.tsx index 7509e7eaf..f448b0e6d 100644 --- a/src/taxes/components/TaxConfiguration/TaxConfiguration.tsx +++ b/src/taxes/components/TaxConfiguration/TaxConfiguration.tsx @@ -2,7 +2,7 @@ import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; import CardActions from "@material-ui/core/CardActions"; import CardContent from "@material-ui/core/CardContent"; -import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -20,71 +20,60 @@ interface TaxConfigurationProps { onTaxFetch: () => void; } -const styles = createStyles({ +const useStyles = makeStyles({ content: { paddingBottom: 0 } }); -export const TaxConfiguration = withStyles(styles, { - name: "TaxConfiguration" -})( - ({ - classes, - data, - disabled, - onChange, - onTaxFetch - }: TaxConfigurationProps & WithStyles) => { - const intl = useIntl(); +export const TaxConfiguration: React.FC = props => { + const { data, disabled, onChange, onTaxFetch } = props; - return ( - - - - - - - - - - -
- - - - - ); - } -); + const classes = useStyles(props); + const intl = useIntl(); + + return ( + + + + + + + + + + +
+ + + + + ); +}; export default TaxConfiguration; diff --git a/src/theme.ts b/src/theme.ts index 5083dda0f..a9caf4af1 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -2,6 +2,7 @@ import Card from "@material-ui/core/Card"; import { createMuiTheme, Theme } from "@material-ui/core/styles"; import { darken, fade } from "@material-ui/core/styles/colorManipulator"; import TextField from "@material-ui/core/TextField"; +import Typography from "@material-ui/core/Typography"; const createShadow = (pv, pb, ps, uv, ub, us, av, ab, as) => [ @@ -110,6 +111,14 @@ export default (colors: IThemeColors): Theme => padding: "24px" } }, + MuiChip: { + avatar: { + height: 32, + left: -5, + position: "relative", + width: 32 + } + }, MuiDialogContent: { root: { "& label": { @@ -359,37 +368,43 @@ export default (colors: IThemeColors): Theme => } }, MuiSwitch: { - bar: { - "$colorPrimary$checked + &": { - backgroundColor: colors.primary - }, - backgroundColor: colors.gray.default, - borderRadius: 12, - height: 24, - marginTop: -12, - opacity: [["1"], "!important"] as any, - width: 48 - }, - icon: { - backgroundColor: colors.background.paper, - boxShadow: "none", - marginLeft: 4 - }, - iconChecked: { - backgroundColor: colors.background.paper, - boxShadow: "none" + colorPrimary: { + "&$checked": { + color: colors.background.paper + } }, root: { - "& $checked": { - transform: "translateX(24px)" - }, "&$disabled": { "&$switchBase": { "& + $bar": { backgroundColor: colors.gray.disabled } } - } + }, + height: 48, + width: 72 + }, + switchBase: { + "&$checked": { + transform: "translateX(23px)" + }, + boxShadow: "none", + left: 1, + marginLeft: 4, + top: 5 + }, + thumb: { + boxShadow: "none" + }, + track: { + "$colorPrimary$checked + &": { + backgroundColor: colors.primary + }, + backgroundColor: colors.gray.default, + borderRadius: 12, + height: 24, + opacity: [["1"], "!important"] as any, + width: 48 } }, MuiTable: { @@ -550,3 +565,7 @@ Card.defaultProps = { ...Card.defaultProps, elevation: 0 }; + +Typography.defaultProps = { + component: "p" +}; diff --git a/src/translations/components/TranslationFields/TranslationFields.tsx b/src/translations/components/TranslationFields/TranslationFields.tsx index 139dff9ea..cd1a96e2c 100644 --- a/src/translations/components/TranslationFields/TranslationFields.tsx +++ b/src/translations/components/TranslationFields/TranslationFields.tsx @@ -2,12 +2,7 @@ import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; import IconButton from "@material-ui/core/IconButton"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import Typography from "@material-ui/core/Typography"; import ArrowIcon from "@material-ui/icons/ArrowDropDown"; import CardTitle from "@saleor/components/CardTitle"; @@ -44,73 +39,72 @@ export interface TranslationFieldsProps { onSubmit: (field: string, data: string) => void; } -const styles = theme => - createStyles({ - cardCaption: { - fontSize: 14 - }, - cardContent: { - "&:last-child": { - paddingBottom: theme.spacing(1) - } - }, - columnHeader: { - marginBottom: theme.spacing(0.5) - }, - content: { - "& a": { - color: theme.palette.secondary.light - }, - "& blockquote": { - borderLeft: `2px solid ${theme.overrides.MuiCard.root.borderColor}`, - margin: 0, - padding: theme.spacing(1, 2) - }, - "& h2": { - fontSize: 22, - marginBottom: theme.spacing(1) - }, - "& h3": { - fontSize: 19, - marginBottom: theme.spacing(1) - }, - "& p": { - "&:last-child": { - marginBottom: 0 - }, - marginBottom: theme.spacing(), - marginTop: 0 - }, - paddingBottom: theme.spacing(2) - }, - editButtonContainer: { - alignItems: "center", - display: "flex", - justifyContent: "flex-end" - }, - fieldName: { - color: theme.typography.caption.color, - fontSize: 14, - fontWeight: 500, - marginBottom: theme.spacing(), - marginTop: theme.spacing(2), - textTransform: "uppercase" - }, - grid: { - gridRowGap: 0 - }, - hr: { - gridColumnEnd: "span 2" - }, - - rotate: { - transform: "rotate(180deg)" +const useStyles = makeStyles(theme => ({ + cardCaption: { + fontSize: 14 + }, + cardContent: { + "&:last-child": { + paddingBottom: theme.spacing(1) } - }); -const TranslationFields = withStyles(styles, { name: "TranslationFields" })( - ({ + }, + columnHeader: { + marginBottom: theme.spacing(0.5) + }, + content: { + "& a": { + color: theme.palette.secondary.light + }, + "& blockquote": { + borderLeft: `2px solid ${theme.palette.divider}`, + margin: 0, + padding: theme.spacing(1, 2) + }, + "& h2": { + fontSize: 22, + marginBottom: theme.spacing(1) + }, + "& h3": { + fontSize: 19, + marginBottom: theme.spacing(1) + }, + "& p": { + "&:last-child": { + marginBottom: 0 + }, + marginBottom: theme.spacing(), + marginTop: 0 + }, + paddingBottom: theme.spacing(2) + }, + editButtonContainer: { + alignItems: "center", + display: "flex", + justifyContent: "flex-end" + }, + fieldName: { + color: theme.typography.caption.color, + fontSize: 14, + fontWeight: 500, + marginBottom: theme.spacing(), + marginTop: theme.spacing(2), + textTransform: "uppercase" + }, + grid: { + gridRowGap: 0 + }, + hr: { + gridColumnEnd: "span 2" + }, + + rotate: { + transform: "rotate(180deg)" + } +})); +const TranslationFields: React.FC = props => { + const { activeField, - classes, + disabled, fields, initialState, @@ -119,137 +113,138 @@ const TranslationFields = withStyles(styles, { name: "TranslationFields" })( onEdit, onDiscard, onSubmit - }: TranslationFieldsProps & WithStyles) => { - const [expanded, setExpandedState] = React.useState(initialState); + } = props; + const classes = useStyles(props); - return ( - - setExpandedState(!expanded)}> - - - } - /> - {expanded ? ( - - - - - - - - - {fields.map(field => ( - -
- - {field.displayName} - -
- -
-
- {field && field.value !== undefined ? ( - field.type === "short" ? ( - - ) : field.type === "long" ? ( - - ) : ( - - ) - ) : ( - - )} -
- - {field && field.translation !== undefined ? ( - field.type === "short" ? ( - onSubmit(field.name, data)} - /> - ) : field.type === "long" ? ( - onSubmit(field.name, data)} - /> - ) : ( - onSubmit(field.name, data)} - /> - ) - ) : ( - - )} - - - ))} - - - ) : ( - - + const [expanded, setExpandedState] = React.useState(initialState); + + return ( + + setExpandedState(!expanded)}> + + + } + /> + {expanded ? ( + + + + + + acc + +(field.translation !== null), - 0 - ) - }} + defaultMessage="Translation" + description="Translated Name" /> - - )} - - ); - } -); + {fields.map(field => ( + +
+ + {field.displayName} + +
+ +
+
+ {field && field.value !== undefined ? ( + field.type === "short" ? ( + + ) : field.type === "long" ? ( + + ) : ( + + ) + ) : ( + + )} +
+ + {field && field.translation !== undefined ? ( + field.type === "short" ? ( + onSubmit(field.name, data)} + /> + ) : field.type === "long" ? ( + onSubmit(field.name, data)} + /> + ) : ( + onSubmit(field.name, data)} + /> + ) + ) : ( + + )} + + + ))} + + + ) : ( + + + acc + +(field.translation !== null), + 0 + ) + }} + /> + + + )} + + ); +}; TranslationFields.displayName = "TranslationFields"; export default TranslationFields; diff --git a/src/translations/components/TranslationFields/TranslationFieldsSave.tsx b/src/translations/components/TranslationFields/TranslationFieldsSave.tsx index 50142a9a1..f055971e0 100644 --- a/src/translations/components/TranslationFields/TranslationFieldsSave.tsx +++ b/src/translations/components/TranslationFields/TranslationFieldsSave.tsx @@ -1,10 +1,5 @@ import Button from "@material-ui/core/Button"; -import { - createStyles, - Theme, - withStyles, - WithStyles -} from "@material-ui/core/styles"; +import { makeStyles } from "@material-ui/core/styles"; import React from "react"; import { FormattedMessage } from "react-intl"; @@ -19,8 +14,8 @@ interface TranslationFieldsSaveProps { onSave: () => void; } -const styles = theme => - createStyles({ +const useStyles = makeStyles( + theme => ({ confirmButton: { marginLeft: theme.spacing(1) }, @@ -29,17 +24,18 @@ const styles = theme => flexDirection: "row-reverse", marginTop: theme.spacing(1) } - }); + }), + { + name: "TranslationFieldsSave" + } +); -const TranslationFieldsSave = withStyles(styles, { - name: "TranslationFieldsSave" -})( - ({ - classes, - saveButtonState, - onDiscard, - onSave - }: TranslationFieldsSaveProps & WithStyles) => ( +const TranslationFieldsSave: React.FC = props => { + const { saveButtonState, onDiscard, onSave } = props; + + const classes = useStyles(props); + + return (
- ) -); + ); +}; TranslationFieldsSave.displayName = "TranslationFieldsSave"; export default TranslationFieldsSave; diff --git a/src/translations/components/TranslationsEntitiesList/TranslationsEntitiesList.tsx b/src/translations/components/TranslationsEntitiesList/TranslationsEntitiesList.tsx index a3d36cf71..dc2751710 100644 --- a/src/translations/components/TranslationsEntitiesList/TranslationsEntitiesList.tsx +++ b/src/translations/components/TranslationsEntitiesList/TranslationsEntitiesList.tsx @@ -1,5 +1,5 @@ import { Omit } from "@material-ui/core"; -import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles"; +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"; @@ -31,7 +31,7 @@ export interface TranslationsEntitiesListProps onRowClick: (code: string) => void; } -const styles = createStyles({ +const useStyles = makeStyles({ tableRow: { cursor: "pointer" }, @@ -42,92 +42,92 @@ const styles = createStyles({ width: "80%" } }); -const TranslationsEntitiesList = withStyles(styles, { - name: "TranslationsEntitiesList" -})( - ({ - classes, +const TranslationsEntitiesList: React.FC< + TranslationsEntitiesListProps +> = props => { + const { disabled, entities, onNextPage, onPreviousPage, onRowClick, pageInfo - }: TranslationsEntitiesListProps & WithStyles) => { - const intl = useIntl(); + } = props; - return ( - - - - - - - - - - - - - - + + + + - - - - {renderCollection( - entities, - entity => ( - onRowClick(entity.id) : undefined} - key={entity ? entity.id : "skeleton"} - > - - {maybe(() => entity.name, )} - - - {maybe( - () => - intl.formatMessage( - { - defaultMessage: "{current} of {max}", - description: "translation progress" - }, - entity.completion - ), - - )} - - - ), - () => ( - - - - - - ) - )} - -
- ); - } -); + + + + + + + + + + + + + {renderCollection( + entities, + entity => ( + onRowClick(entity.id) : undefined} + key={entity ? entity.id : "skeleton"} + > + + {maybe(() => entity.name, )} + + + {maybe( + () => + intl.formatMessage( + { + defaultMessage: "{current} of {max}", + description: "translation progress" + }, + entity.completion + ), + + )} + + + ), + () => ( + + + + + + ) + )} + + + ); +}; TranslationsEntitiesList.displayName = "TranslationsEntitiesList"; export default TranslationsEntitiesList; diff --git a/src/translations/components/TranslationsEntitiesList/index.ts b/src/translations/components/TranslationsEntitiesList/index.ts index dad1683e0..3ffbfcfad 100644 --- a/src/translations/components/TranslationsEntitiesList/index.ts +++ b/src/translations/components/TranslationsEntitiesList/index.ts @@ -1,2 +1,2 @@ -export { default } from './TranslationsEntitiesList'; -export * from './TranslationsEntitiesList'; \ No newline at end of file +export { default } from "./TranslationsEntitiesList"; +export * from "./TranslationsEntitiesList"; diff --git a/src/translations/components/TranslationsEntitiesListPage/index.ts b/src/translations/components/TranslationsEntitiesListPage/index.ts index 4af040422..63fb7d0f0 100644 --- a/src/translations/components/TranslationsEntitiesListPage/index.ts +++ b/src/translations/components/TranslationsEntitiesListPage/index.ts @@ -1,2 +1,2 @@ -export { default } from './TranslationsEntitiesListPage'; -export * from './TranslationsEntitiesListPage'; \ No newline at end of file +export { default } from "./TranslationsEntitiesListPage"; +export * from "./TranslationsEntitiesListPage"; diff --git a/src/translations/components/TranslationsLanguageList/TranslationsLanguageList.tsx b/src/translations/components/TranslationsLanguageList/TranslationsLanguageList.tsx index 8412811e2..7400c15ea 100644 --- a/src/translations/components/TranslationsLanguageList/TranslationsLanguageList.tsx +++ b/src/translations/components/TranslationsLanguageList/TranslationsLanguageList.tsx @@ -1,5 +1,5 @@ import Card from "@material-ui/core/Card"; -import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles"; +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"; @@ -8,7 +8,6 @@ import TableRow from "@material-ui/core/TableRow"; import React from "react"; import { FormattedMessage } from "react-intl"; -// tslint:disable no-submodule-imports import { ShopInfo_shop_languages } from "@saleor/components/Shop/types/ShopInfo"; import Skeleton from "@saleor/components/Skeleton"; import { maybe, renderCollection } from "../../../misc"; @@ -18,7 +17,7 @@ export interface TranslationsLanguageListProps { onRowClick: (code: string) => void; } -const styles = createStyles({ +const useStyles = makeStyles({ capitalize: { textTransform: "capitalize" }, @@ -27,14 +26,14 @@ const styles = createStyles({ } }); -const TranslationsLanguageList = withStyles(styles, { - name: "TranslationsLanguageList" -})( - ({ - classes, - languages, - onRowClick - }: TranslationsLanguageListProps & WithStyles) => ( +const TranslationsLanguageList: React.FC< + TranslationsLanguageListProps +> = props => { + const { languages, onRowClick } = props; + + const classes = useStyles(props); + + return ( @@ -73,7 +72,7 @@ const TranslationsLanguageList = withStyles(styles, {
- ) -); + ); +}; TranslationsLanguageList.displayName = "TranslationsLanguageList"; export default TranslationsLanguageList; diff --git a/src/translations/components/TranslationsLanguageList/index.ts b/src/translations/components/TranslationsLanguageList/index.ts index 343273a4b..ac5ee5bcb 100644 --- a/src/translations/components/TranslationsLanguageList/index.ts +++ b/src/translations/components/TranslationsLanguageList/index.ts @@ -1,2 +1,2 @@ -export { default } from './TranslationsLanguageList'; -export * from './TranslationsLanguageList'; \ No newline at end of file +export { default } from "./TranslationsLanguageList"; +export * from "./TranslationsLanguageList"; diff --git a/src/translations/components/TranslationsLanguageListPage/index.ts b/src/translations/components/TranslationsLanguageListPage/index.ts index d0a78086a..c8ec03425 100644 --- a/src/translations/components/TranslationsLanguageListPage/index.ts +++ b/src/translations/components/TranslationsLanguageListPage/index.ts @@ -1,2 +1,2 @@ -export { default } from './TranslationsLanguageListPage'; -export * from './TranslationsLanguageListPage'; \ No newline at end of file +export { default } from "./TranslationsLanguageListPage"; +export * from "./TranslationsLanguageListPage"; diff --git a/src/translations/components/TranslationsProductsPage/index.ts b/src/translations/components/TranslationsProductsPage/index.ts index 80bf9a306..8b3a9cf36 100644 --- a/src/translations/components/TranslationsProductsPage/index.ts +++ b/src/translations/components/TranslationsProductsPage/index.ts @@ -1,2 +1,2 @@ -export { default } from './TranslationsProductsPage'; -export * from './TranslationsProductsPage'; \ No newline at end of file +export { default } from "./TranslationsProductsPage"; +export * from "./TranslationsProductsPage"; diff --git a/src/utils/handlers/singleAutocompleteSelectChangeHandler.ts b/src/utils/handlers/singleAutocompleteSelectChangeHandler.ts index 1f95c8a54..d3c718e6a 100644 --- a/src/utils/handlers/singleAutocompleteSelectChangeHandler.ts +++ b/src/utils/handlers/singleAutocompleteSelectChangeHandler.ts @@ -10,7 +10,7 @@ function createSingleAutocompleteSelectHandler( change(event); const value = event.target.value; - const choice = choices.find(category => category.value === value) + const choice = choices.find(category => category.value === value); setSelected(choice ? choice.label : value); }; } diff --git a/src/webhooks/components/WebhooksList/WebhooksList.tsx b/src/webhooks/components/WebhooksList/WebhooksList.tsx index f7901ab43..69f409036 100644 --- a/src/webhooks/components/WebhooksList/WebhooksList.tsx +++ b/src/webhooks/components/WebhooksList/WebhooksList.tsx @@ -1,4 +1,3 @@ -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"; diff --git a/src/webhooks/queries.ts b/src/webhooks/queries.ts index bdfdedf4d..27ee26fd4 100644 --- a/src/webhooks/queries.ts +++ b/src/webhooks/queries.ts @@ -1,7 +1,10 @@ import gql from "graphql-tag"; import { TypedQuery } from "../queries"; -import { WebhookDetails, WebhookDetailsVariables } from "./types/WebhookDetails"; +import { + WebhookDetails, + WebhookDetailsVariables +} from "./types/WebhookDetails"; import { Webhooks, WebhooksVariables } from "./types/Webhooks"; export const webhooksFragment = gql` @@ -70,6 +73,7 @@ const webhooksDetails = gql` } } `; -export const TypedWebhooksDetailsQuery = TypedQuery( - webhooksDetails -); +export const TypedWebhooksDetailsQuery = TypedQuery< + WebhookDetails, + WebhookDetailsVariables +>(webhooksDetails);