bootstrap-rn 0.3.0 → 0.3.2

package/src/components/navbar/NavbarCollapse.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import View from '../View';
+import useForcedContext from '../../hooks/useForcedContext';
+import { GRID_BREAKPOINTS } from '../../theme/proxies';
+import { infix, next } from '../../theme/breakpoints';
+import { getStyles, each } from '../../utils';
+import useMedia from '../../hooks/useMedia';
+import NavbarContext from './NavbarContext';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  '.navbar-collapse': css`
+    flex-basis: 100%;
+    flex-grow: 1;
+    // For always expanded or extra full navbars, ensure content aligns itself
+    // properly vertically. Can be easily overridden with flex utilities.
+    // align-items: center;
+  `,
+  ...each(GRID_BREAKPOINTS, (breakpoint) => ({
+    [`.navbar-expand${infix(next(breakpoint))} .navbar-collapse`]: css`
+      @include media-breakpoint-up(${next(breakpoint)}) {
+        flex-direction: row; // added for bootstrap-rn
+        display: flex;
+        flex-basis: auto;
+        align-items: center; // added for bootstrap-rn
+      }
+    `,
+  })),
+});
+
+const NavbarCollapse = React.forwardRef((props, ref) => {
+  const { children, style, ...elementProps } = props;
+
+  const { expand, expanded } = useForcedContext(NavbarContext);
+  const media = useMedia();
+
+  const classes = getStyles(styles, [
+    '.navbar-collapse',
+    expand &&
+      `.navbar-expand${expand === true ? '' : `-${expand}`} .navbar-collapse`,
+  ]);
+
+  const show = expanded || (expand && (expand === true || media.up(expand)));
+
+  if (!show) {
+    return null;
+  }
+
+  return (
+    <View {...elementProps} ref={ref} style={[classes, style]}>
+      {children}
+    </View>
+  );
+});
+
+NavbarCollapse.displayName = 'NavbarCollapse';
+NavbarCollapse.propTypes = propTypes;
+
+export default NavbarCollapse;

package/src/components/navbar/NavbarContext.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const NavbarContext = React.createContext();
+
+NavbarContext.displayName = 'NavbarContext';
+
+export default NavbarContext;

package/src/components/navbar/NavbarText.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import View from '../View';
+import Text from '../Text';
+import { getStyles } from '../../utils';
+import useForcedContext from '../../hooks/useForcedContext';
+import NavbarContext from './NavbarContext';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  textStyle: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  '.navbar-text': css`
+    padding-top: $nav-link-padding-y;
+    padding-bottom: $nav-link-padding-y;
+  `,
+  '.navbar-light .navbar-text --text': css`
+    color: $navbar-light-color;
+  `,
+  '.navbar-dark .navbar-text --text': css`
+    color: $navbar-dark-color;
+  `,
+});
+
+const NavbarText = React.forwardRef((props, ref) => {
+  const { children, style, textStyle, ...elementProps } = props;
+
+  const { variant } = useForcedContext(NavbarContext);
+
+  const classes = getStyles(styles, ['.navbar-text']);
+  const textClasses = getStyles(styles, [
+    `.navbar-${variant} .navbar-text --text`,
+  ]);
+
+  // composite component
+  return (
+    <View {...elementProps} ref={ref} style={[classes, style]}>
+      <Text style={[textClasses, textStyle]}>{children}</Text>
+    </View>
+  );
+});
+
+NavbarText.displayName = 'NavbarText';
+NavbarText.propTypes = propTypes;
+
+export default NavbarText;

package/src/components/navbar/NavbarToggler.js

