bootstrap-rn 0.3.0 → 0.3.1

package/src/hooks/useInteractionState.js

@@ -0,0 +1,54 @@
+import { useState, useMemo } from 'react';
+import { useFocusRing } from '@react-native-aria/focus';
+
+export default function useInteractionState({
+  onFocus = () => {},
+  onBlur = () => {},
+  onHoverIn = () => {},
+  onHoverOut = () => {},
+  onPressIn = () => {},
+  onPressOut = () => {},
+  autoFocus,
+}) {
+  const [active, setActive] = useState(false);
+  const [hover, setHovered] = useState(false);
+  const {
+    isFocused: focus,
+    isFocusVisible: focusVisible,
+    focusProps,
+  } = useFocusRing({ autoFocus });
+
+  const interactionProps = useMemo(
+    () => ({
+      onHoverIn(event) {
+        setHovered(true);
+        onHoverIn(event);
+      },
+      onHoverOut(event) {
+        setHovered(false);
+        onHoverOut(event);
+      },
+      onFocus(event) {
+        focusProps.onFocus(event);
+        onFocus(event);
+      },
+      onBlur(event) {
+        focusProps.onBlur(event);
+        onBlur(event);
+      },
+      onPressIn(event) {
+        setActive(true);
+        onPressIn(event);
+      },
+      onPressOut(event) {
+        setActive(false);
+        onPressOut(event);
+      },
+    }),
+    [onFocus, onBlur, onHoverIn, onHoverOut, onPressIn, onPressOut],
+  );
+
+  const interaction = { hover, focus, focusVisible, active };
+
+  return { interaction, interactionProps };
+}

package/src/hooks/useList.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import ListContext from '../components/helpers/ListContext';
+
+const wrapChildren = (children, cache) =>
+  React.Children.map(children, (child) => {
+    if (child === null) {
+      return null;
+    }
+
+    if (child.type === React.Fragment) {
+      return (
+        <React.Fragment key={child.key}>
+          {wrapChildren(child.props.children, cache)}
+        </React.Fragment>
+      );
+    }
+
+    if (React.isValidElement(child) && typeof child === 'object') {
+      // eslint-disable-next-line no-param-reassign
+      cache.count += 1;
+
+      const pos = cache.count;
+
+      return (
+        <ListContext.Provider
+          value={{
+            nth(value) {
+              return pos === value;
+            },
+            get first() {
+              return pos === 1;
+            },
+            get last() {
+              return pos === cache.count;
+            },
+            get length() {
+              return cache.count;
+            },
+          }}
+          key={child.key}
+        >
+          {child}
+        </ListContext.Provider>
+      );
+    }
+
+    return null;
+  });
+
+export default function useList(children) {
+  return wrapChildren(children, { count: 0 });
+}

package/src/hooks/useMedia.js

@@ -0,0 +1,27 @@
+import { useContext } from 'react';
+import Context from '../Context';
+import StyleSheet from '../style/StyleSheet';
+
+export default function useMedia() {
+  const context = useContext(Context);
+
+  const viewport = context.getViewport();
+  const breakpoints = StyleSheet.value('grid-breakpoints');
+
+  const breakpointKeys = Object.keys(breakpoints);
+
+  return {
+    up(point) {
+      return breakpointKeys.indexOf(viewport) >= breakpointKeys.indexOf(point);
+    },
+    down(point) {
+      return breakpointKeys.indexOf(viewport) <= breakpointKeys.indexOf(point);
+    },
+    only(point) {
+      return viewport === point;
+    },
+    between(lower, upper) {
+      return this.up(lower) && this.down(upper);
+    },
+  };
+}

package/src/hooks/useModifier.js

@@ -0,0 +1,17 @@
+import Context from '../Context';
+import { concatRefs } from '../utils';
+import useForcedContext from './useForcedContext';
+
+export default function useModifier(name, props, ref) {
+  const context = useForcedContext(Context);
+
+  const useModifierHook = context.modifiers[name];
+
+  if (!useModifier) {
+    return [props, ref];
+  }
+
+  const { ref: modifierRef, ...modifierProps } = useModifierHook(props);
+
+  return [modifierProps, concatRefs(modifierRef, ref)];
+}

