bootstrap-rn 0.3.0 → 0.3.2

package/src/components/card/CardBody.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import View from '../View';
+import { getStyles } from '../../utils';
+
+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({
+  '.card-body': css`
+    // flex: 1 1 auto;
+    padding: $card-spacer-y $card-spacer-x;
+  `,
+  '.card-body --text': css`
+    color: $card-color;
+  `,
+});
+
+const CardBody = React.forwardRef((props, ref) => {
+  const { children, style, textStyle, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['.card-body']);
+
+  const textClasses = getStyles(styles, [`.card-body --text`]);
+
+  return (
+    <View
+      {...elementProps}
+      ref={ref}
+      style={[classes, style]}
+      textStyle={[textClasses, textStyle]}
+    >
+      {children}
+    </View>
+  );
+});
+
+CardBody.displayName = 'CardBody';
+CardBody.propTypes = propTypes;
+
+export default CardBody;

package/src/components/card/CardFooter.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import View from '../View';
+import { getStyles } from '../../utils';
+
+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({
+  '.card-footer': css`
+    padding: $card-cap-padding-y $card-cap-padding-x;
+    background-color: $card-cap-bg;
+    border-top-width: $card-border-width;
+    border-style: solid;
+    border-color: $card-border-color;
+    border-radius: 0 0 $card-inner-border-radius $card-inner-border-radius;
+  `,
+  '.card-footer --text': css`
+    color: $card-cap-color;
+  `,
+});
+
+const CardFooter = React.forwardRef((props, ref) => {
+  const { children, style, textStyle, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['.card-footer']);
+
+  const textClasses = getStyles(styles, ['.card-footer --text']);
+
+  return (
+    <View
+      {...elementProps}
+      ref={ref}
+      style={[classes, style]}
+      textStyle={[textClasses, textStyle]}
+    >
+      {children}
+    </View>
+  );
+});
+
+CardFooter.displayName = 'CardFooter';
+CardFooter.propTypes = propTypes;
+
+export default CardFooter;

package/src/components/card/CardHeader.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 { getStyles } from '../../utils';
+
+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({
+  '.card-header': css`
+    padding: $card-cap-padding-y $card-cap-padding-x;
+    background-color: $card-cap-bg;
+    border-bottom-width: $card-border-width;
+    border-style: solid;
+    border-color: $card-border-color;
+    border-radius: $card-inner-border-radius $card-inner-border-radius 0 0;
+  `,
+  '.card-header --text': css`
+    margin-bottom: 0; // Removes the default margin-bottom of <hN>
+    color: $card-cap-color;
+  `,
+});
+
+const CardHeader = React.forwardRef((props, ref) => {
+  const { children, style, textStyle, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['.card-header']);
+
+  const textClasses = getStyles(styles, ['.card-header --text']);
+
+  return (
+    <View
+      {...elementProps}
+      ref={ref}
+      style={[classes, style]}
+      textStyle={[textClasses, textStyle]}
+    >
+      {children}
+    </View>
+  );
+});
+
+CardHeader.displayName = 'CardHeader';
+CardHeader.propTypes = propTypes;
+
+export default CardHeader;

package/src/components/close/CloseButton.js

