@codeleap/mobile 3.24.3 → 3.25.0

package/src/components/Select/index.tsx

@@ -1,9 +1,6 @@
 /* eslint-disable max-lines */
 import {
-  IconPlaceholder,
-  useDefaultComponentStyle,
   TypeGuards,
-  useNestedStylesByKey,
   FormTypes,
   onMount,
   onUpdate,
@@ -12,16 +9,19 @@ import {
   useBooleanToggle,
 } from '@codeleap/common'
 import React, { useCallback, useMemo } from 'react'
-import { StyleSheet } from 'react-native'
 import { List } from '../List'
-import { SearchInput, TextInput } from '../TextInput'
-import { SelectPresets } from './styles'
+import { TextInput } from '../TextInput'
 import { SelectProps, ValueBoundSelectProps } from './types'
 import { ModalManager } from '../../utils'
 import { Button } from '../Button'
-export * from './styles'
+import { AnyRecord, AppIcon, IJSX, StyledComponentProps, useCompositionStyles } from '@codeleap/styles'
+import Modal from '../Modal'
+import { MobileStyleRegistry } from '../../Registry'
+import { SearchInput } from '../SearchInput'
+import { useStylesFor } from '../../hooks'
 
 export * from './styles'
+export * from './types'
 
 const defaultFilterFunction = (search: string, options: FormTypes.Options<any>) => {
   return options.filter((option) => {
@@ -33,6 +33,18 @@ const defaultFilterFunction = (search: string, options: FormTypes.Options<any>)
   })
 }
 
+const defaultGetLabel = (option) => {
+  if (TypeGuards.isArray(option)) {
+    if (option.length === 0) return null
+
+    return option.map(o => o.label).join(', ')
+
+  } else {
+    if (!option) return null
+    return option?.label
+  }
+}
+
 const OuterInput: ValueBoundSelectProps<any, boolean>['outerInputComponent'] = (props) => {
   const {
     currentValueLabel,
@@ -40,7 +52,6 @@ const OuterInput: ValueBoundSelectProps<any, boolean>['outerInputComponent'] = (
     clearIcon,
     label,
     toggle,
-    styles,
     style,
     placeholder,
     disabled = false,
@@ -54,7 +65,6 @@ const OuterInput: ValueBoundSelectProps<any, boolean>['outerInputComponent'] = (
     disabled={disabled}
     label={label}
     debugName={debugName}
-    styles={styles}
     style={style}
     innerWrapperProps={{
       rippleDisabled: true,
@@ -64,69 +74,48 @@ const OuterInput: ValueBoundSelectProps<any, boolean>['outerInputComponent'] = (
   />
 }
 
-const defaultProps: Partial<SelectProps<any, boolean>> = {
-  getLabel(option) {
-
-    if (TypeGuards.isArray(option)) {
-
-      if (option.length === 0) return null
-
-      return option.map(o => o.label).join(', ')
-
-    } else {
-      if (!option) return null
-      return option?.label
-    }
-  },
-  outerInputComponent: OuterInput,
-  searchInputProps: {},
-  arrowIconName: 'chevrons-up-down' as IconPlaceholder,
-  clearIconName: 'x' as IconPlaceholder,
-}
-
 export const Select = <T extends string | number = string, Multi extends boolean = false>(selectProps: SelectProps<T, Multi>) => {
   const allProps = {
-    ...defaultProps,
+    ...Select.defaultProps,
     ...selectProps,
   }
+
   const {
     value,
     onValueChange,
     label,
-    styles = {},
     options = [],
     style,
-    variants,
     description,
-    renderItem,
+    renderItem: Item,
     listProps,
     debugName,
-    placeholder = 'Select',
+    placeholder,
     arrowIconName,
     clearIconName,
-    clearable = false,
-    selectedIcon = 'check',
+    clearable,
+    selectedIcon,
     inputProps = {},
-    hideInput = false,
+    hideInput,
     itemProps = {},
     searchable,
     loadOptions,
-    multiple = false,
+    multiple,
     closeOnSelect = !multiple,
     limit = null,
     defaultOptions = options,
     visible: _visible,
     toggle: _toggle,
     ListHeaderComponent,
-    ListComponent = List,
+    ListComponent,
     onLoadOptionsError,
     loadOptionsOnMount = defaultOptions.length === 0,
-    loadOptionsOnOpen = false,
-    filterItems = defaultFilterFunction,
+    loadOptionsOnOpen,
+    filterItems,
     getLabel,
     searchInputProps,
     outerInputComponent,
-    disabled = false,
+    disabled,
     ...modalProps
   } = allProps
 
@@ -156,9 +145,7 @@ export const Select = <T extends string | number = string, Multi extends boolean
   const currentValueLabel = useMemo(() => {
     const _options = (multiple ? labelOptions : labelOptions?.[0]) as Multi extends true ? FormTypes.Options<T> : FormTypes.Options<T>[number]
 
-    const label = getLabel(
-      _options,
-    )
+    const label = getLabel(_options)
 
     return label
   }, [labelOptions])
@@ -177,27 +164,15 @@ export const Select = <T extends string | number = string, Multi extends boolean
     }
   }, [visible, prevVisible])
 
-  const variantStyles = useDefaultComponentStyle<'u:Select', typeof SelectPresets>('u:Select', {
-    transform: StyleSheet.flatten,
-    rootElement: 'inputWrapper',
-    styles,
-    variants,
-  })
-
-  const itemStyles = useNestedStylesByKey('item', variantStyles)
+  const styles = useStylesFor(Select.styleRegistryName, style)
 
-  const listStyles = useNestedStylesByKey('list', variantStyles)
-
-  const inputStyles = useNestedStylesByKey('input', variantStyles)
-
-  const searchInputStyles = useNestedStylesByKey('searchInput', variantStyles)
+  const compositionStyles = useCompositionStyles(['item', 'list', 'input', 'searchInput'], styles)
 
   const currentOptions = searchable ? filteredOptions : defaultOptions
 
   const close = () => toggle?.()
 
   const select = useCallback((selectedValue) => {
-
     let newValue = null
 
     let newOption = null
@@ -243,13 +218,9 @@ export const Select = <T extends string | number = string, Multi extends boolean
     if (closeOnSelect) {
       close?.()
     }
-
   }, [isValueArray, (isValueArray ? value : [value]), limit, multiple])
 
-  const Item = renderItem || Button
-
   const renderListItem = useCallback(({ item, index }) => {
-
     let selected = false
 
     if (multiple && isValueArray) {
@@ -268,7 +239,7 @@ export const Select = <T extends string | number = string, Multi extends boolean
       icon={selectedIcon}
       // @ts-ignore
       rightIcon={selectedIcon}
-      styles={itemStyles}
+      style={compositionStyles?.item}
       index={index}
       {...itemProps}
     />
@@ -297,7 +268,7 @@ export const Select = <T extends string | number = string, Multi extends boolean
     }}
     debounce={!!loadOptions ? 800 : null}
     onSearchChange={onChangeSearch}
-    styles={searchInputStyles}
+    style={compositionStyles?.searchInput}
     {...searchInputProps}
   /> : null
 
@@ -316,26 +287,22 @@ export const Select = <T extends string | number = string, Multi extends boolean
 
   return <>
     {
-      !hideInput && (
+      !hideInput ? (
         // @ts-ignore
         <Input
-
           clearIcon={{
-            icon: inputIcon as IconPlaceholder,
+            icon: inputIcon as AppIcon,
             onPress: disabled ? null : onPressInputIcon,
           }}
-
           currentValueLabel={currentValueLabel}
-
           debugName={`${debugName} select input`}
-          styles={inputStyles}
-          style={style}
+          style={compositionStyles?.input}
           {...allProps}
           {...inputProps}
           visible={visible}
           toggle={toggle}
         />
-      )
+      ) : null
     }
 
     <ModalManager.Modal
@@ -343,18 +310,17 @@ export const Select = <T extends string | number = string, Multi extends boolean
       description={description}
       {...modalProps}
       debugName={`${debugName} modal`}
-      styles={variantStyles}
+      style={styles}
       id={null}
       visible={visible}
       toggle={toggle}
-
     >
-      <ListComponent<SelectProps<any>['options']>
+      <ListComponent
         data={searchable ? filteredOptions : options}
         scrollEnabled={false}
         showsHorizontalScrollIndicator={false}
-        styles={listStyles}
-        keyExtractor={(i) => i.value}
+        style={compositionStyles?.list}
+        keyExtractor={(i: { value: any }) => i.value}
         renderItem={renderListItem}
         fakeEmpty={loading}
         separators
@@ -366,11 +332,34 @@ export const Select = <T extends string | number = string, Multi extends boolean
         }}
       />
     </ModalManager.Modal>
-
   </>
 }
 
-export * from './styles'
-export * from './types'
 
-Select.defaultProps = defaultProps
+Select.styleRegistryName = 'Select'
+Select.elements = [...Modal.elements, 'input', 'list', 'item', 'searchInput']
+Select.rootElement = 'inputWrapper'
+
+Select.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return Select as (<T extends string | number = string, Multi extends boolean = false>(props: StyledComponentProps<SelectProps<T, Multi>, typeof styles>) => IJSX)
+}
+
+Select.defaultProps = {
+  getLabel: defaultGetLabel,
+  outerInputComponent: OuterInput,
+  searchInputProps: {},
+  arrowIconName: 'chevrons-up-down' as AppIcon,
+  clearIconName: 'x' as AppIcon,
+  placeholder: 'Select',
+  clearable: false,
+  selectedIcon: 'check' as AppIcon,
+  hideInput: false,
+  multiple: false,
+  loadOptionsOnOpen: false,
+  disabled: false,
+  filterItems: defaultFilterFunction,
+  renderItem: Button,
+  ListComponent: List,
+} as Partial<SelectProps<any, boolean>>
+
+MobileStyleRegistry.registerComponent(Select)

package/src/components/Select/styles.ts

@@ -1,6 +1,8 @@
-import { ButtonComposition, createDefaultVariantFactory, includePresets, TextInputComposition } from '@codeleap/common'
+import { ButtonComposition } from '../Button'
 import { ListComposition } from '../List'
 import { ModalComposition } from '../Modal'
+import { TextInputComposition } from '../TextInput'
+
 type ItemStates = '' | ':selected'
 
 type ItemParts = ButtonComposition
@@ -13,7 +15,3 @@ export type SelectComposition =
   `list${Capitalize<ListComposition>}` |
   `item${Capitalize<ItemComposition>}` |
   `searchInput${Capitalize<TextInputComposition>}`
-
-const createSelectStyle = createDefaultVariantFactory<SelectComposition>()
-
-export const SelectPresets = includePresets((style) => createSelectStyle(() => ({ body: style })))

package/src/components/Select/types.ts

@@ -1,9 +1,5 @@
-import {
-  ComponentVariants,
-  FormTypes,
-  IconPlaceholder,
-  PropsOf,
-} from '@codeleap/common'
+import { FormTypes, PropsOf } from '@codeleap/common'
+import { AppIcon, StyledProp } from '@codeleap/styles'
 import { StylesOf } from '../../types/utility'
 import { GetKeyboardAwarePropsOptions } from '../../utils'
 import { ActionIconProps } from '../ActionIcon'
@@ -11,25 +7,27 @@ import { Icon } from '../Icon'
 import { FlatListProps } from '../List'
 import { ModalProps } from '../Modal'
 import { Text } from '../Text'
-import { SearchInputProps, TextInputComposition, TextInputProps } from '../TextInput'
+import { TextInputComposition } from '../TextInput'
+import { SearchInputProps } from '../SearchInput'
 import { Touchable } from '../Touchable'
-import { SelectComposition, SelectPresets } from './styles'
+import { SelectComposition } from './styles'
 
 export type SelectRenderFNProps<T> = {
-  styles: StylesOf<SelectComposition>
+  style: StylesOf<SelectComposition>
   onPress: () => void
-  isSelected?: boolean
+  selected?: boolean
   item: FormTypes.Options<T>[number]
   touchableProps?: Partial<PropsOf<typeof Touchable>>
   textProps?: Partial<PropsOf<typeof Text>>
   iconProps?: Partial<PropsOf<typeof Icon>>
   index: number
   debugName: string
+  text?: string
 }
 
 export type SelectRenderFN<T> = (props: SelectRenderFNProps<T>) => JSX.Element
 
-type SelectModalProps = Omit<ModalProps, 'variants' | 'styles'>
+type SelectModalProps = Omit<ModalProps, 'style'>
 
 export type SelectValue<T, Multi extends boolean = false> = Multi extends true ? T[] : T
 
@@ -37,7 +35,7 @@ type SelectHeaderProps = {
   searchComponent?: React.ReactNode
 }
 
-export type SelectOuterInputProps<T = any, Multi extends boolean = false> = Omit<SelectProps<T, Multi>, 'variants'| 'styles'> & {
+export type SelectOuterInputProps<T = any, Multi extends boolean = false> = SelectProps<T, Multi> & {
   currentValueLabel: FormTypes.Label
   styles?: StylesOf<TextInputComposition>
   clearIcon?: Partial<ActionIconProps>
@@ -69,24 +67,22 @@ export type ReplaceSelectProps<Props, T, Multi extends boolean = false> = Omit<
   keyof ValueBoundSelectProps<T, Multi>
 > & ValueBoundSelectProps<T, Multi>
 
-export type SelectProps<T = any, Multi extends boolean = false> = {
+export type SelectProps<T = any, Multi extends boolean = false> =
+  SelectModalProps &
+  ValueBoundSelectProps<T, Multi> &
+  {
     placeholder?: FormTypes.Label
     label?: FormTypes.Label
-    styles?: StylesOf<SelectComposition>
-    style?: TextInputProps['style']
     hideInput?: boolean
-    selectedIcon?: IconPlaceholder
-    arrowIconName?: IconPlaceholder
+    selectedIcon?: AppIcon
+    arrowIconName?: AppIcon
     closeOnSelect?: boolean
-
     listProps?: Partial<FlatListProps>
     clearable?: boolean
-    clearIconName?: IconPlaceholder
+    clearIconName?: AppIcon
     keyboardAware?: GetKeyboardAwarePropsOptions
     multiple?: Multi
-    itemProps?: Partial<
-      Pick<SelectRenderFNProps<any>, 'iconProps'|'textProps'|'touchableProps'
-    >>
+    itemProps?: Partial<Pick<SelectRenderFNProps<any>, 'iconProps' | 'textProps' | 'touchableProps'>>
     searchable?: boolean
     limit?: number
     ListHeaderComponent?: React.ComponentType<SelectHeaderProps>
@@ -94,6 +90,5 @@ export type SelectProps<T = any, Multi extends boolean = false> = {
     searchInputProps?: Partial<SearchInputProps>
     loadOptionsOnMount?: boolean
     loadOptionsOnOpen?: boolean
-
-  } & ComponentVariants<typeof SelectPresets> & SelectModalProps & ValueBoundSelectProps<T, Multi>
-
+    style?: StyledProp<SelectComposition>
+  }

package/src/components/Slider/index.tsx

@@ -1,23 +1,21 @@
-import * as React from 'react'
+import React from 'react'
 import { Slider as RNSlider } from '@miblanchard/react-native-slider'
 import { StyleSheet } from 'react-native'
-import {
-  TypeGuards,
-  useDefaultComponentStyle,
-  onUpdate,
-} from '@codeleap/common'
-
+import { TypeGuards, onUpdate } from '@codeleap/common'
 import { SliderProps, TrackMarkProps } from './types'
 import { InputBase, selectInputBaseProps } from '../InputBase'
-import { SliderPresets } from './styles'
 import { Text } from '../Text'
 import { View } from '../View'
 import { Touchable } from '../Touchable'
+import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
+import { MobileStyleRegistry } from '../../Registry'
+import { useStylesFor } from '../../hooks'
 
 export * from './styles'
+export * from './types'
 
 const DefaultSliderTrackMark = (props: TrackMarkProps) => {
-  const { index, content, style, onPress } = props
+  const { style, onPress } = props
 
   if (!TypeGuards.isString(props.content)) {
     return <>
@@ -35,11 +33,14 @@ const DefaultSliderTrackMark = (props: TrackMarkProps) => {
 const minimumValue = 0
 const maximumValue = 100
 
-export const Slider = (props:SliderProps) => {
+export const Slider = (props: SliderProps) => {
   const {
     inputBaseProps: { label: _label, description: _description, ..._inputBaseProps },
     others,
-  } = selectInputBaseProps(props)
+  } = selectInputBaseProps({
+    ...Slider.defaultProps,
+    ...props,
+  })
 
   const {
     debounce = null,
@@ -48,17 +49,15 @@ export const Slider = (props:SliderProps) => {
     label,
     description,
     debugName,
-    styles = {},
     style,
     disabled,
-    variants,
     trackMarks,
-    trackMarksClickable = false,
-    labelClickable = false,
-    trackMarkComponent = DefaultSliderTrackMark,
+    trackMarksClickable,
+    labelClickable,
+    trackMarkComponent: SliderTrackMark,
     ...sliderProps
   } = others
-  const SliderTrackMark = trackMarkComponent
+
   const [_value, _setValue] = React.useState(value)
 
   onUpdate(() => {
@@ -67,44 +66,40 @@ export const Slider = (props:SliderProps) => {
     }
   }, [value])
 
-  const variantStyles = useDefaultComponentStyle<'u:Slider', typeof SliderPresets>('u:Slider', {
-    variants,
-    styles,
-    transform: StyleSheet.flatten,
-  })
+  const styles = useStylesFor(Slider.styleRegistryName, style)
 
   const thumbStyle = React.useMemo(() => {
     return StyleSheet.flatten([
-      variantStyles.thumb,
-      disabled && variantStyles['thumb:disabled'],
+      styles?.thumb,
+      disabled && styles['thumb:disabled'],
     ])
   }, [])
 
   const trackStyle = React.useMemo(() => {
     return StyleSheet.flatten([
-      variantStyles.track,
-      disabled && variantStyles['track:disabled'],
+      styles?.track,
+      disabled && styles['track:disabled'],
     ])
   }, [disabled])
 
   const selectedTrackStyle = React.useMemo(() => {
     return StyleSheet.flatten([
-      variantStyles.selectedTrack,
-      disabled && variantStyles['selectedTrack:disabled'],
+      styles?.selectedTrack,
+      disabled && styles['selectedTrack:disabled'],
     ])
   }, [disabled])
 
   const unselectedTrackStyle = React.useMemo(() => {
     return StyleSheet.flatten([
-      variantStyles.unselectedTrack,
-      disabled && variantStyles['unselectedTrack:disabled'],
+      styles?.unselectedTrack,
+      disabled && styles['unselectedTrack:disabled'],
     ])
   }, [disabled])
 
   const containerStyle = React.useMemo(() => {
     return StyleSheet.flatten([
-      variantStyles.sliderContainer,
-      disabled && variantStyles['sliderContainer:disabled'],
+      styles?.sliderContainer,
+      disabled && styles['sliderContainer:disabled'],
     ])
   }, [disabled])
 
@@ -119,8 +114,8 @@ export const Slider = (props:SliderProps) => {
 
   const trackMarkStyle = React.useMemo(() => {
     return StyleSheet.flatten([
-      variantStyles.trackMark,
-      disabled && variantStyles['trackMark:disabled'],
+      styles?.trackMark,
+      disabled && styles['trackMark:disabled'],
     ])
   }, [disabled])
 
@@ -128,31 +123,32 @@ export const Slider = (props:SliderProps) => {
     <InputBase
       {..._inputBaseProps}
       disabled={disabled}
-      styles={variantStyles}
+      style={styles}
       labelAsRow
     >
       {label || description ? (
-        <View style={variantStyles.labelRow}>
+        <View style={styles.labelRow}>
           {label ? (
             <Touchable
               onPress={() => labelClickable ? onValueChange(sliderProps?.minimumValue || minimumValue) : null}
-              styles={variantStyles.labelBtn}
+              style={styles.labelBtn}
               debugName='slider title'
             >
-              <Text style={variantStyles.label} text={label}/>
+              <Text style={styles?.label} text={label} />
             </Touchable>
           ) : null}
           {description ? (
             <Touchable
               onPress={() => labelClickable ? onValueChange(sliderProps?.maximumValue || maximumValue) : null}
-              styles={variantStyles.descriptionBtn}
+              style={styles?.descriptionBtn}
               debugName='slider description'
             >
-              <Text style={variantStyles.description} text={description}/>
+              <Text style={styles?.description} text={description} />
             </Touchable>
           ) : null}
         </View>
       ) : null}
+
       <RNSlider
         value={_value}
         onValueChange={_setValue}
@@ -174,16 +170,17 @@ export const Slider = (props:SliderProps) => {
       />
       {
         trackMarksProp ? (
-          <View style={variantStyles.trackMarkWrapper}>
+          <View style={styles?.trackMarkWrapper}>
             {
               trackMarksProp.map((_, idx) => {
                 let idxStyle = {}
 
                 if (idx === 0) {
-                  idxStyle = variantStyles.firstTrackMark
+                  idxStyle = styles?.firstTrackMark
                 } else if (idx === trackMarksProp.length - 1) {
-                  idxStyle = variantStyles.lastTrackMark
+                  idxStyle = styles?.lastTrackMark
                 }
+
                 const style = [
                   trackMarkStyle,
                   idxStyle,
@@ -217,3 +214,21 @@ export const Slider = (props:SliderProps) => {
   )
 }
 
+Slider.styleRegistryName = 'Slider'
+Slider.rootElement = 'wrapper'
+Slider.elements = [
+  ...InputBase.elements,
+  'thumb', 'track', 'selectedTrack', 'unselectedTrack', 'firstTrackMark', 'lastTrackMark', 'sliderContainer', 'labelBtn', 'descriptionBtn'
+]
+
+Slider.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return Slider as (props: StyledComponentProps<SliderProps, typeof styles>) => IJSX
+}
+
+Slider.defaultProps = {
+  trackMarksClickable: false,
+  labelClickable: false,
+  trackMarkComponent: DefaultSliderTrackMark,
+} as Partial<SliderProps>
+
+MobileStyleRegistry.registerComponent(Slider)

package/src/components/Slider/styles.ts

@@ -1,15 +1,24 @@
-import { PartialComponentStyle, TouchableComposition, createDefaultVariantFactory, includePresets } from '@codeleap/common'
+import { PartialComponentStyle } from '@codeleap/common'
 import { IconLessInputBaseParts, InputBaseStates } from '../InputBase'
-import { TouchableStylesGen } from '../Touchable'
+import { TouchableComposition, TouchableStylesGen } from '../Touchable'
+
+type SliderParts =
+  'thumb' |
+  'track' |
+  'selectedTrack' |
+  'unselectedTrack' |
+  'trackMark' |
+  'firstTrackMark' |
+  'lastTrackMark' |
+  'trackMarkWrapper' |
+  'sliderContainer' |
+  IconLessInputBaseParts
 
-type SliderParts = 'thumb' | 'track' | 'selectedTrack' | 'unselectedTrack' | 'trackMark' | 'firstTrackMark' | 'lastTrackMark' | 'trackMarkWrapper' | 'sliderContainer' | IconLessInputBaseParts
 type SliderStates = Exclude<InputBaseStates, 'focus'>
 
 export type SliderComposition = `${SliderParts}:${SliderStates}` | SliderParts | 'labelBtn' | 'descriptionBtn'
+
 export type SliderStylesGen = {
   labelBtn: PartialComponentStyle<TouchableComposition, TouchableStylesGen>
   descriptionBtn: PartialComponentStyle<TouchableComposition, TouchableStylesGen>
 }
-const createSliderStyle = createDefaultVariantFactory<SliderComposition>()
-
-export const SliderPresets = includePresets((styles) => createSliderStyle(() => ({ wrapper: styles })))