@shaquillehinds/react-native-dropdown-selector 0.0.5 → 0.0.6

package/src/DropDownSelector/DropDownSelector.tsx

@@ -1,22 +1,14 @@
 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';
+import { DropDownSelectorButton } from './components/DropDownSelector.button';
+import { DropDownSelectorList } from './components/DropDownSelectorList';
 
 export function DropDownSelector<T>(props: DropDownSelectorProps<T>) {
   const controller = DropDownSelectorController(props);
@@ -36,155 +28,12 @@ export function DropDownSelector<T>(props: DropDownSelectorProps<T>) {
         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}
-                      onLayout={controller.handleSelectionItemsListLayout}
-                    >
-                      {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>
+              <DropDownSelectorList props={props} controller={controller} />
             </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}
-          style={[{ maxWidth: '90%' }, props.dropdownButtonTextProps?.style]}
-        >
-          {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 : (
-          <Layout {...props.dropdownButtonIconContainerProps}>
-            <AnimateComponent
-              ref={controller.animateChevronRef}
-              style={controller.chevronAnimatedStyle}
-              initialPosition={controller.canRenderDown ? -1 : 1}
-              toPosition={controller.chevronAnimationConfig}
-            >
-              <ChevronUp color={'black'} {...props.dropdownButtonIconProps} />
-            </AnimateComponent>
-          </Layout>
-        )}
-      </RNPressableLayout>
+      <DropDownSelectorButton props={props} controller={controller} />
     </Layout>
   );
 }

package/src/DropDownSelector/DropDownSelector.types.ts

@@ -26,6 +26,7 @@ export type DropDownSelectorProps<T> = {
   unMountDelayInMilliSeconds?: number;
   isDisabled?: boolean;
   disableShadow?: boolean;
+  dropDownItemsLayout?: 'column' | 'row';
   expandDirection?: 'up' | 'down';
   expandDistance?: number;
   expandAnimationConfig?:
@@ -47,4 +48,5 @@ export type DropDownSelectorProps<T> = {
   dropdownItemTextProps?: BaseTextProps;
   //prettier-ignore
   DropdownItemSelectedIcon?: (props: {item: DropDownItem<T>}) => React.JSX.Element;
+  DropdownSelectedItemIconColor?: string;
 };

package/src/DropDownSelector/components/DropDownSelector.button.tsx

@@ -0,0 +1,72 @@
+import {
+  AnimateComponent,
+  BaseText,
+  Layout,
+  RNPressableLayout,
+  shadowStyles,
+  maxZIndex,
+} from '@shaquillehinds/react-native-essentials';
+import type { DropDownSelectorProps } from '../DropDownSelector.types';
+import type { DropDownSelectorControllerReturnType } from '../DropDownSelector.controller';
+import { ChevronUp } from '../svgs/ChevronUp';
+
+export function DropDownSelectorButton<T>({
+  props,
+  controller,
+}: {
+  props: DropDownSelectorProps<T>;
+  controller: DropDownSelectorControllerReturnType<T>;
+}) {
+  return (
+    <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}
+        style={[{ maxWidth: '90%' }, props.dropdownButtonTextProps?.style]}
+      >
+        {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 : (
+        <Layout {...props.dropdownButtonIconContainerProps}>
+          <AnimateComponent
+            ref={controller.animateChevronRef}
+            style={controller.chevronAnimatedStyle}
+            initialPosition={controller.canRenderDown ? -1 : 1}
+            toPosition={controller.chevronAnimationConfig}
+          >
+            <ChevronUp color={'black'} {...props.dropdownButtonIconProps} />
+          </AnimateComponent>
+        </Layout>
+      )}
+    </RNPressableLayout>
+  );
+}

package/src/DropDownSelector/components/DropDownSelectorList/DropDownColumn.tsx

