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

package/lib/typescript/module/src/DropDownSelector/svgs/ChevronUp.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChevronUp.d.ts","sourceRoot":"","sources":["../../../../../../src/DropDownSelector/svgs/ChevronUp.tsx"],"names":[],"mappings":"AAGA,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,2CAc3E"}
+{"version":3,"file":"ChevronUp.d.ts","sourceRoot":"","sources":["../../../../../../src/DropDownSelector/svgs/ChevronUp.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAEzE,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,uBAAuB,2CAcjE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shaquillehinds/react-native-dropdown-selector",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "A simple dropdown selector for react native that just works.",
   "source": "./src/index.tsx",
   "main": "./lib/commonjs/index.js",
@@ -77,7 +77,6 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "dependencies": {},
   "devDependencies": {
     "@commitlint/config-conventional": "^19.6.0",
     "@react-native/eslint-config": "^0.73.1",
@@ -106,9 +105,9 @@
     "@types/react": "^18.2.44"
   },
   "peerDependencies": {
+    "@shaquillehinds/react-native-essentials": ">=1.8.0",
     "react": "*",
-    "react-native": "*",
-    "@shaquillehinds/react-native-essentials": ">=1.8.0"
+    "react-native": "*"
   },
   "peerDependenciesMeta": {
     "@shaquillehinds/react-native-essentials": {

package/src/DropDownSelector/DropDownSelector.controller.tsx

@@ -190,3 +190,7 @@ export function DropDownSelectorController<T>(props: DropDownSelectorProps<T>) {
     unMountDelayInMilliSeconds,
   };
 }
+
+export type DropDownSelectorControllerReturnType<T> = ReturnType<
+  typeof DropDownSelectorController<T>
+>;

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,153 +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%' }}
-        >
-          {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>
+      <DropDownSelectorButton props={props} controller={controller} />
     </Layout>
   );
 }

package/src/DropDownSelector/DropDownSelector.types.ts

@@ -12,6 +12,10 @@ export type DropDownItem<T> = {
   label: string;
   value: DropDownItemValue<T>;
 };
+export type DropdownButtonIconProps = {
+  size?: number;
+  color?: string;
+};
 export type DropDownSelectorProps<T> = {
   items: DropDownItem<T>[];
   selectedItem: T;
@@ -22,6 +26,7 @@ export type DropDownSelectorProps<T> = {
   unMountDelayInMilliSeconds?: number;
   isDisabled?: boolean;
   disableShadow?: boolean;
+  dropDownItemsLayout?: 'column' | 'row';
   expandDirection?: 'up' | 'down';
   expandDistance?: number;
   expandAnimationConfig?:
@@ -30,6 +35,8 @@ export type DropDownSelectorProps<T> = {
   containerProps?: LayoutProps;
   dropdownButtonProps?: RNPressableLayoutProps;
   dropdownButtonTextProps?: BaseTextProps;
+  dropdownButtonIconContainerProps?: LayoutProps;
+  dropdownButtonIconProps?: DropdownButtonIconProps;
   //prettier-ignore
   DropdownButtonIcon?: (props: { isOpen: boolean, expandDirection: 'up' | 'down' }) => React.JSX.Element;
   dropdownScrollViewProps?: ScrollViewProps;
@@ -41,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';

package/src/DropDownSelector/svgs/ChevronUp.tsx

@@ -1,7 +1,8 @@
 import { normalize } from '@shaquillehinds/react-native-essentials';
 import Svg, { Path } from 'react-native-svg';
+import type { DropdownButtonIconProps } from '../DropDownSelector.types';
 
-export function ChevronUp({ size, color }: { size?: number; color?: string }) {
+export function ChevronUp({ size, color }: DropdownButtonIconProps) {
   return (
     <Svg
       width={normalize(size || 24)}