bootstrap-rn 0.4.6 → 0.4.8

package/src/components/dropdown/useDropdown.ts

@@ -1,38 +1,55 @@
-import { useMemo, useRef } from 'react';
-import useIdentifier from '../../hooks/useIdentifier';
-import useControlledState from '../../hooks/useControlledState';
-import type { DropdownDirection } from './DropdownContext';
-
-export default function useDropdown(
-  defaultVisible: boolean,
-  controlledVisible: boolean | undefined,
-  onToggle: () => void,
-  direction: DropdownDirection,
-  center: boolean,
-  display: string,
-  autoClose: string | boolean,
-) {
-  const identifier = useIdentifier('dropdown');
-
-  const toggleRef = useRef(null);
-
-  const [visible, setVisible] = useControlledState(
-    defaultVisible,
-    controlledVisible,
-    onToggle,
-  );
-
-  return useMemo(
-    () => ({
-      identifier,
-      visible,
-      setVisible,
-      toggleRef,
-      direction,
-      center,
-      display,
-      autoClose,
-    }),
-    [visible, direction, center, display, autoClose],
-  );
-}
+import { useMemo, useState } from 'react';
+import StyleSheet from '../../style/StyleSheet';
+import type { DropdownDirection } from './DropdownContext';
+import type { OverlayAlignment } from '../../types';
+import useOverlay from '../../hooks/useOverlay';
+import { normalizeNumber } from '../../style/math';
+
+const getPlacement = (direction: DropdownDirection) => {
+  if (direction === 'up') {
+    return 'top';
+  }
+
+  if (direction === 'down') {
+    return 'bottom';
+  }
+
+  return direction;
+};
+
+export default function useDropdown(
+  defaultVisible: boolean,
+  controlledVisible: boolean | undefined,
+  onToggle: () => void,
+  direction: DropdownDirection,
+  center: boolean,
+  display: string,
+) {
+  const [align, setAlign] = useState<OverlayAlignment | null>(null);
+
+  const offset = normalizeNumber(StyleSheet.value('dropdown-spacer'));
+
+  const { identifier, visible, setVisible, trigger, content } = useOverlay({
+    defaultVisible,
+    controlledVisible,
+    onToggle,
+    offset,
+    align: center ? 'center' : align || 'start',
+    placement: getPlacement(direction),
+  });
+
+  return useMemo(
+    () => ({
+      identifier,
+      visible,
+      setVisible,
+      align,
+      setAlign,
+      direction,
+      display,
+      trigger,
+      content,
+    }),
+    [visible, align, direction, display, trigger, content],
+  );
+}

package/src/components/dropdown/useToggleDropdown.ts

@@ -1,32 +1,31 @@
-import type { GestureResponderEvent } from 'react-native';
-import useForcedContext from '../../hooks/useForcedContext';
-import DropdownContext from './DropdownContext';
-import { CaretProps } from '../Caret';
-
-export interface UseToggleDropdownProps {
-  onPress?: null | ((event: GestureResponderEvent) => void);
-  caret?: boolean | CaretProps;
-}
-
-export default function useToggleDropdown<T>(
-  props: UseToggleDropdownProps & T,
-) {
-  const context = useForcedContext(DropdownContext);
-
-  const { onPress: handlePress, caret, ...restProps } = props;
-
-  return {
-    ...restProps,
-    id: context.identifier,
-    ref: context.toggleRef,
-    onPress: (event: GestureResponderEvent) => {
-      if (handlePress) handlePress(event);
-
-      context.setVisible(!context.visible);
-    },
-    'aria-haspopup': true,
-    'aria-expanded': context.visible,
-    active: context.visible,
-    caret: caret === undefined ? { direction: context.direction } : caret,
-  };
-}
+import type { GestureResponderEvent } from 'react-native';
+import useForcedContext from '../../hooks/useForcedContext';
+import DropdownContext from './DropdownContext';
+import { concatRefs } from '../../utils';
+import { CaretProps } from '../Caret';
+import type { PressableRef } from '../Pressable';
+
+export interface UseToggleDropdownProps {
+  ref?: React.RefObject<PressableRef | null>;
+  onPress?: null | ((event: GestureResponderEvent) => void);
+  caret?: boolean | CaretProps;
+}
+
+export default function useToggleDropdown<T>(
+  props: UseToggleDropdownProps & T,
+) {
+  const context = useForcedContext(DropdownContext);
+
+  const { ref, caret, ...restProps } = props;
+
+  return {
+    ...restProps,
+    ...context.trigger.getProps(restProps),
+    id: context.identifier,
+    ref: concatRefs(ref, context.trigger.ref),
+    'aria-haspopup': true,
+    'aria-expanded': context.visible,
+    active: context.visible,
+    caret: caret === undefined ? { direction: context.direction } : caret,
+  };
+}