@@ -0,0 +1,132 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import Pressable from '../Pressable';
+import View from '../View';
+import useForcedContext from '../../hooks/useForcedContext';
+import { GRID_BREAKPOINTS } from '../../theme/proxies';
+import { infix, next } from '../../theme/breakpoints';
+import { getStyles, each } from '../../utils';
+import NavbarContext from './NavbarContext';
+import useMedia from '../../hooks/useMedia';
+import useToggleNavbar from './useToggleNavbar';
+import useStyle from '../../hooks/useStyle';
+import useBackground from '../../hooks/useBackground';
+import { escapeSvg } from '../../theme/functions';
+
+const propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  textStyle: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  iconStyle: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  '.navbar-toggler': css`
+    padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
+    background-color: transparent; // remove default button style
+    border: $border-width solid transparent; // remove default button style
+    border-radius: $navbar-toggler-border-radius;
+    // @include transition($navbar-toggler-transition);
+
+    &:focus {
+      @include platform(web) {
+        outline-width: 0; // outline: 0;
+      }
+      // box-shadow: 0 0 0 $navbar-toggler-focus-width;
+    }
+  `,
+  '.navbar-toggler --text': css`
+    font-size: $navbar-toggler-font-size;
+    line-height: $navbar-toggler-font-size * $line-height-base;
+
+    &:hover {
+      text-decoration: none;
+    }
+
+    &:focus {
+      text-decoration: none;
+    }
+  `,
+  '.navbar-toggler-icon': css`
+    // display: inline-block;
+    width: $navbar-toggler-font-size * 1.5; // 1.5em;
+    height: $navbar-toggler-font-size * 1.5; // 1.5em;
+    vertical-align: middle;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100%;
+  `,
+  ...each(GRID_BREAKPOINTS, (breakpoint) => ({
+    [`.navbar-expand${infix(next(breakpoint))} .navbar-toggler`]: css`
+      @include media-breakpoint-up(${next(breakpoint)}) {
+        display: none;
+      }
+    `,
+  })),
+  '.navbar-light .navbar-toggler': css`
+    border-color: $navbar-light-toggler-border-color;
+  `,
+  '.navbar-light .navbar-toggler --text': css`
+    color: $navbar-light-color;
+  `,
+  '.navbar-light .navbar-toggler-icon': css`
+    background-image: ${(t) => escapeSvg(t['navbar-light-toggler-icon-bg'])};
+  `,
+  '.navbar-dark .navbar-toggler': css`
+    border-color: $navbar-dark-toggler-border-color;
+  `,
+  '.navbar-dark .navbar-toggler --text': css`
+    color: $navbar-dark-color;
+  `,
+  '.navbar-dark .navbar-toggler-icon': css`
+    background-image: ${(t) => escapeSvg(t['navbar-dark-toggler-icon-bg'])};
+  `,
+});
+
+const NavbarToggler = React.forwardRef((props, ref) => {
+  const { style, textStyle, iconStyle, ...elementProps } = props;
+
+  const media = useMedia();
+  const { variant, expand } = useForcedContext(NavbarContext);
+
+  const classes = getStyles(styles, [
+    '.navbar-toggler',
+    `.navbar-${variant} .navbar-toggler`,
+    expand &&
+      `.navbar-expand${expand === true ? '' : `-${expand}`} .navbar-toggler`,
+  ]);
+
+  const textClasses = getStyles(styles, [
+    '.navbar-toggler --text',
+    `.navbar-${variant} .navbar-toggler --text`,
+  ]);
+
+  const iconClasses = getStyles(styles, [
+    '.navbar-toggler-icon',
+    `.navbar-${variant} .navbar-toggler-icon`,
+  ]);
+
+  const resolveIconStyle = useStyle([iconClasses, iconStyle]);
+  const background = useBackground(resolveIconStyle({ media }));
+
+  return (
+    <Pressable
+      {...elementProps}
+      ref={ref}
+      toggle={useToggleNavbar}
+      style={[classes, style]}
+      textStyle={[textClasses, textStyle]}
+    >
+      <View style={background.style}>{background.element}</View>
+    </Pressable>
+  );
+});
+
+NavbarToggler.displayName = 'NavbarToggler';
+NavbarToggler.propTypes = propTypes;
+
+export default NavbarToggler;

package/src/components/navbar/useDismissNavbar.js

