ci4sManagement-cloud/react-ui/src/stories/CodeSelectorModal.stories.tsx

import CodeSelectorModal from '@/components/CodeSelectorModal';
import { openAntdModal } from '@/utils/modal';
import { useArgs } from '@storybook/preview-api';
import type { Meta, StoryObj } from '@storybook/react';
import { fn } from '@storybook/test';
import { Button } from 'antd';
import { http, HttpResponse } from 'msw';
import { codeListData } from './mockData';

// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = {
  title: 'Components/CodeSelectorModal',
  component: CodeSelectorModal,
  parameters: {
    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
    layout: 'centered',
    msw: {
      handlers: [
        http.get('/api/mmp/codeConfig', () => {
          return HttpResponse.json(codeListData);
        }),
      ],
    },
  },
  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
  tags: ['autodocs'],
  // More on argTypes: https://storybook.js.org/docs/api/argtypes
  argTypes: {
    // backgroundColor: { control: 'color' },
    open: {
      description: '对话框是否可见',
    },
  },
  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
  args: { onCancel: fn(), onOk: fn() },
} satisfies Meta<typeof CodeSelectorModal>;

export default meta;
type Story = StoryObj<typeof meta>;

// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
export const Primary: Story = {
  args: {
    open: false,
  },
  render: function Render({ onOk, onCancel, ...args }) {
    const [{ open }, updateArgs] = useArgs();
    function onClick() {
      updateArgs({ open: true });
    }
    function handleOk(res: any) {
      updateArgs({ open: false });
      onOk?.(res);
    }

    function handleCancel() {
      updateArgs({ open: false });
      onCancel?.();
    }

    return (
      <>
        <Button type="primary" onClick={onClick}>
          选择代码配置
        </Button>
        <CodeSelectorModal {...args} open={open} onOk={handleOk} onCancel={handleCancel} />
      </>
    );
  },
};

/** 通过 `openAntdModal` 函数打开 */
export const OpenByFunction: Story = {
  render: function Render(args) {
    const handleClick = () => {
      const { close } = openAntdModal(CodeSelectorModal, {
        onOk: (res) => {
          const { onOk } = args;
          onOk?.(res);
          close();
        },
      });
    };
    return (
      <Button type="primary" onClick={handleClick}>
        以函数的方式打开
      </Button>
    );
  },
};