Я разрабатываю следующую Modal в истории Storybook:
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { Modal } from '@repo/ui/Modal';
import Title from '@repo/ui/Title';
import Field from '@repo/ui/Field';
import { DialogHeader } from '@repo/ui/radix/dialog';
type ItemModalProps = {
avatarUrl: string;
maxWidth?: 'sm' | 'md' | 'lg';
isOpen: boolean;
hasFullImage?: boolean;
onCloseModal?: () => void;
};
const ItemModal: React.FC<ItemModalProps> = ({
avatarUrl,
maxWidth = 'sm',
isOpen,
hasFullImage,
onCloseModal = () => {},
}) => (
<Modal
isOpen = {isOpen}
onCloseModal = {onCloseModal}
hasFullImage = {hasFullImage}
maxWidth = {maxWidth}
>
<DialogHeader className = "relative h-60">
<img src = {avatarUrl} className = "absolute h-full w-full object-cover" />
</DialogHeader>
<div className = "flex flex-col items-center space-y-4 p-6">
<Title>Test</Title>
<div className = "grid grid-cols-2 gap-x-10 gap-y-2">
<Field label = "Name" text = "Name" />
</div>
</div>
</Modal>
);
const meta: Meta<typeof ItemModal> = {
title: 'Example/Modal',
component: ItemModal,
};
export default meta;
type Story = StoryObj<typeof ItemModal>;
export const DefaultModal: Story = {
args: {
avatarUrl: 'https://placehold.co/100',
isOpen: true,
hasFullImage: true,
onCloseModal: () => {},
},
};
Как изменить код, чтобы onCloseModal превратился в isOpen?
🤔 А знаете ли вы, что...
С React можно использовать JSX (JavaScript XML) для описания компонентов.
вы можете использовать функцию рендеринга в своей истории, чтобы закрыть модальное окно. так:
export const DefaultModal: Story = {
args: {
avatarUrl: 'https://placehold.co/100',
isOpen: true,
hasFullImage: true,
},
render: (args) => {
const [{ value }, updateArgs] = useArgs();
const onCloseModal = () => {
updateArgs({isOpen: false});
}
return <ItemModals {...args} />
}
};