@@ -0,0 +1,18 @@
+import useForcedContext from '../../hooks/useForcedContext';
+import NavbarContext from './NavbarContext';
+
+export default function useDismissNavbar(props) {
+  const context = useForcedContext(NavbarContext);
+
+  const { onPress: handlePress, ...restProps } = props;
+
+  return {
+    ...restProps,
+    onPress: (event) => {
+      if (handlePress) handlePress(event);
+
+      context.setExpanded(false);
+    },
+    'aria-label': 'Close',
+  };
+}

package/src/components/navbar/useNavbar.js

@@ -0,0 +1,30 @@
+import { useMemo } from 'react';
+import useIdentifier from '../../hooks/useIdentifier';
+import useControlledState from '../../hooks/useControlledState';
+
+export default function useNavbar(
+  variant,
+  defaultExpanded,
+  controlledExpanded,
+  onToggle,
+  expand,
+) {
+  const identifier = useIdentifier('navbar');
+
+  const [expanded, setExpanded] = useControlledState(
+    defaultExpanded,
+    controlledExpanded,
+    onToggle,
+  );
+
+  return useMemo(
+    () => ({
+      identifier,
+      variant,
+      expanded,
+      setExpanded,
+      expand,
+    }),
+    [variant, expanded, expand],
+  );
+}

package/src/components/navbar/useToggleNavbar.js

@@ -0,0 +1,21 @@
+import useForcedContext from '../../hooks/useForcedContext';
+import NavbarContext from './NavbarContext';
+
+export default function useToggleNavbar(props) {
+  const context = useForcedContext(NavbarContext);
+
+  const { onPress: handlePress, ...restProps } = props;
+
+  return {
+    ...restProps,
+    id: context.identifier,
+    onPress: (event) => {
+      if (handlePress) handlePress(event);
+
+      context.setExpanded((value) => !value);
+    },
+    accessibilitControls: context.identifier,
+    'aria-expanded': context.expanded,
+    'aria-label': 'Toggle navigation',
+  };
+}

package/src/components/offcanvas/Offcanvas.js

