bootstrap-rn 0.3.3 → 0.3.4

package/src/components/spinners/{Spinner.js → Spinner.tsx}

@@ -1,155 +1,156 @@
-import React, { useMemo, useEffect } from 'react';
-import { Animated, Easing, Platform } from 'react-native';
-import PropTypes from 'prop-types';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import View from '../View';
-import { THEME_COLORS } from '../../theme/proxies';
-import { getStyles, each } from '../../utils';
-
-const propTypes = {
-  variant: PropTypes.oneOf(['border', 'grow']),
-  color: PropTypes.oneOf(Object.keys(THEME_COLORS)),
-  size: PropTypes.oneOf(['sm']),
-  // eslint-disable-next-line react/forbid-prop-types
-  style: PropTypes.any,
-};
-
-const styles = StyleSheet.create({
-  '.spinner-border': css`
-    // display: inline-block;
-    width: $spinner-width;
-    height: $spinner-height;
-    // vertical-align: $spinner-vertical-align;
-    border-width: $spinner-border-width;
-    border-style: solid;
-    border-top-color: $body-color;
-    border-bottom-color: $body-color;
-    border-left-color: $body-color;
-    // workaround for issue https://github.com/facebook/react-native/issues/34722
-    border-right-color: rgba(0, 0, 0, 0.01); // transparent;
-    border-radius: $spinner-width * 50%;
-    // animation: $spinner-animation-speed linear infinite spinner-border;
-  `,
-  ...each(THEME_COLORS, (color, value) => ({
-    [`.spinner-border-${color}`]: css`
-      border-top-color: ${value};
-      border-bottom-color: ${value};
-      border-left-color: ${value};
-    `,
-  })),
-  '.spinner-border-sm': css`
-    width: $spinner-width-sm;
-    height: $spinner-height-sm;
-    border-width: $spinner-border-width-sm;
-  `,
-  '.spinner-grow': css`
-    // display: inline-block;
-    width: $spinner-width;
-    height: $spinner-height;
-    // vertical-align: $spinner-vertical-align;
-    background-color: $body-color;
-    border-radius: $spinner-width * 50%;
-    opacity: 0;
-    // animation: $spinner-animation-speed linear infinite spinner-grow;
-  `,
-  ...each(THEME_COLORS, (color, value) => ({
-    [`.spinner-grow-${color}`]: css`
-      background-color: ${value};
-    `,
-  })),
-  '.spinner-grow-sm': css`
-    width: $spinner-width-sm;
-    height: $spinner-height-sm;
-  `,
-});
-
-const AnimatedView = Animated.createAnimatedComponent(View);
-
-const getAnimationStyle = (variant, animation) => {
-  switch (variant) {
-    case 'border':
-      return {
-        transform:
-          Platform.OS === 'web'
-            ? animation.interpolate({
-                inputRange: [0, 1],
-                outputRange: ['rotate(0deg)', 'rotate(360deg)'],
-              })
-            : [
-                {
-                  rotate: animation.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: ['0deg', '360deg'],
-                  }),
-                },
-              ],
-      };
-    case 'grow':
-      return {
-        transform:
-          Platform.OS === 'web'
-            ? animation.interpolate({
-                inputRange: [0, 0.5, 1],
-                outputRange: ['scale(0)', 'scale(1)', 'scale(1)'],
-              })
-            : [
-                {
-                  scale: animation.interpolate({
-                    inputRange: [0, 0.5, 1],
-                    outputRange: [0, 1, 1],
-                  }),
-                },
-              ],
-        opacity: animation.interpolate({
-          inputRange: [0, 0.5, 1],
-          outputRange: [0, 1, 0],
-        }),
-      };
-    default:
-      throw new Error('Unknown spinner variant.');
-  }
-};
-
-const Spinner = React.forwardRef((props, ref) => {
-  const { variant = 'border', color, size, style, ...elementProps } = props;
-
-  const classes = getStyles(styles, [
-    `.spinner-${variant}`,
-    color && `.spinner-${variant}-${color}`,
-    size === 'sm' && `.spinner-${variant}-sm`,
-  ]);
-
-  const role = Platform.OS === 'web' ? 'status' : null;
-
-  const animation = useMemo(() => new Animated.Value(0), []);
-
-  useEffect(() => {
-    const duration =
-      parseFloat(StyleSheet.value('spinner-animation-speed')) * 1000;
-
-    Animated.loop(
-      Animated.timing(animation, {
-        toValue: 1,
-        duration,
-        easing: Easing.linear,
-        useNativeDriver: Platform.OS !== 'web',
-      }),
-    ).start();
-  }, []);
-
-  return (
-    <AnimatedView
-      {...elementProps}
-      ref={ref}
-      role={role}
-      aria-hidden
-      style={[classes, getAnimationStyle(variant, animation), style]}
-    />
-  );
-});
-
-Spinner.displayName = 'Spinner';
-Spinner.propTypes = propTypes;
-
-export default Spinner;
+import React, { useMemo, useEffect } from 'react';
+import { Animated, Easing, Platform } from 'react-native';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import View, { ViewProps, ViewRef } from '../View';
+import { THEME_COLORS } from '../../theme/proxies';
+import { getStyles, each } from '../../utils';
+
+type SpinnerVariant = 'border' | 'grow';
+
+export interface SpinnerProps extends ViewProps {
+  variant?: SpinnerVariant;
+  color?: keyof typeof THEME_COLORS;
+  size?: 'sm';
+}
+
+const styles = StyleSheet.create({
+  '.spinner-border': css`
+    // display: inline-block;
+    width: $spinner-width;
+    height: $spinner-height;
+    // vertical-align: $spinner-vertical-align;
+    border-width: $spinner-border-width;
+    border-style: solid;
+    border-top-color: $body-color;
+    border-bottom-color: $body-color;
+    border-left-color: $body-color;
+    // workaround for issue https://github.com/facebook/react-native/issues/34722
+    border-right-color: rgba(0, 0, 0, 0.01); // transparent;
+    border-radius: $spinner-width * 50%;
+    // animation: $spinner-animation-speed linear infinite spinner-border;
+  `,
+  ...each(THEME_COLORS, (color, value) => ({
+    [`.spinner-border-${color}`]: css`
+      border-top-color: ${value};
+      border-bottom-color: ${value};
+      border-left-color: ${value};
+    `,
+  })),
+  '.spinner-border-sm': css`
+    width: $spinner-width-sm;
+    height: $spinner-height-sm;
+    border-width: $spinner-border-width-sm;
+  `,
+  '.spinner-grow': css`
+    // display: inline-block;
+    width: $spinner-width;
+    height: $spinner-height;
+    // vertical-align: $spinner-vertical-align;
+    background-color: $body-color;
+    border-radius: $spinner-width * 50%;
+    opacity: 0;
+    // animation: $spinner-animation-speed linear infinite spinner-grow;
+  `,
+  ...each(THEME_COLORS, (color, value) => ({
+    [`.spinner-grow-${color}`]: css`
+      background-color: ${value};
+    `,
+  })),
+  '.spinner-grow-sm': css`
+    width: $spinner-width-sm;
+    height: $spinner-height-sm;
+  `,
+});
+
+const AnimatedView = Animated.createAnimatedComponent(View);
+
+const getAnimationStyle = (
+  variant: SpinnerVariant,
+  animation: Animated.Value,
+) => {
+  switch (variant) {
+    case 'border':
+      return {
+        transform:
+          Platform.OS === 'web'
+            ? animation.interpolate({
+                inputRange: [0, 1],
+                outputRange: ['rotate(0deg)', 'rotate(360deg)'],
+              })
+            : [
+                {
+                  rotate: animation.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: ['0deg', '360deg'],
+                  }),
+                },
+              ],
+      };
+    case 'grow':
+      return {
+        transform:
+          Platform.OS === 'web'
+            ? animation.interpolate({
+                inputRange: [0, 0.5, 1],
+                outputRange: ['scale(0)', 'scale(1)', 'scale(1)'],
+              })
+            : [
+                {
+                  scale: animation.interpolate({
+                    inputRange: [0, 0.5, 1],
+                    outputRange: [0, 1, 1],
+                  }),
+                },
+              ],
+        opacity: animation.interpolate({
+          inputRange: [0, 0.5, 1],
+          outputRange: [0, 1, 0],
+        }),
+      };
+    default:
+      throw new Error('Unknown spinner variant.');
+  }
+};
+
+const Spinner = React.forwardRef<ViewRef, SpinnerProps>((props, ref) => {
+  const { variant = 'border', color, size, style, ...elementProps } = props;
+
+  const classes = getStyles(styles, [
+    `.spinner-${variant}`,
+    color && `.spinner-${variant}-${color}`,
+    size === 'sm' && `.spinner-${variant}-sm`,
+  ]);
+
+  const role = Platform.OS === 'web' ? 'status' : undefined;
+
+  const animation = useMemo(() => new Animated.Value(0), []);
+
+  useEffect(() => {
+    const duration =
+      parseFloat(StyleSheet.value('spinner-animation-speed')) * 1000;
+
+    Animated.loop(
+      Animated.timing(animation, {
+        toValue: 1,
+        duration,
+        easing: Easing.linear,
+        useNativeDriver: Platform.OS !== 'web',
+      }),
+    ).start();
+  }, []);
+
+  return (
+    <AnimatedView
+      {...elementProps}
+      ref={ref}
+      role={role}
+      aria-hidden
+      style={[classes, getAnimationStyle(variant, animation), style]}
+    />
+  );
+});
+
+Spinner.displayName = 'Spinner';
+
+export default Spinner;

