bootstrap-rn 0.3.0 → 0.3.2

package/src/components/breadcrumb/Breadcrumb.js

@@ -0,0 +1,64 @@
+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 useList from '../../hooks/useList';
+import BreadcrumbItem from './BreadcrumbItem';
+
+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({
+  '.breadcrumb': css`
+    display: flex;
+    flex-direction: row; // added for bootstrap-rn
+    flex-wrap: wrap;
+    padding: $breadcrumb-padding-y $breadcrumb-padding-x;
+    margin-bottom: $breadcrumb-margin-bottom;
+    // list-style: none;
+    background-color: $breadcrumb-bg;
+    border-radius: $breadcrumb-border-radius;
+  `,
+  '.breadcrumb --text': css`
+    font-size: $breadcrumb-font-size;
+    line-height: $breadcrumb-font-size * $line-height-base; // added for bootstrap-rn
+  `,
+});
+
+const Breadcrumb = React.forwardRef((props, ref) => {
+  const { children, style, textStyle, ...elementProps } = props;
+
+  const list = useList(children);
+
+  const classes = getStyles(styles, ['.breadcrumb']);
+  const textClasses = getStyles(styles, ['.breadcrumb --text']);
+
+  const role = Platform.OS === 'web' ? 'list' : null;
+
+  return (
+    <View
+      {...elementProps}
+      ref={ref}
+      role={role}
+      style={[classes, style]}
+      textStyle={[textClasses, textStyle]}
+    >
+      {list}
+    </View>
+  );
+});
+
+Breadcrumb.displayName = 'Breadcrumb';
+Breadcrumb.propTypes = propTypes;
+
+Breadcrumb.Item = BreadcrumbItem;
+
+export default Breadcrumb;

package/src/components/breadcrumb/BreadcrumbItem.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import { Platform, I18nManager } from 'react-native';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import { getStyles, optional } from '../../utils';
+import useForcedContext from '../../hooks/useForcedContext';
+import ListContext from '../helpers/ListContext';
+import View from '../View';
+import Text from '../Text';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  active: PropTypes.bool,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  dividerStyle: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  textStyle: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  '.breadcrumb-item + .breadcrumb-item': css`
+    flex-direction: row; // added for bootstrap-rn
+    padding-left: $breadcrumb-item-padding-x;
+  `,
+  '.breadcrumb-item + .breadcrumb-item::before': css`
+    // float: left; // Suppress inline spacings and underlining of the separator
+    padding-right: $breadcrumb-item-padding-x;
+    color: $breadcrumb-divider-color;
+  `,
+  '.breadcrumb-item.active --text': css`
+    color: $breadcrumb-active-color;
+  `,
+});
+
+const BreadcrumbItem = React.forwardRef((props, ref) => {
+  const {
+    children,
+    active = false,
+    style,
+    dividerStyle,
+    textStyle,
+    ...elementProps
+  } = props;
+
+  const { first } = useForcedContext(ListContext);
+
+  const classes = getStyles(styles, [
+    !first && '.breadcrumb-item + .breadcrumb-item',
+  ]);
+  const textClasses = getStyles(styles, [
+    active && '.breadcrumb-item.active --text',
+  ]);
+  const dividerClasses = getStyles(styles, [
+    '.breadcrumb-item + .breadcrumb-item::before',
+  ]);
+
+  const role = Platform.OS === 'web' ? 'listitem' : null;
+
+  return (
+    <View
+      {...elementProps}
+      ref={ref}
+      role={role}
+      {...optional(active, { 'aria-current': 'page' })}
+      style={[classes, style]}
+      textStyle={[textClasses, textStyle]}
+    >
+      {!first && (
+        <Text style={[dividerClasses, dividerStyle]}>
+          {I18nManager.isRTL
+            ? StyleSheet.value('breadcrumb-divider-flipped')
+            : StyleSheet.value('breadcrumb-divider')}
+        </Text>
+      )}
+      {children}
+    </View>
+  );
+});
+
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+BreadcrumbItem.propTypes = propTypes;
+
+export default BreadcrumbItem;

package/src/components/button-group/ButtonGroup.js

