@codeleap/mobile 5.0.14 → 5.1.0

package/src/components/InputBase/index.tsx

@@ -10,6 +10,8 @@ import RNAnimated, { FadeIn, FadeOut } from 'react-native-reanimated'
 import { View as RNView } from 'react-native'
 import { StyledComponentProps, StyledComponentWithProps } from '@codeleap/styles'
 
+export { useInputBase } from './useInputBase'
+
 export * from './styles'
 export * from './utils'
 export * from './types'

package/src/components/InputBase/types.ts

@@ -1,7 +1,7 @@
 import { PropsOf, StylesOf } from '@codeleap/types'
 import { InputBaseComposition } from './styles'
 import { ActionIcon } from '../ActionIcon'
-import { View } from 'react-native'
+import { View, ViewProps } from 'react-native'
 
 type ActionIconProps = PropsOf<typeof ActionIcon>
 
@@ -27,4 +27,5 @@ export type InputBaseProps = React.PropsWithChildren<{
   hideErrorMessage?: boolean
   hasValue?: boolean
   ref?: React.Ref<View>
+  onLayout?: ViewProps['onLayout']
 }>

package/src/components/Tabs/Context.tsx

@@ -0,0 +1,40 @@
+import { createContext, useContext, useState } from 'react'
+import { TabsContextProps, TabsStyles } from './types'
+
+function useTabHandle(props: TabsContextProps & { styles: TabsStyles }) {
+  const {
+    defaultValue,
+    value,
+    onValueChange,
+    keepMounted,
+    styles
+  } = props
+
+  const [tabValue, setTabValue] = !onValueChange && !value
+    ? useState<string>(defaultValue)
+    : [value ?? defaultValue, onValueChange]
+
+  return {
+    value: tabValue,
+    setValue: setTabValue,
+    styles,
+    keepMounted,
+  }
+}
+
+const Context = createContext({} as ReturnType<typeof useTabHandle>)
+
+export function TabsProvider({ children, ...handleProps }: TabsContextProps & { styles: TabsStyles }) {
+  const handle = useTabHandle(handleProps)
+  return <Context.Provider value={handle}>{children}</Context.Provider>
+}
+
+export function useTabContext() {
+  const ctx = useContext(Context)
+
+  if (ctx === null) {
+    throw new Error('Tabs component was not found in the tree')
+  }
+
+  return ctx
+}

package/src/components/Tabs/Panel.tsx

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react'
+import { useTabContext } from './Context'
+import { memoBy } from '@codeleap/utils'
+import { TabPropsWithCtx } from './types'
+import { View, ViewProps } from '../View'
+import { ICSS } from '@codeleap/styles'
+
+type PanelProps = Omit<ViewProps, 'style'> & {
+  value: string
+  children: ReactNode
+  style?: ICSS
+  keepMounted?: boolean
+}
+
+const PanelMemoized = memoBy((props: TabPropsWithCtx<PanelProps>) => {
+  const { children } = props
+
+  return <>{children}</>
+}, ['children', 'styles'])
+
+export const Panel = ({ keepMounted: panelKeepMounted = true, ...props }: PanelProps) => {
+  const { value, styles, keepMounted } = useTabContext()
+
+  const active = value === props.value
+
+  if (!keepMounted && !active || !panelKeepMounted && !active) return null
+
+  return <View style={[styles?.panel, props?.style, { display: active ? 'flex' : 'none' }]}>
+    <PanelMemoized {...props} styles={styles} />
+  </View>
+}

package/src/components/Tabs/Tab.tsx

@@ -0,0 +1,69 @@
+import { AppIcon } from '@codeleap/styles'
+import { useTabContext } from './Context'
+import { memoBy } from '@codeleap/utils'
+import { TabPropsWithCtx } from './types'
+import { Touchable } from '../Touchable'
+import { Icon } from '../Icon'
+import { Text } from '../Text'
+
+type TabProps = {
+  value: string
+  text?: string
+  icon?: AppIcon
+  disabled?: boolean
+}
+
+const TabMemoized = memoBy((props: TabPropsWithCtx<TabProps>) => {
+  const {
+    value,
+    text,
+    icon,
+    active,
+    setValue,
+    styles,
+    disabled
+  } = props
+
+  return (
+    <Touchable
+      style={[
+        styles?.tabWrapper,
+        active && styles?.['tabWrapper:active'],
+        disabled && styles?.['tabWrapper:disabled']
+      ]}
+      onPress={() => setValue(value)}
+      debugName={`tabs:${value}`}
+    >
+      <Icon
+        style={[
+          styles?.tabIcon,
+          active && styles?.['tabIcon:active'],
+          disabled && styles?.['tabIcon:disabled']
+        ]}
+        name={icon}
+      />
+
+      <Text
+        style={[
+          styles?.tabText,
+          active && styles?.['tabText:active'],
+          disabled && styles?.['tabText:disabled']
+        ]}
+        text={text}
+      />
+    </Touchable>
+  )
+}, ['icon', 'text', 'active', 'styles', 'disabled'])
+
+export const Tab = (props: TabProps) => {
+  const { value, setValue, styles } = useTabContext()
+
+  const active = value === props.value
+
+  return <TabMemoized
+    {...props}
+    active={active}
+    setValue={setValue}
+    styles={styles}
+  />
+}

package/src/components/Tabs/TabList.tsx

