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

Update @material-ui to v4

Browse source
This commit is contained in:
dominik-zeglen 2019-10-30 15:34:24 +01:00
parent d84ba84e91
commit 74d6794679
276 changed files with 13094 additions and 13943 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
package-lock.json generated
View file

@ -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",

2
package.json
View file

@ -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"
},

4
src/attributes/components/AttributeBulkDeleteDialog/index.ts
View file

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

4
src/attributes/components/AttributeDeleteDialog/index.ts
View file

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

4
src/attributes/components/AttributeDetails/index.ts
View file

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

4
src/attributes/components/AttributeList/index.ts
View file

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

4
src/attributes/components/AttributeListPage/index.ts
View file

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

4
src/attributes/components/AttributePage/index.ts
View file

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

4
src/attributes/components/AttributeProperties/index.ts
View file

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

4
src/attributes/components/AttributeValueDeleteDialog/index.ts
View file

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

4
src/attributes/components/AttributeValueEditDialog/index.ts
View file

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

4
src/attributes/components/AttributeValues/index.ts
View file

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

4
src/attributes/views/AttributeList/filters.ts
View file

@ -13,11 +13,11 @@ export const PRODUCT_FILTERS_KEY = "productFilters";
export function getFilterVariables(
params: AttributeListUrlFilters
): AttributeFilterInput {
): AttributeFilterInput {
return {
search: params.query
};
}
}
export const {
deleteFilterTab,

19
src/auth/components/LoginLoading/LoginLoading.tsx
View file

@ -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({
const useStyles = makeStyles(
{
root: {
alignItems: "center",
display: "flex",
height: "100vh",
justifyContent: "center"
}
});
const LoginLoading = withStyles(styles, { name: "LoginLoading" })(
({ classes }: WithStyles<typeof styles>) => (
},
{ name: "LoginLoading" }
);
const LoginLoading: React.FC = props => {
const classes = useStyles(props);
return (
<div className={classes.root}>
<CircularProgress size={128} />
</div>
)
);
);
};
LoginLoading.displayName = "LoginLoading";
export default LoginLoading;

32
src/auth/components/LoginPage/LoginPage.tsx
View file

@ -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,23 +37,21 @@ const styles = theme =>
marginBottom: theme.spacing(3),
padding: theme.spacing(1.5)
}
});
}),
{ name: "LoginCard" }
);
export interface LoginCardProps extends WithStyles<typeof styles> {
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 LoginCard: React.FC<LoginCardProps> = props => {
const { error, disableLoginButton, onPasswordRecovery, onSubmit } = props;
const classes = useStyles(props);
const intl = useIntl();
return (
@ -124,7 +117,6 @@ const LoginCard = withStyles(styles, { name: "LoginCard" })(
)}
</Form>
);
}
);
};
LoginCard.displayName = "LoginCard";
export default LoginCard;

2
src/auth/misc.ts
View file

@ -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) =>

32
src/categories/components/CategoryDeleteDialog/CategoryDeleteDialog.tsx
View file

@ -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,18 +19,25 @@ const styles = theme =>
backgroundColor: theme.palette.error.main,
color: theme.palette.error.contrastText
}
});
}),
{
name: "CategoryDeleteDialog"
}
);
export interface CategoryDeleteDialogProps extends WithStyles<typeof styles> {
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<CategoryDeleteDialogProps> = props => {
const { name, open, onConfirm, onClose } = props;
const classes = useStyles(props);
return (
<Dialog onClose={onClose} open={open}>
<DialogTitle>
<FormattedMessage
@ -67,6 +69,8 @@ const CategoryDeleteDialog = withStyles(styles, {
</Button>
</DialogActions>
</Dialog>
));
);
};
CategoryDeleteDialog.displayName = "CategoryDeleteDialog";
export default CategoryDeleteDialog;

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

@ -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<CategoryListProps> = props => {
const {
categories,
classes,
disabled,
settings,
pageInfo,
@ -72,7 +68,11 @@ const CategoryList = withStyles(styles, { name: "CategoryList" })(
onPreviousPage,
onUpdateListSettings,
onRowClick
}: CategoryListProps & WithStyles<typeof styles>) => (
} = props;
const classes = useStyles(props);
return (
<Table>
<TableHead
colSpan={numberOfColumns}
@ -175,7 +175,8 @@ const CategoryList = withStyles(styles, { name: "CategoryList" })(
)}
</TableBody>
</Table>
)
);
);
};
CategoryList.displayName = "CategoryList";
export default CategoryList;

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

@ -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<typeof styles> {
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,7 +89,9 @@ export const CategoryProductList = withStyles(styles, {
onNextPage,
onPreviousPage,
onRowClick
}: CategoryProductListProps) => {
} = props;
const classes = useStyles(props);
const intl = useIntl();
const numberOfColumns = 5;
@ -145,9 +142,7 @@ export const CategoryProductList = withStyles(styles, {
<TableRow>
<TablePagination
colSpan={numberOfColumns}
hasNextPage={
pageInfo && !disabled ? pageInfo.hasNextPage : false
}
hasNextPage={pageInfo && !disabled ? pageInfo.hasNextPage : false}
onNextPage={onNextPage}
hasPreviousPage={
pageInfo && !disabled ? pageInfo.hasPreviousPage : false
@ -237,7 +232,7 @@ export const CategoryProductList = withStyles(styles, {
</Table>
</div>
);
}
);
};
CategoryProductList.displayName = "CategoryProductList";
export default CategoryProductList;

34
src/collections/components/CollectionImage/CollectionImage.tsx
View file

@ -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,16 +61,11 @@ export interface CollectionImageProps {
onImageUpload: (file: File) => void;
}
export const CollectionImage = withStyles(styles)(
({
classes,
data,
onImageUpload,
image,
onChange,
onImageDelete
}: CollectionImageProps & WithStyles<typeof styles>) => {
export const CollectionImage: React.FC<CollectionImageProps> = props => {
const { data, onImageUpload, image, onChange, onImageDelete } = props;
const anchor = React.useRef<HTMLInputElement>();
const classes = useStyles(props);
const intl = useIntl();
const handleImageUploadButtonClick = () => anchor.current.click();
@ -138,7 +132,7 @@ export const CollectionImage = withStyles(styles)(
)}
</Card>
);
}
);
};
CollectionImage.displayName = "CollectionImage";
export default CollectionImage;

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

