bootstrap-rn 0.3.2 → 0.3.4

package/src/components/type/{Paragraph.js → Paragraph.tsx}

@@ -1,46 +1,42 @@
-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 Text from '../Text';
-import { getStyles } from '../../utils';
-
-const propTypes = {
-  children: PropTypes.node.isRequired,
-  lead: PropTypes.bool,
-  // eslint-disable-next-line react/forbid-prop-types
-  style: PropTypes.any,
-};
-
-const styles = StyleSheet.create({
-  paragraph: css`
-    margin-top: 0;
-    margin-bottom: $paragraph-margin-bottom;
-  `,
-  '.lead': css`
-    font-size: $lead-font-size;
-    line-height: $lead-font-size * $line-height-base; // added for bootstrap-rn
-    font-weight: $lead-font-weight;
-  `,
-});
-
-const Heading = React.forwardRef((props, ref) => {
-  const { children, lead, style, ...elementProps } = props;
-
-  const classes = getStyles(styles, ['paragraph', lead && '.lead']);
-
-  // Accessiblity role paragraph is only supported on web.
-  const role = Platform.OS === 'web' ? 'paragraph' : null;
-
-  return (
-    <Text {...elementProps} ref={ref} role={role} style={[classes, style]}>
-      {children}
-    </Text>
-  );
-});
-
-Heading.displayName = 'Heading';
-Heading.propTypes = propTypes;
-
-export default Heading;
+import React from 'react';
+import { Platform } from 'react-native';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import Text, { TextProps, TextRef } from '../Text';
+import { getStyles } from '../../utils';
+
+export interface ParagraphProps extends TextProps {
+  lead?: boolean;
+}
+
+const styles = StyleSheet.create({
+  paragraph: css`
+    margin-top: 0;
+    margin-bottom: $paragraph-margin-bottom;
+  `,
+  '.lead': css`
+    font-size: $lead-font-size;
+    line-height: $lead-font-size * $line-height-base; // added for bootstrap-rn
+    font-weight: $lead-font-weight;
+  `,
+});
+
+const Heading = React.forwardRef<TextRef, ParagraphProps>((props, ref) => {
+  const { children, lead, style, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['paragraph', lead && '.lead']);
+
+  // Accessiblity role paragraph is only supported on web.
+  const role = Platform.OS === 'web' ? 'paragraph' : undefined;
+
+  return (
+    // @ts-expect-error web only role
+    <Text {...elementProps} ref={ref} role={role} style={[classes, style]}>
+      {children}
+    </Text>
+  );
+});
+
+Heading.displayName = 'Heading';
+
+export default Heading;

package/src/hooks/useAction.ts

@@ -0,0 +1,78 @@
+import type { UseToggleButtonProps } from '../components/buttons/useToggleButton';
+import type { UseToggleCollapseProps } from '../components/collapse/useToggleCollapse';
+import type { UseDismissDropdownProps } from '../components/dropdown/useDismissDropdown';
+import type { UseToggleDropdownProps } from '../components/dropdown/useToggleDropdown';
+import type { UseToggleTabProps } from '../components/nav/useToggleTab';
+import type { UseDismissNavbarProps } from '../components/navbar/useDismissNavbar';
+import type { UseToggleNavbarProps } from '../components/navbar/useToggleNavbar';
+import { concatRefs } from '../utils';
+
+interface UseToggleProps
+  extends UseToggleTabProps,
+    UseToggleNavbarProps,
+    UseToggleButtonProps,
+    UseToggleCollapseProps,
+    UseToggleDropdownProps {}
+
+interface UseDismissProps
+  extends UseDismissDropdownProps,
+    UseDismissNavbarProps {}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type ToggleFunction = <T>(props: T & UseToggleProps) => any;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type DismissFunction = <T>(props: T & UseDismissProps) => any;
+
+type ToggleType =
+  | ToggleFunction
+  | {
+      useToggle: ToggleFunction;
+    };
+
+type DismissType =
+  | DismissFunction
+  | {
+      useDismiss: DismissFunction;
+    };
+
+export interface UseActionProps extends UseToggleProps, UseDismissProps {
+  toggle?: ToggleType;
+  dismiss?: DismissType;
+}
+
+function getActionHook(toggle?: ToggleType, dismiss?: DismissType) {
+  if (toggle) {
+    return typeof toggle === 'function' ? toggle : toggle.useToggle;
+  }
+
+  if (dismiss) {
+    return typeof dismiss === 'function' ? dismiss : dismiss.useDismiss;
+  }
+
+  return null;
+}
+
+export default function useAction<T, P>(
+  props: UseActionProps & P,
+  ref: React.LegacyRef<T>,
+) {
+  const { toggle, dismiss, ...restProps } = props;
+
+  const useActionHook = getActionHook(toggle, dismiss);
+
+  if (!useActionHook) {
+    return [restProps, ref] as const;
+  }
+
+  if (typeof useActionHook !== 'function') {
+    throw new Error('Action hook must be of type function.');
+  }
+
+  // TODO: Remove as and define return type on ActionFunction
+  const { ref: actionRef, ...actionProps } = useActionHook(restProps) as P & {
+    ref?: React.LegacyRef<T>;
+  };
+
+  return [actionProps, actionRef ? concatRefs(actionRef, ref) : ref] as const;
+}