@@ -0,0 +1,146 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import css from '../../style/css';
+import { getStyles } from '../../utils';
+import StyleSheet from '../../style/StyleSheet';
+import Pressable from '../Pressable';
+import ModalContext from '../modal/ModalContext';
+import OffcanvasContext from '../offcanvas/OffcanvasContext';
+import useMedia from '../../hooks/useMedia';
+import useStyle from '../../hooks/useStyle';
+import useInteractionState from '../../hooks/useInteractionState';
+import useBackground from '../../hooks/useBackground';
+import { escapeSvg } from '../../theme/functions';
+
+const propTypes = {
+  children: PropTypes.node,
+  disabled: PropTypes.bool,
+  // 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
+  styleName: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  '.btn-close': css`
+    // Workaround for missing box-sizing in react native.
+    $additional-width: $btn-close-padding-x * 2;
+    $additional-height: $btn-close-padding-y * 2;
+
+    // box-sizing: content-box;
+    width: $btn-close-width + $additional-width;
+    height: $btn-close-height + $additional-height;
+    padding: $btn-close-padding-y $btn-close-padding-x;
+    background-color: transparent; // include transparent for button elements
+    background-image: ${(t) => escapeSvg(t['btn-close-bg'])};
+    background-position: center;
+    background-size: $btn-close-width auto;
+    background-repeat: no-repeat;
+    border-width: 0; // for button elements
+    // @include border-radius();
+    opacity: $btn-close-opacity;
+
+    &:hover {
+      opacity: $btn-close-hover-opacity;
+    }
+
+    &:focus {
+      // outline: 0;
+      // box-shadow: $btn-close-focus-shadow;
+      opacity: $btn-close-focus-opacity;
+    }
+  `,
+  '.btn-close --text': css`
+    color: $btn-close-color;
+
+    // Override <a>'s hover style
+    &:hover {
+      color: $btn-close-color;
+      text-decoration: none;
+    }
+  `,
+  '.btn-close.disabled': css`
+    pointer-events: none;
+    user-select: none;
+    opacity: $btn-close-disabled-opacity;
+  `,
+  // Modal styles
+  '.modal-header .btn-close': css`
+    padding: $modal-header-padding-y * 0.5 $modal-header-padding-x * 0.5;
+    margin: -0.5 * $modal-header-padding-y -0.5 * $modal-header-padding-x -0.5 *
+      $modal-header-padding-y auto;
+
+    // Workaround for missing box-sizing in react native.
+    width: $btn-close-width + $modal-header-padding-x;
+    height: $btn-close-height + $modal-header-padding-y;
+  `,
+  // Offcanvas styles
+  '.offcanvas-header .btn-close': css`
+    padding: $offcanvas-padding-y * 0.5 $offcanvas-padding-x * 0.5;
+    margin-top: -0.5 * $offcanvas-padding-y;
+    margin-right: -0.5 * $offcanvas-padding-x;
+    margin-bottom: -0.5 * $offcanvas-padding-y;
+
+    // Workaround for missing box-sizing in react native.
+    width: $btn-close-width + $offcanvas-padding-x;
+    height: $btn-close-height + $offcanvas-padding-y;
+  `,
+});
+
+const CloseButton = React.forwardRef((props, ref) => {
+  const {
+    children,
+    disabled = false,
+    style,
+    textStyle,
+    styleName,
+    ...elementProps
+  } = props;
+
+  const media = useMedia();
+
+  const modal = useContext(ModalContext);
+  const offcanvas = useContext(OffcanvasContext);
+
+  const classes = getStyles(styles, [
+    '.btn-close',
+    disabled && '.btn-close.disabled',
+    // Modal styles
+    modal && '.modal-header .btn-close',
+    // Offcanvas styles
+    offcanvas && '.offcanvas-header .btn-close',
+  ]);
+  const textClasses = getStyles(styles, ['.btn-close --text']);
+
+  const resolveStyle = useStyle([classes, style], styleName);
+
+  const { interaction, interactionProps } = useInteractionState(elementProps);
+
+  const background = useBackground(
+    resolveStyle({
+      media,
+      interaction,
+    }),
+  );
+
+  return (
+    <Pressable
+      {...elementProps}
+      {...interactionProps}
+      component={Pressable}
+      ref={ref}
+      disabled={disabled}
+      style={background.style}
+      textStyle={[textClasses, textStyle]}
+    >
+      {background.element}
+    </Pressable>
+  );
+});
+
+CloseButton.displayName = 'CloseButton';
+CloseButton.propTypes = propTypes;
+
+export default CloseButton;

package/src/components/collapse/Collapse.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from '../View';
+import useForcedContext from '../../hooks/useForcedContext';
+import CollapseContext from './CollapseContext';
+import CollapseProvider from './CollapseProvider';
+import useToggleCollapse from './useToggleCollapse';
+
+const propTypes = {
+  children: PropTypes.node,
+};
+
+const Collapse = React.forwardRef((props, ref) => {
+  const { children, ...elementProps } = props;
+
+  const { identifier, visible } = useForcedContext(CollapseContext);
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <View {...elementProps} ref={ref} id={identifier}>
+      {children}
+    </View>
+  );
+});
+
+Collapse.displayName = 'Collapse';
+Collapse.propTypes = propTypes;
+
+Collapse.Provider = CollapseProvider;
+Collapse.useToggle = useToggleCollapse;
+
+export default Collapse;

package/src/components/collapse/CollapseContext.js

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

package/src/components/collapse/CollapseProvider.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import CollapseContext from './CollapseContext';
+import useCollapse from './useCollapse';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  defaultVisible: PropTypes.bool,
+  visible: PropTypes.bool,
+  onToggle: PropTypes.func,
+};
+
+const CollapseProvider = (props) => {
+  const { children, defaultVisible = false, visible, onToggle } = props;
+
+  const collapse = useCollapse(defaultVisible, visible, onToggle);
+
+  return (
+    <CollapseContext.Provider value={collapse}>
+      {children}
+    </CollapseContext.Provider>
+  );
+};
+
+CollapseProvider.displayName = 'CollapseProvider';
+CollapseProvider.propTypes = propTypes;
+
+export default CollapseProvider;

