@codeleap/web 3.1.2 → 3.2.1

package/src/components/Modal/index.tsx

@@ -1,65 +1,173 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react'
-
 import {
   AnyFunction,
   ComponentVariants,
   IconPlaceholder,
+  TypeGuards,
+  onMount,
   onUpdate,
   useDefaultComponentStyle,
   useNestedStylesByKey,
+  useUnmount,
+  StylesOf,
+  PropsOf,
+  useIsomorphicEffect,
 } from '@codeleap/common'
 
-import { ReactNode, useEffect, useId, useLayoutEffect, useRef } from 'react'
+import React, { useId, useRef } from 'react'
 import ReactDOM from 'react-dom'
-
 import { v4 } from 'uuid'
-
-import { StylesOf } from '../../types/utility'
-import { Button } from '../Button'
 import { View } from '../View'
 import { Text } from '../Text'
-import { Overlay } from '../Overlay'
-
-import {ModalComposition,ModalPresets} from './styles'
-import { ActionIcon } from '../ActionIcon'
+import { Overlay, OverlayProps } from '../Overlay'
+import { ModalComposition, ModalPresets } from './styles'
+import { ActionIcon, ActionIconProps } from '../ActionIcon'
+import { Scroll } from '../Scroll'
 
 export * from './styles'
 
-export type ModalProps = React.PropsWithChildren<{
-  visible: boolean
-  title?: React.ReactNode
-  toggle: AnyFunction
-  styles?: StylesOf<ModalComposition>
-  accessible?: boolean
-  showClose?: boolean
-  closable?: boolean
-  scroll?: boolean
-  footer?: ReactNode
-  debugName?: string
-} & ComponentVariants<typeof ModalPresets>
->
+export type ModalProps =
+  {
+    visible: boolean
+    children?: React.ReactNode
+    title?: React.ReactNode | string
+    description?: React.ReactNode | string
+    renderModalBody?: (props: ModalBodyProps) => React.ReactElement
+    toggle: AnyFunction
+    styles?: StylesOf<ModalComposition>
+    style?: React.CSSProperties
+    accessible?: boolean
+    showClose?: boolean
+    closable?: boolean
+    dismissOnBackdrop?: boolean
+    scroll?: boolean
+    header?: React.ReactElement
+    footer?: React.ReactNode
+    withOverlay?: boolean
+    closeIconName?: IconPlaceholder
+    keepMounted?: boolean
+    renderHeader?: (props: ModalHeaderProps) => React.ReactElement
+    debugName?: string
+    closeButtonProps?: Partial<ActionIconProps>
+    closeOnEscape?: boolean
+    onClose?: () => void
+    overlayProps?: Partial<OverlayProps>
+    zIndex?: number
+    scrollable?: boolean
+  } & ComponentVariants<typeof ModalPresets>
+
 function focusModal(event: FocusEvent, id: string) {
   event.preventDefault()
   const modal = document.getElementById(id)
-  if (modal) {
-    modal.focus()
-  }
+  if (modal) modal.focus()
+}
+
+type ModalBodyProps = {
+  id: string
+  variantStyles: PropsOf<ModalComposition>
+}
+
+type ModalHeaderProps = Partial<Omit<ModalProps, 'children'>> & {
+  id: string
+  variantStyles: PropsOf<ModalComposition>
+  onPressClose: () => void
+}
+
+const ModalDefaultHeader = (props: ModalHeaderProps) => {
+  const {
+    id,
+    variantStyles,
+    title,
+    showClose,
+    closable,
+    closeIconName,
+    onPressClose,
+    closeButtonProps = {},
+    description,
+  } = props
+
+  const closeButtonStyles = useNestedStylesByKey('closeButton', variantStyles)
+
+  const showCloseButton = showClose && closable
+
+  const hasHeader = !!title || !!description || showCloseButton
+
+  if (!hasHeader) return null
+
+  return (
+    <View
+      id={`${id}-header`}
+      component='header'
+      css={variantStyles.header}
+      className='modal-header header'
+    >
+      <View id={`${id}-title`} css={variantStyles.titleWrapper}>
+        {TypeGuards.isString(title) ? (
+          <Text text={title} css={variantStyles.title} />
+        ) : (
+          title
+        )}
+
+        {showCloseButton && (
+          <ActionIcon
+            icon={closeIconName as IconPlaceholder}
+            onPress={onPressClose}
+            {...closeButtonProps}
+            styles={closeButtonStyles}
+          />
+        )}
+      </View>
+
+      {TypeGuards.isString(description) ? (
+        <Text text={description} style={variantStyles.description} />
+      ) : (
+        description
+      )}
+    </View>
+  )
 }
