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

package/src/ListView.tsx

@@ -9,9 +9,22 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import {AriaLabelingProps, CollectionBase, DOMProps, DOMRef, StyleProps} from '@react-types/shared';
+import {
+  AriaLabelingProps,
+  AsyncLoadable,
+  CollectionBase,
+  DOMProps,
+  DOMRef,
+  LoadingState,
+  MultipleSelection,
+  SpectrumSelectionProps,
+  StyleProps
+} from '@react-types/shared';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {GridCollection, useGridState} from '@react-stately/grid';
+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';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -20,71 +33,158 @@ import {ListState, useListState} from '@react-stately/list';
 import listStyles from './listview.css';
 import {ListViewItem} from './ListViewItem';
 import {ProgressCircle} from '@react-spectrum/progress';
-import React, {ReactElement, useContext, useMemo} from 'react';
+import React, {ReactElement, useContext, useMemo, useRef} from 'react';
 import {useCollator, useLocale, useMessageFormatter} from '@react-aria/i18n';
 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>>,
+  dragState: DraggableCollectionState,
+  onAction:(key: string) => void,
+  isListDraggable: boolean,
+  layout: ListLayout<T>
+}
+
+export const ListViewContext = React.createContext<ListViewContextValue<unknown>>(null);
 
-export const ListViewContext = React.createContext(null);
+const ROW_HEIGHTS = {
+  compact: {
+    medium: 32,
+    large: 40
+  },
+  regular: {
+    medium: 40,
+    large: 50
+  },
+  spacious: {
+    medium: 48,
+    large: 60
+  }
+};
 
-export function useListLayout<T>(state: ListState<T>) {
+export function useListLayout<T>(state: ListState<T>, density: ListViewProps<T>['density']) {
   let {scale} = useProvider();
   let collator = useCollator({usage: 'search', sensitivity: 'base'});
+  let isEmpty = state.collection.size === 0;
   let layout = useMemo(() =>
-      new ListLayout<T>({
-        estimatedRowHeight: scale === 'large' ? 48 : 32,
-        padding: 0,
-        collator
-      })
-    , [collator, scale]);
+    new ListLayout<T>({
+      estimatedRowHeight: ROW_HEIGHTS[density][scale],
+      padding: 0,
+      collator,
+      loaderHeight: isEmpty ? null : ROW_HEIGHTS[density][scale]
+    })
+    , [collator, scale, density, isEmpty]);
 
   layout.collection = state.collection;
   layout.disabledKeys = state.disabledKeys;
   return layout;
 }
 
