Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(i18n): translate texts in utils/room.ts #695

Merged
merged 1 commit into from
Jun 2, 2021
Merged

feat(i18n): translate texts in utils/room.ts #695

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions packages/flat-components/src/components/ClassroomPage/RoomInfo/index.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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