@codeleap/mobile 3.25.0 → 3.25.3

package/src/components/Scroll/styles.ts

@@ -1,2 +1,7 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 
 export type ScrollComposition = 'wrapper' |'content'
+
+const createScrollStyle = createDefaultVariantFactory<ScrollComposition>()
+
+export const ScrollPresets = includePresets(style => createScrollStyle(() => ({ content: style })))

package/src/components/Sections/index.tsx

@@ -1,118 +1,168 @@
-import React, { forwardRef } from 'react'
-import { useCallback } from '@codeleap/common'
-import { RefreshControl, SectionList } from 'react-native'
-import { View } from '../View'
+import * as React from 'react'
+import { forwardRef } from 'react'
+import {
+  useDefaultComponentStyle,
+  ComponentVariants,
+  useCallback,
+} from '@codeleap/common'
+
+import {
+  RefreshControl,
+  StyleSheet,
+  RefreshControlProps,
+  SectionListRenderItemInfo,
+  SectionListProps as RNSectionListProps,
+  SectionList,
+} from 'react-native'
+import { View, ViewProps } from '../View'
+import { EmptyPlaceholderProps } from '../EmptyPlaceholder'
+import { StylesOf } from '../../types'
 import { useKeyboardPaddingStyle } from '../../utils'
-import { SectionListProps } from './types'
-import { AnyRecord, IJSX, StyledComponentProps, StyledComponentWithProps } from '@codeleap/styles'
-import { MobileStyleRegistry } from '../../Registry'
-import { useStylesFor } from '../../hooks'
-
+import { SectionsComposition, SectionsPresets } from './styles'
 export * from './styles'
-export * from './types'
-
-export const Sections = forwardRef<SectionList, SectionListProps>((sectionsProps, ref) => {
-  const {
-    style,
-    onRefresh,
-    component,
-    refreshing,
-    placeholder,
-    keyboardAware,
-    refreshControlProps,
-    contentContainerStyle,
-    fakeEmpty,
-    refreshControl,
-    ...props
-  } = {
-    ...Sections.defaultProps,
-    ...sectionsProps,
-  }
-
-  const styles = useStylesFor(Sections.styleRegistryName, style)
-
-  const renderSeparator = useCallback(() => {
-    return <View style={styles?.separator} />
-  }, [styles?.separator])
-
-  const getItemPosition = (section, itemIdx) => {
-    const listLength = section?.length || 0
-
-    const isFirst = itemIdx === 0
-    const isLast = itemIdx === listLength - 1
-    const isOnly = isFirst && isLast
-
-    return { isFirst, isLast, isOnly }
-  }
-
-  const getSectionPosition = (data) => {
-    const listLength = props.sections?.length || 0
-
-    const isFirst = data.section.key === props.sections[0].key
-    const isLast = data.section.key === props.sections[listLength - 1].key
-    const isOnly = isFirst && isLast
-
-    return { isFirst, isLast, isOnly }
-  }
-
-  const renderSectionHeader = useCallback((data) => {
-    if (!props?.renderSectionHeader) return null
-
-    return props?.renderSectionHeader({ ...data, ...getSectionPosition(data) })
-  }, [props?.renderSectionHeader, props?.sections?.length])
-
-  const renderSectionFooter = useCallback((data) => {
-    if (!props?.renderSectionFooter) return null
-
-    return props?.renderSectionFooter({ ...data, ...getSectionPosition(data) })
-  }, [props?.renderSectionFooter, props?.sections?.length])
-
-  const renderItem = useCallback((data) => {
-    if (!props?.renderItem) return null
-
-    return props?.renderItem({ ...data, ...getItemPosition(data.section?.data, data?.index) })
-
-  }, [props?.renderItem, props?.sections?.length])
-
-  const separatorProp = props.separators
-  const isEmpty = !props.sections || !props.sections.length
-  const separator = !isEmpty && separatorProp == true && renderSeparator
-
-  const keyboardStyle = useKeyboardPaddingStyle([styles?.content, contentContainerStyle], keyboardAware)
-
-  return (
-    <SectionList
-      contentContainerStyle={keyboardStyle}
-      showsVerticalScrollIndicator={false}
-      // @ts-ignore
-      ref={ref}
-      ItemSeparatorComponent={separator}
-      {...props}
-      style={styles?.wrapper}
-      refreshControl={
-        !!onRefresh && (
-          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
-        )
-      }
-      renderItem={renderItem}
-      renderSectionHeader={renderSectionHeader}
-      renderSectionFooter={renderSectionFooter}
-    />
-  )
-},
-) as StyledComponentWithProps<SectionListProps>
-
-Sections.styleRegistryName = 'Sections'
-Sections.elements = ['wrapper', 'content', 'separator']
-Sections.rootElement = 'wrapper'
-
-Sections.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return Sections as (props: StyledComponentProps<SectionListProps, typeof styles>) => IJSX
+
+export type DataboundSectionListPropsTypes = 'data' | 'renderItem' | 'keyExtractor' | 'getItemLayout'
+
+export type AugmentedSectionRenderItemInfo<T> = SectionListRenderItemInfo<T> & {
+  isFirst: boolean
+  isLast: boolean
+  isOnly: boolean
+}
+
+export type ReplaceSectionListProps<P, T> = Omit<P, DataboundSectionListPropsTypes> & {
+  sections: T[]
+  keyExtractor?: (item: T, index: number) => string
+  renderItem: (data: AugmentedSectionRenderItemInfo<T>) => React.ReactElement
+  onRefresh?: () => void
+  getItemLayout?: ((
+    data: T,
+    index: number,
+  ) => { length: number; offset: number; index: number })
+  fakeEmpty?: boolean
 }
 
