@shaquillehinds/react-native-dropdown-selector 0.0.1

package/src/DropDownSelector/DropDownSelector.tsx

@@ -0,0 +1,183 @@
+import {
+  AnimateComponent,
+  BaseText,
+  isAndroid,
+  Layout,
+  RNPressableLayout,
+  shadowStyles,
+  maxZIndex,
+  TouchableLayout,
+  ComponentMounter,
+  ModalForegroundWrapper,
+  ModalWrapper,
+  RadioIcon,
+} from '@shaquillehinds/react-native-essentials';
+import { ChevronUp } from './svgs/ChevronUp';
+import { View } from 'react-native';
+import { ScrollView } from 'react-native-gesture-handler';
+import { DropDownSelectorController } from './DropDownSelector.controller';
+import type { DropDownSelectorProps } from './DropDownSelector.types';
+
+export function DropDownSelector<T>(props: DropDownSelectorProps<T>) {
+  const controller = DropDownSelectorController(props);
+
+  return (
+    <Layout
+      {...props.containerProps}
+      style={[{ zIndex: maxZIndex }, props.containerProps?.style]}
+      onLayout={controller.handleLayout}
+    >
+      <ComponentMounter
+        showComponent={controller.showItems}
+        setShowComponent={controller.setShowItems}
+        unMountDelayInMilliSeconds={controller.unMountDelayInMilliSeconds}
+        onComponentShow={props.onOpen}
+        onComponentClose={props.onClose}
+        component={
+          <ModalWrapper enableBackgroundContentPress>
+            <ModalForegroundWrapper>
+              <View
+                style={
+                  !props.disableShadow
+                    ? { ...shadowStyles({ shadowOpacity: 0.15 }) }
+                    : undefined
+                }
+              >
+                {!props.disableShadow && isAndroid && (
+                  <AnimateComponent
+                    ref={controller.animateAndroidShadowRef}
+                    initialPosition={0}
+                    style={controller.androidShadowAnimatedStyle}
+                    autoStart
+                    toPosition={controller.androidShadowAnimationConfig}
+                  />
+                )}
+
+                <ScrollView
+                  ref={controller.scrollViewRef}
+                  nestedScrollEnabled
+                  showsVerticalScrollIndicator={false}
+                  overScrollMode="never"
+                  {...props.dropdownScrollViewProps}
+                  style={[
+                    controller.scrollViewStyle,
+                    props.dropdownScrollViewProps?.style,
+                  ]}
+                >
+                  <AnimateComponent
+                    ref={controller.animateComponentRef}
+                    style={controller.selectionItemsListAnimatedStyle}
+                    initialPosition={
+                      controller.canRenderDown
+                        ? -controller.relativeY(110)
+                        : controller.relativeY(110)
+                    }
+                    autoStart
+                    toPosition={
+                      props.expandAnimationConfig
+                        ? { ...props.expandAnimationConfig, toValue: 0 }
+                        : controller.selectionItemsListAnimationConfig
+                    }
+                  >
+                    <Layout
+                      borderRadius="soft"
+                      backgroundColor={'#FAFAFA'}
+                      padding={
+                        controller.canRenderDown ? [5, 0, 0, 0] : [0, 0, 5, 0]
+                      }
+                      {...props.dropdownContentContainerProps}
+                    >
+                      {props.items.map((item) =>
+                        props.DropdownItemComponent ? (
+                          <props.DropdownItemComponent
+                            key={item.label}
+                            item={item}
+                            isSelected={item.value === props.selectedItem}
+                          />
+                        ) : (
+                          <TouchableLayout
+                            key={item.label}
+                            flexDirection="row"
+                            center
+                            spaceBetween
+                            padding={[1, 5]}
+                            {...props.dropdownItemProps}
+                            onPress={() => {
+                              props.onSelect(item.value);
+                              controller.setShowItems(false);
+                              props.onDropdownItemPress?.(item);
+                            }}
+                          >
+                            <Layout width={'85%'}>
+                              <BaseText
+                                numberOfLines={1}
+                                {...props.dropdownItemTextProps}
+                              >
+                                {item.label}
+                              </BaseText>
+                            </Layout>
+                            {item.value === props.selectedItem ? (
+                              props.DropdownItemSelectedIcon ? (
+                                <props.DropdownItemSelectedIcon item={item} />
+                              ) : (
+                                <RadioIcon isSelected={true} />
+                              )
+                            ) : null}
+                          </TouchableLayout>
+                        )
+                      )}
+                    </Layout>
+                  </AnimateComponent>
+                </ScrollView>
+              </View>
+            </ModalForegroundWrapper>
+          </ModalWrapper>
+        }
+      />
+      <RNPressableLayout
+        disabled={props.isDisabled}
+        activeOpacity={1}
+        flexDirection="row"
+        backgroundColor={'white'}
+        borderRadius="medium"
+        padding={[1, 5]}
+        spaceBetween
+        center
+        {...props.dropdownButtonProps}
+        style={[
+          {
+            zIndex: maxZIndex + 3,
+            ...shadowStyles({ shadowOpacity: 0.1 }),
+          },
+          props.dropdownButtonProps?.style,
+        ]}
+        onPress={(e) => {
+          controller.pageYRef.current = e.nativeEvent.pageY;
+          controller.setShowItems((prev) => !prev);
+          props.dropdownButtonProps?.onPress?.(e);
+        }}
+      >
+        <BaseText numberOfLines={1} {...props.dropdownButtonTextProps}>
+          {controller.label || props.placeholder || 'Select an item'}
+        </BaseText>
+        {props.DropdownButtonIcon ? (
+          <props.DropdownButtonIcon
+            isOpen={controller.showItems}
+            expandDirection={
+              props.expandDirection || controller.canRenderDown ? 'down' : 'up'
+            }
+          />
+        ) : controller.canRenderDown === null ? undefined : (
+          <AnimateComponent
+            ref={controller.animateChevronRef}
+            style={controller.chevronAnimatedStyle}
+            initialPosition={controller.canRenderDown ? -1 : 1}
+            toPosition={controller.chevronAnimationConfig}
+          >
+            <ChevronUp color={'black'} />
+          </AnimateComponent>
+        )}
+      </RNPressableLayout>
+    </Layout>
+  );
+}