@@ -0,0 +1,47 @@
+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 } from '../../utils';
+import ButtonGroupContext from './ButtonGroupContext';
+import useList from '../../hooks/useList';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  size: PropTypes.oneOf(['lg', 'sm']),
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  '.btn-group': css`
+    flex-direction: row; // added for bootstrap-rn
+    border-radius: $btn-border-radius;
+  `,
+});
+
+const ButtonGroup = React.forwardRef((props, ref) => {
+  const { children, size, style, ...elementProps } = props;
+
+  const list = useList(children);
+
+  const classes = getStyles(styles, ['.btn-group']);
+
+  // Accessiblity role tabpanel is only supported on web.
+  const role = Platform.OS === 'web' ? 'group' : null;
+
+  return (
+    <View {...elementProps} ref={ref} role={role} style={[classes, style]}>
+      <ButtonGroupContext.Provider value={{ size }}>
+        {list}
+      </ButtonGroupContext.Provider>
+    </View>
+  );
+});
+
+ButtonGroup.displayName = 'ButtonGroup';
+ButtonGroup.propTypes = propTypes;
+
+export default ButtonGroup;

package/src/components/button-group/ButtonGroupContext.js

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

package/src/components/button-group/ButtonToolbar.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 View from '../View';
+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({
+  '.btn-toolbar': css`
+    display: flex;
+    flex-direction: row; // added for bootstrap-rn
+    flex-wrap: wrap;
+    justify-content: flex-start;
+  `,
+});
+
+const ButtonToolbar = React.forwardRef((props, ref) => {
+  const { children, style, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['.btn-toolbar']);
+
+  return (
+    <View {...elementProps} ref={ref} role="toolbar" style={[classes, style]}>
+      {children}
+    </View>
+  );
+});
+
+ButtonToolbar.displayName = 'ButtonToolbar';
+ButtonToolbar.propTypes = propTypes;
+
+export default ButtonToolbar;

package/src/components/buttons/Button.js

