Sheets: add selection stats (sum, average, count) to sheets bottom bar

applications/docs-editor/src/app/Containers/Spreadsheet/components/BottomBar/BottomBar.tsx

@@ -1,13 +1,5 @@
 import type { MouseEvent, ComponentPropsWithoutRef, Ref } from 'react'
-import { memo, useCallback, useEffect, useRef, useState } from 'react'
-import { DragDropProvider, type DragEndEvent } from '@dnd-kit/react'
-import { isSortable, useSortable } from '@dnd-kit/react/sortable'
-import { closestCenter } from '@dnd-kit/collision'
-import { RestrictToHorizontalAxis } from '@dnd-kit/abstract/modifiers'
-import { RestrictToElement } from '@dnd-kit/dom/modifiers'
-
-import { PointerSensor, PointerActivationConstraints } from '@dnd-kit/dom'
-
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
 import { Icon } from '../ui'
 import * as Ariakit from '@ariakit/react'
 import * as UI from '../ui'
@@ -18,8 +10,14 @@ import { c } from 'ttag'
 import { createComponent, useEvent } from '../utils'
 import { useUI } from '../../ui-store'
 import type { ProtonSheetsUIState } from '../../ui-state'
+import type { DragEndEvent } from '@dnd-kit/core'
+import { closestCenter, DndContext, MouseSensor, TouchSensor, useSensor, useSensors } from '@dnd-kit/core'
+import { restrictToHorizontalAxis, restrictToParentElement } from '@dnd-kit/modifiers'
+import { horizontalListSortingStrategy, SortableContext, useSortable } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
 import { getStringifiedColor } from '@rowsncolumns/spreadsheet'
 import { ColorPicker } from '../shared/ColorPicker'
+import { computeSelectionStats, formatStatNumber } from './selectionStats'
 
 const { s } = createStringifier(strings)
 
@@ -197,7 +195,7 @@ function SheetTab({ sheet, index, isActive }: SheetTabProps) {
     setIsRenaming(false)
   }, [rename, sheet.id, sheet.name, title])
 
-  const { ref, isDragging } = useSortable({ id: sheet.id, index, collisionDetector: closestCenter })
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: sheet.id })
 
   const tabColor = getStringifiedColor(
     sheet.tabColor,
@@ -207,8 +205,17 @@ function SheetTab({ sheet, index, isActive }: SheetTabProps) {
   return (
     <div
       className="relative flex h-full shrink-0 items-center"
-      ref={ref}
+      ref={setNodeRef}
+      {...attributes}
+      {...listeners}
       style={{
+        transform: transform
+          ? CSS.Translate.toString({
+              ...transform,
+              y: 0,
+            })
+          : undefined,
+        transition,
         zIndex: isDragging ? 1 : 0,
       }}
     >
@@ -251,7 +258,6 @@ function SheetTab({ sheet, index, isActive }: SheetTabProps) {
                     setTitle(sheet.name)
                   }
                 }}
-                maxLength={50}
               />
             )}
             <div