package/src/DropDownSelector/DropDownSelector.types.ts

@@ -0,0 +1,44 @@
+import type {
+  BaseTextProps,
+  LayoutProps,
+  RNPressableLayoutProps,
+  TouchableLayoutProps,
+} from '@shaquillehinds/react-native-essentials';
+import type { Animated, ScrollViewProps } from 'react-native';
+
+export type DropDownItemValue<T> = T;
+
+export type DropDownItem<T> = {
+  label: string;
+  value: DropDownItemValue<T>;
+};
+export type DropDownSelectorProps<T> = {
+  items: DropDownItem<T>[];
+  selectedItem: T;
+  onSelect: (item: T) => void;
+  placeholder: string;
+  onOpen?: () => void;
+  onClose?: () => void;
+  unMountDelayInMilliSeconds?: number;
+  isDisabled?: boolean;
+  disableShadow?: boolean;
+  expandDirection?: 'up' | 'down';
+  expandDistance?: number;
+  expandAnimationConfig?:
+    | (Omit<Animated.TimingAnimationConfig, 'toValue'> & { type: 'timing' })
+    | (Omit<Animated.SpringAnimationConfig, 'toValue'> & { type: 'spring' });
+  containerProps?: LayoutProps;
+  dropdownButtonProps?: RNPressableLayoutProps;
+  dropdownButtonTextProps?: BaseTextProps;
+  //prettier-ignore
+  DropdownButtonIcon?: (props: { isOpen: boolean, expandDirection: 'up' | 'down' }) => React.JSX.Element;
+  dropdownScrollViewProps?: ScrollViewProps;
+  dropdownContentContainerProps?: LayoutProps;
+  //prettier-ignore
+  DropdownItemComponent?: (props: {item: DropDownItem<T>, isSelected: boolean }) => React.JSX.Element;
+  onDropdownItemPress?: (item: DropDownItem<T>) => void;
+  dropdownItemProps?: TouchableLayoutProps;
+  dropdownItemTextProps?: BaseTextProps;
+  //prettier-ignore
+  DropdownItemSelectedIcon?: (props: {item: DropDownItem<T>}) => React.JSX.Element;
+};

package/src/DropDownSelector/index.ts

@@ -0,0 +1,2 @@
+export * from './DropDownSelector';
+export * from './DropDownSelector.types';

package/src/DropDownSelector/svgs/ChevronUp.tsx

@@ -0,0 +1,18 @@
+import { normalize } from '@shaquillehinds/react-native-essentials';
+import Svg, { Path } from 'react-native-svg';
+
+export function ChevronUp({ size, color }: { size?: number; color?: string }) {
+  return (
+    <Svg
+      width={normalize(size || 24)}
+      height={normalize(size || 24)}
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <Path
+        d="M19.9195 15.8001C19.7295 15.8001 19.5395 15.7301 19.3895 15.5801L12.8695 9.06008C12.3895 8.58008 11.6095 8.58008 11.1295 9.06008L4.60953 15.5801C4.31953 15.8701 3.83953 15.8701 3.54953 15.5801C3.25953 15.2901 3.25953 14.8101 3.54953 14.5201L10.0695 8.00008C11.1295 6.94008 12.8595 6.94008 13.9295 8.00008L20.4495 14.5201C20.7395 14.8101 20.7395 15.2901 20.4495 15.5801C20.2995 15.7201 20.1095 15.8001 19.9195 15.8001Z"
+        fill={color || '#292D32'}
+      />
+    </Svg>
+  );
+}

package/src/index.tsx

@@ -0,0 +1,4 @@
+import { DropDownSelector } from './DropDownSelector';
+export * from './DropDownSelector';
+
+export default DropDownSelector;