@@ -0,0 +1,381 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import invariant from 'tiny-invariant';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import Pressable from '../Pressable';
+import { getStyles, each } from '../../utils';
+import { THEME_COLORS } from '../../theme/proxies';
+import { shadeColor, colorContrast } from '../../theme/functions';
+import ButtonGroupContext from '../button-group/ButtonGroupContext';
+import useToggleButton from './useToggleButton';
+import ListContext from '../helpers/ListContext';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  color: PropTypes.oneOf([...Object.keys(THEME_COLORS), 'link']),
+  size: PropTypes.oneOf(['lg', 'sm']),
+  outline: PropTypes.bool,
+  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({
+  '.btn': css`
+    flex-direction: row; // added for bootstrap-rn
+    justify-content: center; // added for bootstrap-rn
+    // display: inline-block;
+    @include platform(web) {
+      // cursor: if($enable-button-pointers, pointer, null);
+    }
+    user-select: none;
+    background-color: transparent;
+    border: $btn-border-width solid transparent;
+    padding: $btn-padding-y $btn-padding-x;
+    // Manually declare to provide an override to the browser default
+    border-radius: $btn-border-radius;
+    // @include transition($btn-transition);
+
+    &:focus-visible {
+      // outline: 0;
+      // box-shadow: $btn-focus-box-shadow;
+    }
+
+    &:active {
+      // @include box-shadow($btn-active-box-shadow);
+
+      &:focus-visible {
+        // @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
+      }
+    }
+  `,
+  '.btn --text': css`
+    font-family: $btn-font-family;
+    font-weight: $btn-font-weight;
+    line-height: $btn-font-size * $btn-line-height;
+    color: $body-color;
+    text-align: center;
+    text-decoration: none; // if($link-decoration == none, null, none);
+    white-space: $btn-white-space;
+    vertical-align: middle;
+    font-size: $btn-font-size;
+
+    &:hover {
+      color: $body-color;
+      text-decoration: none; // if($link-decoration == none, null, none);
+    }
+  `,
+  '.btn.disabled': css`
+    pointer-events: none;
+    opacity: $btn-disabled-opacity;
+    // @include box-shadow(none);
+  `,
+  ...each(THEME_COLORS, (color, value) => ({
+    [`.btn-${color}`]: css`
+      background-color: ${value};
+      border-color: ${value};
+      // @include box-shadow($btn-box-shadow);
+
+      &:hover {
+        background-color: ${shadeColor(
+          value,
+          (t) => t['btn-hover-bg-shade-amount'],
+        )};
+        border-color: ${shadeColor(
+          value,
+          (t) => t['btn-hover-border-shade-amount'],
+        )};
+      }
+
+      &:focus-visible {
+        background-color: ${shadeColor(
+          value,
+          (t) => t['btn-hover-bg-shade-amount'],
+        )};
+        border-color: ${shadeColor(
+          value,
+          (t) => t['btn-hover-border-shade-amount'],
+        )};
+        /* @if $enable-shadows {
+          @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
+        } @else {
+          // Avoid using mixin so we can pass custom focus shadow properly
+          box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
+        } */
+      }
+
+      &:active {
+        background-color: ${shadeColor(
+          value,
+          (t) => t['btn-active-bg-shade-amount'],
+        )};
+        // Remove CSS gradients if they're enabled
+        // background-image: if($enable-gradients, none, null);
+        border-color: ${shadeColor(
+          value,
+          (t) => t['btn-active-border-shade-amount'],
+        )};
+      }
+    `,
+    [`.btn-${color} --text`]: css`
+      color: ${colorContrast(value)};
+
+      &:hover {
+        color: ${colorContrast(value)};
+      }
+
+      &:focus-visible {
+        color: ${colorContrast(value)};
+      }
+
+      &:active {
+        color: ${colorContrast(value)};
+      }
+    `,
+    [`.btn-${color}.active`]: css`
+      background-color: ${shadeColor(
+        value,
+        (t) => t['btn-active-bg-shade-amount'],
+      )};
+      // Remove CSS gradients if they're enabled
+      // background-image: if($enable-gradients, none, null);
+      border-color: ${shadeColor(
+        value,
+        (t) => t['btn-active-border-shade-amount'],
+      )};
+    `,
+    [`.btn-${color}.active --text`]: css`
+      color: ${colorContrast(value)};
+    `,
+    [`.btn-${color}.disabled`]: css`
+      $disabled-background: ${value};
+      $disabled-border: ${value};
+
+      background-color: $disabled-background;
+      // Remove CSS gradients if they're enabled
+      // background-image: if($enable-gradients, none, null);
+      border-color: $disabled-border;
+    `,
+    [`.btn-${color}.disabled --text`]: css`
+      $disabled-color: ${colorContrast(value)};
+
+      color: $disabled-color;
+    `,
+    [`.btn-outline-${color}`]: css`
+      border-color: ${value};
+
+      &:hover {
+        background-color: ${value};
+        border-color: ${value};
+      }
+
+      &:focus-visible {
+        // box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
+      }
+
+      &:active {
+        background-color: ${value};
+        border-color: ${value};
+
+        /* &:focus {
+          @if $enable-shadows {
+            @include box-shadow(
+              $btn-active-box-shadow,
+              0 0 0 $btn-focus-width rgba($color, 0.5)
+            );
+          } @else {
+            // Avoid using mixin so we can pass custom focus shadow properly
+            box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5);
+          }
+        } */
+      }
+    `,
+    [`.btn-outline-${color} --text`]: css`
+      color: ${value};
+
+      &:hover {
+        color: ${colorContrast(value)};
+      }
+
+      &:active {
+        color: ${colorContrast(value)};
+      }
+    `,
+    [`.btn-outline-${color}.disabled`]: css`
+      background-color: transparent;
+    `,
+    [`.btn-outline-${color}.disabled --text`]: css`
+      color: ${value};
+    `,
+  })),
+  '.btn-link --text': css`
+    font-weight: $font-weight-normal;
+    color: $btn-link-color;
+    text-decoration-color: $btn-link-color; // added for bootstrap-rn
+    text-decoration-line: $link-decoration;
+
+    &:hover {
+      color: $btn-link-hover-color;
+      text-decoration-color: $btn-link-hover-color; // added for bootstrap-rn
+      text-decoration-line: $link-hover-decoration;
+    }
+
+    &:focus-visible {
+      text-decoration-line: $link-hover-decoration;
+    }
+
+    // No need for an active state here
+  `,
+  '.btn-link.disabled --text': css`
+    color: $btn-link-disabled-color;
+  `,
+  '.btn-lg': css`
+    padding: $btn-padding-y-lg $btn-padding-x-lg;
+    // Manually declare to provide an override to the browser default
+    border-radius: $btn-border-radius-lg;
+  `,
+  '.btn-lg --text': css`
+    line-height: $btn-font-size-lg * $btn-line-height;
+    font-size: $btn-font-size-lg;
+  `,
+  '.btn-sm': css`
+    padding: $btn-padding-y-sm $btn-padding-x-sm;
+    // Manually declare to provide an override to the browser default
+    border-radius: $btn-border-radius-sm;
+  `,
+  '.btn-sm --text': css`
+    line-height: $btn-font-size-sm * $btn-line-height;
+    font-size: $btn-font-size-sm;
+  `,
+  '.btn-group > .btn': css`
+    position: relative;
+    // flex: 1 1 auto;
+
+    &:hover {
+      z-index: 1;
+    }
+    &:focus-visible {
+      z-index: 1;
+    }
+    &:active {
+      z-index: 1;
+    }
+  `,
+  '.btn-group > .btn.active': css`
+    z-index: 2; // 1;
+  `,
+  '.btn-group > .btn:not(:first-child)': css`
+    margin-left: -$btn-border-width;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  `,
+  '.btn-group > .btn:not(:last-child)': css`
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  `,
+});
+
+const getVariant = (color, outline) => {
+  if (color === 'link') {
+    return null;
+  }
+
+  if (outline) {
+    return `.btn-outline-${color}`;
+  }
+
+  return `.btn-${color}`;
+};
+
+const hasSize = (size, group, value) => {
+  if (size !== undefined || !group) {
+    return size === value;
+  }
+
+  return group.size === value;
+};
+
+const Button = React.forwardRef((props, ref) => {
+  const {
+    children,
+    color = 'primary',
+    size,
+    outline = false,
+    active = false,
+    disabled = false,
+    style,
+    activeStyle,
+    textStyle,
+    activeTextStyle,
+    ...elementProps
+  } = props;
+
+  invariant(
+    color !== 'link' || !outline,
+    'Button link variant is only available as non outline style.',
+  );
+
+  const listItem = useContext(ListContext);
+  const group = useContext(ButtonGroupContext);
+
+  const classes = getStyles(styles, [
+    '.btn',
+    getVariant(color, outline),
+    disabled && '.btn.disabled',
+    disabled && `${getVariant(color, outline)}.disabled`,
+    hasSize(size, group, 'lg') && '.btn-lg',
+    hasSize(size, group, 'sm') && '.btn-sm',
+    group && '.btn-group > .btn',
+    group && active && '.btn-group > .btn.active',
+    group && !listItem.first && '.btn-group > .btn:not(:first-child)',
+    group && !listItem.last && '.btn-group > .btn:not(:last-child)',
+  ]);
+
+  const activeClasses = getStyles(styles, [
+    `${getVariant(color, outline)}.active`,
+  ]);
+
+  const textClasses = getStyles(styles, [
+    '.btn --text',
+    `${getVariant(color, outline)} --text`,
+    color === 'link' && '.btn-link --text',
+    disabled && `${getVariant(color, outline)}.disabled --text`,
+    disabled && color === 'link' && '.btn-link.disabled --text',
+    hasSize(size, group, 'lg') && '.btn-lg --text',
+    hasSize(size, group, 'sm') && '.btn-sm --text',
+  ]);
+
+  const activeTextClasses = getStyles(styles, [
+    `${getVariant(color, outline)}.active --text`,
+  ]);
+
+  return (
+    <Pressable
+      {...elementProps}
+      ref={ref}
+      active={active}
+      disabled={disabled}
+      style={[...classes, style]}
+      activeStyle={[...activeClasses, activeStyle]}
+      textStyle={[...textClasses, textStyle]}
+      activeTextStyle={[...activeTextClasses, activeTextStyle]}
+    >
+      {children}
+    </Pressable>
+  );
+});
+
+Button.displayName = 'Button';
+Button.propTypes = propTypes;
+
+Button.useToggle = useToggleButton;
+
+export default Button;

