oranguru/src/Former/FormerWrappers.tsx

import {
  Drawer,
  type DrawerProps,
  Modal,
  type ModalProps,
  Popover,
  type PopoverProps,
} from '@mantine/core';

import type { FormerProps } from './Former.types';

import { Former } from './Former';

export const FormerDialog = (props: { former: FormerProps } & DrawerProps) => {
  const { children, former, onClose, opened, ...rest } = props;
  return (
    <Former
      {...former}
      onClose={onClose}
      opened={opened}
      wrapper={(children, opened, onClose, _onOpen, getState) => {
        const values = getState('values');
        const request = getState('request');
        const uniqueKeyField = getState('uniqueKeyField') ?? 'id';
        return (
          <Drawer
            closeOnClickOutside={false}
            h={'100%'}
            title={
              request === 'delete'
                ? `Delete Record - ${values?.[uniqueKeyField]}`
                : request === 'insert'
                  ? 'New Record'
                  : `Edit Record - ${values?.[uniqueKeyField]}`
            }
            {...rest}
            onClose={() => onClose?.()}
            opened={opened ?? false}
          >
            {children}
          </Drawer>
        );
      }}
    >
      {children}
    </Former>
  );
};

export const FormerModel = (props: { former: FormerProps } & ModalProps) => {
  const { children, former, onClose, opened, ...rest } = props;
  return (
    <Former
      {...former}
      onClose={onClose}
      opened={opened}
      wrapper={(children, opened, onClose, _onOpen, getState) => {
        const values = getState('values');
        const request = getState('request');
        const uniqueKeyField = getState('uniqueKeyField') ?? 'id';
        return (
          <Modal
            closeOnClickOutside={false}
            h={'100%'}
            title={
              request === 'delete'
                ? `Delete Record - ${values?.[uniqueKeyField]}`
                : request === 'insert'
                  ? 'New Record'
                  : `Edit Record - ${values?.[uniqueKeyField]}`
            }
            {...rest}
            onClose={() => onClose?.()}
            opened={opened ?? false}
          >
            {children}
          </Modal>
        );
      }}
    >
      {children}
    </Former>
  );
};

export const FormerPopover = (
  props: { former: FormerProps; target: React.ReactNode } & PopoverProps
) => {
  const { children, former, onClose, opened, target, ...rest } = props;
  return (
    <Former
      {...former}
      onClose={onClose}
      opened={opened}
      wrapper={(children, opened, onClose) => {
        return (
          <Popover
            closeOnClickOutside={false}
            middlewares={{ inline: true }}
            trapFocus
            width={250}
            withArrow
            {...rest}
            onClose={() => onClose?.()}
            opened={opened ?? false}
          >
            <Popover.Target>{target}</Popover.Target>
            <Popover.Dropdown>{children}</Popover.Dropdown>
          </Popover>
        );
      }}
    >
      {children}
    </Former>
  );
};