bootstrap-rn 0.3.0 → 0.3.2

package/src/components/nav/NavLink.js

@@ -0,0 +1,280 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import Pressable from '../Pressable';
+import { GRID_BREAKPOINTS } from '../../theme/proxies';
+import { infix, next } from '../../theme/breakpoints';
+import { getStyles, each } from '../../utils';
+import useModifier from '../../hooks/useModifier';
+import useForcedContext from '../../hooks/useForcedContext';
+import NavbarContext from '../navbar/NavbarContext';
+import NavContext from './NavContext';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  active: PropTypes.bool,
+  disabled: PropTypes.bool,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  activeStyle: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  textStyle: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  activeTextStyle: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  '.nav-link': css`
+    // display: block;
+    flex-direction: row; // added for bootstrap-rn
+    align-items: center; // added for bootstrap-rn
+    padding: $nav-link-padding-y $nav-link-padding-x;
+    // @include transition($nav-link-transition);
+  `,
+  '.nav-link --text': css`
+    font-size: $nav-link-font-size;
+    font-weight: $nav-link-font-weight;
+    color: $nav-link-color;
+    text-decoration: none; // if($link-decoration == none, null, none);
+
+    &:hover {
+      color: $nav-link-hover-color;
+      text-decoration: none; // if($link-hover-decoration == underline, none, null);
+    }
+    &:focus {
+      color: $nav-link-hover-color;
+      text-decoration: none; // if($link-hover-decoration == underline, none, null);
+    }
+  `,
+  '.nav-link.disabled': css`
+    @include platform(web) {
+      pointer-events: none;
+      cursor: default;
+    }
+  `,
+  '.nav-link.disabled --text': css`
+    color: $nav-link-disabled-color;
+  `,
+  '.nav-tabs .nav-link': css`
+    margin-bottom: -$nav-tabs-border-width;
+    background: transparent; // none;
+    // Use longform for border, so that the border color is applied correctly on Android.
+    border-width: $nav-tabs-border-width;
+    border-style: solid;
+    border-color: transparent transparent;
+    border-top-left-radius: $nav-tabs-border-radius;
+    border-top-right-radius: $nav-tabs-border-radius;
+
+    &:hover {
+      // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
+      // isolation: isolate;
+      border-color: $nav-tabs-link-hover-border-color;
+    }
+    &:focus {
+      // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
+      // isolation: isolate;
+      border-color: $nav-tabs-link-hover-border-color;
+    }
+  `,
+  '.nav-tabs .nav-link.disabled': css`
+    background-color: transparent;
+    border-color: transparent;
+  `,
+  '.nav-tabs .nav-link.disabled --text': css`
+    color: $nav-link-disabled-color;
+  `,
+  '.nav-tabs .nav-link.active': css`
+    background-color: $nav-tabs-link-active-bg;
+    border-color: $nav-tabs-link-active-border-color;
+
+    &:hover {
+      background-color: $nav-tabs-link-active-bg; // added for bootstrap-rn
+      border-color: $nav-tabs-link-active-border-color; // added for bootstrap-rn
+    }
+    &:focus {
+      background-color: $nav-tabs-link-active-bg; // added for bootstrap-rn
+      border-color: $nav-tabs-link-active-border-color; // added for bootstrap-rn
+    }
+  `,
+  '.nav-tabs .nav-link.active --text': css`
+    color: $nav-tabs-link-active-color;
+
+    &:hover {
+      color: $nav-tabs-link-active-color; // added for bootstrap-rn
+    }
+    &:focus {
+      color: $nav-tabs-link-active-color; // added for bootstrap-rn
+    }
+  `,
+  '.nav-pills .nav-link': css`
+    background: transparent; // none;
+    border: 0;
+    border-radius: $nav-pills-border-radius;
+  `,
+  '.nav-pills .nav-link.active': css`
+    // @include gradient-bg($nav-pills-link-active-bg);
+    background-color: $nav-pills-link-active-bg; // added for bootstrap-rn
+
+    &:hover {
+      background-color: $nav-pills-link-active-bg; // added for bootstrap-rn
+    }
+    &:focus {
+      background-color: $nav-pills-link-active-bg; // added for bootstrap-rn
+    }
+  `,
+  '.nav-pills .nav-link.active --text': css`
+    color: $nav-pills-link-active-color;
+
+    &:hover {
+      color: $nav-pills-link-active-color; // added for bootstrap-rn
+    }
+    &:focus {
+      color: $nav-pills-link-active-color; // added for bootstyl
+    }
+  `,
+  // Navbar styles
+  '.navbar-nav .nav-link': css`
+    padding-right: 0;
+    padding-left: 0;
+  `,
+  ...each(GRID_BREAKPOINTS, (breakpoint) => ({
+    [`.navbar-expand${infix(next(breakpoint))} .navbar-nav .nav-link`]: css`
+      @include media-breakpoint-up(${next(breakpoint)}) {
+        padding-right: $navbar-nav-link-padding-x;
+        padding-left: $navbar-nav-link-padding-x;
+      }
+    `,
+  })),
+  '.navbar-light .navbar-nav .nav-link --text': css`
+    color: $navbar-light-color;
+
+    &:hover {
+      color: $navbar-light-hover-color;
+    }
+    &:focus {
+      color: $navbar-light-hover-color;
+    }
+  `,
+  '.navbar-light .navbar-nav .nav-link.disabled --text': css`
+    color: $navbar-light-disabled-color;
+  `,
+  '.navbar-light .navbar-nav .nav-link.active --text': css`
+    color: $navbar-light-active-color;
+
+    &:hover {
+      color: $navbar-light-active-color; // added for bootstrap-rn
+    }
+    &:focus {
+      color: $navbar-light-active-color; // added for bootstrap-rn
+    }
+  `,
+  '.navbar-dark .navbar-nav .nav-link --text': css`
+    color: $navbar-dark-color;
+
+    &:hover {
+      color: $navbar-dark-hover-color;
+    }
+    &:focus {
+      color: $navbar-dark-hover-color;
+    }
+  `,
+  '.navbar-dark .navbar-nav .nav-link.disabled --text': css`
+    color: $navbar-dark-disabled-color;
+  `,
+  '.navbar-dark .navbar-nav .nav-link.active --text': css`
+    color: $navbar-dark-active-color;
+
+    &:hover {
+      color: $navbar-dark-active-color; // added for bootstrap-rn
+    }
+    &:focus {
+      color: $navbar-dark-active-color; // added for bootstrap-rn
+    }
+  `,
+});
+
+const NavLink = React.forwardRef((props, ref) => {
+  const [modifierProps, modifierRef] = useModifier('useTabbable', props, ref);
+
+  const {
+    children,
+    active,
+    disabled,
+    style,
+    activeStyle,
+    textStyle,
+    activeTextStyle,
+    ...elementProps
+  } = modifierProps;
+
+  const { variant } = useForcedContext(NavContext);
+  const navbar = useContext(NavbarContext);
+
+  const classes = getStyles(styles, [
+    '.nav-link',
+    disabled && '.nav-link.disabled',
+    variant && `.nav-${variant} .nav-link`,
+    variant === 'tabs' && disabled && '.nav-tabs .nav-link.disabled',
+    // Navbar styles
+    navbar && '.navbar-nav .nav-link',
+    navbar &&
+      navbar.expand &&
+      `.navbar-expand${
+        navbar.expand === true ? '' : `-${navbar.expand}`
+      } .navbar-nav .nav-link`,
+    navbar && `.navbar-${navbar.variant} .navbar-nav .nav-link`,
+    navbar &&
+      disabled &&
+      `.navbar-${navbar.variant} .navbar-nav .nav-link.disabled`,
+  ]);
+
+  const activeClasses = getStyles(styles, [
+    variant && `.nav-${variant} .nav-link.active`,
+    // Navbar styles
+    navbar && `.navbar-${navbar.variant} .navbar-nav .nav-link.active`,
+  ]);
+
+  const textClasses = getStyles(styles, [
+    '.nav-link --text',
+    disabled && '.nav-link.disabled --text',
+    variant && `.nav-${variant} .nav-link --text`,
+    variant === 'tabs' && disabled && '.nav-tabs .nav-link.disabled --text',
+    // Navbar styles
+    navbar && '.navbar-nav .nav-link --text',
+    navbar &&
+      navbar.expand &&
+      `.navbar-expand${infix(navbar.expand)} .navbar-nav .nav-link --text`,
+    navbar && `.navbar-${navbar.variant} .navbar-nav .nav-link --text`,
+    navbar &&
+      disabled &&
+      `.navbar-${navbar.variant} .navbar-nav .nav-link.disabled --text`,
+  ]);
+
+  const activeTextClasses = getStyles(styles, [
+    variant && `.nav-${variant} .nav-link.active --text`,
+    // Navbar styles
+    navbar && `.navbar-${navbar.variant} .navbar-nav .nav-link.active --text`,
+  ]);
+
+  return (
+    <Pressable
+      {...elementProps}
+      ref={modifierRef}
+      active={active}
+      disabled={disabled}
+      style={[...classes, style]}
+      activeStyle={[...activeClasses, activeStyle]}
+      textStyle={[...textClasses, textStyle]}
+      activeTextStyle={[...activeTextClasses, activeTextStyle]}
+    >
+      {children}
+    </Pressable>
+  );
+});
+
+NavLink.displayName = 'NavLink';
+NavLink.propTypes = propTypes;
+
+export default NavLink;

