@react-spectrum/list 3.0.0-alpha.10 → 3.0.0-alpha.11

package/src/InsertionIndicator.tsx

@@ -0,0 +1,42 @@
+import {classNames} from '@react-spectrum/utils';
+import {ItemDropTarget} from '@react-types/shared';
+import listStyles from './styles.css';
+import {ListViewContext} from './ListView';
+import React, {useContext, useRef} from 'react';
+import {useVisuallyHidden} from '@react-aria/visually-hidden';
+
+interface InsertionIndicatorProps {
+  target: ItemDropTarget,
+  isPresentationOnly?: boolean
+}
+
+export default function InsertionIndicator(props: InsertionIndicatorProps) {
+  let {dropState, dropHooks} = useContext(ListViewContext);
+  const {target, isPresentationOnly} = props;
+
+  let ref = useRef();
+  let {dropIndicatorProps} = dropHooks.useDropIndicator(props, dropState, ref);
+  let {visuallyHiddenProps} = useVisuallyHidden();
+
+  let isDropTarget = dropState.isDropTarget(target);
+
+  return (
+    <div role="row" aria-hidden={dropIndicatorProps['aria-hidden']}>
+      <div
+        role="gridcell"
+        aria-selected="false"
+        className={
+          classNames(
+            listStyles,
+            'react-spectrum-ListViewInsertionIndicator',
+            {
+              'react-spectrum-ListViewInsertionIndicator--dropTarget': isDropTarget
+            }
+          )}>
+        {!isPresentationOnly && 
+          <div {...visuallyHiddenProps} role="button" {...dropIndicatorProps} ref={ref} />
+        }
+      </div>
+    </div>
+  );
+}

package/src/ListView.tsx

@@ -9,42 +9,42 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import {
-  AriaLabelingProps,
-  AsyncLoadable,
-  CollectionBase,
-  DOMProps,
-  DOMRef,
-  LoadingState,
-  MultipleSelection,
-  SpectrumSelectionProps,
-  StyleProps
-} from '@react-types/shared';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import type {DraggableCollectionState} from '@react-stately/dnd';
-import {DragHooks} from '@react-spectrum/dnd';
-import {DragPreview} from './DragPreview';
-import {GridCollection, GridState, useGridState} from '@react-stately/grid';
-import {GridKeyboardDelegate, useGrid} from '@react-aria/grid';
+import {DOMRef, LoadingState} from '@react-types/shared';
+import type {DraggableCollectionState, DroppableCollectionState} from '@react-stately/dnd';
+import {DragHooks, DropHooks} from '@react-spectrum/dnd';
+import type {DroppableCollectionResult} from '@react-aria/dnd';
+import {filterDOMProps, useLayoutEffect} from '@react-aria/utils';
+import InsertionIndicator from './InsertionIndicator';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {ListLayout} from '@react-stately/layout';
 import {ListState, useListState} from '@react-stately/list';
-import listStyles from './listview.css';
+import listStyles from './styles.css';
 import {ListViewItem} from './ListViewItem';
+import {mergeProps} from '@react-aria/utils';
 import {ProgressCircle} from '@react-spectrum/progress';
-import React, {ReactElement, useContext, useMemo, useRef} from 'react';
-import {useCollator, useLocale, useMessageFormatter} from '@react-aria/i18n';
+import React, {Key, ReactElement, useContext, useMemo, useRef, useState} from 'react';
+import {Rect} from '@react-stately/virtualizer';
+import RootDropIndicator from './RootDropIndicator';
+import {DragPreview as SpectrumDragPreview} from './DragPreview';
+import {SpectrumListProps} from '@react-types/list';
+import {useCollator, useMessageFormatter} from '@react-aria/i18n';
+import {useList} from '@react-aria/list';
 import {useProvider} from '@react-spectrum/provider';
 import {Virtualizer} from '@react-aria/virtualizer';
 
 interface ListViewContextValue<T> {
-  state: GridState<T, GridCollection<any>>,
-  keyboardDelegate: GridKeyboardDelegate<T, GridCollection<any>>,
+  state: ListState<T>,
   dragState: DraggableCollectionState,
-  onAction:(key: string) => void,
+  dropState: DroppableCollectionState,
+  dragHooks: DragHooks,
+  dropHooks: DropHooks,
+  onAction:(key: Key) => void,
   isListDraggable: boolean,
-  layout: ListLayout<T>
+  isListDroppable: boolean,
+  layout: ListLayout<T>,
+  loadingState: LoadingState
 }
 
 export const ListViewContext = React.createContext<ListViewContextValue<unknown>>(null);
