@noya-app/noya-designsystem 0.1.64 → 0.1.65

package/src/components/listView/ListViewRoot.tsx

@@ -0,0 +1,521 @@
+"use client";
+
+import { Size } from "@noya-app/noya-geometry";
+import { range } from "@noya-app/noya-utils";
+import { forwardRefGeneric, memoGeneric } from "@noya-app/react-utils";
+import React, {
+  CSSProperties,
+  ForwardedRef,
+  isValidElement,
+  memo,
+  ReactElement,
+  ReactNode,
+  useCallback,
+  useContext,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+} from "react";
+import { WindowScroller, WindowScrollerChildProps } from "react-virtualized";
+import { ListChildComponentProps, VariableSizeList } from "react-window";
+import { INPUT_HEIGHT } from "../../theme";
+import { mergeConflictingClassNames } from "../../utils/classNames";
+import { IVirtualizedList } from "../IVirtualizedList";
+import { ScrollArea } from "../ScrollArea";
+import { SharedDragProps } from "../sorting/DragRegistration";
+import { Sortable } from "../sorting/Sortable";
+import {
+  DropValidator,
+  MoveDragItemHandler,
+  SortableItemContextProps,
+} from "../sorting/sorting";
+import {
+  ListRowContext,
+  ListRowContextValue,
+  ListViewContext,
+  ListViewContextValue,
+  ListViewDraggingContext,
+  ListViewDraggingContextValue,
+  RenderItemContext,
+} from "./ListViewContexts";
+import {
+  ListColorScheme,
+  ListRowMarginType,
+  ListRowPosition,
+  ListViewSectionHeaderVariant,
+  ListViewVariant,
+  PressEventName,
+} from "./types";
+
+export const ROW_HEIGHT = 31;
+export const SECTION_HEADER_LABEL_HEIGHT = INPUT_HEIGHT;
+
+const VirtualizedListRow = memo(function VirtualizedListRow({
+  index,
+  style,
+}: ListChildComponentProps) {
+  const renderItem = useContext(RenderItemContext);
+
+  return (
+    <div key={index} style={style}>
+      {renderItem(index)}
+    </div>
+  );
+});
+
+/* ----------------------------------------------------------------------------
+ * VirtualizedList
+ * ------------------------------------------------------------------------- */
+
+interface VirtualizedListProps<T> {
+  size: Size;
+  scrollElement: HTMLDivElement;
+  items: T[];
+  getItemHeight: (index: number) => number;
+  keyExtractor: (index: number) => string;
+  renderItem: (index: number) => ReactNode;
+}
+
+const VirtualizedListInner = forwardRefGeneric(function VirtualizedListInner<T>(
+  {
+    size,
+    scrollElement,
+    items,
+    getItemHeight,
+    keyExtractor,
+    renderItem,
+  }: VirtualizedListProps<T>,
+  ref: ForwardedRef<IVirtualizedList>
+) {
+  const listRef = useRef<VariableSizeList<T> | null>(null);
+
+  useImperativeHandle(ref, () => ({
+    scrollToIndex(index) {
+      listRef.current?.scrollToItem(index);
+    },
+  }));
+
+  useLayoutEffect(() => {
+    listRef.current?.resetAfterIndex(0);
+  }, [
+    // When items change, we need to re-render the virtualized list,
+    // since it doesn't currently support row height changes
+    items,
+  ]);
+
+  // Internally, react-virtualized updates these properties. We always want
+  // to use our custom scroll element, so we override them. It may update
+  // overflowX/Y individually in addition to `overflow`, so we include all 3.
+  const listStyle = useMemo(
+    (): CSSProperties => ({
+      overflowX: "initial",
+      overflowY: "initial",
+      overflow: "initial",
+    }),
+    []
+  );
+
+  return (
+    <RenderItemContext.Provider value={renderItem}>
+      <WindowScroller
+        scrollElement={scrollElement}
+        style={useMemo(() => ({ flex: "1 1 auto" }), [])}
+      >
+        {useCallback(
+          ({
+            registerChild,
+            onChildScroll,
+            scrollTop,
+          }: WindowScrollerChildProps & {
+            // Added when noya-designsystem moved to a separate package.
+            // I think this is a hack to get around the fact that react-virtualized
+            // doesn't update on scroll unless we force it to by changing ref.
+            // Either we're not using this the intended way or the types are wrong.
+            registerChild: (element: any) => void;
+          }) => (
+            <div ref={registerChild}>
+              <VariableSizeList<T>
+                ref={listRef}
+                // The list won't update on scroll unless we force it to by changing key
+                key={scrollTop}
+                style={listStyle}
+                itemKey={keyExtractor}
+                onScroll={({ scrollOffset }: { scrollOffset: number }) => {
+                  onChildScroll({ scrollTop: scrollOffset });
+                }}
+                initialScrollOffset={scrollTop}
+                width={size.width}
+                height={size.height}
+                itemCount={items.length}
+                itemSize={getItemHeight}
+                estimatedItemSize={ROW_HEIGHT}
+              >
+                {VirtualizedListRow as any}
+              </VariableSizeList>
+            </div>
+          ),
+          [
+            listStyle,
+            keyExtractor,
+            size.width,
+            size.height,
+            items.length,
+            getItemHeight,
+          ]
+        )}
+      </WindowScroller>
+    </RenderItemContext.Provider>
+  );
+});
+
+const VirtualizedList = memo(
+  VirtualizedListInner
+) as typeof VirtualizedListInner;
+
+/* ----------------------------------------------------------------------------
+ * Root
+ * ------------------------------------------------------------------------- */
+
+export type ListViewItemInfo = {
+  isDragOverlay: boolean;
+  activeDragIndex?: number;
+};
+
+export type ListViewRootProps<T> = {
+  data: T[];
+  renderItem: (item: T, index: number, info: ListViewItemInfo) => ReactNode;
+  keyExtractor: (item: T, index: number) => string;
+  /**
+   * Each item must have an `id` in order to be sortable.
+   *
+   * Additionally, the key extracted with `keyExtractor` must match the ListItem.Row `id`.
+   */
+  sortable?: boolean;
+  virtualized?: Size;
+
+  id?: string;
+  className?: string;
+  style?: CSSProperties;
+  role?: string;
+  "aria-labelledby"?: string;
+  "aria-orientation"?: "vertical" | "horizontal";
+  "aria-multiselectable"?: boolean;
+  onPress?: () => void;
+  scrollable?: boolean;
+  expandable?: boolean;
+  onMoveItem?: MoveDragItemHandler;
+  indentation?: number;
+  acceptsDrop?: DropValidator;
+  pressEventName?: PressEventName;
+  variant?: ListViewVariant;
+  sectionHeaderVariant?: ListViewSectionHeaderVariant;
+  divider?: boolean;
+  gap?: number;
+  colorScheme?: ListColorScheme;
+  containerRef?: React.RefObject<HTMLDivElement | null>;
+  onDragOver?: React.DragEventHandler<HTMLDivElement>;
+  onDragEnter?: React.DragEventHandler<HTMLDivElement>;
+  onDragLeave?: React.DragEventHandler<HTMLDivElement>;
+  onDrop?: React.DragEventHandler<HTMLDivElement>;
+  renderEmptyState?: () => ReactNode;
+  getDropTargetParentIndex?: SortableItemContextProps["getDropTargetParentIndex"];
+  sharedDragProps?: SharedDragProps;
+  sortableId?: string;
+  itemHeight?: number;
+};
+
+export const ListViewRoot = memoGeneric(
+  forwardRefGeneric(function ListViewRootInner<T>(
+    {
+      id,
+      className,
+      style,
+      role,
+      "aria-labelledby": ariaLabelledby,
+      "aria-orientation": ariaOrientation,
+      "aria-multiselectable": ariaMultiselectable,
+      onPress,
+      scrollable = false,
+      expandable = true,
+      sortable = false,
+      divider = false,
+      onMoveItem,
+      indentation = 12,
+      acceptsDrop,
+      data,
+      renderItem,
+      keyExtractor,
+      virtualized,
+      variant = "normal",
+      sectionHeaderVariant = "normal",
+      pressEventName = "onClick",
+      colorScheme = "primary",
+      gap = 0,
+      containerRef,
+      onDragOver,
+      onDragEnter,
+      onDragLeave,
+      onDrop,
+      renderEmptyState,
+      getDropTargetParentIndex,
+      sharedDragProps,
+      sortableId,
+      itemHeight,
+    }: ListViewRootProps<T>,
+    forwardedRef: ForwardedRef<IVirtualizedList>
+  ) {
+    const handleClick = useCallback(
+      (event: React.MouseEvent) => {
+        if (
+          event.target instanceof HTMLElement &&
+          event.target.classList.contains("scroll-component")
+        )
+          return;
+
+        // As a hack, we call preventDefault in a row if the event was handled.
+        // If the event wasn't handled already, we call onPress here.
+        if (!event.isDefaultPrevented()) {
+          onPress?.();
+        }
+      },
+      [onPress]
+    );
+
+    const renderChild = useCallback(
+      (index: number) =>
+        renderItem(data[index], index, { isDragOverlay: false }),
+      [data, renderItem]
+    );
+
+    const defaultContextValue = useMemo(
+      (): ListRowContextValue => ({
+        marginType: "none",
+        selectedPosition: "only",
+        isSectionHeader: false,
+      }),
+      []
+    );
+
+    const getItemContextValue = useCallback(
+      (i: number): ListRowContextValue | undefined => {
+        if (variant === "bare" || variant === "normal")
+          return defaultContextValue;
+
+        const current = renderChild(i);
+
+        if (!isValidElement(current)) return;
+
+        const prevChild = i - 1 >= 0 && renderChild(i - 1);
+        const nextChild = i + 1 < data.length && renderChild(i + 1);
+
+        const next: ReactElement<any> | undefined = isValidElement(nextChild)
+          ? nextChild
+          : undefined;
+        const prev: ReactElement<any> | undefined = isValidElement(prevChild)
+          ? prevChild
+          : undefined;
+
+        const hasMarginTop = !prev;
+        const hasMarginBottom =
+          !next ||
+          (current as any).props.isSectionHeader ||
+          (next && (next as any).props.isSectionHeader);
+
+        let marginType: ListRowMarginType;
+
+        if (hasMarginTop && hasMarginBottom) {
+          marginType = "vertical";
+        } else if (hasMarginBottom) {
+          marginType = "bottom";
+        } else if (hasMarginTop) {
+          marginType = "top";
+        } else {
+          marginType = "none";
+        }
+
+        let selectedPosition: ListRowPosition = "only";
+
+        if ((current as any).props.selected) {
+          const nextSelected =
+            next && !next.props.isSectionHeader && (next as any).props.selected;
+          const prevSelected =
+            prev && !prev.props.isSectionHeader && (prev as any).props.selected;
+
+          if (nextSelected && prevSelected) {
+            selectedPosition = "middle";
+          } else if (nextSelected && !prevSelected) {
+            selectedPosition = "first";
+          } else if (!nextSelected && prevSelected) {
+            selectedPosition = "last";
+          }
+        }
+
+        return {
+          marginType,
+          selectedPosition,
+          isSectionHeader: (current as any).props.isSectionHeader,
+        };
+      },
+      [variant, defaultContextValue, renderChild, data.length]
+    );
+
+    const draggingContextOverlayValue = useMemo(
+      (): ListViewDraggingContextValue => ({
+        isDragOverlay: true,
+      }),
+      []
+    );
+
+    const renderOverlay = useCallback(
+      (index: number) => (
+        <div style={{ opacity: 0.25 }}>
+          <ListViewDraggingContext.Provider value={draggingContextOverlayValue}>
+            {renderItem(data[index], index, { isDragOverlay: true })}
+          </ListViewDraggingContext.Provider>
+        </div>
+      ),
+      [draggingContextOverlayValue, renderItem, data]
+    );
+
+    const renderWrappedChild = useCallback(
+      (index: number) => {
+        const contextValue = getItemContextValue(index);
+        const current = renderChild(index);
+
+        if (!contextValue || !isValidElement(current)) return null;
+
+        return (
+          <ListRowContext.Provider key={current.key} value={contextValue}>
+            {current}
+          </ListRowContext.Provider>
+        );
+      },
+      [getItemContextValue, renderChild]
+    );
+
+    const ids = useMemo(() => data.map(keyExtractor), [keyExtractor, data]);
+
+    const withSortable = (children: ReactNode) =>
+      sortable ? (
+        <Sortable.Root
+          id={sortableId}
+          onMoveItem={onMoveItem}
+          keys={ids}
+          renderOverlay={renderOverlay}
+          acceptsDrop={acceptsDrop}
+          getDropTargetParentIndex={getDropTargetParentIndex}
+          sharedDragProps={sharedDragProps}
+        >
+          {children}
+        </Sortable.Root>
+      ) : (
+        children
+      );
+
+    const withScrollable = (
+      children: (scrollElementRef: HTMLDivElement | null) => ReactNode
+    ) => (scrollable ? <ScrollArea>{children}</ScrollArea> : children(null));
+
+    const getItemHeight = useCallback(
+      (index: number) => {
+        if (itemHeight) return itemHeight;
+
+        const child = getItemContextValue(index);
+        const height =
+          child?.isSectionHeader && sectionHeaderVariant === "label"
+            ? SECTION_HEADER_LABEL_HEIGHT
+            : ROW_HEIGHT;
+        return height;
+      },
+      [getItemContextValue, itemHeight, sectionHeaderVariant]
+    );
+
+    const getKey = useCallback(
+      (index: number) => keyExtractor(data[index], index),
+      [data, keyExtractor]
+    );
+
+    const draggingContextValue = useMemo(() => ({}), []);
+    const gapStyle = useMemo(() => ({ gap: `${gap}px` }), [gap]);
+
+    const contextValue: ListViewContextValue = useMemo(
+      () => ({
+        pressEventName,
+        colorScheme,
+        gap,
+        sectionHeaderVariant,
+        variant,
+        divider,
+        sortable,
+        expandable,
+        indentation,
+      }),
+      [
+        pressEventName,
+        colorScheme,
+        gap,
+        sectionHeaderVariant,
+        variant,
+        divider,
+        sortable,
+        expandable,
+        indentation,
+      ]
+    );
+
+    return (
+      <ListViewContext.Provider value={contextValue}>
+        <ListViewDraggingContext.Provider value={draggingContextValue}>
+          <div
+            id={id}
+            role={role}
+            aria-labelledby={ariaLabelledby}
+            aria-orientation={ariaOrientation}
+            aria-multiselectable={ariaMultiselectable}
+            className={mergeConflictingClassNames(
+              [
+                `n-flex n-flex-col n-text-text-muted ${
+                  scrollable ? "n-flex-1" : "n-flex-none"
+                } `,
+                className,
+              ],
+              {
+                categories: ["flex"],
+              }
+            )}
+            style={{ ...gapStyle, ...style }}
+            {...{
+              [pressEventName]: handleClick,
+            }}
+            ref={containerRef}
+            onDragOver={onDragOver}
+            onDragEnter={onDragEnter}
+            onDragLeave={onDragLeave}
+            onDrop={onDrop}
+          >
+            {data.length === 0 && renderEmptyState
+              ? renderEmptyState()
+              : withScrollable((scrollElementRef: HTMLDivElement | null) =>
+                  withSortable(
+                    virtualized ? (
+                      <VirtualizedList<T>
+                        ref={forwardedRef}
+                        scrollElement={scrollElementRef!}
+                        items={data}
+                        size={virtualized}
+                        getItemHeight={getItemHeight}
+                        keyExtractor={getKey}
+                        renderItem={renderWrappedChild}
+                      />
+                    ) : (
+                      range(0, data.length).map(renderWrappedChild)
+                    )
+                  )
+                )}
+          </div>
+        </ListViewDraggingContext.Provider>
+      </ListViewContext.Provider>
+    );
+  })
+);