@@ -0,0 +1,252 @@
+import React, { useContext, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { Modal as BaseModal, SafeAreaView } from 'react-native';
+import { OverlayProvider } from '@react-native-aria/overlays';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import BackdropHandler from '../helpers/BackdropHandler';
+import View from '../View';
+import { GRID_BREAKPOINTS } from '../../theme/proxies';
+import { infix, next } from '../../theme/breakpoints';
+import { getStyles, each, concatRefs } from '../../utils';
+import useMedia from '../../hooks/useMedia';
+import NavbarContext from '../navbar/NavbarContext';
+import useOffcanvas from './useOffcanvas';
+import OffcanvasContext from './OffcanvasContext';
+import OffcanvasHeader from './OffcanvasHeader';
+import OffcanvasTitle from './OffcanvasTitle';
+import OffcanvasBody from './OffcanvasBody';
+
+export const PLACEMENTS = ['top', 'bottom', 'start', 'end']; // , 'auto'
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  visible: PropTypes.bool,
+  placement: PropTypes.oneOf(PLACEMENTS),
+  backdrop: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['static'])]),
+  // Currently only supported on web.
+  scroll: PropTypes.bool,
+  onToggle: PropTypes.func,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  dialogStyle: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  textStyle: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  dialogTextStyle: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  '.offcanvas': css`
+    position: absolute; // fixed;
+    // bottom: 0;
+    z-index: $zindex-offcanvas;
+    display: flex;
+    flex-direction: column;
+    max-width: 100%;
+    // visibility: hidden;
+    background-color: $offcanvas-bg-color;
+    // background-clip: padding-box;
+    @include platform(web) {
+      outline-width: 0; // outline: 0;
+    }
+    // @include box-shadow($offcanvas-box-shadow);
+    // @include transition(transform $offcanvas-transition-duration ease-in-out);
+  `,
+  '.offcanvas --text': css`
+    color: $offcanvas-color;
+  `,
+  '.offcanvas-backdrop': css`
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: $zindex-offcanvas-backdrop;
+    width: 100%;
+    height: 100%;
+    background-color: $offcanvas-backdrop-bg;
+    opacity: $offcanvas-backdrop-opacity;
+  `,
+  '.offcanvas-start': css`
+    top: 0;
+    bottom: 0; // added for bootstrap-rn
+    left: 0;
+    // width: $offcanvas-horizontal-width;
+    border-right-width: $offcanvas-border-width;
+    border-style: solid;
+    border-color: $offcanvas-border-color;
+    // transform: translateX(-100%);
+  `,
+  '.offcanvas-end': css`
+    top: 0;
+    bottom: 0; // added for bootstrap-rn
+    right: 0;
+    // width: $offcanvas-horizontal-width;
+    border-left-width: $offcanvas-border-width;
+    border-style: solid;
+    border-color: $offcanvas-border-color;
+    // transform: translateX(100%);
+  `,
+  '.offcanvas-top': css`
+    top: 0;
+    right: 0;
+    left: 0;
+    // height: $offcanvas-vertical-height;
+    max-height: 100%;
+    border-bottom-width: $offcanvas-border-width;
+    border-style: solid;
+    border-color: $offcanvas-border-color;
+    // transform: translateY(-100%);
+  `,
+  '.offcanvas-bottom': css`
+    bottom: 0; // added for bootstrap-rn
+    right: 0;
+    left: 0;
+    // height: $offcanvas-vertical-height;
+    max-height: 100%;
+    width: 100%;
+    border-top-width: $offcanvas-border-width;
+    border-style: solid;
+    border-color: $offcanvas-border-color;
+    // transform: translateY(100%);
+  `,
+  // The following .offcanvas-dialog classes are added for bootstrap-rn,
+  // because otherwise the text would exceed a width of 100% on native
+  // and also additional width by SafeAreaView would not be applied.
+  '.offcanvas-dialog': css`
+    max-width: 100%;
+    max-height: 100%;
+  `,
+  '.offcanvas-dialog-start': css`
+    width: $offcanvas-horizontal-width;
+  `,
+  '.offcanvas-dialog-end': css`
+    width: $offcanvas-horizontal-width;
+  `,
+  '.offcanvas-dialog-top': css`
+    height: $offcanvas-vertical-height;
+  `,
+  '.offcanvas-dialog-bottom': css`
+    height: $offcanvas-vertical-height;
+  `,
+  // Navbar styles
+  ...each(GRID_BREAKPOINTS, (breakpoint) => ({
+    [`.navbar-expand${infix(next(breakpoint))} .offcanvas`]: css`
+      @include media-breakpoint-up(${next(breakpoint)}) {
+        position: relative; // inherit;
+        bottom: 0;
+        // z-index: auto;
+        flex-grow: 1;
+        // visibility: visible !important; // stylelint-disable-line declaration-no-important
+        background-color: transparent;
+        border-right-width: 0;
+        border-left-width: 0;
+        // @include box-shadow(none);
+        // @include transition(none);
+        // transform: none;
+      }
+    `,
+  })),
+});
+
+const Offcanvas = React.forwardRef((props, ref) => {
+  const {
+    children,
+    visible,
+    placement = 'top',
+    backdrop = true,
+    scroll = false,
+    onToggle: handleToggle,
+    style,
+    dialogStyle,
+    textStyle,
+    dialogTextStyle,
+    ...elementProps
+  } = props;
+
+  const media = useMedia();
+  const navbar = useContext(NavbarContext);
+  const offcanvasRef = useRef();
+
+  const offcanvas = useOffcanvas(visible, scroll);
+
+  const backdropClasses = getStyles(styles, ['.offcanvas-backdrop']);
+  const classes = getStyles(styles, [
+    '.offcanvas',
+    `.offcanvas-${placement}`,
+    navbar &&
+      navbar.expand &&
+      `.navbar-expand${
+        navbar.expand === true ? '' : `-${navbar.expand}`
+      } .offcanvas`,
+  ]);
+  const dialogClasses = getStyles(styles, [
+    '.offcanvas-dialog',
+    `.offcanvas-dialog-${placement}`,
+  ]);
+  const textClasses = getStyles(styles, ['.offcanvas-content --text']);
+
+  // Render children without modal for navbar.
+  if (
+    navbar &&
+    navbar.expand &&
+    (navbar.expand === true || media.up(navbar.expand))
+  ) {
+    return (
+      <View
+        {...elementProps}
+        ref={ref}
+        style={[classes, style]}
+        textStyle={[textClasses, textStyle]}
+      >
+        {children}
+      </View>
+    );
+  }
+
+  return (
+    <BaseModal
+      transparent
+      visible={navbar ? navbar.expanded : visible}
+      onRequestClose={handleToggle}
+    >
+      {placement !== 'bottom' && <SafeAreaView style={{ flexGrow: 0 }} />}
+      <SafeAreaView style={{ flexGrow: 1 }}>
+        {backdrop && (
+          <View style={backdropClasses}>
+            <BackdropHandler
+              dialogRef={offcanvasRef}
+              onClose={handleToggle}
+              backdrop={backdrop}
+            />
+          </View>
+        )}
+        <View
+          {...elementProps}
+          ref={concatRefs(offcanvasRef, ref)}
+          style={[classes, style]}
+          textStyle={[textClasses, textStyle]}
+        >
+          <View
+            style={[dialogClasses, dialogStyle]}
+            textStyle={dialogTextStyle}
+          >
+            <OffcanvasContext.Provider value={offcanvas}>
+              <OverlayProvider>{children}</OverlayProvider>
+            </OffcanvasContext.Provider>
+          </View>
+        </View>
+      </SafeAreaView>
+    </BaseModal>
+  );
+});
+
+Offcanvas.displayName = 'Offcanvas';
+Offcanvas.propTypes = propTypes;
+
+Offcanvas.Context = OffcanvasContext;
+Offcanvas.Header = OffcanvasHeader;
+Offcanvas.Title = OffcanvasTitle;
+Offcanvas.Body = OffcanvasBody;
+
+export default Offcanvas;

