bootstrap-rn 0.3.0 → 0.3.1

package/src/components/modal/ModalHeader.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import View from '../View';
+import css from '../../style/css';
+import { getStyles } from '../../utils';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  '.modal-header': css`
+    display: flex;
+    flex-direction: row; // added for bootstrap-rn
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
+    padding: $modal-header-padding;
+    border-bottom-width: $modal-header-border-width;
+    border-style: solid;
+    border-color: $modal-header-border-color;
+    border-top-left-radius: $modal-content-inner-border-radius;
+    border-top-right-radius: $modal-content-inner-border-radius;
+  `,
+});
+
+const ModalHeader = React.forwardRef((props, ref) => {
+  const { children, style, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['.modal-header']);
+
+  return (
+    <View {...elementProps} ref={ref} style={[classes, style]}>
+      {children}
+    </View>
+  );
+});
+
+ModalHeader.displayName = 'ModalHeader';
+ModalHeader.propTypes = propTypes;
+
+export default ModalHeader;

package/src/components/modal/ModalTitle.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import Heading from '../Heading';
+import { getStyles } from '../../utils';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  '.modal-title': css`
+    margin-bottom: 0;
+    line-height: $font-size-base * $modal-title-line-height;
+  `,
+});
+
+const ModalTitle = React.forwardRef((props, ref) => {
+  const { children, style, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['.modal-title']);
+
+  return (
+    <Heading size={5} {...elementProps} ref={ref} style={[classes, style]}>
+      {children}
+    </Heading>
+  );
+});
+
+ModalTitle.displayName = 'ModalTitle';
+ModalTitle.propTypes = propTypes;
+
+export default ModalTitle;

package/src/components/modal/useModal.js

@@ -0,0 +1,10 @@
+import { useMemo } from 'react';
+
+export default function useModal(scrollable) {
+  return useMemo(
+    () => ({
+      scrollable,
+    }),
+    [scrollable],
+  );
+}

package/src/components/nav/Nav.js

@@ -0,0 +1,101 @@
+import React, { useContext } 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 { GRID_BREAKPOINTS } from '../../theme/proxies';
+import { infix, next } from '../../theme/breakpoints';
+import { getStyles, each } from '../../utils';
+import NavbarContext from '../navbar/NavbarContext';
+import NavContext from './NavContext';
+import NavLink from './NavLink';
+import TabContext from './TabContext';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  variant: PropTypes.oneOf(['tabs', 'pills']),
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  '.nav': css`
+    display: flex;
+    flex-direction: row; // added for bootstrap-rn
+    // flex-wrap: wrap; // bootstrap-rn: width will shrink on native with "flex-direction: column;"
+    padding-left: 0;
+    margin-bottom: 0;
+    // list-style: none;
+  `,
+  '.nav-tabs': css`
+    border-bottom-width: $nav-tabs-border-width;
+    border-style: solid;
+    border-color: $nav-tabs-border-color;
+  `,
+  // Navbar styles
+  '.navbar-nav': css`
+    display: flex;
+    flex-direction: column; // cannot use "inherit" to get the ".navbar"s value
+    padding-left: 0;
+    margin-bottom: 0;
+    // list-style: none;
+  `,
+  ...each(GRID_BREAKPOINTS, (breakpoint) => ({
+    [`.navbar-expand${infix(next(breakpoint))} .navbar-nav`]: css`
+      @include media-breakpoint-up(${next(breakpoint)}) {
+        flex-direction: row;
+      }
+    `,
+  })),
+});
+
+const getRole = (tabbable, navbar) => {
+  if (tabbable) {
+    return 'tablist';
+  }
+
+  if (Platform.OS === 'web' && !navbar) {
+    return 'navigation';
+  }
+
+  return null;
+};
+
+const Nav = React.forwardRef((props, ref) => {
+  const { children, variant, style, ...elementProps } = props;
+
+  const navbar = useContext(NavbarContext);
+  const tabbable = useContext(TabContext);
+
+  const classes = getStyles(styles, [
+    !navbar && '.nav',
+    variant === 'tabs' && '.nav-tabs',
+    // Navbar styles
+    navbar && '.navbar-nav',
+    navbar &&
+      navbar.expand &&
+      `.navbar-expand${
+        navbar.expand === true ? '' : `-${navbar.expand}`
+      } .navbar-nav`,
+  ]);
+
+  return (
+    <View
+      {...elementProps}
+      ref={ref}
+      role={getRole(tabbable, navbar)}
+      style={[classes, style]}
+    >
+      <NavContext.Provider value={{ variant }}>{children}</NavContext.Provider>
+    </View>
+  );
+});
+
+Nav.displayName = 'Nav';
+Nav.propTypes = propTypes;
+
+Nav.Context = NavContext;
+Nav.Link = NavLink;
+
+export default Nav;

package/src/components/nav/NavContext.js

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

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,
+  };
+}