@codeleap/web 3.10.4 → 3.10.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "3.10.4",
+  "version": "3.10.6",
   "main": "src/index.ts",
   "repository": {
     "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",

package/src/components/Grid/index.tsx

@@ -22,7 +22,7 @@ const defaultProps: Partial<GridProps> = {
   ListLoadingIndicatorComponent: null,
   ListEmptyComponent: EmptyPlaceholder,
   ListSeparatorComponent: RenderSeparator,
-  refreshDebounce: 3000,
+  refreshDebounce: 1500,
   refreshSize: 40,
   refreshThreshold: 0.1,
   refreshPosition: 16,
@@ -88,7 +88,7 @@ export function Grid<T = any>(props: GridProps<T>) {
       {_item?.index <= numColumns ? null : separator}
       <RenderItem {..._itemProps} />
     </>
-  }, [])
+  }, [RenderItem])
 
   return (
     <ListLayout
@@ -104,6 +104,7 @@ export function Grid<T = any>(props: GridProps<T>) {
         rowGutter={rowItemsSpacing}
         columnCount={numColumns}
         onRender={onLoadMore}
+        overscanBy={overscan}
         {...masonryProps}
       />
     </ListLayout>

package/src/components/List/ListLayout.tsx

@@ -13,7 +13,6 @@ type ListLayoutProps = Omit<ListProps, 'renderItem'> & UseInfiniteScrollReturn['
 }
 
 type ListRefreshControlComponent = Partial<ListLayoutProps> & {
-  enabled: boolean
   variantStyles: StylesOf<ListComposition>
 }
 
@@ -26,11 +25,8 @@ const DefaultRefreshIndicator = (props: ListRefreshControlComponent) => {
     debugName, 
     refreshSize, 
     refreshControlIndicatorProps,
-    enabled,
   } = props
 
-  if (!enabled) return null
-  
   return (
     <motion.div
       css={[variantStyles?.refreshControl]}
@@ -85,11 +81,12 @@ export const ListLayout = (props: ListLayoutProps) => {
         ? <ListEmptyComponent debugName={debugName} {...placeholder} />
         : (
           <View css={[getKeyStyle('innerWrapper')]}>
-            <ListRefreshControlComponent
-              {...props}
-              enabled={refresh}
-              variantStyles={variantStyles}
-            />
+            {(!ListRefreshControlComponent || !refresh) ? null : (
+              <ListRefreshControlComponent
+                {...props}
+                variantStyles={variantStyles}
+              />
+            )}
 
             {children}
           </View>

package/src/components/List/index.tsx

@@ -26,7 +26,7 @@ const defaultProps: Partial<ListProps> = {
   ListLoadingIndicatorComponent: null,
   ListEmptyComponent: EmptyPlaceholder,
   ListSeparatorComponent: RenderSeparator,
-  refreshDebounce: 3000,
+  refreshDebounce: 1500,
   refreshSize: 40,
   refreshThreshold: 0.1,
   refreshPosition: 16,
@@ -87,7 +87,7 @@ export function List<T = any>(props: ListProps<T>) {
       {isFirst ? null : separator}
       <RenderItem {..._itemProps} />
     </>
-  }, [])
+  }, [RenderItem])
 
   return (
     <ListLayout
@@ -101,6 +101,7 @@ export function List<T = any>(props: ListProps<T>) {
         itemKey={item => item?.id}
         rowGutter={rowItemsSpacing}
         onRender={onLoadMore}
+        overscanBy={overscan}
         {...masonryProps}
       />
     </ListLayout>

package/src/components/List/useInfiniteScroll.ts

@@ -1,8 +1,8 @@
 import React from 'react'
-import { AnyFunction, onUpdate, TypeGuards } from '@codeleap/common'
+import { AnyFunction, TypeGuards, useEffect } from '@codeleap/common'
 import { ListProps } from '.'
 import { GridProps } from '../Grid'
-import { useInfiniteLoader, LoadMoreItemsCallback, UseInfiniteLoaderOptions, useContainerPosition, useScroller } from 'masonic'
+import { useInfiniteLoader, LoadMoreItemsCallback, UseInfiniteLoaderOptions } from 'masonic'
 
 export type UseInfiniteScrollArgs<Item extends Element = any> = {
   threshold?: number
@@ -31,6 +31,19 @@ type UseRefreshOptions = {
   enabled: boolean
 }
 
+const scrollDebounce = (func, delay) => {
+  const timerRef = React.useRef(null)
+
+  const scrollDebounce = (...args) => {
+    clearTimeout(timerRef.current)
+    timerRef.current = setTimeout(() => {
+      func(...args)
+    }, delay)
+  }
+
+  return scrollDebounce
+}
+
 export const useRefresh = (onRefresh = () => null, options: UseRefreshOptions) => {
   const {
     threshold,
@@ -45,27 +58,50 @@ export const useRefresh = (onRefresh = () => null, options: UseRefreshOptions) =
 
   const [refresh, setRefresh] = React.useState(false)
 
+  const pushToTopRef = React.useRef(0)
   const containerRef = React.useRef(null)
 
-  const { offset } = useContainerPosition(containerRef)
-  const { scrollTop, isScrolling } = useScroller(offset, 2)
-
-  const handleRefresh = React.useCallback(() => {
-    if (!refresh && isScrolling) {
-      setRefresh(true)
-      onRefresh?.()
-
-      setTimeout(() => {
-        setRefresh(false)
-      }, debounce)
+  const refresher = React.useCallback(async () => {
+    setRefresh(true)
+    await onRefresh?.()
+
+    setTimeout(() => {
+      setRefresh(false)
+      pushToTopRef.current = 0
+    }, 2000)
+  }, [])
+
+  const onScroll = scrollDebounce(() => {
+    if (containerRef.current) {
+      const rect = containerRef.current?.getBoundingClientRect()
+      const scrollTop = window?.pageYOffset || document?.documentElement?.scrollTop
+      
+      const containerTop = rect.top + scrollTop
+      const containerHeight = rect.height
+
+      const distanceFromTop = Math.max(0, scrollTop - containerTop)
+      const distanceFromBottom = Math.max(0, containerTop + containerHeight - scrollTop)
+
+      const totalDistance = containerHeight + distanceFromTop + distanceFromBottom
+      const percentage = (distanceFromTop / totalDistance) * 100
+
+      if (percentage < threshold) {
+        if (pushToTopRef.current === 2) {
+          refresher()
+        }
+
+        pushToTopRef.current = pushToTopRef.current + 1
+      }
     }
-  }, [refresh, isScrolling])
+  }, debounce)
+
+  useEffect(() => {
+    window.addEventListener('scroll', onScroll)
 
-  onUpdate(() => {
-    if (scrollTop <= threshold) {
-      handleRefresh()
+    return () => {
+      window.removeEventListener('scroll', onScroll)
     }
-  }, [scrollTop])
+  }, [])
 
   return {
     refresh,

package/src/components/Modal/index.tsx

@@ -9,7 +9,6 @@ import {
   onUpdate,
   useDefaultComponentStyle,
   useNestedStylesByKey,
-  useUnmount,
   StylesOf,
   PropsOf,
   useIsomorphicEffect,
@@ -24,8 +23,8 @@ import { Overlay, OverlayProps } from '../Overlay'
 import { ModalComposition, ModalPresets } from './styles'
 import { ActionIcon, ActionIconProps } from '../ActionIcon'
 import { Scroll } from '../Scroll'
-import { usePopState } from '../../lib/usePopState'
 import { ComponentCommonProps } from '../../types'
+import { Touchable, TouchableProps } from '../Touchable'
 
 export * from './styles'
 
@@ -58,6 +57,7 @@ export type ModalProps =
     zIndex?: number
     withScrollContainer?: boolean
     scrollLocked?: boolean
+    backdropProps?: Partial<TouchableProps>
   } & ComponentVariants<typeof ModalPresets> & ComponentCommonProps
 
 function focusModal(event: FocusEvent, id: string) {
@@ -178,6 +178,7 @@ export const ModalContent = (
     withScrollContainer,
     debugName,
     scrollLocked,
+    backdropProps = {},
     ...props
   } = modalProps
 
@@ -196,8 +197,6 @@ export const ModalContent = (
     if (TypeGuards.isFunction(onClose)) onClose()
   }
 
-  usePopState(visible, toggle, scrollLocked)
-
   function closeOnEscPress(e: React.KeyboardEvent<HTMLDivElement>) {
     if (!closeOnEscape) return null
 
@@ -246,7 +245,12 @@ export const ModalContent = (
       />
 
       <ModalArea css={variantStyles.innerWrapper}>
-        <View css={variantStyles.backdropPressable} onClick={close} />
+        <Touchable 
+          css={variantStyles.backdropPressable} 
+          onPress={close} 
+          debounce={1000} 
+          {...backdropProps} 
+        />
         <View
           component='section'
           css={[
@@ -306,19 +310,6 @@ export const Modal = (props) => {
   } = allProps
 
   const modalId = useRef(v4())
-  const [renderStatus, setRenderStatus] = React.useState(
-    keepMounted ? 'mounted' : 'unmounted',
-  )
-
-  // onUpdate(() => {
-  //   if (!keepMounted) {
-  //     if (visible) {
-  //       setRenderStatus('mounted')
-  //     } else {
-  //       setTimeout(() => setRenderStatus('unmounted'), 500)
-  //     }
-  //   }
-  // }, [keepMounted, visible])
 
   onMount(() => {
     if (accessible) {
@@ -335,9 +326,7 @@ export const Modal = (props) => {
       appRoot.setAttribute('aria-hidden', `${visible}`)
       appRoot.setAttribute('tabindex', `${-1}`)
     }
-  }, [visible])
 
-  onUpdate(() => {
     if (visible) {
       document.body.style.overflow = 'hidden'
     } else {

package/src/components/SearchInput/index.tsx

@@ -14,6 +14,7 @@ export type SearchInputProps = {
   onTypingChange?: (isTyping: boolean) => void
   onValueChange?: (search: string) => void
   onClear?: AnyFunction
+  defaultValue?: string
 } & Partial<TextInputProps>
 
 export const SearchInput: ComponentWithDefaultProps<SearchInputProps> = (props) => {
@@ -29,6 +30,7 @@ export const SearchInput: ComponentWithDefaultProps<SearchInputProps> = (props)
     debounce,
     value,
     onValueChange,
+    defaultValue,
     ...rest
   } = {
     ...SearchInput.defaultProps,
@@ -37,7 +39,7 @@ export const SearchInput: ComponentWithDefaultProps<SearchInputProps> = (props)
 
   const hasStateProps = !TypeGuards.isNil(value) && TypeGuards.isFunction(onValueChange)
 
-  const [search, setSearch] = hasStateProps ? [value, onValueChange] : useState('')
+  const [search, setSearch] = hasStateProps ? [value, onValueChange] : useState(defaultValue)
   const setSearchTimeout = React.useRef<NodeJS.Timeout | null>(null)
 
   const handleChangeSearch = (value: string) => {

package/src/components/SegmentedControl/index.tsx

@@ -28,7 +28,7 @@ export type SegmentedControlProps<T = string> = ComponentVariants<typeof Segment
   styles?: StylesOf<SegmentedControlComposition>
 
   /**  view style */
-  style: PropsOf<typeof View>['style']
+  style?: PropsOf<typeof View>['style']
 
   /**  prop to control when te value of the segmented control changes */
   onValueChange?: (v: any) => void
@@ -93,7 +93,9 @@ export const SegmentedControl = (props: SegmentedControlProps) => {
     },
   )
 
-  const currentOptionIdx = options?.findIndex(o => o?.value === value) || 0
+  const currentOptionIdx = React.useMemo(() => {
+    return options?.findIndex(o => o?.value === value) || 0
+  }, [value])
 
   const maxDivWidthRef = useRef(null)
 

package/src/components/Slider/index.tsx

@@ -33,6 +33,8 @@ export type SliderProps = Partial<Omit<PrimitiveSliderProps, 'value' | 'onValueC
   style?: PropsOf<typeof View>['style']
   trackMarks?: Record<number, string>
   trackMarkComponent?: React.ComponentType<TrackMarkProps>
+  onPressThumbSetValue?: boolean
+  onPressThumb?: (value: number, thumbIndex: number) => void
 } & ComponentVariants<typeof SliderPresets>
 
 export type TrackMarkProps = {
@@ -82,6 +84,8 @@ export const Slider = (props: SliderProps) => {
     description = null,
     minStepsBetweenThumbs = 8,
     step = 1,
+    onPressThumbSetValue = false,
+    onPressThumb = null,
     ...sliderProps
   } = others
 
@@ -246,7 +250,11 @@ export const Slider = (props: SliderProps) => {
             // @ts-ignore
             index={i}
             style={thumbStyle}
-            onClick={() => currentThumbRef.current = i}
+            onClick={() => {
+              if (onPressThumbSetValue) onValueChange?.([Number(_thumbValue)])
+              if (TypeGuards.isFunction(onPressThumb)) onPressThumb?.(_thumbValue, i)
+              currentThumbRef.current = i
+            }}
             onMouseEnter={() => currentThumbRef.current = i}
           />
         ))}

package/src/components/Text/index.tsx

@@ -1,4 +1,4 @@
-import { ComponentVariants, TypeGuards, useDefaultComponentStyle, useI18N } from '@codeleap/common'
+import { ComponentVariants, TypeGuards, useDefaultComponentStyle } from '@codeleap/common'
 import React, { ComponentPropsWithoutRef, ElementType } from 'react'
 import { StylesOf } from '../../types/utility'
 import { TextComposition, TextPresets } from './styles'
@@ -51,8 +51,6 @@ export const Text = <T extends ElementType>(textProps: TextProps<T>) => {
 
   const pressedRef = React.useRef(false)
 
-  const { t } = useI18N()
-
   const variantStyles = useDefaultComponentStyle<'u:Text', typeof TextPresets>('u:Text', {
     responsiveVariants,
     variants,
@@ -60,14 +58,6 @@ export const Text = <T extends ElementType>(textProps: TextProps<T>) => {
     rootElement: 'text',
   })
 
-  const _text = TypeGuards.isString(msg) ? msg : text
-
-  let content = t(String(_text))
-
-  if (TypeGuards.isNil(content) || !TypeGuards.isString(content) || content === 'null') {
-    content = text
-  }
-
   const isPressable = (TypeGuards.isFunction(onPress) || TypeGuards.isFunction(onClick)) && !pressDisabled
 
   const disabled = isPressable === false
@@ -95,12 +85,12 @@ export const Text = <T extends ElementType>(textProps: TextProps<T>) => {
     }
   }
 
-  const _styles = [
+  const _styles = React.useMemo(() => ([
     variantStyles.text,
     disabled && variantStyles['text:disabled'],
     css,
     style,
-  ]
+  ]), [css, style, disabled])
 
   const pressProps = isPressable ? {
     onClick: disabled ? null : _onPress,
@@ -112,7 +102,7 @@ export const Text = <T extends ElementType>(textProps: TextProps<T>) => {
       {...props}
       {...pressProps}
     >
-      {content || children}
+      {text || children}
     </Component>
   )
 }