@chem-po/react-native 0.0.42 → 0.0.44

package/src/components/form/view/index.tsx

@@ -1,7 +1,7 @@
 import { displayField, InputSize } from '@chem-po/core'
 import { Field, FormatField, usePlaceholderColor } from '@chem-po/react'
 import React, { useMemo } from 'react'
-import { StyleSheet, View, ViewStyle } from 'react-native'
+import { StyleProp, StyleSheet, TextStyle, View, ViewStyle } from 'react-native'
 import { Txt } from '../../text'
 import { useInputStyles } from '../input/hooks/useInputStyles'
 import { FileFieldView } from './file'
@@ -23,11 +23,13 @@ const DefaultFieldView = ({
   style,
   size: sizeProp,
   inEditable,
+  textStyle,
 }: {
   field: Field
   value: any
   noLabel?: boolean
   style?: ViewStyle
+  textStyle?: StyleProp<TextStyle>
   size?: InputSize
   inEditable?: boolean
 }) => {
@@ -48,7 +50,7 @@ const DefaultFieldView = ({
   return (
     <View style={[styles.container, containerStyles, { backgroundColor: 'transparent' }, style]}>
       {!noLabel && <Txt style={[inputViewStyles.label, text]}>{placeholder}</Txt>}
-      <Txt style={[text, { color: hasValue ? undefined : placeholderColor }]}>
+      <Txt style={[text, { color: hasValue ? text.color : placeholderColor }, textStyle]}>
         {hasValue ? formatted : 'None'}
       </Txt>
     </View>
@@ -60,6 +62,7 @@ export const FieldView = ({
   value,
   noLabel,
   style,
+  textStyle,
   size,
   inEditable,
 }: {
@@ -67,6 +70,7 @@ export const FieldView = ({
   value?: any
   noLabel?: boolean
   style?: ViewStyle
+  textStyle?: StyleProp<TextStyle>
   size?: InputSize
   inEditable?: boolean
 }) => {
@@ -75,6 +79,7 @@ export const FieldView = ({
       return (
         <SelectFieldView
           style={style}
+          textStyle={textStyle}
           field={field}
           value={value}
           noLabel={noLabel}
@@ -88,13 +93,21 @@ export const FieldView = ({
           style={style}
           field={field}
           value={value}
+          textStyle={textStyle}
           noLabel={noLabel}
           size={size}
         />
       )
     case 'file':
       return (
-        <FileFieldView style={style} field={field} value={value} noLabel={noLabel} size={size} />
+        <FileFieldView
+          textStyle={textStyle}
+          style={style}
+          field={field}
+          value={value}
+          noLabel={noLabel}
+          size={size}
+        />
       )
     default:
       return (
@@ -102,6 +115,7 @@ export const FieldView = ({
           style={style}
           field={field}
           value={value}
+          textStyle={textStyle}
           noLabel={noLabel}
           size={size}
           inEditable={inEditable}

package/src/components/form/view/multipleSelect.tsx

@@ -1,7 +1,7 @@
-import { InputSize } from '@chem-po/core'
+import { BaseSelectOption, InputSize } from '@chem-po/core'
 import { MultipleSelectField, useColorMode, usePlaceholderColor } from '@chem-po/react'
 import { useMemo } from 'react'
-import React, { StyleSheet, Text, View, ViewStyle } from 'react-native'
+import React, { StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle } from 'react-native'
 import { Txt } from '../../text/Txt'
 import { useInputStyles } from '../input/hooks/useInputStyles'
 import { SelectedOptionContainer } from '../input/multipleSelect'
@@ -31,16 +31,23 @@ const styles = StyleSheet.create({
   },
 })
 
-export const MultipleSelectFieldView = <F extends MultipleSelectField>({
+type NativeMultipleSelectField<
+  Value extends any[] = string[],
+  Option extends BaseSelectOption<Value[number]> = BaseSelectOption<Value[number]>,
+> = MultipleSelectField<Value, Option>
+
+export const MultipleSelectFieldView = <F extends NativeMultipleSelectField>({
   field,
   value,
   noLabel,
   size: sizeProp,
   style,
+  textStyle,
 }: {
   field: F
   value?: F['defaultValue']
   noLabel?: boolean
+  textStyle?: StyleProp<TextStyle>
   size?: InputSize
   style?: ViewStyle
 }) => {
@@ -49,12 +56,6 @@ export const MultipleSelectFieldView = <F extends MultipleSelectField>({
   const colorMode = useColorMode()
   const { size, text, container } = useInputStyles(true, field.size, sizeProp)
   const placeholderColor = usePlaceholderColor()
-  const selectedOptionStyle = useMemo<ViewStyle>(() => {
-    return {
-      paddingHorizontal: container.paddingHorizontal,
-      paddingVertical: container.paddingVertical,
-    }
-  }, [container])
   const RenderOption = useMemo(() => customRender ?? DefaultRenderOption, [customRender])
   return (
     <View style={[styles.container, style]}>
@@ -62,10 +63,11 @@ export const MultipleSelectFieldView = <F extends MultipleSelectField>({
       {value?.length ? (
         <View style={styles.optionsContainer}>
           {selectedOptions.map(o => (
-            <SelectedOptionContainer key={o.value} style={selectedOptionStyle}>
+            <SelectedOptionContainer key={o.value} style={[container, { width: 'auto' }]}>
               <RenderOption
                 option={o}
                 value={o.value}
+                textStyle={[text, textStyle]}
                 colorMode={colorMode}
                 isSelected
                 size={size}
@@ -75,7 +77,7 @@ export const MultipleSelectFieldView = <F extends MultipleSelectField>({
         </View>
       ) : (
         <View style={container}>
-          <Txt style={[text, { color: placeholderColor }]}>None</Txt>
+          <Txt style={[text, { color: placeholderColor }, textStyle]}>None</Txt>
         </View>
       )}
     </View>

package/src/components/form/view/select.tsx

@@ -1,7 +1,7 @@
-import { BaseSelectOption, InputSize, RenderSelectOptionProps } from '@chem-po/core'
+import { InputSize, RenderSelectOptionProps } from '@chem-po/core'
 import { SelectField, useColorMode, usePlaceholderColor } from '@chem-po/react'
-import React from 'react'
-import { StyleSheet, Text, View, ViewStyle } from 'react-native'
+import React, { useMemo } from 'react'
+import { StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle } from 'react-native'
 import { Txt } from '../../text'
 import { useInputStyles } from '../input/hooks/useInputStyles'
 import { inputViewStyles } from './styles'
@@ -18,31 +18,35 @@ const styles = StyleSheet.create({
   },
 })
 
-export const DefaultRenderOption = <
-  Value = string,
-  Option extends BaseSelectOption<Value> = BaseSelectOption<Value>,
->({
+export const DefaultRenderOption = ({
   option,
-}: RenderSelectOptionProps<Value, Option>) => {
+  containerStyle,
+  textStyle,
+}: RenderSelectOptionProps & {
+  containerStyle?: StyleProp<ViewStyle>
+  textStyle?: StyleProp<TextStyle>
+}) => {
   return (
-    <View style={{ padding: 6 }}>
-      <Txt style={inputViewStyles.value}>{option.label}</Txt>
+    <View style={containerStyle}>
+      <Txt style={[inputViewStyles.value, textStyle]}>{option.label}</Txt>
     </View>
   )
 }
 
-export const SelectFieldView = ({
+export const SelectFieldView = <F extends SelectField>({
   field,
   value,
   noLabel,
   style,
   size: sizeProp,
   inEditable,
+  textStyle,
 }: {
-  field: SelectField
-  value: any
+  field: F
+  value: F['defaultValue']
   noLabel?: boolean
   style?: ViewStyle
+  textStyle?: StyleProp<TextStyle>
   size?: InputSize
   inEditable?: boolean
 }) => {
@@ -51,23 +55,27 @@ export const SelectFieldView = ({
   const placeholderColor = usePlaceholderColor()
   const { size, text, container } = useInputStyles(inEditable, field.size, sizeProp)
   const selectedOption = field.options.find(o => o.value === value)
-  const RenderOption = customRender ?? DefaultRenderOption
+  const RenderOption = useMemo(() => customRender ?? DefaultRenderOption, [customRender])
   return (
     <View style={[styles.container, style]}>
       {!noLabel && (
-        <Text style={[styles.label, text, { color: placeholderColor }]}>{placeholder}</Text>
+        <Text style={[styles.label, text, { color: placeholderColor }, textStyle]}>
+          {placeholder}
+        </Text>
       )}
       {selectedOption ? (
         <RenderOption
           value={selectedOption.value}
           option={selectedOption}
+          containerStyle={container}
+          textStyle={[text, textStyle]}
           colorMode={colorMode}
           isSelected={true}
           size={size}
         />
       ) : (
         <View style={container}>
-          <Txt style={[text, { color: placeholderColor }]}>None</Txt>
+          <Txt style={[text, { color: placeholderColor }, textStyle]}>None</Txt>
         </View>
       )}
     </View>