§4.1.24.1/.2: filter label hidden on mobile; date locked until departure set
- Hide `.flights-map-filter-header` on mobile via `@include screen.mobile` so the "Найдите свой маршрут" label is absent on phone (R7). - Disable the PrimeReact Calendar and DayQuickPick when `Город вылета` is empty; date picker must not be selectable without a departure city (R16). - Add `disabled?` prop to DayQuickPick so callers can block the quick-day buttons on mobile (R16 mobile quick-day parity).
This commit is contained in:
@@ -289,10 +289,14 @@ export const FlightsMapFilter: FC<FlightsMapFilterProps> = ({
|
||||
|
||||
<div className="flights-map-filter__field">
|
||||
<label htmlFor="fm-date">{t("SHARED.FLIGHT_DATE")}</label>
|
||||
{/* TZ §4.1.24.2 Table 69 R16: calendar days must not be selectable
|
||||
until Город вылета is filled. Pass `disabled` to both the quick-
|
||||
pick shortcuts and the full calendar picker. */}
|
||||
<DayQuickPick
|
||||
value={value.date ? yyyymmddToDate(value.date) : null}
|
||||
locale={language}
|
||||
onChange={handleDateChange}
|
||||
disabled={!value.departure}
|
||||
/>
|
||||
<Calendar
|
||||
value={value.date ? yyyymmddToDate(value.date) : null}
|
||||
@@ -303,6 +307,7 @@ export const FlightsMapFilter: FC<FlightsMapFilterProps> = ({
|
||||
dateFormat="dd.mm.yy"
|
||||
placeholder={t("SHARED.DATE_FORMAT")}
|
||||
showIcon
|
||||
disabled={!value.departure}
|
||||
className="input--filter"
|
||||
inputId="fm-date"
|
||||
data-testid="fm-date-input"
|
||||
|
||||
@@ -177,6 +177,12 @@
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// TZ §4.1.24.2 R7: mobile version must not show the filter label
|
||||
// "Найдите свой маршрут". Desktop/tablet retain it.
|
||||
@include screen.mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__field {
|
||||
|
||||
@@ -10,6 +10,11 @@ export interface DayQuickPickProps {
|
||||
count?: number;
|
||||
/** Called with the chosen Date on click. */
|
||||
onChange: (date: Date) => void;
|
||||
/**
|
||||
* When true, all quick-pick buttons are disabled and non-interactive.
|
||||
* TZ §4.1.24.2 R16: days must not be selectable until Город вылета is set.
|
||||
*/
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
function addDays(base: Date, n: number): Date {
|
||||
@@ -40,6 +45,7 @@ export const DayQuickPick: FC<DayQuickPickProps> = ({
|
||||
locale,
|
||||
count = 3,
|
||||
onChange,
|
||||
disabled = false,
|
||||
}) => {
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
@@ -69,8 +75,9 @@ export const DayQuickPick: FC<DayQuickPickProps> = ({
|
||||
<button
|
||||
key={i}
|
||||
type="button"
|
||||
className={`day-quick-pick__btn${selected ? " day-quick-pick__btn--selected" : ""}`}
|
||||
className={`day-quick-pick__btn${selected ? " day-quick-pick__btn--selected" : ""}${disabled ? " day-quick-pick__btn--disabled" : ""}`}
|
||||
aria-pressed={selected}
|
||||
disabled={disabled}
|
||||
onClick={() => onChange(d)}
|
||||
data-testid={`day-quick-pick-${i}`}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user