@codeleap/web 5.4.3 → 5.4.5

package/src/components/DatePicker/components/YearContent.tsx

@@ -0,0 +1,39 @@
+import { StyleRecord } from '@codeleap/styles'
+import { DatePickerProps, YearComponentProps } from '../types'
+import { DatePickerComposition } from '../styles'
+import { TypeGuards } from '@codeleap/types'
+import { View } from '../../View'
+import { Text } from '../../Text'
+import { useInputBasePartialStyles } from '../../InputBase/useInputBasePartialStyles'
+
+type Props = YearComponentProps & {
+  styles: StyleRecord<DatePickerComposition>
+  component: DatePickerProps['yearComponent']
+}
+
+export const YearContent = (props: Props) => {
+  const { value, year, styles, component: Component } = props
+
+  const isSelected = String(value)?.includes(year as string)
+
+  const partialStyles = useInputBasePartialStyles(styles, ['yearWrapper', 'year'], {
+    selected: isSelected,
+  })
+
+  if (TypeGuards.isFunction(Component)) {
+    return (
+      <Component
+        {...props}
+        value={value}
+        selected={isSelected}
+        styles={styles}
+      />
+    )
+  }
+
+  return (
+    <View style={partialStyles?.yearWrapper}>
+      <Text style={partialStyles?.year} text={year as string} />
+    </View>
+  )
+}

package/src/components/DatePicker/components/index.tsx

@@ -1,2 +1,4 @@
 export * from './OuterInput'
 export * from './Header'
+export * from './DayContent'
+export * from './YearContent'

package/src/components/DatePicker/index.tsx

@@ -1,13 +1,11 @@
-import { TypeGuards } from '@codeleap/types'
 import { useCallback, useConditionalState } from '@codeleap/hooks'
-import { Text, View } from '../components'
-import { DatePickerProps, DayComponentProps } from './types'
+import { View } from '../components'
+import { DatePickerProps } from './types'
 import ReactDatePicker from 'react-datepicker'
-import { Header, OuterInput } from './components'
+import { DayContent, Header, OuterInput, YearContent } from './components'
 import { useStylesFor } from '../../lib/hooks/useStylesFor'
 import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
 import { AnyRecord, IJSX, StyledComponentProps, useCompositionStyles } from '@codeleap/styles'
-import dayjs from 'dayjs'
 
 export * from './styles'
 export * from './types'
