bootstrap-rn 0.3.2 → 0.3.4

package/src/components/popover/{Popover.js → Popover.tsx}

@@ -1,94 +1,90 @@
-import React from 'react';
-import { Platform } from 'react-native';
-import PropTypes from 'prop-types';
-import StyleSheet from '../../style/StyleSheet';
-import { getStyles, transformPlacement } from '../../utils';
-import css from '../../style/css';
-import View from '../View';
-import PopoverArrow from './PopoverArrow';
-import PopoverHeader from './PopoverHeader';
-import PopoverBody from './PopoverBody';
-import PopoverContext from './PopoverContext';
-
-const propTypes = {
-  children: PropTypes.node.isRequired,
-  placement: PropTypes.string,
-  popper: 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
-  arrowStyle: PropTypes.any,
-};
-
-const styles = StyleSheet.create({
-  '.popover': css`
-    position: absolute;
-    // top: 0;
-    // left: 0 #{"/* rtl:ignore */"};
-    z-index: $zindex-popover;
-    // display: block;
-    max-width: $popover-max-width;
-    background-color: $popover-bg;
-    // background-clip: padding-box;
-    border: $popover-border-width solid $popover-border-color;
-    border-radius: $popover-border-radius;
-    // @include box-shadow($popover-box-shadow);
-  `,
-  '.popover --text': css`
-    // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
-    // So reset our font and text properties to avoid inheriting weird values.
-    // @include reset-text();
-    font-size: $popover-font-size;
-    // Allow breaking very long words so they don't overflow the popover's bounds
-    // word-wrap: break-word;
-  `,
-});
-
-const Popover = React.forwardRef((props, ref) => {
-  const {
-    children,
-    placement = 'right',
-    popper,
-    style,
-    textStyle,
-    arrowStyle,
-    ...elementProps
-  } = props;
-
-  const popover = {
-    placement: transformPlacement(placement),
-    arrowStyle,
-    popper,
-  };
-
-  const classes = getStyles(styles, ['.popover']);
-  const textClasses = getStyles(styles, ['.popover --text']);
-
-  // Accessiblity role tooltip is only supported on web.
-  const role = Platform.OS === 'web' ? 'tooltip' : null;
-
-  return (
-    <View
-      {...elementProps}
-      ref={ref}
-      role={role}
-      style={[classes, style]}
-      textStyle={[textClasses, textStyle]}
-    >
-      <PopoverContext.Provider value={popover}>
-        {children}
-      </PopoverContext.Provider>
-    </View>
-  );
-});
-
-Popover.displayName = 'Popover';
-Popover.propTypes = propTypes;
-
-Popover.Arrow = PopoverArrow;
-Popover.Header = PopoverHeader;
-Popover.Body = PopoverBody;
-
-export default Popover;
+import React, { useMemo } from 'react';
+import { Platform } from 'react-native';
+import StyleSheet from '../../style/StyleSheet';
+import { getStyles, transformPlacement } from '../../utils';
+import css from '../../style/css';
+import View, { ViewProps, ViewRef } from '../View';
+import PopoverArrow from './PopoverArrow';
+import PopoverHeader from './PopoverHeader';
+import PopoverBody from './PopoverBody';
+import PopoverContext from './PopoverContext';
+import { ExtendedViewStyle, StyleProp, PlacementAxis } from '../../types';
+
+export interface PopoverProps extends ViewProps {
+  placement?: PlacementAxis;
+  popper?: boolean;
+  arrowStyle?: StyleProp<ExtendedViewStyle>;
+}
+
+const styles = StyleSheet.create({
+  '.popover': css`
+    position: absolute;
+    // top: 0;
+    // left: 0 #{"/* rtl:ignore */"};
+    z-index: $zindex-popover;
+    // display: block;
+    max-width: $popover-max-width;
+    background-color: $popover-bg;
+    // background-clip: padding-box;
+    border: $popover-border-width solid $popover-border-color;
+    border-radius: $popover-border-radius;
+    // @include box-shadow($popover-box-shadow);
+  `,
+  '.popover --text': css`
+    // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
+    // So reset our font and text properties to avoid inheriting weird values.
+    // @include reset-text();
+    font-size: $popover-font-size;
+    // Allow breaking very long words so they don't overflow the popover's bounds
+    // word-wrap: break-word;
+  `,
+});
+
+const Popover = React.forwardRef<ViewRef, PopoverProps>((props, ref) => {
+  const {
+    children,
+    placement = 'right',
+    popper,
+    style,
+    textStyle,
+    arrowStyle,
+    ...elementProps
+  } = props;
+
+  const popover = useMemo(
+    () => ({
+      placement: transformPlacement(placement),
+      arrowStyle,
+      popper,
+    }),
+    [arrowStyle],
+  );
+
+  const classes = getStyles(styles, ['.popover']);
+  const textClasses = getStyles(styles, ['.popover --text']);
+
+  // Accessiblity role tooltip is only supported on web.
+  const role = Platform.OS === 'web' ? 'tooltip' : undefined;
+
+  return (
+    <View
+      {...elementProps}
+      ref={ref}
+      role={role}
+      style={[classes, style]}
+      textStyle={[textClasses, textStyle]}
+    >
+      <PopoverContext.Provider value={popover}>
+        {children}
+      </PopoverContext.Provider>
+    </View>
+  );
+});
+
+Popover.displayName = 'Popover';
+
+export default Object.assign(Popover, {
+  Arrow: PopoverArrow,
+  Header: PopoverHeader,
+  Body: PopoverBody,
+});

