@instructure/outcomes-ui 4.0.0 → 4.1.0

package/es/translated/nb/components/Gradebook/dragdrop/CustomDragLayer/index.tsx

@@ -0,0 +1,93 @@
+import React from 'react'
+import DragLayer from 'react-dnd/lib/DragLayer'
+import { DragLayerMonitor } from 'react-dnd'
+import { View } from '@instructure/ui-view'
+import { CELL_HEIGHT, COLUMN_WIDTH } from '@/util/gradebook/constants'
+
+interface DragItem {
+  id: string | number
+  index: number
+  originalIndex: number
+  label?: string
+}
+
+interface CustomDragLayerProps {
+  renderItem?: (item: DragItem) => React.ReactNode
+}
+
+interface CollectedProps {
+  item: DragItem | null
+  currentOffset: {x: number; y: number} | null
+  isDragging: boolean
+}
+
+const getItemStyles = (currentOffset: {x: number; y: number} | null) => {
+  if (!currentOffset) {
+    return {
+      display: 'none',
+    }
+  }
+
+  const {x, y} = currentOffset
+  const transform = `translate(${x}px, ${y}px)`
+
+  return {
+    transform,
+    WebkitTransform: transform,
+    width: COLUMN_WIDTH,
+    height: CELL_HEIGHT,
+  }
+}
+
+const CustomDragLayerComponent: React.FC<CustomDragLayerProps & CollectedProps> = ({
+  renderItem,
+  item,
+  isDragging,
+  currentOffset,
+}) => {
+  if (!isDragging) {
+    return null
+  }
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        pointerEvents: 'none',
+        zIndex: 1000,
+        left: 0,
+        top: 0,
+        width: '100%',
+        height: '100%',
+      }}
+    >
+      <div style={getItemStyles(currentOffset)}>
+        <View
+          as="div"
+          padding="x-small"
+          background="secondary"
+          shadow="resting"
+          style={{
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            boxSizing: 'border-box',
+          }}
+        >
+          {renderItem && item ? renderItem(item) : item?.label || 'Dragging...'}
+        </View>
+      </div>
+    </div>
+  )
+}
+
+export const CustomDragLayer = DragLayer<CustomDragLayerProps, CollectedProps>(
+  (monitor: DragLayerMonitor) => ({
+    item: monitor.getItem(),
+    currentOffset: monitor.getSourceClientOffset(),
+    isDragging: monitor.isDragging(),
+  }),
+)(CustomDragLayerComponent)

package/es/translated/nb/components/Gradebook/dragdrop/DragDropContainer/__tests__/index.test.tsx