package/src/hooks/{useBackground.native.js → useBackground.native.tsx}

@@ -1,191 +1,202 @@
-import React from 'react';
-import { I18nManager, StyleSheet, View } from 'react-native';
-import { SvgXml } from 'react-native-svg';
-
-// The assumed background styles are typed as followed:
-//
-// type Position = 'center' | 'left' | 'right' | 'top' | 'bottom';
-// type PositionX = 'center' | 'left' | 'right';
-// type PositionY = 'center' | 'top' | 'bottom';
-//
-// type BackgroundStyles = {
-//   backgroundImage: string,
-//   backgroundSize: 'contain' | 'cover' | string | number,
-//   backgroundPosition: Position,
-//   backgroundPositionX:
-//     | PositionX
-//     | { position: PositionX, offset: string | number },
-//   backgroundPositionY:
-//     | PositionY
-//     | { position: PositionY, offset: string | number },
-// };
-
-const styles = StyleSheet.create({
-  container: { overflow: 'hidden' },
-  object: { aspectRatio: 1 },
-});
-
-const horizontalPositions = {
-  left: (offset = 0) => ({
-    alignItems: I18nManager.isRTL ? 'flex-end' : 'flex-start',
-    paddingLeft: offset,
-  }),
-  right: (offset = 0) => ({
-    alignItems: I18nManager.isRTL ? 'flex-start' : 'flex-end',
-    paddingRight: offset,
-  }),
-  center: (offset) => {
-    if (offset !== undefined) {
-      return null;
-    }
-
-    return {
-      alignItems: 'center',
-    };
-  },
-};
-
-const verticalPositions = {
-  top: (offset = 0) => ({
-    justifyContent: 'flex-start',
-    paddingTop: offset,
-  }),
-  bottom: (offset = 0) => ({
-    justifyContent: 'flex-end',
-    paddingBottom: offset,
-  }),
-  center: (offset) => {
-    if (offset !== undefined) {
-      return null;
-    }
-
-    return {
-      justifyContent: 'center',
-    };
-  },
-};
-
-const getXml = (value) => {
-  const match = value.match(/^url\("data:image\/svg\+xml,(.*?)"\)$/);
-
-  if (!match) {
-    return null;
-  }
-
-  return decodeURIComponent(match[1]);
-};
-
-const transforms = {
-  backgroundSize(value) {
-    if (value === 'cover') {
-      return {
-        width: '100%',
-        // TODO: Support cover for views with height > width.
-        // height: '100%',
-      };
-    }
-
-    if (value === 'contain') {
-      return {
-        width: '100%',
-        height: '100%',
-      };
-    }
-
-    const { width, height = width } = value;
-
-    return {
-      width,
-      height,
-    };
-  },
-  backgroundPosition(value) {
-    if (value === 'center') {
-      return {
-        alignItems: 'center',
-        justifyContent: 'center',
-      };
-    }
-
-    if (horizontalPositions[value]) {
-      return {
-        ...horizontalPositions[value](),
-        justifyContent: 'center',
-      };
-    }
-
-    if (verticalPositions[value]) {
-      return {
-        alignItems: 'center',
-        ...verticalPositions[value](),
-      };
-    }
-
-    return null;
-  },
-  backgroundPositionX(value) {
-    const { position = 'left', offset } =
-      typeof value === 'object' ? value : { position: value };
-
-    if (!horizontalPositions[position]) {
-      return null;
-    }
-
-    return horizontalPositions[position](offset);
-  },
-  backgroundPositionY(value) {
-    const { position = 'top', offset } =
-      typeof value === 'object' ? value : { position: value };
-
-    if (!verticalPositions[position]) {
-      return null;
-    }
-
-    return verticalPositions[position](offset);
-  },
-};
-
-export default function useBackground(style) {
-  const flattenedStyle = StyleSheet.flatten(style);
-
-  const background = {
-    containerStyle: {},
-    objectStyle: {},
-    xml: null,
-  };
-
-  Object.entries(flattenedStyle).forEach(([key, value]) => {
-    if (!value) {
-      return;
-    }
-
-    if (key === 'backgroundImage') {
-      background.xml = getXml(value);
-    } else if (key === 'backgroundSize') {
-      Object.assign(background.objectStyle, transforms[key](value));
-    } else if (
-      key === 'backgroundPosition' ||
-      key === 'backgroundPositionX' ||
-      key === 'backgroundPositionY'
-    ) {
-      Object.assign(background.containerStyle, transforms[key](value));
-    }
-  });
-
-  return {
-    style: flattenedStyle,
-    element: (
-      <View
-        style={[
-          StyleSheet.absoluteFill,
-          styles.container,
-          background.containerStyle,
-        ]}
-      >
-        <View style={[styles.object, background.objectStyle]}>
-          {background.xml && <SvgXml xml={background.xml} />}
-        </View>
-      </View>
-    ),
-  };
-}
+import React from 'react';
+import { I18nManager, StyleSheet, View } from 'react-native';
+import { SvgXml } from 'react-native-svg';
+import type { BaseStyle, PlacementAxis } from '../types';
+
+type BackgroundSize = 'cover' | 'contain' | { width: number; height: number };
+
+type BackgroundResult = {
+  containerStyle: BaseStyle;
+  objectStyle: BaseStyle;
+  xml: string | null;
+};
+
+const styles = StyleSheet.create({
+  container: { overflow: 'hidden' },
+  object: { aspectRatio: 1 },
+});
+
+const horizontalPositions = {
+  left: (offset: number = 0) => ({
+    alignItems: I18nManager.isRTL ? 'flex-end' : 'flex-start',
+    paddingLeft: offset,
+  }),
+  right: (offset: number = 0) => ({
+    alignItems: I18nManager.isRTL ? 'flex-start' : 'flex-end',
+    paddingRight: offset,
+  }),
+  center: (offset?: number) => {
+    if (offset !== undefined) {
+      return null;
+    }
+
+    return {
+      alignItems: 'center',
+    };
+  },
+  top: undefined,
+  bottom: undefined,
+};
+
+const verticalPositions = {
+  top: (offset: number = 0) => ({
+    justifyContent: 'flex-start',
+    paddingTop: offset,
+  }),
+  bottom: (offset: number = 0) => ({
+    justifyContent: 'flex-end',
+    paddingBottom: offset,
+  }),
+  center: (offset?: number) => {
+    if (offset !== undefined) {
+      return null;
+    }
+
+    return {
+      justifyContent: 'center',
+    };
+  },
+  left: undefined,
+  right: undefined,
+};
+
+const getXml = (value: string) => {
+  const match = value.match(/^url\("data:image\/svg\+xml,(.*?)"\)$/);
+
+  if (!match) {
+    return null;
+  }
+
+  return decodeURIComponent(match[1]);
+};
+
+const transforms = {
+  backgroundSize(value: BackgroundSize) {
+    if (value === 'cover') {
+      return {
+        width: '100%',
+        // TODO: Support cover for views with height > width.
+        // height: '100%',
+      };
+    }
+
+    if (value === 'contain') {
+      return {
+        width: '100%',
+        height: '100%',
+      };
+    }
+
+    const { width, height = width } = value;
+
+    return {
+      width,
+      height,
+    };
+  },
+  backgroundPosition(value: PlacementAxis) {
+    if (value === 'center') {
+      return {
+        alignItems: 'center',
+        justifyContent: 'center',
+      };
+    }
+
+    const horizontalPosition = horizontalPositions[value];
+
+    if (horizontalPosition !== undefined) {
+      return {
+        ...horizontalPosition(),
+        justifyContent: 'center',
+      };
+    }
+
+    const verticalPosition = verticalPositions[value];
+
+    if (verticalPosition) {
+      return {
+        alignItems: 'center',
+        ...verticalPosition(),
+      };
+    }
+
+    return null;
+  },
+  backgroundPositionX(
+    value: PlacementAxis | { position: PlacementAxis; offset: number },
+  ) {
+    const { position = 'left', offset } =
+      typeof value === 'object'
+        ? value
+        : { position: value, offset: undefined };
+
+    const horizontalPosition = horizontalPositions[position];
+
+    if (!horizontalPosition) {
+      return null;
+    }
+
+    return horizontalPosition(offset);
+  },
+  backgroundPositionY(
+    value: PlacementAxis | { position: PlacementAxis; offset: number },
+  ) {
+    const { position = 'top', offset } =
+      typeof value === 'object'
+        ? value
+        : { position: value, offset: undefined };
+
+    const verticalPosition = horizontalPositions[position];
+
+    if (!verticalPosition) {
+      return null;
+    }
+
+    return verticalPosition(offset);
+  },
+};
+
+export default function useBackground(style: BaseStyle[]) {
+  const flattenedStyle = StyleSheet.flatten(style);
+
+  const background: BackgroundResult = {
+    containerStyle: {},
+    objectStyle: {},
+    xml: null,
+  };
+
+  Object.entries(flattenedStyle).forEach(([key, value]) => {
+    if (!value) {
+      return;
+    }
+
+    if (key === 'backgroundImage') {
+      background.xml = getXml(value);
+    } else if (key === 'backgroundSize') {
+      Object.assign(background.objectStyle, transforms[key](value));
+    } else if (
+      key === 'backgroundPosition' ||
+      key === 'backgroundPositionX' ||
+      key === 'backgroundPositionY'
+    ) {
+      Object.assign(background.containerStyle, transforms[key](value));
+    }
+  });
+
+  return {
+    style: flattenedStyle,
+    element: (
+      <View
+        style={[
+          StyleSheet.absoluteFill,
+          styles.container,
+          background.containerStyle,
+        ]}
+      >
+        <View style={[styles.object, background.objectStyle]}>
+          {background.xml && <SvgXml xml={background.xml} />}
+        </View>
+      </View>
+    ),
+  };
+}