Skip to content

Commit

Permalink
feat(i18n): translate texts in utils/room.ts (#695)
Browse files Browse the repository at this point in the history
  • Loading branch information
@hyrious
hyrious authored Jun 2, 2021
1 parent 0fa4943 commit d012b57
Show file tree
Hide file tree
Showing 10 changed files with 214 additions and 234 deletions.
6 changes: 3 additions & 3 deletions packages/flat-components/src/components/ClassroomPage/RoomInfo/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -22,13 +22,13 @@ export const RoomInfo: FC<RoomInfoProps> = ({ roomStatus, roomType }) => {
"is-active": roomStatus !== RoomStatus.Idle,
})}
>
{getRoomStatusName(roomStatus)}
{t(`room-status.${roomStatusToI18nKey(roomStatus)}`)}
</span>
</span>
<span>
{t("current-mode")}
<span className="room-info-mode">
{getRoomTypeName(roomType || RoomType.BigClass)}
{t(`class-room-type.${roomType || RoomType.BigClass}`)}
</span>
</span>
</div>
Expand Down
4 changes: 3 additions & 1 deletion packages/flat-components/src/components/EditRoomPage/EditRoomBody/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -53,6 +54,7 @@ export const EditRoomBody: React.FC<EditRoomBodyProps> = ({

const [isFormVetted, setIsFormVetted] = useState(true);
const [isShowEditSubmitConfirm, showEditSubmitConfirm] = useState(false);
const { t, i18n } = useTranslation();

const hasInputAutoSelectedRef = useRef(false);

Expand Down Expand Up @@ -141,7 +143,7 @@ export const EditRoomBody: React.FC<EditRoomBodyProps> = ({
prev.isPeriodic !== curr.isPeriodic
}
>
{renderPeriodicForm}
{renderPeriodicForm(t, i18n.language)}
</Form.Item>
</Form>
<div className="edit-room-under">
Expand Down
322 changes: 151 additions & 171 deletions packages/flat-components/src/components/EditRoomPage/EditRoomBody/renderPeriodicForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<EditRoomFormValues>,
): React.ReactElement | null {
const isPeriodic: EditRoomFormValues["isPeriodic"] = form.getFieldValue("isPeriodic");
if (!isPeriodic) {
return null;
}

return (
<>
<Form.Item
shouldUpdate={(prev: EditRoomFormValues, curr: EditRoomFormValues) =>
prev.periodic !== curr.periodic || prev.type !== curr.type
}
>
{renderPeriodicRoomTips}
</Form.Item>
<Form.Item
label="重复频率"
name={["periodic", "weeks"]}
getValueFromEvent={onWeekSelected}
>
<WeekRateSelector onChange={onWeekRateChanged} />
</Form.Item>
<Form.Item label="结束重复">
<Row gutter={16}>
<Col span={12}>
<Form.Item name={["periodic", "endType"]}>
<PeriodicEndTypeSelector />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
noStyle
shouldUpdate={(prev: EditRoomFormValues, curr: EditRoomFormValues) =>
prev.periodic.endType !== curr.periodic.endType
}
>
{renderPeriodicEndAmount}
</Form.Item>
</Col>
</Row>
</Form.Item>
</>
);
export const renderPeriodicForm = (t: TFunction<string>, lang: string) =>
function renderPeriodicForm(form: FormInstance<EditRoomFormValues>) {
const isPeriodic: EditRoomFormValues["isPeriodic"] = form.getFieldValue("isPeriodic");
if (!isPeriodic) {
return null;
}

function renderPeriodicRoomTips(): React.ReactElement {
const {
periodic,
type: roomType,
}: Pick<EditRoomFormValues, "periodic" | "type"> = form.getFieldsValue([
"periodic",
"type",
]);
return (
<div className="edit-room-tips">
{periodic.weeks.length > 0 ? (
<div className="edit-room-tips-title">每{getWeekNames(periodic.weeks)}</div>
) : (
<div>暂未选择频率</div>
)}
<div className="edit-room-tips-type">房间类型：{getRoomTypeName(roomType)}</div>
<div className="edit-room-tips-inner">
结束于 {formatISODayWeekiii(periodic.endTime)}
，共 {periodic.rate} 个房间
</div>
</div>
<>
<Form.Item
shouldUpdate={(prev: EditRoomFormValues, curr: EditRoomFormValues) =>
prev.periodic !== curr.periodic || prev.type !== curr.type
}
>
{renderPeriodicRoomTips}
</Form.Item>
<Form.Item
label="重复频率"
name={["periodic", "weeks"]}
getValueFromEvent={onWeekSelected}
>
<WeekRateSelector onChange={onWeekRateChanged} />
</Form.Item>
<Form.Item label="结束重复">
<Row gutter={16}>
<Col span={12}>
<Form.Item name={["periodic", "endType"]}>
<PeriodicEndTypeSelector />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
noStyle
shouldUpdate={(
prev: EditRoomFormValues,
curr: EditRoomFormValues,
) => prev.periodic.endType !== curr.periodic.endType}
>
{renderPeriodicEndAmount}
</Form.Item>
</Col>
</Row>
</Form.Item>
</>
);
}

function renderPeriodicEndAmount(): React.ReactElement {
return form.getFieldValue(["periodic", "endType"]) === "rate" ? (
<Form.Item
name={["periodic", "rate"]}
rules={[
{
type: "integer",
min: 1,
message: "不能少于 1 个房间",
},
{
type: "integer",
max: 50,
message: "最多允许预定 50 个房间",
},
]}
>
<InputNumber min={1} max={50} precision={0} onChange={onPeriodicRateChanged} />
</Form.Item>
) : (
<Form.Item
name={["periodic", "endTime"]}
getValueFromEvent={(date: Date | null) => date && endOfDay(date)}
rules={[validatePeriodicEndTime]}
>
<DatePicker
format="YYYY-MM-DD"
allowClear={false}
disabledDate={disablePeriodicEndTime}
onChange={onPeriodicEndTimeChanged}
/>
</Form.Item>
);
}
function renderPeriodicRoomTips(): React.ReactElement {
const { periodic, type: roomType }: Pick<EditRoomFormValues, "periodic" | "type"> =
form.getFieldsValue(["periodic", "type"]);
return (
<div className="edit-room-tips">
{periodic.weeks.length > 0 ? (
<div className="edit-room-tips-title">
每{getWeekNames(periodic.weeks, lang)}
</div>
) : (
<div>暂未选择频率</div>
)}
<div className="edit-room-tips-type">
房间类型：{t(`class-room-type.${roomType}`)}
</div>
<div className="edit-room-tips-inner">
结束于 {formatISODayWeekiii(periodic.endTime, lang)}
，共 {periodic.rate} 个房间
</div>
</div>
);
}

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" ? (
<Form.Item
name={["periodic", "rate"]}
rules={[
{
type: "integer",
min: 1,
message: "不能少于 1 个房间",
},
{
type: "integer",
max: 50,
message: "最多允许预定 50 个房间",
},
]}
>
<InputNumber min={1} max={50} precision={0} onChange={onPeriodicRateChanged} />
</Form.Item>
) : (
<Form.Item
name={["periodic", "endTime"]}
getValueFromEvent={(date: Date | null) => date && endOfDay(date)}
rules={[validatePeriodicEndTime]}
>
<DatePicker
format="YYYY-MM-DD"
allowClear={false}
disabledDate={disablePeriodicEndTime}
onChange={onPeriodicEndTimeChanged}
/>
</Form.Item>
);
}
return w.sort();
}

function onWeekRateChanged(weeks: Week[]): void {
const {
beginTime,
periodic,
}: Pick<EditRoomFormValues, "beginTime" | "periodic"> = 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<EditRoomFormValues, "beginTime" | "periodic"> = form.getFieldsValue([
"beginTime",
"periodic",
]);
syncPeriodicEndAmount(form, beginTime, { ...periodic, rate });
function onWeekRateChanged(weeks: Week[]): void {
const { beginTime, periodic }: Pick<EditRoomFormValues, "beginTime" | "periodic"> =
form.getFieldsValue(["beginTime", "periodic"]);
syncPeriodicEndAmount(form, beginTime, { ...periodic, weeks });
}
}

function onPeriodicEndTimeChanged(date: Date | null): void {
if (date) {
const {
beginTime,
periodic,
}: Pick<EditRoomFormValues, "beginTime" | "periodic"> = 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<EditRoomFormValues, "beginTime" | "periodic"> =
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<EditRoomFormValues, "beginTime" | "periodic"> =
form.getFieldsValue(["beginTime", "periodic"]);
syncPeriodicEndAmount(form, beginTime, { ...periodic, endTime: date });
}
}
return false;
}

function validatePeriodicEndTime(): RuleObject {
return {
validator: async (_, value: Date) => {
const {
periodic,
beginTime,
}: Pick<EditRoomFormValues, "periodic" | "beginTime"> = 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<EditRoomFormValues, "periodic" | "beginTime"> = 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(`结束重复日期不能小于开始时间日期`);
}
},
};
}
};
Loading

0 comments on commit d012b57

Please sign in to comment.