package/src/components/popover/{PopoverArrow.js → PopoverArrow.tsx}

@@ -1,17 +1,14 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import View from '../View';
+import View, { ViewProps, ViewRef } from '../View';
 import { subtract } from '../../theme/functions';
 import StyleSheet from '../../style/StyleSheet';
 import { getStyles } from '../../utils';
 import css from '../../style/css';
 import useForcedContext from '../../hooks/useForcedContext';
 import PopoverContext from './PopoverContext';
+import type { ThemeVariables } from '../../types';
 
-const propTypes = {
-  // eslint-disable-next-line react/forbid-prop-types
-  style: PropTypes.any,
-};
+export interface PopoverArrowProps extends ViewProps {}
 
 const styles = StyleSheet.create({
   '.popover-arrow': css`
@@ -42,8 +39,8 @@ const styles = StyleSheet.create({
   `,
   '.bs-popover-top .popover-arrow': css`
     bottom: ${subtract(
-      (t) => `-${t['popover-arrow-height']}`,
-      (t) => t['popover-border-width'],
+      (t: ThemeVariables) => `-${t['popover-arrow-height']}`,
+      (t: ThemeVariables) => t['popover-border-width'],
     )};
   `,
   '.bs-popover-top .popover-arrow::before': css`
@@ -64,8 +61,8 @@ const styles = StyleSheet.create({
   `,
   '.bs-popover-end .popover-arrow': css`
     left: ${subtract(
-      (t) => `-${t['popover-arrow-height']}`,
-      (t) => t['popover-border-width'],
+      (t: ThemeVariables) => `-${t['popover-arrow-height']}`,
+      (t: ThemeVariables) => t['popover-border-width'],
     )};
     width: $popover-arrow-height;
     height: $popover-arrow-width;
@@ -88,8 +85,8 @@ const styles = StyleSheet.create({
   `,
   '.bs-popover-bottom .popover-arrow': css`
     top: ${subtract(
-      (t) => `-${t['popover-arrow-height']}`,
-      (t) => t['popover-border-width'],
+      (t: ThemeVariables) => `-${t['popover-arrow-height']}`,
+      (t: ThemeVariables) => t['popover-border-width'],
     )};
   `,
   '.bs-popover-bottom .popover-arrow::before': css`
@@ -110,8 +107,8 @@ const styles = StyleSheet.create({
   `,
   '.bs-popover-start .popover-arrow': css`
     right: ${subtract(
-      (t) => `-${t['popover-arrow-height']}`,
-      (t) => t['popover-border-width'],
+      (t: ThemeVariables) => `-${t['popover-arrow-height']}`,
+      (t: ThemeVariables) => t['popover-border-width'],
     )};
     width: $popover-arrow-height;
     height: $popover-arrow-width;
@@ -134,33 +131,34 @@ const styles = StyleSheet.create({
   `,
 });
 