-interface ListViewProps<T> extends CollectionBase<T>, DOMProps, AriaLabelingProps, StyleProps {
-  isLoading?: boolean,
+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,
-  transitionDuration?: number
+  /**
+   * 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>) {
   let {
-    transitionDuration = 0
+    density = 'regular',
+    onLoadMore,
+    loadingState,
+    isQuiet,
+    transitionDuration = 0,
+    onAction,
+    dragHooks
   } = props;
+  let isListDraggable = !!dragHooks;
+  let dragHooksProvided = useRef(isListDraggable);
+  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.');
+  }
   let domRef = useDOMRef(ref);
   let {collection} = useListState(props);
   let formatMessage = useMessageFormatter(intlMessages);
+  let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
 
   let {styleProps} = useStyleProps(props);
-  let {direction} = useLocale();
+  let {direction, locale} = useLocale();
   let collator = useCollator({usage: 'search', sensitivity: 'base'});
   let gridCollection = useMemo(() => new GridCollection({
     columnCount: 1,
     items: [...collection].map(item => ({
-      type: 'item',
+      ...item,
+      hasChildNodes: true,
       childNodes: [{
-        ...item,
+        key: `cell-${item.key}`,
+        type: 'cell',
         index: 0,
-        type: 'cell'
+        value: null,
+        level: 0,
+        rendered: null,
+        textValue: item.textValue,
+        hasChildNodes: false,
+        childNodes: []
       }]
     }))
   }), [collection]);
   let state = useGridState({
     ...props,
-    collection: gridCollection
+    collection: gridCollection,
+    focusMode: 'cell',
+    selectionBehavior: props.selectionStyle === 'highlight' ? 'replace' : 'toggle'
   });
-  let layout = useListLayout(state);
+  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 provider = useProvider();
+  let dragState: DraggableCollectionState;
+  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}  />;
+      }
+    });
+  }
+
   let {gridProps} = useGrid({
     ...props,
     isVirtualized: true,
@@ -92,31 +192,45 @@ function ListView<T extends object>(props: ListViewProps<T>, ref: DOMRef<HTMLDiv
   }, state, domRef);
 
   // Sync loading state into the layout.
-  layout.isLoading = props.isLoading;
+  layout.isLoading = isLoading;
+
+  let focusedKey = state.selectionManager.focusedKey;
+  let focusedItem = gridCollection.getItem(state.selectionManager.focusedKey);
+  if (focusedItem?.parentKey != null) {
+    focusedKey = focusedItem.parentKey;
+  }
 
   return (
-    <ListViewContext.Provider value={{state, keyboardDelegate}}>
+    <ListViewContext.Provider value={{state, keyboardDelegate, dragState, onAction, isListDraggable, layout}}>
       <Virtualizer
         {...gridProps}
         {...styleProps}
+        isLoading={isLoading}
+        onLoadMore={onLoadMore}
         ref={domRef}
-        focusedKey={state.selectionManager.focusedKey}
-        sizeToFit="height"
+        focusedKey={focusedKey}
         scrollDirection="vertical"
         className={
           classNames(
             listStyles,
             'react-spectrum-ListView',
+            `react-spectrum-ListView--${density}`,
+            'react-spectrum-ListView--emphasized',
+            {
+              'react-spectrum-ListView--quiet': isQuiet,
+              'react-spectrum-ListView--draggable': isListDraggable,
+              'react-spectrum-ListView--loadingMore': loadingState === 'loadingMore'
+            },
             styleProps.className
           )
         }
         layout={layout}
-        collection={collection}
+        collection={gridCollection}
         transitionDuration={transitionDuration}>
         {(type, item) => {
           if (type === 'item') {
             return (
-              <ListViewItem item={item} />
+              <ListViewItem item={item} isEmphasized dragHooks={dragHooks}  />
             );
           } else if (type === 'loader') {
             return (
@@ -145,14 +259,20 @@ function ListView<T extends object>(props: ListViewProps<T>, ref: DOMRef<HTMLDiv
   );
 }
 
-
 function CenteredWrapper({children}) {
   let {state} = useContext(ListViewContext);
   return (
     <div
       role="row"
       aria-rowindex={state.collection.size + 1}
-      className={classNames(listStyles, 'react-spectrum-ListView-centeredWrapper')}>
+      className={
+        classNames(
+          listStyles,
+          'react-spectrum-ListView-centeredWrapper',
+          {
+            'react-spectrum-ListView-centeredWrapper--loadingMore': state.collection.size > 0
+          }
+        )}>
       <div role="gridcell">
         {children}
       </div>
@@ -160,5 +280,8 @@ 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;
 export {_ListView as ListView};

package/src/ListViewItem.tsx

@@ -9,60 +9,192 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import {classNames} from '@react-spectrum/utils';
+import {Checkbox} from '@react-spectrum/checkbox';
+import ChevronLeftMedium from '@spectrum-icons/ui/ChevronLeftMedium';
+import ChevronRightMedium from '@spectrum-icons/ui/ChevronRightMedium';
+import {classNames, ClearSlots, SlotProvider} from '@react-spectrum/utils';
+import {Content} from '@react-spectrum/view';
+import type {DraggableItemResult} from '@react-aria/dnd';
+import {FocusRing, useFocusRing} from '@react-aria/focus';
+import {Grid} from '@react-spectrum/layout';
+import ListGripper from '@spectrum-icons/ui/ListGripper';
 import listStyles from './listview.css';
 import {ListViewContext} from './ListView';
 import {mergeProps} from '@react-aria/utils';
 import React, {useContext, useRef} from 'react';
-import {useFocusRing} from '@react-aria/focus';
-import {useGridCell, useGridRow} from '@react-aria/grid';
-import {useHover} from '@react-aria/interactions';
-
+import {useButton} from '@react-aria/button';
+import {useGridCell, useGridRow, useGridSelectionCheckbox} from '@react-aria/grid';
+import {useHover, usePress} from '@react-aria/interactions';
+import {useLocale} from '@react-aria/i18n';
+import {useVisuallyHidden} from '@react-aria/visually-hidden';
 
 export function ListViewItem(props) {
   let {
-    item
+    item,
+    isEmphasized,
+    dragHooks
   } = props;
-  let {state} = useContext(ListViewContext);
-  let ref = useRef<HTMLDivElement>();
+  let cellNode = [...item.childNodes][0];
+  let {state, dragState, onAction, isListDraggable, layout} = useContext(ListViewContext);
+
+  let {direction} = useLocale();
+  let rowRef = useRef<HTMLDivElement>();
+  let cellRef =  useRef<HTMLDivElement>();
   let {
     isFocusVisible: isFocusVisibleWithin,
     focusProps: focusWithinProps
   } = useFocusRing({within: true});
   let {isFocusVisible, focusProps} = useFocusRing();
-  let {hoverProps, isHovered} = useHover({});
+  let allowsInteraction = state.selectionManager.selectionMode !== 'none' || onAction;
+  let isDisabled = !allowsInteraction || state.disabledKeys.has(item.key);
+  let isDraggable = dragState?.isDraggable(item.key) && !isDisabled;
+  let {hoverProps, isHovered} = useHover({isDisabled});
+  let {pressProps, isPressed} = usePress({isDisabled});
   let {rowProps} = useGridRow({
     node: item,
-    isVirtualized: true
-  }, state, ref);
+    isVirtualized: true,
+    onAction: onAction ? () => onAction(item.key) : undefined,
+    shouldSelectOnPressUp: isListDraggable
+  }, state, rowRef);
   let {gridCellProps} = useGridCell({
-    node: item,
+    node: cellNode,
     focusMode: 'cell'
-  }, state, ref);
+  }, state, cellRef);
+  let draggableItem: DraggableItemResult;
+  if (isListDraggable) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    draggableItem = dragHooks.useDraggableItem({key: item.key}, dragState);
+  }
   const mergedProps = mergeProps(
     gridCellProps,
     hoverProps,
     focusWithinProps,
     focusProps
   );
+  let {checkboxProps} = useGridSelectionCheckbox({...props, key: item.key}, state);
+
+  let dragButtonRef = React.useRef();
+  let {buttonProps} = useButton({
+    ...draggableItem?.dragButtonProps,
+    elementType: 'div'
+  }, dragButtonRef);
+
+  let chevron = null;
+  if (item.props.hasChildItems) {
+    chevron = direction === 'ltr'
+      ? (
+        <ChevronRightMedium
+          aria-hidden="true"
+          UNSAFE_className={listStyles['react-spectrum-ListViewItem-parentIndicator']} />
+      )
+      : (
+        <ChevronLeftMedium
+          aria-hidden="true"
+          UNSAFE_className={listStyles['react-spectrum-ListViewItem-parentIndicator']} />
+      );
+  }
+
+  let showCheckbox = state.selectionManager.selectionMode !== 'none' && state.selectionManager.selectionBehavior === 'toggle';
+  let isSelected = state.selectionManager.isSelected(item.key);
+  let showDragHandle = isDraggable && isFocusVisibleWithin;
+  let {visuallyHiddenProps} = useVisuallyHidden();
+  let isFirstRow = item.prevKey == null;
+  let isLastRow = item.nextKey == null;
+  // Figure out if the ListView content is equal or greater in height to the container. If so, we'll need to round the bottom
+  // border corners of the last row when selected and we can get rid of the bottom border if it isn't selected to avoid border overlap
+  // with bottom border
+  let isFlushWithContainerBottom = false;
+  if (isLastRow) {
+    if (layout.getContentSize()?.height >= layout.virtualizer?.getVisibleRect().height) {
+      isFlushWithContainerBottom = true;
+    }
+  }
 
   return (
-    <div {...rowProps}>
+    <div
+      {...mergeProps(rowProps, pressProps, isDraggable && draggableItem?.dragProps)}
+      className={
+        classNames(
+          listStyles,
+          'react-spectrum-ListView-row',
+          {
+            'focus-ring': isFocusVisible
+          }
+        )
+      }
+      ref={rowRef}>
       <div
         className={
           classNames(
             listStyles,
             'react-spectrum-ListViewItem',
             {
+              'is-active': isPressed,
               'is-focused': isFocusVisibleWithin,
               'focus-ring': isFocusVisible,
-              'is-hovered': isHovered
+              'is-hovered': isHovered,
+              'is-selected': isSelected,
+              'is-next-selected': state.selectionManager.isSelected(item.nextKey),
+              'react-spectrum-ListViewItem--highlightSelection': state.selectionManager.selectionBehavior === 'replace' && (isSelected || state.selectionManager.isSelected(item.nextKey)),
+              'react-spectrum-ListViewItem--draggable': isDraggable,
+              'react-spectrum-ListViewItem--firstRow': isFirstRow,
+              'react-spectrum-ListViewItem--lastRow': isLastRow,
+              'react-spectrum-ListViewItem--isFlushBottom': isFlushWithContainerBottom
             }
           )
         }
-        ref={ref}
+        ref={cellRef}
         {...mergedProps}>
-        {item.rendered}
+        <Grid UNSAFE_className={listStyles['react-spectrum-ListViewItem-grid']}>
+          {isListDraggable &&
+            <div className={listStyles['react-spectrum-ListViewItem-draghandle-container']}>
+              {isDraggable &&
+                <FocusRing focusRingClass={classNames(listStyles, 'focus-ring')}>
+                  <div
+                    {...buttonProps as React.HTMLAttributes<HTMLElement>}
+                    className={
+                      classNames(
+                        listStyles,
+                        'react-spectrum-ListViewItem-draghandle-button'
+                      )
+                    }
+                    style={!showDragHandle ? {...visuallyHiddenProps.style} : {}}
+                    ref={dragButtonRef}
+                    draggable="true">
+                    <ListGripper />
+                  </div>
+                </FocusRing>
+              }
+            </div>
+          }
+          {showCheckbox &&
+            <Checkbox
+              UNSAFE_className={listStyles['react-spectrum-ListViewItem-checkbox']}
+              {...checkboxProps}
+              isEmphasized={isEmphasized} />
+          }
+          <SlotProvider
+            slots={{
+              content: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-content']},
+              text: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-content']},
+              description: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-description']},
+              icon: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-icon'], size: 'M'},
+              image: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-image']},
+              link: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-content'], isQuiet: true},
+              actionButton: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-actions'], isQuiet: true},
+              actionGroup: {
+                UNSAFE_className: listStyles['react-spectrum-ListViewItem-actions'],
+                isQuiet: true,
+                density: 'compact'
+              },
+              actionMenu: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-actionmenu'], isQuiet: true}
+            }}>
+            {typeof item.rendered === 'string' ? <Content>{item.rendered}</Content> : item.rendered}
+            <ClearSlots>
+              {chevron}
+            </ClearSlots>
+          </SlotProvider>
+        </Grid>
       </div>
     </div>
   );