package/src/components/nav/Tab.js

@@ -0,0 +1,15 @@
+import TabContext from './TabContext';
+import TabProvider from './TabProvider';
+import TabContent from './TabContent';
+import TabPane from './TabPane';
+import useToggleTab from './useToggleTab';
+
+const Tab = {};
+
+Tab.Context = TabContext;
+Tab.Provider = TabProvider;
+Tab.Content = TabContent;
+Tab.Pane = TabPane;
+Tab.useToggle = useToggleTab;
+
+export default Tab;

package/src/components/nav/TabContent.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from '../View';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+const TabContent = React.forwardRef((props, ref) => {
+  const { ...elementProps } = props;
+
+  return <View {...elementProps} ref={ref} />;
+});
+
+TabContent.displayName = 'TabContent';
+TabContent.propTypes = propTypes;
+
+export default TabContent;

package/src/components/nav/TabContext.js

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

package/src/components/nav/TabPane.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Platform } from 'react-native';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import View from '../View';
+import { getStyles, getElementId } from '../../utils';
+import useForcedContext from '../../hooks/useForcedContext';
+import TabContext from './TabContext';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  id: PropTypes.string.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  '.tab-pane': css`
+    display: none;
+  `,
+  '.active': css`
+    display: flex;
+  `,
+});
+
+const TabPane = React.forwardRef((props, ref) => {
+  const { id: target, style, ...elementProps } = props;
+
+  const tabbable = useForcedContext(TabContext);
+
+  const classes = getStyles(styles, [
+    '.tab-pane',
+    tabbable.activeTarget === target && '.active',
+  ]);
+
+  const id = getElementId(tabbable.identifier, target);
+
+  // Accessiblity role tabpanel is only supported on web.
+  const role = Platform.OS === 'web' ? 'tabpanel' : null;
+
+  return (
+    <View
+      {...elementProps}
+      ref={ref}
+      id={id}
+      role={role}
+      aria-labelledby={`${id}-tab`}
+      style={[classes, style]}
+    />
+  );
+});
+
+TabPane.displayName = 'TabPane';
+TabPane.propTypes = propTypes;
+
+export default TabPane;

