@codeleap/web 3.4.0 → 3.5.0

package/src/components/InputBase/styles.ts

@@ -1,6 +1,7 @@
-import { TypeGuards, createDefaultVariantFactory, getRenderedComponent, includePresets, useDefaultComponentStyle, useMemo, useNestedStylesByKey } from '@codeleap/common'
+import { TypeGuards, createDefaultVariantFactory, includePresets, useDefaultComponentStyle, useNestedStylesByKey } from '@codeleap/common'
 import { ActionIconComposition, ActionIconParts } from '../ActionIcon'
 import { InputBaseProps } from './types'
+import { concatStyles, getIconStyles, iconStylesOf } from './utils'
 
 type InputIcons = 'icon' | 'leftIcon' | 'rightIcon'
 
@@ -27,38 +28,6 @@ const createTextInputBaseComposition = createDefaultVariantFactory<InputBaseComp
 
 export const InputBasePresets = includePresets((styles) => createTextInputBaseComposition(() => ({ wrapper: styles })))
 
-const getIconStyles = (obj, state) => {
-  return {
-    icon: {
-      ...obj.icon,
-      ...(state.focused && obj['icon:focus']),
-      ...(state.hasError && obj['icon:error']),
-      ...(state.disabled && obj['icon:disabled']),
-    },
-    wrapper: {
-      ...obj.touchableWrapper,
-      ...(state.focused && obj['touchableWrapper:focus']),
-      ...(state.hasError && obj['touchableWrapper:error']),
-      ...(state.disabled && obj['touchableWrapper:disabled']),
-    },
-  }
-}
-
-export function concatStyles(unstyles: Record<number, {}> = {}) {
-  let styles = {}
-
-  Object.values(unstyles || {}).forEach(style => {
-    if (style) {
-      styles = {
-        ...styles,
-        ...style,
-      }
-    }
-  })
-
-  return styles
-}
-
 export const useInputBaseStyles = (props: InputBaseProps) => {
   const {
     focused,
@@ -76,41 +45,24 @@ export const useInputBaseStyles = (props: InputBaseProps) => {
 
   const _leftIconStyles = useNestedStylesByKey<ActionIconComposition>('leftIcon', variantStyles)
   const _rightIconStyles = useNestedStylesByKey<ActionIconComposition>('rightIcon', variantStyles)
-  const _generalIconStyles = useNestedStylesByKey<ActionIconComposition>('icon', variantStyles)
+  const _baseIconStyles = useNestedStylesByKey<ActionIconComposition>('icon', variantStyles)
+
+  const baseIconStyles = getIconStyles(_baseIconStyles, { hasError, disabled, focused })
 
-  const generalIconStyles = getIconStyles(_generalIconStyles, { hasError, disabled, focused })
   const leftIconStylesCompose = getIconStyles(_leftIconStyles, { 
     hasError, 
     disabled: disabled || props?.leftIcon?.disabled, 
     focused 
   })
+
   const rightIconStylesCompose = getIconStyles(_rightIconStyles, { 
     hasError, 
     disabled: disabled || props?.rightIcon?.disabled,
     focused 
   })
 
-  const leftIconStyles = {
-    icon: {
-      ...generalIconStyles.icon,
-      ...leftIconStylesCompose.icon,
-    },
-    wrapper: {
-      ...generalIconStyles.wrapper,
-      ...leftIconStylesCompose.wrapper,
-    },
-  }
-
-  const rightIconStyles = {
-    icon: {
-      ...generalIconStyles.icon,
-      ...rightIconStylesCompose.icon,
-    },
-    wrapper: {
-      ...generalIconStyles.wrapper,
-      ...rightIconStylesCompose.wrapper,
-    },
-  }
+  const leftIconStyles = iconStylesOf(baseIconStyles, leftIconStylesCompose)
+  const rightIconStyles = iconStylesOf(baseIconStyles, rightIconStylesCompose)
 
   const labelStyle = [
     variantStyles.label,

package/src/components/InputBase/utils.ts

@@ -1,3 +1,5 @@
+import { StylesOf } from '@codeleap/common'
+import { ActionIconComposition } from '../ActionIcon'
 import { InputBaseProps } from './types'
 
 type OmitDiff<T1, T2> = {
@@ -39,3 +41,64 @@ export function selectInputBaseProps<T extends InputBaseProps>(props: T): {
 
   return { inputBaseProps: result, others: copy as OmitDiff<T, T> }
 }
+
+type IconStyles = StylesOf<ActionIconComposition>
+
+type IconState = {
+  focused: boolean
+  hasError: boolean
+  disabled: boolean
+}
+
+export const getIconStyles = (obj: IconStyles, state: IconState) => ({
+  icon: {
+    ...obj.icon,
+    ...(state.focused && obj['icon:focus']),
+    ...(state.hasError && obj['icon:error']),
+  },
+  'icon:disabled': {
+    ...(state.disabled && obj['icon:disabled']),
+  },
+  touchableWrapper: {
+    ...obj.touchableWrapper,
+    ...(state.focused && obj['touchableWrapper:focus']),
+    ...(state.hasError && obj['touchableWrapper:error']),
+  },
+  'touchableWrapper:disabled': {
+    ...(state.disabled && obj['touchableWrapper:disabled']),
+  },
+})
+
+export function concatStyles(unstyles: Record<number, {}> = {}) {
+  let styles = {}
+
+  Object.values(unstyles || {}).forEach(style => {
+    if (style) {
+      styles = {
+        ...styles,
+        ...style,
+      }
+    }
+  })
+
+  return styles
+}
+
+export const iconStylesOf = (baseStyles: IconStyles, styles: IconStyles) => ({
+  icon: {
+    ...baseStyles.icon,
+    ...styles.icon,
+  },
+  'icon:disabled': {
+    ...baseStyles['icon:disabled'],
+    ...styles['icon:disabled'],
+  },
+  touchableWrapper: {
+    ...baseStyles.touchableWrapper,
+    ...styles.touchableWrapper,
+  },
+  'touchableWrapper:disabled': {
+    ...baseStyles['touchableWrapper:disabled'],
+    ...styles['touchableWrapper:disabled'],
+  }
+})

package/src/components/List/ListLayout.tsx

@@ -0,0 +1,98 @@
+import React from 'react'
+import { StylesOf, TypeGuards, useCodeleapContext } from '@codeleap/common'
+import { ListComposition, ListParts } from './styles'
+import { ListProps } from './types'
+import { View } from '../View'
+import { UseInfiniteScrollReturn } from './useInfiniteScroll'
+import { ActivityIndicator } from '../ActivityIndicator'
+import { motion } from 'framer-motion'
+
+type ListLayoutProps = Omit<ListProps, 'renderItem'> & UseInfiniteScrollReturn['layoutProps'] & {
+  variantStyles: StylesOf<ListComposition>
+  children?: React.ReactNode
+}
+
+export const ListLayout = (props: ListLayoutProps) => {
+  const {
+    ListEmptyComponent,
+    ListFooterComponent,
+    ListHeaderComponent,
+    ListRefreshControlComponent,
+    variantStyles,
+    isEmpty,
+    isLoading,
+    refreshPosition,
+    placeholder = {},
+    parentRef,
+    style,
+    dataVirtualizer,
+    refresh,
+    refreshing,
+    refreshControlProps,
+    refreshControlIndicatorProps = {},
+    refreshSize,
+    children,
+    ref,
+    debugName,
+  } = props
+
+  const { Theme } = useCodeleapContext()
+
+  const getKeyStyle = React.useCallback((key: ListParts) => {
+    return [
+      variantStyles[key],
+      isLoading && variantStyles[`${key}:loading`],
+      isEmpty && variantStyles[`${key}:empty`],
+    ]
+  }, [isLoading, isEmpty])
+
+  const _refreshPosition = React.useMemo(() => {
+    return Theme.spacing.value(refreshPosition)
+  }, [refreshPosition])
+
+  return (
+    // @ts-ignore
+    <View css={[getKeyStyle('wrapper'), style]}>
+      {!!ListHeaderComponent && <ListHeaderComponent />}
+
+      {isEmpty ? <ListEmptyComponent debugName={debugName} {...placeholder} /> : (
+        <View
+          ref={parentRef}
+          css={[getKeyStyle('innerWrapper')]}
+        >
+          <View
+            //@ts-ignore
+            ref={ref}
+            css={[
+              getKeyStyle('content'),
+              { height: dataVirtualizer.getTotalSize() }
+            ]}
+          >
+            {TypeGuards.isNil(ListRefreshControlComponent) && refresh ? (
+              <motion.div
+                css={[variantStyles?.refreshControl]}
+                initial={false}
+                animate={{
+                  opacity: refreshing ? 1 : 0,
+                  top: refreshing ? _refreshPosition : 0
+                }}
+                {...refreshControlProps}
+              >
+                <ActivityIndicator
+                  debugName={debugName}
+                  size={refreshSize} 
+                  style={variantStyles.refreshControlIndicator} 
+                  {...refreshControlIndicatorProps} 
+                />
+              </motion.div>
+            ) : (<ListRefreshControlComponent /> ?? null)}
+
+            {children}
+          </View>
+        </View>
+      )}
+
+      {!!ListFooterComponent && <ListFooterComponent />}
+    </View>
+  )
+}

package/src/components/List/PaginationIndicator.tsx

@@ -0,0 +1,102 @@
+import React from 'react'
+import {
+  assignTextStyle,
+  ComponentVariants,
+  createDefaultVariantFactory,
+  getNestedStylesByKey,
+  includePresets,
+  StylesOf,
+  TypeGuards,
+  useDefaultComponentStyle,
+} from '@codeleap/common'
+import { ActivityIndicator, ActivityIndicatorComposition, ActivityIndicatorProps } from '../ActivityIndicator'
+import { Text, TextProps } from '../Text'
+import { View } from '../View'
+import { ComponentCommonProps } from '../../types'
+
+export type PaginationIndicatorComposition = 'text' | `loader${Capitalize<ActivityIndicatorComposition>}` | 'wrapper'
+
+const createPaginationIndicatorStyle = createDefaultVariantFactory<PaginationIndicatorComposition>()
+
+const presets = includePresets((style) => createPaginationIndicatorStyle(() => ({ loaderWrapper: style, text: style })))
+
+export const PaginationIndicatorStyles = {
+  ...presets,
+  default: createPaginationIndicatorStyle((theme) => {
+    return {
+      wrapper: {
+        ...theme.presets.fullWidth,
+        ...theme.presets.center,
+      },
+      loaderWrapper: {
+        ...theme.presets.center,
+        ...theme.spacing.marginVertical(3),
+      },
+      text: {
+        ...assignTextStyle('h4')(theme).text,
+        ...theme.presets.textCenter,
+        ...theme.spacing.marginVertical(3),
+        ...theme.presets.fullWidth,
+      },
+    }
+  }),
+}
+
+export type PaginationIndicatorProps = {
+  isFetching?: boolean
+  noMoreItemsText: React.ReactChild
+  hasMore?: boolean
+  activityIndicator?: JSX.Element
+  styles?: StylesOf<PaginationIndicatorComposition>
+  style?: React.CSSProperties
+  indicatorProps?: Partial<ActivityIndicatorProps>
+  textProps?: Partial<TextProps<'p'>>
+} & ComponentVariants<typeof PaginationIndicatorStyles> & ComponentCommonProps
+
+const defaultProps: Partial<PaginationIndicatorProps> = {}
+
+export const PaginationIndicator = (props: PaginationIndicatorProps) => {
+  const allProps = {
+    ...PaginationIndicator.defaultProps,
+    ...props,
+  }
+
+  const { 
+    hasMore, 
+    isFetching, 
+    noMoreItemsText, 
+    style, 
+    activityIndicator, 
+    styles = {}, 
+    responsiveVariants = {},
+    variants = [],
+    indicatorProps = {},
+    debugName,
+  } = allProps
+
+  const variantStyles = useDefaultComponentStyle<
+    'u:PaginationIndicator',
+    typeof PaginationIndicatorStyles
+    >('u:PaginationIndicator', {
+      variants,
+      responsiveVariants,
+      styles,
+    })
+
+  const loaderStyles = getNestedStylesByKey('loader', variantStyles)
+
+  if (isFetching) {
+    return activityIndicator || <View css={[variantStyles.wrapper, style]}><ActivityIndicator debugName={debugName} {...indicatorProps} styles={loaderStyles}/></View>
+  }
+  
+  if (!hasMore) {
+    if (TypeGuards.isString(noMoreItemsText) || TypeGuards.isNumber(noMoreItemsText)) {
+      return <Text debugName={debugName} css={[variantStyles.text, style]} text={noMoreItemsText.toString()}/>
+    }
+    return noMoreItemsText
+  }
+
+  return null
+}
+
+PaginationIndicator.defaultProps = defaultProps

package/src/components/List/index.tsx

@@ -1,106 +1,119 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react'
-
-import { VariableSizeList as VirtualList , VariableSizeListProps} from 'react-window'
-import { ComponentProps, CSSProperties, ReactElement } from 'react'
-import AutoSizer from 'react-virtualized-auto-sizer'
-import {
-  ComponentVariants,
-  useDefaultComponentStyle
-} from '@codeleap/common'
-import { StylesOf } from '../../types/utility'
-import { CSSObject } from '@emotion/react'
-import { ListComposition, ListPresets } from './styles'
-
-export type ListRender<T> = (itemProps: {
-  item: T
-  index: number
-  style: CSSProperties
-}) => ReactElement
+import React from 'react'
+import { useDefaultComponentStyle, useCallback } from '@codeleap/common'
+import { View, ViewProps } from '../View'
+import { EmptyPlaceholder } from '../EmptyPlaceholder'
+import { ListPresets } from './styles'
+import { VirtualItem } from '@tanstack/react-virtual'
+import { useInfiniteScroll } from './useInfiniteScroll'
+import { ListProps } from './types'
+import { ListLayout } from './ListLayout'
 
 export * from './styles'
+export * from './PaginationIndicator'
+export * from './useInfiniteScroll'
+export * from './types'
+export * from './ListLayout'
+
+const RenderSeparator = (props: { separatorStyles: ViewProps<'div'>['css'] }) => {
+  return (
+    <View css={[props?.separatorStyles]}></View>
+  )
+}
+
+const defaultProps: Partial<ListProps> = {
+  ListFooterComponent: null,
+  ListHeaderComponent: null,
+  ListLoadingIndicatorComponent: null,
+  ListRefreshControlComponent: null,
+  ListEmptyComponent: EmptyPlaceholder,
+  ListSeparatorComponent: RenderSeparator,
+  refreshDebounce: 3000,
+  refreshSize: 40,
+  refreshThreshold: 1,
+  refreshPosition: 2,
+  refresh: true,
+}
+
+const ListCP = React.forwardRef<'div', ListProps>((flatListProps, ref) => {
+  const allProps = {
+    ...defaultProps,
+    ...flatListProps,
+  }
 
-export type ListProps<T> = {
-  styles?: StylesOf<ListComposition>
-  css?: CSSObject
-  data: T[]
-  getSize: (i: T, idx: number) => number
-  renderItem: ListRender<T>
-} & Omit<
-  VariableSizeListProps,
-  | 'itemCount'
-  | 'itemSize'
-  | 'itemData'
-  | 'itemHeight'
-  | 'width'
-  | 'height'
-  | 'children'
-> &
-  ComponentVariants<typeof ListPresets>
-
-export const List = <T extends unknown>(
-  listProps: ListProps<T>,
-) => {
   const {
-    variants,
-    responsiveVariants,
-    styles,
+    variants = [],
+    responsiveVariants = {},
+    styles = {},
+    ListLoadingIndicatorComponent,
+    renderItem: RenderItem,
+    ListSeparatorComponent,
     data,
-    getSize,
-    renderItem: Item,
-    ...viewProps
-  } = listProps
+    separators,
+  } = allProps
 
-  const variantStyles = useDefaultComponentStyle('View', {
+  const variantStyles = useDefaultComponentStyle<'u:List', typeof ListPresets>('u:List', {
     variants,
     responsiveVariants,
     styles,
   })
 
+  const {
+    items,
+    dataVirtualizer,
+    layoutProps,
+  } = useInfiniteScroll(allProps)
+
+  const separator = separators && <ListSeparatorComponent separatorStyles={variantStyles.separator} />
+
+  const renderItem = useCallback((_item: VirtualItem) => {
+    if (!RenderItem) return null
+
+    const showIndicator = (_item?.index > data?.length - 1) && !!ListLoadingIndicatorComponent
+
+    const listLength = data?.length || 0
+
+    const isFirst = _item?.index === 0
+    const isLast = _item?.index === listLength - 1
+
+    const isOnly = isFirst && isLast
+
+    const _itemProps = {
+      ..._item,
+      isOnly,
+      isLast,
+      isFirst,
+      item: data?.[_item?.index]
+    }
+
+    return (
+      <div
+        css={[variantStyles.itemWrapper]}
+        key={_item?.key}
+        data-index={_item?.index}
+        ref={dataVirtualizer?.measureElement}
+      >
+        {!isFirst && separator}
+        {showIndicator && <ListLoadingIndicatorComponent />}
+        {!!_itemProps?.item && <RenderItem {..._itemProps} />}
+      </div>
+    )
+  }, [RenderItem, data?.length, dataVirtualizer?.measureElement])
+
   return (
-    // @ts-ignore
-    <AutoSizer>
-      {({ height, width }) => (
-        // @ts-ignore
-        <VirtualList
-          height={height}
-          width={width}
-          itemCount={data.length}
-          itemData={data}
-          itemSize={(idx) => getSize(data[idx], idx)}
-          css={variantStyles.wrapper}
-          {...viewProps}
-        >
-          {({ style, index }) => (
-            <Item item={data[index]} style={style} index={index} />
-          )}
-        </VirtualList>
-      )}
-    </AutoSizer>
+    <ListLayout
+      {...allProps}
+      {...layoutProps}
+      variantStyles={variantStyles} // @ts-ignore
+      ref={ref}
+    >
+      {/* Necessary for correct list render */}
+      <div css={[variantStyles.list, { transform: `translateY(${items?.[0]?.start}px)` }]}>
+        {items?.map((item) => renderItem(item))}
+      </div>
+    </ListLayout>
   )
+})
 
-  // return <View {...viewProps}>
-  //   {data.map((item, idx) => <Component item={item} idx={idx} key={idx}/>)}
-  // </View>
-}
+export type ListComponentType = <T extends any[] = any[]>(props: ListProps<T>) => React.ReactElement
 
-// const rowHeights = new Array(1000)
-//   .fill(true)
-//   .map(() => 25 + Math.round(Math.random() * 50));
-
-// const getItemSize = index => rowHeights[index];
-
-// const Row = ({ index, style }) => (
-//   <div style={style}>Row {index}</div>
-// );
-
-// const Example = () => (
-//   <List
-//     height={150}
-//     itemCount={1000}
-//     itemSize={getItemSize}
-//     width={300}
-//   >
-//     {Row}
-//   </List>
-// );
+export const List = ListCP as unknown as ListComponentType

package/src/components/List/styles.ts

@@ -1,8 +1,20 @@
-import { createDefaultVariantFactory, includePresets } from "@codeleap/common";
-import { ViewComposition } from "../View";
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { ViewComposition } from '../View'
 
-export type ListComposition = ViewComposition
+type ListStates = 'empty' | 'loading' 
 
-const createListStyles = createDefaultVariantFactory<ListComposition>()
+export type ListParts = 
+  ViewComposition | 
+  'innerWrapper' | 
+  'content' | 
+  'separator' | 
+  'itemWrapper' |
+  'refreshControl' |
+  'refreshControlIndicator' |
+  'list'
 
-export const ListPresets = includePresets((styles) => createListStyles(() => ({ wrapper: styles })))
+export type ListComposition = `${ListParts}:${ListStates}` | ListParts
+
+const createListStyle = createDefaultVariantFactory<ListComposition>()
+
+export const ListPresets = includePresets(style => createListStyle(() => ({ wrapper: style })))

package/src/components/List/types.ts

@@ -0,0 +1,51 @@
+import { ComponentVariants, PropsOf, StylesOf } from '@codeleap/common'
+import { VirtualItem, VirtualizerOptions } from '@tanstack/react-virtual'
+import { EmptyPlaceholderProps } from '../EmptyPlaceholder'
+import { View, ViewProps } from '../View'
+import { ListComposition, ListPresets } from './styles'
+import { motion } from 'framer-motion'
+import { ActivityIndicatorProps } from '../ActivityIndicator'
+import { ComponentCommonProps } from '../../types'
+
+export type AugmentedRenderItemInfo<T> = VirtualItem & {
+  item: T
+  isFirst: boolean
+  isLast: boolean
+  isOnly: boolean
+}
+
+export type ListProps<
+T = any[],
+Data = T extends Array<infer D> ? D : never
+> = 
+  ComponentVariants<typeof ListPresets> &
+  Omit<typeof View, 'variants' | 'styles'> & {
+    data: Data[]
+    isFetching?: boolean
+    hasNextPage?: boolean
+    separators?: boolean
+    onRefresh?: () => void
+    placeholder?: EmptyPlaceholderProps
+    styles?: StylesOf<ListComposition>
+    keyExtractor?: (item: T, index: number) => string
+    renderItem: (data: AugmentedRenderItemInfo<T>) => React.ReactElement
+    ListFooterComponent?: () => React.ReactElement
+    ListLoadingIndicatorComponent?: () => React.ReactElement
+    ListRefreshControlComponent?: () => React.ReactElement
+    ListEmptyComponent?: React.FC | ((props: EmptyPlaceholderProps) => React.ReactElement)
+    ListSeparatorComponent?: React.FC | ((props: { separatorStyles: ViewProps<'div'>['css'] }) => React.ReactElement)
+    isLoading?: boolean
+    isFetchingNextPage?: boolean
+    fetchNextPage?: () => void
+    ListHeaderComponent?: () => React.ReactElement
+    virtualizerOptions?: Partial<VirtualizerOptions<any, any>>
+    refreshDebounce?: number
+    refreshSize?: number
+    refreshThreshold?: number
+    refreshPosition?: number
+    refresh?: boolean
+    refreshControlProps?: PropsOf<typeof motion.div>
+    refreshControlIndicatorProps?: Partial<ActivityIndicatorProps>
+    style?: React.CSSProperties
+    ref?: React.MutableRefObject<undefined>
+} & ComponentCommonProps