package/src/components/buttons/useToggleButton.js

@@ -0,0 +1,18 @@
+import { useState } from 'react';
+
+export default function useToggleButton(props) {
+  const { active, handlePress, ...restProps } = props;
+
+  const [pressed, setPressed] = useState(active);
+
+  return {
+    ...restProps,
+    active: pressed,
+    onPress: (event) => {
+      if (handlePress) handlePress(event);
+
+      setPressed((value) => !value);
+    },
+    'aria-pressed': pressed,
+  };
+}

package/src/components/card/Card.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';
+import CardBody from './CardBody';
+import CardHeader from './CardHeader';
+import CardFooter from './CardFooter';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  '.card': css`
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    height: $card-height;
+    // word-wrap: break-word;
+    background-color: $card-bg;
+    // background-clip: border-box;
+    border: $card-border-width solid $card-border-color;
+    border-radius: $card-border-radius;
+    // @include box-shadow($card-box-shadow);
+  `,
+});
+
+const Card = React.forwardRef((props, ref) => {
+  const { children, style, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['.card']);
+
+  return (
+    <View {...elementProps} ref={ref} style={[classes, style]}>
+      {children}
+    </View>
+  );
+});
+
+Card.displayName = 'Card';
+Card.propTypes = propTypes;
+
+Card.Header = CardHeader;
+Card.Body = CardBody;
+Card.Footer = CardFooter;
+
+export default Card;