bootstrap-rn 0.3.5 → 0.3.6

package/src/components/offcanvas/OffcanvasBody.tsx

@@ -1,66 +1,64 @@
-import React, { useContext } from 'react';
-import { ScrollView as BaseScrollView } from 'react-native';
-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';
-import type { ExtendedViewStyle, StyleProp } from '../../types';
-import { ViewProps } from '../View';
-
-export interface OffcanvasBodyProps extends ViewProps {
-  contentContainerStyle?: StyleProp<ExtendedViewStyle>;
-}
-
-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<BaseScrollView, OffcanvasBodyProps>(
-  (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';
-
-export default OffcanvasBody;
+import React, { useContext } from 'react';
+import css from '../../style/css';
+import StyleSheet from '../../style/StyleSheet';
+import ScrollView, { ScrollViewProps, ScrollViewRef } from '../ScrollView';
+import { GRID_BREAKPOINTS } from '../../theme/proxies';
+import { infix, next } from '../../theme/breakpoints';
+import { getStyles, each } from '../../utils';
+import NavbarContext from '../navbar/NavbarContext';
+import type { ExtendedViewStyle, StyleProp } from '../../types';
+
+export interface OffcanvasBodyProps extends ScrollViewProps {
+  contentContainerStyle?: StyleProp<ExtendedViewStyle>;
+}
+
+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<ScrollViewRef, OffcanvasBodyProps>(
+  (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';
+
+export default OffcanvasBody;

package/src/style/makeUtilities.ts

@@ -1,76 +1,79 @@
-import css from './css';
-import { GRID_BREAKPOINTS } from '../theme/proxies';
-import utilities from '../theme/utilities';
-import { each } from '../utils';
-import type { StyleUtility } from '../types';
-
-export function makeUtility(options: StyleUtility) {
-  return each(options.values, (key, value) => {
-    const name = options.class || options.property;
-    const suffix = key === 'null' ? '' : `-${key}`;
-
-    // We use css as a function, because of ts-styled-plugin error.
-    //
-    // Equivalent code:
-    // css`
-    //   ${options.property}: ${value};
-    // `
-
-    const styles = {
-      [`${name}${suffix}`]: css(['', ': ', ';'], options.property, value),
-    };
-
-    if (!options.responsive) {
-      return styles;
-    }
-
-    return {
-      ...styles,
-      ...each(GRID_BREAKPOINTS, (breakpoint) => {
-        if (breakpoint === 'xs') {
-          return {};
-        }
-
-        // We use css as a function, because of ts-styled-plugin error.
-        //
-        // Equivalent code:
-        // css`
-        //   @include media-breakpoint-up(${breakpoint}) {
-        //     ${options.property}: ${value};
-        //   }
-        // `
-
-        return {
-          [`${name}-${breakpoint}${suffix}`]: css(
-            ['@include media-breakpoint-up(', ') {\n', ': ', ';\n}'],
-            breakpoint,
-            options.property,
-            value,
-          ),
-        };
-      }),
-    };
-  });
-}
-
-export default function makeUtilities(
-  resolve:
-    | Record<string, StyleUtility>
-    | ((u: Record<string, StyleUtility>) => Record<string, StyleUtility>),
-) {
-  const customUtilities =
-    typeof resolve === 'function' ? resolve(utilities) : resolve;
-
-  const definitions = Object.values({
-    ...utilities,
-    ...customUtilities,
-  }).reduce((result, utility) => {
-    if (!utility) {
-      return result;
-    }
-
-    return Object.assign(result, makeUtility(utility));
-  }, {});
-
-  return definitions;
-}
+import css from './css';
+import { GRID_BREAKPOINTS } from '../theme/proxies';
+import utilities from '../theme/utilities';
+import { each } from '../utils';
+import type { ExtendedStyle, StyleUtility } from '../types';
+
+export function makeUtility(options: StyleUtility) {
+  return each(options.values, (key, value) => {
+    const name = options.class || options.property;
+    const suffix = key === 'null' ? '' : `-${key}`;
+
+    // We use css as a function, because of ts-styled-plugin error.
+    //
+    // Equivalent code:
+    // css`
+    //   ${options.property}: ${value};
+    // `
+
+    const styles = {
+      [`${name}${suffix}`]: css(['', ': ', ';'], options.property, value),
+    };
+
+    if (!options.responsive) {
+      return styles;
+    }
+
+    return {
+      ...styles,
+      ...each(GRID_BREAKPOINTS, (breakpoint) => {
+        if (breakpoint === 'xs') {
+          return {};
+        }
+
+        // We use css as a function, because of ts-styled-plugin error.
+        //
+        // Equivalent code:
+        // css`
+        //   @include media-breakpoint-up(${breakpoint}) {
+        //     ${options.property}: ${value};
+        //   }
+        // `
+
+        return {
+          [`${name}-${breakpoint}${suffix}`]: css(
+            ['@include media-breakpoint-up(', ') {\n', ': ', ';\n}'],
+            breakpoint,
+            options.property,
+            value,
+          ),
+        };
+      }),
+    };
+  });
+}
+
+export default function makeUtilities<T extends string>(
+  resolve:
+    | { [K in T]: StyleUtility }
+    | ((u: Record<string, StyleUtility>) => { [K in T]: StyleUtility }),
+) {
+  const customUtilities =
+    typeof resolve === 'function' ? resolve(utilities) : resolve;
+
+  const definitions = Object.values({
+    ...utilities,
+    ...customUtilities,
+  }).reduce(
+    (result, utility) => {
+      if (!utility) {
+        return result;
+      }
+
+      return Object.assign(result, makeUtility(utility));
+    },
+    {} as { [K in T]: ExtendedStyle },
+  );
+
+  return definitions;
+}