@codeleap/mobile 2.4.7 → 3.1.1

package/src/components/SegmentedControl/styles.ts

@@ -1,8 +1,9 @@
 import { createDefaultVariantFactory, includePresets, StylesOf } from '@codeleap/common'
+import { BadgeComposition } from '../Badge'
 import { InputLabelComposition } from '../InputLabel'
 import { TouchableStylesGen } from '../Touchable'
 
-export type SegmentedControlStates = 'selected'
+export type SegmentedControlStates = 'selected' | 'disabled'
 
 export type SegmentedControlComposition =
  'selectedBubble' |
@@ -12,10 +13,13 @@ export type SegmentedControlComposition =
  'scrollContent' |
  'text' |
  `text:${SegmentedControlStates}` |
+ 'icon' |
  'button' |
  'buttonFeedback' |
  `button:${SegmentedControlStates}` |
- `label${Capitalize<InputLabelComposition>}`
+  `selectedBubble:${SegmentedControlStates}` |
+ `label${Capitalize<InputLabelComposition>}` |
+ `badge${Capitalize<BadgeComposition>}`
 
 export type SegmentedControlStylesGen<TCSS = any> =
   StylesOf<
@@ -29,64 +33,4 @@ SegmentedControlComposition,
 SegmentedControlStylesGen
 >()
 
-const presets = includePresets((style) => createSegmentedControlStyle(() => ({ wrapper: style })))
-
-export const SegmentedControlStyles = {
-  ...presets,
-  default: createSegmentedControlStyle((theme) => {
-
-    return {
-      buttonFeedback: {
-        type: 'opacity',
-        value: 0.5,
-      },
-      text: {
-        color: theme.colors.text,
-      },
-      'text:selected': {
-        color: theme.colors.white,
-      },
-      wrapper: {
-        height: 'auto',
-      },
-      scroll: {
-        height: theme.values.buttons.default.height,
-        maxHeight: theme.values.buttons.default.height,
-      },
-      scrollContent: {
-        ...theme.presets.row,
-        ...theme.presets.alignStretch,
-        height: theme.values.buttons.default.height,
-
-      },
-      button: {
-        backgroundColor: 'transparent',
-        ...theme.presets.alignCenter,
-        ...theme.presets.justifyCenter,
-
-        borderRadius: theme.borderRadius.medium,
-        ...theme.spacing.padding(1),
-        minHeight: '100%',
-
-      },
-      selectedBubble: {
-        position: 'absolute',
-        zIndex: -1,
-        ...theme.spacing.padding(2),
-        top: 0,
-        bottom: 0,
-        borderRadius: theme.borderRadius.medium,
-        backgroundColor: theme.colors.primary,
-      },
-      innerWrapper: {
-        borderRadius: theme.borderRadius.medium,
-        backgroundColor: theme.colors.backgroundSecondary,
-        ...theme.presets.row,
-        position: 'relative',
-        height: theme.values.buttons.default.height,
-      },
-
-    }
-
-  }),
-}
+export const SegmentedControlPresets = includePresets((style) => createSegmentedControlStyle(() => ({ wrapper: style })))

package/src/components/Select/index.tsx

@@ -1,120 +1,267 @@
 import { IconPlaceholder,
-  getNestedStylesByKey,
   useDefaultComponentStyle,
-  TypeGuards } from '@codeleap/common'
+  TypeGuards,
+  useNestedStylesByKey,
+  FormTypes,
+  onMount,
+  onUpdate,
+  usePrevious,
+  useSearch,
+  useBooleanToggle,
+} from '@codeleap/common'
 import React, { useCallback, useMemo } from 'react'
 import { StyleSheet } from 'react-native'
 import { List } from '../List'
-import { Text } from '../Text'
-import { TextInput } from '../TextInput'
-import { Touchable } from '../Touchable'
-import { SelectStyles } from './styles'
-import { CustomSelectProps } from './types'
+import { SearchInput, TextInput } from '../TextInput'
+import { SelectPresets } from './styles'
+import { SelectProps, ValueBoundSelectProps } from './types'
 import { ModalManager } from '../../utils'