@@ -23,19 +21,19 @@ export function DatePicker(props: DatePickerProps) {
     outerInputComponent: OuterInputComponent,
     headerComponent: HeaderComponent,
     headerProps: _headerProps,
-    dayComponent: DayComponent,
-    dayProps,
-    yearComponent: YearComponent,
-    yearProps,
+    dayComponent,
+    dayProps: providedDayProps,
+    yearComponent,
+    yearProps: providedYearProps,
     datePickerProps,
     minDate,
     maxDate,
     startDate,
-    visible: _visible,
-    toggle: _toggle,
-    yearShow: _yearShow,
-    setYearShow: _setYearShow,
     disabled,
+    visible: providedVisible,
+    toggle: providedToggle,
+    yearShow: providedYearShow,
+    setYearShow: providedSetYearShow,
     ...otherProps
   } = {
     ...DatePicker.defaultProps,
@@ -44,87 +42,38 @@ export function DatePicker(props: DatePickerProps) {
 
   const styles = useStylesFor(DatePicker.styleRegistryName, style)
 
-  const [visible, toggle] = useConditionalState(_visible, _toggle, { initialValue: false })
-  const [yearShow, setYearShow] = useConditionalState(_yearShow, _setYearShow, { initialValue: false })
-
-  const DayContentComponent = useCallback((_param: DayComponentProps) => {
-    const param = {
-      ..._param,
-      ...dayProps,
-    }
-
-    const date = dayjs(param?.date).format('DD MMM YYYY');
-    const dateValue = value ? dayjs(value).format('DD MMM YYYY') : ''
-
-    const isSelected = date === dateValue
-
-    const isDisabled = [
-      dayjs(param?.date).isBefore(dayjs(minDate)),
-      dayjs(param?.date).isAfter(dayjs(maxDate))
-    ].some(Boolean)
-
-    const getStyles = (key) => {
-      return {
-        ...styles[key],
-        ...(isSelected && styles[`${key}:selected`]),
-        ...(!isSelected && isDisabled && styles[`${key}:disabled`]),
-      }
-    }
+  const compositionStyles = useCompositionStyles(['outerInput', 'header'], styles)
 
-    if (TypeGuards.isFunction(DayComponent)) {
-      return (
-        <DayComponent
-          {...param}
-          value={value}
-          disabled={isDisabled}
-          selected={isSelected}
-          styles={styles}
-        />
-      )
-    }
+  const [visible, toggle] = useConditionalState(providedVisible, providedToggle, { initialValue: false })
+  const [yearShow, setYearShow] = useConditionalState(providedYearShow, providedSetYearShow, { initialValue: false })
 
+  const DayContentComponent = useCallback(({ day, date }) => {
     return (
-      <View style={getStyles('dayWrapper')}>
-        <Text style={getStyles('day')} text={String(param?.day)} />
-      </View>
+      <DayContent
+        day={day}
+        date={date}
+        {...providedDayProps}
+        value={value}
+        minDate={minDate}
+        maxDate={maxDate}
+        component={dayComponent}
+        styles={styles}
+      />
     )
   }, [value])
 
-  const YearContentComponent = useCallback((_param) => {
-    const param = {
-      ..._param,
-      ...yearProps,
-    }
-
-    const isSelected = String(value)?.includes(param?.year)
-
-    const getStyles = (key) => {
-      return {
-        ...styles[key],
-        ...(isSelected && styles[`${key}:selected`]),
-      }
-    }
-
-    if (TypeGuards.isFunction(YearComponent)) {
-      return (
-        <YearComponent
-          {...param}
-          value={value}
-          selected={isSelected}
-          styles={styles}
-        />
-      )
-    }
-
+  const YearContentComponent = useCallback(({ year }) => {
     return (
-      <View style={getStyles('yearWrapper')}>
-        <Text style={getStyles('year')} text={param?.year} />
-      </View>
+      <YearContent
+        year={year}
+        {...providedYearProps}
+        value={value}
+        component={yearComponent}
+        styles={styles}
+      />
     )
   }, [value])
 
-  const compositionStyles = useCompositionStyles(['outerInput', 'header'], styles)
-
   return (
     <View style={styles.wrapper}>
       <ReactDatePicker

package/src/components/DatePicker/types.ts

@@ -1,12 +1,11 @@
 import { StylesOf } from '@codeleap/types'
-import { FormTypes } from '@codeleap/deprecated'
 import { ReactDatePickerCustomHeaderProps, ReactDatePickerProps } from 'react-datepicker'
 import { ActionIconProps, TextInputProps } from '../components'
 import { DatePickerComposition, DatePickerHeaderComposition } from './styles'
 import { StyledProp } from '@codeleap/styles'
 
 export type DatePickerOuterInputProps = TextInputProps & {
-  valueLabel: FormTypes.Label
+  valueLabel: React.ReactNode
   hideInput?: boolean
 }
 
@@ -31,7 +30,7 @@ export type DayComponentProps = {
 export type YearComponentProps = {
   year: string | number
   value: Date
-  selected: boolean
+  selected?: boolean
   styles: DatePickerProps['style']
 }
 
@@ -43,7 +42,6 @@ export type DatePickerProps =
   {
     style?: StyledProp<DatePickerComposition>
     hideInput?: boolean
-    value: Date
     outerInputComponent?: React.ComponentType<Partial<DatePickerOuterInputProps>>
     headerComponent?: React.ComponentType<Partial<DatePickerHeaderComponent>>
     headerProps?: Partial<DatePickerHeaderComponent>
@@ -51,12 +49,13 @@ export type DatePickerProps =
     dayProps?: Partial<DayComponentProps>
     yearComponent?: React.ComponentType<Partial<YearComponentProps>>
     yearProps?: Partial<YearComponentProps>
-    formatDate?: (date: Date | string) => FormTypes.Label
+    formatDate?: (date: Date | string) => React.ReactNode
     datePickerProps?: Omit<Partial<ReactDatePickerProps>, 'customInput' | 'renderCustomHeader' | RootDatePickerProps>
-    onValueChange: (date: Date) => void
     defaultValue?: Date
     visible?: boolean
     toggle?: () => void
     yearShow?: boolean
     setYearShow?: () => void
+    value: Date
+    onValueChange: (date: Date) => void
   }

package/src/components/InputBase/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import { TypeGuards } from '@codeleap/types'
 import { getRenderedComponent } from '@codeleap/utils'
 import { ActionIcon, ActionIconProps } from '../ActionIcon'
@@ -6,6 +6,7 @@ import { View } from '../View'
 import { useInputBaseStyles } from './styles'
 import { InputBaseProps } from './types'
 import { Text } from '../Text'
+import { StyledComponentWithProps } from '@codeleap/styles'
 
 export * from './styles'
 export * from './utils'
@@ -22,7 +23,7 @@ const KeyPassthrough = (props: React.PropsWithChildren<any>) => {
   return <React.Fragment>{props.children}</React.Fragment>
 }
 
-export const InputBase = (props: InputBaseProps) => {
+export const InputBase = forwardRef((props: InputBaseProps, ref) => {
   const allProps = {
     ...InputBase.defaultProps,
     ...props,
@@ -35,9 +36,9 @@ export const InputBase = (props: InputBaseProps) => {
     description,
     leftIcon,
     rightIcon,
-    wrapper,
+    wrapper: WrapperComponent,
     debugName,
-    innerWrapper,
+    innerWrapper: InnerWrapperComponent,
     focused,
     innerWrapperProps,
     wrapperProps,
@@ -50,9 +51,6 @@ export const InputBase = (props: InputBaseProps) => {
     ...otherProps
   } = allProps
 
-  const WrapperComponent = wrapper || View
-  const InnerWrapperComponent = innerWrapper || View
-
   const styles = useInputBaseStyles(allProps)
 
   const _leftIcon = getRenderedComponent<Partial<ActionIconProps>>(leftIcon, ActionIcon, {
@@ -101,6 +99,7 @@ export const InputBase = (props: InputBaseProps) => {
       {...otherProps}
       {...wrapperProps}
       style={styles.wrapperStyle}
+      ref={ref}
     >
       {
         order.map((key) => (
@@ -111,7 +110,7 @@ export const InputBase = (props: InputBaseProps) => {
       }
     </WrapperComponent>
   )
-}
+}) as StyledComponentWithProps<InputBaseProps>
 
 InputBase.elements = [
   'wrapper',
@@ -134,4 +133,6 @@ InputBase.defaultProps = {
   leftIcon: null,
   description: null,
   error: null,
+  wrapper: View,
+  innerWrapper: View,
 } as Partial<InputBaseProps>

package/src/components/InputBase/types.ts

@@ -15,13 +15,14 @@ export type InputBaseProps = React.PropsWithChildren<{
   innerWrapperProps?: any
   style?: StylesOf<InputBaseComposition>
   description?: React.ReactNode
-  debugName: string
+  debugName?: string
   focused?: boolean
   disabled?: boolean
   order?: OrderedParts[]
   labelAsRow?: boolean
   noError?: boolean
   innerWrapperRef?: React.MutableRefObject<HTMLDivElement | null>
+  ref?: React.MutableRefObject<HTMLDivElement>
 }>
 
 export type OmitDiff<T1, T2> = {

package/src/components/InputBase/useInputBase.ts

@@ -0,0 +1,56 @@
+import { useMemo, useRef } from 'react'
+// import { useWrappingScrollable } from ''
+import { Field, IFieldRef, fields, useField } from '@codeleap/form'
+import { AnyRecord, TypeGuards } from '@codeleap/types'
+
+export function useInputBase<V,  T extends Field<V, any, any, unknown> = Field<V, any, any, unknown>>(
+  field: T,
+  defaultField: (options?: AnyRecord) => T = fields.text as () => T,
+  internalState: { value: V; onValueChange: (value: V) => void },
+  params: Partial<IFieldRef<V>> = {}, 
+  deps: any[] = []
+) {
+  const { value, onValueChange } = internalState
+
+  const hasInternalState = useMemo(() => TypeGuards.isFunction(onValueChange) && !TypeGuards.isNil(value), [])
+
+  const wrapperRef = useRef<HTMLDivElement>()
+
+  const innerInputRef = useRef<HTMLInputElement>(null)
+
+  // const scrollable = useWrappingScrollable()
+
+  const fieldHandle = hasInternalState ? {} as Partial<ReturnType<typeof useField>> : useField<V, T>(field as T, [
+    {
+      blur() {
+        innerInputRef.current.blur()
+      },
+      focus() {
+        innerInputRef.current.focus()
+      },
+      getValue() {
+        return innerInputRef.current.value as V
+      },
+      scrollIntoView() {
+        // @todo implement
+        return
+        // return field.measurePosition(wrapperRef).then((measureResult) => {
+        //   field.scrollTo(scrollable, measureResult)
+        // })
+      },
+      ...params,
+    },
+    deps
+  ] as unknown as Parameters<T['use']>, defaultField)
+
+  const validation = fieldHandle?.validation
+
+  return {
+    fieldHandle,
+    validation,
+    wrapperRef,
+    innerInputRef,
+    inputValue: (hasInternalState ? value : fieldHandle?.value) as V,
+    onInputValueChange: hasInternalState ? onValueChange : fieldHandle?.setValue,
+  }
+}

package/src/components/InputBase/useInputBasePartialStyles.ts

@@ -0,0 +1,37 @@
+import { CSSProperties, useMemo } from 'react'
+
+export function useInputBasePartialStyles<C extends string, S extends Record<string, boolean>>(
+  styles: Record<C, CSSProperties>,
+  styleKeys: Array<C | [C, boolean]>,
+  states: S,
+) {
+  return useMemo(() => {
+    return styleKeys.reduce((acc, value) => {
+      const [key, overrideWithDefault] = Array.isArray(value) ? value : [value, true]
+
+      const result = Object.entries(states).reduce((acc, [state, is]) => {
+        if (!is) return acc
+
+        const style = styles?.[`${key}:${state}` as C]
+
+        if (!style) return acc
+
+        return {
+          ...acc,
+          ...styles[`${key}:${state}` as C]
+        }
+      }, {})
+
+      if (overrideWithDefault && !!styles?.[key]) {
+        acc[key] = {
+          ...styles[key],
+          ...result,
+        }
+      } else {
+        acc[key] = result
+      }
+
+      return acc
+    }, {} as Record<C, CSSProperties>)
+  }, [states])
+}

package/src/components/Modal/index.tsx

@@ -1,6 +1,6 @@
 import { TypeGuards } from '@codeleap/types'
 import { onMount, onUpdate } from '@codeleap/hooks'
-import React, { useId, useRef } from 'react'
+import React, { useCallback, useId, useRef } from 'react'
 import ReactDOM from 'react-dom'
 import { v4 } from 'uuid'
 import { View } from '../View'
@@ -76,7 +76,58 @@ const ModalDefaultHeader = (props: ModalHeaderProps) => {
   )
 }
 
-export const ModalContent = (modalProps: ModalProps & { id: string }) => {
+const ModalWrapper = ({ styles, visible, modalId, autoIndex, children, closeOnEscPress }) => {
+  const index = modalsState.use(state => state.indexes?.[modalId] ?? 0)
+
+  const modalRef = useRef(null)
+
+  const handleTabKeyPress = useCallback((e: React.KeyboardEvent<HTMLDivElement>, { firstElement, lastElement }: Record<'firstElement' | 'lastElement', HTMLDivElement>) => {
+    if (e.key === 'Tab' || e?.keyCode === 9) {
+      if (e.shiftKey && document.activeElement === firstElement) {
+        e.preventDefault()
+        lastElement.focus()
+      } else if (
+        !e.shiftKey &&
+        document.activeElement === lastElement
+      ) {
+        e.preventDefault()
+        firstElement.focus()
+      }
+    }
+  }, [])
+
+  onUpdate(() => {
+    if (visible) {
+      const modalElement = modalRef.current
+
+      const focusableElements = modalElement.querySelectorAll('[tabindex]:not([tabindex="-1"])') as NodeListOf<HTMLDivElement>
+      const firstElement = focusableElements[0]
+      const lastElement = focusableElements[focusableElements.length - 1]
+
+      modalElement.addEventListener('keydown', (e) => handleTabKeyPress(e, { firstElement, lastElement }))
+      modalElement.addEventListener('keydown', closeOnEscPress)
+
+      return () => {
+        modalElement.removeEventListener('keydown', (e) => handleTabKeyPress(e, { firstElement, lastElement }))
+        modalElement.removeEventListener('keydown', closeOnEscPress)
+      }
+    }
+  }, [visible])
+
+  return <View
+    ref={modalRef}
+    aria-hidden={!visible}
+    style={[
+      styles.wrapper,
+      visible ? styles['wrapper:visible'] : styles['wrapper:hidden'],
+      autoIndex ? { zIndex: index } : null,
+    ]}
+  >
+    {children}
+  </View>
+}
+
+const ModalContent = (modalProps: ModalProps & { id: string }) => {
   const {
     children,
     visible,
@@ -89,14 +140,11 @@ export const ModalContent = (modalProps: ModalProps & { id: string }) => {
     withOverlay,
     showClose,
     closeIconName,
-    scroll,
-    renderModalBody,
+    renderModalBody: ModalBody,
     closeOnEscape,
     onClose,
     overlayProps,
     dismissOnBackdrop,
-    zIndex,
-    withScrollContainer,
     debugName,
     backdropProps,
     alterHistory,
@@ -107,10 +155,7 @@ export const ModalContent = (modalProps: ModalProps & { id: string }) => {
 
   const styles = useStylesFor(Modal.styleRegistryName, style)
 
-  const index = modalsState.use(state => state.indexes?.[modalId] ?? 0)
-
   const id = useId()
-  const modalRef = useRef(null)
 
   const toggleAndReturn = () => {
     toggle?.()
@@ -122,7 +167,7 @@ export const ModalContent = (modalProps: ModalProps & { id: string }) => {
     if (TypeGuards.isFunction(onClose)) onClose()
   }
 
-  function closeOnEscPress(e: React.KeyboardEvent<HTMLDivElement>) {
+  const closeOnEscPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
     if (!closeOnEscape) return null
 
     if (e?.key === 'Escape' || e?.keyCode === 27) {
@@ -130,62 +175,20 @@ export const ModalContent = (modalProps: ModalProps & { id: string }) => {
     }
   }
 
-  const handleTabKeyPress = (e: React.KeyboardEvent<HTMLDivElement>, { firstElement, lastElement }: Record<'firstElement' | 'lastElement', HTMLDivElement>) => {
-    if (e.key === 'Tab' || e?.keyCode === 9) {
-      if (e.shiftKey && document.activeElement === firstElement) {
-        e.preventDefault()
-        lastElement.focus()
-      } else if (
-        !e.shiftKey &&
-        document.activeElement === lastElement
-      ) {
-        e.preventDefault()
-        firstElement.focus()
-      }
-    }
-  }
-
-  onUpdate(() => {
-    if (visible) {
-      const modalElement = modalRef.current
-
-      const focusableElements = modalElement.querySelectorAll('[tabindex]:not([tabindex="-1"])') as NodeListOf<HTMLDivElement>
-      const firstElement = focusableElements[0]
-      const lastElement = focusableElements[focusableElements.length - 1]
-
-      modalElement.addEventListener('keydown', (e) => handleTabKeyPress(e, { firstElement, lastElement }))
-      modalElement.addEventListener('keydown', closeOnEscPress)
-
-      return () => {
-        modalElement.removeEventListener('keydown', (e) => handleTabKeyPress(e, { firstElement, lastElement }))
-        modalElement.removeEventListener('keydown', closeOnEscPress)
-      }
-    }
-  }, [visible])
+  const close = (closable && dismissOnBackdrop) ? toggleAndReturn : () => null
 
   useIsomorphicEffect(() => {
     const modal = document.getElementById(id)
     if (modal) modal.focus()
   }, [id])
 
-  const close = (closable && dismissOnBackdrop) ? toggleAndReturn : () => null
-
-  const ModalBody = renderModalBody || View
-
-  const _zIndex = React.useMemo(() => {
-    return TypeGuards.isNumber(zIndex) ? { zIndex } : {}
-  }, [zIndex])
-
   return (
-    <View
-      ref={modalRef}
-      aria-hidden={!visible}
-      style={[
-        styles.wrapper,
-        visible ? styles['wrapper:visible'] : styles['wrapper:hidden'],
-        autoIndex ? { zIndex: index } : null,
-        _zIndex,
-      ]}
+    <ModalWrapper
+      styles={styles}
+      modalId={modalId}
+      autoIndex={autoIndex}
+      visible={visible}
+      closeOnEscPress={closeOnEscPress}
     >
       <Overlay
         debugName={debugName}
@@ -240,7 +243,7 @@ export const ModalContent = (modalProps: ModalProps & { id: string }) => {
           ) : null}
         </View>
       </View>
-    </View>
+    </ModalWrapper>
   )
 }
 
@@ -328,14 +331,11 @@ Modal.defaultProps = {
   closable: true,
   withOverlay: true,
   showClose: true,
-  scroll: false,
   closeOnEscape: true,
   renderHeader: ModalDefaultHeader,
-  keepMounted: true,
+  renderModalBody: View,
   dismissOnBackdrop: true,
-  zIndex: null,
   description: null,
-  withScrollContainer: false,
   scrollLock: false,
   autoIndex: false,
   alterHistory: false,

package/src/components/Modal/types.ts

@@ -19,20 +19,16 @@ export type ModalProps =
     showClose?: boolean
     closable?: boolean
     dismissOnBackdrop?: boolean
-    scroll?: boolean
     header?: React.ReactElement
     footer?: React.ReactNode
     withOverlay?: boolean
     closeIconName?: AppIcon
-    keepMounted?: boolean
     renderHeader?: (props: ModalHeaderProps) => React.ReactElement
     debugName?: string
     closeButtonProps?: Partial<ActionIconProps>
     closeOnEscape?: boolean
     onClose?: () => void
     overlayProps?: Partial<OverlayProps>
-    zIndex?: number
-    withScrollContainer?: boolean
     scrollLock?: boolean
     backdropProps?: Partial<TouchableProps>
     alterHistory?: boolean