@@ -0,0 +1,295 @@
+import React from 'react'
+import type { ConnectDropTarget } from 'react-dnd'
+import { expect } from '@jest/globals'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+let mockIsOver = false
+let mockCanDrop = true
+
+type MockConnectDropTarget = <T>(node: T) => T
+
+interface MockDropConnect {
+  dropTarget: () => MockConnectDropTarget
+}
+
+interface MockDropMonitor {
+  isOver: () => boolean
+  canDrop: () => boolean
+}
+
+type DropCollectFunction = (connect: MockDropConnect, monitor: MockDropMonitor) => Record<string, unknown>
+
+type ReactComponent = React.ComponentType<Record<string, unknown>>
+
+jest.mock('react-dnd', () => {
+  const mockReact = jest.requireActual('react')
+
+  return {
+    DropTarget: jest.fn(
+      (_typeOrTypesFn: unknown, _spec: unknown, collect: unknown) =>
+        (component: ReactComponent) => {
+          const WrappedComponent = (props: Record<string, unknown>) => {
+            const mockConnect: MockDropConnect = {
+              dropTarget: () => <T,>(el: T) => el,
+            }
+            const mockMonitor: MockDropMonitor = {
+              isOver: () => mockIsOver,
+              canDrop: () => mockCanDrop,
+            }
+            const collectedProps = (collect as DropCollectFunction)(mockConnect, mockMonitor)
+            return mockReact.createElement(component, { ...props, ...collectedProps })
+          }
+          return WrappedComponent
+        },
+    ),
+  }
+})
+
+import { DragDropContainer } from '../index'
+
+describe('DragDropContainer', () => {
+  const defaultProps = {
+    type: 'test-type',
+    children: (connectDropTarget: ConnectDropTarget) =>
+      connectDropTarget(<div data-testid="drop-target">Drop Target Content</div>),
+  }
+
+  beforeEach(() => {
+    mockIsOver = false
+    mockCanDrop = true
+    jest.clearAllMocks()
+  })
+
+  it('renders children content', () => {
+    render(<DragDropContainer {...defaultProps} />)
+    expect(screen.getByText('Drop Target Content')).toBeInTheDocument()
+  })
+
+  it('calls children function with connectDropTarget', () => {
+    const childrenSpy = jest.fn().mockReturnValue(<div>Test</div>)
+    render(<DragDropContainer type="test-type">{childrenSpy}</DragDropContainer>)
+    expect(childrenSpy).toHaveBeenCalled()
+    expect(typeof childrenSpy.mock.calls[0][0]).toBe('function')
+  })
+
+  it('does not call onDragLeave on initial render', () => {
+    const onDragLeave = jest.fn()
+    render(<DragDropContainer {...defaultProps} onDragLeave={onDragLeave} />)
+    expect(onDragLeave).not.toHaveBeenCalled()
+  })
+
+  it('does not call onDragLeave when isOver remains false', () => {
+    const onDragLeave = jest.fn()
+    mockIsOver = false
+    const { rerender } = render(<DragDropContainer {...defaultProps} onDragLeave={onDragLeave} />)
+
+    mockIsOver = false
+    rerender(<DragDropContainer {...defaultProps} onDragLeave={onDragLeave} />)
+    expect(onDragLeave).not.toHaveBeenCalled()
+  })
+
+  it('does not call onDragLeave when isOver changes from false to true', () => {
+    const onDragLeave = jest.fn()
+    mockIsOver = false
+    const { rerender } = render(<DragDropContainer {...defaultProps} onDragLeave={onDragLeave} />)
+
+    mockIsOver = true
+    rerender(<DragDropContainer {...defaultProps} onDragLeave={onDragLeave} />)
+    expect(onDragLeave).not.toHaveBeenCalled()
+  })
+
+  it('calls onDragLeave when isOver changes from true to false and canDrop is true', () => {
+    const onDragLeave = jest.fn()
+    mockIsOver = true
+    mockCanDrop = true
+    const { rerender } = render(<DragDropContainer {...defaultProps} onDragLeave={onDragLeave} />)
+
+    expect(onDragLeave).not.toHaveBeenCalled()
+
+    mockIsOver = false
+    rerender(<DragDropContainer {...defaultProps} onDragLeave={onDragLeave} />)
+    expect(onDragLeave).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not call onDragLeave when isOver changes from true to false but canDrop is false', () => {
+    const onDragLeave = jest.fn()
+    mockIsOver = true
+    mockCanDrop = false
+    const { rerender } = render(<DragDropContainer {...defaultProps} onDragLeave={onDragLeave} />)
+
+    mockIsOver = false
+    rerender(<DragDropContainer {...defaultProps} onDragLeave={onDragLeave} />)
+    expect(onDragLeave).not.toHaveBeenCalled()
+  })
+
+  it('handles multiple drag enter and leave cycles', () => {
+    const onDragLeave = jest.fn()
+    mockIsOver = false
+    const { rerender } = render(<DragDropContainer {...defaultProps} onDragLeave={onDragLeave} />)
+
+    // First enter
+    mockIsOver = true
+    rerender(<DragDropContainer {...defaultProps} onDragLeave={onDragLeave} />)
+    expect(onDragLeave).not.toHaveBeenCalled()
+
+    // First leave
+    mockIsOver = false
+    rerender(<DragDropContainer {...defaultProps} onDragLeave={onDragLeave} />)
+    expect(onDragLeave).toHaveBeenCalledTimes(1)
+
+    // Second enter
+    mockIsOver = true
+    rerender(<DragDropContainer {...defaultProps} onDragLeave={onDragLeave} />)
+    expect(onDragLeave).toHaveBeenCalledTimes(1)
+
+    // Second leave
+    mockIsOver = false
+    rerender(<DragDropContainer {...defaultProps} onDragLeave={onDragLeave} />)
+    expect(onDragLeave).toHaveBeenCalledTimes(2)
+  })
+
+  it('works without onDragLeave callback', () => {
+    mockIsOver = true
+    const { rerender } = render(<DragDropContainer {...defaultProps} />)
+
+    expect(() => {
+      mockIsOver = false
+      rerender(<DragDropContainer {...defaultProps} />)
+    }).not.toThrow()
+  })
+
+  it('does not call onDragLeave when isOver stays true', () => {
+    const onDragLeave = jest.fn()
+    mockIsOver = true
+    const { rerender } = render(<DragDropContainer {...defaultProps} onDragLeave={onDragLeave} />)
+
+    mockIsOver = true
+    rerender(<DragDropContainer {...defaultProps} onDragLeave={onDragLeave} />)
+    expect(onDragLeave).not.toHaveBeenCalled()
+  })
+
+  it('handles canDrop changing while not over', () => {
+    const onDragLeave = jest.fn()
+    mockIsOver = false
+    mockCanDrop = true
+    const { rerender } = render(<DragDropContainer {...defaultProps} onDragLeave={onDragLeave} />)
+
+    mockCanDrop = false
+    rerender(<DragDropContainer {...defaultProps} onDragLeave={onDragLeave} />)
+    expect(onDragLeave).not.toHaveBeenCalled()
+  })
+
+  it('handles canDrop changing from false to true while over', () => {
+    const onDragLeave = jest.fn()
+    mockIsOver = true
+    mockCanDrop = false
+    const { rerender } = render(<DragDropContainer {...defaultProps} onDragLeave={onDragLeave} />)
+
+    mockCanDrop = true
+    rerender(<DragDropContainer {...defaultProps} onDragLeave={onDragLeave} />)
+    expect(onDragLeave).not.toHaveBeenCalled()
+  })
+
+  it('calls onDragLeave when leaving after canDrop is true', () => {
+    const onDragLeave = jest.fn()
+    mockIsOver = true
+    mockCanDrop = true
+    const { rerender } = render(<DragDropContainer {...defaultProps} onDragLeave={onDragLeave} />)
+
+    // Stay over with canDrop true
+    mockIsOver = true
+    mockCanDrop = true
+    rerender(<DragDropContainer {...defaultProps} onDragLeave={onDragLeave} />)
+    expect(onDragLeave).not.toHaveBeenCalled()
+
+    // Leave while canDrop is true
+    mockIsOver = false
+    rerender(<DragDropContainer {...defaultProps} onDragLeave={onDragLeave} />)
+    expect(onDragLeave).toHaveBeenCalledTimes(1)
+  })
+
+  it('handles onDragLeave callback changing between renders', () => {
+    const onDragLeave1 = jest.fn()
+    const onDragLeave2 = jest.fn()
+    mockIsOver = true
+    const { rerender } = render(
+      <DragDropContainer {...defaultProps} onDragLeave={onDragLeave1} />,
+    )
+
+    // Change the callback and trigger leave
+    mockIsOver = false
+    rerender(<DragDropContainer {...defaultProps} onDragLeave={onDragLeave2} />)
+
+    // Should call the new callback
+    expect(onDragLeave1).not.toHaveBeenCalled()
+    expect(onDragLeave2).toHaveBeenCalledTimes(1)
+  })
+
+  it('renders complex children correctly', () => {
+    render(
+      <DragDropContainer type="test-type">
+        {(connectDropTarget: ConnectDropTarget) =>
+          connectDropTarget(
+            <div>
+              <span>Complex</span>
+              <div>Content</div>
+            </div>,
+          )
+        }
+      </DragDropContainer>,
+    )
+    expect(screen.getByText('Complex')).toBeInTheDocument()
+    expect(screen.getByText('Content')).toBeInTheDocument()
+  })
+
+  it('preserves prevIsOverRef state across multiple renders', () => {
+    const onDragLeave = jest.fn()
+    mockIsOver = false
+    const { rerender } = render(<DragDropContainer {...defaultProps} onDragLeave={onDragLeave} />)
+
+    // Enter
+    mockIsOver = true
+    rerender(<DragDropContainer {...defaultProps} onDragLeave={onDragLeave} />)
+
+    // Stay over (should not trigger callback)
+    mockIsOver = true
+    rerender(<DragDropContainer {...defaultProps} onDragLeave={onDragLeave} />)
+    expect(onDragLeave).not.toHaveBeenCalled()
+
+    // Leave (should trigger callback once)
+    mockIsOver = false
+    rerender(<DragDropContainer {...defaultProps} onDragLeave={onDragLeave} />)
+    expect(onDragLeave).toHaveBeenCalledTimes(1)
+  })
+
+  it('accepts different drop types', () => {
+    render(
+      <DragDropContainer type="custom-type">
+        {(connectDropTarget: ConnectDropTarget) =>
+          connectDropTarget(<div>Custom Type Content</div>)
+        }
+      </DragDropContainer>,
+    )
+    expect(screen.getByText('Custom Type Content')).toBeInTheDocument()
+  })
+
+  it('renders multiple containers with different types', () => {
+    render(
+      <>
+        <DragDropContainer type="type-1">
+          {(connectDropTarget: ConnectDropTarget) =>
+            connectDropTarget(<div>Container 1</div>)
+          }
+        </DragDropContainer>
+        <DragDropContainer type="type-2">
+          {(connectDropTarget: ConnectDropTarget) =>
+            connectDropTarget(<div>Container 2</div>)
+          }
+        </DragDropContainer>
+      </>,
+    )
+    expect(screen.getByText('Container 1')).toBeInTheDocument()
+    expect(screen.getByText('Container 2')).toBeInTheDocument()
+  })
+})