package/src/components/offcanvas/OffcanvasBody.js

@@ -0,0 +1,67 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import css from '../../style/css';
+import StyleSheet from '../../style/StyleSheet';
+import ScrollView from '../ScrollView';
+import { GRID_BREAKPOINTS } from '../../theme/proxies';
+import { infix, next } from '../../theme/breakpoints';
+import { getStyles, each } from '../../utils';
+import NavbarContext from '../navbar/NavbarContext';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  contentContainerStyle: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  '.offcanvas-body': css`
+    // flex-grow: 1;
+    padding: $offcanvas-padding-y $offcanvas-padding-x;
+    // overflow-y: auto;
+  `,
+  // Navbar styles
+  ...each(GRID_BREAKPOINTS, (breakpoint) => ({
+    [`.navbar-expand${infix(next(breakpoint))} .offcanvas-body`]: css`
+      @include media-breakpoint-up(${next(breakpoint)}) {
+        display: flex;
+        flex-grow: 0;
+        padding: 0;
+        // overflow-y: visible;
+      }
+    `,
+  })),
+});
+
+const OffcanvasBody = React.forwardRef((props, ref) => {
+  const { children, style, contentContainerStyle, ...elementProps } = props;
+
+  const navbar = useContext(NavbarContext);
+
+  const contentContainerClasses = getStyles(styles, [
+    '.offcanvas-body',
+    navbar &&
+      navbar.expand &&
+      `.navbar-expand${
+        navbar.expand === true ? '' : `-${navbar.expand}`
+      } .offcanvas-body`,
+  ]);
+
+  return (
+    <ScrollView
+      {...elementProps}
+      ref={ref}
+      style={style}
+      contentContainerStyle={[contentContainerClasses, contentContainerStyle]}
+    >
+      {children}
+    </ScrollView>
+  );
+});
+
+OffcanvasBody.displayName = 'OffcanvasBody';
+OffcanvasBody.propTypes = propTypes;
+
+export default OffcanvasBody;

package/src/components/offcanvas/OffcanvasContext.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const OffcanvasContext = React.createContext();
+
+OffcanvasContext.displayName = 'OffcanvasContext';
+
+export default OffcanvasContext;