@@ -284,46 +290,77 @@ function SheetTab({ sheet, index, isActive }: SheetTabProps) {
 interface SheetTabsProps extends ComponentPropsWithoutRef<'div'> {}
 const SheetTabs = memo(function SheetTabs(props: SheetTabsProps) {
   const activeId = useUI((ui) => ui.sheets.activeId)
-  const containerRef = useRef<HTMLDivElement>(null)
 
-  const moveSheet = useUI.$.sheets.move
-  const handleDragEnd = useEvent<DragEndEvent>((event) => {
-    const { source } = event.operation
-    if (isSortable(source)) {
-      const oldIndex = source.initialIndex
-      const newIndex = source.index
-
-      if (oldIndex === newIndex || newIndex === -1) {
-        return
-      }
+  const sensors = useSensors(
+    useSensor(MouseSensor, {
+      activationConstraint: { distance: 5 },
+    }),
+    useSensor(TouchSensor, {
+      activationConstraint: { delay: 250, tolerance: 5 },
+    }),
+  )
 
-      moveSheet(Number(source.id), oldIndex, newIndex)
+  const sheets = useUI((ui) => ui.sheets.list)
+  const moveSheet = useUI.$.sheets.move
+  const handleDragEnd = useEvent((event: DragEndEvent) => {
+    const { active, over } = event
+    if (active.id && over?.id && active.id !== over.id) {
+      const currentPosition = sheets.findIndex((sheet) => sheet.id === active.id)
+      const newPosition = sheets.findIndex((sheet) => sheet.id === over.id)
+      moveSheet(Number(active.id), currentPosition, newPosition)
     }
   })
 
   return (
-    <DragDropProvider
-      sensors={[
-        PointerSensor.configure({
-          activationConstraints: [
-            new PointerActivationConstraints.Distance({ value: 5 }),
-            new PointerActivationConstraints.Delay({ value: 250, tolerance: 5 }),
-          ],
-        }),
-      ]}
-      modifiers={(defaults) => [
-        ...defaults,
-        RestrictToElement.configure({ element: containerRef.current }),
-        RestrictToHorizontalAxis,
-      ]}
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      modifiers={[restrictToParentElement, restrictToHorizontalAxis]}
       onDragEnd={handleDragEnd}
     >
-      <div ref={containerRef} {...props} className="flex h-full items-center gap-2.5 overflow-x-auto">
-        {useUI((ui) => ui.sheets.visible).map((sheet, index) => (
-          <SheetTab key={sheet.id} sheet={sheet} index={index} isActive={sheet.id === activeId} />
-        ))}
-      </div>
-    </DragDropProvider>
+      <SortableContext
+        items={useUI((ui) => ui.sheets.visible).map((sheet) => sheet.id)}
+        strategy={horizontalListSortingStrategy}
+      >
+        <div {...props} className="flex h-full items-center gap-2.5 overflow-x-auto">
+          {useUI((ui) => ui.sheets.visible).map((sheet, index) => (
+            <SheetTab key={sheet.id} sheet={sheet} index={index} isActive={sheet.id === activeId} />
+          ))}
+        </div>
+      </SortableContext>
+    </DndContext>
+  )
+})
+
+const SelectionStats = memo(function SelectionStats() {
+  const sheetId = useUI((ui) => ui.legacy.activeSheetId)
+  const selections = useUI((ui) => ui.legacy.selections)
+  const merges = useUI((ui) => ui.legacy.merges)
+  const getEffectiveValue = useUI((ui) => ui.legacy.getEffectiveValue)
+
+  const stats = useMemo(
+    () => computeSelectionStats(sheetId, selections, merges, getEffectiveValue),
+    [sheetId, selections, merges, getEffectiveValue],
+  )
+
+  if (!stats) return null
+
+  return (
+    <div className="flex shrink-0 items-center gap-4 text-xs text-[#545250]">
+      {stats.numericCount > 0 && (
+        <>
+          <span>
+            {s('Sum')}: {formatStatNumber(stats.sum)}
+          </span>
+          <span>
+            {s('Average')}: {formatStatNumber(stats.sum / stats.numericCount)}
+          </span>
+        </>
+      )}
+      <span>
+        {s('Count')}: {stats.count}
+      </span>
+    </div>
   )
 })
 
@@ -346,9 +383,10 @@ export const BottomBar = memo(function BottomBar(props: BottomBarProps) {
   return (
     <div {...props} className="flex items-center gap-2.5 border-t border-[#DEDEDE] bg-[#F9FCFA] pl-3 print:hidden">
       <SheetSwitcher />
-      <SheetTabs />
-      <div className="shrink-0 py-0.5 pl-2.5 pr-[3.125rem]">
+      <SheetTabs className="min-w-0 flex-1" />
+      <div className="flex shrink-0 items-center gap-4 py-0.5 pl-2.5 pr-3">
         <NewSheetButton />
+        <SelectionStats />
       </div>
     </div>
   )
@@ -358,6 +396,9 @@ function strings() {
   return {
     'New sheet': c('sheets_2025:Bottom bar').t`New sheet`,
     'All sheets': c('sheets_2025:Bottom bar').t`All sheets`,
+    Average: c('sheets_2025:Bottom bar').t`Average`,
+    Sum: c('sheets_2025:Bottom bar').t`Sum`,
+    Count: c('sheets_2025:Bottom bar').t`Count`,
     Delete: c('sheets_2025:Sheet tab options').t`Delete`,
     Duplicate: c('sheets_2025:Sheet tab options').t`Duplicate`,
     Rename: c('sheets_2025:Sheet tab options').t`Rename`,