package/es/translated/nb/components/Gradebook/dragdrop/DragDropContainer/index.tsx

@@ -0,0 +1,46 @@
+import React, { useEffect, useRef } from 'react'
+import { ConnectDropTarget, DropTarget, DropTargetMonitor } from 'react-dnd'
+
+interface OwnProps {
+  type: string
+  children: (connectDropTarget: ConnectDropTarget) => React.ReactNode
+  onDragLeave?: () => void
+}
+
+interface InjectedProps {
+  connectDropTarget: ConnectDropTarget
+  isOver: boolean
+  canDrop: boolean
+}
+
+type Props = OwnProps & InjectedProps
+type ComponentProps = Omit<Props, 'type'>
+
+const Component: React.FC<ComponentProps> = ({
+  children,
+  onDragLeave,
+  connectDropTarget,
+  isOver,
+  canDrop,
+}) => {
+  const prevIsOverRef = useRef<boolean>() // To prevent initial call (isOver is false initially)
+
+  useEffect(() => {
+    if (prevIsOverRef.current === true && isOver === false && canDrop) {
+      onDragLeave?.()
+    }
+    prevIsOverRef.current = isOver
+  }, [isOver, canDrop, onDragLeave])
+
+  return <>{children(connectDropTarget)}</>
+}
+
+export const DragDropContainer = DropTarget(
+  (props: Props) => props.type,
+  {},
+  (connect, monitor: DropTargetMonitor) => ({
+    connectDropTarget: connect.dropTarget(),
+    isOver: monitor.isOver({shallow: false}),
+    canDrop: monitor.canDrop(),
+  }),
+)(Component) as unknown as React.ComponentType<OwnProps>