-import { Icon } from '../Icon'
-
-export const SelectItem = ({
-  item,
-  icon = null,
-  isSelected,
-  styles,
-  onPress,
-  iconProps = {},
-  textProps = {},
-  ...touchableProps
-}) => {
-  return <Touchable
-    style={[
-      styles.itemWrapper,
-      isSelected && styles['itemWrapper:selected'],
-    ]}
-    onPress={onPress}
-    debugName={`Select ${item.value}`}
-    debounce={null}
-    {...touchableProps}
-  >
-    <Text
-      text={item.label}
-      style={[
-        styles.itemText,
-        isSelected && styles['itemText:selected'],
-      ]}
-      {...textProps}
-    />
-    {icon ? <Icon
-      name={icon}
-      style={[styles?.itemIcon, isSelected && styles?.['itemIcon:selected']]}
-      {...iconProps}
-    /> : null}
-  </Touchable>
-}
+import { Button } from '../Button'
+export * from './styles'
 
 export * from './styles'
-export const Select = <T extends string|number = string>(selectProps:CustomSelectProps<T>) => {
+
+const defaultFilterFunction = (search: string, options: FormTypes.Options<any>) => {
+  return options.filter((option) => {
+    if (TypeGuards.isString(option.label)) {
+      return option.label.toLowerCase().includes(search.toLowerCase())
+    }
+
+    return option.label === search
+  })
+}
+
+const OuterInput:ValueBoundSelectProps<any, boolean>['outerInputComponent'] = (props) => {
+  const {
+    currentValueLabel,
+    debugName,
+    clearIcon,
+    label,
+    toggle,
+    styles,
+    style,
+  } = props
+
+  return <TextInput
+    value={TypeGuards.isString(currentValueLabel) ? currentValueLabel : ''}
+    rightIcon={clearIcon}
+    onPress={() => toggle()}
+    label={label}
+    debugName={debugName}
+    styles={styles}
+    style={style}
+    innerWrapperProps={{
+      rippleDisabled: true,
+    }}
+
+  />
+}
+
+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: {},
+}
+
+export const Select = <T extends string|number = string, Multi extends boolean = false>(selectProps:SelectProps<T, Multi>) => {
+  const allProps = {
+    ...defaultProps,
+    ...selectProps,
+  }
   const {
     value,
     onValueChange,
     label,
     styles = {},
-    options,
+    options = [],
     style,
     variants,
+    description,
     renderItem,
-    closeOnSelect = true,
     listProps,
+    debugName,
     placeholder = 'Select',
-    arrowIconName = 'selectArrow',
-    clearIconName = 'close',
+    arrowIconName = 'chevrons-up-down',
+    clearIconName = 'x',
     clearable = false,
-    selectedIcon = 'selectMarker',
+    selectedIcon = 'check',
     inputProps = {},
     hideInput = false,
     itemProps = {},
-    ...drawerProps
-  } = selectProps
+    searchable,
+    loadOptions,
+    multiple = false,
+    closeOnSelect = !multiple,
+    limit = null,
+    defaultOptions = options,
+    visible: _visible,
+    toggle: _toggle,
+    ListHeaderComponent,
+    onLoadOptionsError,
+    loadOptionsOnMount = defaultOptions.length === 0,
+    loadOptionsOnOpen = false,
+    filterItems = defaultFilterFunction,
+    getLabel,
+    searchInputProps,
+    outerInputComponent,
+    ...modalProps
+  } = allProps
+
+  const isValueArray = TypeGuards.isArray(value) && multiple
+
+  const {
+    loading,
+    setLoading,
+    labelOptions,
+    setLabelOptions,
+    filteredOptions,
+    load,
+    onChangeSearch,
+  } = useSearch({
+    value,
+    multiple,
+    options,
+    filterItems,
+    debugName,
+    defaultOptions,
+    loadOptions,
+    onLoadOptionsError,
+  })
+
+  const [visible, toggle] = TypeGuards.isBoolean(_visible) && !!_toggle ? [_visible, _toggle] : useBooleanToggle(false)
+
+  const currentValueLabel = useMemo(() => {
+    const _options = (multiple ? labelOptions : labelOptions?.[0]) as Multi extends true ? FormTypes.Options<T> : FormTypes.Options<T>[number]
+
+    const label = getLabel(
+      _options,
+    ) || placeholder
+
+    return label
+  }, [labelOptions])
+
+  onMount(() => {
+    if (loadOptionsOnMount && !!loadOptions) {
+      load()
+    }
+  })
+
+  const prevVisible = usePrevious(visible)
+
+  onUpdate(() => {
+    if (visible && !prevVisible && loadOptionsOnOpen && !!loadOptions) {
+      load()
+    }
+  }, [visible, prevVisible])
 