package/src/components/collapse/useCollapse.js

@@ -0,0 +1,26 @@
+import { useMemo } from 'react';
+import useIdentifier from '../../hooks/useIdentifier';
+import useControlledState from '../../hooks/useControlledState';
+
+export default function useCollapse(
+  defaultVisible,
+  controlledVisible,
+  onToggle,
+) {
+  const identifier = useIdentifier('collapse');
+
+  const [visible, setVisible] = useControlledState(
+    defaultVisible,
+    controlledVisible,
+    onToggle,
+  );
+
+  return useMemo(
+    () => ({
+      identifier,
+      visible,
+      setVisible,
+    }),
+    [visible],
+  );
+}

package/src/components/collapse/useToggleCollapse.js

@@ -0,0 +1,19 @@
+import useForcedContext from '../../hooks/useForcedContext';
+import CollapseContext from './CollapseContext';
+
+export default function useToggleCollapse(props) {
+  const context = useForcedContext(CollapseContext);
+
+  const { onPress: handlePress, ...restProps } = props;
+
+  return {
+    ...restProps,
+    onPress: (event) => {
+      if (handlePress) handlePress(event);
+
+      context.setVisible((value) => !value);
+    },
+    'aria-expanded': context.visible,
+    'aria-controls': context.identifier,
+  };
+}

package/src/components/containers/Container.js

@@ -0,0 +1,122 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import View from '../View';
+import { CONTAINER_MAX_WIDTHS, GRID_BREAKPOINTS } from '../../theme/proxies';
+import { getStyles, each } from '../../utils';
+import { infix, next } from '../../theme/breakpoints';
+import NavbarContext from '../navbar/NavbarContext';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  fluid: PropTypes.oneOf([true, ...Object.keys(CONTAINER_MAX_WIDTHS)]),
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  '.container': css`
+    width: 100%;
+    padding-right: $container-padding-x;
+    padding-left: $container-padding-x;
+    margin-right: auto;
+    margin-left: auto;
+  `,
+  '.container-sm': css`
+    @include media-breakpoint-up(sm) {
+      max-width: ${(t) => t['container-max-widths'].sm};
+    }
+    @include media-breakpoint-up(md) {
+      max-width: ${(t) => t['container-max-widths'].md};
+    }
+    @include media-breakpoint-up(lg) {
+      max-width: ${(t) => t['container-max-widths'].lg};
+    }
+    @include media-breakpoint-up(xl) {
+      max-width: ${(t) => t['container-max-widths'].xl};
+    }
+    @include media-breakpoint-up(xxl) {
+      max-width: ${(t) => t['container-max-widths'].xxl};
+    }
+  `,
+  '.container-md': css`
+    @include media-breakpoint-up(md) {
+      max-width: ${(t) => t['container-max-widths'].md};
+    }
+    @include media-breakpoint-up(lg) {
+      max-width: ${(t) => t['container-max-widths'].lg};
+    }
+    @include media-breakpoint-up(xl) {
+      max-width: ${(t) => t['container-max-widths'].xl};
+    }
+    @include media-breakpoint-up(xxl) {
+      max-width: ${(t) => t['container-max-widths'].xxl};
+    }
+  `,
+  '.container-lg': css`
+    @include media-breakpoint-up(lg) {
+      max-width: ${(t) => t['container-max-widths'].lg};
+    }
+    @include media-breakpoint-up(xl) {
+      max-width: ${(t) => t['container-max-widths'].xl};
+    }
+    @include media-breakpoint-up(xxl) {
+      max-width: ${(t) => t['container-max-widths'].xxl};
+    }
+  `,
+  '.container-xl': css`
+    @include media-breakpoint-up(xl) {
+      max-width: ${(t) => t['container-max-widths'].xl};
+    }
+    @include media-breakpoint-up(xxl) {
+      max-width: ${(t) => t['container-max-widths'].xxl};
+    }
+  `,
+  '.container-xxl': css`
+    @include media-breakpoint-up(xxl) {
+      max-width: ${(t) => t['container-max-widths'].xxl};
+    }
+  `,
+  // Navbar styles
+  '.navbar .container': css`
+    display: flex;
+    flex-direction: row; // added for bootstrap-rn
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+  `,
+  ...each(GRID_BREAKPOINTS, (breakpoint) => ({
+    [`.navbar-expand${infix(next(breakpoint))} .container`]: css`
+      @include media-breakpoint-up(${next(breakpoint)}) {
+        flex-wrap: nowrap;
+      }
+    `,
+  })),
+});
+
+const Container = React.forwardRef((props, ref) => {
+  const { fluid = 'sm', style, ...elementProps } = props;
+
+  const navbar = useContext(NavbarContext);
+
+  const classes = getStyles(styles, [
+    '.container',
+    // Hint: Bootstrap's .container class is identical with .container-sm.
+    fluid !== true && `.container-${fluid}`,
+    // Navbar styles
+    navbar && '.navbar .container',
+    navbar &&
+      navbar.expand &&
+      `.navbar-expand${
+        navbar.expand === true ? '' : `-${navbar.expand}`
+      } .container`,
+  ]);
+
+  return <View {...elementProps} ref={ref} style={[classes, style]} />;
+});
+
+Container.displayName = 'Container';
+Container.propTypes = propTypes;
+
+export default Container;

