Support Picker field types

demo/src/screens/componentScreens/PickerScreen.tsx

@@ -40,6 +40,12 @@ const filters = [
   {label: 'Scheduled', value: 3}
 ];
 
+const schemes = [
+  {label: 'Default', value: 1},
+  {label: 'Light', value: 2},
+  {label: 'Dark', value: 3}
+];
+
 export default class PickerScreen extends Component {
   picker = React.createRef<PickerMethods>();
   state = {
@@ -51,6 +57,7 @@ export default class PickerScreen extends Component {
     nativePickerValue: 'java',
     customModalValues: [],
     filter: filters[0],
+    scheme: schemes[0].value,
     contact: 0
   };
 
@@ -299,6 +306,39 @@ export default class PickerScreen extends Component {
             style={{alignSelf: 'flex-start'}}
             onPress={() => this.picker.current?.openExpandable?.()}
           />
+
+          <Text text60 marginT-s5>
+            Different Field Types
+          </Text>
+          <Text text80 marginB-s5>(Form/Filter/Settings)</Text>
+
+          <Picker
+            migrate
+            migrateTextField
+            value={this.state.filter}
+            onChange={value => this.setState({filter: value})}
+            placeholder="Filter posts"
+            fieldType={Picker.fieldTypes.filter}
+            marginB-s3
+          >
+            {filters.map(filter => (
+              <Picker.Item key={filter.value} {...filter}/>
+            ))}
+          </Picker>
+
+          <Picker
+            migrate
+            migrateTextField
+            value={this.state.scheme}
+            onChange={value => this.setState({scheme: value})}
+            label="Color Scheme"
+            placeholder="Filter posts"
+            fieldType={Picker.fieldTypes.settings}
+          >
+            {schemes.map(scheme => (
+              <Picker.Item key={scheme.value} {...scheme}/>
+            ))}
+          </Picker>
         </View>
       </ScrollView>
     );

src/components/picker/api/picker.api.json

@@ -25,6 +25,12 @@
       "description": "SINGLE mode or MULTI mode",
       "default": "Picker.modes.SINGLE"
     },
+    {
+      "name": "fieldType",
+      "type": "PickerFieldTypes",
+      "description": "Pass for different field type UI (form, filter or settings)",
+      "default": "Picker.modes.FORM"
+    },
     {"name": "selectionLimit", "type": "number", "description": "Limit the number of selected items"},
     {"name": "enableModalBlur", "type": "boolean", "description": "Adds blur effect to picker modal (iOS only)"},
     {

src/components/picker/index.tsx

@@ -18,6 +18,9 @@ import ExpandableOverlay, {ExpandableOverlayProps, ExpandableOverlayMethods} fro
 // @ts-expect-error
 import {TextField} from '../inputs';
 import TextFieldMigrator from '../textField/TextFieldMigrator';
+import Icon from '../icon';
+import View from '../view';
+import Text from '../text';
 // @ts-expect-error
 import NativePicker from './NativePicker';
 import PickerItemsList from './PickerItemsList';
@@ -28,11 +31,22 @@ import usePickerLabel from './helpers/usePickerLabel';
 import usePickerSearch from './helpers/usePickerSearch';
 import useImperativePickerHandle from './helpers/useImperativePickerHandle';
 import usePickerMigrationWarnings from './helpers/usePickerMigrationWarnings';
-import {PickerProps, PickerItemProps, PickerValue, PickerModes, PickerSearchStyle, PickerMethods} from './types';
+import {
+  PickerProps,
+  PickerItemProps,
+  PickerValue,
+  PickerModes,
+  PickerFieldTypes,
+  PickerSearchStyle,
+  PickerMethods
+} from './types';
+
+const dropdown = require('./assets/dropdown.png');
 
 const Picker = (props: PropsWithChildren<PickerProps> & ForwardRefInjectedProps & BaseComponentInjectedProps) => {
   const {
     mode,
+    fieldType = PickerFieldTypes.form,
     selectionLimit,
     showSearch,
     searchStyle,
@@ -65,6 +79,8 @@ const Picker = (props: PropsWithChildren<PickerProps> & ForwardRefInjectedProps
     migrateTextField,
     ...others
   } = props;
+  const {preset} = others;
+  const {paddings, margins, positionStyle} = modifiers;
 
   const [selectedItemPosition, setSelectedItemPosition] = useState(0);
   const [items] = useState(Picker.extractPickerItems(props));
@@ -130,9 +146,6 @@ const Picker = (props: PropsWithChildren<PickerProps> & ForwardRefInjectedProps
     onDoneSelecting
   ]);
 
-  // const textInputProps = TextField.extractOwnProps(props);
-  const {paddings, margins, positionStyle} = modifiers;
-
   const modalProps: ExpandableOverlayProps['modalProps'] = {
     animationType: 'slide',
     transparent: Constants.isIOS && enableModalBlur,
@@ -142,6 +155,21 @@ const Picker = (props: PropsWithChildren<PickerProps> & ForwardRefInjectedProps
     ...pickerModalProps
   };
 
+  const propsByFieldType = useMemo(() => {
+    if (fieldType === PickerFieldTypes.filter) {
+      return {
+        preset: preset || null,
+        containerStyle: {flexDirection: 'row'},
+        trailingAccessory: <Icon marginL-s1 source={dropdown}/>
+      };
+    } else if (fieldType === PickerFieldTypes.settings) {
+      return {
+        preset: preset || null,
+        label: undefined
+      };
+    }
+  }, [fieldType]);
+
   const _renderCustomModal: ExpandableOverlayProps['renderCustomOverlay'] = ({visible, toggleExpandable}) => {
     if (renderCustomModal) {
       const modalProps = {
@@ -196,6 +224,27 @@ const Picker = (props: PropsWithChildren<PickerProps> & ForwardRefInjectedProps
     useSafeArea
   ]);
 
+  const renderPickerInnerInput = () => {
+    if (fieldType === PickerFieldTypes.filter) {
+      return (
+        <Text text70 style={others.style}>
+          {label ?? others.placeholder}
+        </Text>
+      );
+    } else if (fieldType === PickerFieldTypes.settings) {
+      return (
+        <View row spread>
+          <Text text70 style={others.labelStyle}>
+            {others.label}
+          </Text>
+          <Text text70 $textPrimary style={others.style}>
+            {label ?? others.placeholder}
+          </Text>
+        </View>
+      );
+    }
+  };
+
   if (useNativePicker) {
     return <NativePicker {...props}/>;
   }
@@ -222,15 +271,18 @@ const Picker = (props: PropsWithChildren<PickerProps> & ForwardRefInjectedProps
             ref={pickerRef}
             // {...textInputProps}
             {...others}
+            {...propsByFieldType}
             testID={`${testID}.input`}
-            containerStyle={[paddings, margins, positionStyle, containerStyle]}
+            containerStyle={[paddings, margins, positionStyle, containerStyle, propsByFieldType?.containerStyle]}
             {...accessibilityInfo}
             importantForAccessibility={'no-hide-descendants'}
             value={label}
             selection={Constants.isAndroid ? {start: 0} : undefined}
             /* Note: Disable TextField expandable feature */
             topBarProps={undefined}
-          />
+          >
+            {renderPickerInnerInput()}
+          </TextFieldMigrator>
         )}
       </ExpandableOverlay>
     </PickerContext.Provider>
@@ -243,6 +295,7 @@ Picker.defaultProps = {
   mode: PickerModes.SINGLE
 };
 Picker.modes = PickerModes;
+Picker.fieldTypes = PickerFieldTypes;
 Picker.extractPickerItems = (props: PropsWithChildren<PickerProps>) => {
   const {children} = props;
   const items = React.Children.map(children, child => ({
@@ -254,6 +307,6 @@ Picker.extractPickerItems = (props: PropsWithChildren<PickerProps>) => {
   return items;
 };
 
-export {PickerProps, PickerItemProps, PickerValue, PickerModes, PickerSearchStyle, PickerMethods};
+export {PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, PickerMethods};
 export {Picker}; // For tests
 export default asBaseComponent<PickerProps, typeof Picker>(forwardRef(Picker));