package/src/components/nav/TabProvider.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import TabContext from './TabContext';
+import useTabbable from './useTabbable';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  defaultActiveTarget: PropTypes.string.isRequired,
+  activeTarget: PropTypes.string,
+  onChange: PropTypes.func,
+};
+
+const TabProvider = (props) => {
+  const { children, defaultActiveTarget, activeTarget, onChange } = props;
+
+  const tabbable = useTabbable(defaultActiveTarget, activeTarget, onChange);
+
+  return <TabContext.Provider value={tabbable}>{children}</TabContext.Provider>;
+};
+
+TabProvider.displayName = 'TabProvider';
+TabProvider.propTypes = propTypes;
+
+export default TabProvider;

package/src/components/nav/useTabbable.js

@@ -0,0 +1,26 @@
+import { useMemo } from 'react';
+import useIdentifier from '../../hooks/useIdentifier';
+import useControlledState from '../../hooks/useControlledState';
+
+export default function useTabbable(
+  defaultActiveTarget,
+  controlledActiveTarget,
+  onChange,
+) {
+  const identifier = useIdentifier('tabbable');
+
+  const [activeTarget, setActiveTarget] = useControlledState(
+    defaultActiveTarget,
+    controlledActiveTarget,
+    onChange,
+  );
+
+  return useMemo(
+    () => ({
+      identifier,
+      activeTarget,
+      setActiveTarget,
+    }),
+    [activeTarget],
+  );
+}

package/src/components/nav/useToggleTab.js

@@ -0,0 +1,30 @@
+import invariant from 'tiny-invariant';
+import useForcedContext from '../../hooks/useForcedContext';
+import TabContext from './TabContext';
+import { getElementId } from '../../utils';
+
+export default function useToggleTab(props) {
+  const context = useForcedContext(TabContext);
+
+  const { target, onPress: handlePress, ...restProps } = props;
+
+  invariant(target, 'Prop "target" is required.');
+
+  const id = getElementId(context.identifier, target);
+  const active = context.activeTarget === target;
+
+  return {
+    ...restProps,
+    id: `${id}-tab`,
+    onPress: (event) => {
+      if (handlePress) handlePress(event);
+
+      event.preventDefault();
+      context.setActiveTarget(target);
+    },
+    active,
+    role: 'tab',
+    'aria-controls': id,
+    'aria-selected': active,
+  };
+}

