Dialogs
The Dialog component allows the customisation of all InfoModals
, WarningModals
, ErrorModals
and the TextEditModal
. For example this can be used to modify the Loader with the Spinner, the Modal with the text input field for the Text
and Text Design
tool or the unsaved changes Dialog right before the editor is closed. Available in both AdvancedUI
and BasicUI
.
Exported Dialog components
The following components are available in the photoeditorsdk
package and can be customised to fit your needs.
DialogBase
: This is a container around the child componentsDialogBackdrop
: This component will create an opacity layer above the editor uiDialogContainer
: This component defines the dimensions and color of the dialogDialogHeader
: The header should contain the title of the dialogDialogBody
: This component contains the main content of the dialogDialogFooter
: The component contains the buttons to confirm or dismiss a dialogDialogSpinner
: This spinner component can be used to display a loading state
Examples
The React component will receive the following props:
{
isVisible?: boolean
identifier: ModalIdentifier
type: ModalType
height?: string
width?: string
position: { x: number; y: number }
confirmLabel?: string
dismissLabel?: string
headerLabel?: string
bodyLabel?: string
isConfirmDisabled?: boolean
isDismissDisabled?: boolean
handleClose: () => void
handleConfirm?: (e?: React.MouseEvent<HTMLButtonElement>) => void
handleDismiss?: (e?: React.MouseEvent<HTMLButtonElement>) => void
className?: string
style?: React.CSSProperties
header?: React.ReactNode
body?: React.ReactNode
footer?: React.ReactNode
children?: React.ReactNode
}
Place the Dialogs in the center of the Editor
import { CustomDialogProps, Dialog } from "photoeditorsdk";
import React from "react";
const CustomDialog = ({ position, children, ...props }: CustomDialogProps) => {
const centerPosition = { x: 0, y: 0 };
return (
<Dialog {...props} position={centerPosition}>
{children}
</Dialog>
);
};
const editor = await PhotoEditorSDKUI.init({
custom: {
components: {
dialog: CustomDialog,
},
},
});
Modify the loading dialogs with spinner
import { CustomDialogProps, Dialog } from "photoeditorsdk";
import React from "react";
const Container = styled(DialogBody)`
display: flex;
flex-direction: row;
align-items: center;
`;
const Message = styled.div`
display: flex;
flex-direction: column;
margin-left: 8px;
@media all and (min-width: 640px) {
margin-left: 30px;
}
`;
const Loader: React.FC<CustomDialogProps> = ({
headerLabel,
bodyLabel,
body,
children,
...props
}) => {
return (
<Dialog
{...props}
height="initial"
header={<DialogHeader>{headerLabel}</DialogHeader>}
>
<Container>
<DialogSpinner />
<Message>{bodyLabel}</Message>
</Container>
</Dialog>
);
};
export const CustomDialog: React.FC<CustomDialogProps> = ({
type,
...props
}) => {
if (type === ModalType.INFO) {
return <Loader {...props} type={type} />;
}
return <Dialog {...props} type={type} />;
};
const editor = await PhotoEditorSDKUI.init({
custom: {
components: {
dialog: CustomDialog,
},
},
});
Build your own Dialogs
import {
CustomDialogProps,
ModalType,
Dialog,
DialogSpinner,
DialogHeader,
DialogBody,
DialogFooter,
TextSecondaryButton,
TextPrimaryButton,
} from "photoeditorsdk";
import React from "react";
import styled from "styled-components";
const Container = styled(DialogBody)`
display: flex;
flex-direction: row;
align-items: center;
`;
const Message = styled.div`
display: flex;
flex-direction: column;
margin-left: 8px;
@media all and (min-width: 640px) {
margin-left: 30px;
}
`;
const Footer = styled(DialogFooter)`
border-top: none;
`;
const ErrorDialog = styled(Dialog)`
border-radius: 16px;
background-color: red;
`;
const Loader: React.FC<CustomDialogProps> = ({
headerLabel,
bodyLabel,
body,
children,
...props
}) => {
return (
<Dialog
{...props}
height="initial"
header={<DialogHeader>{headerLabel}</DialogHeader>}
>
<Container>
<DialogSpinner />
<Message>{bodyLabel}</Message>
</Container>
</Dialog>
);
};
const EditText: React.FC<CustomDialogProps> = ({
type,
headerLabel,
dismissLabel,
handleDismiss,
isConfirmDisabled,
confirmLabel,
handleConfirm,
header,
body,
footer,
children,
...props
}) => {
return (
<Dialog {...props} type={type} height="300px">
<DialogHeader>{headerLabel}</DialogHeader>
{body}
<Footer type={type}>
{handleDismiss && (
<TextSecondaryButton
label={dismissLabel}
ariaLabel={dismissLabel}
onClick={handleDismiss}
/>
)}
{handleConfirm && (
<TextPrimaryButton
label={confirmLabel}
ariaLabel={confirmLabel}
isDisabled={isConfirmDisabled}
onClick={handleConfirm}
/>
)}
</Footer>
</Dialog>
);
};
const Error: React.FC<CustomDialogProps> = ({ children, ...props }) => (
<ErrorDialog {...props}>{children}</ErrorDialog>
);
export const CustomDialog: React.FC<CustomDialogProps> = ({
type,
...props
}) => {
if (type === ModalType.INFO) {
return <Loader {...props} type={type} />;
}
if (type === ModalType.TEXT_EDIT) {
return <EditText {...props} type={type} />;
}
if (type === ModalType.ERROR) {
return <Error {...props} type={type} />;
}
return <Dialog {...props} type={type} />;
};
const editor = await PhotoEditorSDKUI.init({
custom: {
components: {
dialog: CustomDialog,
},
},
});
Default configuration
custom: {
components: {
dialog: Dialog,
}
}