@@ -0,0 +1,65 @@
+import {
+  BaseText,
+  Layout,
+  TouchableLayout,
+  RadioIcon,
+} from '@shaquillehinds/react-native-essentials';
+import type { DropDownSelectorControllerReturnType } from '../../DropDownSelector.controller';
+import type { DropDownSelectorProps } from '../../DropDownSelector.types';
+export function DropDownColumn<T>({
+  controller,
+  props,
+}: {
+  controller: DropDownSelectorControllerReturnType<T>;
+  props: DropDownSelectorProps<T>;
+}) {
+  return (
+    <Layout
+      borderRadius="soft"
+      backgroundColor={'#FAFAFA'}
+      padding={controller.canRenderDown ? [5, 0, 0, 0] : [0, 0, 5, 0]}
+      {...props.dropdownContentContainerProps}
+      onLayout={controller.handleSelectionItemsListLayout}
+    >
+      {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}
+                  selectedColor={props.DropdownSelectedItemIconColor}
+                />
+              )
+            ) : null}
+          </TouchableLayout>
+        )
+      )}
+    </Layout>
+  );
+}

package/src/DropDownSelector/components/DropDownSelectorList/DropDownRow.tsx

@@ -0,0 +1,66 @@
+import {
+  BaseText,
+  Layout,
+  TouchableLayout,
+} from '@shaquillehinds/react-native-essentials';
+import type { DropDownSelectorControllerReturnType } from '../../DropDownSelector.controller';
+import type { DropDownSelectorProps } from '../../DropDownSelector.types';
+export function DropDownRow<T>({
+  controller,
+  props,
+}: {
+  controller: DropDownSelectorControllerReturnType<T>;
+  props: DropDownSelectorProps<T>;
+}) {
+  return (
+    <Layout
+      borderRadius="soft"
+      backgroundColor={'#FAFAFA'}
+      padding={controller.canRenderDown ? [5, 0, 0, 0] : [0, 0, 5, 0]}
+      showsHorizontalScrollIndicator={false}
+      {...props.dropdownContentContainerProps}
+      flexDirection="row"
+      scrollable
+      horizontal
+      onLayout={controller.handleSelectionItemsListLayout}
+    >
+      {props.items.map((item) =>
+        props.DropdownItemComponent ? (
+          <props.DropdownItemComponent
+            key={item.label}
+            item={item}
+            isSelected={item.value === props.selectedItem}
+          />
+        ) : (
+          <TouchableLayout
+            key={item.label}
+            height={4}
+            padding={[0, 3]}
+            spaceEnd
+            center
+            {...props.dropdownItemProps}
+            style={[props.dropdownItemProps?.style]}
+            onPress={() => {
+              props.onSelect(item.value);
+              controller.setShowItems(false);
+              props.onDropdownItemPress?.(item);
+            }}
+          >
+            <BaseText numberOfLines={1} {...props.dropdownItemTextProps}>
+              {item.label}
+            </BaseText>
+            {item.value === props.selectedItem ? (
+              <Layout
+                absolute
+                top={0}
+                square={1}
+                backgroundColor={props.DropdownSelectedItemIconColor || '#888'}
+                borderRadius="full"
+              />
+            ) : null}
+          </TouchableLayout>
+        )
+      )}
+    </Layout>
+  );
+}

package/src/DropDownSelector/components/DropDownSelectorList/DropDownSelector.list.tsx

@@ -0,0 +1,74 @@
+import {
+  AnimateComponent,
+  isAndroid,
+  shadowStyles,
+} from '@shaquillehinds/react-native-essentials';
+import { View } from 'react-native';
+import { ScrollView } from 'react-native-gesture-handler';
+import type { DropDownSelectorControllerReturnType } from '../../DropDownSelector.controller';
+import type { DropDownSelectorProps } from '../../DropDownSelector.types';
+import { DropDownColumn } from './DropDownColumn';
+import { DropDownRow } from './DropDownRow';
+
+export function DropDownSelectorList<T>({
+  props,
+  controller,
+}: {
+  props: DropDownSelectorProps<T>;
+  controller: DropDownSelectorControllerReturnType<T>;
+}) {
+  return (
+    <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}
+        scrollEnabled={props.dropDownItemsLayout === 'row'}
+        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
+          }
+        >
+          {props.dropDownItemsLayout === 'row' ? (
+            <DropDownRow controller={controller} props={props} />
+          ) : (
+            <DropDownColumn controller={controller} props={props} />
+          )}
+        </AnimateComponent>
+      </ScrollView>
+    </View>
+  );
+}

package/src/DropDownSelector/components/DropDownSelectorList/index.tsx

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