bootstrap-rn 0.3.3 → 0.3.4

package/src/hooks/{useTrigger.js → useTrigger.ts}

@@ -1,133 +1,141 @@
-import { useState, useRef } from 'react';
-import { Platform } from 'react-native';
-import PropTypes from 'prop-types';
-import useIdentifier from './useIdentifier';
-import { optional, concatRefs } from '../utils';
-import useControlledState from './useControlledState';
-
-const PLACEMENTS = ['top', 'bottom', 'left', 'right'];
-
-const TRIGGERS = [
-  'press',
-  'hover',
-  'focus',
-  'manual',
-  'press hover',
-  'hover press',
-  'hover focus',
-  'focus hover',
-  'press focus',
-  'focus press',
-];
-
-export const TriggerPropTypes = {
-  trigger: PropTypes.oneOf(TRIGGERS),
-  placement: PropTypes.oneOf(PLACEMENTS),
-  offset: PropTypes.number,
-  defaultVisible: PropTypes.bool,
-  visible: PropTypes.bool,
-  onToggle: PropTypes.func,
-};
-
-export default function useTrigger(rawTrigger, props, elementProps, ref) {
-  const {
-    defaultVisible = false,
-    visible: controlledVisible,
-    onToggle,
-  } = props;
-
-  const { onPress, onFocus, onBlur, onMouseOver, onMouseLeave } = elementProps;
-
-  const trigger = rawTrigger.split(' ');
-
-  const identifier = useIdentifier('overlay');
-  const [visible, setVisible] = useControlledState(
-    defaultVisible,
-    controlledVisible,
-    onToggle,
-  );
-  const [focused, setFocused] = useState(false);
-  const [hovered, setHovered] = useState(false);
-
-  const targetRef = useRef();
-
-  return {
-    visible,
-    setVisible,
-    targetProps: {
-      ref: concatRefs(targetRef, ref),
-      ...optional(visible, { 'aria-describedby': identifier }),
-      onPress: (event) => {
-        const handleHoverAsPress =
-          (Platform.OS === 'android' || Platform.OS === 'ios') &&
-          trigger.includes('hover');
-
-        if (trigger.includes('press') || handleHoverAsPress) {
-          setVisible((value) => !value);
-        }
-
-        if (onPress) {
-          onPress(event);
-        }
-      },
-      onFocus: (event) => {
-        if (trigger.includes('focus')) {
-          setFocused(true);
-
-          if (!visible) {
-            setVisible(true);
-          }
-        }
-
-        if (onFocus) {
-          onFocus(event);
-        }
-      },
-      onBlur: (event) => {
-        if (trigger.includes('focus')) {
-          setFocused(false);
-
-          const activeHoverTrigger = trigger.includes('hover') && hovered;
-          if (visible && !activeHoverTrigger) {
-            setVisible(false);
-          }
-        }
-
-        if (onBlur) {
-          onBlur(event);
-        }
-      },
-      onMouseOver: (event) => {
-        if (trigger.includes('hover')) {
-          setHovered(true);
-
-          if (!visible && !focused) {
-            setVisible(true);
-          }
-        }
-
-        if (onMouseOver) {
-          onMouseOver(event);
-        }
-      },
-      onMouseLeave: (event) => {
-        if (trigger.includes('hover')) {
-          setHovered(false);
-
-          const activeFocusTrigger = trigger.includes('focus') && focused;
-          if (visible && !activeFocusTrigger) {
-            setVisible(false);
-          }
-        }
-
-        if (onMouseLeave) {
-          onMouseLeave(event);
-        }
-      },
-    },
-    targetRef,
-    templateProps: {
-      id: identifier,
-    },
-  };
-}
+import { useState, useRef, ForwardedRef } from 'react';
+import {
+  Platform,
+  TextInputFocusEventData,
+  NativeSyntheticEvent,
+  GestureResponderEvent,
+  MouseEvent,
+} from 'react-native';
+import useIdentifier from './useIdentifier';
+import { optional, concatRefs } from '../utils';
+import useControlledState from './useControlledState';
+import type { Trigger } from '../types';
+
+export type TriggerProps = {
+  offset?: number;
+  defaultVisible?: boolean;
+  visible?: boolean;
+  onToggle?: (visible: boolean) => void;
+};
+
+export type TriggerEventProps = {
+  onPress?: null | ((event: GestureResponderEvent) => void) | undefined;
+  onFocus?:
+    | null
+    | ((event: NativeSyntheticEvent<TextInputFocusEventData>) => void)
+    | undefined;
+  onBlur?:
+    | null
+    | ((event: NativeSyntheticEvent<TextInputFocusEventData>) => void)
+    | undefined;
+  onMouseOver?: null | ((event: MouseEvent) => void) | undefined;
+  onMouseLeave?: null | ((event: MouseEvent) => void) | undefined;
+};
+
+export default function useTrigger<T>(
+  rawTrigger: Trigger,
+  props: TriggerProps,
+  elementProps: TriggerEventProps,
+  ref: ForwardedRef<T>,
+) {
+  const {
+    defaultVisible = false,
+    visible: controlledVisible,
+    onToggle,
+  } = props;
+
+  const { onPress, onFocus, onBlur, onMouseOver, onMouseLeave } = elementProps;
+
+  const trigger = rawTrigger.split(' ');
+
+  const identifier = useIdentifier('overlay');
+  const [visible, setVisible] = useControlledState(
+    defaultVisible,
+    controlledVisible,
+    onToggle,
+  );
+  const [focused, setFocused] = useState<boolean>(false);
+  const [hovered, setHovered] = useState<boolean>(false);
+
+  const targetRef = useRef(null);
+
+  return {
+    visible,
+    setVisible,
+    targetProps: {
+      ref: concatRefs(targetRef, ref),
+      ...optional(visible, { 'aria-describedby': identifier }),
+      onPress: (event: GestureResponderEvent) => {
+        const handleHoverAsPress =
+          (Platform.OS === 'android' || Platform.OS === 'ios') &&
+          trigger.includes('hover');
+
+        if (trigger.includes('press') || handleHoverAsPress) {
+          setVisible((value) => !value);
+        }
+
+        if (onPress) {
+          onPress(event);
+        }
+      },
+      onFocus: (event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+        if (trigger.includes('focus')) {
+          setFocused(true);
+
+          if (!visible) {
+            setVisible(true);
+          }
+        }
+
+        if (onFocus) {
+          onFocus(event);
+        }
+      },
+      onBlur: (event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+        if (trigger.includes('focus')) {
+          setFocused(false);
+
+          const activeHoverTrigger = trigger.includes('hover') && hovered;
+          if (visible && !activeHoverTrigger) {
+            setVisible(false);
+          }
+        }
+
+        if (onBlur) {
+          onBlur(event);
+        }
+      },
+      onMouseOver: (event: MouseEvent) => {
+        if (trigger.includes('hover')) {
+          setHovered(true);
+
+          if (!visible && !focused) {
+            setVisible(true);
+          }
+        }
+
+        if (onMouseOver) {
+          onMouseOver(event);
+        }
+      },
+      onMouseLeave: (event: MouseEvent) => {
+        if (trigger.includes('hover')) {
+          setHovered(false);
+
+          const activeFocusTrigger = trigger.includes('focus') && focused;
+          if (visible && !activeFocusTrigger) {
+            setVisible(false);
+          }
+        }
+
+        if (onMouseLeave) {
+          onMouseLeave(event);
+        }
+      },
+    },
+    targetRef,
+    templateProps: {
+      id: identifier,
+    },
+  };
+}

