Function DragPreview

packages/@react-spectrum/s2/src/DragPreview.tsx:153–193

(props: DragPreviewProps)

 * contents, use Text with the "label" and "description" slots and/or a Icon for the leading icon.
 */
export function DragPreview(props: DragPreviewProps) {
  let {items, overflowMode} = props;
  let isDraggingMultiple = items.length > 1;
  let itemLabel = items[0]?.['text/plain'] ?? '';
  let scale = useScale();

  return (
    <div className={dragPreviewWrapper}>
      {isDraggingMultiple && <div className={dragPreviewCardBack} />}
      <div className={dragPreviewCard({scale})}>
        <Provider
          values={[
            [
              TextContext,
              {
                slots: {
                  [DEFAULT_SLOT]: {styles: label({overflowMode})},
                  label: {styles: label({overflowMode})},
                  description: {styles: description({overflowMode})}
                }
              }
            ],
            [
              IconContext,
              {
                slots: {
                  icon: {
                    render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),
                    styles: icon
                  }
                }
              }
            ]
          ]}>
          {props.children ?? <Text>{itemLabel}</Text>}
          {isDraggingMultiple && <div className={dragPreviewBadge}>{items.length}</div>}
        </Provider>
      </div>
    </div>
  );
}