@@ -0,0 +1,19 @@
+import { ScrollView, ScrollViewProps } from 'react-native'
+import { useTabContext } from './Context'
+
+type TabListProps = ScrollViewProps
+
+export const TabList = (props: TabListProps) => {
+  const { styles } = useTabContext()
+
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      showsVerticalScrollIndicator={false}
+      {...props}
+      style={styles?.tabList}
+      contentContainerStyle={styles?.tabListContainer}
+    />
+  )
+}

package/src/components/Tabs/index.tsx

@@ -0,0 +1,66 @@
+import { AnyRecord } from '@codeleap/types'
+import { View } from '../View'
+import { TabsProvider } from './Context'
+import { Panel } from './Panel'
+import { Tab } from './Tab'
+import { TabList } from './TabList'
+import { TabsProps } from './types'
+import { IJSX, StyledComponentProps } from '@codeleap/styles'
+import { MobileStyleRegistry } from '../../Registry'
+import { useStylesFor } from '../../hooks'
+
+export { useTabContext } from './Context'
+
+export * from './types'
+export * from './styles'
+
+export const Tabs = (props: TabsProps) => {
+  const {
+    style,
+    value,
+    onValueChange,
+    defaultValue,
+    keepMounted,
+    children,
+    ...rest
+  } = {
+    ...Tabs.defaultProps,
+    ...props,
+  }
+
+  const styles = useStylesFor(Tabs.styleRegistryName, style)
+
+  return <View {...rest} style={styles?.wrapper}>
+    <TabsProvider
+      value={value}
+      onValueChange={onValueChange}
+      defaultValue={defaultValue}
+      styles={styles}
+      keepMounted={keepMounted}
+    >
+      {children}
+    </TabsProvider>
+  </View>
+}
+
+Tabs.Tab = Tab
+Tabs.TabList = TabList
+Tabs.Panel = Panel
+
+Tabs.styleRegistryName = 'Tabs'
+Tabs.elements = ['wrapper', 'tab', 'panel']
+Tabs.rootElement = 'wrapper'
+
+Tabs.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return Tabs as ((props: StyledComponentProps<TabsProps, typeof styles>) => IJSX) & {
+    Tab: typeof Tab,
+    TabList: typeof TabList,
+    Panel: typeof Panel,
+  }
+}
+
+Tabs.defaultProps = {
+  keepMounted: true,
+} as Partial<TabsProps>
+
+MobileStyleRegistry.registerComponent(Tabs)

package/src/components/Tabs/styles.ts

@@ -0,0 +1,11 @@
+type TabStates = 'active' | 'disabled'
+
+type TabComposition = 'wrapper' | 'icon' | 'text'
+
+export type TabsComposition =
+  'wrapper' |
+  'panel' |
+  'tabList' |
+  'tabListContainer' |
+  `tab${Capitalize<TabComposition>}` |
+  `tab${Capitalize<TabComposition>}:${TabStates}`

package/src/components/Tabs/types.ts

@@ -0,0 +1,27 @@
+import { ICSS, StyledProp } from '@codeleap/styles'
+import { ReactNode } from 'react'
+import { TabsComposition } from './styles'
+import { ViewProps } from '../View'
+
+export type TabsContextProps = {
+  defaultValue: string
+  value?: string
+  onValueChange?: (newValue: string) => void
+  children?: ReactNode
+  keepMounted?: boolean
+}
+
+export type TabsProps =
+  TabsContextProps &
+  Omit<ViewProps, 'style'> &
+  {
+    style?: StyledProp<TabsComposition>
+  }
+
+export type TabsStyles = Record<TabsComposition, ICSS>
+
+export type TabPropsWithCtx<P> = P & {
+  active?: boolean
+  setValue?: (value: string) => void
+  styles: TabsStyles
+}

package/src/components/TextInput/index.tsx

@@ -41,6 +41,7 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inp
     selectionStart,
     forceError,
     multiline,
+    onLayout,
     ...textInputProps
   } = others
 
@@ -73,7 +74,7 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inp
   const partialStyles = useInputBasePartialStyles(styles, ['placeholder', 'selection'], {
     disabled: isDisabled,
     error: !!hasError,
-    focus: isFocused,
+    focus: isFocused || textInputProps?.focused,
   })
 
   const visibilityToggleProps = visibilityToggle ? {
@@ -102,6 +103,7 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inp
 
   return <InputBase
     {...inputBaseProps}
+    onLayout={onLayout}
     ref={wrapperRef}
     innerWrapper={isPressable ? Touchable : undefined}
     debugName={debugName}
@@ -121,7 +123,7 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inp
       dismissKeyboard: false,
     }}
     rightIcon={rightIcon}
-    focused={isFocused}
+    focused={isFocused || textInputProps?.focused}
     hasValue={hasValue}
   >
     <InputElement
@@ -142,7 +144,7 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inp
       style={[
         styles?.input,
         multiline && styles['input:multiline'],
-        isFocused && styles['input:focused'],
+        (isFocused || textInputProps?.focused) && styles['input:focused'],
         hasError && styles['input:error'],
         isDisabled && styles['input:disabled'],
         hasMultipleLines && styles['input:hasMultipleLines'],

package/src/components/components.ts

@@ -38,4 +38,6 @@ export * from './SearchInput'
 export * from './PaginationIndicator'
 export * from './PlacesAutocomplete'
 export * from './SortablePhotos'
-export * from './SectionFilters'
+export * from './SectionFilters'
+export * from './Tabs'
+export * from './CalendarInput'