From d012b57d481c89abdc8694ede965bd75728ac4ca Mon Sep 17 00:00:00 2001 From: hyrious Date: Wed, 2 Jun 2021 18:52:02 +0800 Subject: [PATCH] feat(i18n): translate texts in utils/room.ts (#695) --- .../ClassroomPage/RoomInfo/index.tsx | 6 +- .../EditRoomPage/EditRoomBody/index.tsx | 4 +- .../EditRoomBody/renderPeriodicForm.tsx | 322 ++++++++---------- .../PeriodicEndTypeSelector/index.tsx | 5 +- .../src/components/InviteModal/index.tsx | 4 +- .../src/components/PeriodicRoomPage/index.tsx | 9 +- .../RoomDetailPage/RoomDetailBody/index.tsx | 17 +- packages/flat-components/src/utils/room.ts | 71 ++-- packages/flat-i18n/locales/en.json | 5 + packages/flat-i18n/locales/zh-CN.json | 5 + 10 files changed, 214 insertions(+), 234 deletions(-) diff --git a/packages/flat-components/src/components/ClassroomPage/RoomInfo/index.tsx b/packages/flat-components/src/components/ClassroomPage/RoomInfo/index.tsx index 6463e15c1f9..aaa5606a17f 100644 --- a/packages/flat-components/src/components/ClassroomPage/RoomInfo/index.tsx +++ b/packages/flat-components/src/components/ClassroomPage/RoomInfo/index.tsx @@ -4,7 +4,7 @@ import classNames from "classnames"; import React, { FC } from "react"; import { useTranslation } from "react-i18next"; import { RoomStatus, RoomType } from "../../../types/room"; -import { getRoomStatusName, getRoomTypeName } from "../../../utils/room"; +import { roomStatusToI18nKey } from "../../../utils/room"; export interface RoomInfoProps { roomStatus: RoomStatus; @@ -22,13 +22,13 @@ export const RoomInfo: FC = ({ roomStatus, roomType }) => { "is-active": roomStatus !== RoomStatus.Idle, })} > - {getRoomStatusName(roomStatus)} + {t(`room-status.${roomStatusToI18nKey(roomStatus)}`)} {t("current-mode")} - {getRoomTypeName(roomType || RoomType.BigClass)} + {t(`class-room-type.${roomType || RoomType.BigClass}`)} diff --git a/packages/flat-components/src/components/EditRoomPage/EditRoomBody/index.tsx b/packages/flat-components/src/components/EditRoomPage/EditRoomBody/index.tsx index aef63092d33..df8bbbbfd9b 100644 --- a/packages/flat-components/src/components/EditRoomPage/EditRoomBody/index.tsx +++ b/packages/flat-components/src/components/EditRoomPage/EditRoomBody/index.tsx @@ -5,6 +5,7 @@ import { CheckboxChangeEvent } from "antd/lib/checkbox"; import { addWeeks, endOfDay, getDay } from "date-fns"; import React, { useMemo, useRef, useState } from "react"; import { useHistory } from "react-router-dom"; +import { useTranslation } from "react-i18next"; import { PeriodicEndType, RoomType, Week } from "../../../types/room"; import { renderBeginTimePicker } from "./renderBeginTimePicker"; import { renderEndTimePicker } from "./renderEndTimePicker"; @@ -53,6 +54,7 @@ export const EditRoomBody: React.FC = ({ const [isFormVetted, setIsFormVetted] = useState(true); const [isShowEditSubmitConfirm, showEditSubmitConfirm] = useState(false); + const { t, i18n } = useTranslation(); const hasInputAutoSelectedRef = useRef(false); @@ -141,7 +143,7 @@ export const EditRoomBody: React.FC = ({ prev.isPeriodic !== curr.isPeriodic } > - {renderPeriodicForm} + {renderPeriodicForm(t, i18n.language)}
diff --git a/packages/flat-components/src/components/EditRoomPage/EditRoomBody/renderPeriodicForm.tsx b/packages/flat-components/src/components/EditRoomPage/EditRoomBody/renderPeriodicForm.tsx index b847a5787ec..f6a41acd425 100644 --- a/packages/flat-components/src/components/EditRoomPage/EditRoomBody/renderPeriodicForm.tsx +++ b/packages/flat-components/src/components/EditRoomPage/EditRoomBody/renderPeriodicForm.tsx @@ -2,196 +2,176 @@ import { Col, Form, InputNumber, Row } from "antd"; import { FormInstance, RuleObject } from "antd/lib/form"; import { endOfDay, getDay, isBefore, startOfDay } from "date-fns"; import React from "react"; +import { TFunction } from "react-i18next"; import { EditRoomFormValues } from "."; import { Week } from "../../../types/room"; -import { - formatISODayWeekiii, - getRoomTypeName, - getWeekNames, - syncPeriodicEndAmount, -} from "../../../utils/room"; +import { formatISODayWeekiii, getWeekNames, syncPeriodicEndAmount } from "../../../utils/room"; import { DatePicker } from "../FullTimePicker"; import { PeriodicEndTypeSelector } from "../PeriodicEndTypeSelector"; import { WeekRateSelector } from "../WeekRateSelector"; -export function renderPeriodicForm( - form: FormInstance, -): React.ReactElement | null { - const isPeriodic: EditRoomFormValues["isPeriodic"] = form.getFieldValue("isPeriodic"); - if (!isPeriodic) { - return null; - } - - return ( - <> - - prev.periodic !== curr.periodic || prev.type !== curr.type - } - > - {renderPeriodicRoomTips} - - - - - - - - - - - - - - prev.periodic.endType !== curr.periodic.endType - } - > - {renderPeriodicEndAmount} - - - - - - ); +export const renderPeriodicForm = (t: TFunction, lang: string) => + function renderPeriodicForm(form: FormInstance) { + const isPeriodic: EditRoomFormValues["isPeriodic"] = form.getFieldValue("isPeriodic"); + if (!isPeriodic) { + return null; + } - function renderPeriodicRoomTips(): React.ReactElement { - const { - periodic, - type: roomType, - }: Pick = form.getFieldsValue([ - "periodic", - "type", - ]); return ( -
- {periodic.weeks.length > 0 ? ( -
每{getWeekNames(periodic.weeks)}
- ) : ( -
暂未选择频率
- )} -
房间类型：{getRoomTypeName(roomType)}
-
- 结束于 {formatISODayWeekiii(periodic.endTime)} - ，共 {periodic.rate} 个房间 -
-
+ <> + + prev.periodic !== curr.periodic || prev.type !== curr.type + } + > + {renderPeriodicRoomTips} + + + + + + + + + + + + + prev.periodic.endType !== curr.periodic.endType} + > + {renderPeriodicEndAmount} + + + + + ); - } - function renderPeriodicEndAmount(): React.ReactElement { - return form.getFieldValue(["periodic", "endType"]) === "rate" ? ( - - - - ) : ( - date && endOfDay(date)} - rules={[validatePeriodicEndTime]} - > - - - ); - } + function renderPeriodicRoomTips(): React.ReactElement { + const { periodic, type: roomType }: Pick = + form.getFieldsValue(["periodic", "type"]); + return ( +
+ {periodic.weeks.length > 0 ? ( +
+ 每{getWeekNames(periodic.weeks, lang)} +
+ ) : ( +
暂未选择频率
+ )} +
+ 房间类型：{t(`class-room-type.${roomType}`)} +
+
+ 结束于 {formatISODayWeekiii(periodic.endTime, lang)} + ，共 {periodic.rate} 个房间 +
+
+ ); + } - function onWeekSelected(w: Week[]): Week[] { - const week = getDay(form.getFieldValue("beginTime")); - if (!w.includes(week)) { - w.push(week); + function renderPeriodicEndAmount(): React.ReactElement { + return form.getFieldValue(["periodic", "endType"]) === "rate" ? ( + + + + ) : ( + date && endOfDay(date)} + rules={[validatePeriodicEndTime]} + > + + + ); } - return w.sort(); - } - function onWeekRateChanged(weeks: Week[]): void { - const { - beginTime, - periodic, - }: Pick = form.getFieldsValue([ - "beginTime", - "periodic", - ]); - syncPeriodicEndAmount(form, beginTime, { ...periodic, weeks }); - } + function onWeekSelected(w: Week[]): Week[] { + const week = getDay(form.getFieldValue("beginTime")); + if (!w.includes(week)) { + w.push(week); + } + return w.sort(); + } - function onPeriodicRateChanged(value: string | number | undefined): void { - const rate = Number(value); - if (!Number.isNaN(rate)) { - const { - beginTime, - periodic, - }: Pick = form.getFieldsValue([ - "beginTime", - "periodic", - ]); - syncPeriodicEndAmount(form, beginTime, { ...periodic, rate }); + function onWeekRateChanged(weeks: Week[]): void { + const { beginTime, periodic }: Pick = + form.getFieldsValue(["beginTime", "periodic"]); + syncPeriodicEndAmount(form, beginTime, { ...periodic, weeks }); } - } - function onPeriodicEndTimeChanged(date: Date | null): void { - if (date) { - const { - beginTime, - periodic, - }: Pick = form.getFieldsValue([ - "beginTime", - "periodic", - ]); - syncPeriodicEndAmount(form, beginTime, { ...periodic, endTime: date }); + function onPeriodicRateChanged(value: string | number | undefined): void { + const rate = Number(value); + if (!Number.isNaN(rate)) { + const { beginTime, periodic }: Pick = + form.getFieldsValue(["beginTime", "periodic"]); + syncPeriodicEndAmount(form, beginTime, { ...periodic, rate }); + } } - } - function disablePeriodicEndTime(currentTime: Date | null): boolean { - if (currentTime) { - const beginTime: EditRoomFormValues["beginTime"] = form.getFieldValue("beginTime"); - return isBefore(currentTime, startOfDay(beginTime)); + function onPeriodicEndTimeChanged(date: Date | null): void { + if (date) { + const { beginTime, periodic }: Pick = + form.getFieldsValue(["beginTime", "periodic"]); + syncPeriodicEndAmount(form, beginTime, { ...periodic, endTime: date }); + } } - return false; - } - function validatePeriodicEndTime(): RuleObject { - return { - validator: async (_, value: Date) => { - const { - periodic, - beginTime, - }: Pick = form.getFieldsValue([ - "periodic", - "beginTime", - ]); + function disablePeriodicEndTime(currentTime: Date | null): boolean { + if (currentTime) { + const beginTime: EditRoomFormValues["beginTime"] = form.getFieldValue("beginTime"); + return isBefore(currentTime, startOfDay(beginTime)); + } + return false; + } - if (periodic.rate > 50) { - throw new Error("最多允许预定 50 个房间"); - } + function validatePeriodicEndTime(): RuleObject { + return { + validator: async (_, value: Date) => { + const { + periodic, + beginTime, + }: Pick = form.getFieldsValue([ + "periodic", + "beginTime", + ]); - if (isBefore(value, beginTime)) { - throw new Error(`结束重复日期不能小于开始时间日期`); - } - }, - }; - } -} + if (periodic.rate > 50) { + throw new Error("最多允许预定 50 个房间"); + } + + if (isBefore(value, beginTime)) { + throw new Error(`结束重复日期不能小于开始时间日期`); + } + }, + }; + } + }; diff --git a/packages/flat-components/src/components/EditRoomPage/PeriodicEndTypeSelector/index.tsx b/packages/flat-components/src/components/EditRoomPage/PeriodicEndTypeSelector/index.tsx index fe311f96a79..d585005942a 100644 --- a/packages/flat-components/src/components/EditRoomPage/PeriodicEndTypeSelector/index.tsx +++ b/packages/flat-components/src/components/EditRoomPage/PeriodicEndTypeSelector/index.tsx @@ -1,16 +1,17 @@ import { Select } from "antd"; import { SelectProps } from "antd/lib/select"; import React, { FC } from "react"; +import { useTranslation } from "react-i18next"; import { PeriodicEndType } from "../../../types/room"; -import { getPeriodicEndTypeName } from "../../../utils/room"; export type PeriodicEndTypeSelectorProps = SelectProps; export const PeriodicEndTypeSelector: FC = props => { + const { t } = useTranslation(); return (