package/src/hooks/useScrollbarEffects.js

@@ -0,0 +1,62 @@
+import { useRef, useEffect, useContext } from 'react';
+import { Platform, findNodeHandle } from 'react-native';
+import Context from '../Context';
+
+const computeScrollbarWidth = () => {
+  const documentWidth = document.documentElement.clientWidth;
+  return Math.abs(window.innerWidth - documentWidth);
+};
+
+export default function useScrollbarEffects({ keepBodyScroll, visible }) {
+  if (Platform.OS !== 'web' || keepBodyScroll) {
+    return;
+  }
+
+  const context = useContext(Context);
+
+  const scrollbarWidth = useRef();
+
+  useEffect(() => {
+    if (!visible) {
+      return undefined;
+    }
+
+    if (!scrollbarWidth.current) {
+      scrollbarWidth.current = computeScrollbarWidth();
+    }
+
+    const rect = document.body.getBoundingClientRect();
+    const isBodyOverflowing = rect.left + rect.right < window.innerWidth;
+
+    // Set body and fixed elements padding adjustments.
+    const fixedElements = context.fixed
+      .filter((ref) => ref.current)
+      .map((ref) => findNodeHandle(ref.current));
+    const elements = [document.body, ...fixedElements];
+
+    const originalWidths = elements.map((el) => el.style.width || '');
+
+    const originalBodyOverflow = document.body.style.overflow || '';
+
+    if (isBodyOverflowing) {
+      elements.forEach((el) => {
+        // eslint-disable-next-line no-param-reassign
+        el.style.width = `calc(100% - ${scrollbarWidth.current}px)`;
+      });
+    }
+
+    // Add "overflow: hidden" to body element.
+    document.body.style.overflow = 'hidden';
+
+    return () => {
+      // Reset body padding adjustments.
+      elements.forEach((el, key) => {
+        // eslint-disable-next-line no-param-reassign
+        el.style.width = originalWidths[key] || '';
+      });
+
+      // Remove "overflow: hidden" from body element.
+      document.body.style.overflow = originalBodyOverflow;
+    };
+  }, [visible]);
+}

package/src/hooks/useStyle.js

@@ -0,0 +1,62 @@
+import { useContext, useMemo } from 'react';
+import { BOOTSTRAP_RN_STYLE } from '../style/createStyle';
+import Context from '../Context';
+
+const normalize = (style) => {
+  if (!Array.isArray(style)) {
+    return [style];
+  }
+
+  return style
+    .filter((val) => !!val)
+    .reduce((res, val) => [...res, ...normalize(val)], []);
+};
+
+export default function useStyle(style, styleName) {
+  const { utilities: utilitiesStyles } = useContext(Context);
+
+  const utilities = useMemo(() => {
+    if (!styleName) {
+      return null;
+    }
+
+    const names = styleName.split(' ');
+
+    return names.map((name) => {
+      if (!utilitiesStyles[name]) {
+        // eslint-disable-next-line no-console
+        console.warn(`Unknown utility style "${name}".`);
+
+        return null;
+      }
+
+      return utilitiesStyles[name];
+    });
+  }, [styleName]);
+
+  const styles = normalize(utilities ? [style, ...utilities] : style);
+
+  return (state) => {
+    const basicStyles = [];
+    const interactionStyles = [];
+
+    styles.forEach((value) => {
+      if (value && value.$$typeof === BOOTSTRAP_RN_STYLE) {
+        // Style is a bootstrap style that contains basic and interaction styles.
+        const [resolvedBasicStyles, resolvedInteractionStyles] = value(state);
+
+        basicStyles.push(...resolvedBasicStyles);
+        interactionStyles.push(...resolvedInteractionStyles);
+      } else if (typeof value === 'function') {
+        // Style is some other custom function type style.
+        basicStyles.push(value(state));
+      } else {
+        // Style is basic object style.
+        basicStyles.push(value);
+      }
+    });
+
+    // Put basic styles first, then interaction styles for hover, focus, pressed.
+    return [...basicStyles, ...interactionStyles];
+  };
+}

package/src/hooks/useTrigger.js

@@ -0,0 +1,133 @@
+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,
+    },
+  };
+}

