feat: change picker to native picker

Author: minheq

src/components/Picker/Picker.mdx

@@ -1,17 +1,16 @@
-import { ViewStyle } from 'react-native';
+import { Platform, ViewStyle } from 'react-native';
 
 import { Theme } from '../../theme/ThemeInterface';
 
-export type PickerAppearanceStyles = ViewStyle & {
-  backgroundColor: string;
+export type NativePickerAppearanceStyles = ViewStyle & {
   borderColor: string;
   color: string;
 };
 
-export type BaseState = PickerAppearanceStyles;
-export type DisabledState = Partial<PickerAppearanceStyles>;
-export type InvalidState = Partial<PickerAppearanceStyles>;
-export type FocusState = Partial<PickerAppearanceStyles>;
+export type BaseState = NativePickerAppearanceStyles;
+export type DisabledState = Partial<NativePickerAppearanceStyles>;
+export type InvalidState = Partial<NativePickerAppearanceStyles>;
+export type FocusState = Partial<NativePickerAppearanceStyles>;
 
 export type SizeStyles = ViewStyle & {
   borderRadius: number;
@@ -21,27 +20,28 @@ export type SizeStyles = ViewStyle & {
   paddingRight: number;
 };
 
-export interface PickerSizes {
+export interface NativePickerSizes {
   small: SizeStyles;
   medium: SizeStyles;
   large: SizeStyles;
 }
 
-export type PickerSize = keyof PickerSizes;
+export type NativePickerSize = keyof NativePickerSizes;
 
-export interface PickerVariables {
+export interface NativePickerVariables {
   base: BaseState;
   disabled: DisabledState;
   focus: FocusState;
   invalid: InvalidState;
   placeholderTextColor: string;
-  sizes: PickerSizes;
+  sizes: NativePickerSizes;
 }
 
-export const getPickerVariables = (theme: Theme): PickerVariables => {
+export const getNativePickerVariables = (
+  theme: Theme,
+): NativePickerVariables => {
   return {
     base: {
-      backgroundColor: theme.colors.background.plain,
       borderColor: theme.colors.border.default,
       borderWidth: 1,
       color: theme.colors.text.default,
@@ -60,55 +60,78 @@ export const getPickerVariables = (theme: Theme): PickerVariables => {
         fontSize: theme.textSizes.small,
         height: theme.controlHeights.small,
         paddingLeft: theme.controlPaddings.small,
-        paddingRight: theme.controlPaddings.small,
+        paddingRight: 40,
       },
 
       medium: {
         borderRadius: theme.controlBorderRadius.medium,
         fontSize: theme.textSizes.medium,
         height: theme.controlHeights.medium,
         paddingLeft: theme.controlPaddings.medium,
-        paddingRight: theme.controlPaddings.medium,
+        paddingRight: 40,
       },
 
       large: {
         borderRadius: theme.controlBorderRadius.large,
         fontSize: theme.textSizes.large,
         height: theme.controlHeights.large,
         paddingLeft: theme.controlPaddings.large,
-        paddingRight: theme.controlPaddings.large,
+        paddingRight: 40,
       },
     },
   };
 };
 
-export interface PickerStyles {
+export interface NativePickerStyles {
+  containerStyle: ViewStyle;
+  rightContainerStyle: ViewStyle;
   pickerStyle: ViewStyle;
   itemStyle: any;
 }
 
-export interface PickerStylesProps {
-  size: PickerSize;
+export interface NativePickerStylesProps {
+  size: NativePickerSize;
 }
-export type GetPickerStyles = (
-  pickerStylesProps: PickerStylesProps,
+export type GetNativePickerStyles = (
+  pickerStylesProps: NativePickerStylesProps,
   theme: Theme,
-) => PickerStyles;
+) => NativePickerStyles;
 
-export const getPickerStyles: GetPickerStyles = (pickerStylesProps, theme) => {
-  const pickerVariables = getPickerVariables(theme);
+export const getNativePickerStyles: GetNativePickerStyles = (
+  pickerStylesProps,
+  theme,
+) => {
+  const pickerVariables = getNativePickerVariables(theme);
   const { base, sizes } = pickerVariables;
   const { size } = pickerStylesProps;
 
   const { fontSize, ...sizeStyles } = sizes[size];
 
   return {
+    containerStyle: {
+      backgroundColor: theme.colors.background.plain,
+      position: 'relative',
+    },
     itemStyle: {
       fontSize,
     },
     pickerStyle: {
+      backgroundColor: 'transparent',
       ...base,
       ...sizeStyles,
+      ...(Platform.OS === 'web' && {
+        appearance: 'none',
+      }),
+    },
+    rightContainerStyle: {
+      alignItems: 'center',
+      display: 'flex',
+      height: '100%',
+      justifyContent: 'center',
+      paddingHorizontal: 8,
+      position: 'absolute',
+      right: 0,
+      zIndex: -1,
     },
   };
 };

src/components/Picker/Picker.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import {
+  Picker as RNPicker,
+  PickerProps as RNPickerProps,
+  View,
+} from 'react-native';
+import { DeepPartial } from 'ts-essentials';
+
+import { Icon } from '../../icons';
+import { ThemeContext } from '../../theme';
+import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
+import {
+  GetNativePickerStyles,
+  getNativePickerStyles,
+  NativePickerSize,
+  NativePickerStyles,
+} from './NativePicker.styles';
+
+export interface NativePickerProps extends RNPickerProps {
+  size?: NativePickerSize;
+  innerRef?: React.Ref<RNPicker>;
+  rightIcon?: React.ReactNode;
+  /**
+   * Inline styles for components
+   */
+  getStyles?: ReplaceReturnType<
+    GetNativePickerStyles,
+    DeepPartial<NativePickerStyles>
+  >;
+}
+
+const NativePickerBase = (props: NativePickerProps) => {
+  const {
+    size = 'medium',
+    getStyles,
+    innerRef,
+    rightIcon,
+    ...pickerProps
+  } = props;
+  const theme = React.useContext(ThemeContext);
+
+  const {
+    containerStyle,
+    rightContainerStyle,
+    pickerStyle,
+    itemStyle,
+  } = mergeStyles(getNativePickerStyles, getStyles)({ size }, theme);
+
+  return (
+    <View style={containerStyle}>
+      <RNPicker
+        ref={innerRef}
+        itemStyle={itemStyle}
+        style={pickerStyle}
+        {...pickerProps}
+      />
+      <View style={rightContainerStyle}>
+        {rightIcon || (
+          <Icon
+            name="chevron-down"
+            size={32}
+            color={theme.colors.text.default}
+          />
+        )}
+      </View>
+    </View>
+  );
+};
+
+export const NativePicker = React.forwardRef<RNPicker, RNPickerProps>(
+  (props, ref) => {
+    return <NativePickerBase {...props} innerRef={ref} />;
+  },
+);
+
+export default NativePicker;

src/components/Picker/PickerField.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { withTheme } from '../../theme';
+import { FormField, FormFieldProps } from '../Form';
+import NativePicker, { NativePickerProps } from './NativePicker';
+
+export interface NativePickerFieldProps
+  extends FormFieldProps,
+    NativePickerProps {}
+
+const NativePickerFieldBase = (props: NativePickerFieldProps) => {
+  const { label, error, description, ...passThroughProps } = props;
+
+  return (
+    <FormField label={label} error={error} description={description}>
+      <NativePicker {...passThroughProps} />
+    </FormField>
+  );
+};
+
+export const NativePickerField = withTheme(NativePickerFieldBase);
+export default NativePickerField;

src/components/Picker/PickerItem.tsx

@@ -0,0 +1,8 @@
+import { Picker as RNPicker, PickerItemProps } from 'react-native';
+
+const NativePickerItem = RNPicker.Item;
+
+// tslint:disable-next-line
+export interface NativePickerItemProps extends PickerItemProps {}
+
+export default NativePickerItem;

src/components/Picker/index.ts

@@ -0,0 +1,26 @@
+---
+name: Pickers
+menu: Components
+---
+
+import { Playground, PropsTable } from 'docz';
+import NativePicker from './NativePicker';
+import NativePickerItem from './NativePickerItem';
+
+## NativePicker
+
+<Playground>
+  <NativePicker
+    selectedValue="js"
+    onValueChange={(itemValue, itemIndex) =>
+      console.log('itemValue', itemValue)
+    }
+  >
+    <NativePickerItem label="Java" value="java" />
+    <NativePickerItem label="JavaScript" value="js" />
+  </NativePicker>
+</Playground>
+
+### Props
+
+<PropsTable of={NativePicker} />