package/src/components/dropdown/Dropdown.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import View from '../View';
+import { getStyles } from '../../utils';
+import DropdownContext from './DropdownContext';
+import DropdownToggle from './DropdownToggle';
+import DropdownMenu from './DropdownMenu';
+import DropdownHeader from './DropdownHeader';
+import DropdownItem from './DropdownItem';
+import DropdownItemText from './DropdownItemText';
+import DropdownDivider from './DropdownDivider';
+import useDropdown from './useDropdown';
+import useDismissDropdown from './useDismissDropdown';
+import useToggleDropdown from './useToggleDropdown';
+
+const DIRECTIONS = ['up', 'down', 'start', 'end'];
+
+const propTypes = {
+  children: PropTypes.node,
+  defaultVisible: PropTypes.bool,
+  visible: PropTypes.bool,
+  onToggle: PropTypes.func,
+  direction: PropTypes.oneOf(DIRECTIONS),
+  center: PropTypes.bool,
+  display: PropTypes.oneOf(['dynamic', 'static']),
+  autoClose: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.oneOf(['inside', 'outside']),
+  ]),
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  '.dropdown': css`
+    position: relative;
+  `,
+});
+
+const Dropdown = React.forwardRef((props, ref) => {
+  const {
+    children,
+    defaultVisible = false,
+    visible,
+    onToggle,
+    direction = 'down',
+    center = false,
+    display = 'dynamic',
+    autoClose = 'outside',
+    style,
+    ...elementProps
+  } = props;
+
+  const dropdown = useDropdown(
+    defaultVisible,
+    visible,
+    onToggle,
+    direction,
+    center,
+    display,
+    autoClose,
+  );
+
+  const classes = getStyles(styles, ['.dropdown']);
+
+  return (
+    <View {...elementProps} ref={ref} style={[classes, style]}>
+      <DropdownContext.Provider value={dropdown}>
+        {children}
+      </DropdownContext.Provider>
+    </View>
+  );
+});
+
+Dropdown.displayName = 'Dropdown';
+Dropdown.propTypes = propTypes;
+
+Dropdown.Context = DropdownContext;
+Dropdown.Toggle = DropdownToggle;
+Dropdown.Menu = DropdownMenu;
+Dropdown.Header = DropdownHeader;
+Dropdown.Item = DropdownItem;
+Dropdown.ItemText = DropdownItemText;
+Dropdown.Divider = DropdownDivider;
+Dropdown.useDismiss = useDismissDropdown;
+Dropdown.useToggle = useToggleDropdown;
+
+export default Dropdown;

package/src/components/dropdown/DropdownContext.js

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

package/src/components/dropdown/DropdownDivider.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import { getStyles } from '../../utils';
+import css from '../../style/css';
+import View from '../View';
+
+const propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  '.dropdown-divider': css`
+    height: 0;
+    margin: $dropdown-divider-margin-y 0;
+    overflow: hidden;
+    border-top-width: 1px;
+    border-style: solid;
+    border-color: $dropdown-divider-bg;
+  `,
+});
+
+const DropdownDivider = React.forwardRef((props, ref) => {
+  const { style, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['.dropdown-divider']);
+
+  return <View {...elementProps} ref={ref} style={[classes, style]} />;
+});
+
+DropdownDivider.displayName = 'DropdownDivider';
+DropdownDivider.propTypes = propTypes;
+
+export default DropdownDivider;