bootstrap-rn 0.4.7 → 0.4.9

package/src/components/modal/ModalFooter.tsx

@@ -1,42 +1,38 @@
-import React from 'react';
-import StyleSheet from '../../style/StyleSheet';
-import View, { ViewProps, ViewRef } from '../View';
-import css from '../../style/css';
-import { getStyles } from '../../utils';
-
-export interface ModalFooterProps extends ViewProps {}
-
-const styles = StyleSheet.create({
-  '.modal-footer': css`
-    display: flex;
-    flex-direction: row; // added for bootstrap-rn
-    flex-shrink: 0;
-    flex-wrap: wrap;
-    align-items: center; // vertically center
-    justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
-    padding: $modal-inner-padding;
-    border-top-width: $modal-footer-border-width;
-    border-style: solid;
-    border-color: $modal-footer-border-color;
-    border-bottom-start-radius: $modal-content-inner-border-radius;
-    border-bottom-end-radius: $modal-content-inner-border-radius;
-  `,
-});
-
-const ModalFooter = React.forwardRef<ViewRef, ModalFooterProps>(
-  (props, ref) => {
-    const { children, style, ...elementProps } = props;
-
-    const classes = getStyles(styles, ['.modal-footer']);
-
-    return (
-      <View {...elementProps} ref={ref} style={[classes, style]}>
-        {children}
-      </View>
-    );
-  },
-);
-
-ModalFooter.displayName = 'ModalFooter';
-
-export default ModalFooter;
+import React from 'react';
+import StyleSheet from '../../style/StyleSheet';
+import View, { ViewProps, ViewRef } from '../View';
+import css from '../../style/css';
+import { getStyles } from '../../utils';
+
+export interface ModalFooterProps extends ViewProps {}
+
+const styles = StyleSheet.create({
+  '.modal-footer': css`
+    display: flex;
+    flex-direction: row; // added for bootstrap-rn
+    flex-shrink: 0;
+    flex-wrap: wrap;
+    align-items: center; // vertically center
+    justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
+    padding: $modal-inner-padding;
+    border-top-width: $modal-footer-border-width;
+    border-style: solid;
+    border-color: $modal-footer-border-color;
+    border-bottom-start-radius: $modal-content-inner-border-radius;
+    border-bottom-end-radius: $modal-content-inner-border-radius;
+  `,
+});
+
+function ModalFooter(props: ModalFooterProps & React.RefAttributes<ViewRef>) {
+  const { ref, children, style, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['.modal-footer']);
+
+  return (
+    <View {...elementProps} ref={ref} style={[classes, style]}>
+      {children}
+    </View>
+  );
+}
+
+export default ModalFooter;

package/src/components/modal/ModalHeader.tsx

@@ -1,41 +1,37 @@
-import React from 'react';
-import StyleSheet from '../../style/StyleSheet';
-import View, { ViewProps, ViewRef } from '../View';
-import css from '../../style/css';
-import { getStyles } from '../../utils';
-
-export interface ModalHeaderProps extends ViewProps {}
-
-const styles = StyleSheet.create({
-  '.modal-header': css`
-    display: flex;
-    flex-direction: row; // added for bootstrap-rn
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
-    padding: $modal-header-padding;
-    border-bottom-width: $modal-header-border-width;
-    border-style: solid;
-    border-color: $modal-header-border-color;
-    border-top-left-radius: $modal-content-inner-border-radius;
-    border-top-right-radius: $modal-content-inner-border-radius;
-  `,
-});
-
-const ModalHeader = React.forwardRef<ViewRef, ModalHeaderProps>(
-  (props, ref) => {
-    const { children, style, ...elementProps } = props;
-
-    const classes = getStyles(styles, ['.modal-header']);
-
-    return (
-      <View {...elementProps} ref={ref} style={[classes, style]}>
-        {children}
-      </View>
-    );
-  },
-);
-
-ModalHeader.displayName = 'ModalHeader';
-
-export default ModalHeader;
+import React from 'react';
+import StyleSheet from '../../style/StyleSheet';
+import View, { ViewProps, ViewRef } from '../View';
+import css from '../../style/css';
+import { getStyles } from '../../utils';
+
+export interface ModalHeaderProps extends ViewProps {}
+
+const styles = StyleSheet.create({
+  '.modal-header': css`
+    display: flex;
+    flex-direction: row; // added for bootstrap-rn
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
+    padding: $modal-header-padding;
+    border-bottom-width: $modal-header-border-width;
+    border-style: solid;
+    border-color: $modal-header-border-color;
+    border-top-left-radius: $modal-content-inner-border-radius;
+    border-top-right-radius: $modal-content-inner-border-radius;
+  `,
+});
+
+function ModalHeader(props: ModalHeaderProps & React.RefAttributes<ViewRef>) {
+  const { ref, children, style, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['.modal-header']);
+
+  return (
+    <View {...elementProps} ref={ref} style={[classes, style]}>
+      {children}
+    </View>
+  );
+}
+
+export default ModalHeader;