-  const variantStyles = useDefaultComponentStyle<'u:Select', typeof SelectStyles>('u:Select', {
+  const variantStyles = useDefaultComponentStyle<'u:Select', typeof SelectPresets>('u:Select', {
     transform: StyleSheet.flatten,
     rootElement: 'inputWrapper',
     styles,
     variants,
   })
 
-  const inputStyles = useMemo(
-    () => getNestedStylesByKey('input', variantStyles),
-    [variantStyles],
-  )
+  const itemStyles = useNestedStylesByKey('item', variantStyles)
+
+  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 = (selectedValue) => {
+
+    let newValue = null
+
+    let newOption = null
+    let removedIndex = null
+
+    if (multiple && isValueArray) {
+
+      if (value.includes(selectedValue)) {
+        removedIndex = value.findIndex(v => v === selectedValue)
 
-  const close = () => drawerProps?.toggle?.()
+        newValue = value.filter((v, i) => i !== removedIndex)
 
-  const select = (value) => {
+      } else {
+
+        if (TypeGuards.isNumber(limit) && value.length >= limit) {
+          return
+        }
+
+        newOption = currentOptions.find(o => o.value === selectedValue)
+
+        newValue = [...value, selectedValue]
+      }
+
+    } else {
+      newValue = selectedValue
+      newOption = currentOptions.find(o => o.value === selectedValue)
+    }
+
+    onValueChange(newValue)
+
+    if (isValueArray) {
+      if (removedIndex !== null) {
+        const newOptions = [...labelOptions]
+        newOptions.splice(removedIndex, 1)
+        setLabelOptions(newOptions)
+      } else {
+        setLabelOptions([...labelOptions, newOption])
+      }
+    } else {
+      setLabelOptions([newOption])
+    }
 
-    onValueChange(value)
     if (closeOnSelect) {
       close?.()
     }
+
   }
 
-  const selectedLabel:string = useMemo(() => {
-    const current = options.find(o => o.value === value)
+  const Item = renderItem || Button
 
-    const display = current?.label ?? placeholder
+  const renderListItem = useCallback(({ item }) => {
 
-    return TypeGuards.isString(display) ? display : ''
-  }, [value, placeholder, options])
-  const Item = renderItem || SelectItem
+    let selected = false
 
-  const renderListItem = useCallback(({ item }) => {
+    if (multiple && isValueArray) {
+      selected = value?.includes(item.value)
+    } else {
+      selected = value === item.value
+    }
 
     return <Item
-      isSelected={value === item.value}
+      debugName={`${debugName} item ${item.value}`}
+      selected={selected}
+      text={item.label}
       item={item}
       onPress={() => select(item.value)}
+      // @ts-ignore
       icon={selectedIcon}
-      styles={variantStyles}
+      // @ts-ignore
+      rightIcon={selectedIcon}
+      styles={itemStyles}
       {...itemProps}
     />
-  }, [value, select])
+  }, [value, select, multiple])
+
   const isEmpty = TypeGuards.isNil(value)
   const showClearIcon = !isEmpty && clearable
 
@@ -129,57 +276,81 @@ export const Select = <T extends string|number = string>(selectProps:CustomSelec
 
   }
 
+  const searchHeader = searchable ? <SearchInput
+    debugName={debugName}
+    onTypingChange={(isTyping) => {
+      if (searchable && !!loadOptions) {
+        setLoading(isTyping)
+      }
+    }}
+    debounce={!!loadOptions ? 800 : null}
+    onSearchChange={onChangeSearch}
+    styles={searchInputStyles}
+    {...searchInputProps}
+  /> : null
+
+  const _ListHeaderComponent = useMemo(() => {
+    if (ListHeaderComponent) {
+      return <ListHeaderComponent
+        searchComponent={searchHeader}
+      />
+    }
+
+    return searchHeader
+
+  }, [searchable, ListHeaderComponent])
+
+  const Input = outerInputComponent
+
   return <>
     {
       !hideInput && (
-        <TextInput
-          caretHidden
-          value={selectedLabel}
-          rightIcon={{
+        // @ts-ignore
+        <Input
+
+          clearIcon={{
             icon: inputIcon as IconPlaceholder,
             onPress: onPressInputIcon,
-            noFeedback: true,
           }}
-          editable={false}
-          touchableWrapper
           onPress={close}
-          wrapperProps={{
-            debugName: 'Select',
+          currentValueLabel={currentValueLabel}
 
-          }}
-          pointerEvents={'none'}
-          label={label}
-          debugName={'Select input'}
+          debugName={`${debugName} select input`}
           styles={inputStyles}
           style={style}
+          {...allProps}
           {...inputProps}
+          visible={visible}
+          toggle={toggle}
         />
       )
     }
 
     <ModalManager.Modal
       title={label}
-      keyboardAware={{
-
-        enabled: false,
-      }}
-      {...drawerProps}
+      description={description}
+      {...modalProps}
+      debugName={`${debugName} modal`}
       styles={variantStyles}
       id={null}
+      visible={visible}
+      toggle={toggle}
+
     >
-      <List<CustomSelectProps<any>['options']>
-        data={options}
+      <List<SelectProps<any>['options']>
+        data={searchable ? filteredOptions : options}
         scrollEnabled={false}
         showsHorizontalScrollIndicator={false}
-        styles={getNestedStylesByKey('list', variantStyles)}
+        styles={listStyles}
         keyExtractor={(i) => i.value}
         renderItem={renderListItem}
-        keyboardAware={{
-          enabled: false,
-          enableOnAndroid: false,
-        }}
+        fakeEmpty={loading}
         separators
         {...listProps}
+        ListHeaderComponent={_ListHeaderComponent}
+        placeholder={{
+          loading,
+        }}
       />
     </ModalManager.Modal>
 
@@ -188,3 +359,5 @@ export const Select = <T extends string|number = string>(selectProps:CustomSelec
 
 export * from './styles'
 export * from './types'
+
+Select.defaultProps = defaultProps

package/src/components/Select/styles.ts

@@ -1,140 +1,20 @@
-import { assignTextStyle, createDefaultVariantFactory, TextInputComposition } from '@codeleap/common'
-import { DrawerComposition, DrawerStyles } from '../Drawer'
+import { ButtonComposition, createDefaultVariantFactory, includePresets, TextInputComposition } from '@codeleap/common'
 import { ListComposition } from '../List'
 import { ModalComposition } from '../Modal'
 type ItemStates = '' | ':selected'
-export type SelectComposition =
-  ModalComposition |
-  `input${TextInputComposition}` |
-  `list${Capitalize<ListComposition>}` |
-  'listContent' |
-  `itemWrapper${ItemStates}` |
-  `itemText${ItemStates}` |
-  `itemIcon${ItemStates}`
-
-const createSelectStyle = createDefaultVariantFactory<SelectComposition>()
-
-export const SelectStyles = {
-  ...DrawerStyles,
-  default: createSelectStyle((theme) => {
-
-    return {
-      wrapper: {
-        ...theme.presets.absolute,
-        // ...theme.presets.whole,
-        ...theme.presets.fullHeight,
-        ...theme.presets.fullWidth,
-      },
-      'box:transition': {
-        scale: {
-          duration: theme.values.transitions.modal.duration,
-          type: 'timing',
-        },
-        opacity: {
-          duration: theme.values.transitions.modal.duration,
-          type: 'timing',
-        },
-      },
-      'backdrop:transition': {
-        opacity: {
-          duration: theme.values.transitions.modal.duration,
-          type: 'timing',
-        },
-      },
-      backdrop: {
-        ...theme.presets.absolute,
-        ...theme.presets.whole,
-
-        backgroundColor: theme.colors.black,
 
-      },
-      backdropTouchable: {
-        // height: '100%',
-        ...theme.presets.absolute,
-        ...theme.presets.whole,
 
-      },
-      'backdrop:visible': {
-        opacity: 0.5,
-      },
-      'backdrop:hidden': {
-        opacity: 0,
-      },
-      innerWrapper: {
+type ItemParts = ButtonComposition
 
-      },
-      scroll: {
-        flex: 1,
-        // maxHeight: theme.values.height,
-      },
-      scrollContent: {
-        ...theme.presets.alignCenter,
-        ...theme.presets.justifyCenter,
-        minHeight: '100%',
-        ...theme.presets.safeAreaTop(theme.values.innerSpacing.Y),
-        ...theme.presets.safeAreaBottom(theme.values.innerSpacing.Y),
-      },
-      box: {
-        backgroundColor: theme.colors.background,
-        width: theme.values.width - theme.spacing.value(theme.values.innerSpacing.X * 2),
-        borderRadius: theme.borderRadius.modalOuter,
-        ...theme.spacing.paddingHorizontal(theme.values.innerSpacing.X),
-        ...theme.spacing.paddingVertical(theme.values.innerSpacing.Y),
-      },
+type ItemComposition = `${ItemParts}${ItemStates}` | ItemParts
 
-      'box:hidden': {
-        opacity: 0,
-        scale: 0.8,
-
-      },
-      'box:visible': {
-        opacity: 1,
-        scale: 1,
-      },
-      header: {
-        flexDirection: 'row',
-        ...theme.presets.justifySpaceBetween,
-        ...theme.presets.alignCenter,
-      },
-      closeButtonTouchableWrapper: {
-        alignSelf: 'center',
-        ...theme.spacing.marginLeft('auto'),
-      },
-      closeButtonIcon: {
-        color: theme.colors.text,
-      },
-      title: {
-        ...assignTextStyle('h3')(theme).text,
-      },
-      listWrapper: {
-        height: 'auto',
-      },
-
-      itemWrapper: {
-        ...theme.presets.row,
-        ...theme.presets.justifySpaceBetween,
-        ...theme.presets.alignCenter,
-        borderRadius: theme.borderRadius.medium,
-        ...theme.spacing.padding(1),
-        backgroundColor: theme.colors.backgroundSecondary,
-      },
-      'itemWrapper:selected': {
-        backgroundColor: theme.colors.primary,
-      },
-      'itemIcon:selected': {
-        color: theme.colors.backgroundSecondary,
-        ...theme.sized(2),
-
-      },
-      'itemText:selected': {
-        color: theme.colors.backgroundSecondary,
+export type SelectComposition =
+  ModalComposition |
+  `input${Capitalize<TextInputComposition>}` |
+  `list${Capitalize<ListComposition>}` |
+  `item${Capitalize<ItemComposition>}` |
+  `searchInput${Capitalize<TextInputComposition>}`
 
-      },
-      itemIcon: {
-        height: 0,
-        width: 0,
+const createSelectStyle = createDefaultVariantFactory<SelectComposition>()
 
-      },
-    }
-  }),
-}
+export const SelectPresets = includePresets((style) => createSelectStyle(() => ({ body: style })))