@codeleap/mobile 3.25.0 → 3.25.3

package/src/components/SegmentedControl/styles.ts

@@ -1,25 +1,25 @@
-import { StylesOf } from '@codeleap/common'
+import { createDefaultVariantFactory, includePresets, 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}` |
-  'labelText' |
-  'labelWrapper' |
-  `badge${Capitalize<BadgeComposition>}`
+ `label${Capitalize<InputLabelComposition>}` |
+ `badge${Capitalize<BadgeComposition>}`
 
 export type SegmentedControlStylesGen<TCSS = any> =
   StylesOf<
@@ -27,3 +27,10 @@ export type SegmentedControlStylesGen<TCSS = any> =
   > & {
     buttonFeedback?: TouchableStylesGen['feedback']
   }
+
+const createSegmentedControlStyle = createDefaultVariantFactory<
+SegmentedControlComposition,
+SegmentedControlStylesGen
+>()
+
+export const SegmentedControlPresets = includePresets((style) => createSegmentedControlStyle(() => ({ wrapper: style })))

package/src/components/Select/index.tsx

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

package/src/components/Select/styles.ts

@@ -1,8 +1,6 @@
-import { ButtonComposition } from '../Button'
+import { ButtonComposition, createDefaultVariantFactory, includePresets, TextInputComposition } from '@codeleap/common'
 import { ListComposition } from '../List'
 import { ModalComposition } from '../Modal'
-import { TextInputComposition } from '../TextInput'
-
 type ItemStates = '' | ':selected'
 
 type ItemParts = ButtonComposition
@@ -15,3 +13,7 @@ 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,5 +1,9 @@
-import { FormTypes, PropsOf } from '@codeleap/common'
-import { AppIcon, StyledProp } from '@codeleap/styles'
+import {
+  ComponentVariants,
+  FormTypes,
+  IconPlaceholder,
+  PropsOf,
+} from '@codeleap/common'
 import { StylesOf } from '../../types/utility'
 import { GetKeyboardAwarePropsOptions } from '../../utils'
 import { ActionIconProps } from '../ActionIcon'
@@ -7,27 +11,25 @@ import { Icon } from '../Icon'
 import { FlatListProps } from '../List'
 import { ModalProps } from '../Modal'
 import { Text } from '../Text'
-import { TextInputComposition } from '../TextInput'
-import { SearchInputProps } from '../SearchInput'
+import { SearchInputProps, TextInputComposition, TextInputProps } from '../TextInput'
 import { Touchable } from '../Touchable'
-import { SelectComposition } from './styles'
+import { SelectComposition, SelectPresets } from './styles'
 
 export type SelectRenderFNProps<T> = {
-  style: StylesOf<SelectComposition>
+  styles: StylesOf<SelectComposition>
   onPress: () => void
-  selected?: boolean
+  isSelected?: 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, 'style'>
+type SelectModalProps = Omit<ModalProps, 'variants' | 'styles'>
 
 export type SelectValue<T, Multi extends boolean = false> = Multi extends true ? T[] : T
 
@@ -35,7 +37,7 @@ type SelectHeaderProps = {
   searchComponent?: React.ReactNode
 }
 
-export type SelectOuterInputProps<T = any, Multi extends boolean = false> = SelectProps<T, Multi> & {
+export type SelectOuterInputProps<T = any, Multi extends boolean = false> = Omit<SelectProps<T, Multi>, 'variants'| 'styles'> & {
   currentValueLabel: FormTypes.Label
   styles?: StylesOf<TextInputComposition>
   clearIcon?: Partial<ActionIconProps>
@@ -67,22 +69,24 @@ 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> =
-  SelectModalProps &
-  ValueBoundSelectProps<T, Multi> &
-  {
+export type SelectProps<T = any, Multi extends boolean = false> = {
     placeholder?: FormTypes.Label
     label?: FormTypes.Label
+    styles?: StylesOf<SelectComposition>
+    style?: TextInputProps['style']
     hideInput?: boolean
-    selectedIcon?: AppIcon
-    arrowIconName?: AppIcon
+    selectedIcon?: IconPlaceholder
+    arrowIconName?: IconPlaceholder
     closeOnSelect?: boolean
+
     listProps?: Partial<FlatListProps>
     clearable?: boolean
-    clearIconName?: AppIcon
+    clearIconName?: IconPlaceholder
     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>
@@ -90,5 +94,6 @@ export type SelectProps<T = any, Multi extends boolean = false> =
     searchInputProps?: Partial<SearchInputProps>
     loadOptionsOnMount?: boolean
     loadOptionsOnOpen?: boolean
-    style?: StyledProp<SelectComposition>
-  }
+
+  } & ComponentVariants<typeof SelectPresets> & SelectModalProps & ValueBoundSelectProps<T, Multi>
+