BasicModal.tsx

import type { ModalProps, ModalMethods } from './types';

import Modal from './Modal';
import { Button } from 'ant-design-vue';
import ModalWrapper from './ModalWrapper';
import { BasicTitle } from '/@/components/Basic';
import { defineComponent, computed, ref, watch, unref, watchEffect } from 'vue';

import { FullscreenExitOutlined, FullscreenOutlined, CloseOutlined } from '@ant-design/icons-vue';

import { basicProps } from './props';

import { getSlot, extendSlots } from '/@/utils/helper/tsxHelper';
import { isFunction } from '/@/utils/is';
import { deepMerge } from '/@/utils';
import { buildUUID } from '/@/utils/uuid';

// import { triggerWindowResize } from '@/utils/event/triggerWindowResizeEvent';
export default defineComponent({
  name: 'BasicModal',
  props: basicProps,
  emits: ['visible-change', 'height-change', 'cancel', 'ok', 'register'],
  setup(props, { slots, emit, attrs }) {
    const visibleRef = ref(false);

    const propsRef = ref<Partial<ModalProps> | null>(null);

    const modalWrapperRef = ref<any>(null);

    // modal   Bottom and top height
    const extHeightRef = ref(0);

    // Unexpanded height of the popup
    const formerHeightRef = ref(0);

    const fullScreenRef = ref(false);
    // Custom title component: get title
    const getMergeProps = computed(() => {
      return {
        ...props,
        ...(unref(propsRef) as any),
      };
    });
    // modal component does not need title
    const getProps = computed((): any => {
      const opt = {
        ...props,
        ...((unref(propsRef) || {}) as any),
        visible: unref(visibleRef),
        title: undefined,
      };
      const { wrapClassName = '' } = opt;
      const className = unref(fullScreenRef) ? `${wrapClassName} fullscreen-modal` : wrapClassName;
      return {
        ...opt,
        wrapClassName: className,
      };
    });
    watchEffect(() => {
      visibleRef.value = !!props.visible;
    });
    watch(
      () => unref(visibleRef),
      (v) => {
        emit('visible-change', v);
      },
      {
        immediate: false,
      }
    );
    /**
     * @description: 渲染标题
     */
    function renderTitle() {
      const { helpMessage } = unref(getProps);
      const { title } = unref(getMergeProps);
      return (
        <BasicTitle helpMessage={helpMessage}>
          {() => (slots.title ? getSlot(slots, 'title') : title)}
        </BasicTitle>
      );
    }

    function renderContent() {
      const { useWrapper, loading, wrapperProps } = unref(getProps);
      return useWrapper ? (
        <ModalWrapper
          footerOffset={props.wrapperFooterOffset}
          fullScreen={unref(fullScreenRef)}
          ref={modalWrapperRef}
          loading={loading}
          visible={unref(visibleRef)}
          {...wrapperProps}
          onGetExtHeight={(height: number) => {
            extHeightRef.value = height;
          }}
          onHeightChange={(height: string) => {
            emit('height-change', height);
          }}
        >
          {() => getSlot(slots)}
        </ModalWrapper>
      ) : (
        getSlot(slots)
      );
    }
    // 取消事件
    async function handleCancel(e: Event) {
      e.stopPropagation();
      if (props.closeFunc && isFunction(props.closeFunc)) {
        const isClose: boolean = await props.closeFunc();
        visibleRef.value = !isClose;
        return;
      }
      visibleRef.value = false;
      emit('cancel');
    }
    // 底部按钮自定义实现,
    function renderFooter() {
      const {
        showCancelBtn,
        cancelButtonProps,
        cancelText,
        showOkBtn,
        okType,
        okText,
        okButtonProps,
        confirmLoading,
      } = unref(getProps);

      return (
        <>
          {getSlot(slots, 'insertFooter')}

          {showCancelBtn && (
            <Button {...cancelButtonProps} onClick={handleCancel}>
              {() => cancelText}
            </Button>
          )}
          {getSlot(slots, 'centerdFooter')}
          {showOkBtn && (
            <Button
              type={okType as any}
              loading={confirmLoading}
              onClick={() => {
                emit('ok');
              }}
              {...okButtonProps}
            >
              {() => okText}
            </Button>
          )}

          {getSlot(slots, 'appendFooter')}
        </>
      );
    }
    /**
     * @description: 关闭按钮
     */
    function renderClose() {
      const { canFullscreen } = unref(getProps);
      if (!canFullscreen) {
        return null;
      }
      return (
        <div class="custom-close-icon">
          {unref(fullScreenRef) ? (
            <FullscreenExitOutlined role="full" onClick={handleFullScreen} />
          ) : (
            <FullscreenOutlined role="close" onClick={handleFullScreen} />
          )}
          <CloseOutlined onClick={handleCancel} />
        </div>
      );
    }

    function handleFullScreen(e: Event) {
      e.stopPropagation();
      fullScreenRef.value = !unref(fullScreenRef);

      const modalWrapper = unref(modalWrapperRef);
      if (modalWrapper) {
        const modalWrapSpinEl = (modalWrapper.$el as HTMLElement).querySelector(
          '.ant-spin-nested-loading'
        );
        if (modalWrapSpinEl) {
          if (!unref(formerHeightRef) && unref(fullScreenRef)) {
            formerHeightRef.value = (modalWrapSpinEl as HTMLElement).offsetHeight;
            console.log(formerHeightRef);
          }
          if (unref(fullScreenRef)) {
            (modalWrapSpinEl as HTMLElement).style.height = `${
              window.innerHeight - unref(extHeightRef)
            }px`;
          } else {
            (modalWrapSpinEl as HTMLElement).style.height = `${unref(formerHeightRef)}px`;
          }
        }
      }
    }
    /**
     * @description: 设置modal参数
     */
    function setModalProps(props: Partial<ModalProps>): void {
      // Keep the last setModalProps
      propsRef.value = deepMerge(unref(propsRef) || {}, props);
      if (Reflect.has(props, 'visible')) {
        visibleRef.value = !!props.visible;
      }
    }

    const modalMethods: ModalMethods = {
      setModalProps,
    };
    const uuid = buildUUID();
    emit('register', modalMethods, uuid);
    return () => (
      <Modal onCancel={handleCancel} {...{ ...attrs, ...props, ...unref(getProps) }}>
        {{
          ...extendSlots(slots, ['default']),
          default: () => renderContent(),
          closeIcon: () => renderClose(),
          footer: () => renderFooter(),
          title: () => renderTitle(),
        }}
      </Modal>
    );
  },
});