FerryVip's Blog

import { Drawer, Modal, ModalProps, DrawerProps } from 'antd';
import { ModalForm, DrawerForm, ModalFormProps, DrawerFormProps } from '@ant-design/pro-components';
import {
  Dispatch,
  ReactNode,
  SetStateAction,
  createContext,
  useContext,
  useId,
  useMemo,
  useRef,
} from 'react';
import { LayerInstance } from './layer';

type LayerContentProps = {
  close: () => void;
};

export type LayerProps = {
  id?: string;
  content: ReactNode | ((props: LayerContentProps) => ReactNode);
  Component: ReactNode | ((props: LayerContentProps) => ReactNode);
} & Omit<ModalProps, 'open' | 'content'> &
  DrawerProps &
  ModalFormProps &
  DrawerFormProps;

interface LayerStackContextValue extends LayerProps {
  id: string;
  ins?: LayerInstance;
}

export const LayerStackContext = createContext<LayerStackContextValue[]>([]);
export const LayerActionContext = createContext<Dispatch<SetStateAction<LayerStackContextValue[]>>>(
  () => void 0,
);

export const useLayerStack: any = () => {
  const id = useId();
  const currentCount = useRef(0);
  const setLayerStack = useContext(LayerActionContext);
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  return useMemo(() => {
    return {
      openModal(props: LayerProps & { id?: string }) {
        const layerId = `${id}-Modal-${currentCount.current++}`;
        setLayerStack((p = []) => {
          const layerProps = {
            ...props,
            id: props?.id ?? layerId,
            Component: Modal,
            _layerName:'modal'
          };
          const pp = p?.concat(layerProps);
          return pp;
        });
        const hide = () => {
          setLayerStack((p = []) => {
            return p?.filter((item) => item.id !== layerId);
          });
        };
        return [layerId, hide];
      },
      openDrawer(props: LayerProps & { id?: string }) {
        const layerId = `${id}-Drawer-${currentCount.current++}`;
        setLayerStack((p = []) => {
          const layerProps = {
            ...props,
            id: props?.id ?? layerId,
            Component: Drawer,
            _layerName:'drawer'
          };
          const pp = p?.concat(layerProps);
          return pp;
        });
        const hide = () => {
          setLayerStack((p) => {
            return p?.filter((item) => item.id !== layerId);
          });
        };
        return [layerId, hide];
      },
      openFormModal(props: LayerProps & { id?: string }) {
        const layerId = `${id}-ModalForm-${currentCount.current++}`;
        setLayerStack((p = []) => {
          const layerProps = {
            ...props,
            id: props?.id ?? layerId,
            Component: ModalForm,
            _layerName:'formModal'
          };
          const pp = p?.concat(layerProps);
          return pp;
        });
        const hide = () => {
          setLayerStack((p = []) => {
            return p?.filter((item) => item.id !== layerId);
          });
        };
        return [layerId, hide];
      },
      openFormDrawer(props: LayerProps & { id?: string }) {
        const layerId = `${id}-DrawerForm-${currentCount.current++}`;
        setLayerStack((p = []) => {
          const layerProps = {
            ...props,
            id: props?.id ?? layerId,
            Component: DrawerForm,
            _layerNameName:'drawerForm'
          };
          const pp = p?.concat(layerProps);
          return pp;
        });
        const hide = () => {
          setLayerStack((p) => {
            return p?.filter((item) => item.id !== layerId);
          });
        };
        return [layerId, hide];
      },

      closeByLayerId(id: string) {
        setLayerStack((p) => {
          const m = p.find((item) => item.id === id);
          if (m?.ins) {
            m?.ins?.close?.();
            return p;
          }
          return p.filter((item) => item.id !== id);
        });
      },
      destroyAll() {
        setLayerStack((p) => {
          p.forEach((m) => {
            if (m?.ins) {
              m?.ins?.close?.();
              return p;
            }
          });
          return p;
        });
      },
    };
  }, [id, setLayerStack]);
};

import { FC, PropsWithChildren, useState } from 'react';
import { LayerActionContext, LayerStackContext } from './layer-context';
import LayerStack from './layer-stack';

export const LayerStackProvider: FC<PropsWithChildren> = ({ children }) => {
  const [layerStack, setLayerStack] = useState([] as React.ContextType<typeof LayerStackContext>);
  return (
    <LayerActionContext.Provider value={setLayerStack}>
      {children}
      <LayerStackContext.Provider value={layerStack}>
        <LayerStack />
      </LayerStackContext.Provider>
    </LayerActionContext.Provider>
  );
};

import { FC, PropsWithChildren, useContext } from 'react';
import { LayerStackContext } from './layer-context';
import Layer from './layer';

const LayerStack: FC<PropsWithChildren> = ({}) => {
  const layerStack = useContext(LayerStackContext);

  return (
    <>
      {layerStack?.map?.((item, index) => {
        return <Layer key={item?.id} item={item} index={index} />;
      })}
    </>
  );
};

export default LayerStack;

import {
  memo,
  useContext,
  useCallback,
  useRef,
  useState,
  useEffect,
  createElement,
  MouseEvent,
} from 'react';
import { LayerActionContext, LayerProps } from './layer-context';
import { ProFormInstance } from '@ant-design/pro-components';

export type LayerInstance = {
  close: () => void;
};

