@codeleap/web 3.4.0 → 3.5.0

package/src/components/List/useInfiniteScroll.ts

@@ -0,0 +1,113 @@
+import { onUpdate } from '@codeleap/common'
+import { useVirtualizer, VirtualItem, Virtualizer, VirtualizerOptions } from '@tanstack/react-virtual'
+import React from 'react'
+import { ListProps } from '.'
+import { GridProps } from '../Grid'
+
+export type UseInfiniteScrollProps<TS extends Element = any, T extends Element = any> = 
+  ListProps & 
+  GridProps & 
+  Pick<VirtualizerOptions<TS, T>, 'overscan'>
+
+export type UseInfiniteScrollReturn<TS extends Element = any, T extends Element = any> = {
+  dataVirtualizer: Virtualizer<TS, T>
+  count: number
+  items: VirtualItem[]
+  isRefresh: boolean
+  parentRef: React.MutableRefObject<undefined>
+  layoutProps: {
+    isEmpty: boolean
+    refreshing: boolean
+    parentRef: React.MutableRefObject<undefined>
+    dataVirtualizer: Virtualizer<TS, T>
+  }
+}
+
+export const useInfiniteScroll = (props: UseInfiniteScrollProps): UseInfiniteScrollReturn => {
+  const {
+    onRefresh,
+    data,
+    hasNextPage,
+    isFetchingNextPage,
+    fetchNextPage,
+    virtualizerOptions = {},
+    refreshDebounce,
+    refreshThreshold,
+    overscan = 10,
+    numColumns = 1,
+  } = props
+
+  const parentRef = React.useRef()
+
+  const [refreshing, setRefreshing] = React.useState(false)
+
+  const count = hasNextPage ? data?.length + 1 : data?.length
+
+  const dataVirtualizer = useVirtualizer({
+    count,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => null,
+    overscan,
+    ...virtualizerOptions,
+  })
+
+  const isRefresh = React.useMemo(() => {
+    const _offset = dataVirtualizer?.scrollOffset
+    const _refresh = _offset <= refreshThreshold && dataVirtualizer?.isScrolling
+
+    return _refresh
+  }, [dataVirtualizer?.scrollOffset, dataVirtualizer?.isScrolling])
+
+  const isEmpty = !data || !data?.length
+
+  const items = dataVirtualizer?.getVirtualItems()
+
+  onUpdate(() => {
+    if (isRefresh) {
+      setRefreshing(true)
+      onRefresh?.()
+
+      setTimeout(() => {
+        setRefreshing(false)
+      }, refreshDebounce)
+    }
+  }, [!!isRefresh])
+
+  onUpdate(() => {
+    const [lastItem] = [...(items ?? [])]?.reverse()
+
+    if (!lastItem) {
+      return
+    }
+
+    const itemsLength = (data?.length / numColumns) - 1
+
+    if (
+      lastItem?.index >= itemsLength &&
+      hasNextPage &&
+      !isFetchingNextPage
+    ) {
+      fetchNextPage?.()
+    }
+  }, [
+    hasNextPage,
+    fetchNextPage,
+    data?.length,
+    isFetchingNextPage,
+    items,
+  ])
+
+  return {
+    items,
+    dataVirtualizer,
+    isRefresh,
+    count,
+    parentRef,
+    layoutProps: {
+      parentRef,
+      refreshing,
+      isEmpty,
+      dataVirtualizer
+    }
+  }
+}

package/src/components/LoadingOverlay/index.tsx

@@ -4,6 +4,7 @@ import { StylesOf } from '../..'
 import { LoadingOverlayComposition, LoadingOverlayPresets } from './styles'
 import { View, ViewProps } from '../View'
 import { ActivityIndicator, ActivityIndicatorProps } from '../ActivityIndicator'
