@codeleap/mobile 3.24.2 → 3.25.0

package/src/components/SegmentedControl/Option.tsx

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

package/src/components/SegmentedControl/index.tsx

@@ -1,51 +1,19 @@
-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 React, { useImperativeHandle, useMemo, useRef, useState, Ref } from 'react'
+import { Easing, ScrollView } from 'react-native'
 import { Text } from '../Text'
 import { View } from '../View'
-import { InputLabel } from '../InputLabel'
-import { useAnimatedVariantStyles, TransitionConfig } from '../../utils'
+import { useAnimatedVariantStyles } from '../../utils'
 import { SegmentedControlOption } from './Option'
-import { SegmentedControlOptionProps } from './Option'
+import { SegmentedControlProps, SegmentedControlRef } from './types'
+import { AnyRecord, IJSX, StyledComponentProps, StyledComponentWithProps, useTheme } from '@codeleap/styles'
+import { MobileStyleRegistry } from '../../Registry'
+import { useStylesFor } from '../../hooks'
 
 export * from './styles'
+export * from './types'
 
-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 DefaultBubble = (props) => {
+  return <View animated {...props} />
 }
 
 const defaultAnimation = {
@@ -54,9 +22,9 @@ const defaultAnimation = {
   easing: Easing.linear,
 }
 
-const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControlProps>((props, ref) => {
-
-  const { Theme } = useCodeleapContext()
+export const SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControlProps>((props, ref) => {
+  // @ts-expect-error
+  const [themeValues, themeSpacing] = useTheme(store => [store.current?.values, store.current?.spacing])
 
   const {
     options = [],
@@ -64,32 +32,28 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
     debugName,
     label,
     value,
-    styles = {},
     animation = {},
-    variants = [],
     scrollProps = {},
-    getItemWidth = (i) => (Theme.values.width - Theme.spacing.value(4)) / options.length,
+    getItemWidth = () => (themeValues?.width - themeSpacing?.value?.(4)) / options.length,
     renderBubble,
-    scrollToCurrentOptionOnMount = true,
+    scrollToCurrentOptionOnMount,
     renderOption,
     touchableProps,
+    style,
+    ...viewProps
   } = {
-    ...(_SegmentedControl.defaultProps || {}),
+    ...SegmentedControl.defaultProps,
     ...props,
   }
 
   const [bubbleWidth, setBubbleWidth] = useState(0)
 
   const _animation = {
-    ...defaultAnimation, ...animation,
+    ...defaultAnimation,
+    ...animation,
   }
 
-  let variantStyles = useDefaultComponentStyle<'u:SegmentedControl', typeof SegmentedControlPresets>('u:SegmentedControl', {
-    styles,
-    transform: StyleSheet.flatten,
-    variants,
-    rootElement: 'scroll',
-  })
+  const styles = useStylesFor(SegmentedControl.styleRegistryName, style)
 
   const scrollRef = useRef<SegmentedControlRef>(null)
 
@@ -148,12 +112,8 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
   const BubbleView = renderBubble
   const Option = renderOption
 
-  variantStyles = JSON.parse(JSON.stringify(variantStyles))
-
-  const labelStyles = getNestedStylesByKey('label', variantStyles)
-
   const bubbleAnimation = useAnimatedVariantStyles({
-    variantStyles,
+    variantStyles: styles,
     animatedProperties: [],
     updater: () => {
       'worklet'
@@ -167,69 +127,74 @@ const _SegmentedControl = React.forwardRef<SegmentedControlRef, SegmentedControl
 
   const largestWidth = useRef(0)
 
-  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}
-          />
-        ))}
+  return (
+    <View style={styles?.wrapper}>
+      <View {...viewProps} style={styles?.labelWrapper}>
+        <Text style={styles?.labelText} text={label} />
       </View>
-    </Scroll>
-  </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,
+            ]}
+          />
+          {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>
   )
+}) as StyledComponentWithProps<SegmentedControlProps>
 
-})
+SegmentedControl.styleRegistryName = 'SegmentedControl'
+SegmentedControl.elements = ['wrapper', 'selectedBubble', 'innerWrapper', 'scroll', 'text', 'icon', 'button', 'label', 'badge']
+SegmentedControl.rootElement = 'scroll'
 
