@codeleap/web 6.2.3 → 6.8.0

package/src/components/VirtualList/list.tsx

@@ -1,85 +0,0 @@
-import { useVirtualListContext } from './context'
-import React, { useCallback, useEffect, useMemo } from 'react'
-import { VirtualItem } from '@tanstack/react-virtual'
-import { EmptyPlaceholder } from '../EmptyPlaceholder'
-import { VirtualListItemsProps, VirtualListContainerProps } from './types'
-
-export function VirtualListItems<T>(props: VirtualListItemsProps<T>) {
-  const { renderItem: Item, ListFooterComponent = () => null } = props
-
-  const virtualizer = useVirtualListContext(v => v.virtualizer)
-  const listItems = useVirtualListContext(v => v.list.data)
-  const paginationIndicatorIndex = useVirtualListContext(v => v.paginationIndicatorIndex)
-  const getNextPage = useVirtualListContext(v => v.loadNextPage)
-
-  const items = virtualizer.getVirtualItems()
-
-  useEffect(() => {
-    getNextPage()
-  }, [getNextPage])
-
-  const ItemWrapper = useCallback((props: React.PropsWithChildren<{ item: VirtualItem }>) => {
-    const { item, children } = props
-    
-    return <div
-      style={{
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        transform: `translateY(${item.start}px)`,
-      }}
-      ref={virtualizer.measureElement}
-      data-index={item.index}
-    >
-      {children}
-    </div>
-  }, [virtualizer.measureElement])
-
-  const renderItem = useCallback((item: VirtualItem) => {
-    const data = listItems[item.index]
-
-    const isPaginationIndicator = item.index === paginationIndicatorIndex
-
-    if (isPaginationIndicator) {
-      return <ItemWrapper key={item.key} item={item}>
-        <ListFooterComponent />
-      </ItemWrapper>
-    }
-
-    return <ItemWrapper key={item.key} item={item}>
-      <Item index={item.index} item={data} />
-    </ItemWrapper>
-
-  }, [Item, ItemWrapper, listItems, ListFooterComponent, paginationIndicatorIndex])
-
-  const containerStyle = useMemo(() => ({
-    height: `${virtualizer.getTotalSize()}px`,
-    width: '100%',
-    position: 'relative' as const,
-  }), [virtualizer.getTotalSize()])
-
-  return <div style={containerStyle}>
-    {items.map(renderItem)}
-  </div>
-}
-
-export const VirtualListContainer = (props: VirtualListContainerProps) => {
-  const { children, placeholder, ...rest } = props
-
-  const scrollRef = useVirtualListContext(ctx => ctx.scrollRef)
-
-  const totalItemCount = useVirtualListContext(ctx => ctx.list?.data?.length)
-
-  if (!totalItemCount || totalItemCount <= 0) {
-    if (React.isValidElement(placeholder)) {
-      return <>{placeholder}</>
-    }
-
-    return <EmptyPlaceholder {...placeholder} />
-  }
-
-  return <div ref={scrollRef} {...rest}>
-    {children}
-  </div>
-}

package/src/components/VirtualList/types.ts

@@ -1,38 +0,0 @@
-import { PartialKeys, Virtualizer, VirtualizerOptions } from '@tanstack/react-virtual'
-import { ReactElement } from 'react'
-import { AnyFunction, PropsOf } from '@codeleap/types'
-import { EmptyPlaceholder } from '../EmptyPlaceholder'
-
-type VirtualListItem<T> = {
-  item: T
-  index: number
-}
-
-type VirtualOptions = PartialKeys<VirtualizerOptions<HTMLDivElement, Element>, "observeElementRect" | "observeElementOffset" | "scrollToFn">
-
-export type VirtualListProps<T> = Partial<Omit<VirtualOptions, 'estimateSize' | 'data'>> & {
-  data: T[]
-  fetchNextPage?: AnyFunction
-  isFetchingNextPage?: boolean
-  hasNextPage?: boolean
-  estimateSize?: (item: T) => number
-}
-
-export type VirtualListContextValue<T> = {
-  virtualizer: Virtualizer<HTMLDivElement, Element>
-  scrollRef: React.RefObject<HTMLDivElement>
-  loadNextPage: () => void
-  list: Pick<VirtualListProps<T>, 'data' | 'fetchNextPage' | 'isFetchingNextPage' | 'hasNextPage'>
-  virtualizerItemCount: number
-  paginationIndicatorIndex: number | null
-  lastItemIndex: number
-}
-
-export type VirtualListItemsProps<T> = {
-  renderItem: (data: VirtualListItem<T>) => ReactElement
-  ListFooterComponent?: () => ReactElement
-}
-
-export type VirtualListContainerProps = React.PropsWithChildren<React.ComponentPropsWithoutRef<'div'>> & {
-  placeholder?: ReactElement | Partial<PropsOf<typeof EmptyPlaceholder>>
-}

package/src/lib/hooks/useCropPicker.ts

