theme/packages/theme-preview/src/pages/model/index.tsx

import { calc } from 'antd/es/theme/internal';
import { DialogModal, Modal, modalStore } from '@kevisual/ui';
import { useEffect, useRef } from 'react';
import '@kevisual/ui/src/index.css';
import { createDOMElement } from './create-dom';
// import '@kevisual/ui/src/components/modal/index.css';
export const App = () => {
  const showModel = () => {
    //
  };
  return (
    <div className='flex flex-col w-full h-full bg-gray-400'>
      <div className='p-2 bg-white rounded-md border-b rounded-s rounded-e'>Model</div>
      <div
        className='mt-2 mx-4 bg-white p-2 rounded-md border shadow-sm flex flex-wrap gap-2'
        style={{
          height: 'calc(100vh - 100px)',
          overflow: 'auto',
        }}>
        <ModelOne />
        <ModelTwo />
        <ModelTwo2 />
        <ModelThree />
      </div>
    </div>
  );
};

const ModelOne = () => {
  const ref = useRef<HTMLDivElement>(null);
  const showModel = () => {
    const model = Modal.render(ref.current!, {});
  };
  return (
    <div>
      <div className='w-96 p-4 rounded-md shadow-md bg-slate-200'>
        model one
        <div className='cursor-pointer p-2 border' onClick={showModel}>
          show
        </div>
        <div ref={ref}> 当前元素是Model的渲染内容</div>
      </div>
    </div>
  );
};

const ModelTwo = () => {
  const ref = useRef<HTMLDivElement>(null);
  const showModel = () => {
    const model = DialogModal.render(ref.current!, {
      dialogTitle: 'Dialog Modal',
      width: '400px',
      dialogTitleCloseIcon: true,
      contentStyle: {
        // maxHeight: '100px',
        // overflow: 'auto',
      },
    });
  };
  return (
    <div>
      <div className='w-96 p-4 rounded-md shadow-md bg-slate-200'>
        model two
        <div className='cursor-pointer p-2 border' onClick={showModel}>
          show
        </div>
        <div ref={ref}>
          当前元素是Modal Dialog 的渲染内容
          <div>内容</div>
          <div>内容2</div>
          <div>内容3</div>
          <div>内容4</div>
        </div>
      </div>
    </div>
  );
};
const ModelTwo2 = () => {
  const ref = useRef<HTMLDivElement>(null);
  const showModel = () => {
    const div = createDOMElement(refHide);
    const model = DialogModal.render(ref.current! || div, {
      dialogTitle: 'Dialog Modal',
      width: '400px',
      dialogTitleCloseIcon: true,
      contentStyle: {
        // maxHeight: '100px',
        // overflow: 'auto',
      },
    });
  };
  const refHide = (
    <div ref={ref}>
      当前元素是Modal Dialog 的渲染内容
      <div>内容</div>
      <div>内容2</div>
      <div>内容3</div>
      <div>内容4</div>
    </div>
  );
  return (
    <div>
      <div className='w-96 p-4 rounded-md shadow-md bg-slate-200'>
        model two -假入ref的模块没有真实渲染到节点，如何处理。createDOMElement
        <div className='cursor-pointer p-2 border' onClick={showModel}>
          show
        </div>
        <div className='hidden'>{refHide}</div>
      </div>
    </div>
  );
};

const ModelThree = () => {
  const ref = useRef<HTMLDivElement>(null);
  let dialog = useRef<DialogModal | null>(null);
  const showModel = () => {
    const model = DialogModal.render(ref.current!, {
      dialogTitle: 'Dialog Modal',
      width: '400px',
      dialogTitleCloseIcon: true,
      open: false,
      contentStyle: {
        // maxHeight: '100px',
        // overflow: 'auto',
      },
    });
    const modals = modalStore.getState().modals;
    console.log('modals', modals.length, model);
    dialog.current = model;
  };
  return (
    <div>
      <div className='w-96 p-4 rounded-md shadow-md bg-slate-200'>
        model 3
        <div className='cursor-pointer p-2 border' onClick={showModel}>
          show
        </div>
        <div ref={ref}>
          当前元素是Modal Dialog 的渲染内容
          <div>内容</div>
          <div>内容2</div>
          <div>内容3</div>
          <div>内容4</div>
        </div>
        <div
          onClick={() => {
            if (dialog.current) {
              dialog.current.setOpen(true);
            }
            console.log('open', dialog.current);
          }}>
          真打开
        </div>
      </div>
    </div>
  );
};

const Model4 = () => {
  const ref = useRef<HTMLDivElement>(null);
  let dialog = useRef<DialogModal | null>(null);
  const showModel = () => {
    const model = DialogModal.create({
      dialogTitle: 'Dialog Modal',
      width: '400px',
      dialogTitleCloseIcon: true,
      open: false,
      contentStyle: {
        // maxHeight: '100px',
        // overflow: 'auto',
      },
    });
    const modals = modalStore.getState().modals;
    console.log('modals', modals.length, model);
    dialog.current = model;
  };
  return (
    <div>
      <div className='w-96 p-4 rounded-md shadow-md bg-slate-200'>
        model 4
        <div className='cursor-pointer p-2 border' onClick={showModel}>
          show
        </div>
        <div ref={ref}>
          当前元素是Modal Dialog 的渲染内容
          <div>内容</div>
          <div>内容2</div>
          <div>内容3</div>
          <div>内容4</div>
        </div>
        <div
          onClick={() => {
            if (dialog.current) {
              dialog.current.setOpen(true);
            }
            console.log('open', dialog.current);
          }}>
          真打开
        </div>
      </div>
    </div>
  );
};