-Sections.defaultProps = {
+export * from './styles'
+
+export type SectionListProps<
+  T = any[],
+  Data = T extends Array<infer D> ? D : never
+> = ReplaceSectionListProps<RNSectionListProps<Data>, Data> &
+  Omit<ViewProps, 'variants'> & {
+    separators?: boolean
+    placeholder?: EmptyPlaceholderProps
+    styles?: StylesOf<SectionsComposition>
+    refreshControlProps?: Partial<RefreshControlProps>
+    fakeEmpty?: boolean
+    keyboardAware?: boolean
+  } & ComponentVariants<typeof SectionsPresets>
+
+const defaultProps: Partial<SectionListProps> = {
   keyboardShouldPersistTaps: 'handled',
+  refreshControlProps: {},
   keyboardAware: true,
-} as Partial<SectionListProps>
 
-MobileStyleRegistry.registerComponent(Sections)
+}
+
+export const Sections = forwardRef<SectionList, SectionListProps>(
+  (sectionsProps, ref) => {
+    const {
+      variants = [],
+      style,
+      styles = {},
+      onRefresh,
+      component,
+      refreshing,
+      placeholder,
+      keyboardAware,
+      refreshControlProps,
+      contentContainerStyle,
+
+      fakeEmpty,
+      refreshControl,
+      ...props
+    } = {
+      ...defaultProps,
+      ...sectionsProps,
+    }
+
+    const variantStyles = useDefaultComponentStyle<'u:Sections', typeof SectionsPresets>('u:Sections', {
+      variants,
+      styles,
+      transform: StyleSheet.flatten,
+
+    })
+
+    const renderSeparator = useCallback(() => {
+      return (
+        <View style={variantStyles.separator}></View>
+      )
+    }, [variantStyles.separator])
+
+    const getItemPosition = (section, itemIdx) => {
+      const listLength = section?.length || 0
+
+      const isFirst = itemIdx === 0
+      const isLast = itemIdx === listLength - 1
+      const isOnly = isFirst && isLast
+
+      return { isFirst, isLast, isOnly }
+    }
+
+    const getSectionPosition = (data) => {
+      const listLength = props.sections?.length || 0
+
+      const isFirst = data.section.key === props.sections[0].key
+      const isLast = data.section.key === props.sections[listLength - 1].key
+      const isOnly = isFirst && isLast
+
+      return { isFirst, isLast, isOnly }
+    }
+
+    const renderSectionHeader = useCallback((data) => {
+      if (!props?.renderSectionHeader) return null
+
+      return props?.renderSectionHeader({ ...data, ...getSectionPosition(data) })
+    }, [props?.renderSectionHeader, props?.sections?.length])
+
+    const renderSectionFooter = useCallback((data) => {
+      if (!props?.renderSectionFooter) return null
+
+      return props?.renderSectionFooter({ ...data, ...getSectionPosition(data) })
+    }, [props?.renderSectionFooter, props?.sections?.length])
+
+    const renderItem = useCallback((data) => {
+      if (!props?.renderItem) return null
+
+      return props?.renderItem({ ...data, ...getItemPosition(data.section?.data, data?.index) })
+
+    }, [props?.renderItem, props?.sections?.length])
+
+    const separatorProp = props.separators
+    const isEmpty = !props.sections || !props.sections.length
+    const separator = !isEmpty && separatorProp == true && renderSeparator
+
+    const keyboardStyle = useKeyboardPaddingStyle([variantStyles.content, contentContainerStyle], keyboardAware)
+
+    return (
+      <SectionList
+        style={[variantStyles.wrapper, style]}
+        contentContainerStyle={keyboardStyle}
+        showsVerticalScrollIndicator={false}
+        // @ts-ignore
+        ref={ref}
+        ItemSeparatorComponent={separator}
+        {...props}
+        refreshControl={
+          !!onRefresh && (
+            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+          )
+        }
+        renderItem={renderItem}
+        renderSectionHeader={renderSectionHeader}
+        renderSectionFooter={renderSectionFooter}
+      />
+    )
+  },
+) as unknown as (<T = any>(props: SectionListProps<T>) => JSX.Element) & {
+  defaultProps: Partial<SectionListProps>
+}