+
+const defaultProps: Partial<ModalProps> = {
+  title: '',
+  closeIconName: 'close' as IconPlaceholder,
+  closable: true,
+  withOverlay: true,
+  showClose: true,
+  scroll: false,
+  closeOnEscape: true,
+  renderHeader: ModalDefaultHeader,
+  keepMounted: true,
+  dismissOnBackdrop: true,
+  zIndex: null,
+  description: null,
+  scrollable: false,
+}
+
 export const ModalContent: React.FC<ModalProps & { id: string }> = (
   modalProps,
 ) => {
   const {
     children,
-    closable = true,
     visible,
-    title = '',
+    title,
     toggle,
-    responsiveVariants,
-    variants,
+    variants = [],
     styles,
-    showClose = true,
     footer,
+    style = {},
+    renderHeader: ModalHeader,
+    closable,
+    withOverlay,
+    showClose,
+    responsiveVariants = {},
+    closeIconName,
+    scroll,
+    renderModalBody,
+    closeOnEscape,
+    onClose,
+    overlayProps = {},
+    dismissOnBackdrop,
+    zIndex,
+    scrollable,
     ...props
   } = modalProps
 
@@ -71,45 +179,84 @@ export const ModalContent: React.FC<ModalProps & { id: string }> = (
     styles,
   })
 
+  const toggleAndReturn = () => {
+    toggle?.()
+    window.history.back()
+
+    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)
+  })
+
   function closeOnEscPress(e: React.KeyboardEvent<HTMLDivElement>) {
-    if (e.key === 'Escape') {
-      toggle()
+    if (!closeOnEscape) return null
+
+    if (e?.key === 'Escape' || e?.keyCode === 27) {
+      toggleAndReturn()
     }
   }
 
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     const modal = document.getElementById(id)
-    if (modal) {
-      modal.focus()
-    }
+    if (modal) modal.focus()
   }, [id])
 
