bootstrap-rn 0.3.1 → 0.3.3

package/src/components/close/CloseButton.js

@@ -1,146 +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;
+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/dropdown/DropdownItem.js

@@ -1,151 +1,151 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import StyleSheet from '../../style/StyleSheet';
-import { getStyles } from '../../utils';
-import useForcedContext from '../../hooks/useForcedContext';
-import css from '../../style/css';
-import Pressable from '../Pressable';
-import DropdownContext from './DropdownContext';
-
-const propTypes = {
-  children: PropTypes.node.isRequired,
-  onPress: PropTypes.func,
-  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({
-  '.dropdown-item': css`
-    width: 100%;
-    padding: $dropdown-item-padding-y $dropdown-item-padding-x;
-    // clear: both;
-    background-color: transparent;
-    border: 0;
-
-    &:hover {
-      // @include gradient-bg($dropdown-link-hover-bg);
-      background-color: $dropdown-link-hover-bg;
-    }
-    &:focus {
-      // @include gradient-bg($dropdown-link-hover-bg);
-      background-color: $dropdown-link-hover-bg;
-    }
-  `,
-  '.dropdown-item --text': css`
-    font-weight: $font-weight-normal;
-    color: $dropdown-link-color;
-    // text-align: inherit;
-    text-decoration: none; // if($link-decoration == none, null, none);
-    // white-space: nowrap;
-
-    &:hover {
-      color: $dropdown-link-hover-color;
-      text-decoration: none; // if($link-hover-decoration == underline, none, null);
-    }
-    &:focus {
-      color: $dropdown-link-hover-color;
-      text-decoration: none; // if($link-hover-decoration == underline, none, null);
-    }
-  `,
-  '.dropdown-item.active': css`
-    // @include gradient-bg($dropdown-link-active-bg);
-    background-color: $dropdown-link-active-bg;
-
-    &:hover {
-      background-color: $dropdown-link-active-bg;
-    }
-    &:focus {
-      background-color: $dropdown-link-active-bg;
-    }
-  `,
-  '.dropdown-item.active --text': css`
-    color: $dropdown-link-active-color;
-    text-decoration: none;
-
-    &:hover {
-      color: $dropdown-link-active-color;
-    }
-    &:focus {
-      color: $dropdown-link-active-color;
-    }
-  `,
-
-  '.dropdown-item.disabled': css`
-    // pointer-events: none;
-    background-color: transparent;
-    // Remove CSS gradients if they're enabled
-    // background-image: if($enable-gradients, none, null);
-
-    &:hover {
-      background-color: transparent;
-    }
-    &:focus {
-      background-color: transparent;
-    }
-  `,
-  '.dropdown-item.disabled --text': css`
-    color: $dropdown-link-disabled-color;
-
-    &:hover {
-      color: $dropdown-link-disabled-color;
-    }
-    &:focus {
-      color: $dropdown-link-disabled-color;
-    }
-  `,
-});
-
-const DropdownItem = (props) => {
-  const {
-    children,
-    onPress: handlePress,
-    active = false,
-    disabled = false,
-    style,
-    textStyle,
-    ...elementProps
-  } = props;
-
-  const dropdown = useForcedContext(DropdownContext);
-
-  const classes = getStyles(styles, [
-    '.dropdown-item',
-    active && '.dropdown-item.active',
-    disabled && '.dropdown-item.disabled',
-  ]);
-
-  const textClasses = getStyles(styles, [
-    '.dropdown-item --text',
-    active && '.dropdown-item.active --text',
-    disabled && '.dropdown-item.disabled --text',
-  ]);
-
-  return (
-    <Pressable
-      {...elementProps}
-      onPress={(event) => {
-        if (handlePress) handlePress(event);
-
-        if (event.defaultPrevented) {
-          return;
-        }
-
-        dropdown.setVisible(false);
-      }}
-      disabled={disabled}
-      style={[classes, style]}
-      textStyle={[textClasses, textStyle]}
-    >
-      {children}
-    </Pressable>
-  );
-};
-
-DropdownItem.displayName = 'DropdownItem';
-DropdownItem.propTypes = propTypes;
-
-export default DropdownItem;
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import { getStyles } from '../../utils';
+import useForcedContext from '../../hooks/useForcedContext';
+import css from '../../style/css';
+import Pressable from '../Pressable';
+import DropdownContext from './DropdownContext';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  onPress: PropTypes.func,
+  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({
+  '.dropdown-item': css`
+    width: 100%;
+    padding: $dropdown-item-padding-y $dropdown-item-padding-x;
+    // clear: both;
+    background-color: transparent;
+    border: 0;
+
+    &:hover {
+      // @include gradient-bg($dropdown-link-hover-bg);
+      background-color: $dropdown-link-hover-bg;
+    }
+    &:focus {
+      // @include gradient-bg($dropdown-link-hover-bg);
+      background-color: $dropdown-link-hover-bg;
+    }
+  `,
+  '.dropdown-item --text': css`
+    font-weight: $font-weight-normal;
+    color: $dropdown-link-color;
+    // text-align: inherit;
+    text-decoration: none; // if($link-decoration == none, null, none);
+    // white-space: nowrap;
+
+    &:hover {
+      color: $dropdown-link-hover-color;
+      text-decoration: none; // if($link-hover-decoration == underline, none, null);
+    }
+    &:focus {
+      color: $dropdown-link-hover-color;
+      text-decoration: none; // if($link-hover-decoration == underline, none, null);
+    }
+  `,
+  '.dropdown-item.active': css`
+    // @include gradient-bg($dropdown-link-active-bg);
+    background-color: $dropdown-link-active-bg;
+
+    &:hover {
+      background-color: $dropdown-link-active-bg;
+    }
+    &:focus {
+      background-color: $dropdown-link-active-bg;
+    }
+  `,
+  '.dropdown-item.active --text': css`
+    color: $dropdown-link-active-color;
+    text-decoration: none;
+
+    &:hover {
+      color: $dropdown-link-active-color;
+    }
+    &:focus {
+      color: $dropdown-link-active-color;
+    }
+  `,
+
+  '.dropdown-item.disabled': css`
+    pointer-events: none;
+    background-color: transparent;
+    // Remove CSS gradients if they're enabled
+    // background-image: if($enable-gradients, none, null);
+
+    &:hover {
+      background-color: transparent;
+    }
+    &:focus {
+      background-color: transparent;
+    }
+  `,
+  '.dropdown-item.disabled --text': css`
+    color: $dropdown-link-disabled-color;
+
+    &:hover {
+      color: $dropdown-link-disabled-color;
+    }
+    &:focus {
+      color: $dropdown-link-disabled-color;
+    }
+  `,
+});
+
+const DropdownItem = (props) => {
+  const {
+    children,
+    onPress: handlePress,
+    active = false,
+    disabled = false,
+    style,
+    textStyle,
+    ...elementProps
+  } = props;
+
+  const dropdown = useForcedContext(DropdownContext);
+
+  const classes = getStyles(styles, [
+    '.dropdown-item',
+    active && '.dropdown-item.active',
+    disabled && '.dropdown-item.disabled',
+  ]);
+
+  const textClasses = getStyles(styles, [
+    '.dropdown-item --text',
+    active && '.dropdown-item.active --text',
+    disabled && '.dropdown-item.disabled --text',
+  ]);
+
+  return (
+    <Pressable
+      {...elementProps}
+      onPress={(event) => {
+        if (handlePress) handlePress(event);
+
+        if (event.defaultPrevented) {
+          return;
+        }
+
+        dropdown.setVisible(false);
+      }}
+      disabled={disabled}
+      style={[classes, style]}
+      textStyle={[textClasses, textStyle]}
+    >
+      {children}
+    </Pressable>
+  );
+};
+
+DropdownItem.displayName = 'DropdownItem';
+DropdownItem.propTypes = propTypes;
+
+export default DropdownItem;

package/src/components/dropdown/useToggleDropdown.js

@@ -17,6 +17,7 @@ export default function useToggleDropdown(props) {
     },
     'aria-haspopup': true,
     'aria-expanded': context.visible,
+    active: context.visible,
     caret: caret === undefined ? { direction: context.direction } : caret,
   };
 }