const Layer = memo<{
  item: LayerProps & { id: string; onOk: (e: any, close: any) => void };
  index: number;
}>(({ item, index }) => {
  const setLayerStack = useContext(LayerActionContext);

  const close = useCallback(() => {
    setTimeout(() => {
      setLayerStack((p) => {
        return p?.filter((layer) => layer?.id !== item.id);
      });
    }, 500);
  }, [item.id]);

  const { content, title, centered = true, Component, onOk, modalProps, footer, _layerName, ...rest } = item;


  const [open, setOpen] = useState(false);
  const formRef = useRef<ProFormInstance>();
  const dataRef = useRef<any>();
  const instanceRef = useRef<LayerInstance>({
    close: () => {
      setOpen(false);
    },
  });
  useEffect(() => {
    setOpen(true);

    setLayerStack((p) => {
      const newStack = [...p];
      newStack[index].ins = instanceRef.current;
      return newStack;
    });
  }, []);
  const handleClose = useCallback(() => {
    setOpen(false);
  }, []);
  const afterClose = useCallback(() => {
    item?.afterClose?.();
    close();
  }, []);
  const onCancel = useCallback((e: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => {
    item?.onCancel?.(e);
    handleClose();
  }, []);
  const afterOpenChange = useCallback((open: boolean) => {
    if (!open) {
      item?.afterClose?.();
      handleClose();
      close();
    }
  }, []);
  const handleOnOk = useCallback(() => {
    const data = dataRef.current;
    onOk?.(data, handleClose);
  }, []);

  let handleFooter = footer;
  if (typeof handleFooter === 'function') {
    // @ts-ignore
    handleFooter = handleFooter.bind(null, handleClose);
  }

  let layerSelfProps = {}
  if(_layerName === 'modal' || _layerName === 'drawer') {
    layerSelfProps ={
      centered,
      afterClose,
      afterOpenChange,
      onOk: handleOnOk,
      onCancel,
    }
  }

  return (
    <Component
      open={open}
      {...layerSelfProps}
      formRef={formRef}
      onClose={onCancel}
      onOpenChange={afterOpenChange}
      title={title}
      modalProps={{ centered, ...modalProps }}
      footer={handleFooter}
      {...rest}
    >
      {createElement(content, {
        close: handleClose,
        formRef: formRef,
        dataRef: dataRef,
      })}
    </Component>
  );
});

export default Layer;

import Layer from './layer';
import LayerStack from './layer-stack';
import { LayerStackProvider } from './layer-stack-provider';
export * from './layer-context';
export { Layer, LayerStack, LayerStackProvider };

import { Button } from 'antd';
import React from 'react';
import { useLayerStack } from '@/components/Layer';

const TestFC: React.FC = () => {

  const { openDrawer, openModal, destroyAll, openFormDrawer, openFormModal } = useLayerStack();
  const openM = () => {
    openModal({
      title: 'openModal',
      content: ({ close }) => {
        return (
          <div className="">
            <div
              className=""
              onClick={() => {
                close();
              }}
            >
              关闭
            </div>
            <div className="" onClick={() => {
                openD();
              }} >再开一个</div>
            <div
              className=""
              onClick={() => {
                destroyAll();
              }}
            >关闭所有</div>
          </div>
        );
      },
    });
  };
  const openFM = () => {
    openFormModal({
      title: 'openFormModal',
      content: ({ close, formRef }) => {
        return (
          <div className="">
            <ProFormText
              width="md"
              name="name"
              label="签约客户名称"
              tooltip="最长为 24 位"
              placeholder="请输入名称"
              rules={[{ required: true }]}
            />

            <ProFormText width="md" name="company" label="我方公司名称" placeholder="请输入名称" />
            <Button
              onClick={() => {
                console.log('清楚签约客户名称', formRef);

                formRef?.current?.setFieldsValue?.({ name: '' });
              }}
            >
              清楚签约客户名称
            </Button>
          </div>
        );
      },
      onFinish: async (values) => {
        console.log(values);
        return true;
      },
    });
  };
  const openFD = async () => {
    const [layerId, hide] = await openFormDrawer({
      title: 'openFormDrawer',
      content: ({ close, formRef }) => {
        return (
          <div className="">
            <ProFormText
              width="md"
              name="name"
              label="签约客户名称"
              tooltip="最长为 24 位"
              placeholder="请输入名称"
              rules={[{ required: true }]}
            />

            <ProFormText width="md" name="company" label="我方公司名称" placeholder="请输入名称" />
            <Button
              onClick={() => {
                console.log('清楚签约客户名称', formRef);
                formRef?.current?.setFieldsValue?.({ name: '' });
              }}
            >
              清楚签约客户名称
            </Button>
          </div>
        );
      },
      onFinish: async (values) => {
        console.log(values);
        return true;
      },
    });
  };
  const openD = () => {
    openDrawer({
      title: 'openDrawer',
      content: ({ close }) => {
        return (
          <div className="">
            <div
              className=""
              onClick={() => {
                close();
              }}
            >
              关闭
            </div>
            <div className="" onClick={() => {
                openD();
              }} >再开一个</div>
            <div
              className=""
              onClick={() => {
                destroyAll();
              }}
            >关闭所有</div>
          </div>
        );
      },
    });
  };

  return (
      <div className={styles.container}>
        <Button type="primary" key="new" size="small" onClick={openM}>打开 Modal</Button>
        <Button type="primary" key="new" size="small" onClick={openD}>打开 Drawer</Button>
        <Button type="primary" key="new" size="small" onClick={openFM}>打开 FormModal</Button>
        <Button type="primary" key="new" size="small" onClick={openFD}>打开 FormDrawer</Button>
      </div>
  );
};

export default TestFC;