update
This commit is contained in:
@@ -1,19 +1,25 @@
|
|||||||
// Calendar.stories.tsx
|
import { Meta, StoryObj } from '@storybook/react';
|
||||||
import React from 'react';
|
import CalendarGrid from 'src/views/components/common/CalendarGrid/CalendarGrid';
|
||||||
import Calendar from '@views/components/common/CalendarGrid/CalendarGrid';
|
|
||||||
import type { Meta, StoryObj } from '@storybook/react';
|
|
||||||
|
|
||||||
const meta = {
|
const meta = {
|
||||||
title: 'Components/Common/Calendar',
|
title: 'Components/Common/CalendarGrid',
|
||||||
component: Calendar,
|
component: CalendarGrid,
|
||||||
parameters: {
|
parameters: {
|
||||||
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
|
layout: 'centered',
|
||||||
layout: 'centered',
|
},
|
||||||
tags: ['autodocs'],
|
tags: ['autodocs'],
|
||||||
}
|
argTypes: {
|
||||||
} satisfies Meta<typeof Calendar>;
|
saturday: { control: 'text' },
|
||||||
|
sunday: { control: 'text' },
|
||||||
|
},
|
||||||
|
} satisfies Meta<typeof CalendarGrid>;
|
||||||
export default meta;
|
export default meta;
|
||||||
|
|
||||||
type Story = StoryObj<typeof meta>;
|
type Story = StoryObj<typeof meta>;
|
||||||
|
|
||||||
export const Default: Story = {};
|
export const Default: Story = {
|
||||||
|
args: {
|
||||||
|
saturday: true,
|
||||||
|
sunday: true,
|
||||||
|
},
|
||||||
|
};
|
||||||
@@ -5,7 +5,6 @@ import CalendarCell from '../CalendarGridCell/CalendarGridCell';
|
|||||||
import CalendarCourseCell from '../CalendarCourseCell/CalendarCourseCell';
|
import CalendarCourseCell from '../CalendarCourseCell/CalendarCourseCell';
|
||||||
import { Chip } from '../Chip/Chip';
|
import { Chip } from '../Chip/Chip';
|
||||||
|
|
||||||
|
|
||||||
const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['S', 'SU'].includes(key));
|
const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['S', 'SU'].includes(key));
|
||||||
const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
|
const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
|
||||||
const grid = [];
|
const grid = [];
|
||||||
@@ -24,15 +23,15 @@ for (let i = 0; i < 13; i++) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
courseCells: typeof CalendarCourseCell[];
|
courseCells: any[];
|
||||||
|
saturdayClass: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Grid of CalendarGridCell components forming the user's course schedule calendar view
|
* Grid of CalendarGridCell components forming the user's course schedule calendar view
|
||||||
* @param props
|
* @param props
|
||||||
*/
|
*/
|
||||||
export function Calendar({ courseCells }: React.PropsWithChildren<Props>): JSX.Element {
|
function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Props> ): JSX.Element {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.calendar}>
|
<div className={styles.calendar}>
|
||||||
<div className={styles.dayLabelContainer} />
|
<div className={styles.dayLabelContainer} />
|
||||||
@@ -56,20 +55,22 @@ export function Calendar({ courseCells }: React.PropsWithChildren<Props>): JSX.E
|
|||||||
{day}
|
{day}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
{grid.map((row) => row)}
|
{grid.map(row => row)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{courseCells.map((Block: typeof CalendarCourseCell) => (
|
{/* courseCells.map((Block: typeof CalendarCourseCell) => (
|
||||||
<div key={`${Block}`}
|
<div
|
||||||
style ={{
|
key={`${Block}`}
|
||||||
gridColumn: `1`,
|
style={{
|
||||||
gridRow: `1`
|
gridColumn: `1`,
|
||||||
}}>
|
gridRow: `1`,
|
||||||
<Chip label='test'/>
|
}}
|
||||||
|
>
|
||||||
|
<Chip label='test' />
|
||||||
</div>
|
</div>
|
||||||
))}
|
)) */}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
}
|
||||||
|
|
||||||
export default Calendar;
|
export default CalendarGrid;
|
||||||
|
|||||||
Reference in New Issue
Block a user