package/src/hooks/{useViewport.js → useViewport.ts}

@@ -1,60 +1,71 @@
-import { useState, useEffect } from 'react';
-import { Dimensions, Platform } from 'react-native';
-import StyleSheet from '../style/StyleSheet';
-
-const calculateViewport = (breakpoints, width) => {
-  if (width < breakpoints.sm) {
-    return 'xs';
-  }
-  if (width < breakpoints.md) {
-    return 'sm';
-  }
-  if (width < breakpoints.lg) {
-    return 'md';
-  }
-  if (width < breakpoints.xl) {
-    return 'lg';
-  }
-  if (width < breakpoints.xxl) {
-    return 'xl';
-  }
-  return 'xxl';
-};
-
-const getWidth = (dimensions) => {
-  // Use web api on web because of issue #38:
-  // https://github.com/examunity/bootstrap-rn/issues/38
-  if (Platform.OS === 'web') {
-    return Math.max(
-      document.documentElement.clientWidth || 0,
-      window.innerWidth || 0,
-    );
-  }
-
-  return dimensions.window.width;
-};
-
-export default function useViewport(initialViewport) {
-  const [viewport, setViewport] = useState(initialViewport);
-  const breakpoints = StyleSheet.value('grid-breakpoints');
-
-  const handleChange = (dimensions) => {
-    const width = getWidth(dimensions);
-    const nextViewport = calculateViewport(breakpoints, width);
-
-    setViewport(nextViewport);
-  };
-
-  useEffect(() => {
-    // Initially determine viewport after mounting.
-    handleChange({ window: Dimensions.get('window') });
-
-    const subscription = Dimensions.addEventListener('change', handleChange);
-
-    return () => {
-      subscription.remove();
-    };
-  }, []);
-
-  return viewport;
-}
+import { useState, useEffect } from 'react';
+import { Dimensions, Platform, ScaledSize } from 'react-native';
+import StyleSheet from '../style/StyleSheet';
+import type { Viewport } from '../types';
+
+interface Breakpoints {
+  sm: number;
+  md: number;
+  lg: number;
+  xl: number;
+  xxl: number;
+}
+
+type DimensionType = { window: ScaledSize };
+
+const calculateViewport = (breakpoints: Breakpoints, width: number) => {
+  if (width < breakpoints.sm) {
+    return 'xs';
+  }
+  if (width < breakpoints.md) {
+    return 'sm';
+  }
+  if (width < breakpoints.lg) {
+    return 'md';
+  }
+  if (width < breakpoints.xl) {
+    return 'lg';
+  }
+  if (width < breakpoints.xxl) {
+    return 'xl';
+  }
+  return 'xxl';
+};
+
+const getWidth = (dimensions: DimensionType) => {
+  // Use web api on web because of issue #38:
+  // https://github.com/examunity/bootstrap-rn/issues/38
+  if (Platform.OS === 'web') {
+    return Math.max(
+      document.documentElement.clientWidth || 0,
+      window.innerWidth || 0,
+    );
+  }
+
+  return dimensions.window.width;
+};
+
+export default function useViewport(initialViewport: Viewport) {
+  const [viewport, setViewport] = useState(initialViewport);
+  const breakpoints = StyleSheet.value('grid-breakpoints');
+
+  const handleChange = (dimensions: DimensionType) => {
+    const width = getWidth(dimensions);
+    const nextViewport = calculateViewport(breakpoints, width);
+
+    setViewport(nextViewport);
+  };
+
+  useEffect(() => {
+    // Initially determine viewport after mounting.
+    handleChange({ window: Dimensions.get('window') });
+
+    const subscription = Dimensions.addEventListener('change', handleChange);
+
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
+  return viewport;
+}

package/src/index.ts

@@ -0,0 +1,211 @@
+import { PortalProvider } from '@react-native-aria/overlays';
+import css from './style/css';
+import makeUtilities from './style/makeUtilities';
+import makeTheme from './style/makeTheme';
+import StyleSheet from './style/StyleSheet';
+import Context from './Context';
+import Provider from './Provider';
+import useFixedElement from './hooks/useFixedElement';
+import useMedia from './hooks/useMedia';
+import useStyle from './hooks/useStyle';
+
+export {
+  css,
+  Context,
+  makeUtilities,
+  makeTheme,
+  PortalProvider,
+  Provider,
+  StyleSheet,
+  useFixedElement,
+  useMedia,
+  useStyle,
+};
+
+export * from './theme/functions';
+
+export * from './types';
+
+// components
+
+export { default as Alert } from './components/alert/Alert';
+export type { AlertProps } from './components/alert/Alert';
+
+export { default as Badge } from './components/badge/Badge';
+export type { BadgeProps } from './components/badge/Badge';
+
+export { default as Breadcrumb } from './components/breadcrumb/Breadcrumb';
+export type { BreadcrumbProps } from './components/breadcrumb/Breadcrumb';
+
+export { default as ButtonGroup } from './components/button-group/ButtonGroup';
+export type { ButtonGroupProps } from './components/button-group/ButtonGroup';
+
+export { default as ButtonToolbar } from './components/button-group/ButtonToolbar';
+export type { ButtonToolbarProps } from './components/button-group/ButtonToolbar';
+
+export { default as Button } from './components/buttons/Button';
+export type { ButtonProps } from './components/buttons/Button';
+
+export { default as Blockquote } from './components/type/Blockquote';
+export type { BlockquoteProps } from './components/type/Blockquote';
+
+export { default as Body } from './components/Body';
+export type { BodyProps } from './components/Body';
+
+export { default as Card } from './components/card/Card';
+export type { CardProps } from './components/card/Card';
+
+export { default as CardBody } from './components/card/CardBody';
+export type { CardBodyProps } from './components/card/CardBody';
+
+export { default as CardFooter } from './components/card/CardFooter';
+export type { CardFooterProps } from './components/card/CardFooter';
+
+export { default as CardHeader } from './components/card/CardHeader';
+export type { CardHeaderProps } from './components/card/CardHeader';
+
+export { default as Caret } from './components/Caret';
+export type { CaretProps } from './components/Caret';
+
+export { default as CloseButton } from './components/close/CloseButton';
+export type { CloseButtonProps } from './components/close/CloseButton';
+
+export { default as Collapse } from './components/collapse/Collapse';
+export type { CollapseProps } from './components/collapse/Collapse';
+
+export { default as Container } from './components/containers/Container';
+export type { ContainerProps } from './components/containers/Container';
+
+export { default as Checkbox } from './components/forms/Checkbox';
+export type { CheckboxProps } from './components/forms/Checkbox';
+
+export { default as Col } from './components/grid/Col';
+export type { ColProps } from './components/grid/Col';
+
+export { default as Code } from './components/type/Code';
+export type { CodeProps } from './components/type/Code';
+
+export { default as Dropdown } from './components/dropdown/Dropdown';
+export type { DropdownProps } from './components/dropdown/Dropdown';
+
+export { default as DisplayHeading } from './components/type/DisplayHeading';
+export type { DisplayHeadingProps } from './components/type/DisplayHeading';
+
+export { default as Feedback } from './components/forms/Feedback';
+export type { FeedbackProps } from './components/forms/Feedback';
+
+export { default as FormCheck } from './components/forms/FormCheck';
+export type { FormCheckProps } from './components/forms/FormCheck';
+
+export { default as FormLabel } from './components/forms/FormLabel';
+export type { FormLabelProps } from './components/forms/FormLabel';
+
+export { default as FormText } from './components/forms/FormText';
+export type { FormTextProps } from './components/forms/FormText';
+
+export { default as Heading } from './components/Heading';
+export type { HeadingProps } from './components/Heading';
+
+export { default as Input } from './components/forms/Input';
+export type { InputProps } from './components/forms/Input';
+
+export { default as injectPopover } from './components/popover/injectPopover';
+export type { InjectPopoverProps } from './components/popover/injectPopover';
+
+export { default as injectTooltip } from './components/tooltip/injectTooltip';
+export type { InjectTooltipProps } from './components/tooltip/injectTooltip';
+
+export { default as Image } from './components/Image';
+export type { ImageProps } from './components/Image';
+
+export { default as ImageBackground } from './components/ImageBackground';
+export type { ImageBackgroundProps } from './components/ImageBackground';
+
+export { default as Label } from './components/Label';
+export type { LabelProps } from './components/Label';
+
+export { default as ListGroup } from './components/list-group/ListGroup';
+export type { ListGroupProps } from './components/list-group/ListGroup';
+
+export { default as Link } from './components/Link';
+export type { LinkProps } from './components/Link';
+
+export { default as Modal } from './components/modal/Modal';
+export type { ModalProps } from './components/modal/Modal';
+
+export { default as ModalBody } from './components/modal/ModalBody';
+export type { ModalBodyProps } from './components/modal/ModalBody';
+
+export { default as ModalFooter } from './components/modal/ModalFooter';
+export type { ModalFooterProps } from './components/modal/ModalFooter';
+
+export { default as ModalHeader } from './components/modal/ModalHeader';
+export type { ModalHeaderProps } from './components/modal/ModalHeader';
+
+export { default as ModalTitle } from './components/modal/ModalTitle';
+export type { ModalTitleProps } from './components/modal/ModalTitle';
+
+export { default as Nav } from './components/nav/Nav';
+export type { NavProps } from './components/nav/Nav';
+
+export { default as Navbar } from './components/navbar/Navbar';
+export type { NavbarProps } from './components/navbar/Navbar';
+
+export { default as Offcanvas } from './components/offcanvas/Offcanvas';
+export type { OffcanvasProps } from './components/offcanvas/Offcanvas';
+
+export { default as Picker } from './components/forms/Picker';
+export type { PickerProps } from './components/forms/Picker';
+
+export { default as Placeholders } from './components/placeholders/Placeholders';
+export type { PlaceholdersProps } from './components/placeholders/Placeholders';
+
+export { default as Popover } from './components/popover/Popover';
+export type { PopoverProps } from './components/popover/Popover';
+
+export { default as Progress } from './components/progress/Progress';
+export type { ProgressProps } from './components/progress/Progress';
+
+export { default as Paragraph } from './components/type/Paragraph';
+export type { ParagraphProps } from './components/type/Paragraph';
+
+export { default as Pressable } from './components/Pressable';
+export type { PressableProps } from './components/Pressable';
+
+export { default as Pagination } from './components/pagination/Pagination';
+export type { PaginationProps } from './components/pagination/Pagination';
+
+export { default as Radio } from './components/forms/Radio';
+export type { RadioProps } from './components/forms/Radio';
+
+export { default as Row } from './components/grid/Row';
+export type { RowProps } from './components/grid/Row';
+
+export { default as Switch } from './components/forms/Switch';
+export type { SwitchProps } from './components/forms/Switch';
+
+export { default as Spinner } from './components/spinners/Spinner';
+export type { SpinnerProps } from './components/spinners/Spinner';
+
+export { default as ScrollView } from './components/ScrollView';
+export type { ScrollViewProps } from './components/ScrollView';
+
+export { default as Tab } from './components/nav/Tab';
+
+export { default as Toast } from './components/toasts/Toast';
+export type { ToastProps } from './components/toasts/Toast';
+
+export { default as ToastContainer } from './components/toasts/ToastContainer';
+export type { ToastContainerProps } from './components/toasts/ToastContainer';
+
+export { default as Tooltip } from './components/tooltip/Tooltip';
+export type { TooltipProps } from './components/tooltip/Tooltip';
+
+export { default as Text } from './components/Text';
+export type { TextProps } from './components/Text';
+
+export { default as TextInput } from './components/TextInput';
+export type { TextInputProps } from './components/TextInput';
+
+export { default as View } from './components/View';
+export type { ViewProps } from './components/View';