PESDK/Web/Customization/Components

Dialogs

PhotoEditor SDK for Web can be customized easily. Learn how to quickly set up your editor in the proper language for your target audience.

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:

TypeScript


{
  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#

JavaScript


import React from 'react';

import { CustomDialogProps, Dialog } from 'photoeditorsdk';

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#

JavaScript


import React from 'react';

import { CustomDialogProps, Dialog } from 'photoeditorsdk';

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#

JavaScript


import React from 'react';

import {
  CustomDialogProps,
  ModalType,
  Dialog,
  DialogSpinner,
  DialogHeader,
  DialogBody,
  DialogFooter,
  TextSecondaryButton,
  TextPrimaryButton,
} from 'photoeditorsdk';
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} style="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#

JavaScript


custom: {
  components: {
    dialog: Dialog,
  }
}