fix(ui): AOI map blank на open + FK select loading spinner
AOI map blank: Pickер открывался с пустым контейнером — без zoom controls и attribution. Leaflet вычисляет tile grid от containerSize в момент L.map() create(); modal animation + flex-1 layout давали 0×0 на первом кадре, тайлы не запрашивались, и map оставался blank. setTimeout(invalidateSize, 100ms) не покрывал случай когда modal ещё анимировал. Решение: ResizeObserver на map div + invalidateSize при каждом resize. Покрывает modal fade-in, dev tools toggle, window resize. Плюс requestAnimationFrame invalidate для initial flush. Inline style.minHeight=420/height=60vh — защита если flex не распределил высоту. FK select loading state: Раньше при isLoading select disabled + показывал '…'. Теперь: - chevron справа заменяется на animated CircleNotchIcon (animate-spin) - aria-busy=true для screen readers - цвет spinner ultramarain — маркирует активность Refactor: chevron перенесён из background-image в абсолютно позиционированный <div pointer-events-none>. Pointer-events-none не блокирует click по нативному select.
This commit is contained in:
Zimin A.N.
@@ -3,6 +3,7 @@ import { useForm, Controller, type SubmitHandler } from 'react-hook-form'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Ajv, { type ErrorObject } from 'ajv'
|
||||
import addFormats from 'ajv-formats'
|
||||
import { CaretDownIcon, CircleNotchIcon } from '@phosphor-icons/react'
|
||||
import {
|
||||
Alert,
|
||||
Badge,
|
||||
@@ -747,13 +748,10 @@ const ReferenceSelectField = ({
|
||||
// scroll и type-ahead search работают OOTB. SingleSelect popup
|
||||
// через createPortal с position:fixed не делает auto-flip и уходит
|
||||
// за нижний край когда триггер близко к низу modal'а.
|
||||
// Caret chevron как inline SVG в data-uri — match'ит SingleSelect
|
||||
// CaretDown иконку (color carbon/40, weight 'regular', size ~16).
|
||||
// appearance-none убирает OS default стрелку, иначе на macOS Safari
|
||||
// рендерится двойной chevron + native blue border.
|
||||
const caretSvg =
|
||||
"url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23687078' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 6 8 10 12 6'/></svg>\")"
|
||||
|
||||
//
|
||||
// Right adornment: spinner если идёт fetch options, иначе caret.
|
||||
// pointer-events-none — иконка не блокирует click по нативному
|
||||
// select (он принимает все клики, включая поверх стрелки).
|
||||
return (
|
||||
<Controller
|
||||
control={control}
|
||||
@@ -761,31 +759,41 @@ const ReferenceSelectField = ({
|
||||
render={({ field }) => (
|
||||
<div>
|
||||
<FieldLabel required={required}>{label}</FieldLabel>
|
||||
<select
|
||||
value={(field.value as string | undefined) ?? ''}
|
||||
onChange={(e) => field.onChange(e.target.value || undefined)}
|
||||
disabled={isLoading}
|
||||
aria-invalid={Boolean(errorMsg)}
|
||||
// appearance-none + custom caret = одинаковый look на всех
|
||||
// платформах. py-2 (8px) match'ит TextInput высоту.
|
||||
// pr-10 даёт место под chevron, остальной padding как у TextInput.
|
||||
className={[
|
||||
'w-full appearance-none border rounded-sm pl-3 pr-10 py-2 text-sm font-secondary',
|
||||
'bg-white text-black transition-colors',
|
||||
'bg-no-repeat bg-[right_0.75rem_center] bg-[length:1rem_1rem]',
|
||||
'focus:outline-none focus:ring-1 focus:ring-ultramarain focus:border-ultramarain',
|
||||
errorMsg ? 'border-mars' : 'border-regolith hover:border-carbon/40',
|
||||
isLoading ? 'cursor-wait text-carbon/60' : 'cursor-pointer',
|
||||
].join(' ')}
|
||||
style={{ backgroundImage: caretSvg }}
|
||||
>
|
||||
<option value="">{isLoading ? '…' : '—'}</option>
|
||||
{options.map((opt) => (
|
||||
<option key={opt.id} value={opt.id}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<div className="relative">
|
||||
<select
|
||||
value={(field.value as string | undefined) ?? ''}
|
||||
onChange={(e) => field.onChange(e.target.value || undefined)}
|
||||
disabled={isLoading}
|
||||
aria-invalid={Boolean(errorMsg)}
|
||||
aria-busy={isLoading}
|
||||
// appearance-none убирает OS default стрелку.
|
||||
// py-2 (8px) match'ит TextInput высоту. pr-10 — место под адорнмент.
|
||||
className={[
|
||||
'w-full appearance-none border rounded-sm pl-3 pr-10 py-2 text-sm font-secondary',
|
||||
'bg-white text-black transition-colors',
|
||||
'focus:outline-none focus:ring-1 focus:ring-ultramarain focus:border-ultramarain',
|
||||
errorMsg ? 'border-mars' : 'border-regolith hover:border-carbon/40',
|
||||
isLoading ? 'cursor-wait text-carbon/60' : 'cursor-pointer',
|
||||
].join(' ')}
|
||||
>
|
||||
<option value="">{isLoading ? '…' : '—'}</option>
|
||||
{options.map((opt) => (
|
||||
<option key={opt.id} value={opt.id}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<div
|
||||
className="pointer-events-none absolute inset-y-0 right-3 flex items-center"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{isLoading ? (
|
||||
<CircleNotchIcon size={16} weight="bold" className="text-ultramarain animate-spin" />
|
||||
) : (
|
||||
<CaretDownIcon size={16} weight="regular" className="text-carbon/40" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<FieldHint>{hint}</FieldHint>
|
||||
<FieldError>{errorMsg}</FieldError>
|
||||
</div>
|
||||
|
||||
@@ -115,11 +115,25 @@ export const AoiPickerDialog = ({ isOpen, onClose, onApply, initial }: Props) =>
|
||||
|
||||
mapRef.current = map
|
||||
|
||||
// Forces map to recompute size: modal animations cause containerSize=0
|
||||
// первой кадр. После 100ms layout settled.
|
||||
const t = setTimeout(() => map.invalidateSize(), 100)
|
||||
// Modal animation + flex layout = mapDiv может стартовать с 0×0 на
|
||||
// первом кадре. Leaflet вычисляет tile grid от containerSize в момент
|
||||
// create() — если 0, тайлы не запрашиваются и карта остаётся пустой.
|
||||
//
|
||||
// Решение: ResizeObserver на контейнер, invalidateSize при каждом
|
||||
// resize. Это надёжно покрывает modal fade-in, dev tools toggle,
|
||||
// window resize. Дополнительно invalidateSize на следующем
|
||||
// animation frame — для случая когда RO не fire'ит (initial size
|
||||
// уже окончательный).
|
||||
const ro = new ResizeObserver(() => {
|
||||
if (mapRef.current) mapRef.current.invalidateSize()
|
||||
})
|
||||
ro.observe(div)
|
||||
const raf = requestAnimationFrame(() => {
|
||||
if (mapRef.current) mapRef.current.invalidateSize()
|
||||
})
|
||||
return () => {
|
||||
clearTimeout(t)
|
||||
ro.disconnect()
|
||||
cancelAnimationFrame(raf)
|
||||
}
|
||||
}, [isOpen, initial])
|
||||
|
||||
@@ -162,7 +176,11 @@ export const AoiPickerDialog = ({ isOpen, onClose, onApply, initial }: Props) =>
|
||||
|
||||
<div
|
||||
ref={mapDivRef}
|
||||
className="flex-1 min-h-[420px] rounded-sm border border-regolith"
|
||||
className="flex-1 rounded-sm border border-regolith"
|
||||
// Inline height — Leaflet требует non-zero containerSize в момент
|
||||
// L.map() create(). flex-1 не гарантирует высоту до layout pass;
|
||||
// explicit 420px минимум защищает от blank карты.
|
||||
style={{ minHeight: 420, height: '60vh' }}
|
||||
aria-label={t('aoi.dialog.mapAriaLabel')}
|
||||
/>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user