-const PopoverArrow = React.forwardRef((props, ref) => {
-  const { style, ...elementProps } = props;
+const PopoverArrow = React.forwardRef<ViewRef, PopoverArrowProps>(
+  (props, ref) => {
+    const { style, ...elementProps } = props;
 
-  const { placement, arrowStyle, popper } = useForcedContext(PopoverContext);
+    const { placement, arrowStyle, popper } = useForcedContext(PopoverContext);
 
-  const classes = getStyles(styles, [
-    '.popover-arrow',
-    popper && `.bs-popover-${placement} .popover-arrow`,
-  ]);
-  const beforeClasses = getStyles(styles, [
-    '.popover-arrow::before',
-    popper && `.bs-popover-${placement} .popover-arrow::before`,
-  ]);
-  const afterClasses = getStyles(styles, [
-    '.popover-arrow::after',
-    popper && `.bs-popover-${placement} .popover-arrow::after`,
-  ]);
+    const classes = getStyles(styles, [
+      '.popover-arrow',
+      popper && `.bs-popover-${placement} .popover-arrow`,
+    ]);
+    const beforeClasses = getStyles(styles, [
+      '.popover-arrow::before',
+      popper && `.bs-popover-${placement} .popover-arrow::before`,
+    ]);
+    const afterClasses = getStyles(styles, [
+      '.popover-arrow::after',
+      popper && `.bs-popover-${placement} .popover-arrow::after`,
+    ]);
 
-  return (
-    <View {...elementProps} ref={ref} style={[classes, arrowStyle, style]}>
-      <View style={beforeClasses} />
-      <View style={afterClasses} />
-    </View>
-  );
-});
+    return (
+      <View {...elementProps} ref={ref} style={[classes, arrowStyle, style]}>
+        <View style={beforeClasses} />
+        <View style={afterClasses} />
+      </View>
+    );
+  },
+);
 
 PopoverArrow.displayName = 'PopoverArrow';
-PopoverArrow.propTypes = propTypes;
 
 export default PopoverArrow;

package/src/components/popover/PopoverBody.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import View, { ViewProps, ViewRef } from '../View';
+import StyleSheet from '../../style/StyleSheet';
+import { getStyles } from '../../utils';
+import css from '../../style/css';
+
+export interface PopoverBodyProps extends ViewProps {}
+
+const styles = StyleSheet.create({
+  '.popover-body': css`
+    padding: $popover-body-padding-y $popover-body-padding-x;
+  `,
+  '.popover-body --text': css`
+    color: $popover-body-color;
+  `,
+});
+
+const PopoverBody = React.forwardRef<ViewRef, PopoverBodyProps>(
+  (props, ref) => {
+    const { children, style, textStyle, ...elementProps } = props;
+
+    const classes = getStyles(styles, ['.popover-body']);
+
+    const textClasses = getStyles(styles, ['.popover-body --text']);
+
+    return (
+      <View
+        {...elementProps}
+        ref={ref}
+        style={[classes, style]}
+        textStyle={[textClasses, textStyle]}
+      >
+        {children}
+      </View>
+    );
+  },
+);
+
+PopoverBody.displayName = 'PopoverBody';
+
+export default PopoverBody;

package/src/components/popover/PopoverContext.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import {
+  ExtendedViewStyle,
+  StyleProp,
+  TransformedPlacementAxis,
+} from '../../types';
+
+type PopoverContextType = {
+  placement: TransformedPlacementAxis;
+  popper?: boolean;
+  arrowStyle?: StyleProp<ExtendedViewStyle>;
+};
+
+const PopoverContext = React.createContext<PopoverContextType | null>(null);
+
+PopoverContext.displayName = 'PopoverContext';
+
+export default PopoverContext;

package/src/components/popover/{PopoverHeader.js → PopoverHeader.tsx}

@@ -1,18 +1,11 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import View from '../View';
+import View, { ViewProps, ViewRef } from '../View';
 import Heading from '../Heading';
 import StyleSheet from '../../style/StyleSheet';
 import { getStyles } from '../../utils';
 import css from '../../style/css';
 
