bootstrap-rn 0.3.0 → 0.3.1

package/src/components/offcanvas/Offcanvas.js

@@ -0,0 +1,258 @@
+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 useScrollbarEffects from '../../hooks/useScrollbarEffects';
+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();
+
+  useScrollbarEffects({
+    keepBodyScroll: scroll,
+    visible,
+  });
+
+  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;

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,5 @@
+import { useMemo } from 'react';
+
+export default function useOffcanvas() {
+  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;
+*/