package/src/components/navbar/Navbar.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import View from '../View';
+import { GRID_BREAKPOINTS } from '../../theme/proxies';
+import { infix, next } from '../../theme/breakpoints';
+import { getStyles, each } from '../../utils';
+import NavbarText from './NavbarText';
+import NavbarBrand from './NavbarBrand';
+import NavbarCollapse from './NavbarCollapse';
+import NavbarToggler from './NavbarToggler';
+import NavbarContext from './NavbarContext';
+import useNavbar from './useNavbar';
+import useDismissNavbar from './useDismissNavbar';
+import useToggleNavbar from './useToggleNavbar';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  variant: PropTypes.oneOf(['light', 'dark']),
+  defaultExpanded: PropTypes.bool,
+  expanded: PropTypes.bool,
+  onToggle: PropTypes.func,
+  expand: PropTypes.oneOf([true, 'sm', 'md', 'lg', 'xl', 'xxl']),
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  '.navbar': css`
+    position: relative;
+    display: flex;
+    flex-direction: row; // added for bootstrap-rn
+    flex-wrap: wrap; // allow us to do the line break for collapsing content
+    align-items: center;
+    justify-content: space-between; // space out brand from logo
+    padding-top: $navbar-padding-y;
+    padding-right: $navbar-padding-x; // default: null
+    padding-bottom: $navbar-padding-y;
+    padding-left: $navbar-padding-x; // default: null
+    // @include gradient-bg();
+  `,
+  ...each(GRID_BREAKPOINTS, (breakpoint) => ({
+    [`.navbar-expand${infix(next(breakpoint))}`]: css`
+      @include media-breakpoint-up(${next(breakpoint)}) {
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+      }
+    `,
+  })),
+});
+
+const Navbar = React.forwardRef((props, ref) => {
+  const {
+    children,
+    variant = 'light',
+    defaultExpanded = false,
+    expanded,
+    onToggle,
+    expand,
+    style,
+    ...elementProps
+  } = props;
+
+  const navbar = useNavbar(
+    variant,
+    defaultExpanded,
+    expanded,
+    onToggle,
+    expand,
+  );
+
+  const classes = getStyles(styles, [
+    '.navbar',
+    expand && `.navbar-expand${expand === true ? '' : `-${expand}`}`,
+  ]);
+
+  return (
+    <View {...elementProps} ref={ref} style={[classes, style]}>
+      <NavbarContext.Provider value={navbar}>{children}</NavbarContext.Provider>
+    </View>
+  );
+});
+
+Navbar.displayName = 'Navbar';
+Navbar.propTypes = propTypes;
+
+Navbar.Brand = NavbarBrand;
+Navbar.Text = NavbarText;
+Navbar.Collapse = NavbarCollapse;
+Navbar.Toggler = NavbarToggler;
+Navbar.useDismiss = useDismissNavbar;
+Navbar.useToggle = useToggleNavbar;
+
+export default Navbar;

package/src/components/navbar/NavbarBrand.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import Pressable from '../Pressable';
+import useForcedContext from '../../hooks/useForcedContext';
+import { getStyles } from '../../utils';
+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-brand': css`
+    padding-top: $navbar-brand-padding-y;
+    padding-bottom: $navbar-brand-padding-y;
+    margin-right: $navbar-brand-margin-end;
+  `,
+  '.navbar-brand --text': css`
+    font-size: $navbar-brand-font-size;
+    line-height: $navbar-brand-font-size * $line-height-base; // added for bootstrap-rn
+    text-decoration: none; // if($link-decoration == none, null, none);
+    // white-space: nowrap;
+
+    &:hover {
+      text-decoration: none; // if($link-hover-decoration == underline, none, null);
+    }
+    &:focus {
+      text-decoration: none; // if($link-hover-decoration == underline, none, null);
+    }
+  `,
+  '.navbar-light .navbar-brand --text': css`
+    color: $navbar-light-brand-color;
+
+    &:hover {
+      color: $navbar-light-brand-hover-color;
+    }
+    &:focus {
+      color: $navbar-light-brand-hover-color;
+    }
+  `,
+  '.navbar-dark .navbar-brand --text': css`
+    color: $navbar-dark-brand-color;
+
+    &:hover {
+      color: $navbar-dark-brand-hover-color;
+    }
+    &:focus {
+      color: $navbar-dark-brand-hover-color;
+    }
+  `,
+});
+
+const NavbarBrand = React.forwardRef((props, ref) => {
+  const { children, style, textStyle, ...elementProps } = props;
+
+  const { variant } = useForcedContext(NavbarContext);
+
+  const classes = getStyles(styles, ['.navbar-brand']);
+
+  const textClasses = getStyles(styles, [
+    '.navbar-brand --text',
+    `.navbar-${variant} .navbar-brand --text`,
+  ]);
+
+  return (
+    <Pressable
+      {...elementProps}
+      ref={ref}
+      style={[classes, style]}
+      textStyle={[textClasses, textStyle]}
+    >
+      {children}
+    </Pressable>
+  );
+});
+
+NavbarBrand.displayName = 'NavbarBrand';
+NavbarBrand.propTypes = propTypes;
+
+export default NavbarBrand;