From cc0ccde188125bbd2400b660ac1cd92206c49d09 Mon Sep 17 00:00:00 2001 From: Cheerego7 <48879533+Cheerego7@users.noreply.github.com> Date: Thu, 13 May 2021 16:09:28 +0800 Subject: [PATCH] feat(flat-component): add PeriodicRoomPanel component to storybook (#633) --- .../PeriodicRoomPanel.stories.tsx | 43 +++++ .../components/PeriodicRoomPage/index.less | 72 ++++++++ .../src/components/PeriodicRoomPage/index.tsx | 161 ++++++++++++++++++ 3 files changed, 276 insertions(+) create mode 100644 packages/flat-components/src/components/PeriodicRoomPage/PeriodicRoomPanel.stories.tsx create mode 100644 packages/flat-components/src/components/PeriodicRoomPage/index.less create mode 100644 packages/flat-components/src/components/PeriodicRoomPage/index.tsx diff --git a/packages/flat-components/src/components/PeriodicRoomPage/PeriodicRoomPanel.stories.tsx b/packages/flat-components/src/components/PeriodicRoomPage/PeriodicRoomPanel.stories.tsx new file mode 100644 index 00000000000..ec768f40975 --- /dev/null +++ b/packages/flat-components/src/components/PeriodicRoomPage/PeriodicRoomPanel.stories.tsx @@ -0,0 +1,43 @@ +import React from "react"; +import { Meta, Story } from "@storybook/react"; +import { PeriodicRoomPanel, PeriodicRoomPanelProps } from "."; +import { RoomStatus, RoomType, Week } from "../../types/room"; +import faker from "faker"; +import Chance from "chance"; + +const chance = new Chance(); + +const storyMeta: Meta = { + title: "PeriodicRoomPage/PeriodicRoomPanel", + component: PeriodicRoomPanel, +}; + +export default storyMeta; + +const randomRoomCount = chance.integer({ min: 1, max: 50 }); + +export const Overview: Story = args => ( +
+ +
+); +Overview.args = { + rooms: Array(randomRoomCount) + .fill(0) + .map(() => { + return { + ownerUUID: faker.random.uuid(), + roomUUID: faker.random.uuid(), + beginTime: faker.date.past().valueOf(), + endTime: faker.date.future().valueOf(), + roomStatus: RoomStatus.Idle, + }; + }), + isCreator: true, + periodicInfo: { + weeks: [Week.Friday, Week.Sunday, Week.Wednesday], + roomType: chance.pickone([RoomType.BigClass, RoomType.OneToOne, RoomType.SmallClass]), + endTime: faker.date.future(), + roomCount: randomRoomCount, + }, +}; diff --git a/packages/flat-components/src/components/PeriodicRoomPage/index.less b/packages/flat-components/src/components/PeriodicRoomPage/index.less new file mode 100644 index 00000000000..f7ba39604a4 --- /dev/null +++ b/packages/flat-components/src/components/PeriodicRoomPage/index.less @@ -0,0 +1,72 @@ +.periodic-room-panel-container { + width: 100%; + height: 100%; + padding-top: 65px; + overflow-y: auto; +} + +.periodic-room-panel-body { + max-width: 840px; + min-width: 540px; + margin: 0 auto; + padding-top: 24px; +} + +.periodic-room-panel-btn-list { + display: flex; + flex-direction: row-reverse; + + .ant-btn { + width: 128px; + height: 32px; + margin-right: 8px; + } +} + +.periodic-room-panel-title { + font-size: 16px; + font-weight: 500; + color: #444e60; + line-height: 1; + margin: 0; +} + +.periodic-room-panel-tips { + background-color: #f3f6f9; + border-radius: 8px; + padding: 12px; + margin-bottom: 24px; +} + +.periodic-room-panel-tips-title { + color: #3381ff; +} + +.periodic-room-panel-tips-type { + color: #7a7b7c; + margin-top: 8px; + margin-bottom: 8px; +} + +.periodic-room-panel-tips-inner { + color: #7a7b7c; +} + +.periodic-room-panel-table-line { + width: 100%; + margin-top: 16px; + border-bottom: solid 1px #dbe1ea; +} + +.ant-table-tbody > tr > td { + color: #7a7b7c; + border-bottom: 1px solid transparent; +} + +.periodic-room-panel-month-value { + color: #444e60; + font-size: 16px; + line-height: 24px; + font-weight: 500; + margin-top: 16px; +} diff --git a/packages/flat-components/src/components/PeriodicRoomPage/index.tsx b/packages/flat-components/src/components/PeriodicRoomPage/index.tsx new file mode 100644 index 00000000000..6affa0d108f --- /dev/null +++ b/packages/flat-components/src/components/PeriodicRoomPage/index.tsx @@ -0,0 +1,161 @@ +import "./index.less"; + +import React, { useState } from "react"; +import { Button, Table } from "antd"; +import { getDay } from "date-fns"; +import { format, formatWithOptions } from "date-fns/fp"; +import { zhCN } from "date-fns/locale"; +import { RoomInfo, RoomStatus, RoomType, Week } from "../../types/room"; +import { getRoomTypeName, getWeekName, getWeekNames } from "../../utils/room"; +import { RoomStatusElement } from "../RoomStatusElement"; +import { RemoveRoomModal } from "../RemoveRoomModal"; + +export interface PeriodicRoomPanelProps { + rooms: RoomInfo[]; + isCreator: boolean; + periodicInfo: { + weeks: Week[]; + roomType: RoomType; + endTime: Date; + roomCount: number; + }; + jumpToPeriodicModifyPage: () => void; + onCancelRoom: () => void; +} + +export const PeriodicRoomPanel: React.FC = ({ + rooms, + periodicInfo, + isCreator, + jumpToPeriodicModifyPage, + onCancelRoom, +}) => { + const [cancelModalVisible, showCancelModal] = useState(false); + + const yearMonthFormat = formatWithOptions({ locale: zhCN }, "yyyy/MM"); + const dayFormat = formatWithOptions({ locale: zhCN }, "dd"); + const timeSuffixFormat = format("HH:mm"); + const dayWeekFormat = formatWithOptions({ locale: zhCN }, "yyyy/MM/dd iii"); + + const hasRunning = rooms.some(room => + [RoomStatus.Started, RoomStatus.Paused].includes(room?.roomStatus as RoomStatus), + ); + + const defaultDate = new Date(); + + const renderPeriodicRoomTable = (): React.ReactNode => { + const polymerizationRooms = (() => { + const result: Record = {}; + + rooms.forEach(room => { + if (room?.beginTime) { + const key = result[yearMonthFormat(room.beginTime)]; + + if (key) { + key.push(room); + } else { + result[yearMonthFormat(room.beginTime)] = [room]; + } + } + }); + + return result; + })(); + + const groupedList = Object.keys(polymerizationRooms) + .sort() + .map(key => ( +
+
{key}
+
+ + + dayFormat(room.beginTime || defaultDate) + "日" + } + /> + + getWeekName(getDay(room.beginTime || defaultDate)) + } + /> + { + return ( + timeSuffixFormat(room.beginTime || defaultDate) + + "~" + + timeSuffixFormat(room.endTime || defaultDate) + ); + }} + /> + { + return ; + }} + /> + {/* + // TODO: MoreMenu component + { + return null; + }} + /> */} +
+
+ )); + return
{groupedList}
; + }; + + return ( +
+
+
+
+ 每{getWeekNames(periodicInfo.weeks)} +
+
+ 房间类型：{getRoomTypeName(periodicInfo.roomType)} +
+
+ 结束于 {dayWeekFormat(periodicInfo.endTime)} ，共 {periodicInfo.roomCount}{" "} + 个房间 +
+
+
+ {isCreator ? ( + <> + + + + ) : ( + + )} +
+ {renderPeriodicRoomTable()} +
+ showCancelModal(false)} + onCancelRoom={onCancelRoom} + isPeriodicDetailsPage={true} + /> +
+ ); +};