+import { ComponentCommonProps } from '../../types/utility'
 
 export type LoadingOverlayProps = Partial<ViewProps<'div'>> & {
   visible?: boolean
@@ -11,7 +12,7 @@ export type LoadingOverlayProps = Partial<ViewProps<'div'>> & {
   style?: React.CSSProperties
   indicatorProps?: ActivityIndicatorProps
   children?: React.ReactNode
-} & ComponentVariants<typeof LoadingOverlayPresets>
+} & ComponentVariants<typeof LoadingOverlayPresets> & ComponentCommonProps
 
 export const LoadingOverlay = (props: LoadingOverlayProps) => {
   const { 
@@ -21,7 +22,8 @@ export const LoadingOverlay = (props: LoadingOverlayProps) => {
     variants = [],
     responsiveVariants = {},
     style = {},
-    indicatorProps, 
+    indicatorProps,
+    debugName,
     ...rest 
   } = props
 
@@ -38,7 +40,7 @@ export const LoadingOverlay = (props: LoadingOverlayProps) => {
 
   return (
     <View css={[variantStyles.wrapper, visible && variantStyles['wrapper:visible'], style]} {...rest}>
-      <ActivityIndicator {...indicatorProps} styles={indicatorStyles} />
+      <ActivityIndicator debugName={debugName} {...indicatorProps} styles={indicatorStyles} />
       {children}
     </View>
   )

package/src/components/Modal/index.tsx

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx, CSSObject } from '@emotion/react'
 import {
   AnyFunction,
   ComponentVariants,
@@ -22,6 +24,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'
 
 export * from './styles'
 
@@ -52,8 +56,9 @@ export type ModalProps =
     onClose?: () => void
     overlayProps?: Partial<OverlayProps>
     zIndex?: number
-    scrollable?: boolean
-  } & ComponentVariants<typeof ModalPresets>
+    withScrollContainer?: boolean
+    scrollLocked?: boolean
+  } & ComponentVariants<typeof ModalPresets> & ComponentCommonProps
 
 function focusModal(event: FocusEvent, id: string) {
   event.preventDefault()
@@ -83,6 +88,7 @@ const ModalDefaultHeader = (props: ModalHeaderProps) => {
     onPressClose,
     closeButtonProps = {},
     description,
+    debugName,
   } = props
 
   const closeButtonStyles = useNestedStylesByKey('closeButton', variantStyles)
@@ -102,13 +108,14 @@ const ModalDefaultHeader = (props: ModalHeaderProps) => {
     >
       <View id={`${id}-title`} css={variantStyles.titleWrapper}>
         {TypeGuards.isString(title) ? (
-          <Text text={title} css={variantStyles.title} />
+          <Text debugName={debugName} text={title} css={variantStyles.title} />
         ) : (
           title
         )}
 
         {showCloseButton && (
           <ActionIcon
+            debugName={debugName}
             icon={closeIconName as IconPlaceholder}
             onPress={onPressClose}
             {...closeButtonProps}
@@ -118,7 +125,7 @@ const ModalDefaultHeader = (props: ModalHeaderProps) => {
       </View>
 
       {TypeGuards.isString(description) ? (
-        <Text text={description} style={variantStyles.description} />
+        <Text debugName={debugName} text={description} style={variantStyles.description} />
       ) : (
         description
       )}
@@ -139,11 +146,12 @@ const defaultProps: Partial<ModalProps> = {
   dismissOnBackdrop: true,
   zIndex: null,
   description: null,
-  scrollable: false,
+  withScrollContainer: false,
+  scrollLocked: true,
 }
 
-export const ModalContent: React.FC<ModalProps & { id: string }> = (
-  modalProps,
+export const ModalContent = (
+  modalProps: ModalProps & { id: string },
 ) => {
   const {
     children,
@@ -167,7 +175,9 @@ export const ModalContent: React.FC<ModalProps & { id: string }> = (
     overlayProps = {},
     dismissOnBackdrop,
     zIndex,
-    scrollable,
+    withScrollContainer,
+    debugName,
+    scrollLocked,
     ...props
   } = modalProps
 
@@ -186,20 +196,7 @@ export const ModalContent: React.FC<ModalProps & { id: string }> = (
     if (TypeGuards.isFunction(onClose)) onClose()
   }
 
-  onUpdate(() => {
-    if (visible) {
-      document.body.style.overflow = 'hidden'
-      window.history.pushState(null, null, window.location.pathname)
-      window.addEventListener('popstate', toggle)
-    } else {
-      document.body.style.overflow = 'auto'
-      window.removeEventListener('popstate', toggle)
-    }
-  }, [visible])
-
-  useUnmount(() => {
-    window.removeEventListener('popstate', toggle)
-  })
+  usePopState(visible, toggle, scrollLocked)
 
   function closeOnEscPress(e: React.KeyboardEvent<HTMLDivElement>) {
     if (!closeOnEscape) return null
@@ -214,18 +211,18 @@ export const ModalContent: React.FC<ModalProps & { id: string }> = (
     if (modal) modal.focus()
   }, [id])
 
-  const close = (closable && dismissOnBackdrop) ? toggleAndReturn : () => {}
+  const close = (closable && dismissOnBackdrop) ? toggleAndReturn : () => { }
 
   const ModalBody = renderModalBody || (scroll ? Scroll : View)
 
-  const ModalArea = scrollable ? Scroll : View
+  const ModalArea = withScrollContainer ? Scroll : View
 
   const _zIndex = React.useMemo(() => {
     return TypeGuards.isNumber(zIndex) ? { zIndex } : {}
   }, [zIndex])
 
   return (
-    <ModalArea
+    <View
       aria-hidden={!visible}
       css={[
         variantStyles.wrapper,
@@ -236,6 +233,7 @@ export const ModalContent: React.FC<ModalProps & { id: string }> = (
       ]}
     >
       <Overlay
+        debugName={debugName}
         visible={withOverlay ? visible : false}
         css={[
           variantStyles.backdrop,
@@ -243,10 +241,11 @@ export const ModalContent: React.FC<ModalProps & { id: string }> = (
             ? variantStyles['backdrop:visible']
             : variantStyles['backdrop:hidden'],
         ]}
+        scrollLocked={scrollLocked}
         {...overlayProps}
       />
 
-      <View css={variantStyles.innerWrapper}>
+      <ModalArea css={variantStyles.innerWrapper}>
         <View css={variantStyles.backdropPressable} onClick={close} />
         <View
           component='section'
@@ -272,6 +271,7 @@ export const ModalContent: React.FC<ModalProps & { id: string }> = (
             variantStyles={variantStyles}
             id={id}
             onPressClose={toggleAndReturn}
+            debugName={debugName}
           />
 
           <ModalBody
@@ -288,12 +288,12 @@ export const ModalContent: React.FC<ModalProps & { id: string }> = (
             </View>
           )}
         </View>
-      </View>
-    </ModalArea>
+      </ModalArea>
+    </View>
   )
 }
 
-export const Modal: React.FC<ModalProps> = (props) => {
+export const Modal = (props) => {
   const allProps = {
     ...Modal.defaultProps,
     ...props,
@@ -359,3 +359,4 @@ export const Modal: React.FC<ModalProps> = (props) => {
 }
 
 Modal.defaultProps = defaultProps
+

package/src/components/NumberIncrement/index.tsx

@@ -34,7 +34,6 @@ export type NumberIncrementProps = Pick<
   InputBaseProps,
   'debugName' | 'disabled' | 'label'
 > & {
-  variants?: ComponentVariants<typeof NumberIncrementPresets>['variants']
   styles?: StylesOf<NumberIncrementComposition>
   value: number
   onValueChange: (value: number) => void
@@ -54,7 +53,7 @@ export type NumberIncrementProps = Pick<
   _error?: string
   formatter?: FormatInputValueFunction
   placeholder?: string
-}
+} & ComponentVariants<typeof NumberIncrementPresets>
 
 export const NumberIncrement = (props: NumberIncrementProps) => {
   const {
@@ -63,6 +62,7 @@ export const NumberIncrement = (props: NumberIncrementProps) => {
   } = selectInputBaseProps(props)
 
   const {
+    responsiveVariants = {},
     variants = [],
     style = {},
     styles = {},
@@ -113,6 +113,7 @@ export const NumberIncrement = (props: NumberIncrementProps) => {
   const variantStyles = useDefaultComponentStyle<'u:NumberIncrement', typeof NumberIncrementPresets>(
     'u:NumberIncrement',
     {
+      responsiveVariants,
       variants,
       styles,
       rootElement: 'wrapper',

package/src/components/Overlay/index.tsx

@@ -8,18 +8,26 @@ import { Touchable, TouchableProps } from '../Touchable'
 import { View, ViewProps } from '../View'
 import { OverlayComposition, OverlayPresets } from './styles'
 import { NativeHTMLElement } from '../../types'
+import { usePopState } from '../../lib'
 
 export type OverlayProps<T extends NativeHTMLElement = 'div'> = {
   visible?: boolean
   styles?: StylesOf<OverlayComposition>
   onPress?: TouchableProps<'div'>['onClick']
+  scrollLocked?: boolean
 } & ComponentVariants<typeof OverlayPresets> & Omit<ViewProps<T>, 'variants' | 'responsiveVariants'>
 
 export * from './styles'
 
 export const Overlay = <T extends NativeHTMLElement>(overlayProps:OverlayProps<T>) => {
-  const { visible, responsiveVariants, variants, styles, ...props } =
-    overlayProps
+  const { 
+    visible, 
+    responsiveVariants, 
+    variants, 
+    styles, 
+    scrollLocked = true, 
+    ...props 
+  } = overlayProps
 
   const variantStyles = useDefaultComponentStyle('Overlay', {
     variants,
@@ -27,6 +35,8 @@ export const Overlay = <T extends NativeHTMLElement>(overlayProps:OverlayProps<T
     styles,
   })
 
+  usePopState(visible, props.onPress, scrollLocked)
+
   const Component = props.onClick || props.onPress ? Touchable : View
 
   return (

package/src/components/Pager/index.tsx

@@ -20,6 +20,7 @@ import 'slick-carousel/slick/slick.css'
 import 'slick-carousel/slick/slick-theme.css'
 import { View, ViewProps } from '../View'
 import { Touchable } from '../Touchable'
+import { ComponentCommonProps } from '../../types'
 
 export type PagerRef = {
   goTo: (page: number) => void
@@ -37,7 +38,8 @@ export type PagerProps = Settings &
     dotsProps?: DotsProps
     pageWrapperProps?: ViewProps<'div'>
     dotsDisabled?:boolean
-  }
+    disableSwipe?: boolean
+  } & ComponentCommonProps
 
 type DotsProps = Pick<PagerProps, 'page' | 'dotsDisabled'> & {
   childArray: ReactNode[]
@@ -84,6 +86,7 @@ const PagerComponent = (
     dots = false,
     dotsDisabled = false,
     infinite = false,
+    disableSwipe = false,
     onChange,
     footer,
     dotsProps,
@@ -126,6 +129,7 @@ const PagerComponent = (
         arrows={false}
         ref={sliderRef}
         dots={false}
+        swipe={!disableSwipe}
         infinite={infinite}
         accessibility={false}
         afterChange={onChange}

package/src/components/RadioInput/index.tsx

@@ -29,8 +29,7 @@ export type RadioGroupProps<T extends string|number> = WrapperProps & {
   onValueChange(value: T): void
   label: ReactNode
   styles?: StylesOf<RadioInputComposition>
-  variants?: ComponentVariants<typeof RadioInputPresets>['variants']
-}
+} & ComponentVariants<typeof RadioInputPresets>
 
 type OptionProps<T extends string|number> = {
   item: RadioOption<T>
@@ -119,13 +118,15 @@ export const RadioGroup = <T extends string|number>(
     options,
     value,
     onValueChange,
-    variants,
+    responsiveVariants = {},
+    variants = [],
     styles,
     disabled,
     debugName,
   } = others
 
   const variantStyles = useDefaultComponentStyle<'u:RadioInput', typeof RadioInputPresets>('u:RadioInput', {
+    responsiveVariants,
     variants,
     styles,
   })

package/src/components/SearchInput/index.tsx

@@ -0,0 +1,93 @@
+import { AnyFunction, IconPlaceholder, TypeGuards } from '@codeleap/common'
+import React, { useState } from 'react'
+import { TextInput, TextInputProps } from '../TextInput'
+import { ComponentWithDefaultProps } from '../../types/utility'
+
+export type SearchInputProps = {
+  placeholder: string
+  clearable?: boolean
+  debugName: string
+  clearIcon?: IconPlaceholder
+  searchIcon?: IconPlaceholder
+  debounce?: number
+  onSearchChange: (search: string) => void
+  onTypingChange?: (isTyping: boolean) => void
+  onValueChange?: (search: string) => void
+  onClear?: AnyFunction
+} & Partial<TextInputProps>
+
+export const SearchInput: ComponentWithDefaultProps<SearchInputProps> = (props) => {
+  const {
+    debugName,
+    onSearchChange,
+    onTypingChange,
+    onClear,
+    clearable,
+    placeholder,
+    clearIcon,
+    searchIcon,
+    debounce,
+    value,
+    onValueChange,
+    ...rest
+  } = {
+    ...SearchInput.defaultProps,
+    ...props,
+  }
+
+  const hasStateProps = !TypeGuards.isNil(value) && TypeGuards.isFunction(onValueChange)
+
+  const [search, setSearch] = hasStateProps ? [value, onValueChange] : useState('')
+  const setSearchTimeout = React.useRef<NodeJS.Timeout|null>(null)
+
+  const handleChangeSearch = (value: string) => {
+    setSearch(value)
+
+    if (TypeGuards.isNil(debounce)) {
+      onSearchChange?.(value)
+    } else {
+      if (!TypeGuards.isNil(setSearchTimeout.current)) {
+        clearTimeout(setSearchTimeout.current)
+      }
+      setSearchTimeout.current = setTimeout(() => {
+        onSearchChange(value)
+        onTypingChange?.(false)
+      }, debounce ?? 0)
+    }
+  }
+
+  const handleClear = () => {
+    setSearch('')
+    onSearchChange?.('')
+    if (TypeGuards.isFunction(onClear)) onClear?.()
+  }
+
+  const showClearIcon = !!search?.trim() && clearable
+
+  return (
+    <TextInput
+      value={search}
+      placeholder={placeholder}
+      onChangeText={(value) => {
+        onTypingChange?.(true)
+        handleChangeSearch(value)
+      }}
+      debugName={`Search ${debugName}`}
+      rightIcon={showClearIcon && {
+        name: clearIcon,
+        onPress: handleClear,
+      }}
+      leftIcon={{
+        name: searchIcon,
+      }}
+      {...rest}
+    />
+  )
+}
+
+SearchInput.defaultProps = {
+  debounce: null,
+  clearable: true,
+  clearIcon: 'close' as IconPlaceholder,
+  searchIcon: 'search' as IconPlaceholder,
+}

package/src/components/SegmentedControl/SegmentedControlOption.tsx

@@ -7,7 +7,7 @@ import { StylesOf } from '../../types'
 import { Text } from '../Text'
 import { Touchable } from '../Touchable'
 import { SegmentedControlComposition } from './styles'
-import { Icon } from '../Icon'
+import { Icon, IconProps } from '../Icon'
 
 type OptionRef = PropsOf<typeof Touchable>['ref']
 
@@ -17,6 +17,7 @@ export type SegmentedControlOptionProps = PropsOf<typeof Touchable> & {
   variantStyles?: StylesOf<SegmentedControlComposition>
   value?: any
   textProps?: Omit<PropsOf<typeof Text>, 'key'>
+  iconProps?: Partial<IconProps>
   icon?: IconPlaceholder
   ref?: OptionRef
 }
@@ -26,18 +27,24 @@ const SegmentedControlOptionCP = (props: SegmentedControlOptionProps, ref: Optio
     selected,
     onPress,
     style,
-    variantStyles,
+    variantStyles = {},
+    iconProps = {},
     label,
     icon,
     textProps,
-
     disabled,
     ...touchableProps
   } = props
 
+
+  const iconStyles = {
+    ...variantStyles.icon as object,
+    ...(selected ? variantStyles['icon:selected'] as object : {}),
+    ...(disabled ? variantStyles['icon:disabled'] as object : {}),
+  }
+
   return (
     <Touchable
-
       key={touchableProps.key}
       ref={ref}
       css={[
@@ -53,17 +60,16 @@ const SegmentedControlOptionCP = (props: SegmentedControlOptionProps, ref: Optio
       {
         !!icon && (
           <Icon
+            debugName={touchableProps?.debugName}
             name={icon}
-            css={[
-              variantStyles.icon,
-              selected && variantStyles['icon:selected'],
-              disabled && variantStyles['icon:disabled'],
-            ]}
+            style={iconStyles}
+            {...iconProps}
           />
         )
       }
       <Text
         text={label}
+        debugName={touchableProps?.debugName}
         css={[
           variantStyles.text,
           selected && variantStyles['text:selected'],

package/src/components/SegmentedControl/index.tsx

@@ -8,6 +8,7 @@ import { Touchable } from '../Touchable'
 import { SegmentedControlComposition } from './styles'
 import { motion, MotionProps, AnimationProps, ForwardRefComponent } from 'framer-motion'
 import { useAnimatedVariantStyles } from '../../lib'
+import { IconProps } from '../Icon'
 
 export type SegmentedControlOptionProps<T = string> = {
   label: string
@@ -46,6 +47,8 @@ export type SegmentedControlProps<T = string> = ComponentVariants<typeof Segment
   animationProps?: AnimationProps
   transitionDuration?: number
   RenderAnimatedView?: ForwardRefComponent<HTMLDivElement, any>
+  textProps?: Omit<PropsOf<typeof Text>, 'key'>
+  iconProps?: Partial<IconProps>
 }
 
 const defaultProps: Partial<SegmentedControlProps> = {
@@ -75,6 +78,8 @@ export const SegmentedControl = (props: SegmentedControlProps) => {
     transitionDuration,
     disabled,
     RenderAnimatedView: Bubble,
+    textProps = {},
+    iconProps = {},
     debugName,
     ...rest
   } = allProps
@@ -92,7 +97,7 @@ export const SegmentedControl = (props: SegmentedControlProps) => {
 
   const maxDivWidthRef = useRef(null)
 
-  const biggerWidth = React.useMemo(() => {
+  const largestWidth = React.useMemo(() => {
     return {
       width: maxDivWidthRef.current,
     }
@@ -104,7 +109,7 @@ export const SegmentedControl = (props: SegmentedControlProps) => {
     updater: () => {
       'worklet'
       return {
-        translateX: currentOptionIdx * biggerWidth.width,
+        translateX: currentOptionIdx * largestWidth.width,
         transition: {
           ease: 'easeInOut',
           duration: transitionDuration,
@@ -112,13 +117,13 @@ export const SegmentedControl = (props: SegmentedControlProps) => {
         ...animationProps,
       } as AnimationProps
     },
-    dependencies: [currentOptionIdx, biggerWidth.width],
+    dependencies: [currentOptionIdx, largestWidth.width],
   })
 
   const selectedBubbleStyles = [
     variantStyles.selectedBubble,
     disabled && variantStyles['selectedBubble:disabled'],
-    biggerWidth,
+    largestWidth,
   ]
 
   return (
@@ -146,8 +151,10 @@ export const SegmentedControl = (props: SegmentedControlProps) => {
             icon={o.icon}
             selected={value === o.value}
             variantStyles={variantStyles}
-            style={biggerWidth}
+            style={largestWidth}
             disabled={disabled}
+            textProps={textProps}
+            iconProps={iconProps}
             {...props?.touchableProps}
           />
         ))}