useFieldType hook (#3130)

* useFieldType hook

* renamed renderPickerInnerInput - pickerInnerInput

Author: adids1221

src/components/picker/helpers/useFieldType.tsx

@@ -0,0 +1,59 @@
+import _ from 'lodash';
+import React, {useMemo} from 'react';
+import Icon from '../../icon';
+import Text from '../../text';
+import View from '../../view';
+import {PickerProps, PickerFieldTypes} from '../types';
+import {Typography} from '../../../style';
+
+type UseFieldTypeProps = Pick<
+  PickerProps,
+  'fieldType' | 'preset' | 'trailingAccessory' | 'label' | 'placeholder' | 'style' | 'labelStyle'
+>;
+
+const dropdown = require('../assets/dropdown.png');
+
+const useFieldType = (props: UseFieldTypeProps) => {
+  const {fieldType, preset, trailingAccessory, label, placeholder, style, labelStyle} = props;
+
+  const propsByFieldType = useMemo(() => {
+    if (fieldType === PickerFieldTypes.filter) {
+      return {
+        preset: preset || null,
+        containerStyle: {flexDirection: 'row'},
+        labelStyle: Typography.text70,
+        trailingAccessory: trailingAccessory ?? <Icon marginL-s1 source={dropdown}/>
+      };
+    } else if (fieldType === PickerFieldTypes.settings) {
+      return {
+        preset: preset || null,
+        label: undefined
+      };
+    }
+  }, [fieldType, preset, trailingAccessory]);
+
+  const pickerInnerInput = useMemo(() => {
+    if (fieldType === PickerFieldTypes.filter) {
+      return (
+        <Text text70 numberOfLines={1} style={style}>
+          {_.isEmpty(label) ? placeholder : label}
+        </Text>
+      );
+    } else if (fieldType === PickerFieldTypes.settings) {
+      return (
+        <View flexG row spread>
+          <Text text70 style={labelStyle}>
+            {label}
+          </Text>
+          <Text text70 $textPrimary style={style}>
+            {_.isEmpty(label) ? placeholder : label}
+          </Text>
+        </View>
+      );
+    }
+  }, [style, labelStyle, fieldType, placeholder, label]);
+
+  return {propsByFieldType, pickerInnerInput};
+};
+
+export default useFieldType;

src/components/picker/index.tsx

@@ -6,21 +6,18 @@
 import _ from 'lodash';
 import React, {useMemo, useState, useRef, useCallback, useEffect} from 'react';
 import {LayoutChangeEvent} from 'react-native';
-import {Typography} from 'style';
 import {useThemeProps} from 'hooks';
 import {Constants} from '../../commons/new';
 import ExpandableOverlay, {ExpandableOverlayProps, ExpandableOverlayMethods} from '../../incubator/expandableOverlay';
 import TextField from '../textField';
-import Icon from '../icon';
-import View from '../view';
-import Text from '../text';
 import PickerItemsList from './PickerItemsList';
 import PickerItem from './PickerItem';
 import PickerContext from './PickerContext';
 import usePickerSelection from './helpers/usePickerSelection';
 import usePickerLabel from './helpers/usePickerLabel';
 import usePickerSearch from './helpers/usePickerSearch';
 import useImperativePickerHandle from './helpers/useImperativePickerHandle';
+import useFieldType from './helpers/useFieldType';
 // import usePickerMigrationWarnings from './helpers/usePickerMigrationWarnings';
 import {extractPickerItems} from './PickerPresenter';
 import {
@@ -35,8 +32,6 @@ import {
   PickerMethods
 } from './types';
 
-const dropdown = require('./assets/dropdown.png');
-
 const DIALOG_PROPS = {
   bottom: true,
   width: '100%',
@@ -134,6 +129,17 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     placeholder: themeProps.placeholder
   });
 
+  const {placeholder, style, trailingAccessory} = themeProps;
+  const {propsByFieldType, pickerInnerInput} = useFieldType({
+    fieldType,
+    preset,
+    trailingAccessory,
+    style,
+    placeholder,
+    labelStyle,
+    label
+  });
+
   const onSelectedItemLayout = useCallback((event: LayoutChangeEvent) => {
     const y = event.nativeEvent.layout.y;
     setSelectedItemPosition(y);
@@ -176,22 +182,6 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     ...pickerModalProps
   };
 
-  const propsByFieldType = useMemo(() => {
-    if (fieldType === PickerFieldTypes.filter) {
-      return {
-        preset: preset || null,
-        containerStyle: {flexDirection: 'row'},
-        labelStyle: Typography.text70,
-        trailingAccessory: themeProps.trailingAccessory ?? <Icon marginL-s1 source={dropdown}/>
-      };
-    } else if (fieldType === PickerFieldTypes.settings) {
-      return {
-        preset: preset || null,
-        label: undefined
-      };
-    }
-  }, [fieldType, preset, themeProps.trailingAccessory]);
-
   const renderPickerItem = useCallback((item: PickerItemProps, index: number): React.ReactElement => {
     return <PickerItem key={`${index}-${item.value}`} {...item}/>;
   }, []);
@@ -270,27 +260,6 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     items
   ]);
 
-  const renderPickerInnerInput = () => {
-    if (fieldType === PickerFieldTypes.filter) {
-      return (
-        <Text text70 numberOfLines={1} style={others.style}>
-          {_.isEmpty(label) ? others.placeholder : label}
-        </Text>
-      );
-    } else if (fieldType === PickerFieldTypes.settings) {
-      return (
-        <View flexG row spread>
-          <Text text70 style={labelStyle}>
-            {others.label}
-          </Text>
-          <Text text70 $textPrimary style={others.style}>
-            {_.isEmpty(label) ? others.placeholder : label}
-          </Text>
-        </View>
-      );
-    }
-  };
-
   return (
     //TODO : fix the ExpandableOverlay ts error
     <PickerContext.Provider value={contextValue}>
@@ -326,7 +295,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
               value={label}
               selection={Constants.isAndroid ? {start: 0} : undefined}
             >
-              {renderPickerInnerInput()}
+              {pickerInnerInput}
             </TextField>
           )}
         </ExpandableOverlay>