package/src/hooks/useViewport.js

@@ -0,0 +1,60 @@
+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;
+}

package/src/index.js

@@ -0,0 +1,134 @@
+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';
+// components
+import Alert from './components/alert/Alert';
+import Badge from './components/badge/Badge';
+import Breadcrumb from './components/breadcrumb/Breadcrumb';
+import ButtonGroup from './components/button-group/ButtonGroup';
+import ButtonToolbar from './components/button-group/ButtonToolbar';
+import Button from './components/buttons/Button';
+import Blockquote from './components/type/Blockquote';
+import Body from './components/Body';
+import Card from './components/card/Card';
+import Caret from './components/Caret';
+import CloseButton from './components/close/CloseButton';
+import Collapse from './components/collapse/Collapse';
+import Container from './components/containers/Container';
+import Checkbox from './components/forms/Checkbox';
+import Col from './components/grid/Col';
+import Code from './components/type/Code';
+import Dropdown from './components/dropdown/Dropdown';
+import DisplayHeading from './components/type/DisplayHeading';
+import Feedback from './components/forms/Feedback';
+import FormCheck from './components/forms/FormCheck';
+import FormLabel from './components/forms/FormLabel';
+import FormText from './components/forms/FormText';
+import Heading from './components/Heading';
+import Input from './components/forms/Input';
+import injectPopover from './components/popover/injectPopover';
+import injectTooltip from './components/tooltip/injectTooltip';
+import Image from './components/Image';
+import ImageBackground from './components/ImageBackground';
+import Label from './components/Label';
+import ListGroup from './components/list-group/ListGroup';
+import Link from './components/Link';
+import Modal from './components/modal/Modal';
+import Nav from './components/nav/Nav';
+import Navbar from './components/navbar/Navbar';
+import Offcanvas from './components/offcanvas/Offcanvas';
+import Picker from './components/forms/Picker';
+import Placeholders from './components/placeholders/Placeholders';
+import Popover from './components/popover/Popover';
+import Progress from './components/progress/Progress';
+import Paragraph from './components/type/Paragraph';
+import Pressable from './components/Pressable';
+import Pagination from './components/pagination/Pagination';
+import Radio from './components/forms/Radio';
+import Row from './components/grid/Row';
+import Switch from './components/forms/Switch';
+import Spinner from './components/spinners/Spinner';
+import ScrollView from './components/ScrollView';
+import Tab from './components/nav/Tab';
+import Toast from './components/toasts/Toast';
+import ToastContainer from './components/toasts/ToastContainer';
+import Tooltip from './components/tooltip/Tooltip';
+import Text from './components/Text';
+import TextInput from './components/TextInput';
+import useFixedElement from './hooks/useFixedElement';
+import useMedia from './hooks/useMedia';
+import useStyle from './hooks/useStyle';
+import View from './components/View';
+
+export * from './theme/functions';
+
+export {
+  Alert,
+  Badge,
+  ButtonGroup,
+  ButtonToolbar,
+  Button,
+  Breadcrumb,
+  Blockquote,
+  Body,
+  css,
+  Card,
+  Caret,
+  CloseButton,
+  Collapse,
+  Container,
+  Context,
+  Checkbox,
+  Col,
+  Code,
+  Dropdown,
+  DisplayHeading,
+  Feedback,
+  FormCheck,
+  FormLabel,
+  FormText,
+  Heading,
+  Input,
+  Image,
+  ImageBackground,
+  injectPopover,
+  injectTooltip,
+  Label,
+  ListGroup,
+  Link,
+  Modal,
+  makeUtilities,
+  makeTheme,
+  Nav,
+  Navbar,
+  Offcanvas,
+  PortalProvider,
+  Provider,
+  Picker,
+  Pagination,
+  Placeholders,
+  Popover,
+  Progress,
+  Paragraph,
+  Pressable,
+  Radio,
+  Row,
+  StyleSheet,
+  Switch,
+  Spinner,
+  ScrollView,
+  Tab,
+  Toast,
+  ToastContainer,
+  Tooltip,
+  Text,
+  TextInput,
+  useFixedElement,
+  useMedia,
+  useStyle,
+  View,
+};