gnezim/flights_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace PrimeReact Accordion on Расписание рейса with matching custom header

Browse Source 
Angular keeps the 'Расписание рейса' collapse chevron on the right of the
header and styles the header like the Детали рейса row above it. React
was rendering the PrimeReact chevron on the LEFT with its own pill style.
Swap to the same lightweight accordion markup the details block uses so
both collapses look identical.
This commit is contained in:
Anton
2026-04-18 21:32:42 +03:00
parent e014db17d0
commit b5759215b1
2 changed files with 91 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/online-board/components/FlightSchedule/FlightSchedule.scss
+26 -2
View File
@@ -3,8 +3,32 @@
border-radius: 8px;
padding: 0 24px;
.p-accordion-content {
padding: 12px 0 16px;
&__accordion {
border-top: 1px solid #e0e6f0;
}
&__header {
padding: 16px 0;
cursor: pointer;
font-weight: 500;
font-size: 18px;
color: #222;
display: flex;
justify-content: space-between;
align-items: center;
&:hover {
color: #2457ff;
}
}
&__chevron {
font-size: 12px;
color: #222;
}
&__content {
padding: 4px 0 16px;
}
&__body {
src/features/online-board/components/FlightSchedule/FlightSchedule.tsx
+65 -46
View File
@@ -1,5 +1,4 @@
import type { FC } from "react";
import { Accordion, AccordionTab } from "primereact/accordion";
import { type FC, useState } from "react";
import { useTranslation } from "@/i18n/provider.js";
import type { ISimpleFlight } from "../../types.js";
import { DaysOfWeekStrip } from "./DaysOfWeekStrip.js";
@@ -32,6 +31,7 @@ function scheduledDurationMinutes(depIso: string, arrIso: string): number {
export const FlightSchedule: FC<FlightScheduleProps> = ({ flight }) => {
const { t } = useTranslation();
const [collapsed, setCollapsed] = useState(false);
const firstLeg = flight.routeType === "Direct" ? flight.leg : flight.legs[0];
const lastLeg =
@@ -49,55 +49,74 @@ export const FlightSchedule: FC<FlightScheduleProps> = ({ flight }) => {
return (
<section className="flight-schedule" data-testid="flight-schedule">
<Accordion multiple={false} activeIndex={0}>
<AccordionTab header={t("SHARED.SCHEDULE-FLIGHT")}>
{/* Angular parity: three side-by-side columns
(Вылет по расписанию | Прилет по расписанию | Время в пути). */}
<div className="flight-schedule__body">
<div className="flight-schedule__col">
<div className="flight-schedule__label">{t("SHARED.DEPARTURE-SCHEDULED")}</div>
<div className="flight-schedule__value">
{formatLocalTime(depLocal)}
{formatUtcOffset(depLocal) && (
<span className="flight-schedule__offset">
{formatUtcOffset(depLocal)}
</span>
)}
<div className={`flight-schedule__accordion${collapsed ? "" : " flight-schedule__accordion--open"}`}>
<div
className="flight-schedule__header"
role="button"
tabIndex={0}
onClick={() => setCollapsed((v) => !v)}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
setCollapsed((v) => !v);
}
}}
>
<span>{t("SHARED.SCHEDULE-FLIGHT")}</span>
<span aria-hidden="true" className="flight-schedule__chevron">
{collapsed ? "\u25BC" : "\u25B2"}
</span>
</div>
{!collapsed && (
<div className="flight-schedule__content">
{/* Angular parity: three side-by-side columns
(Вылет по расписанию | Прилет по расписанию | Время в пути). */}
<div className="flight-schedule__body">
<div className="flight-schedule__col">
<div className="flight-schedule__label">{t("SHARED.DEPARTURE-SCHEDULED")}</div>
<div className="flight-schedule__value">
{formatLocalTime(depLocal)}
{formatUtcOffset(depLocal) && (
<span className="flight-schedule__offset">
{formatUtcOffset(depLocal)}
</span>
)}
</div>
</div>
<div className="flight-schedule__col">
<div className="flight-schedule__label">{t("SHARED.ARRIVAL-SCHEDULED")}</div>
<div className="flight-schedule__value">
{formatLocalTime(arrLocal)}
{formatUtcOffset(arrLocal) && (
<span className="flight-schedule__offset">
{formatUtcOffset(arrLocal)}
</span>
)}
</div>
</div>
<div className="flight-schedule__col">
<div className="flight-schedule__label">{t("SHARED.PATH-TIME")}</div>
<div className="flight-schedule__value">
{formatDuration(
scheduledDurationMinutes(depLocal, arrLocal),
"ru",
)}
</div>
</div>
</div>
<div className="flight-schedule__col">
<div className="flight-schedule__label">{t("SHARED.ARRIVAL-SCHEDULED")}</div>
<div className="flight-schedule__value">
{formatLocalTime(arrLocal)}
{formatUtcOffset(arrLocal) && (
<span className="flight-schedule__offset">
{formatUtcOffset(arrLocal)}
</span>
)}
</div>
</div>
<div className="flight-schedule__col">
<div className="flight-schedule__label">{t("SHARED.PATH-TIME")}</div>
<div className="flight-schedule__value">
{formatDuration(
scheduledDurationMinutes(depLocal, arrLocal),
"ru",
)}
</div>
</div>
</div>
<div className="flight-schedule__days-section">
<div className="flight-schedule__section-title">
{t("SHARED.DAYS-EXECUTE-FLIGHT")}
</div>
<DaysOfWeekStrip flightBitString={firstLeg.daysOfWeek.flight} />
<div className="flight-schedule__note" data-testid="flight-schedule-note">
{note}
<div className="flight-schedule__days-section">
<div className="flight-schedule__section-title">
{t("SHARED.DAYS-EXECUTE-FLIGHT")}
</div>
<DaysOfWeekStrip flightBitString={firstLeg.daysOfWeek.flight} />
<div className="flight-schedule__note" data-testid="flight-schedule-note">
{note}
</div>
</div>
</div>
</AccordionTab>
</Accordion>
)}
</div>
</section>
);
};