Тесты и анимация кнопок #4
@@ -0,0 +1,40 @@
|
||||
name: Tests
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
pull_request:
|
||||
workflow_dispatch:
|
||||
|
||||
jobs:
|
||||
frontend-test:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Set up Node.js 22
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: '22'
|
||||
cache: 'npm'
|
||||
cache-dependency-path: package-lock.json
|
||||
|
||||
- name: Install dependencies
|
||||
run: |
|
||||
npm config set fetch-retries 5
|
||||
npm config set fetch-retry-mintimeout 10000
|
||||
npm config set fetch-retry-maxtimeout 120000
|
||||
for i in 1 2 3; do
|
||||
npm install --legacy-peer-deps && break
|
||||
echo "Attempt $i failed, retrying in 20s..."
|
||||
sleep 20
|
||||
done
|
||||
|
||||
# heft test = сборка (sass + typescript + lint) и следом Jest. Это НЕ то же
|
||||
# самое, что npm run build: там дополнительно пакуется .sppkg, а для проверки
|
||||
# на PR упаковка не нужна.
|
||||
- name: Run unit tests (Jest via heft)
|
||||
run: npx heft test --clean
|
||||
@@ -35,7 +35,12 @@ export const ApprovalMatrix: React.FC<IApprovalMatrixProps> = ({
|
||||
// (не индекс) — иначе React переписывает строки на месте, и «переезжать»
|
||||
// при перестановке шага будет нечему (см. matrixRowKeys / useFlipRows).
|
||||
const rowKeys = matrixRowKeys(rows);
|
||||
const registerRow = useFlipRows();
|
||||
// Шаг, который двигает пользователь: при обмене переезжают ОБА соседних шага,
|
||||
// но подсветить и поднять надо только тот, по чьей стрелке кликнули, — иначе
|
||||
// подсвечивается пол-таблицы и непонятно, что именно переехало. Запоминаем
|
||||
// ключи блока ДО перестановки: после неё индексы уже другие.
|
||||
const [activeKeys, setActiveKeys] = React.useState<string[]>([]);
|
||||
const registerRow = useFlipRows(activeKeys);
|
||||
|
||||
// Строка → шаг, которому она принадлежит. Нужно, чтобы отрисовать ячейку
|
||||
// «Шаг» один раз на весь шаг (rowSpan) и понять, можно ли двигать его выше/ниже.
|
||||
@@ -46,6 +51,31 @@ export const ApprovalMatrix: React.FC<IApprovalMatrixProps> = ({
|
||||
}
|
||||
});
|
||||
|
||||
const moveBlock = (rowIndex: number, direction: 'up' | 'down'): void => {
|
||||
const b = blockByRow[rowIndex];
|
||||
setActiveKeys(rowKeys.slice(b.start, b.start + b.size));
|
||||
if (direction === 'up') editor.moveBlockUp(rowIndex);
|
||||
else editor.moveBlockDown(rowIndex);
|
||||
};
|
||||
|
||||
// Остальные правки состава — не перестановка: сбрасываем «активный» шаг,
|
||||
// иначе подъём и подсветка достались бы случайной строке, которая сдвинулась
|
||||
// из-за перенумерации после удаления.
|
||||
const removeRow = (rowIndex: number): void => {
|
||||
setActiveKeys([]);
|
||||
editor.remove(rowIndex);
|
||||
};
|
||||
|
||||
const toggleParallel = (rowIndex: number): void => {
|
||||
setActiveKeys([]);
|
||||
editor.toggleParallel(rowIndex);
|
||||
};
|
||||
|
||||
const addApprover = (user: ISiteUser): void => {
|
||||
setActiveKeys([]);
|
||||
editor.addApprover(user);
|
||||
};
|
||||
|
||||
// Пустые колонки не показываем — столбец из одних прочерков только шумит.
|
||||
const hasStatuses = rows.some((r) => r.status && r.status !== '—');
|
||||
const hasDates = rows.some((r) => !!r.date);
|
||||
@@ -115,7 +145,7 @@ export const ApprovalMatrix: React.FC<IApprovalMatrixProps> = ({
|
||||
type="button"
|
||||
className={styles.iconBtn}
|
||||
disabled={block.index === 0}
|
||||
onClick={() => editor.moveBlockUp(i)}
|
||||
onClick={() => moveBlock(i, 'up')}
|
||||
title="Шаг выше"
|
||||
>
|
||||
<Icon name="chevron-down" size="sm" className={styles.flipY} />
|
||||
@@ -124,7 +154,7 @@ export const ApprovalMatrix: React.FC<IApprovalMatrixProps> = ({
|
||||
type="button"
|
||||
className={styles.iconBtn}
|
||||
disabled={block.index === blocks.length - 1}
|
||||
onClick={() => editor.moveBlockDown(i)}
|
||||
onClick={() => moveBlock(i, 'down')}
|
||||
title="Шаг ниже"
|
||||
>
|
||||
<Icon name="chevron-down" size="sm" />
|
||||
@@ -137,7 +167,7 @@ export const ApprovalMatrix: React.FC<IApprovalMatrixProps> = ({
|
||||
type="button"
|
||||
className={`${styles.iconBtn} ${r.parallelWithPrev ? styles.iconBtnActive : ''}`}
|
||||
disabled={i === 0}
|
||||
onClick={() => editor.toggleParallel(i)}
|
||||
onClick={() => toggleParallel(i)}
|
||||
title={
|
||||
r.parallelWithPrev
|
||||
? 'Отцепить: выполнять после предыдущего шага'
|
||||
@@ -149,7 +179,7 @@ export const ApprovalMatrix: React.FC<IApprovalMatrixProps> = ({
|
||||
<button
|
||||
type="button"
|
||||
className={`${styles.iconBtn} ${styles.iconBtnDanger}`}
|
||||
onClick={() => editor.remove(i)}
|
||||
onClick={() => removeRow(i)}
|
||||
title="Удалить"
|
||||
>
|
||||
<Icon name="trash" size="sm" />
|
||||
@@ -165,7 +195,7 @@ export const ApprovalMatrix: React.FC<IApprovalMatrixProps> = ({
|
||||
)}
|
||||
{editable && !loading && (
|
||||
<div className={styles.matrixPicker}>
|
||||
<UserPicker search={search} onPick={editor.addApprover} placeholder={pickerPlaceholder} />
|
||||
<UserPicker search={search} onPick={addApprover} placeholder={pickerPlaceholder} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -101,7 +101,12 @@
|
||||
.matrix {
|
||||
width: 100%;
|
||||
min-width: 480px; // колонки не сжимаются; при нехватке места .matrixScroll прокручивает
|
||||
border-collapse: collapse;
|
||||
// separate, а НЕ collapse: при collapse границы принадлежат таблице, а не
|
||||
// строкам, и во время анимации перестановки (см. ui/useFlipRows) уехавшая
|
||||
// строка оставляла за собой полосы от собственных границ. Границы здесь и так
|
||||
// заданы только снизу у th/td, поэтому при border-spacing: 0 вид не меняется.
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
font-size: $fs-sm;
|
||||
|
||||
th {
|
||||
|
||||
@@ -1,43 +1,85 @@
|
||||
import * as React from 'react';
|
||||
|
||||
// Анимация перестановки строк маршрута по технике FLIP (First–Last–Invert–Play):
|
||||
// вместо того чтобы анимировать «переезд» вручную, мы даём React переставить
|
||||
// строки мгновенно, а затем ЗАПОМИНАЕМ, где строка была до этого, и проигрываем
|
||||
// её путь задом наперёд — от старого положения к новому. Так анимация всегда
|
||||
// совпадает с реальной раскладкой таблицы, даже когда у шага несколько
|
||||
// параллельных строк разной высоты (см. rowSpan в ApprovalMatrix).
|
||||
// вместо ручного «переезда» мы даём React переставить строки мгновенно, затем
|
||||
// вспоминаем, где строка была до этого, и проигрываем её путь от старого
|
||||
// положения к новому. Так анимация всегда совпадает с реальной раскладкой
|
||||
// таблицы, даже когда у шага несколько параллельных строк разной высоты
|
||||
// (см. rowSpan в ApprovalMatrix).
|
||||
//
|
||||
// Работает ТОЛЬКО при устойчивых ключах строк (см. matrixRowKeys в
|
||||
// useMatrixEditor): с key={index} React не двигает <tr>, а переписывает их
|
||||
// содержимое на месте — двигаться было бы нечему.
|
||||
//
|
||||
// Проигрываем через Web Animations API (el.animate), а не через CSS-классы:
|
||||
// className у <tr> управляет React и затирает всё, что мы добавили бы руками,
|
||||
// а инлайновый style/анимации WAAPI он не трогает (эти пропсы у <tr> не заданы).
|
||||
// Всё, что мы навешиваем на узлы, — это ИНЛАЙНОВЫЕ стили и анимации Web
|
||||
// Animations API, и это принципиально: className у <tr> задаёт React (там
|
||||
// живёт .parallelRow), и при перерисовке он затёр бы класс, добавленный руками.
|
||||
// Свойство style у <tr>/<td> в разметке не задано, поэтому React его не трогает.
|
||||
//
|
||||
// Чего здесь намеренно НЕТ (проверено на макете — выглядело плохо):
|
||||
// • scale у строки: ячейка «Шаг» объединена по вертикали (rowSpan) и живёт в
|
||||
// ПЕРВОЙ строке блока, поэтому масштабирование каждой строки вокруг своего
|
||||
// центра разрывало блок визуально. Плюс строка становилась шире контейнера
|
||||
// и .matrixScroll (overflow-x: auto) на время анимации показывал полосу
|
||||
// горизонтальной прокрутки.
|
||||
// • пружинистый перелёт (cubic-bezier с >1): при overflow-x: auto вторая ось
|
||||
// тоже становится auto, и вылет за край таблицы строку бы обрезало.
|
||||
// • подсветка ВСЕХ переехавших строк: при обмене двух шагов двигаются оба, и
|
||||
// жёлтым заливало пол-таблицы. Подсвечиваем только тот блок, который двигал
|
||||
// пользователь (activeKeys).
|
||||
|
||||
/** Длительности и «пружинистость» — вынесены, чтобы правились в одном месте. */
|
||||
const MOVE_MS = 460;
|
||||
const MOVE_EASING = 'cubic-bezier(.34, 1.4, .5, 1)'; // с лёгким перелётом — «пружинка»
|
||||
const FLASH_MS = 750;
|
||||
const MOVE_MS = 380;
|
||||
const MOVE_EASING = 'cubic-bezier(.22, 1, .36, 1)';
|
||||
const FLASH_MS = 620;
|
||||
const ENTER_MS = 320;
|
||||
const ENTER_STAGGER_MS = 45;
|
||||
/** Смещение меньше этого — не перестановка, а дребезг раскладки: не анимируем. */
|
||||
/** Смещение меньше этого — дребезг раскладки, а не перестановка: не анимируем. */
|
||||
const MIN_SHIFT_PX = 1;
|
||||
|
||||
// Пока блок летит, он поднят над остальными и непрозрачен — иначе при обмене
|
||||
// двух шагов строки пересекаются и текст накладывается друг на друга. Значения
|
||||
// повторяют $white и (чуть плотнее) $sh-2 из styles/_design-tokens.scss —
|
||||
// инлайновыми они заданы потому, что снимать их надо тоже из JS.
|
||||
const LIFT_BG = '#fff';
|
||||
const LIFT_SHADOW = '0 6px 18px rgba(15, 36, 64, .13)';
|
||||
const FLASH_FROM = 'rgba(212, 160, 30, .22)'; // $gold-500
|
||||
const FLASH_TO = 'rgba(212, 160, 30, 0)';
|
||||
|
||||
function prefersReducedMotion(): boolean {
|
||||
return typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
}
|
||||
|
||||
function lift(row: HTMLTableRowElement): void {
|
||||
row.style.position = 'relative';
|
||||
row.style.zIndex = '2';
|
||||
Array.prototype.forEach.call(row.cells, (td: HTMLTableCellElement) => {
|
||||
td.style.background = LIFT_BG;
|
||||
td.style.boxShadow = LIFT_SHADOW;
|
||||
});
|
||||
}
|
||||
|
||||
function drop(row: HTMLTableRowElement): void {
|
||||
row.style.position = '';
|
||||
row.style.zIndex = '';
|
||||
Array.prototype.forEach.call(row.cells, (td: HTMLTableCellElement) => {
|
||||
td.style.background = '';
|
||||
td.style.boxShadow = '';
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Возвращает функцию, которая по ключу строки отдаёт ref-колбэк для её <tr>.
|
||||
* Колбэк на один и тот же ключ — стабильный (см. refCache): иначе React дёргал
|
||||
* бы ref(null)/ref(el) на каждый рендер и карта узлов пересобиралась бы впустую.
|
||||
* @param activeKeys ключи строк того шага, который двигает пользователь —
|
||||
* только он подсвечивается и поднимается над остальными (см. ApprovalMatrix).
|
||||
* Для прочих изменений состава (добавление/удаление) — пустой массив.
|
||||
*/
|
||||
// eslint-disable-next-line @rushstack/no-new-null -- null здесь диктует React: ref-колбэк получает именно null при отвязке узла
|
||||
export function useFlipRows(): (key: string) => (el: HTMLTableRowElement | null) => void {
|
||||
export function useFlipRows(activeKeys: string[]): (key: string) => (el: HTMLTableRowElement | null) => void {
|
||||
const nodes = React.useRef(new Map<string, HTMLTableRowElement>());
|
||||
// Колбэк на один и тот же ключ должен быть стабильным, иначе React дёргал бы
|
||||
// ref(null)/ref(el) на каждый рендер и карта узлов пересобиралась бы впустую.
|
||||
const refCache = React.useRef(new Map<string, (el: HTMLTableRowElement | null) => void>());
|
||||
const prevRects = React.useRef(new Map<string, number>());
|
||||
const prevTops = React.useRef(new Map<string, number>());
|
||||
// Свои анимации держим сами, чтобы отменять ИМЕННО их: el.getAnimations()
|
||||
// вернул бы заодно чужие (CSS-переходы и т.п.).
|
||||
const running = React.useRef<Animation[]>([]);
|
||||
@@ -55,67 +97,68 @@ export function useFlipRows(): (key: string) => (el: HTMLTableRowElement | null)
|
||||
}, []);
|
||||
|
||||
// Без списка зависимостей — намеренно: измерять надо ПОСЛЕ КАЖДОГО коммита,
|
||||
// ведь строка могла переехать от любого изменения (перестановка, удаление,
|
||||
// добавление). useLayoutEffect, а не useEffect: инвертировать положение нужно
|
||||
// до того, как браузер покажет кадр, иначе будет заметен «скачок».
|
||||
// строка могла переехать от любого изменения. useLayoutEffect, а не
|
||||
// useEffect: инвертировать положение нужно до того, как браузер покажет кадр,
|
||||
// иначе будет заметен скачок.
|
||||
React.useLayoutEffect(() => {
|
||||
// Прошлые анимации отменяем ДО замеров: getBoundingClientRect у элемента
|
||||
// с активным transform вернул бы его текущее (промежуточное) положение, и
|
||||
// новая анимация стартовала бы от неверной точки.
|
||||
// Сначала запоминаем, где строка ВИДНА сейчас: при быстрых повторных кликах
|
||||
// она в этот момент ещё летит, и новая анимация обязана стартовать от её
|
||||
// текущего положения на экране, иначе будет рывок.
|
||||
const visualTops = new Map<string, number>();
|
||||
nodes.current.forEach((el, key) => visualTops.set(key, el.getBoundingClientRect().top));
|
||||
|
||||
running.current.forEach((a) => a.cancel());
|
||||
running.current = [];
|
||||
nodes.current.forEach(drop);
|
||||
|
||||
const previous = prevRects.current;
|
||||
const previous = prevTops.current;
|
||||
const current = new Map<string, number>();
|
||||
const moved: Array<{ el: HTMLTableRowElement; shift: number }> = [];
|
||||
const moved: Array<{ el: HTMLTableRowElement; key: string; shift: number }> = [];
|
||||
const entered: HTMLTableRowElement[] = [];
|
||||
|
||||
nodes.current.forEach((el, key) => {
|
||||
const top = el.getBoundingClientRect().top;
|
||||
current.set(key, top);
|
||||
// После отмены анимаций transform снят — это истинное новое положение.
|
||||
const layoutTop = el.getBoundingClientRect().top;
|
||||
current.set(key, layoutTop);
|
||||
|
||||
const before = previous.get(key);
|
||||
if (before === undefined) {
|
||||
entered.push(el);
|
||||
return;
|
||||
}
|
||||
const shift = before - top;
|
||||
if (Math.abs(shift) >= MIN_SHIFT_PX) moved.push({ el, shift });
|
||||
// Недоигранный сдвиг прошлой анимации + переезд из-за перестановки.
|
||||
const leftover = (visualTops.get(key) ?? layoutTop) - layoutTop;
|
||||
const shift = before - layoutTop + leftover;
|
||||
if (Math.abs(shift) >= MIN_SHIFT_PX) moved.push({ el, key, shift });
|
||||
});
|
||||
|
||||
prevRects.current = current;
|
||||
prevTops.current = current;
|
||||
|
||||
// Первый проход (карта пустая) — это просто появление таблицы, а не
|
||||
// перестановка: анимируем только выезд строк, и то по одному разу.
|
||||
if (prefersReducedMotion()) return;
|
||||
if (prefersReducedMotion() || (moved.length === 0 && entered.length === 0)) return;
|
||||
|
||||
moved.forEach(({ el, key, shift }) => {
|
||||
const isActive = activeKeys.indexOf(key) !== -1;
|
||||
if (isActive) lift(el);
|
||||
|
||||
moved.forEach(({ el, shift }) => {
|
||||
// Строка едет из старого положения в новое и на середине пути чуть
|
||||
// «раздувается» — глазу проще проследить, какой именно шаг переехал.
|
||||
running.current.push(
|
||||
el.animate(
|
||||
[
|
||||
{ transform: `translateY(${shift}px) scale(1)` },
|
||||
{ transform: `translateY(${shift * 0.25}px) scale(1.02)`, offset: 0.45 },
|
||||
{ transform: 'translateY(0) scale(1)' },
|
||||
],
|
||||
{ duration: MOVE_MS, easing: MOVE_EASING }
|
||||
)
|
||||
el.animate([{ transform: `translateY(${shift}px)` }, { transform: 'translateY(0)' }], {
|
||||
duration: MOVE_MS,
|
||||
easing: MOVE_EASING,
|
||||
})
|
||||
);
|
||||
|
||||
// Золотая вспышка по ячейкам (а не по <tr>): у параллельных строк фон
|
||||
// задан на td (.parallelRow > td), и подсветка строки была бы им закрыта.
|
||||
Array.prototype.forEach.call(el.cells, (td: HTMLTableCellElement) => {
|
||||
running.current.push(
|
||||
td.animate(
|
||||
[
|
||||
{ backgroundColor: 'rgba(212, 160, 30, .30)' },
|
||||
{ backgroundColor: 'rgba(212, 160, 30, 0)' },
|
||||
],
|
||||
{ duration: FLASH_MS, easing: 'ease-out' }
|
||||
)
|
||||
);
|
||||
});
|
||||
if (isActive) {
|
||||
// Вспышка по ячейкам, а не по <tr>: у параллельных строк фон задан на td
|
||||
// (.parallelRow > td), и подсветка строки была бы им закрыта.
|
||||
Array.prototype.forEach.call(el.cells, (td: HTMLTableCellElement) => {
|
||||
running.current.push(
|
||||
td.animate([{ backgroundColor: FLASH_FROM }, { backgroundColor: FLASH_TO }], {
|
||||
duration: FLASH_MS,
|
||||
easing: 'ease-out',
|
||||
})
|
||||
);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
entered.forEach((el, i) => {
|
||||
@@ -129,6 +172,14 @@ export function useFlipRows(): (key: string) => (el: HTMLTableRowElement | null)
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
// Приземлились — снимаем подъём. Отменённая анимация роняет finished
|
||||
// с AbortError (это штатный путь при перехвате следующим кликом), поэтому
|
||||
// ошибку гасим: подъём снимет уже тот проход, который её отменил.
|
||||
const landing = running.current.map((a) => a.finished);
|
||||
Promise.all(landing)
|
||||
.then(() => nodes.current.forEach(drop))
|
||||
.catch(() => undefined);
|
||||
});
|
||||
|
||||
React.useEffect(
|
||||
|
||||
Reference in New Issue
Block a user