@@ -64,7 +64,7 @@ const ROW_HEIGHTS = {
   }
 };
 
-export function useListLayout<T>(state: ListState<T>, density: ListViewProps<T>['density']) {
+function useListLayout<T>(state: ListState<T>, density: SpectrumListProps<T>['density'], allowDisabledKeyFocus: boolean) {
   let {scale} = useProvider();
   let collator = useCollator({usage: 'search', sensitivity: 'base'});
   let isEmpty = state.collection.size === 0;
@@ -73,136 +73,155 @@ export function useListLayout<T>(state: ListState<T>, density: ListViewProps<T>[
       estimatedRowHeight: ROW_HEIGHTS[density][scale],
       padding: 0,
       collator,
-      loaderHeight: isEmpty ? null : ROW_HEIGHTS[density][scale]
+      loaderHeight: isEmpty ? null : ROW_HEIGHTS[density][scale],
+      allowDisabledKeyFocus
     })
-    , [collator, scale, density, isEmpty]);
+    , [collator, scale, density, isEmpty, allowDisabledKeyFocus]);
 
   layout.collection = state.collection;
   layout.disabledKeys = state.disabledKeys;
   return layout;
 }
 
-interface ListViewProps<T> extends CollectionBase<T>, DOMProps, AriaLabelingProps, StyleProps, MultipleSelection, SpectrumSelectionProps, Omit<AsyncLoadable, 'isLoading'> {
-  /**
-   * Sets the amount of vertical padding within each cell.
-   * @default 'regular'
-   */
-  density?: 'compact' | 'regular' | 'spacious',
-  /** Whether the ListView should be displayed with a quiet style. */
-  isQuiet?: boolean,
-  /** The current loading state of the ListView. Determines whether or not the progress circle should be shown. */
-  loadingState?: LoadingState,
-  /** Sets what the ListView should render when there is no content to display. */
-  renderEmptyState?: () => JSX.Element,
-  /**
-   * The duration of animated layout changes, in milliseconds. Used by the Virtualizer.
-   * @default 0
-   */
-  transitionDuration?: number,
-  /**
-   * Handler that is called when a user performs an action on an item. The exact user event depends on
-   * the collection's `selectionBehavior` prop and the interaction modality.
-   */
-  onAction?: (key: string) => void,
-  /**
-   * The drag hooks returned by `useDragHooks` used to enable drag and drop behavior for the ListView. See the
-   * [docs](https://react-spectrum.adobe.com/react-spectrum/useDragHooks.html) for more info.
-   */
-  dragHooks?: DragHooks
-}
-
-function ListView<T extends object>(props: ListViewProps<T>, ref: DOMRef<HTMLDivElement>) {
+function ListView<T extends object>(props: SpectrumListProps<T>, ref: DOMRef<HTMLDivElement>) {
   let {
     density = 'regular',
     onLoadMore,
     loadingState,
     isQuiet,
-    transitionDuration = 0,
+    overflowMode = 'truncate',
     onAction,
-    dragHooks
+    dragHooks,
+    dropHooks,
+    ...otherProps
   } = props;
   let isListDraggable = !!dragHooks;
+  let isListDroppable = !!dropHooks;
   let dragHooksProvided = useRef(isListDraggable);
+  let dropHooksProvided = useRef(isListDroppable);
   if (dragHooksProvided.current !== isListDraggable) {
     console.warn('Drag hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior.');
   }
+  if (dropHooksProvided.current !== isListDroppable) {
+    console.warn('Drop hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior.');
+  }
   let domRef = useDOMRef(ref);
-  let {collection} = useListState(props);
-  let formatMessage = useMessageFormatter(intlMessages);
-  let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
-
-  let {styleProps} = useStyleProps(props);
-  let {direction, locale} = useLocale();
-  let collator = useCollator({usage: 'search', sensitivity: 'base'});
-  let gridCollection = useMemo(() => new GridCollection({
-    columnCount: 1,
-    items: [...collection].map(item => ({
-      ...item,
-      hasChildNodes: true,
-      childNodes: [{
-        key: `cell-${item.key}`,
-        type: 'cell',
-        index: 0,
-        value: null,
-        level: 0,
-        rendered: null,
-        textValue: item.textValue,
-        hasChildNodes: false,
-        childNodes: []
-      }]
-    }))
-  }), [collection]);
-  let state = useGridState({
+  let state = useListState({
     ...props,
-    collection: gridCollection,
-    focusMode: 'cell',
     selectionBehavior: props.selectionStyle === 'highlight' ? 'replace' : 'toggle'
   });
-  let layout = useListLayout(state, props.density || 'regular');
-  let keyboardDelegate = useMemo(() => new GridKeyboardDelegate({
-    collection: state.collection,
-    disabledKeys: state.disabledKeys,
-    ref: domRef,
-    direction,
-    collator,
-    // Focus the ListView cell instead of the row so that focus doesn't change with left/right arrow keys when there aren't any
-    // focusable children in the cell.
-    focusMode: 'cell'
-  }), [state, domRef, direction, collator]);
+  let {collection, selectionManager} = state;
+  let formatMessage = useMessageFormatter(intlMessages);
+  let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
 
-  let provider = useProvider();
+  let {styleProps} = useStyleProps(props);
+  let layout = useListLayout(state, props.density || 'regular', state.selectionManager.disabledBehavior === 'selection');
   let dragState: DraggableCollectionState;
+  let preview = useRef(null);
   if (isListDraggable) {
     dragState = dragHooks.useDraggableCollectionState({
-      collection: state.collection,
-      selectionManager: state.selectionManager,
-      renderPreview(draggingKeys, draggedKey) {
-        let item = state.collection.getItem(draggedKey);
-        let itemCount = draggingKeys.size;
-        let itemHeight = layout.getLayoutInfo(draggedKey).rect.height;
-        return <DragPreview item={item} itemCount={itemCount} itemHeight={itemHeight} provider={provider} locale={locale}  />;
-      }
+      collection,
+      selectionManager,
+      preview
     });
   }
 
-  let {gridProps} = useGrid({
+  let DragPreview = dragHooks?.DragPreview;
+  let dropState: DroppableCollectionState;
+  let droppableCollection: DroppableCollectionResult;
+  let isRootDropTarget: boolean;
+  if (isListDroppable) {
+    dropState = dropHooks.useDroppableCollectionState({
+      collection,
+      selectionManager
+    });
+    droppableCollection = dropHooks.useDroppableCollection({
+      keyboardDelegate: layout,
+      getDropTargetFromPoint(x, y) {
+        let closest = null;
+        let closestDistance = Infinity;
+        let closestDir = null;
+
+        x += domRef.current.scrollLeft;
+        y += domRef.current.scrollTop;
+
+        let visible = layout.getVisibleLayoutInfos(new Rect(x - 50, y - 50, x + 50, y + 50));
+
+        for (let layoutInfo of visible) {
+          let r = layoutInfo.rect;
+          let points: [number, number, string][] = [
+            [r.x, r.y + 4, 'before'],
+            [r.maxX, r.y + 4, 'before'],
+            [r.x, r.maxY - 8, 'after'],
+            [r.maxX, r.maxY - 8, 'after']
+          ];
+
+          for (let [px, py, dir] of points) {
+            let dx = px - x;
+            let dy = py - y;
+            let d = dx * dx + dy * dy;
+            if (d < closestDistance) {
+              closestDistance = d;
+              closest = layoutInfo;
+              closestDir = dir;
+            }
+          }
+
+          // TODO: Best way to implement only for when closest can be dropped on
+          // TODO: Figure out the typescript for this
+          // @ts-ignore
+          if (y >= r.y + 10 && y <= r.maxY - 10 && collection.getItem(closest.key).value.type === 'folder') {
+            closestDir = 'on';
+          }
+        }
+
+        let key = closest?.key;
+        if (key) {
+          return {
+            type: 'item',
+            key,
+            dropPosition: closestDir
+          };
+        }
+      }
+    }, dropState, domRef);
+
+    isRootDropTarget = dropState.isDropTarget({type: 'root'});
+  }
+
+  let {gridProps} = useList({
     ...props,
     isVirtualized: true,
-    keyboardDelegate
+    keyboardDelegate: layout,
+    onAction
   }, state, domRef);
 
   // Sync loading state into the layout.
   layout.isLoading = isLoading;
 
-  let focusedKey = state.selectionManager.focusedKey;
-  let focusedItem = gridCollection.getItem(state.selectionManager.focusedKey);
-  if (focusedItem?.parentKey != null) {
-    focusedKey = focusedItem.parentKey;
+  let focusedKey = selectionManager.focusedKey;
+  if (dropState?.target?.type === 'item') {
+    focusedKey = dropState.target.key;
   }
 
+  // wait for layout to get accurate measurements
+  let [isVerticalScrollbarVisible, setVerticalScollbarVisible] = useState(false);
+  let [isHorizontalScrollbarVisible, setHorizontalScollbarVisible] = useState(false);
+  useLayoutEffect(() => {
+    if (domRef.current) {
+      // 2 is the width of the border which is not part of the box size
+      setVerticalScollbarVisible(domRef.current.clientWidth + 2 < domRef.current.offsetWidth);
+      setHorizontalScollbarVisible(domRef.current.clientHeight + 2 < domRef.current.offsetHeight);
+    }
+  });
+
+  let hasAnyChildren = useMemo(() => [...collection].some(item => item.hasChildNodes), [collection]);
+
   return (
-    <ListViewContext.Provider value={{state, keyboardDelegate, dragState, onAction, isListDraggable, layout}}>
+    <ListViewContext.Provider value={{state, dragState, dropState, dragHooks, dropHooks, onAction, isListDraggable, isListDroppable, layout, loadingState}}>
       <Virtualizer
+        {...mergeProps(isListDroppable && droppableCollection?.collectionProps, gridProps)}
+        {...filterDOMProps(otherProps)}
         {...gridProps}
         {...styleProps}
         isLoading={isLoading}
@@ -218,26 +237,47 @@ function ListView<T extends object>(props: ListViewProps<T>, ref: DOMRef<HTMLDiv
             'react-spectrum-ListView--emphasized',
             {
               'react-spectrum-ListView--quiet': isQuiet,
-              'react-spectrum-ListView--draggable': isListDraggable,
-              'react-spectrum-ListView--loadingMore': loadingState === 'loadingMore'
+              'react-spectrum-ListView--loadingMore': loadingState === 'loadingMore',
+              'react-spectrum-ListView--draggable': !!isListDraggable,
+              'react-spectrum-ListView--dropTarget': !!isRootDropTarget,
+              'react-spectrum-ListView--isVerticalScrollbarVisible': isVerticalScrollbarVisible,
+              'react-spectrum-ListView--isHorizontalScrollbarVisible': isHorizontalScrollbarVisible,
+              'react-spectrum-ListView--hasAnyChildren': hasAnyChildren,
+              'react-spectrum-ListView--wrap': overflowMode === 'wrap'
             },
             styleProps.className
           )
         }
         layout={layout}
-        collection={gridCollection}
-        transitionDuration={transitionDuration}>
+        collection={collection}
+        transitionDuration={isLoading ? 160 : 220}>
         {(type, item) => {
           if (type === 'item') {
             return (
-              <ListViewItem item={item} isEmphasized dragHooks={dragHooks}  />
+              <>
+                {isListDroppable && collection.getKeyBefore(item.key) == null &&
+                  <RootDropIndicator key="root" />
+                }
+                {isListDroppable &&
+                  <InsertionIndicator
+                    key={`${item.key}-before`}
+                    target={{key: item.key, type: 'item', dropPosition: 'before'}} />
+                }
+                <ListViewItem item={item} isEmphasized hasActions={!!onAction} />
+                {isListDroppable &&
+                  <InsertionIndicator
+                    key={`${item.key}-after`}
+                    target={{key: item.key, type: 'item', dropPosition: 'after'}}
+                    isPresentationOnly={collection.getKeyAfter(item.key) !== null} />
+                  }
+              </>
             );
           } else if (type === 'loader') {
             return (
               <CenteredWrapper>
                 <ProgressCircle
                   isIndeterminate
-                  aria-label={state.collection.size > 0 ? formatMessage('loadingMore') : formatMessage('loading')} />
+                  aria-label={collection.size > 0 ? formatMessage('loadingMore') : formatMessage('loading')} />
               </CenteredWrapper>
             );
           } else if (type === 'placeholder') {
@@ -255,6 +295,16 @@ function ListView<T extends object>(props: ListViewProps<T>, ref: DOMRef<HTMLDiv
 
         }}
       </Virtualizer>
+      {DragPreview && isListDraggable &&
+        <DragPreview ref={preview}>
+          {() => {
+            let item = state.collection.getItem(dragState.draggedKey);
+            let itemCount = dragState.draggingKeys.size;
+            let itemHeight = layout.getLayoutInfo(dragState.draggedKey).rect.height;
+            return <SpectrumDragPreview item={item} itemCount={itemCount} itemHeight={itemHeight}  />;
+          }}
+        </DragPreview>
+      }
     </ListViewContext.Provider>
   );
 }
@@ -283,5 +333,5 @@ function CenteredWrapper({children}) {
 /**
  * Lists display a linear collection of data. They allow users to quickly scan, sort, compare, and take action on large amounts of data.
  */
-const _ListView = React.forwardRef(ListView) as <T>(props: ListViewProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;
+const _ListView = React.forwardRef(ListView) as <T>(props: SpectrumListProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;
 export {_ListView as ListView};