-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 PopoverHeaderProps extends ViewProps {}
 
 const styles = StyleSheet.create({
   '.popover-header': css`
@@ -32,23 +25,24 @@ const styles = StyleSheet.create({
   `,
 });
 
-const PopoverHeader = React.forwardRef((props, ref) => {
-  const { children, style, textStyle, ...elementProps } = props;
+const PopoverHeader = React.forwardRef<ViewRef, PopoverHeaderProps>(
+  (props, ref) => {
+    const { children, style, textStyle, ...elementProps } = props;
 
-  const classes = getStyles(styles, ['.popover-header']);
-  const textClasses = getStyles(styles, ['.popover-header --text']);
+    const classes = getStyles(styles, ['.popover-header']);
+    const textClasses = getStyles(styles, ['.popover-header --text']);
 
-  // composite component
-  return (
-    <View {...elementProps} ref={ref} style={[classes, style]}>
-      <Heading size={3} style={[textClasses, textStyle]}>
-        {children}
-      </Heading>
-    </View>
-  );
-});
+    // composite component
+    return (
+      <View {...elementProps} ref={ref} style={[classes, style]}>
+        <Heading size={3} style={[textClasses, textStyle]}>
+          {children}
+        </Heading>
+      </View>
+    );
+  },
+);
 
 PopoverHeader.displayName = 'PopoverHeader';
-PopoverHeader.propTypes = propTypes;
 
 export default PopoverHeader;

package/src/components/popover/injectPopover.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { OverlayContainer } from '@react-native-aria/overlays';
+import Overlay from '../helpers/Overlay';
+import BackdropHandler from '../helpers/BackdropHandler';
+import useTrigger, { TriggerProps } from '../../hooks/useTrigger';
+import { normalizeNumber } from '../../style/math';
+import StyleSheet from '../../style/StyleSheet';
+import Popover from './Popover';
+import Pressable, { PressableProps } from '../Pressable';
+import type { ViewRef } from '../View';
+import type { Trigger, Axis } from '../../types';
+
+type PopoverProps = {
+  title?: React.ReactNode;
+  content: React.ReactNode;
+  autoClose?: boolean | 'inside' | 'outside';
+  trigger?: Trigger;
+  placement?: Axis;
+} & TriggerProps;
+
+export interface InjectPopoverProps extends PressableProps {
+  popover: PopoverProps;
+}
+
+export default function injectPopover(Target: typeof Pressable) {
+  const OverlayPopover = React.forwardRef<ViewRef, InjectPopoverProps>(
+    (props, ref) => {
+      const {
+        popover: {
+          title,
+          content,
+          autoClose = 'outside',
+          trigger = 'press',
+          placement = 'right',
+          ...popoverProps
+        },
+        ...elementProps
+      } = props;
+
+      const { visible, setVisible, targetProps, targetRef, templateProps } =
+        useTrigger(trigger, popoverProps, elementProps, ref);
+
+      const offset = normalizeNumber(StyleSheet.value('popover-arrow-height'));
+
+      return (
+        <>
+          <Target {...elementProps} {...targetProps} />
+          {visible && (
+            <OverlayContainer>
+              <Overlay
+                placement={placement}
+                offset={offset}
+                arrowOffset={offset}
+                targetRef={targetRef}
+                visible={visible}
+              >
+                {(overlay, overlayRef) => (
+                  <>
+                    <BackdropHandler
+                      toggleRef={targetRef}
+                      dialogRef={overlayRef}
+                      onClose={() => {
+                        setVisible(false);
+                      }}
+                      autoClose={autoClose}
+                    />
+                    <Popover
+                      {...templateProps}
+                      ref={overlayRef}
+                      placement={overlay.placement}
+                      popper={overlay.rendered}
+                      style={[
+                        overlay.overlayProps.style,
+                        {
+                          maxHeight: 'auto',
+                          opacity: overlay.rendered ? 1 : 0,
+                        },
+                      ]}
+                      arrowStyle={overlay.arrowProps.style}
+                    >
+                      <Popover.Arrow />
+                      {title && <Popover.Header>{title}</Popover.Header>}
+                      <Popover.Body>{content}</Popover.Body>
+                    </Popover>
+                  </>
+                )}
+              </Overlay>
+            </OverlayContainer>
+          )}
+        </>
+      );
+    },
+  );
+
+  OverlayPopover.displayName = 'Overlay(Popover)';
+
+  return OverlayPopover;
+}