package/src/components/toasts/{Toast.js → Toast.tsx}

@@ -1,75 +1,67 @@
-import React, { useContext } 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 ToastHeader from './ToastHeader';
-import ToastBody from './ToastBody';
-import ToastContainerContext from './ToastContainerContext';
-import ListContext from '../helpers/ListContext';
-
-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({
-  '.toast': css`
-    width: $toast-max-width;
-    max-width: 100%;
-    pointer-events: auto;
-    background-color: $toast-background-color;
-    // background-clip: padding-box;
-    border: $toast-border-width solid $toast-border-color;
-    // box-shadow: $toast-box-shadow;
-    border-radius: $toast-border-radius;
-  `,
-  '.toast --text': css`
-    font-size: $toast-font-size;
-    line-height: $toast-font-size * $line-height-base; // added for bootstrap-rn
-    color: $toast-color;
-  `,
-  '.toast-container > :not(:last-child)': css`
-    margin-bottom: $toast-spacing;
-  `,
-});
-
-const Toast = React.forwardRef((props, ref) => {
-  const { children, style, textStyle, ...elementProps } = props;
-
-  const listItem = useContext(ListContext);
-  const container = useContext(ToastContainerContext);
-
-  const classes = getStyles(styles, [
-    '.toast',
-    container && !listItem.last && '.toast-container > :not(:last-child)',
-  ]);
-
-  const textClasses = getStyles(styles, ['.toast --text']);
-
-  return (
-    <View
-      {...elementProps}
-      ref={ref}
-      role="alert"
-      aria-live="assertive"
-      aria-atomic
-      style={[classes, style]}
-      textStyle={[textClasses, textStyle]}
-    >
-      {children}
-    </View>
-  );
-});
-
-Toast.displayName = 'Toast';
-Toast.propTypes = propTypes;
-
-Toast.Header = ToastHeader;
-Toast.Body = ToastBody;
-
-export default Toast;
+import React, { useContext } from 'react';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import View, { ViewProps, ViewRef } from '../View';
+import { getStyles } from '../../utils';
+import ToastHeader from './ToastHeader';
+import ToastBody from './ToastBody';
+import ToastContainerContext from './ToastContainerContext';
+import ListContext from '../helpers/ListContext';
+
+export interface ToastProps extends ViewProps {}
+
+const styles = StyleSheet.create({
+  '.toast': css`
+    width: $toast-max-width;
+    max-width: 100%;
+    pointer-events: auto;
+    background-color: $toast-background-color;
+    // background-clip: padding-box;
+    border: $toast-border-width solid $toast-border-color;
+    // box-shadow: $toast-box-shadow;
+    border-radius: $toast-border-radius;
+  `,
+  '.toast --text': css`
+    font-size: $toast-font-size;
+    line-height: $toast-font-size * $line-height-base; // added for bootstrap-rn
+    color: $toast-color;
+  `,
+  '.toast-container > :not(:last-child)': css`
+    margin-bottom: $toast-spacing;
+  `,
+});
+
+const Toast = React.forwardRef<ViewRef, ToastProps>((props, ref) => {
+  const { children, style, textStyle, ...elementProps } = props;
+
+  const listItem = useContext(ListContext);
+  const container = useContext(ToastContainerContext);
+
+  const classes = getStyles(styles, [
+    '.toast',
+    container && !listItem?.last && '.toast-container > :not(:last-child)',
+  ]);
+
+  const textClasses = getStyles(styles, ['.toast --text']);
+
+  return (
+    <View
+      {...elementProps}
+      ref={ref}
+      role="alert"
+      aria-live="assertive"
+      aria-atomic
+      style={[classes, style]}
+      textStyle={[textClasses, textStyle]}
+    >
+      {children}
+    </View>
+  );
+});
+
+Toast.displayName = 'Toast';
+
+export default Object.assign(Toast, {
+  Header: ToastHeader,
+  Body: ToastBody,
+});

