bootstrap-rn 0.3.0 → 0.3.2

package/src/components/offcanvas/OffcanvasHeader.js

@@ -0,0 +1,59 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import css from '../../style/css';
+import StyleSheet from '../../style/StyleSheet';
+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';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  '.offcanvas-header': css`
+    display: flex;
+    flex-direction: row; // added for bootstrap-rn
+    align-items: center;
+    justify-content: space-between;
+    padding: $offcanvas-padding-y $offcanvas-padding-x;
+  `,
+  // Navbar styles
+  ...each(GRID_BREAKPOINTS, (breakpoint) => ({
+    [`.navbar-expand${infix(next(breakpoint))} .offcanvas-header`]: css`
+      @include media-breakpoint-up(${next(breakpoint)}) {
+        display: none;
+      }
+    `,
+  })),
+});
+
+const OffcanvasHeader = React.forwardRef((props, ref) => {
+  const { children, style, ...elementProps } = props;
+
+  const navbar = useContext(NavbarContext);
+
+  const classes = getStyles(styles, [
+    '.offcanvas-header',
+    navbar &&
+      navbar.expand &&
+      `.navbar-expand${
+        navbar.expand === true ? '' : `-${navbar.expand}`
+      } .offcanvas-header`,
+  ]);
+
+  return (
+    <View {...elementProps} ref={ref} style={[classes, style]}>
+      {children}
+    </View>
+  );
+});
+
+OffcanvasHeader.displayName = 'OffcanvasHeader';
+OffcanvasHeader.propTypes = propTypes;
+
+export default OffcanvasHeader;

package/src/components/offcanvas/OffcanvasTitle.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({
+  '.offcanvas-title': css`
+    margin-bottom: 0;
+    line-height: $font-size-base * $offcanvas-title-line-height;
+  `,
+});
+
+const OffcanvasTitle = React.forwardRef((props, ref) => {
+  const { children, style, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['.offcanvas-title']);
+
+  return (
+    <Heading size={5} {...elementProps} ref={ref} style={[classes, style]}>
+      {children}
+    </Heading>
+  );
+});
+
+OffcanvasTitle.displayName = 'OffcanvasTitle';
+OffcanvasTitle.propTypes = propTypes;
+
+export default OffcanvasTitle;

package/src/components/offcanvas/useOffcanvas.js

@@ -0,0 +1,20 @@
+import { useContext, useEffect, useMemo } from 'react';
+import Context from '../../Context';
+
+export default function useOffcanvas(visible, scroll) {
+  const context = useContext(Context);
+
+  useEffect(() => {
+    if (!visible || scroll) {
+      return undefined;
+    }
+
+    context.scrollbars.hide();
+
+    return () => {
+      context.scrollbars.show();
+    };
+  }, [visible, scroll]);
+
+  return useMemo(() => ({}), []);
+}

package/src/components/pagination/Pagination.js

@@ -0,0 +1,45 @@
+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 { getStyles } from '../../utils';
+import useList from '../../hooks/useList';
+import View from '../View';
+import PaginationItem from './PaginationItem';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  '.pagination': css`
+    background-color: $white;
+    flex-direction: row;
+  `,
+});
+
+const Pagination = React.forwardRef((props, ref) => {
+  const { children, style, ...elementProps } = props;
+
+  const list = useList(children);
+
+  const classes = getStyles(styles, ['.pagination']);
+
+  const role = Platform.OS === 'web' ? 'list' : null;
+
+  return (
+    <View {...elementProps} ref={ref} role={role} style={[classes, style]}>
+      {list}
+    </View>
+  );
+});
+
+Pagination.displayName = 'Pagination';
+Pagination.propTypes = propTypes;
+
+Pagination.Item = PaginationItem;
+
+export default Pagination;

package/src/components/pagination/PaginationItem.js

@@ -0,0 +1,144 @@
+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 { getStyles } from '../../utils';
+import View from '../View';
+import useForcedContext from '../../hooks/useForcedContext';
+import ListContext from '../helpers/ListContext';
+
+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
+  textStyle: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  '.pagination-item': css`
+    padding-bottom: $pagination-padding-y;
+    padding-top: $pagination-padding-y;
+    padding-left: $pagination-padding-x;
+    padding-right: $pagination-padding-x;
+    border: $list-group-border-width solid $list-group-border-color;
+
+    &:hover {
+      color: $pagination-hover-color;
+      background-color: $pagination-hover-bg;
+      border-color: $pagination-hover-border-color;
+    }
+
+    &:focus {
+      color: $pagination-focus-color;
+      background-color: $pagination-focus-bg;
+      //$pagination-focus-box-shadow:
+      //$pagination-focus-outline:
+    }
+  `,
+  '.pagination-item:first-child': css`
+    border-top-left-radius: $list-group-border-radius;
+    border-bottom-left-radius: $list-group-border-radius;
+  `,
+  '.pagination-item:last-child': css`
+    border-top-right-radius: $list-group-border-radius;
+    border-bottom-right-radius: $list-group-border-radius;
+  `,
+  '.pagination-item.active': css`
+    color: $pagination-active-color;
+    background-color: $pagination-active-bg;
+    border-color: $pagination-active-border-color;
+  `,
+  '.pagination-item.disabled': css`
+    color: $pagination-disabled-color;
+    background-color: $pagination-disabled-bg;
+    border-color: $pagination-disabled-border-color;
+  `,
+});
+
+const PaginationItem = React.forwardRef((props, ref) => {
+  const {
+    children,
+    active = false,
+    disabled = false,
+    style,
+    textStyle,
+    ...elementProps
+  } = props;
+
+  const { first, last } = useForcedContext(ListContext);
+
+  const classes = getStyles(styles, [
+    '.pagination-item',
+    first && '.pagination-item:first-child',
+    last && '.pagination-item:last-child',
+    active && '.pagination-item.active',
+    disabled && '.pagination-item.disabled',
+  ]);
+
+  const textClasses = getStyles(styles, [
+    active && '.pagination-item.active',
+    disabled && '.pagination-item.disabled',
+  ]);
+
+  const role = Platform.OS === 'web' ? 'listitem' : null;
+
+  return (
+    <View
+      {...elementProps}
+      ref={ref}
+      role={role}
+      style={[classes, style]}
+      textStyle={[textClasses, textStyle]}
+    >
+      {children}
+    </View>
+  );
+});
+
+PaginationItem.displayName = 'PaginationItem';
+PaginationItem.propTypes = propTypes;
+
+export default PaginationItem;
+
+/*
+$pagination-padding-y:              .375rem;
+$pagination-padding-x:              .75rem;
+$pagination-padding-y-sm:           .25rem;
+$pagination-padding-x-sm:           .5rem;
+$pagination-padding-y-lg:           .75rem;
+$pagination-padding-x-lg:           1.5rem;
+
+$pagination-color:                  $link-color;
+$pagination-bg:                     $white;
+$pagination-border-width:           $border-width;
+$pagination-border-radius:          $border-radius;
+$pagination-margin-start:           -$pagination-border-width;
+$pagination-border-color:           $gray-300;
+
+$pagination-focus-color:            $link-hover-color;
+$pagination-focus-bg:               $gray-200;
+$pagination-focus-box-shadow:       $input-btn-focus-box-shadow;
+$pagination-focus-outline:          0;
+
+$pagination-hover-color:            $link-hover-color;
+$pagination-hover-bg:               $gray-200;
+$pagination-hover-border-color:     $gray-300;
+
+$pagination-active-color:           $component-active-color;
+$pagination-active-bg:              $component-active-bg;
+$pagination-active-border-color:    $pagination-active-bg;
+
+$pagination-disabled-color:         $gray-600;
+$pagination-disabled-bg:            $white;
+$pagination-disabled-border-color:  $gray-300;
+
+$pagination-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+
+$pagination-border-radius-sm:       $border-radius-sm;
+$pagination-border-radius-lg:       $border-radius-lg;
+
+*/

package/src/components/placeholders/Placeholders.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import { getStyles } from '../../utils';
+import View from '../View';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  '.placeholders': css``,
+});
+
+const Placeholders = React.forwardRef((props, ref) => {
+  const { children, style, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['.placeholders']);
+
+  return (
+    <View {...elementProps} ref={ref} style={[classes, style]}>
+      {children}
+    </View>
+  );
+});
+
+Placeholders.displayName = 'Placeholders';
+Placeholders.propTypes = propTypes;
+
+export default Placeholders;
+
+/*
+$placeholder-opacity-max:           .5;
+$placeholder-opacity-min:           .2;
+*/

package/src/components/popover/Popover.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import { Platform } from 'react-native';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import { getStyles, transformPlacement } from '../../utils';
+import css from '../../style/css';
+import View from '../View';
+import PopoverArrow from './PopoverArrow';
+import PopoverHeader from './PopoverHeader';
+import PopoverBody from './PopoverBody';
+import PopoverContext from './PopoverContext';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  placement: PropTypes.string,
+  popper: 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
+  arrowStyle: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  '.popover': css`
+    position: absolute;
+    // top: 0;
+    // left: 0 #{"/* rtl:ignore */"};
+    z-index: $zindex-popover;
+    // display: block;
+    max-width: $popover-max-width;
+    background-color: $popover-bg;
+    // background-clip: padding-box;
+    border: $popover-border-width solid $popover-border-color;
+    border-radius: $popover-border-radius;
+    // @include box-shadow($popover-box-shadow);
+  `,
+  '.popover --text': css`
+    // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
+    // So reset our font and text properties to avoid inheriting weird values.
+    // @include reset-text();
+    font-size: $popover-font-size;
+    // Allow breaking very long words so they don't overflow the popover's bounds
+    // word-wrap: break-word;
+  `,
+});
+
+const Popover = React.forwardRef((props, ref) => {
+  const {
+    children,
+    placement = 'right',
+    popper,
+    style,
+    textStyle,
+    arrowStyle,
+    ...elementProps
+  } = props;
+
+  const popover = {
+    placement: transformPlacement(placement),
+    arrowStyle,
+    popper,
+  };
+
+  const classes = getStyles(styles, ['.popover']);
+  const textClasses = getStyles(styles, ['.popover --text']);
+
+  // Accessiblity role tooltip is only supported on web.
+  const role = Platform.OS === 'web' ? 'tooltip' : null;
+
+  return (
+    <View
+      {...elementProps}
+      ref={ref}
+      role={role}
+      style={[classes, style]}
+      textStyle={[textClasses, textStyle]}
+    >
+      <PopoverContext.Provider value={popover}>
+        {children}
+      </PopoverContext.Provider>
+    </View>
+  );
+});
+
+Popover.displayName = 'Popover';
+Popover.propTypes = propTypes;
+
+Popover.Arrow = PopoverArrow;
+Popover.Header = PopoverHeader;
+Popover.Body = PopoverBody;
+
+export default Popover;

package/src/components/popover/PopoverArrow.js

@@ -0,0 +1,166 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from '../View';
+import { subtract } from '../../theme/functions';
+import StyleSheet from '../../style/StyleSheet';
+import { getStyles } from '../../utils';
+import css from '../../style/css';
+import useForcedContext from '../../hooks/useForcedContext';
+import PopoverContext from './PopoverContext';
+
+const propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  '.popover-arrow': css`
+    position: absolute;
+    // display: block;
+    width: $popover-arrow-width;
+    height: $popover-arrow-height;
+  `,
+  '.popover-arrow::before': css`
+    position: absolute;
+    // display: block;
+    // content: "";
+    border-top-color: transparent;
+    border-right-color: transparent;
+    border-left-color: transparent;
+    border-bottom-color: transparent;
+    border-style: solid;
+  `,
+  '.popover-arrow::after': css`
+    position: absolute;
+    // display: block;
+    // content: "";
+    border-top-color: transparent;
+    border-right-color: transparent;
+    border-left-color: transparent;
+    border-bottom-color: transparent;
+    border-style: solid;
+  `,
+  '.bs-popover-top .popover-arrow': css`
+    bottom: ${subtract(
+      (t) => `-${t['popover-arrow-height']}`,
+      (t) => t['popover-border-width'],
+    )};
+  `,
+  '.bs-popover-top .popover-arrow::before': css`
+    bottom: 0;
+    border-top-width: $popover-arrow-height;
+    border-right-width: $popover-arrow-width * 0.5;
+    border-left-width: $popover-arrow-width * 0.5;
+    border-bottom-width: 0;
+    border-top-color: $popover-arrow-outer-color;
+  `,
+  '.bs-popover-top .popover-arrow::after': css`
+    bottom: $popover-border-width;
+    border-top-width: $popover-arrow-height;
+    border-right-width: $popover-arrow-width * 0.5;
+    border-left-width: $popover-arrow-width * 0.5;
+    border-bottom-width: 0;
+    border-top-color: $popover-arrow-color;
+  `,
+  '.bs-popover-end .popover-arrow': css`
+    left: ${subtract(
+      (t) => `-${t['popover-arrow-height']}`,
+      (t) => t['popover-border-width'],
+    )};
+    width: $popover-arrow-height;
+    height: $popover-arrow-width;
+  `,
+  '.bs-popover-end .popover-arrow::before': css`
+    left: 0;
+    border-top-width: $popover-arrow-width * 0.5;
+    border-right-width: $popover-arrow-height;
+    border-left-width: 0;
+    border-bottom-width: $popover-arrow-width * 0.5;
+    border-right-color: $popover-arrow-outer-color;
+  `,
+  '.bs-popover-end .popover-arrow::after': css`
+    left: $popover-border-width;
+    border-top-width: $popover-arrow-width * 0.5;
+    border-right-width: $popover-arrow-height;
+    border-left-width: 0;
+    border-bottom-width: $popover-arrow-width * 0.5;
+    border-right-color: $popover-arrow-color;
+  `,
+  '.bs-popover-bottom .popover-arrow': css`
+    top: ${subtract(
+      (t) => `-${t['popover-arrow-height']}`,
+      (t) => t['popover-border-width'],
+    )};
+  `,
+  '.bs-popover-bottom .popover-arrow::before': css`
+    top: 0;
+    border-top-width: 0;
+    border-right-width: $popover-arrow-width * 0.5;
+    border-left-width: $popover-arrow-width * 0.5;
+    border-bottom-width: $popover-arrow-height;
+    border-bottom-color: $popover-arrow-outer-color;
+  `,
+  '.bs-popover-bottom .popover-arrow::after': css`
+    top: $popover-border-width;
+    border-top-width: 0;
+    border-right-width: $popover-arrow-width * 0.5;
+    border-left-width: $popover-arrow-width * 0.5;
+    border-bottom-width: $popover-arrow-height;
+    border-bottom-color: $popover-arrow-color;
+  `,
+  '.bs-popover-start .popover-arrow': css`
+    right: ${subtract(
+      (t) => `-${t['popover-arrow-height']}`,
+      (t) => t['popover-border-width'],
+    )};
+    width: $popover-arrow-height;
+    height: $popover-arrow-width;
+  `,
+  '.bs-popover-start .popover-arrow::before': css`
+    right: 0;
+    border-top-width: $popover-arrow-width * 0.5;
+    border-right-width: 0;
+    border-left-width: $popover-arrow-height;
+    border-bottom-width: $popover-arrow-width * 0.5;
+    border-left-color: $popover-arrow-outer-color;
+  `,
+  '.bs-popover-start .popover-arrow::after': css`
+    right: $popover-border-width;
+    border-top-width: $popover-arrow-width * 0.5;
+    border-right-width: 0;
+    border-left-width: $popover-arrow-height;
+    border-bottom-width: $popover-arrow-width * 0.5;
+    border-left-color: $popover-arrow-color;
+  `,
+});
+
+const PopoverArrow = React.forwardRef((props, ref) => {
+  const { style, ...elementProps } = props;
+
+  const { placement, arrowStyle, popper } = useForcedContext(PopoverContext);
+
+  const classes = getStyles(styles, [
+    '.popover-arrow',
+    popper && `.bs-popover-${placement} .popover-arrow`,
+  ]);
+  const beforeClasses = getStyles(styles, [
+    '.popover-arrow::before',
+    popper && `.bs-popover-${placement} .popover-arrow::before`,
+  ]);
+  const afterClasses = getStyles(styles, [
+    '.popover-arrow::after',
+    popper && `.bs-popover-${placement} .popover-arrow::after`,
+  ]);
+
+  return (
+    <View {...elementProps} ref={ref} style={[classes, arrowStyle, style]}>
+      <View style={beforeClasses} />
+      <View style={afterClasses} />
+    </View>
+  );
+});
+
+PopoverArrow.displayName = 'PopoverArrow';
+PopoverArrow.propTypes = propTypes;
+
+export default PopoverArrow;

package/src/components/popover/PopoverBody.js

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

package/src/components/popover/PopoverContext.js

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