package/src/components/modal/ModalTitle.tsx

@@ -16,8 +16,8 @@ const styles = StyleSheet.create({
   `,
 });
 
-const ModalTitle = React.forwardRef<TextRef, ModalTitleProps>((props, ref) => {
-  const { children, style, ...elementProps } = props;
+function ModalTitle(props: ModalTitleProps & React.RefAttributes<TextRef>) {
+  const { ref, children, style, ...elementProps } = props;
 
   const { identifier } = useForcedContext(ModalContext);
 
@@ -34,8 +34,6 @@ const ModalTitle = React.forwardRef<TextRef, ModalTitleProps>((props, ref) => {
       {children}
     </Heading>
   );
-});
-
-ModalTitle.displayName = 'ModalTitle';
+}
 
 export default ModalTitle;

package/src/components/nav/Nav.tsx

@@ -1,106 +1,104 @@
-import React, { useContext, useMemo } from 'react';
-import { Platform } from 'react-native';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import View, { ViewProps, ViewRef } from '../View';
-import { GRID_BREAKPOINTS } from '../../theme/proxies';
-import { infix, next } from '../../theme/breakpoints';
-import { getStyles, each } from '../../utils';
-import NavbarContext, { NavbarContextProps } from '../navbar/NavbarContext';
-import NavContext, { NavVariant } from './NavContext';
-import NavLink from './NavLink';
-import TabContext, { TabContextProps } from './TabContext';
-
-export interface NavProps extends ViewProps {
-  variant?: NavVariant;
-}
-
-const styles = StyleSheet.create({
-  '.nav': css`
-    display: flex;
-    flex-direction: row; // added for bootstrap-rn
-    // flex-wrap: wrap; // bootstrap-rn: width will shrink on native with "flex-direction: column;"
-    padding-left: 0;
-    margin-bottom: 0;
-    // list-style: none;
-  `,
-  '.nav-tabs': css`
-    border-bottom-width: $nav-tabs-border-width;
-    border-style: solid;
-    border-color: $nav-tabs-border-color;
-  `,
-  // Navbar styles
-  '.navbar-nav': css`
-    display: flex;
-    flex-direction: column; // cannot use "inherit" to get the ".navbar"s value
-    padding-left: 0;
-    margin-bottom: 0;
-    // list-style: none;
-  `,
-  ...each(GRID_BREAKPOINTS, (breakpoint) => ({
-    [`.navbar-expand${infix(next(breakpoint))} .navbar-nav`]: css`
-      @include media-breakpoint-up(${next(breakpoint)}) {
-        flex-direction: row;
-      }
-    `,
-  })),
-});
-
-const getRole = (
-  tabbable: TabContextProps | null,
-  navbar: NavbarContextProps | null,
-) => {
-  if (tabbable) {
-    return 'tablist';
-  }
-
-  if (Platform.OS === 'web' && !navbar) {
-    return 'navigation';
-  }
-
-  return undefined;
-};
-
-const Nav = React.forwardRef<ViewRef, NavProps>((props, ref) => {
-  const { children, variant, style, ...elementProps } = props;
-
-  const navbar = useContext(NavbarContext);
-  const tabbable = useContext(TabContext);
-
-  const classes = getStyles(styles, [
-    !navbar && '.nav',
-    variant === 'tabs' && '.nav-tabs',
-    // Navbar styles
-    navbar && '.navbar-nav',
-    navbar &&
-      navbar.expand &&
-      `.navbar-expand${
-        navbar.expand === true ? '' : `-${navbar.expand}`
-      } .navbar-nav`,
-  ]);
-
-  const contextValue = useMemo(
-    () => ({
-      variant,
-    }),
-    [variant],
-  );
-
-  return (
-    <View
-      {...elementProps}
-      ref={ref}
-      role={getRole(tabbable, navbar)}
-      style={[classes, style]}
-    >
-      <NavContext.Provider value={contextValue}>{children}</NavContext.Provider>
-    </View>
-  );
-});
-
-Nav.displayName = 'Nav';
-
-export default Object.assign(Nav, {
-  Context: NavContext,
-  Link: NavLink,
-});
+import React, { useContext, useMemo } from 'react';
+import { Platform } from 'react-native';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import View, { ViewProps, ViewRef } from '../View';
+import { GRID_BREAKPOINTS } from '../../theme/proxies';
+import { infix, next } from '../../theme/breakpoints';
+import { getStyles, each } from '../../utils';
+import NavbarContext, { NavbarContextProps } from '../navbar/NavbarContext';
+import NavContext, { NavVariant } from './NavContext';
+import NavLink from './NavLink';
+import TabContext, { TabContextProps } from './TabContext';
+
+export interface NavProps extends ViewProps {
+  variant?: NavVariant;
+}
+
+const styles = StyleSheet.create({
+  '.nav': css`
+    display: flex;
+    flex-direction: row; // added for bootstrap-rn
+    // flex-wrap: wrap; // bootstrap-rn: width will shrink on native with "flex-direction: column;"
+    padding-left: 0;
+    margin-bottom: 0;
+    // list-style: none;
+  `,
+  '.nav-tabs': css`
+    border-bottom-width: $nav-tabs-border-width;
+    border-style: solid;
+    border-color: $nav-tabs-border-color;
+  `,
+  // Navbar styles
+  '.navbar-nav': css`
+    display: flex;
+    flex-direction: column; // cannot use "inherit" to get the ".navbar"s value
+    padding-left: 0;
+    margin-bottom: 0;
+    // list-style: none;
+  `,
+  ...each(GRID_BREAKPOINTS, (breakpoint) => ({
+    [`.navbar-expand${infix(next(breakpoint))} .navbar-nav`]: css`
+      @include media-breakpoint-up(${next(breakpoint)}) {
+        flex-direction: row;
+      }
+    `,
+  })),
+});
+
+const getRole = (
+  tabbable: TabContextProps | null,
+  navbar: NavbarContextProps | null,
+) => {
+  if (tabbable) {
+    return 'tablist';
+  }
+
+  if (Platform.OS === 'web' && !navbar) {
+    return 'navigation';
+  }
+
+  return undefined;
+};
+
+function Nav(props: NavProps & React.RefAttributes<ViewRef>) {
+  const { ref, children, variant, style, ...elementProps } = props;
+
+  const navbar = useContext(NavbarContext);
+  const tabbable = useContext(TabContext);
+
+  const classes = getStyles(styles, [
+    !navbar && '.nav',
+    variant === 'tabs' && '.nav-tabs',
+    // Navbar styles
+    navbar && '.navbar-nav',
+    navbar &&
+      navbar.expand &&
+      `.navbar-expand${
+        navbar.expand === true ? '' : `-${navbar.expand}`
+      } .navbar-nav`,
+  ]);
+
+  const contextValue = useMemo(
+    () => ({
+      variant,
+    }),
+    [variant],
+  );
+
+  return (
+    <View
+      {...elementProps}
+      ref={ref}
+      role={getRole(tabbable, navbar)}
+      style={[classes, style]}
+    >
+      <NavContext.Provider value={contextValue}>{children}</NavContext.Provider>
+    </View>
+  );
+}
+
+export default Object.assign(Nav, {
+  Context: NavContext,
+  Link: NavLink,
+});