@chem-po/react-native 0.0.42 → 0.0.43

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>