package/src/components/toasts/{ToastBody.js → ToastBody.tsx}

@@ -1,17 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import StyleSheet from '../../style/StyleSheet';
 import css from '../../style/css';
-import View from '../View';
+import View, { ViewProps, ViewRef } from '../View';
 import { getStyles } from '../../utils';
 
-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,
-};
+export interface ToastBodyProps extends ViewProps {}
 
 const styles = StyleSheet.create({
   '.toast-body': css`
@@ -24,7 +17,7 @@ const styles = StyleSheet.create({
   `,
 });
 
-const ToastBody = React.forwardRef((props, ref) => {
+const ToastBody = React.forwardRef<ViewRef, ToastBodyProps>((props, ref) => {
   const { children, style, textStyle, ...elementProps } = props;
 
   const classes = getStyles(styles, ['.toast-body']);
@@ -44,6 +37,5 @@ const ToastBody = React.forwardRef((props, ref) => {
 });
 
 ToastBody.displayName = 'ToastBody';
-ToastBody.propTypes = propTypes;
 
 export default ToastBody;

package/src/components/toasts/ToastContainer.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import View, { ViewProps, ViewRef } from '../View';
+import { getStyles } from '../../utils';
+import ToastContainerContext from './ToastContainerContext';
+import useList from '../../hooks/useList';
+
+export interface ToastContainerProps extends ViewProps {}
+
+const styles = StyleSheet.create({
+  '.toast-container': css`
+    width: 100%; // max-content;
+    max-width: 100%;
+    pointer-events: none;
+  `,
+});
+
+const ToastContainer = React.forwardRef<ViewRef, ToastContainerProps>(
+  (props, ref) => {
+    const { children, style, ...elementProps } = props;
+
+    const list = useList(children);
+
+    const classes = getStyles(styles, ['.toast-container']);
+
+    return (
+      <View {...elementProps} ref={ref} style={[classes, style]}>
+        <ToastContainerContext.Provider value>
+          {list}
+        </ToastContainerContext.Provider>
+      </View>
+    );
+  },
+);
+
+ToastContainer.displayName = 'ToastContainer';
+
+export default ToastContainer;

package/src/components/toasts/ToastContainerContext.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+
+type ToastContainerContextType = true;
+
+const ToastContainerContext =
+  React.createContext<ToastContainerContextType | null>(null);
+
+ToastContainerContext.displayName = 'ToastContainerContext';
+
+export default ToastContainerContext;

package/src/components/toasts/ToastHeader.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import View, { ViewProps, ViewRef } from '../View';
+import { subtract } from '../../theme/functions';
+import { getStyles } from '../../utils';
+import type { ThemeVariables } from '../../types';
+
+export interface ToastHeaderProps extends ViewProps {}
+
+const styles = StyleSheet.create({
+  '.toast-header': css`
+    display: flex;
+    flex-direction: row; // added for bootstrap-rn
+    align-items: center;
+    padding: $toast-padding-y $toast-padding-x;
+    background-color: $toast-header-background-color;
+    // background-clip: padding-box;
+    border-bottom-width: $toast-border-width;
+    border-style: solid;
+    border-color: $toast-header-border-color;
+    border-top-left-radius: ${subtract(
+      (t: ThemeVariables) => t['toast-border-radius'],
+      (t: ThemeVariables) => t['toast-border-width'],
+    )};
+    border-top-right-radius: ${subtract(
+      (t: ThemeVariables) => t['toast-border-radius'],
+      (t: ThemeVariables) => t['toast-border-width'],
+    )};
+  `,
+  '.toast-header --text': css`
+    color: $toast-header-color;
+  `,
+});
+
+const ToastHeader = React.forwardRef<ViewRef, ToastHeaderProps>(
+  (props, ref) => {
+    const { children, style, textStyle, ...elementProps } = props;
+
+    const classes = getStyles(styles, ['.toast-header']);
+
+    const textClasses = getStyles(styles, ['.toast-header --text']);
+
+    return (
+      <View
+        {...elementProps}
+        ref={ref}
+        style={[classes, style]}
+        textStyle={[textClasses, textStyle]}
+      >
+        {children}
+      </View>
+    );
+  },
+);
+
+ToastHeader.displayName = 'ToastHeader';
+
+export default ToastHeader;