@@ -1,192 +0,0 @@
-import {
-  useBooleanToggle,
-  useCallback,
-  useImperativeHandle,
-  usePromise,
-  useRef,
-  useState,
-} from '@codeleap/hooks'
-import { WebInputFile } from '@codeleap/types'
-import { ImageReading } from '../../components/CropPicker'
-import { FileInputProps, FileInputRef } from '../../components/FileInput'
-import { Crop, ReactCropProps } from 'react-image-crop'
-
-export type UseCropPickerProps = Partial<ReactCropProps> & {
-  onFileSelect: FileInputProps['onFileSelect']
-  ref: React.MutableRefObject<FileInputRef> | React.Ref<FileInputRef>
-}
-
-type ImageType = 'png' | 'jpeg' | 'webp'
-
-export function readImage(file: File | Blob): Promise<ImageReading> {
-  const reader = new FileReader()
-  return new Promise<ImageReading>((resolve) => {
-    reader.onload = () => {
-      const image = new Image()
-      image.onload = () => resolve(image)
-      image.src = reader.result as string
-    }
-    reader.readAsDataURL(file)
-  })
-}
-
-export function cropImage(image: ImageReading, crop: Crop, type: ImageType): Promise<[string, Blob]> {
-  const canvas = document.createElement('canvas')
-  const ctx = canvas.getContext('2d', { alpha: true })
-
-  if (!ctx) throw new Error('No 2d context')
-
-  canvas.width = image.naturalWidth * (crop.width / 100)
-  canvas.height = image.naturalHeight * (crop.height / 100)
-
-  const x = image.naturalWidth * (crop.x / 100)
-  const y = image.naturalHeight * (crop.y / 100)
-
-  ctx.drawImage(
-    image,
-    x,
-    y,
-    canvas.width,
-    canvas.height,
-    0,
-    0,
-    canvas.width,
-    canvas.height,
-  )
-
-  return new Promise<[string, Blob]>((resolve, reject) => {
-    canvas.toBlob(blob => {
-      if (!blob) {
-        reject(new Error('Canvas is empty'))
-        return
-      }
-      readImage(blob).then(cropped => {
-        resolve([cropped.src, blob])
-      }).catch(reject)
-    }, `image/${type}`)
-  })
-}
-
-export function useCropPicker({
-  onFileSelect,
-  ref,
-  aspect,
-  minWidth: minW,
-  minHeight: minH,
-}: UseCropPickerProps) {
-  const [visible, toggle] = useBooleanToggle(false)
-  const [image, setImage] = useState<ImageReading>(null)
-  const [crop, setCrop] = useState<Crop>()
-  const [relativeCrop, setRelativeCrop] = useState<Crop>()
-  const [isLoading, setIsLoading] = useState(false)
-  const croppedPromise = usePromise<WebInputFile[]>({})
-
-  const onCancel = () => croppedPromise.resolve([])
-
-  const onResolved = (files: WebInputFile[]) => {
-    croppedPromise.resolve?.(files)
-    onFileSelect?.(files)
-  }
-
-  const cleanup = () => {
-    toggle()
-    setRelativeCrop(null)
-    setCrop(undefined)
-    setTimeout(() => setImage(null), 500)
-  }
-
-  const onConfirmCrop = async (imageType: ImageType = 'jpeg') => {
-    setIsLoading(true)
-    const [preview, croppedFile] = await cropImage(image, relativeCrop, imageType)
-    onResolved([
-      {
-        file: new File([croppedFile], 'cropped.jpg'),
-        preview,
-      },
-    ])
-    setIsLoading(false)
-    setTimeout(() => cleanup())
-  }
-
-  const onFilesReturned = async (
-    event: React.ChangeEvent<HTMLInputElement>,
-  ) => {
-    const file = event?.target?.files?.[0]
-    const imageData = await readImage(file)
-    const { naturalWidth, naturalHeight } = imageData
-    const imageAspect = naturalWidth / naturalHeight
-    const v =
-        imageAspect >= aspect
-          ? {
-            width: ((naturalHeight * aspect) / naturalWidth) * 100,
-            height: 100,
-          }
-          : {
-            width: 100,
-            height: (naturalWidth / aspect / naturalHeight) * 100,
-          }
-    const initialCrop: Crop = {
-      ...v,
-      x: (100 - v.width) / 2,
-      y: (100 - v.height) / 2,
-      unit: '%',
-    }
-    setCrop(initialCrop)
-    setRelativeCrop(initialCrop)
-    setImage(imageData)
-    setTimeout(() => toggle())
-  }
-
-  const onClose = () => {
-    onCancel()
-    setTimeout(() => cleanup())
-  }
-
-  const fileInputRef = useRef<FileInputRef>(null)
-
-  useImperativeHandle(ref, () => ({
-    openFilePicker: () => {
-      fileInputRef.current.openFilePicker()
-      return croppedPromise._await()
-    },
-    clear: () => {
-      fileInputRef.current.clear()
-      return croppedPromise._await()
-    },
-  }))
-
-  const minWidth = (minW ?? 100) * aspect
-  const minHeight = minH ?? 100
-
-  const handleCropChange = useCallback(
-    (newCrop: Crop) => {
-      setCrop({
-        ...newCrop,
-        width: newCrop.width < minWidth ? minWidth : newCrop.width,
-        height: newCrop.height < minHeight ? minHeight : newCrop.height,
-      })
-    },
-    [crop],
-  )
-
-  return {
-    onCancel,
-    onResolved,
-    cleanup,
-    onConfirmCrop,
-    onFilesReturned,
-    onClose,
-    fileInputRef,
-    visible,
-    toggle,
-    image,
-    setImage,
-    crop,
-    setCrop,
-    relativeCrop,
-    setRelativeCrop,
-    isLoading,
-    croppedPromise,
-    handleCropChange,
-  }
-}