@codeleap/mobile 2.0.5 → 2.1.0

package/src/components/TextInput/styles.ts

@@ -1,5 +1,6 @@
 import { assignTextStyle, createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { ActionIconParts } from '../ActionIcon'
+import { InputLabelComposition } from '../InputLabel'
 
 export type IconParts = Exclude<ActionIconParts, 'icon' | 'icon:disabled'>
 type InputIcons = 'icon' | 'leftIcon' | 'rightIcon'
@@ -11,15 +12,13 @@ type TextInputParts =
   | 'wrapper'
   | InputIconComposition
   | 'textField'
-  | 'label'
   | 'innerWrapper'
   | 'error'
   | 'subtitle'
   | 'subtitleWrapper'
   | 'placeholder'
   | 'selection'
-  | 'requiredAsterisk'
-  | 'labelWrapper'
+  | `label${Capitalize<InputLabelComposition>}`
 
 export type TextInputComposition =
   | `${TextInputParts}:error`
@@ -62,8 +61,11 @@ export const TextInputStyles = {
       alignItems: 'center',
     },
 
-    label: {
+    labelWrapper: {
       ...theme.spacing.marginBottom(1),
+
+    },
+    labelText: {
       ...assignTextStyle('h5')(theme).text,
     },
     'icon': {
@@ -94,7 +96,7 @@ export const TextInputStyles = {
     subtitle: {
       ...theme.presets.textRight,
     },
-    'label:error': {
+    'labelText:error': {
       color: theme.colors.negative,
     },
 
@@ -104,12 +106,7 @@ export const TextInputStyles = {
     'innerWrapper:focus': {
       ...theme.border.primary(1),
     },
-    requiredAsterisk: {
-      color: theme.colors.negative,
-    },
-    labelWrapper: {
-      ...theme.presets.row,
-    },
+
   })),
   line: createTextInputStyle((theme) => ({
     innerWrapper: {

package/src/components/Touchable/index.tsx

@@ -122,17 +122,18 @@ export const Touchable: React.FC<TouchableProps> = forwardRef<
       'margin',
       'alignSelf',
       'border',
+      'top!',
+      'left!',
+      'right!',
+      'bottom!',
+      'position!',
       // 'flex!',
     ]
     const sharedKeys = [
       'width!',
       'height!',
       'flex!',
-      'position!',
-      'top!',
-      'left!',
-      'right!',
-      'bottom!',
+
     ]
 
     const wrapperStyle = {} as any

package/src/components/components.ts

@@ -31,6 +31,7 @@ export * from './Drawer'
 export * from './MultiSelect'
 export * from './AutoComplete'
 export * from './Grid'
+export * from './InputLabel'
 export * from './ActionIcon'
 
 import * as Legacy from './legacy'

package/src/components/defaultStyles.ts

@@ -26,6 +26,7 @@ import { MultiSelectStyles } from './MultiSelect'
 import { ScrollStyles } from './Scroll'
 import { ActionIconStyles } from './ActionIcon'
 import { GridStyles } from './Grid'
+import { InputLabelStyles } from './InputLabel'
 
 export const defaultStyles = {
   View: ViewStyles,
@@ -57,4 +58,5 @@ export const defaultStyles = {
   PaginationIndicator: PaginationIndicatorStyles,
   ActionIcon: ActionIconStyles,
   Grid: GridStyles,
+  InputLabel: InputLabelStyles,
 }

package/src/components/TextInput/Label.tsx

@@ -1,26 +0,0 @@
-import React from 'react'
-import { useDefaultComponentStyle } from '@codeleap/common'
-import { StyleSheet } from 'react-native'
-import { Text } from '../Text'
-import { View } from '../View'
-
-export const InputLabel = ({ label, variants = [], styles = {}, style, asteriskStyle = null, required = false, wrapperStyle = null }) => {
-  const labelStyles = useDefaultComponentStyle('TextInput', {
-    variants, styles, transform: StyleSheet.flatten,
-  })
-
-  if (!label) return null
-
-  switch (typeof label) {
-    case 'string':
-      return <View style={ wrapperStyle || labelStyles.labelWrapper}>
-        <Text style={style || labelStyles.label} text={label} />
-        {required && <Text style={asteriskStyle || labelStyles.requiredAsterisk} text={' *'} />}
-      </View>
-    case 'object':
-      return label
-    default:
-      return null
-  }
-}
-