@react-spectrum/card 3.0.0-alpha.33 → 3.0.0-alpha.35

package/src/CardView.tsx

@@ -47,7 +47,6 @@ function CardView<T extends object>(props: SpectrumCardViewProps<T>, ref: DOMRef
   let cardViewLayout = useMemo(() => typeof layout === 'function' ? new layout({collator, cardOrientation, scale}) : layout, [layout, collator, cardOrientation, scale]);
   let layoutType = cardViewLayout.layoutType;
 
-  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/card');
   let {direction} = useLocale();
   let {collection} = useListState(props);
 
@@ -79,8 +78,6 @@ function CardView<T extends object>(props: SpectrumCardViewProps<T>, ref: DOMRef
 
   cardViewLayout.collection = gridCollection;
   cardViewLayout.disabledKeys = state.disabledKeys;
-  cardViewLayout.isLoading = isLoading;
-  cardViewLayout.direction = direction;
 
   let {gridProps} = useGrid({
     ...props,
@@ -89,7 +86,7 @@ function CardView<T extends object>(props: SpectrumCardViewProps<T>, ref: DOMRef
   }, state, domRef);
 
   type View = ReusableView<Node<T>, ReactNode>;
-  let renderWrapper = (parent: View, reusableView: View) => (
+  let renderWrapper = useCallback((parent: View, reusableView: View) => (
     <VirtualizerItem
       key={reusableView.key}
       layoutInfo={reusableView.layoutInfo}
@@ -97,7 +94,7 @@ function CardView<T extends object>(props: SpectrumCardViewProps<T>, ref: DOMRef
       parent={parent?.layoutInfo}>
       {reusableView.rendered}
     </VirtualizerItem>
-  );
+  ), []);
 
   let focusedKey = state.selectionManager.focusedKey;
   let focusedItem = gridCollection.getItem(state.selectionManager.focusedKey);
@@ -105,64 +102,71 @@ function CardView<T extends object>(props: SpectrumCardViewProps<T>, ref: DOMRef
     focusedKey = focusedItem.parentKey;
   }
 
-  let margin = cardViewLayout.margin || 0;
-  let virtualizer = cardViewLayout.virtualizer;
-  let scrollToItem = useCallback((key) => {
-    virtualizer && virtualizer.scrollToItem(key, {
-      duration: 0,
-      offsetY: margin
-    });
-  }, [margin, virtualizer]);
+  let persistedKeys = useMemo(() => focusedKey != null ? new Set([focusedKey]) : null, [focusedKey]);
 
   // TODO: does aria-row count and aria-col count need to be modified? Perhaps aria-col count needs to be omitted
   return (
-    <CardViewContext.Provider value={{state, isQuiet, layout: cardViewLayout, cardOrientation}}>
+    <CardViewContext.Provider value={{state, isQuiet, layout: cardViewLayout, cardOrientation, renderEmptyState}}>
       <Virtualizer
         {...gridProps}
         {...styleProps}
         className={classNames(styles, 'spectrum-CardView')}
         ref={domRef}
-        focusedKey={focusedKey}
+        persistedKeys={persistedKeys}
         scrollDirection="vertical"
         layout={cardViewLayout}
         collection={gridCollection}
         isLoading={isLoading}
         onLoadMore={onLoadMore}
+        layoutOptions={useMemo(() => ({isLoading, direction}), [isLoading, direction])}
         renderWrapper={renderWrapper}
-        transitionDuration={isLoading ? 160 : 220}
-        scrollToItem={scrollToItem}>
-        {(type, item) => {
+        style={{
+          ...styleProps.style,
+          scrollPaddingTop: cardViewLayout.margin || 0
+        }}>
+        {useCallback((type, item) => {
           if (type === 'item') {
             return (
               <InternalCard item={item} />
             );
           } else if (type === 'loader') {
-            return (
-              <CenteredWrapper>
-                <ProgressCircle
-                  isIndeterminate
-                  aria-label={state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading')} />
-              </CenteredWrapper>
-            );
+            return <LoadingState />;
           } else if (type === 'placeholder') {
-            let emptyState = renderEmptyState ? renderEmptyState() : null;
-            if (emptyState == null) {
-              return null;
-            }
-
-            return (
-              <CenteredWrapper>
-                {emptyState}
-              </CenteredWrapper>
-            );
+            return <EmptyState />;
           }
-        }}
+        }, [])}
       </Virtualizer>
     </CardViewContext.Provider>
 
   );
 }
 
+function LoadingState() {
+  let {state} = useCardViewContext();
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/card');
+  return (
+    <CenteredWrapper>
+      <ProgressCircle
+        isIndeterminate
+        aria-label={state.collection.size > 0 ? stringFormatter.format('loadingMore') : stringFormatter.format('loading')} />
+    </CenteredWrapper>
+  );
+}
+
+function EmptyState() {
+  let {renderEmptyState} = useCardViewContext();
+  let emptyState = renderEmptyState ? renderEmptyState() : null;
+  if (emptyState == null) {
+    return null;
+  }
+
+  return (
+    <CenteredWrapper>
+      {emptyState}
+    </CenteredWrapper>
+  );
+}
+
 function CenteredWrapper({children}) {
   let {state} = useCardViewContext();
   return (
@@ -185,8 +189,8 @@ function InternalCard(props) {
   let {state, cardOrientation, isQuiet, layout} = useCardViewContext();
 
   let layoutType = layout.layoutType;
-  let rowRef = useRef();
-  let cellRef = useRef<DOMRefValue<HTMLDivElement>>();
+  let rowRef = useRef(undefined);
+  let cellRef = useRef<DOMRefValue<HTMLDivElement>>(undefined);
   let unwrappedRef = useUnwrapDOMRef(cellRef);
 
   let {rowProps: gridRowProps} = useGridRow({

package/src/GridLayout.tsx

@@ -130,41 +130,6 @@ export class GridLayout<T> extends BaseLayout<T> {
     );
   }
 
-  getVisibleLayoutInfos(rect) {
-    let res: LayoutInfo[] = [];
-    let numItems = this.collection.size;
-    if (numItems <= 0 || !this.itemSize) {
-      // If there aren't any items in the collection, we are in a loader/placeholder state. Return those layoutInfos as
-      // the currently visible items
-      if (this.layoutInfos.size > 0) {
-        for (let layoutInfo of this.layoutInfos.values()) {
-          if (this.isVisible(layoutInfo, rect)) {
-            res.push(layoutInfo);
-          }
-        }
-      }
-    } else {
-      // The approach from v2 uses indexes where other v3 layouts iterate through every node/root node. This feels more efficient
-      let firstVisibleItem = this.getIndexAtPoint(rect.x, rect.y);
-      let lastVisibleItem = this.getIndexAtPoint(rect.maxX, rect.maxY);
-      for (let index = firstVisibleItem; index <= lastVisibleItem; index++) {
-        let keyFromIndex = this.collection.rows[index].key;
-        let layoutInfo = this.layoutInfos.get(keyFromIndex);
-        if (layoutInfo && this.isVisible(layoutInfo, rect)) {
-          res.push(layoutInfo);
-        }
-      }
-
-      // Check if loader is in view and add to res if so
-      let loader = this.layoutInfos.get('loader');
-      if (loader && this.isVisible(loader, rect)) {
-        res.push(loader);
-      }
-    }
-
-    return res;
-  }
-
   buildCollection() {
     let visibleWidth = this.virtualizer.visibleRect.width;
     let visibleHeight = this.virtualizer.visibleRect.height;

package/src/WaterfallLayout.tsx

@@ -13,7 +13,7 @@
 import {BaseLayout, BaseLayoutOptions} from './BaseLayout';
 import {getChildNodes, getFirstItem} from '@react-stately/collections';
 import {InvalidationContext, LayoutInfo, Rect, Size} from '@react-stately/virtualizer';
-import {Key, KeyboardDelegate, Node} from '@react-types/shared';
+import {Key, KeyboardDelegate} from '@react-types/shared';
 
 export interface WaterfallLayoutOptions extends BaseLayoutOptions {
   /**
@@ -69,7 +69,7 @@ export class WaterfallLayout<T> extends BaseLayout<T> implements KeyboardDelegat
     return 'waterfall';
   }
 
-  buildCollection(invalidationContext: InvalidationContext<Node<T>, unknown>) {
+  buildCollection(invalidationContext: InvalidationContext) {
     // Compute the number of columns needed to display the content
     let visibleWidth = this.virtualizer.visibleRect.width;
     let availableWidth = visibleWidth - this.margin * 2;