package/src/components/Sections/styles.ts

@@ -1,2 +1,7 @@
+import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 
 export type SectionsComposition = 'wrapper' |'content' | 'separator'
+
+const createSectionsStyle = createDefaultVariantFactory<SectionsComposition>()
+
+export const SectionsPresets = includePresets(style => createSectionsStyle(() => ({ content: style })))

package/src/components/SegmentedControl/Option.tsx

@@ -1,66 +1,51 @@
 import React from 'react'
-import { PropsOf } from '@codeleap/common'
+import { IconPlaceholder, PropsOf } from '@codeleap/common'
 import { StylesOf } from '../../types'
 import { Text } from '../Text'
-import { Touchable, TouchableProps } from '../Touchable'
+import { Touchable } from '../Touchable'
 import { SegmentedControlComposition } from './styles'
 import { Icon } from '../Icon'
-import { AppIcon } from '@codeleap/styles'
 
-export type SegmentedControlOptionProps = Omit<TouchableProps, 'debugName'> & {
+export type SegmentedControlOptionProps = PropsOf<typeof Touchable> & {
   selected?: boolean
   label: string
   value: string
   variantStyles?: StylesOf<SegmentedControlComposition>
   textProps?: Omit<PropsOf<typeof Text>, 'key'>
-  icon?: AppIcon
+  icon?: IconPlaceholder
   badge?: React.ReactNode
-  debugName?: string
 }
 
 export const SegmentedControlOption = (props: SegmentedControlOptionProps) => {
-  const {
-    selected,
-    onPress,
-    debugName,
-    style,
-    variantStyles,
-    label,
-    value,
-    icon,
-    textProps,
-    badge = null,
-    ...touchableProps
-  } = props
+  const { selected, onPress, debugName, style, variantStyles, label, value, icon, textProps, badge = null, ...touchableProps } = props
 
-  return (
-    <Touchable
-      debugName={`Segmented Control ${debugName}, option ${label}`}
-      noFeedback={selected}
+  return <Touchable
+    debugName={`Segmented Control ${debugName}, option ${label}`}
+    noFeedback={selected}
+
+    styles={{
+      feedback: variantStyles.buttonFeedback,
+    }}
+    style={[variantStyles.button, selected && variantStyles['button:selected'], style]}
+    onPress={onPress}
+    {...touchableProps}
+  >
+    {
+      !!icon && (
+        <Icon name={icon} style={[variantStyles.icon]} />
+
+      )
+    }
+    <Text
+      text={label}
       style={[
-        variantStyles?.button,
-        selected && variantStyles['button:selected'],
-        style,
-        {
-          feedback: variantStyles.buttonFeedback,
-        }
+        variantStyles.text,
+        selected && variantStyles['text:selected'],
+        touchableProps?.disabled && variantStyles['text:disabled'],
       ]}
-      onPress={onPress}
-      {...touchableProps}
-    >
-      {!!icon ? <Icon name={icon} style={variantStyles?.icon} /> : null}
-
-      <Text
-        text={label}
-        style={[
-          variantStyles?.text,
-          selected && variantStyles['text:selected'],
-          touchableProps?.disabled && variantStyles['text:disabled'],
-        ]}
-        {...textProps}
-      />
+      {...textProps}
+    />
+    { badge }
 
-      {badge}
-    </Touchable>
-  )
+  </Touchable>
 }

package/src/components/SegmentedControl/index.tsx

@@ -1,19 +1,51 @@
-import React, { useImperativeHandle, useMemo, useRef, useState, Ref } from 'react'
-import { Easing, ScrollView } from 'react-native'
+import React, { ReactElement, useImperativeHandle, useMemo, useRef } from 'react'
+import { Scroll, ScrollProps, ScrollRef } from '../Scroll'
+
+import { Easing, StyleSheet } from 'react-native'
+import { FormTypes, getNestedStylesByKey, PropsOf, useCodeleapContext, useDefaultComponentStyle, useState } from '@codeleap/common'
+import { SegmentedControlComposition, SegmentedControlPresets } from './styles'
+import { Touchable } from '../Touchable'
+import { StylesOf } from '../../types/utility'
 import { Text } from '../Text'
 import { View } from '../View'
-import { useAnimatedVariantStyles } from '../../utils'
+import { InputLabel } from '../InputLabel'
+import { useAnimatedVariantStyles, TransitionConfig } from '../../utils'
 import { SegmentedControlOption } from './Option'
-import { SegmentedControlProps, SegmentedControlRef } from './types'
-import { AnyRecord, IJSX, StyledComponentProps, StyledComponentWithProps, useTheme } from '@codeleap/styles'
-import { MobileStyleRegistry } from '../../Registry'
-import { useStylesFor } from '../../hooks'
+import { SegmentedControlOptionProps } from './Option'
 
 export * from './styles'
-export * from './types'
 
-const DefaultBubble = (props) => {
-  return <View animated {...props} />
+export type SegmentedControlRef = ScrollRef & {
+  scrollTo: (index: number) => void
+  scrollToCurrent: () => void
+}
+
+const DefaultBubble = (props: Partial<SegmentedControlProps>) => {
+  const {
+    style,
+
+  } = props
+  return <View
+    animated
+    style={style}
+  />
+}
+
+export type SegmentedControlProps<T = string> = ScrollProps & {
+  options: SegmentedControlOptionProps[]
+  onValueChange: (value: T) => any
+  value: T
+  debugName: string
+  animation?: TransitionConfig
+  textProps?: Partial<PropsOf<typeof Text>>
+  touchableProps?: Partial<PropsOf<typeof Touchable>>
+  styles?: StylesOf<SegmentedControlComposition>
+  scrollProps?: any
+  label?: FormTypes.Label
+  renderOption?: (props: SegmentedControlOptionProps) => JSX.Element
+  renderBubble?: (props: Partial<SegmentedControlProps>) => JSX.Element
+  getItemWidth?: (item: { label: string; value: T }, idx: number, arr: { label: string; value: T }[]) => number
+  scrollToCurrentOptionOnMount?: boolean
 }
 
 const defaultAnimation = {
@@ -22,9 +54,9 @@ const defaultAnimation = {
   easing: Easing.linear,
 }
 
-export const SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControlProps>((props, ref) => {
-  // @ts-expect-error
-  const [themeValues, themeSpacing] = useTheme(store => [store.current?.values, store.current?.spacing])
+const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControlProps>((props, ref) => {
+
+  const { Theme } = useCodeleapContext()
 
   const {
     options = [],
@@ -32,28 +64,32 @@ export const SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedC
     debugName,
     label,
     value,
+    styles = {},
     animation = {},
+    variants = [],
     scrollProps = {},
-    getItemWidth = () => (themeValues?.width - themeSpacing?.value?.(4)) / options.length,
+    getItemWidth = (i) => (Theme.values.width - Theme.spacing.value(4)) / options.length,
     renderBubble,
-    scrollToCurrentOptionOnMount,
+    scrollToCurrentOptionOnMount = true,
     renderOption,
     touchableProps,
-    style,
-    ...viewProps
   } = {
-    ...SegmentedControl.defaultProps,
+    ...(_SegmentedControl.defaultProps || {}),
     ...props,
   }
 
   const [bubbleWidth, setBubbleWidth] = useState(0)
 
   const _animation = {
-    ...defaultAnimation,
-    ...animation,
+    ...defaultAnimation, ...animation,
   }
 
-  const styles = useStylesFor(SegmentedControl.styleRegistryName, style)
+  let variantStyles = useDefaultComponentStyle<'u:SegmentedControl', typeof SegmentedControlPresets>('u:SegmentedControl', {
+    styles,
+    transform: StyleSheet.flatten,
+    variants,
+    rootElement: 'scroll',
+  })
 
   const scrollRef = useRef<SegmentedControlRef>(null)
 
@@ -112,8 +148,12 @@ export const SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedC
   const BubbleView = renderBubble
   const Option = renderOption
 
+  variantStyles = JSON.parse(JSON.stringify(variantStyles))
+
+  const labelStyles = getNestedStylesByKey('label', variantStyles)
+
   const bubbleAnimation = useAnimatedVariantStyles({
-    variantStyles: styles,
+    variantStyles,
     animatedProperties: [],
     updater: () => {
       'worklet'
@@ -127,74 +167,69 @@ export const SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedC
 
   const largestWidth = useRef(0)
 
-  return (
-    <View style={styles?.wrapper}>
-      <View {...viewProps} style={styles?.labelWrapper}>
-        <Text style={styles?.labelText} text={label} />
-      </View>
-
-      <ScrollView
-        horizontal
-        showsHorizontalScrollIndicator={false}
-        style={styles?.scroll}
-        contentContainerStyle={styles?.scrollContent}
-        {...scrollProps}
-        ref={scrollRef as unknown as Ref<ScrollView>}
-      >
-        <View style={styles?.innerWrapper}>
-          <BubbleView
-            options={options}
-            animated
-            animatedStyle={bubbleAnimation}
-            style={[
-              styles?.selectedBubble,
-              props?.touchableProps?.disabled && styles?.['selectedBubble:disabled'],
-              widthStyle,
-            ]}
+  return (<View style={variantStyles.wrapper}>
+    <InputLabel label={label} styles={labelStyles} required={false} />
+    <Scroll
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      style={variantStyles.scroll}
+      contentContainerStyle={variantStyles.scrollContent}
+      {...scrollProps}
+      keyboardAware={{
+        enabled: false,
+      }}
+      ref={scrollRef}
+    >
+      <View style={variantStyles.innerWrapper}>
+        <BubbleView
+          options={options}
+          styles={variantStyles}
+          animated
+          style={[
+            variantStyles.selectedBubble,
+            props?.touchableProps?.disabled && variantStyles['selectedBubble:disabled'],
+            widthStyle,
+            bubbleAnimation,
+          ]}
+        />
+        {options.map((o, idx) => (
+          <Option
+            debugName={debugName}
+            label={o.label}
+            value={o.value}
+            icon={o.icon}
+            onPress={onPress(o.value, idx)}
+            key={idx}
+            style={widthStyle}
+            selected={value === o.value}
+            variantStyles={variantStyles}
+            onLayout={e => {
+              const { width } = e.nativeEvent.layout
+              if (width > largestWidth.current) {
+                largestWidth.current = width
+              }
+
+              if (idx === options.length - 1) {
+                setBubbleWidth(largestWidth.current)
+                largestWidth.current = 0
+              }
+            }}
+            {...touchableProps}
           />
-          {options.map((o, idx) => (
-            <Option
-              debugName={debugName}
-              label={o.label}
-              value={o.value}
-              icon={o.icon}
-              onPress={onPress(o.value, idx)}
-              key={idx}
-              style={widthStyle}
-              selected={value === o.value}
-              variantStyles={styles}
-              onLayout={e => {
-                const { width } = e.nativeEvent.layout
-                if (width > largestWidth.current) {
-                  largestWidth.current = width
-                }
-
-                if (idx === options.length - 1) {
-                  setBubbleWidth(largestWidth.current)
-                  largestWidth.current = 0
-                }
-              }}
-              {...touchableProps}
-            />
-          ))}
-        </View>
-      </ScrollView>
-    </View>
+        ))}
+      </View>
+    </Scroll>
+  </View>
   )
-}) as StyledComponentWithProps<SegmentedControlProps>
 
-SegmentedControl.styleRegistryName = 'SegmentedControl'
-SegmentedControl.elements = ['wrapper', 'selectedBubble', 'innerWrapper', 'scroll', 'text', 'icon', 'button', 'label', 'badge']
-SegmentedControl.rootElement = 'scroll'
+})
 
-SegmentedControl.withVariantTypes = <S extends AnyRecord>(styles: S) => {
-  return SegmentedControl as (<T = string>(props: StyledComponentProps<SegmentedControlProps<T> & { ref?: React.Ref<SegmentedControlRef> }, typeof styles>) => IJSX)
-}
-
-SegmentedControl.defaultProps = {
+_SegmentedControl.defaultProps = {
   renderBubble: DefaultBubble,
   renderOption: SegmentedControlOption,
-  scrollToCurrentOptionOnMount: true,
-} as Partial<SegmentedControlProps>
+  touchableProps: {},
+}
+
+type SegControlComponent = <T = string>(props: SegmentedControlProps<T> & { ref?: React.Ref<SegmentedControlRef> }) => ReactElement
 
-MobileStyleRegistry.registerComponent(SegmentedControl)
+export const SegmentedControl = _SegmentedControl as SegControlComponent