package/src/components/progress/{Progress.js → Progress.tsx}

@@ -1,22 +1,16 @@
 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';
 import ProgressBar from './ProgressBar';
 import ProgressContext from './ProgressContext';
 import useProgress from './useProgress';
 
-const propTypes = {
-  children: PropTypes.node.isRequired,
-  min: PropTypes.number,
-  max: PropTypes.number,
-  // eslint-disable-next-line react/forbid-prop-types
-  style: PropTypes.any,
-  // eslint-disable-next-line react/forbid-prop-types
-  textStyle: PropTypes.any,
-};
+export interface ProgressProps extends ViewProps {
+  min?: number;
+  max?: number;
+}
 
 const styles = StyleSheet.create({
   '.progress': css`
@@ -34,7 +28,7 @@ const styles = StyleSheet.create({
   `,
 });
 
-const Progress = React.forwardRef((props, ref) => {
+const Progress = React.forwardRef<ViewRef, ProgressProps>((props, ref) => {
   const {
     children,
     min = 0,
@@ -65,8 +59,7 @@ const Progress = React.forwardRef((props, ref) => {
 });
 
 Progress.displayName = 'Progress';
-Progress.propTypes = propTypes;
 
-Progress.Bar = ProgressBar;
-
-export default Progress;
+export default Object.assign(Progress, {
+  Bar: ProgressBar,
+});

package/src/components/progress/ProgressBar.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import Text from '../Text';
+import View, { ViewProps, ViewRef } from '../View';
+import { getStyles } from '../../utils';
+import useForcedContext from '../../hooks/useForcedContext';
+import ProgressContext from './ProgressContext';
+
+export interface ProgressBarProps extends ViewProps {
+  value: number;
+}
+
+const styles = StyleSheet.create({
+  '.progress-bar': css`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    overflow: hidden;
+    background-color: $progress-bar-bg;
+    // @include transition($progress-bar-transition);
+  `,
+  '.progress-bar --text': css`
+    color: $progress-bar-color;
+    text-align: center;
+    // white-space: nowrap;
+  `,
+});
+
+const ROUND_PRECISION = 1000;
+
+const getPercentage = (value: number, min: number, max: number) => {
+  const percentage = ((value - min) / (max - min)) * 100;
+  return Math.round(percentage * ROUND_PRECISION) / ROUND_PRECISION;
+};
+
+const ProgressBar = React.forwardRef<ViewRef, ProgressBarProps>(
+  (props, ref) => {
+    const { children, value, style, textStyle, ...elementProps } = props;
+
+    const { min, max } = useForcedContext(ProgressContext);
+
+    const classes = getStyles(styles, ['.progress-bar']);
+
+    const textClasses = getStyles(styles, ['.progress-bar --text']);
+
+    // composite component
+    return (
+      <View
+        {...elementProps}
+        ref={ref}
+        role="progressbar"
+        aria-valuenow={value}
+        aria-valuemin={min}
+        aria-valuemax={max}
+        style={[
+          classes,
+          style,
+          { width: `${getPercentage(value, min, max)}%` },
+        ]}
+      >
+        {children && <Text style={[textClasses, textStyle]}>{children}</Text>}
+      </View>
+    );
+  },
+);
+
+ProgressBar.displayName = 'ProgressBar';
+
+export default ProgressBar;

package/src/components/progress/ProgressContext.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+
+type ProgressContextType = {
+  min: number;
+  max: number;
+};
+
+const ProgressContext = React.createContext<ProgressContextType | null>(null);
+
+ProgressContext.displayName = 'ProgressContext';
+
+export default ProgressContext;

package/src/components/progress/{useProgress.js → useProgress.ts}

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 
-export default function useProgress(min, max) {
+export default function useProgress(min: number, max: number) {
   return useMemo(
     () => ({
       min,