-_SegmentedControl.defaultProps = {
-  renderBubble: DefaultBubble,
-  renderOption: SegmentedControlOption,
-  touchableProps: {},
+SegmentedControl.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return SegmentedControl as (<T = string>(props: StyledComponentProps<SegmentedControlProps<T> & { ref?: React.Ref<SegmentedControlRef> }, typeof styles>) => IJSX)
 }
 
-type SegControlComponent = <T = string>(props: SegmentedControlProps<T> & { ref?: React.Ref<SegmentedControlRef> }) => ReactElement
+SegmentedControl.defaultProps = {
+  renderBubble: DefaultBubble,
+  renderOption: SegmentedControlOption,
+  scrollToCurrentOptionOnMount: true,
+} as Partial<SegmentedControlProps>
 
-export const SegmentedControl = _SegmentedControl as SegControlComponent
+MobileStyleRegistry.registerComponent(SegmentedControl)

package/src/components/SegmentedControl/styles.ts

@@ -1,25 +1,25 @@
-import { createDefaultVariantFactory, includePresets, StylesOf } from '@codeleap/common'
+import { StylesOf } from '@codeleap/common'
 import { BadgeComposition } from '../Badge'
-import { InputLabelComposition } from '../InputLabel'
 import { TouchableStylesGen } from '../Touchable'
 
 export type SegmentedControlStates = 'selected' | 'disabled'
 
 export type SegmentedControlComposition =
- 'selectedBubble' |
- 'wrapper' |
- 'innerWrapper' |
- 'scroll' |
- 'scrollContent' |
- 'text' |
- `text:${SegmentedControlStates}` |
- 'icon' |
- 'button' |
- 'buttonFeedback' |
- `button:${SegmentedControlStates}` |
+  'selectedBubble' |
+  'wrapper' |
+  'innerWrapper' |
+  'scroll' |
+  'scrollContent' |
+  'text' |
+  `text:${SegmentedControlStates}` |
+  'icon' |
+  'button' |
+  'buttonFeedback' |
+  `button:${SegmentedControlStates}` |
   `selectedBubble:${SegmentedControlStates}` |
- `label${Capitalize<InputLabelComposition>}` |
- `badge${Capitalize<BadgeComposition>}`
+  'labelText' |
+  'labelWrapper' |
+  `badge${Capitalize<BadgeComposition>}`
 
 export type SegmentedControlStylesGen<TCSS = any> =
   StylesOf<
@@ -27,10 +27,3 @@ export type SegmentedControlStylesGen<TCSS = any> =
   > & {
     buttonFeedback?: TouchableStylesGen['feedback']
   }
-
-const createSegmentedControlStyle = createDefaultVariantFactory<
-SegmentedControlComposition,
-SegmentedControlStylesGen
->()
-
-export const SegmentedControlPresets = includePresets((style) => createSegmentedControlStyle(() => ({ wrapper: style })))

package/src/components/SegmentedControl/types.ts

@@ -0,0 +1,31 @@
+import { ScrollProps, ScrollRef } from '../Scroll'
+import { SegmentedControlOptionProps } from './Option'
+import { TransitionConfig } from '../../utils'
+import { TextProps } from '../Text'
+import { TouchableProps } from '../Touchable'
+import { FormTypes } from '@codeleap/common'
+import { StyledProp } from '@codeleap/styles'
+import { SegmentedControlComposition } from '../components'
+
+export type SegmentedControlRef = ScrollRef & {
+  scrollTo: (index: number) => void
+  scrollToCurrent: () => void
+}
+
+export type SegmentedControlProps<T = string> =
+  Omit<ScrollProps, 'style'> &
+  {
+    options: SegmentedControlOptionProps[]
+    onValueChange: (value: T) => any
+    value: T
+    debugName: string
+    animation?: TransitionConfig
+    textProps?: Partial<TextProps>
+    touchableProps?: Partial<TouchableProps>
+    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
+    style?: StyledProp<SegmentedControlComposition>
+  }