-  const closeButtonStyles = useNestedStylesByKey('closeButton', variantStyles)
-  const close = closable ? toggle : () => {}
+  const close = (closable && dismissOnBackdrop) ? toggleAndReturn : () => {}
+
+  const ModalBody = renderModalBody || (scroll ? Scroll : View)
+
+  const ModalArea = scrollable ? Scroll : View
+
+  const _zIndex = React.useMemo(() => {
+    return TypeGuards.isNumber(zIndex) ? { zIndex } : {}
+  }, [zIndex])
+
   return (
-    <View
+    <ModalArea
       aria-hidden={!visible}
-      css={[variantStyles.wrapper, visible ? variantStyles['wrapper:visible'] : variantStyles['wrapper:hidden']]}
+      css={[
+        variantStyles.wrapper,
+        _zIndex,
+        visible
+          ? variantStyles['wrapper:visible']
+          : variantStyles['wrapper:hidden'],
+      ]}
     >
       <Overlay
-        visible={visible}
-        
-        css={[variantStyles.backdrop, visible ? variantStyles['backdrop:visible'] : variantStyles['backdrop:hidden'] ]}
+        visible={withOverlay ? visible : false}
+        css={[
+          variantStyles.backdrop,
+          visible
+            ? variantStyles['backdrop:visible']
+            : variantStyles['backdrop:hidden'],
+        ]}
+        {...overlayProps}
       />
-      <View css={variantStyles.innerWrapper} >
-        <View css={variantStyles.backdropPressable} onClick={close}/>
+
+      <View css={variantStyles.innerWrapper}>
+        <View css={variantStyles.backdropPressable} onClick={close} />
         <View
           component='section'
-          css={[variantStyles.box, visible ? variantStyles['box:visible'] : variantStyles['box:hidden']]}
+          css={[
+            variantStyles.box,
+            visible
+              ? variantStyles['box:visible']
+              : variantStyles['box:hidden'],
+            style,
+          ]}
           className='content'
           onKeyDown={closeOnEscPress}
           tabIndex={0}
@@ -117,30 +264,24 @@ export const ModalContent: React.FC<ModalProps & { id: string }> = (
           aria-modal={true}
           role='dialog'
           aria-describedby={`${id}-title`}
-          aria-label='Close the modal by presing Escape key'
+          aria-label='Close the modal by pressing Escape key'
           {...props}
         >
-          {(title || showClose) && (
-            <View
-              component='header'
-              className='modal-header header'
-              id={`${id}-title`}
-              css={variantStyles.header}
-            >
-              {typeof title === 'string' ? <Text text={title} css={variantStyles.title} /> : title}
-
-              {showClose && closable && (
-                <ActionIcon
-                  icon={'close' as IconPlaceholder}
-                  
-                  onPress={toggle}
-                  styles={closeButtonStyles}
-                />
-              )}
-            </View>
-          )}
+          <ModalHeader
+            {...modalProps}
+            variantStyles={variantStyles}
+            id={id}
+            onPressClose={toggleAndReturn}
+          />
+
+          <ModalBody
+            css={variantStyles.body}
+            variantStyles={variantStyles}
+            id={id}
+          >
+            {children}
+          </ModalBody>
 
-          <View css={variantStyles.body}>{children}</View>
           {footer && (
             <View component='footer' css={variantStyles.footer}>
               {footer}
@@ -148,42 +289,73 @@ export const ModalContent: React.FC<ModalProps & { id: string }> = (
           )}
         </View>
       </View>
-    </View>
+    </ModalArea>
   )
 }
 
-export const Modal: React.FC<ModalProps> = ({ accessible, ...props }) => {
+export const Modal: React.FC<ModalProps> = (props) => {
+  const allProps = {
+    ...Modal.defaultProps,
+    ...props,
+  }
+
+  const {
+    accessible,
+    keepMounted,
+    visible,
+  } = allProps
+
   const modalId = useRef(v4())
+  const [renderStatus, setRenderStatus] = React.useState(
+    keepMounted ? 'mounted' : 'unmounted',
+  )
 
-  useEffect(() => {
+  // onUpdate(() => {
+  //   if (!keepMounted) {
+  //     if (visible) {
+  //       setRenderStatus('mounted')
+  //     } else {
+  //       setTimeout(() => setRenderStatus('unmounted'), 500)
+  //     }
+  //   }
+  // }, [keepMounted, visible])
+
+  onMount(() => {
     if (accessible) {
-      const currentId = modalId.current
+      const currentId = modalId
       const appRoot = document.body
       appRoot.addEventListener('focusin', (e) => focusModal(e, currentId))
       return () => appRoot.removeEventListener('focusin', (e) => focusModal(e, currentId))
     }
-  }, [])
+  })
 
-  useEffect(() => {
+  onUpdate(() => {
     if (accessible) {
       const appRoot = document.body
-      appRoot.setAttribute('aria-hidden', `${props.visible}`)
+      appRoot.setAttribute('aria-hidden', `${visible}`)
       appRoot.setAttribute('tabindex', `${-1}`)
     }
-  }, [props.visible])
+  }, [visible])
 
-  if (accessible) {
-    if (props.visible) {
+  onUpdate(() => {
+    if (visible) {
       document.body.style.overflow = 'hidden'
-      return ReactDOM.createPortal(
-        <ModalContent {...props} id={modalId.current} />,
-        document.body,
-      )
     } else {
       document.body.style.overflow = 'visible'
-      return null
     }
-  }
+  }, [visible])
+
+  const content = <ModalContent {...props} id={modalId.current} />
+
+  // if (renderStatus === 'unmounted') return null
+
+  if (typeof window === 'undefined') return content
+
+  return ReactDOM.createPortal(
+    content,
+    document.body,
+  )
 
-  return <ModalContent {...props} id={modalId.current} />
 }
+
+Modal.defaultProps = defaultProps

package/src/components/Modal/styles.ts

@@ -1,7 +1,4 @@
-import {
-  createDefaultVariantFactory,
-  includePresets,
-} from '@codeleap/common'
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { ActionIconComposition } from '../ActionIcon'
 
 export type AnimatableParts = 'box' | 'backdrop' | 'wrapper'
@@ -14,6 +11,8 @@ export type ModalParts =
   | 'title'
   | 'innerWrapper'
   | 'backdropPressable'
+  | 'description'
+  | 'titleWrapper'
   | `closeButton${Capitalize<ActionIconComposition>}`
 
 export type ModalComposition =

package/src/components/NumberIncrement/index.tsx

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx, CSSObject } from '@emotion/react'
 import * as React from 'react'
 import {
   ComponentVariants,

package/src/components/Overlay/index.tsx

@@ -1,23 +1,23 @@
+import React from 'react'
 import {
   ComponentVariants,
-  SmartOmit,
   StylesOf,
   useDefaultComponentStyle,
 } from '@codeleap/common'
 import { Touchable, TouchableProps } from '../Touchable'
 import { View, ViewProps } from '../View'
 import { OverlayComposition, OverlayPresets } from './styles'
+import { NativeHTMLElement } from '../../types'
 
-export type OverlayProps = {
+export type OverlayProps<T extends NativeHTMLElement = 'div'> = {
   visible?: boolean
   styles?: StylesOf<OverlayComposition>
   onPress?: TouchableProps<'div'>['onClick']
-} & ComponentVariants<typeof OverlayPresets> &
-  Partial<SmartOmit<ViewProps<'div'>, 'variants' | 'responsiveVariants'>>
+} & ComponentVariants<typeof OverlayPresets> & Omit<ViewProps<T>, 'variants' | 'responsiveVariants'>
 
 export * from './styles'
 
-export const Overlay: React.FC<OverlayProps> = (overlayProps) => {
+export const Overlay = <T extends NativeHTMLElement>(overlayProps:OverlayProps<T>) => {
   const { visible, responsiveVariants, variants, styles, ...props } =
     overlayProps
 
@@ -30,12 +30,13 @@ export const Overlay: React.FC<OverlayProps> = (overlayProps) => {
   const Component = props.onClick || props.onPress ? Touchable : View
 
   return (
+    // @ts-ignore
     <Component
-      css={{
-        ...variantStyles.wrapper,
-        transition: 'opacity 0.2s ease',
-        ...(visible ? variantStyles['wrapper:visible'] : {}),
-      }}
+      css={[
+        { transition: 'opacity 0.2s ease' },
+        variantStyles.wrapper,
+        visible ? variantStyles['wrapper:visible'] : {},
+      ]}
       {...props}
     />
   )

package/src/components/Pager/index.tsx

@@ -0,0 +1,166 @@
+import {
+  ComponentVariants,
+  StylesOf,
+  onUpdate,
+  useDefaultComponentStyle,
+} from '@codeleap/common'
+import Slider, { Settings } from 'react-slick'
+import { PagerComposition, PagerPresets } from './styles'
+import React, {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  ReactNode,
+  ReactElement,
+  CSSProperties,
+} from 'react'
+
+import 'slick-carousel/slick/slick.css'
+import 'slick-carousel/slick/slick-theme.css'
+import { View, ViewProps } from '../View'
+import { Touchable } from '../Touchable'
+
+export type PagerRef = {
+  goTo: (page: number) => void
+}
+
+export type PagerProps = Settings &
+  ComponentVariants<typeof PagerPresets> & {
+    styles?: StylesOf<PagerComposition>
+    page?: number
+    style?: CSSProperties
+    children: ReactNode
+    onChange?: (page: number) => void
+    renderPageWrapper?: React.FC
+    footer?: ReactElement
+    dotsProps?: DotsProps
+    pageWrapperProps?: ViewProps<'div'>
+    dotsDisabled?:boolean
+  }
+
+type DotsProps = Pick<PagerProps, 'page' | 'dotsDisabled'> & {
+  childArray: ReactNode[]
+  onPress?: (index: number) => void
+  variantStyles: StylesOf<PagerComposition>
+}
+
+const Dots = ({ page, childArray, onPress, variantStyles, dotsDisabled }: DotsProps) => {
+  return (
+    <View style={variantStyles.dots}>
+      {childArray.map((_, index) => {
+        const isSelected = index === page
+        const css = [
+          variantStyles[isSelected ? 'dot:selected' : 'dot'],
+          dotsDisabled && variantStyles['dot:disabled'],
+        ]
+
+        return (
+          <Touchable
+            key={index}
+            onPress={() => onPress?.(index)}
+            css={css}
+            disabled={dotsDisabled}
+          />
+        )
+      })}
+    </View>
+  )
+}
+
+const PagerComponent = (
+  props: PagerProps,
+  ref: React.ForwardedRef<PagerRef>,
+) => {
+  const sliderRef = useRef<Slider>()
+  const {
+    styles,
+    style,
+    variants,
+    children,
+    renderPageWrapper,
+    responsiveVariants,
+    page,
+    dots = false,
+    dotsDisabled = false,
+    infinite = false,
+    onChange,
+    footer,
+    dotsProps,
+    pageWrapperProps,
+    ...rest
+  } = props
+
+  const variantStyles = useDefaultComponentStyle<
+    'u:Pager',
+    typeof PagerPresets
+  >('u:Pager', {
+    variants,
+    responsiveVariants,
+    styles,
+    rootElement: 'wrapper',
+  })
+
+  const childArray = React.Children.toArray(children)
+  const PageWrapper = renderPageWrapper || View
+
+  const goTo = useCallback(
+    (page: number) => {
+      if (sliderRef.current) sliderRef.current.slickGoTo(page)
+    },
+    [sliderRef?.current],
+  )
+
+  useImperativeHandle(ref, () => ({
+    goTo,
+  }))
+
+  onUpdate(() => {
+    goTo(page)
+  }, [page])
+
+  return (
+    <View css={[variantStyles.wrapper, style]}>
+      <Slider
+        {...rest}
+        arrows={false}
+        ref={sliderRef}
+        dots={false}
+        infinite={infinite}
+        accessibility={false}
+        afterChange={onChange}
+      >
+        {childArray.map((child, index) => {
+          return (
+            <PageWrapper
+              key={index}
+              css={variantStyles.pageWrapper}
+              {...pageWrapperProps}
+            >
+              {child}
+            </PageWrapper>
+          )
+        })}
+      </Slider>
+
+      <View css={variantStyles.footerWrapper}>
+        {footer}
+
+        {dots && (
+          <Dots
+            page={page}
+            onPress={onChange}
+            childArray={childArray}
+            variantStyles={variantStyles}
+            dotsDisabled={dotsDisabled}
+            {...dotsProps}
+          />
+        )}
+      </View>
+    </View>
+  )
+}
+
+export const Pager = forwardRef(PagerComponent)
+
+export * from './styles'

package/src/components/Pager/styles.ts

@@ -0,0 +1,14 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
+
+export type PagerComposition =
+  | 'wrapper'
+  | 'dot'
+  | 'dot:selected'
+  | 'dots'
+  | 'pageWrapper'
+  | 'footerWrapper'
+
+const createPagerStyle = createDefaultVariantFactory<PagerComposition>()
+
+export const PagerPresets = includePresets((styles) => createPagerStyle(() => ({ wrapper: styles })),
+)