Тесты и анимация кнопок (#4)

Co-authored-by: gorbenko.pavel <gorbenko.pavel@tansu.kz>
Reviewed-on: http://git.tnsu.kz/timur.gorodetskiy/request-portal/pulls/4

src/webparts/requestPortal/shared/approval/ui/ApprovalMatrix.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import styles from './approval.module.scss';
 import { Icon } from '../../ui';
-import { IUseMatrixEditor } from '../useMatrixEditor';
+import { IUseMatrixEditor, matrixRowKeys } from '../useMatrixEditor';
 import { ISiteUser } from '../models/ISiteUser';
 import { StatusBadge } from './StatusBadge';
 import { UserPicker } from './UserPicker';
+import { useFlipRows } from './useFlipRows';
 
 export interface IApprovalMatrixProps {
   editor: IUseMatrixEditor;
@@ -30,6 +31,17 @@ export const ApprovalMatrix: React.FC<IApprovalMatrixProps> = ({
 }) => {
   const { rows, loading, error, editable, blocks } = editor;
 
+  // Ключи строк и анимация их перестановки. Ключи обязаны быть устойчивыми
+  // (не индекс) — иначе React переписывает строки на месте, и «переезжать»
+  // при перестановке шага будет нечему (см. matrixRowKeys / useFlipRows).
+  const rowKeys = matrixRowKeys(rows);
+  // Шаг, который двигает пользователь: при обмене переезжают ОБА соседних шага,
+  // но подсветить и поднять надо только тот, по чьей стрелке кликнули, — иначе
+  // подсвечивается пол-таблицы и непонятно, что именно переехало. Запоминаем
+  // ключи блока ДО перестановки: после неё индексы уже другие.
+  const [activeKeys, setActiveKeys] = React.useState<string[]>([]);
+  const registerRow = useFlipRows(activeKeys);
+
   // Строка → шаг, которому она принадлежит. Нужно, чтобы отрисовать ячейку
   // «Шаг» один раз на весь шаг (rowSpan) и понять, можно ли двигать его выше/ниже.
   const blockByRow: Array<{ index: number; start: number; size: number }> = [];
@@ -39,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);
@@ -73,7 +110,11 @@ export const ApprovalMatrix: React.FC<IApprovalMatrixProps> = ({
                 const block = blockByRow[i];
                 const isBlockStart = block.start === i;
                 return (
-                  <tr key={i} className={block.size > 1 ? styles.parallelRow : undefined}>
+                  <tr
+                    key={rowKeys[i]}
+                    ref={registerRow(rowKeys[i])}
+                    className={block.size > 1 ? styles.parallelRow : undefined}
+                  >
                     {isBlockStart && (
                       <td className={styles.matrixStepCol} rowSpan={block.size}>
                         <span className={styles.stepNo}>{r.order}</span>
@@ -104,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} />
@@ -113,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" />
@@ -126,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
                               ? 'Отцепить: выполнять после предыдущего шага'
@@ -138,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" />
@@ -154,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>

src/webparts/requestPortal/shared/approval/ui/approval.module.scss

@@ -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 {

src/webparts/requestPortal/shared/approval/ui/useFlipRows.ts

@@ -0,0 +1,194 @@
+import * as React from 'react';
+
+// Анимация перестановки строк маршрута по технике FLIP (First–Last–Invert–Play):
+// вместо ручного «переезда» мы даём React переставить строки мгновенно, затем
+// вспоминаем, где строка была до этого, и проигрываем её путь от старого
+// положения к новому. Так анимация всегда совпадает с реальной раскладкой
+// таблицы, даже когда у шага несколько параллельных строк разной высоты
+// (см. rowSpan в ApprovalMatrix).
+//
+// Работает ТОЛЬКО при устойчивых ключах строк (см. matrixRowKeys в
+// useMatrixEditor): с key={index} React не двигает <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 = 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>.
+ * @param activeKeys ключи строк того шага, который двигает пользователь —
+ *   только он подсвечивается и поднимается над остальными (см. ApprovalMatrix).
+ *   Для прочих изменений состава (добавление/удаление) — пустой массив.
+ */
+// eslint-disable-next-line @rushstack/no-new-null -- null здесь диктует React: ref-колбэк получает именно null при отвязке узла
+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 prevTops = React.useRef(new Map<string, number>());
+  // Свои анимации держим сами, чтобы отменять ИМЕННО их: el.getAnimations()
+  // вернул бы заодно чужие (CSS-переходы и т.п.).
+  const running = React.useRef<Animation[]>([]);
+
+  const register = React.useCallback((key: string) => {
+    let cb = refCache.current.get(key);
+    if (!cb) {
+      cb = (el: HTMLTableRowElement | null): void => {
+        if (el) nodes.current.set(key, el);
+        else nodes.current.delete(key);
+      };
+      refCache.current.set(key, cb);
+    }
+    return cb;
+  }, []);
+
+  // Без списка зависимостей — намеренно: измерять надо ПОСЛЕ КАЖДОГО коммита,
+  // строка могла переехать от любого изменения. useLayoutEffect, а не
+  // useEffect: инвертировать положение нужно до того, как браузер покажет кадр,
+  // иначе будет заметен скачок.
+  React.useLayoutEffect(() => {
+    // Сначала запоминаем, где строка ВИДНА сейчас: при быстрых повторных кликах
+    // она в этот момент ещё летит, и новая анимация обязана стартовать от её
+    // текущего положения на экране, иначе будет рывок.
+    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 = prevTops.current;
+    const current = new Map<string, number>();
+    const moved: Array<{ el: HTMLTableRowElement; key: string; shift: number }> = [];
+    const entered: HTMLTableRowElement[] = [];
+
+    nodes.current.forEach((el, key) => {
+      // После отмены анимаций transform снят — это истинное новое положение.
+      const layoutTop = el.getBoundingClientRect().top;
+      current.set(key, layoutTop);
+
+      const before = previous.get(key);
+      if (before === undefined) {
+        entered.push(el);
+        return;
+      }
+      // Недоигранный сдвиг прошлой анимации + переезд из-за перестановки.
+      const leftover = (visualTops.get(key) ?? layoutTop) - layoutTop;
+      const shift = before - layoutTop + leftover;
+      if (Math.abs(shift) >= MIN_SHIFT_PX) moved.push({ el, key, shift });
+    });
+
+    prevTops.current = current;
+
+    if (prefersReducedMotion() || (moved.length === 0 && entered.length === 0)) return;
+
+    moved.forEach(({ el, key, shift }) => {
+      const isActive = activeKeys.indexOf(key) !== -1;
+      if (isActive) lift(el);
+
+      running.current.push(
+        el.animate([{ transform: `translateY(${shift}px)` }, { transform: 'translateY(0)' }], {
+          duration: MOVE_MS,
+          easing: MOVE_EASING,
+        })
+      );
+
+      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) => {
+      running.current.push(
+        el.animate(
+          [
+            { opacity: 0, transform: 'translateY(-6px)' },
+            { opacity: 1, transform: 'translateY(0)' },
+          ],
+          { duration: ENTER_MS, delay: i * ENTER_STAGGER_MS, easing: 'ease-out', fill: 'backwards' }
+        )
+      );
+    });
+
+    // Приземлились — снимаем подъём. Отменённая анимация роняет finished
+    // с AbortError (это штатный путь при перехвате следующим кликом), поэтому
+    // ошибку гасим: подъём снимет уже тот проход, который её отменил.
+    const landing = running.current.map((a) => a.finished);
+    Promise.all(landing)
+      .then(() => nodes.current.forEach(drop))
+      .catch(() => undefined);
+  });
+
+  React.useEffect(
+    () => () => {
+      running.current.forEach((a) => a.cancel());
+      running.current = [];
+    },
+    []
+  );
+
+  return register;
+}