@ -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<typeof styles> {
interface CollectionListProps extends ListProps, ListActions {
collections: CollectionList_collections_edges_node[];
}
const numberOfColumns = 5;
const CollectionList = withStyles(styles, { name: "CollectionList" })(
({
classes,
const CollectionList: React.FC<CollectionListProps> = props => {
const {
collections,
disabled,
settings,
@ -69,7 +62,9 @@ const CollectionList = withStyles(styles, { name: "CollectionList" })(
toggle,
toggleAll,
toolbar
}: CollectionListProps) => {
} = props;
const classes = useStyles(props);
const intl = useIntl();
return (
@ -134,10 +129,7 @@ const CollectionList = withStyles(styles, { name: "CollectionList" })(
/>
</TableCell>
<TableCell className={classes.colName} data-tc="name">
{maybe<React.ReactNode>(
() => collection.name,
<Skeleton />
)}
{maybe<React.ReactNode>(() => collection.name, <Skeleton />)}
</TableCell>
<TableCell className={classes.colProducts}>
{maybe<React.ReactNode>(
@ -184,7 +176,7 @@ const CollectionList = withStyles(styles, { name: "CollectionList" })(
</TableBody>
</Table>
);
}
);
};
CollectionList.displayName = "CollectionList";
export default CollectionList;

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

@ -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,8 +24,8 @@ 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
@ -56,21 +51,19 @@ const styles = theme =>
tableRow: {
cursor: "pointer"
}
});
}),
{ name: "CollectionProducts" }
);
export interface CollectionProductsProps
extends PageListProps,
ListActions,
WithStyles<typeof styles> {
export interface CollectionProductsProps extends PageListProps, ListActions {
collection: CollectionDetails_collection;
onProductUnassign: (id: string, event: React.MouseEvent<any>) => void;
}
const numberOfColumns = 5;
const CollectionProducts = withStyles(styles, { name: "CollectionProducts" })(
({
classes,
const CollectionProducts: React.FC<CollectionProductsProps> = props => {
const {
collection,
disabled,
onAdd,
@ -84,7 +77,9 @@ const CollectionProducts = withStyles(styles, { name: "CollectionProducts" })(
toggle,
toggleAll,
toolbar
}: CollectionProductsProps) => {
} = props;
const classes = useStyles(props);
const intl = useIntl();
return (
@ -124,9 +119,7 @@ const CollectionProducts = withStyles(styles, { name: "CollectionProducts" })(
colSpan={numberOfColumns}
selected={selected}
disabled={disabled}
items={maybe(() =>
collection.products.edges.map(edge => edge.node)
)}
items={maybe(() => collection.products.edges.map(edge => edge.node))}
toggleAll={toggleAll}
toolbar={toolbar}
>
@ -242,7 +235,7 @@ const CollectionProducts = withStyles(styles, { name: "CollectionProducts" })(
</Table>
</Card>
);
}
);
};
CollectionProducts.displayName = "CollectionProducts";
export default CollectionProducts;

35
src/components/AccountPermissions/AccountPermissions.tsx
View file

@ -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<typeof styles> {
interface AccountPermissionsProps {
permissions: ShopInfo_shop_permissions[];
data: {
hasFullAccess: boolean;
@ -39,14 +36,10 @@ interface AccountPermissionsProps extends WithStyles<typeof styles> {
onChange: (event: React.ChangeEvent<any>, cb?: () => void) => void;
}
const AccountPermissions = withStyles(styles, { name: "AccountPermissions" })(
({
classes,
data,
disabled,
permissions,
onChange
}: AccountPermissionsProps) => {
const AccountPermissions: React.FC<AccountPermissionsProps> = props => {
const { data, disabled, permissions, onChange } = props;
const classes = useStyles(props);
const intl = useIntl();
const handleFullAccessChange = (event: React.ChangeEvent<any>) =>
@ -121,7 +114,7 @@ const AccountPermissions = withStyles(styles, { name: "AccountPermissions" })(
)}
</Card>
);
}
);
};
AccountPermissions.displayName = "AccountPermissions";
export default AccountPermissions;

30
src/components/ActionDialog/ActionDialog.tsx
View file

@ -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<typeof styles> {
interface ActionDialogProps {
children?: React.ReactNode;
confirmButtonLabel?: string;
confirmButtonState: ConfirmButtonTransitionState;
@ -40,10 +37,9 @@ interface ActionDialogProps extends WithStyles<typeof styles> {
onConfirm();
}
const ActionDialog = withStyles(styles, { name: "ActionDialog" })(
({
const ActionDialog: React.FC<ActionDialogProps> = props => {
const {
children,
classes,
confirmButtonLabel,
confirmButtonState,
open,
@ -51,7 +47,9 @@ const ActionDialog = withStyles(styles, { name: "ActionDialog" })(
variant,
onConfirm,
onClose
}: ActionDialogProps) => {
} = props;
const classes = useStyles(props);
const intl = useIntl();
return (
@ -79,7 +77,7 @@ const ActionDialog = withStyles(styles, { name: "ActionDialog" })(
</DialogActions>
</Dialog>
);
}
);
};
ActionDialog.displayName = "ActionDialog";
export default ActionDialog;

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

@ -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({
const useStyles = makeStyles(theme => ({
root: {
display: "grid",
gridColumnGap: theme.spacing(2),
gridTemplateColumns: "1fr 1fr"
}
});
}));
interface AddressEditProps extends WithStyles<typeof styles> {
interface AddressEditProps {
countries: SingleAutocompleteChoiceType[];
countryDisplayValue: string;
data: AddressTypeInput;
@ -35,9 +29,8 @@ interface AddressEditProps extends WithStyles<typeof styles> {
onCountryChange(event: React.ChangeEvent<any>);
}
const AddressEdit = withStyles(styles, { name: "AddressEdit" })(
({
classes,
const AddressEdit: React.FC<AddressEditProps> = props => {
const {
countries,
countryDisplayValue,
data,
@ -45,7 +38,9 @@ const AddressEdit = withStyles(styles, { name: "AddressEdit" })(
errors,
onChange,
onCountryChange
}: AddressEditProps) => {
} = props;
const classes = useStyles(props);
const intl = useIntl();
return (
@ -202,7 +197,6 @@ const AddressEdit = withStyles(styles, { name: "AddressEdit" })(
</div>
</>
);
}
);
};
AddressEdit.displayName = "AddressEdit";
export default AddressEdit;

28
src/components/AppHeader/AppHeader.tsx
View file

@ -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,8 +11,7 @@ export interface AppHeaderProps {
onBack();
}
const styles = theme =>
createStyles({
const useStyles = makeStyles(theme => ({
backArrow: {
fontSize: 30
},
@ -48,13 +42,13 @@ const styles = theme =>
marginLeft: theme.spacing(),
textTransform: "uppercase"
}
});
const AppHeader = withStyles(styles, { name: "AppHeader" })(
({
children,
classes,
onBack
}: AppHeaderProps & WithStyles<typeof styles>) => (
}));
const AppHeader: React.FC<AppHeaderProps> = props => {
const { children, onBack } = props;
const classes = useStyles(props);
return (
<AppHeaderContext.Consumer>
{anchor =>
anchor ? (
@ -71,7 +65,7 @@ const AppHeader = withStyles(styles, { name: "AppHeader" })(
) : null
}
</AppHeaderContext.Consumer>
)
);
);
};
AppHeader.displayName = "AppHeader";
export default AppHeader;

4
src/components/AppHeader/index.ts
View file

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

49
src/components/AppLayout/AppLayout.tsx
View file

@ -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,23 +263,19 @@ 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<AppLayoutProps & RouteComponentProps<any>, any>(
({
classes,
children,
location
}: AppLayoutProps &
WithStyles<typeof styles> &
RouteComponentProps<any>) => {
const AppLayout = withRouter<AppLayoutProps & RouteComponentProps<any>, any>(
({ children, location }: AppLayoutProps & RouteComponentProps<any>) => {
const classes = useStyles({});
const { isDark, toggleTheme } = useTheme();
const [isMenuSmall, setMenuSmall] = useLocalStorage("isMenuSmall", false);
const [isDrawerOpened, setDrawerState] = React.useState(false);
@ -314,10 +310,7 @@ const AppLayout = withStyles(styles, {
navigate(staffMemberDetailsUrl(user.id));
};
const handleMenuItemClick = (
url: string,
event: React.MouseEvent<any>
) => {
const handleMenuItemClick = (url: string, event: React.MouseEvent<any>) => {
event.stopPropagation();
event.preventDefault();
setDrawerState(false);
@ -347,9 +340,7 @@ const AppLayout = withStyles(styles, {
})}
>
<SVG
src={
isMenuSmall ? saleorDarkLogoSmall : saleorDarkLogo
}
src={isMenuSmall ? saleorDarkLogoSmall : saleorDarkLogo}
/>
</div>
<Hidden smDown>
@ -364,9 +355,7 @@ const AppLayout = withStyles(styles, {
</div>
</Hidden>
<MenuList
className={
isMenuSmall ? classes.menuSmall : classes.menu
}
className={isMenuSmall ? classes.menuSmall : classes.menu}
menuItems={menuStructure}
isMenuSmall={!isMenuSmall}
location={location.pathname}
@ -420,10 +409,7 @@ const AppLayout = withStyles(styles, {
<Chip
avatar={
user.avatar && (
<Avatar
alt="user"
src={user.avatar.url}
/>
<Avatar alt="user" src={user.avatar.url} />
)
}
className={classes.userChip}
@ -459,9 +445,7 @@ const AppLayout = withStyles(styles, {
>
<Paper>
<ClickAwayListener
onClickAway={() =>
setMenuState(false)
}
onClickAway={() => setMenuState(false)}
mouseEvent="onClick"
>
<Menu>
@ -505,7 +489,6 @@ const AppLayout = withStyles(styles, {
</AppProgressProvider>
);
}
)
);
export default AppLayout;

31
src/components/AppLayout/MenuList.tsx
View file

@ -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,8 +19,7 @@ import { orderDraftListUrl, orderListUrl } from "../../orders/urls";
import MenuNested from "./MenuNested";
import { IMenuItem } from "./menuStructure";
const styles = theme =>
createStyles({
const useStyles = makeStyles(theme => ({
menuIcon: {
"& svg": {
height: 32,
@ -159,7 +153,7 @@ const styles = theme =>
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<MenuListProps> = props => {
const {
className,
menuItems,
isMenuSmall,
@ -186,7 +179,10 @@ const MenuList = withStyles(styles, { name: "MenuList" })(
user,
renderConfigure,
onMenuItemClick
}: MenuListProps & WithStyles<typeof styles>) => {
} = props;
const classes = useStyles(props);
const { isDark } = useTheme();
const [activeSubMenu, setActiveSubMenu] = React.useState<IActiveSubMenu>({
isActive: false,
@ -239,9 +235,7 @@ const MenuList = withStyles(styles, { name: "MenuList" })(
if (
menuItem.permission &&
!user.permissions
.map(perm => perm.code)
.includes(menuItem.permission)
!user.permissions.map(perm => perm.code).includes(menuItem.permission)
) {
return null;
}
@ -360,6 +354,7 @@ const MenuList = withStyles(styles, { name: "MenuList" })(
)}
</div>
);
}
);
};
MenuList.displayName = "MenuList";
export default MenuList;

37
src/components/AppLayout/MenuNested.tsx
View file

@ -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,8 +12,7 @@ import { drawerWidthExpanded } from "./consts";
import { IActiveSubMenu } from "./MenuList";
import { IMenuItem } from "./menuStructure";
const styles = theme =>
createStyles({
const useStyles = makeStyles(theme => ({
menuListNested: {
background: theme.palette.background.paper,
height: "100vh",
@ -99,7 +93,7 @@ const styles = theme =>
display: "inline",
paddingLeft: 10
}
});
}));
export interface MenuNestedProps {
activeItem: IActiveSubMenu;
@ -112,17 +106,19 @@ export interface MenuNestedProps {
onMenuItemClick: (url: string, event: React.MouseEvent<any>) => void;
}
const MenuNested = withStyles(styles, { name: "MenuNested" })(
({
const MenuNested: React.FC<MenuNestedProps> = props => {
const {
activeItem,
ariaLabel,
classes,
closeSubMenu,
icon,
menuItem,
onMenuItemClick,
title
}: MenuNestedProps & WithStyles<typeof styles>) => {
} = props;
const classes = useStyles(props);
const menuItems = menuItem.children;
const { isDark } = useTheme();
const closeMenu = (menuItemUrl, event) => {
@ -174,8 +170,7 @@ const MenuNested = withStyles(styles, { name: "MenuNested" })(
</div>
</Hidden>
</Typography>
{menuItems.map(item => {
return (
{menuItems.map(item => (
<a
className={classNames(classes.menuListNestedItem)}
href={createHref(item.url)}
@ -183,15 +178,13 @@ const MenuNested = withStyles(styles, { name: "MenuNested" })(
onClick={event => closeMenu(item.url, event)}
key={item.label}
>
<Typography aria-label={item.ariaLabel}>
{item.label}
</Typography>
<Typography aria-label={item.ariaLabel}>{item.label}</Typography>
</a>
);
})}
))}
</div>
</>
);
}
);
};
MenuNested.displayName = "MenuNested";
export default MenuNested;

29
src/components/AppLayout/ResponsiveDrawer.tsx
View file

@ -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<typeof styles> {
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<ResponsiveDrawerProps> = props => {
const { children, onClose, open, small } = props;
const classes = useStyles(props);
return (
<>
<Hidden smDown>
<Drawer
@ -63,6 +64,6 @@ const ResponsiveDrawer = withStyles(styles, { name: "ResponsiveDrawer" })(
</Drawer>
</Hidden>
</>
)
);
);
};
export default ResponsiveDrawer;

21
src/components/AppLayout/ThemeSwitch.tsx
View file

@ -1,11 +1,12 @@
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 => ({
const useStyles = makeStyles(
theme => ({
bar: {
"$colorPrimary$checked + &": {
backgroundColor: theme.palette.background.paper
@ -28,16 +29,24 @@ const switchStyles = theme => ({
},
width: 58
}
});
const ThemeSwitch = withStyles(switchStyles, {
}),
{
name: "ThemeSwitch"
})((props: SwitchProps) => (
}
);
const ThemeSwitch: React.FC<SwitchProps> = props => {
const classes = useStyles(props);
return (
<Switch
{...props}
classes={classes}
color="primary"
icon={<SunIcon />}
checkedIcon={<MoonIcon />}
/>
));
);
};
ThemeSwitch.displayName = "ThemeSwitch";
export default ThemeSwitch;

4
src/components/AppLayout/index.ts
View file

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

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

@ -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<typeof styles> {
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<AssignCategoriesDialogProps> = props => {
const {
confirmButtonState,
open,
loading,
@ -83,7 +80,9 @@ const AssignCategoriesDialog = withStyles(styles, {
onClose,
onFetch,
onSubmit
}: AssignCategoriesDialogProps) => {
} = props;
const classes = useStyles(props);
const intl = useIntl();
const [query, onQueryChange] = useSearchQuery(onFetch);
const [selectedCategories, setSelectedCategories] = React.useState<
@ -178,7 +177,6 @@ const AssignCategoriesDialog = withStyles(styles, {
</DialogActions>
</Dialog>
);
}
);
};
AssignCategoriesDialog.displayName = "AssignCategoriesDialog";
export default AssignCategoriesDialog;

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

@ -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<typeof styles> {
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<AssignCollectionDialogProps> = props => {
const {
confirmButtonState,
open,
loading,
@ -83,7 +80,9 @@ const AssignCollectionDialog = withStyles(styles, {
onClose,
onFetch,
onSubmit
}: AssignCollectionDialogProps) => {
} = props;
const classes = useStyles(props);
const intl = useIntl();
const [query, onQueryChange] = useSearchQuery(onFetch);
const [selectedCollections, setSelectedCollections] = React.useState<
@ -129,8 +128,7 @@ const AssignCollectionDialog = withStyles(styles, {
{collections &&
collections.map(collection => {
const isSelected = !!selectedCollections.find(
selectedCollection =>
selectedCollection.id === collection.id
selectedCollection => selectedCollection.id === collection.id
);
return (
@ -179,7 +177,6 @@ const AssignCollectionDialog = withStyles(styles, {
</DialogActions>
</Dialog>
);
}
);
};
AssignCollectionDialog.displayName = "AssignCollectionDialog";
export default AssignCollectionDialog;

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

@ -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<AssignProductDialogProps> = props => {
const {
confirmButtonState,
open,
loading,
@ -89,7 +86,9 @@ const AssignProductDialog = withStyles(styles, {
onClose,
onFetch,
onSubmit
}: AssignProductDialogProps & WithStyles<typeof styles>) => {
} = props;
const classes = useStyles(props);
const intl = useIntl();
const [query, onQueryChange] = useSearchQuery(onFetch);
const [selectedProducts, setSelectedProducts] = React.useState<
@ -191,7 +190,6 @@ const AssignProductDialog = withStyles(styles, {
</DialogActions>
</Dialog>
);
}
);
};
AssignProductDialog.displayName = "AssignProductDialog";
export default AssignProductDialog;

28
src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx
View file

@ -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,14 +38,13 @@ const DebounceAutocomplete: React.ComponentType<
DebounceProps<string>
> = Debounce;
const styles = theme =>
createStyles({
const useStyles = makeStyles(theme => ({
container: {
flexGrow: 1,
position: "relative"
},
menuBack: {
marginLeft: -theme.spacing(.5),
marginLeft: -theme.spacing(0.5),
marginRight: theme.spacing(1)
},
paper: {
@ -62,12 +56,9 @@ const styles = theme =>
zIndex: 2
},
root: {}
});
const AutocompleteSelectMenu = withStyles(styles, {
name: "AutocompleteSelectMenu"
})(
({
classes,
}));
const AutocompleteSelectMenu: React.FC<AutocompleteSelectMenuProps> = props => {
const {
disabled,
displayValue,
error,
@ -79,7 +70,9 @@ const AutocompleteSelectMenu = withStyles(styles, {
placeholder,
onChange,
onInputChange
}: AutocompleteSelectMenuProps & WithStyles<typeof styles>) => {
} = props;
const classes = useStyles(props);
const [inputValue, setInputValue] = React.useState(displayValue || "");
const [menuPath, setMenuPath] = React.useState<number[]>([]);
@ -189,7 +182,6 @@ const AutocompleteSelectMenu = withStyles(styles, {
)}
</DebounceAutocomplete>
);
}
);
};
AutocompleteSelectMenu.displayName = "AutocompleteSelectMenu";
export default AutocompleteSelectMenu;

4
src/components/AutocompleteSelectMenu/index.ts
View file

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

28
src/components/CardMenu/CardMenu.tsx
View file

@ -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,8 +18,7 @@ export interface CardMenuProps {
menuItems: CardMenuItem[];
}
const styles = theme =>
createStyles({
const useStyles = makeStyles(theme => ({
iconButton: {
background: theme.palette.background.paper,
borderRadius: "100%",
@ -32,17 +26,12 @@ const styles = theme =>
padding: 0,
width: 32
}
});
}));
const CardMenu: React.FC<CardMenuProps> = props => {
const { className, disabled, menuItems } = props;
const classes = useStyles(props);
const CardMenu = withStyles(styles, {
name: "CardMenu"
})(
({
className,
classes,
disabled,
menuItems
}: CardMenuProps & WithStyles<typeof styles>) => {
const [anchorEl, setAnchor] = React.useState<HTMLElement | null>(null);
const handleClick = (event: React.MouseEvent<any>) => {
@ -96,7 +85,6 @@ const CardMenu = withStyles(styles, {
</Menu>
</div>
);
}
);
};
CardMenu.displayName = "CardMenu";
export default CardMenu;

26
src/components/CardSpacer.tsx
View file

@ -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({
const useStyles = makeStyles(theme => ({
spacer: {
[theme.breakpoints.down("sm")]: {
marginTop: theme.spacing(1)
},
marginTop: theme.spacing(3)
}
});
}));
interface CardSpacerProps extends WithStyles<typeof styles> {
interface CardSpacerProps {
children?: React.ReactNode;
}
export const CardSpacer = withStyles(styles, { name: "CardSpacer" })(
({ classes, children }: CardSpacerProps) => (
<div className={classes.spacer}>{children}</div>
)
);
export const CardSpacer: React.FC<CardSpacerProps> = props => {
const { children } = props;
const classes = useStyles(props);
return <div className={classes.spacer}>{children}</div>;
};
CardSpacer.displayName = "CardSpacer";
export default CardSpacer;

35
src/components/CardTitle/CardTitle.tsx
View file

@ -1,22 +1,16 @@
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({
const useStyles = makeStyles(theme => ({
children: theme.mixins.gutters({}),
constantHeight: {
height: 56
},
hr: {
border: "none",
borderTop: `1px solid ${theme.overrides.MuiCard.root.borderColor}`,
borderTop: `1px solid ${theme.palette.divider}`,
height: 0,
marginBottom: 0,
marginTop: 0,
@ -34,9 +28,9 @@ const styles = theme =>
toolbar: {
marginRight: -theme.spacing(1)
}
});
}));
interface CardTitleProps extends WithStyles<typeof styles> {
interface CardTitleProps {
children?: React.ReactNode;
className?: string;
height?: "default" | "const";
@ -45,24 +39,27 @@ interface CardTitleProps extends WithStyles<typeof styles> {
onClick?: (event: React.MouseEvent<any>) => void;
}
const CardTitle = withStyles(styles, { name: "CardTitle" })(
({
classes,
const CardTitle: React.FC<CardTitleProps> = props => {
const {
className,
children,
height,
title,
toolbar,
onClick,
...props
}: CardTitleProps) => (
...rest
} = props;
const classes = useStyles(props);
return (
<>
<div
className={classNames(classes.root, {
[className]: !!className,
[classes.constantHeight]: height === "const"
})}
{...props}
{...rest}
>
<Typography
className={classes.title}
@ -77,7 +74,7 @@ const CardTitle = withStyles(styles, { name: "CardTitle" })(
<div className={classes.children}>{children}</div>
<hr className={classes.hr} />
</>
)
);
);
};
CardTitle.displayName = "CardTitle";
export default CardTitle;

30
src/components/Checkbox/Checkbox.tsx
View file

@ -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,8 +19,7 @@ export type CheckboxProps = Omit<
onChange?: (event: React.ChangeEvent<any>) => void;
};
const styles = theme =>
createStyles({
const useStyles = makeStyles(theme => ({
box: {
"&$checked": {
"&:before": {
@ -86,20 +79,22 @@ const styles = theme =>
margin: "5px 9px",
width: 30
}
});
const Checkbox = withStyles(styles, { name: "Checkbox" })(
({
}));
const Checkbox: React.FC<CheckboxProps> = props => {
const {
checked,
className,
classes,
disabled,
disableClickPropagation,
indeterminate,
onChange,
value,
name,
...props
}: CheckboxProps & WithStyles<typeof styles>) => {
...rest
} = props;
const classes = useStyles(props);
const inputRef = React.useRef<HTMLInputElement>(null);
const handleClick = React.useCallback(
disableClickPropagation
@ -113,7 +108,7 @@ const Checkbox = withStyles(styles, { name: "Checkbox" })(
return (
<ButtonBase
{...props}
{...rest}
centerRipple
className={classNames(classes.root, className)}
disabled={disabled}
@ -134,7 +129,6 @@ const Checkbox = withStyles(styles, { name: "Checkbox" })(
/>
</ButtonBase>
);
}
);
};
Checkbox.displayName = "Checkbox";
export default Checkbox;

4
src/components/Checkbox/index.ts
View file

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

29
src/components/Chip/Chip.tsx
View file

@ -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,8 +11,7 @@ export interface ChipProps {
onClose?: () => void;
}
const styles = theme =>
createStyles({
const useStyles = makeStyles(theme => ({
closeIcon: {
cursor: "pointer",
fontSize: 16,
@ -34,14 +28,13 @@ const styles = theme =>
marginRight: theme.spacing(2),
padding: "6px 12px"
}
});
const Chip = withStyles(styles, { name: "Chip" })(
({
classes,
className,
label,
onClose
}: ChipProps & WithStyles<typeof styles>) => (
}));
const Chip: React.FC<ChipProps> = props => {
const { className, label, onClose } = props;
const classes = useStyles(props);
return (
<div className={classNames(classes.root, className)}>
<Typography className={classes.label} variant="caption">
{label}
@ -50,7 +43,7 @@ const Chip = withStyles(styles, { name: "Chip" })(
)}
</Typography>
</div>
)
);
);
};
Chip.displayName = "Chip";
export default Chip;

4
src/components/Chip/index.ts
View file

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

2
src/components/ColumnPicker/ColumnPickerContent.tsx
View file

@ -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",

7
src/components/ConfirmButton/ConfirmButton.tsx
View file

@ -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": {

26
src/components/Container.tsx
View file

@ -1,14 +1,8 @@
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({
const useStyles = makeStyles(theme => ({
root: {
[theme.breakpoints.up("lg")]: {
marginLeft: "auto",
@ -20,16 +14,18 @@ const styles = theme =>
},
padding: theme.spacing(0, 1)
}
});
}));
interface ContainerProps extends WithStyles<typeof styles> {
interface ContainerProps {
className?: string;
}
export const Container = withStyles(styles, {
name: "Container"
})(({ classes, className, ...props }: ContainerProps) => (
<div className={classNames(classes.root, className)} {...props} />
));
export const Container: React.FC<ContainerProps> = props => {
const { className, ...rest } = props;
const classes = useStyles(props);
return <div className={classNames(classes.root, className)} {...rest} />;
};
Container.displayName = "Container";
export default Container;

26
src/components/ControlledSwitch.tsx
View file

@ -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({
const useStyles = makeStyles(theme => ({
label: {
marginLeft: theme.spacing(3.5)
},
labelText: {
fontSize: 14
}
});
}));
interface ControlledSwitchProps extends WithStyles<typeof styles> {
interface ControlledSwitchProps {
checked: boolean;
disabled?: boolean;
label: string | React.ReactNode;
@ -23,11 +22,8 @@ interface ControlledSwitchProps extends WithStyles<typeof styles> {
onChange?(event: React.ChangeEvent<any>);
}
export const ControlledSwitch = withStyles(styles, {
name: "ControlledSwitch"
})(
({
classes,
export const ControlledSwitch: React.FC<ControlledSwitchProps> = props => {
const {
checked,
disabled,
onChange,
@ -35,7 +31,11 @@ export const ControlledSwitch = withStyles(styles, {
name,
secondLabel,
uncheckedLabel
}: ControlledSwitchProps) => (
} = props;
const classes = useStyles(props);
return (
<FormControlLabel
control={
<Switch
@ -65,7 +65,7 @@ export const ControlledSwitch = withStyles(styles, {
}
disabled={disabled}
/>
)
);
);
};
ControlledSwitch.displayName = "ControlledSwitch";
export default ControlledSwitch;

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

@ -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,8 +27,7 @@ export interface CountryListProps {
onCountryUnassign: (country: string) => void;
}
const styles = theme =>
createStyles({
const useStyles = makeStyles(theme => ({
iconCell: {
"&:last-child": {
paddingRight: 0
@ -44,7 +38,7 @@ const styles = theme =>
color: theme.palette.text.disabled,
display: "inline-block",
left: 0,
marginRight: theme.spacing(.5),
marginRight: theme.spacing(0.5),
position: "absolute"
},
offsetCell: {
@ -76,20 +70,19 @@ const styles = theme =>
wideColumn: {
width: "100%"
}
});
}));
const CountryList = withStyles(styles, {
name: "CountryList"
})(
({
classes,
const CountryList: React.FC<CountryListProps> = props => {
const {
countries,
disabled,
emptyText,
title,
onCountryAssign,
onCountryUnassign
}: CountryListProps & WithStyles<typeof styles>) => {
} = props;
const classes = useStyles(props);
const [isCollapsed, setCollapseStatus] = React.useState(true);
const toggleCollapse = () => setCollapseStatus(!isCollapsed);
@ -184,6 +177,5 @@ const CountryList = withStyles(styles, {
</CardContent>
</Card>
);
}
);
};
export default CountryList;

2
src/components/Debounce.tsx
View file

@ -1,7 +1,7 @@
import React from "react";
export interface DebounceProps<T> {
children: ((props: (...args: T[]) => void) => React.ReactNode);
children: (props: (...args: T[]) => void) => React.ReactNode;
debounceFn: (...args: T[]) => void;
time?: number;
}

4
src/components/DeleteFilterTabDialog/index.ts
View file

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

30
src/components/EditableTableCell/EditableTableCell.tsx
View file

@ -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,10 +9,9 @@ import React from "react";
import useForm from "@saleor/hooks/useForm";
const styles = theme =>
createStyles({
const useStyles = makeStyles(theme => ({
card: {
border: `1px solid ${theme.overrides.MuiCard.root.borderColor}`
border: `1px solid ${theme.palette.divider}`
},
container: {
position: "relative"
@ -43,9 +37,9 @@ const styles = theme =>
cursor: "pointer",
fontSize: "0.8125rem"
}
});
}));
interface EditableTableCellProps extends WithStyles<typeof styles> {
interface EditableTableCellProps {
className?: string;
defaultValue?: string;
focused?: boolean;
@ -54,18 +48,17 @@ interface EditableTableCellProps extends WithStyles<typeof styles> {
onConfirm(value: string): any;
}
export const EditableTableCell = withStyles(styles, {
name: "EditableTableCell"
})(
({
classes,
export const EditableTableCell: React.FC<EditableTableCellProps> = props => {
const {
className,
defaultValue,
focused,
InputProps,
value,
onConfirm
}: EditableTableCellProps) => {
} = props;
const classes = useStyles(props);
const handleConfirm = (data: { value: string }) => {
disable();
onConfirm(data.value);
@ -101,7 +94,6 @@ export const EditableTableCell = withStyles(styles, {
)}
</TableCell>
);
}
);
};
EditableTableCell.displayName = "EditableTableCell";
export default EditableTableCell;

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

@ -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,12 +7,11 @@ import { FormattedMessage } from "react-intl";
import notFoundImage from "@assets/images/what.svg";
export interface ErrorPageProps extends WithStyles<typeof styles> {
export interface ErrorPageProps {
onBack: () => void;
}
const styles = theme =>
createStyles({
const useStyles = makeStyles(theme => ({
bottomHeader: {
fontWeight: 600 as 600,
textTransform: "uppercase"
@ -59,10 +53,14 @@ const styles = theme =>
upperHeader: {
fontWeight: 600 as 600
}
});
}));
const ErrorPage = withStyles(styles, { name: "NotFoundPage" })(
({ classes, onBack }: ErrorPageProps) => (
const ErrorPage: React.FC<ErrorPageProps> = props => {
const { onBack } = props;
const classes = useStyles(props);
return (
<div className={classes.root}>
<div className={classes.container}>
<div className={classes.innerContainer}>
@ -99,7 +97,7 @@ const ErrorPage = withStyles(styles, { name: "NotFoundPage" })(
</div>
</div>
</div>
)
);
);
};
ErrorPage.displayName = "ErrorPage";
export default ErrorPage;

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

@ -1,14 +1,8 @@
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({
const useStyles = makeStyles(theme => ({
action: {
flex: "0 0 auto"
},
@ -35,21 +29,25 @@ const styles = theme =>
flex: 1,
paddingBottom: theme.spacing(2)
}
});
}));
interface ExtendedPageHeaderProps extends WithStyles<typeof styles> {
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<ExtendedPageHeaderProps> = props => {
const { children, className, title } = props;
const classes = useStyles(props);
return (
<div className={classNames(classes.root, className)}>
{title}
<div className={classes.action}>{children}</div>
</div>
)
);
);
};
ExtendedPageHeader.displayName = "ExtendedPageHeader";
export default ExtendedPageHeader;

29
src/components/ExternalLink/ExternalLink.tsx
View file

@ -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<HTMLAnchorElement>,
WithStyles<typeof styles> {
interface ExternalLinkProps extends React.HTMLProps<HTMLAnchorElement> {
href: string;
className?: string;
typographyProps?: TypographyProps;
}
const ExternalLink = withStyles(styles, { name: "ExternalLink" })(
({
classes,
className,
children,
href,
typographyProps,
...props
}: ExternalLinkProps) => (
<a href={href} className={classes.link} {...props}>
const ExternalLink: React.FC<ExternalLinkProps> = props => {
const { className, children, href, typographyProps, ...rest } = props;
const classes = useStyles(props);
return (
<a href={href} className={classes.link} {...rest}>
<Typography className={className} color="primary" {...typographyProps}>
{children}
</Typography>
</a>
)
);
);
};
ExternalLink.displayName = "ExternalLink";
export default ExternalLink;

18
src/components/FileUpload/FileUpload.tsx
View file

@ -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<typeof styles> {
interface FileUploadProps {
disabled?: boolean;
name?: string;
value?: any;
onChange?(event: React.ChangeEvent<any>);
}
const FileUpload = withStyles(styles, { name: "FileUpload" })(
({ classes, disabled, name, value, onChange }: FileUploadProps) => (
const FileUpload: React.FC<FileUploadProps> = props => {
const { disabled, name, value, onChange } = props;
const classes = useStyles(props);
return (
<div className={classes.root}>
<input
disabled={disabled}
@ -48,7 +52,7 @@ const FileUpload = withStyles(styles, { name: "FileUpload" })(
/>
</Button>
</div>
)
);
);
};
FileUpload.displayName = "FileUpload";
export default FileUpload;

27
src/components/Filter/Filter.tsx
View file

@ -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,8 +21,7 @@ export interface FilterProps<TFilterKeys = string> {
onFilterAdd: (filter: FilterContentSubmitData) => void;
}
const styles = theme =>
createStyles({
const useStyles = makeStyles(theme => ({
addFilterButton: {
"&$filterButton": {
"&:hover, &:focus": {
@ -78,15 +77,11 @@ const styles = theme =>
rotate: {
transform: "rotate(180deg)"
}
});
const Filter = withStyles(styles, { name: "Filter" })(
({
classes,
currencySymbol,
filterLabel,
menu,
onFilterAdd
}: FilterProps & WithStyles<typeof styles>) => {
}));
const Filter: React.FC<FilterProps> = props => {
const { currencySymbol, filterLabel, menu, onFilterAdd } = props;
const classes = useStyles(props);
const anchor = React.useRef<HTMLDivElement>();
const [isFilterMenuOpened, setFilterMenuOpened] = React.useState(false);
@ -99,10 +94,7 @@ const Filter = withStyles(styles, { name: "Filter" })(
onClick={() => setFilterMenuOpened(!isFilterMenuOpened)}
>
<Typography className={classes.addFilterText}>
<FormattedMessage
defaultMessage="Add Filter"
description="button"
/>
<FormattedMessage defaultMessage="Add Filter" description="button" />
</Typography>
<ArrowDropDownIcon
color="primary"
@ -143,7 +135,6 @@ const Filter = withStyles(styles, { name: "Filter" })(
</Popper>
</div>
);
}
);
};
Filter.displayName = "Filter";
export default Filter;

1
src/components/Filter/FilterActions.tsx
View file

@ -17,6 +17,7 @@ const useInputStyles = makeStyles({
const Search: React.FC<TextFieldProps> = props => {
const classes = useInputStyles({});
return (
<TextField
{...props}

4
src/components/FilterBar/index.ts
View file

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

26
src/components/FormSpacer.tsx
View file

@ -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";
const styles = theme =>
createStyles({
const useStyles = makeStyles(theme => ({
spacer: {
marginTop: theme.spacing(3)
}
});
}));
interface FormSpacerProps extends WithStyles<typeof styles> {
interface FormSpacerProps {
children?: React.ReactNode;
}
export const FormSpacer = withStyles(styles, { name: "FormSpacer" })(
({ classes, children }: FormSpacerProps) => (
<div className={classes.spacer}>{children}</div>
)
);
export const FormSpacer: React.FC<FormSpacerProps> = props => {
const { children } = props;
const classes = useStyles(props);
return <div className={classes.spacer}>{children}</div>;
};
FormSpacer.displayName = "FormSpacer";
export default FormSpacer;

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

@ -1,21 +1,15 @@
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<typeof styles> {
export interface GridProps {
children: React.ReactNodeArray | React.ReactNode;
className?: string;
variant?: GridVariant;
}
const styles = theme =>
createStyles({
const useStyles = makeStyles(theme => ({
default: {
gridTemplateColumns: "9fr 4fr"
},
@ -34,10 +28,14 @@ const styles = theme =>
uniform: {
gridTemplateColumns: "1fr 1fr"
}
});
}));
export const Grid = withStyles(styles, { name: "Grid" })(
({ className, children, classes, variant }: GridProps) => (
export const Grid: React.FC<GridProps> = props => {
const { className, children, variant } = props;
const classes = useStyles(props);
return (
<div
className={classNames(className, classes.root, {
[classes.default]: variant === "default",
@ -47,8 +45,8 @@ export const Grid = withStyles(styles, { name: "Grid" })(
>
{children}
</div>
)
);
);
};
Grid.displayName = "Grid";
Grid.defaultProps = {
variant: "default"

26
src/components/Hr.tsx
View file

@ -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({
const useStyles = makeStyles(theme => ({
root: {
backgroundColor: theme.overrides.MuiCard.root.borderColor,
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<typeof styles>) => (
<hr className={classNames(classes.root, className)} />
)
);
export const Hr: React.FC<HrProps> = props => {
const { className } = props;
const classes = useStyles(props);
return <hr className={classNames(classes.root, className)} />;
};
Hr.displayName = "Hr";
export default Hr;

30
src/components/IconButtonTableCell/IconButtonTableCell.tsx
View file

@ -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({
const useStyles = makeStyles(theme => ({
root: {
"&:last-child": {
paddingRight: 0
},
paddingRight: 0,
width: ICONBUTTON_SIZE + theme.spacing(.5)
width: ICONBUTTON_SIZE + theme.spacing(0.5)
}
});
const IconButtonTableCell = withStyles(styles, { name: "IconButtonTableCell" })(
({
}));
const IconButtonTableCell: React.FC<IconButtonTableCellProps> = props => {
const {
children,
classes,
disabled,
onClick
}: IconButtonTableCellProps & WithStyles<typeof styles>) => (
} = props;
const classes = useStyles(props);
return (
<TableCell className={classes.root}>
<IconButton
color="primary"
@ -43,7 +41,7 @@ const IconButtonTableCell = withStyles(styles, { name: "IconButtonTableCell" })(
{children}
</IconButton>
</TableCell>
)
);
);
};
IconButtonTableCell.displayName = "IconButtonTableCell";
export default IconButtonTableCell;

4
src/components/IconButtonTableCell/index.ts
View file

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

28
src/components/ImageTile/ImageTile.tsx
View file

@ -1,17 +1,11 @@
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({
const useStyles = makeStyles(theme => ({
image: {
height: "100%",
objectFit: "contain",
@ -25,7 +19,7 @@ const styles = theme =>
}
},
background: theme.palette.background.paper,
border: `1px solid ${theme.overrides.MuiCard.root.borderColor}`,
border: `1px solid ${theme.palette.divider}`,
borderRadius: theme.spacing(),
height: 148,
overflow: "hidden",
@ -47,9 +41,9 @@ const styles = theme =>
display: "flex",
justifyContent: "flex-end"
}
});
}));
interface ImageTileProps extends WithStyles<typeof styles> {
interface ImageTileProps {
image: {
alt?: string;
url: string;
@ -58,8 +52,12 @@ interface ImageTileProps extends WithStyles<typeof styles> {
onImageEdit?: (event: React.ChangeEvent<any>) => void;
}
const ImageTile = withStyles(styles, { name: "ImageTile" })(
({ classes, onImageDelete, onImageEdit, image }: ImageTileProps) => (
const ImageTile: React.FC<ImageTileProps> = props => {
const { onImageDelete, onImageEdit, image } = props;
const classes = useStyles(props);
return (
<div className={classes.imageContainer} data-tc="product-image">
<div className={classes.imageOverlay}>
<div className={classes.imageOverlayToolbar}>
@ -77,7 +75,7 @@ const ImageTile = withStyles(styles, { name: "ImageTile" })(
</div>
<img className={classes.image} src={image.url} alt={image.alt} />
</div>
)
);
);
};
ImageTile.displayName = "ImageTile";
export default ImageTile;

28
src/components/ImageUpload/ImageUpload.tsx
View file

@ -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,8 +17,7 @@ interface ImageUploadProps {
onImageUpload: (file: File) => void;
}
const styles = theme =>
createStyles({
const useStyles = makeStyles(theme => ({
containerDragActive: {
background: fade(theme.palette.primary.main, 0.1),
color: theme.palette.primary.main
@ -58,19 +52,23 @@ const styles = theme =>
fontWeight: 600,
textTransform: "uppercase"
}
});
}));
export const ImageUpload = withStyles(styles, { name: "ImageUpload" })(
({
export const ImageUpload: React.FC<ImageUploadProps> = props => {
const {
children,
classes,
className,
disableClick,
isActiveClassName,
iconContainerActiveClassName,
iconContainerClassName,
onImageUpload
}: ImageUploadProps & WithStyles<typeof styles>) => (
} = props;
const classes = useStyles(props);
return (
<Dropzone
disableClick={disableClick}
onDrop={files => onImageUpload(files[0])}
@ -107,7 +105,7 @@ export const ImageUpload = withStyles(styles, { name: "ImageUpload" })(
</>
)}
</Dropzone>
)
);
);
};
ImageUpload.displayName = "ImageUpload";
export default ImageUpload;

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

@ -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,8 +21,7 @@ export interface LanguageSwitchProps {
onLanguageChange: (lang: LanguageCodeEnum) => void;
}
const styles = theme =>
createStyles({
const useStyles = makeStyles(theme => ({
arrow: {
color: theme.palette.primary.main,
transition: theme.transitions.duration.standard + "ms"
@ -56,14 +50,11 @@ const styles = theme =>
rotate: {
transform: "rotate(180deg)"
}
});
const LanguageSwitch = withStyles(styles, { name: "LanguageSwitch" })(
({
classes,
currentLanguage,
languages,
onLanguageChange
}: LanguageSwitchProps & WithStyles<typeof styles>) => {
}));
const LanguageSwitch: React.FC<LanguageSwitchProps> = props => {
const { currentLanguage, languages, onLanguageChange } = props;
const classes = useStyles(props);
const [isExpanded, setExpandedState] = React.useState(false);
const anchor = React.useRef();
@ -128,7 +119,6 @@ const LanguageSwitch = withStyles(styles, { name: "LanguageSwitch" })(
</Popper>
</div>
);
}
);
};
LanguageSwitch.displayName = "LanguageSwitch";
export default LanguageSwitch;

4
src/components/LanguageSwitch/index.ts
View file

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

31
src/components/Link.tsx
View file

@ -1,15 +1,9 @@
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({
const useStyles = makeStyles(theme => ({
primary: {
color: theme.palette.primary.main
},
@ -23,27 +17,28 @@ const styles = theme =>
underline: {
textDecoration: "underline"
}
});
}));
interface LinkProps
extends React.AnchorHTMLAttributes<HTMLAnchorElement>,
WithStyles<typeof styles> {
interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
color?: "primary" | "secondary";
underline?: boolean;
typographyProps?: TypographyProps;
onClick: () => void;
}
const Link = withStyles(styles, { name: "Link" })(
({
classes,
const Link: React.FC<LinkProps> = props => {
const {
className,
children,
color = "primary",
underline = false,
onClick,
...linkProps
}: LinkProps) => (
} = props;
const classes = useStyles(props);
return (
<Typography
component="a"
className={classNames({
@ -59,7 +54,7 @@ const Link = withStyles(styles, { name: "Link" })(
>
{children}
</Typography>
)
);
);
};
Link.displayName = "Link";
export default Link;

3
src/components/ListField/ListField.tsx
View file

@ -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)

6
src/components/MenuToggle.tsx
View file

@ -2,15 +2,13 @@ import React from "react";
interface MenuToggleProps {
ariaOwns?: string;
children: ((
props: {
children: (props: {
actions: {
open: () => void;
close: () => void;
};
open: boolean;
}
) => React.ReactElement<any>);
}) => React.ReactElement<any>;
}
interface MenuToggleState {

6
src/components/Money/index.ts
View file

@ -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

2
src/components/MoneyRange/MoneyRange.tsx
View file

@ -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;

4
src/components/MoneyRange/index.ts
View file

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

42
src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx
View file

@ -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,8 +15,7 @@ import MultiAutocompleteSelectFieldContent, {
MultiAutocompleteChoiceType
} from "./MultiAutocompleteSelectFieldContent";
const styles = theme =>
createStyles({
const useStyles = makeStyles(theme => ({
chip: {
width: "100%"
},
@ -56,7 +50,7 @@ const styles = theme =>
flexGrow: 1,
position: "relative"
}
});
}));
export interface MultiAutocompleteSelectFieldProps
extends Partial<FetchMoreProps> {
@ -77,14 +71,15 @@ const DebounceAutocomplete: React.ComponentType<
DebounceProps<string>
> = Debounce;
export const MultiAutocompleteSelectFieldComponent = withStyles(styles, {
name: "MultiAutocompleteSelectField"
})(
({
const MultiAutocompleteSelectFieldComponent: React.FC<
MultiAutocompleteSelectFieldProps
> = props => {
const {
allowCustomValues,
choices,
classes,
displayValues,
hasMore,
helperText,
label,
@ -95,8 +90,10 @@ export const MultiAutocompleteSelectFieldComponent = withStyles(styles, {
fetchChoices,
onChange,
onFetchMore,
...props
}: MultiAutocompleteSelectFieldProps & WithStyles<typeof styles>) => {
...rest
} = props;
const classes = useStyles(props);
const handleSelect = (
item: string,
downshiftOpts?: ControllerStateAndHelpers
@ -129,12 +126,11 @@ export const MultiAutocompleteSelectFieldComponent = withStyles(styles, {
inputValue.length > 0 &&
allowCustomValues &&
!choices.find(
choice =>
choice.label.toLowerCase() === inputValue.toLowerCase()
choice => choice.label.toLowerCase() === inputValue.toLowerCase()
);
return (
<div className={classes.container} {...props}>
<div className={classes.container} {...rest}>
<TextField
InputProps={{
...getInputProps({
@ -142,7 +138,7 @@ export const MultiAutocompleteSelectFieldComponent = withStyles(styles, {
}),
endAdornment: (
<div>
<ArrowDropdownIcon onClick={toggleMenu} />
<ArrowDropdownIcon onClick={() => toggleMenu()} />
</div>
),
id: undefined,
@ -190,12 +186,13 @@ export const MultiAutocompleteSelectFieldComponent = withStyles(styles, {
</div>
</>
);
}
);
};
const MultiAutocompleteSelectField: React.FC<
MultiAutocompleteSelectFieldProps
> = ({ choices, fetchChoices, ...props }) => {
const [query, setQuery] = React.useState("");
if (fetchChoices) {
return (
<DebounceAutocomplete debounceFn={fetchChoices}>
@ -220,5 +217,6 @@ const MultiAutocompleteSelectField: React.FC<
/>
);
};
MultiAutocompleteSelectField.displayName = "MultiAutocompleteSelectField";
export default MultiAutocompleteSelectField;

28
src/components/MultiSelectField/MultiSelectField.tsx
View file

@ -4,19 +4,13 @@ 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({
const useStyles = makeStyles(theme => ({
checkbox: {
marginRight: -theme.spacing(2)
},
@ -29,9 +23,9 @@ const styles = theme =>
justifyContent: "space-between",
width: "100%"
}
});
}));
interface MultiSelectFieldProps extends WithStyles<typeof styles> {
interface MultiSelectFieldProps {
choices: Array<{
value: string;
label: string;
@ -46,11 +40,8 @@ interface MultiSelectFieldProps extends WithStyles<typeof styles> {
onChange(event: any);
}
export const MultiSelectField = withStyles(styles, {
name: "MultiSelectField"
})(
({
classes,
export const MultiSelectField: React.FC<MultiSelectFieldProps> = props => {
const {
disabled,
error,
label,
@ -60,7 +51,9 @@ export const MultiSelectField = withStyles(styles, {
name,
hint,
selectProps
}: MultiSelectFieldProps) => {
} = props;
const classes = useStyles(props);
const choicesByKey = disabled
? {}
: choices.reduce((prev, curr) => {
@ -118,8 +111,7 @@ export const MultiSelectField = withStyles(styles, {
{hint && <FormHelperText>{hint}</FormHelperText>}
</FormControl>
);
}
);
};
MultiSelectField.defaultProps = {
value: []
};

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

@ -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,8 +7,7 @@ import { FormattedMessage } from "react-intl";
import notFoundImage from "@assets/images/not-found-404.svg";
const styles = theme =>
createStyles({
const useStyles = makeStyles(theme => ({
button: {
marginTop: theme.spacing(2),
padding: 20
@ -52,14 +46,18 @@ const styles = theme =>
height: "100vh",
width: "100vw"
}
});
}));
interface NotFoundPageProps extends WithStyles<typeof styles> {
interface NotFoundPageProps {
onBack: () => void;
}
const NotFoundPage = withStyles(styles, { name: "NotFoundPage" })(
({ classes, onBack }: NotFoundPageProps) => (
const NotFoundPage: React.FC<NotFoundPageProps> = props => {
const { onBack } = props;
const classes = useStyles(props);
return (
<div className={classes.root}>
<div className={classes.container}>
<div className={classes.innerContainer}>
@ -93,7 +91,7 @@ const NotFoundPage = withStyles(styles, { name: "NotFoundPage" })(
</div>
</div>
</div>
)
);
);
};
NotFoundPage.displayName = "NotFoundPage";
export default NotFoundPage;

27
src/components/PageHeader/PageHeader.tsx
View file

@ -1,17 +1,11 @@
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({
const useStyles = makeStyles(theme => ({
root: {
display: "flex"
},
@ -20,16 +14,20 @@ const styles = theme =>
fontSize: 24,
paddingBottom: theme.spacing(2)
}
});
}));
interface PageHeaderProps extends WithStyles<typeof styles> {
interface PageHeaderProps {
children?: React.ReactNode;
className?: string;
title?: string;
}
const PageHeader = withStyles(styles)(
({ children, classes, className, title }: PageHeaderProps) => (
const PageHeader: React.FC<PageHeaderProps> = props => {
const { children, className, title } = props;
const classes = useStyles(props);
return (
<ExtendedPageHeader
className={className}
title={
@ -40,7 +38,8 @@ const PageHeader = withStyles(styles)(
>
<div className={classes.root}>{children}</div>
</ExtendedPageHeader>
)
);
);
};
PageHeader.displayName = "PageHeader";
export default PageHeader;

29
src/components/PhoneField/PhoneField.tsx
View file

@ -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({
const useStyles = makeStyles(theme => ({
root: {
display: "grid",
gridColumnGap: theme.spacing(2),
gridTemplateColumns: "5rem 1fr"
}
});
}));
interface PhoneFieldProps extends WithStyles<typeof styles> {
interface PhoneFieldProps {
name: string;
prefix: string;
number: string;
@ -27,16 +21,19 @@ interface PhoneFieldProps extends WithStyles<typeof styles> {
onChange(event: React.ChangeEvent<any>);
}
const PhoneField = withStyles(styles, { name: "PhoneField" })(
({
classes,
const PhoneField: React.FC<PhoneFieldProps> = props => {
const {
name,
number: phoneNumber,
prefix,
prefixes,
label,
onChange
}: PhoneFieldProps) => (
} = props;
const classes = useStyles(props);
return (
<div className={classes.root}>
<SingleSelectField
name={name + "_prefix"}
@ -52,7 +49,7 @@ const PhoneField = withStyles(styles, { name: "PhoneField" })(
label="&nbsp;"
/>
</div>
)
);
);
};
PhoneField.displayName = "PhoneField";
export default PhoneField;

24
src/components/PriceField/PriceField.tsx
View file

@ -1,11 +1,10 @@
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({
const useStyles = makeStyles(theme => ({
currencySymbol: {
fontSize: "0.875rem"
},
@ -24,9 +23,9 @@ const styles = theme =>
widgetContainer: {
marginTop: theme.spacing(2)
}
});
}));
interface PriceFieldProps extends WithStyles<typeof styles> {
interface PriceFieldProps {
className?: string;
currencySymbol?: string;
disabled?: boolean;
@ -39,8 +38,8 @@ interface PriceFieldProps extends WithStyles<typeof styles> {
onChange(event: any);
}
export const PriceField = withStyles(styles, { name: "PriceField" })(
({
export const PriceField: React.FC<PriceFieldProps> = 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 (
<TextField
className={className}
error={error}
@ -75,8 +77,8 @@ export const PriceField = withStyles(styles, { name: "PriceField" })(
disabled={disabled}
onChange={onChange}
/>
)
);
);
};
PriceField.defaultProps = {
name: "price"
};

18
src/components/RadioSwitchField/RadioSwitchField.tsx
View file

@ -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<any>) => void;
}
export const RadioSwitchField = withStyles(styles, {
name: "RadioSwitchField"
})(
({
export const RadioSwitchField: React.FC<RadioSwitchFieldProps> = props => {
const {
className,
classes,
disabled,
error,
firstOptionLabel,
@ -50,7 +47,9 @@ export const RadioSwitchField = withStyles(styles, {
name,
secondOptionLabel,
value
}: RadioSwitchFieldProps & WithStyles<typeof styles>) => {
} = props;
const classes = useStyles(props);
const initialValue = value ? "true" : "false";
const change = event => {
@ -91,7 +90,6 @@ export const RadioSwitchField = withStyles(styles, {
</RadioGroup>
</FormControl>
);
}
);
};
RadioSwitchField.displayName = "RadioSwitchField";
export default RadioSwitchField;

29
src/components/RichTextEditor/ImageEntity.tsx
View file

@ -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,8 +18,7 @@ interface ImageEntityProps {
onRemove: (entityKey: string) => void;
}
const styles = theme =>
createStyles({
const useStyles = makeStyles(theme => ({
anchor: {
display: "inline-block"
},
@ -42,18 +36,12 @@ const styles = theme =>
minHeight: 72,
padding: theme.spacing(1.5)
}
});
}));
const ImageEntity: React.FC<ImageEntityProps> = props => {
const { contentState, entityKey, onEdit, onRemove } = props;
const classes = useStyles(props);
const ImageEntity = withStyles(styles, {
name: "ImageEntity"
})(
({
classes,
contentState,
entityKey,
onEdit,
onRemove
}: ImageEntityProps & WithStyles<typeof styles>) => {
const [isOpened, setOpenStatus] = React.useState(false);
const anchor = React.useRef<HTMLDivElement>();
@ -109,6 +97,5 @@ const ImageEntity = withStyles(styles, {
/>
</>
);
}
);
};
export default ImageEntity;

30
src/components/RichTextEditor/LinkEntity.tsx
View file

@ -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,8 +22,7 @@ interface LinkEntityProps {
onRemove: (entityKey: string) => void;
}
const styles = theme =>
createStyles({
const useStyles = makeStyles(theme => ({
anchor: {
display: "inline-block"
},
@ -56,19 +50,12 @@ const styles = theme =>
marginRight: theme.spacing(),
width: 1
}
});
}));
const LinkEntity: React.FC<LinkEntityProps> = props => {
const { children, contentState, entityKey, onEdit, onRemove } = props;
const classes = useStyles(props);
const LinkEntity = withStyles(styles, {
name: "LinkEntity"
})(
({
classes,
children,
contentState,
entityKey,
onEdit,
onRemove
}: LinkEntityProps & WithStyles<typeof styles>) => {
const [isOpened, setOpenStatus] = React.useState(false);
const anchor = React.useRef<HTMLDivElement>();
@ -127,6 +114,5 @@ const LinkEntity = withStyles(styles, {
</Link>
</>
);
}
);
};
export default LinkEntity;

42
src/components/RichTextEditor/RichTextEditor.tsx
View file

@ -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,8 +40,7 @@ export interface RichTextEditorProps {
onChange: (event: React.ChangeEvent<any>) => void;
}
const styles = theme =>
createStyles({
const useStyles = makeStyles(theme => ({
error: {
color: theme.palette.error.main
},
@ -101,7 +95,7 @@ const styles = theme =>
"&:hover": {
borderColor: theme.palette.primary.main
},
border: `1px ${theme.overrides.MuiOutlinedInput.root.borderColor} solid`,
border: `1px ${theme.palette.divider} solid`,
borderRadius: 4,
padding: "27px 12px 10px",
position: "relative",
@ -139,7 +133,7 @@ const styles = theme =>
alignItems: "center",
background: "none",
border: "none",
borderRight: `1px ${theme.overrides.MuiCard.root.borderColor} solid`,
borderRight: `1px ${theme.palette.divider} solid`,
color: theme.typography.body1.color,
cursor: "pointer",
display: "inline-flex",
@ -160,7 +154,7 @@ const styles = theme =>
display: "flex"
},
background: theme.palette.background.default,
border: `1px ${theme.overrides.MuiCard.root.borderColor} solid`,
border: `1px ${theme.palette.divider} solid`,
display: "inline-flex",
flexWrap: "wrap",
marginBottom: theme.spacing(),
@ -171,7 +165,7 @@ const styles = theme =>
},
"&-block": {
"&--blockquote": {
borderLeft: `2px solid ${theme.overrides.MuiCard.root.borderColor}`,
borderLeft: `2px solid ${theme.palette.divider}`,
margin: 0,
padding: theme.spacing(1, 2)
}
@ -197,7 +191,7 @@ const styles = theme =>
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<typeof styles>) => (
const RichTextEditor: React.FC<RichTextEditorProps> = props => {
const { error, helperText, initial, label, name, scroll, onChange } = props;
const classes = useStyles(props);
return (
<div
className={classNames({
[classes.error]: error,
@ -302,8 +291,9 @@ const RichTextEditor = withStyles(styles, { name: "RichTextEditor" })(
</Typography>
)}
</div>
)
);
);
};
RichTextEditor.displayName = "RichTextEditor";
RichTextEditor.defaultProps = {
scroll: true

4
src/components/RichTextEditor/index.ts
View file

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

36
src/components/SaveButtonBar/SaveButtonBar.tsx
View file

@ -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,8 +14,7 @@ import ConfirmButton, {
} from "../ConfirmButton/ConfirmButton";
import Container from "../Container";
const styles = theme =>
createStyles({
const useStyles = makeStyles(theme => ({
button: {
marginRight: theme.spacing(1)
},
@ -45,7 +39,7 @@ const styles = theme =>
root: {
background: theme.palette.background.default,
borderTop: "1px solid transparent",
boxShadow: `0 -5px 5px 0 ${theme.overrides.MuiCard.root.borderColor}`,
boxShadow: `0 -5px 5px 0 ${theme.palette.divider}`,
height: "100%",
transition: `box-shadow ${theme.transitions.duration.shortest}ms`
},
@ -54,13 +48,13 @@ const styles = theme =>
},
stop: {
"&$root": {
borderTopColor: theme.overrides.MuiCard.root.borderColor,
boxShadow: `0 0 0 0 ${theme.overrides.MuiCard.root.borderColor}`
borderTopColor: theme.palette.divider,
boxShadow: `0 0 0 0 ${theme.palette.divider}`
}
}
});
}));
interface SaveButtonBarProps extends WithStyles<typeof styles> {
interface SaveButtonBarProps {
disabled: boolean;
state: ConfirmButtonTransitionState;
labels?: {
@ -73,17 +67,18 @@ interface SaveButtonBarProps extends WithStyles<typeof styles> {
onSave(event: any);
}
export const SaveButtonBar = withStyles(styles, { name: "SaveButtonBar" })(
({
classes,
export const SaveButtonBar: React.FC<SaveButtonBarProps> = props => {
const {
disabled,
labels,
state,
onCancel,
onDelete,
onSave,
...props
}: SaveButtonBarProps) => {
...rest
} = props;
const classes = useStyles(props);
const intl = useIntl();
const scrollPosition = useWindowScroll();
const scrolledToBottom =
@ -98,7 +93,7 @@ export const SaveButtonBar = withStyles(styles, { name: "SaveButtonBar" })(
className={classNames(classes.root, {
[classes.stop]: scrolledToBottom
})}
{...props}
{...rest}
>
<Container className={classes.container}>
{!!onDelete && (
@ -143,7 +138,6 @@ export const SaveButtonBar = withStyles(styles, { name: "SaveButtonBar" })(
}
</AppActionContext.Consumer>
);
}
);
};
SaveButtonBar.displayName = "SaveButtonBar";
export default SaveButtonBar;

4
src/components/SaveFilterTabDialog/index.ts
View file

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

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

@ -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,8 +11,7 @@ import { FormattedMessage, useIntl } from "react-intl";
import CardTitle from "../CardTitle";
import FormSpacer from "../FormSpacer";
const styles = theme =>
createStyles({
const useStyles = makeStyles(theme => ({
addressBar: {
color: "#006621",
fontSize: "13px",
@ -62,9 +56,9 @@ const styles = theme =>
textDecoration: "none",
wordWrap: "break-word"
}
});
}));
interface SeoFormProps extends WithStyles<typeof styles> {
interface SeoFormProps {
description?: string;
descriptionPlaceholder: string;
disabled?: boolean;
@ -76,9 +70,8 @@ interface SeoFormProps extends WithStyles<typeof styles> {
onClick?();
}
const SeoForm = withStyles(styles, { name: "SeoForm" })(
({
classes,
const SeoForm: React.FC<SeoFormProps> = props => {
const {
description,
descriptionPlaceholder,
disabled,
@ -87,7 +80,9 @@ const SeoForm = withStyles(styles, { name: "SeoForm" })(
title,
titlePlaceholder,
onChange
}: SeoFormProps) => {
} = props;
const classes = useStyles(props);
const intl = useIntl();
const [expanded, setExpansionStatus] = React.useState(false);
const toggleExpansion = () => setExpansionStatus(!expanded);
@ -187,7 +182,6 @@ const SeoForm = withStyles(styles, { name: "SeoForm" })(
</CardContent>
</Card>
);
}
);
};
SeoForm.displayName = "SeoForm";
export default SeoForm;

31
src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx
View file

@ -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<string>
> = Debounce;
const SingleAutocompleteSelectFieldComponent = withStyles(styles, {
name: "SingleAutocompleteSelectField"
})(
({
const SingleAutocompleteSelectFieldComponent: React.FC<
SingleAutocompleteSelectFieldProps
> = props => {
const {
choices,
classes,
allowCustomValues,
disabled,
displayValue,
@ -64,8 +64,10 @@ const SingleAutocompleteSelectFieldComponent = withStyles(styles, {
fetchChoices,
onChange,
onFetchMore,
...props
}: SingleAutocompleteSelectFieldProps & WithStyles<typeof styles>) => {
...rest
} = props;
const classes = useStyles(props);
const [prevDisplayValue] = useStateFromProps(displayValue);
const handleChange = item =>
@ -117,7 +119,7 @@ const SingleAutocompleteSelectFieldComponent = withStyles(styles, {
);
return (
<div className={classes.container} {...props}>
<div className={classes.container} {...rest}>
<TextField
InputProps={{
...InputProps,
@ -162,12 +164,11 @@ const SingleAutocompleteSelectFieldComponent = withStyles(styles, {
)}
</DebounceAutocomplete>
);
}
);
};
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 => (
<SingleAutocompleteSelectFieldComponent
choices={choices}
{...props}
{...rest}
fetchChoices={debounceFn}
/>
)}
@ -189,7 +190,7 @@ const SingleAutocompleteSelectField: React.FC<
choices={filter(choices, query, {
key: "label"
})}
{...props}
{...rest}
/>
);
};

21
src/components/SingleSelectField/SingleSelectField.tsx
View file

@ -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<typeof styles> {
interface SingleSelectFieldProps {
choices: Array<{
value: string;
label: string | React.ReactNode;
@ -35,12 +35,10 @@ interface SingleSelectFieldProps extends WithStyles<typeof styles> {
onChange(event: any);
}
export const SingleSelectField = withStyles(styles, {
name: "SingleSelectField"
})(
({
export const SingleSelectField: React.FC<SingleSelectFieldProps> = props => {
const {
className,
classes,
disabled,
error,
label,
@ -51,7 +49,9 @@ export const SingleSelectField = withStyles(styles, {
hint,
selectProps,
placeholder
}: SingleSelectFieldProps) => {
} = props;
const classes = useStyles(props);
const choicesByKey: { [key: string]: string } =
choices === undefined
? {}
@ -93,7 +93,6 @@ export const SingleSelectField = withStyles(styles, {
{hint && <FormHelperText>{hint}</FormHelperText>}
</FormControl>
);
}
);
};
SingleSelectField.displayName = "SingleSelectField";
export default SingleSelectField;

26
src/components/Skeleton.tsx
View file

@ -1,14 +1,8 @@
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({
const useStyles = makeStyles(theme => ({
"@keyframes skeleton-animation": {
"0%": {
opacity: 0.6
@ -30,16 +24,20 @@ const styles = theme =>
height: "0.8em",
margin: "0.2em 0"
}
});
}));
interface SkeletonProps extends WithStyles<typeof styles> {
interface SkeletonProps {
className?: string;
primary?: boolean;
style?: React.CSSProperties;
}
const Skeleton = withStyles(styles, { name: "Skeleton" })(
({ className, classes, primary, style }: SkeletonProps) => (
const Skeleton: React.FC<SkeletonProps> = props => {
const { className, primary, style } = props;
const classes = useStyles(props);
return (
<span
className={classNames(classes.skeleton, className, {
[classes.primary]: primary
@ -48,8 +46,8 @@ const Skeleton = withStyles(styles, { name: "Skeleton" })(
>
&zwnj;
</span>
)
);
);
};
Skeleton.displayName = "Skeleton";
export default Skeleton;

5
src/components/SortableTable/SortableTableBody.tsx
View file

@ -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<TableBodyProps & SortableTableBodyProps, "ref">
> = props => {
const classes = useStyles({});

36
src/components/StatusLabel/StatusLabel.tsx
View file

@ -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<typeof styles> {
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<StatusLabelProps> = props => {
const { className, label, status, typographyProps } = props;
const classes = useStyles(props);
return (
<div
className={classNames({
[classes.root]: true,
@ -77,7 +71,7 @@ const StatusLabel = withStyles(styles, { name: "StatusLabel" })(
label
)}
</div>
)
);
);
};
StatusLabel.displayName = "StatusLabel";
export default StatusLabel;

29
src/components/Tab/Tab.tsx
View file

@ -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<T> extends WithStyles<typeof styles> {
interface TabProps<T> {
children?: React.ReactNode;
isActive: boolean;
changeTab: (index: T) => void;
}
export function Tab<T>(value: T) {
return withStyles(styles, { name: "Tab" })(
({ classes, children, isActive, changeTab }: TabProps<T>) => (
const Component: React.FC<TabProps<T>> = props => {
const { children, isActive, changeTab } = props;
const classes = useStyles(props);
return (
<Typography
component="span"
className={classNames({
@ -56,8 +57,10 @@ export function Tab<T>(value: T) {
>
{children}
</Typography>
)
);
};
return Component;
}
export default Tab;

26
src/components/Tab/TabContainer.tsx
View file

@ -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({
const useStyles = makeStyles(theme => ({
root: {
borderBottom: `1px solid ${theme.overrides.MuiCard.root.borderColor}`
borderBottom: `1px solid ${theme.palette.divider}`
}
});
}));
const TabContainer = withStyles(styles, {
name: "TabContainer"
})(({ classes, children }: TabContainerProps & WithStyles<typeof styles>) => (
<div className={classes.root}>{children}</div>
));
const TabContainer: React.FC<TabContainerProps> = props => {
const { children } = props;
const classes = useStyles(props);
return <div className={classes.root}>{children}</div>;
};
TabContainer.displayName = "TabContainer";
export default TabContainer;

6
src/components/Tab/Tabs.tsx
View file

@ -1,12 +1,10 @@
import React from "react";
export interface TabsProps {
children: (
props: {
children: (props: {
changeTab: (index: number) => void;
currentTab: number;
}
) => React.ReactNode;
}) => React.ReactNode;
}
interface TabsState {

39
src/components/TableCellAvatar/TableCellAvatar.tsx
View file

@ -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,15 +9,14 @@ import Image from "../../icons/Image";
export const AVATAR_MARGIN = 56;
const styles = theme =>
createStyles({
const useStyles = makeStyles(theme => ({
avatar: {
background: "none",
border: `1px solid ${theme.overrides.MuiCard.root.borderColor}`,
border: `1px solid ${theme.palette}`,
borderRadius: 2,
color: "#bdbdbd",
display: "inline-flex",
padding: theme.spacing(.5)
padding: theme.spacing(0.5)
},
children: {
alignSelf: "center",
@ -37,25 +31,22 @@ const styles = theme =>
paddingRight: theme.spacing(3),
width: "1%"
}
});
}));
interface TableCellAvatarProps extends WithStyles<typeof styles> {
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) => (
<TableCell className={classNames(classes.root, className)} {...props}>
const TableCellAvatar: React.FC<TableCellAvatarProps> = props => {
const { children, className, thumbnail, avatarProps, ...rest } = props;
const classes = useStyles(props);
return (
<TableCell className={classNames(classes.root, className)} {...rest}>
<div className={classes.content}>
{thumbnail === undefined ? (
<Avatar className={classNames(classes.avatar, avatarProps)}>
@ -74,7 +65,7 @@ const TableCellAvatar = withStyles(styles, { name: "TableCellAvatar" })(
<div className={classes.children}>{children}</div>
</div>
</TableCell>
)
);
);
};
TableCellAvatar.displayName = "TableCellAvatar";
export default TableCellAvatar;

1
src/components/TableFilter/FilterChips.tsx
View file

@ -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";

26
src/components/TableFilter/FilterTab.tsx
View file

@ -1,15 +1,9 @@
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({
const useStyles = makeStyles(theme => ({
selectedTabLabel: {
"&$tabLabel": {
color: theme.typography.body1.color
@ -29,17 +23,21 @@ const styles = theme =>
paddingTop: theme.spacing(1),
textTransform: "initial" as "initial"
}
});
}));
interface FilterTabProps extends WithStyles<typeof styles> {
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<FilterTabProps> = props => {
const { onClick, label, selected, value } = props;
const classes = useStyles(props);
return (
<Tab
disableRipple
label={label}
@ -52,7 +50,7 @@ export const FilterTab = withStyles(styles, { name: "FilterTab" })(
onClick={onClick}
value={value}
/>
)
);
);
};
FilterTab.displayName = "FilterTab";
export default FilterTab;

Some files were not shown because too many files have changed in this diff Show more