Looking for
or
?
We've rebranded!
v5.8
v5.7
v5.6
v5.10
v5
v4
v3.6
API Docs

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 components
  • DialogBackdrop: This component will create an opacity layer above the editor ui
  • DialogContainer: This component defines the dimensions and color of the dialog
  • DialogHeader: The header should contain the title of the dialog
  • DialogBody: This component contains the main content of the dialog
  • DialogFooter: The component contains the buttons to confirm or dismiss a dialog
  • DialogSpinner: 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,
  }
}