bootstrap-rn 0.4.8 → 0.4.10

package/src/components/popover/PopoverHeader.tsx

@@ -1,48 +1,46 @@
-import React from 'react';
-import View, { ViewProps, ViewRef } from '../View';
-import Heading from '../Heading';
-import StyleSheet from '../../style/StyleSheet';
-import { getStyles } from '../../utils';
-import css from '../../style/css';
-
-export interface PopoverHeaderProps extends ViewProps {}
-
-const styles = StyleSheet.create({
-  '.popover-header': css`
-    padding: $popover-header-padding-y $popover-header-padding-x;
-    background-color: $popover-header-bg;
-    border-bottom-width: $popover-border-width;
-    border-style: solid;
-    border-color: $popover-border-color;
-    border-top-left-radius: $popover-border-radius;
-    border-top-right-radius: $popover-border-radius;
-  `,
-  '.popover-header --text': css`
-    margin-bottom: 0; // Reset the default from Reboot
-    font-size: $font-size-base;
-    line-height: $font-size-base * $headings-line-height; // added for bootstrap-rn
-    color: $popover-header-color;
-  `,
-});
-
-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']);
-
-    // composite component
-    return (
-      <View {...elementProps} ref={ref} style={[classes, style]}>
-        <Heading size={3} style={[textClasses, textStyle]}>
-          {children}
-        </Heading>
-      </View>
-    );
-  },
-);
-
-PopoverHeader.displayName = 'PopoverHeader';
-
-export default PopoverHeader;
+import React from 'react';
+import View, { ViewProps, ViewRef } from '../View';
+import Heading from '../Heading';
+import StyleSheet from '../../style/StyleSheet';
+import { getStyles } from '../../utils';
+import css from '../../style/css';
+
+export interface PopoverHeaderProps extends ViewProps {}
+
+const styles = StyleSheet.create({
+  '.popover-header': css`
+    padding: $popover-header-padding-y $popover-header-padding-x;
+    background-color: $popover-header-bg;
+    border-bottom-width: $popover-border-width;
+    border-style: solid;
+    border-color: $popover-border-color;
+    border-top-left-radius: $popover-border-radius;
+    border-top-right-radius: $popover-border-radius;
+  `,
+  '.popover-header --text': css`
+    margin-bottom: 0; // Reset the default from Reboot
+    font-size: $font-size-base;
+    line-height: $font-size-base * $headings-line-height; // added for bootstrap-rn
+    color: $popover-header-color;
+  `,
+});
+
+function PopoverHeader(
+  props: PopoverHeaderProps & React.RefAttributes<ViewRef>,
+) {
+  const { ref, children, style, textStyle, ...elementProps } = props;
+
+  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>
+  );
+}
+
+export default PopoverHeader;

package/src/components/popover/injectPopover.tsx

@@ -25,79 +25,80 @@ export interface InjectPopoverProps extends OverlayProps {
 export default function injectPopover<Props>(
   Target: React.ComponentType<Props>,
 ) {
-  const OverlayPopover = React.forwardRef<ViewRef, Props & InjectPopoverProps>(
-    (props, ref) => {
-      const {
-        popover: {
-          title,
-          content,
-          trigger = 'press',
-          placement = 'right',
-          ...popoverProps
-        },
-        defaultVisible = false,
-        visible: controlledVisible,
-        onToggle = () => {},
-        ...elementProps
-      } = props;
+  function OverlayPopover(
+    props: Props & InjectPopoverProps & React.RefAttributes<ViewRef>,
+  ) {
+    const {
+      ref,
+      popover: {
+        title,
+        content,
+        trigger = 'press',
+        placement = 'right',
+        ...popoverProps
+      },
+      defaultVisible = false,
+      visible: controlledVisible,
+      onToggle = () => {},
+      ...elementProps
+    } = props;
 
-      const offset = normalizeNumber(StyleSheet.value('popover-arrow-height'));
+    const offset = normalizeNumber(StyleSheet.value('popover-arrow-height'));
 
-      const overlay = useOverlay({
-        defaultVisible,
-        controlledVisible,
-        onToggle,
-        offset,
-        align: 'center',
-        placement,
-        trigger,
-      });
+    const overlay = useOverlay({
+      defaultVisible,
+      controlledVisible,
+      onToggle,
+      offset,
+      align: 'center',
+      placement,
+      trigger,
+    });
 
-      if ('maxWidth' in overlay.content.style) {
-        // @ts-expect-error We remove maxWidth, because maxWidth is set as style on Popover component.
-        delete overlay.content.style.maxWidth;
-      }
+    if ('maxWidth' in overlay.content.style) {
+      // @ts-expect-error We remove maxWidth, because maxWidth is set as style on Popover component.
+      delete overlay.content.style.maxWidth;
+    }
 
-      return (
-        <>
-          <Target
-            {...(elementProps as Props)}
-            {...overlay.trigger.getProps(elementProps)}
-            ref={concatRefs(ref, overlay.trigger.ref)}
-            {...optional(overlay.visible, {
-              'aria-describedby': overlay.identifier,
-            })}
-          />
-          {overlay.visible && (
-            <Portal name={overlay.identifier}>
-              <BackdropHandler
-                onClose={() => {
-                  overlay.setVisible(false);
-                }}
+    return (
+      <>
+        <Target
+          {...(elementProps as Props)}
+          {...overlay.trigger.getProps(elementProps)}
+          ref={concatRefs(ref, overlay.trigger.ref)}
+          {...optional(overlay.visible, {
+            'aria-describedby': overlay.identifier,
+          })}
+        />
+        {overlay.visible && (
+          <Portal name={overlay.identifier}>
+            <BackdropHandler
+              onClose={() => {
+                overlay.setVisible(false);
+              }}
+            />
+            <Popover
+              {...popoverProps}
+              {...overlay.content.getProps(popoverProps)}
+              ref={overlay.content.ref}
+              id={overlay.identifier}
+              placement={overlay.placement}
+              style={overlay.content.style}
+              floating
+            >
+              <Popover.Arrow
+                {...overlay.arrow.getProps({})}
+                ref={overlay.arrow.ref}
+                style={overlay.arrow.style}
               />
-              <Popover
-                {...popoverProps}
-                {...overlay.content.getProps(popoverProps)}
-                ref={overlay.content.ref}
-                id={overlay.identifier}
-                placement={overlay.placement}
-                style={overlay.content.style}
-                floating
-              >
-                <Popover.Arrow
-                  {...overlay.arrow.getProps({})}
-                  ref={overlay.arrow.ref}
-                  style={overlay.arrow.style}
-                />
-                {title && <Popover.Header>{title}</Popover.Header>}
-                <Popover.Body>{content}</Popover.Body>
-              </Popover>
-            </Portal>
-          )}
-        </>
-      );
-    },
-  );
+              {title && <Popover.Header>{title}</Popover.Header>}
+              <Popover.Body>{content}</Popover.Body>
+            </Popover>
+          </Portal>
+        )}
+      </>
+    );
+  }
 
   OverlayPopover.displayName = 'Overlay(Popover)';
 

package/src/components/progress/Progress.tsx

@@ -1,65 +1,64 @@
-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 ProgressBar from './ProgressBar';
-import ProgressContext from './ProgressContext';
-import useProgress from './useProgress';
-
-export interface ProgressProps extends ViewProps {
-  min?: number;
-  max?: number;
-}
-
-const styles = StyleSheet.create({
-  '.progress': css`
-    display: flex;
-    flex-direction: row; // added for bootstrap-rn
-    height: $progress-height;
-    overflow: hidden; // force rounded corners by cropping it
-    background-color: $progress-bg;
-    border-radius: $progress-border-radius;
-    // @include box-shadow($progress-box-shadow);
-  `,
-  '.progress --text': css`
-    font-size: $progress-font-size;
-    line-height: $progress-font-size * $line-height-base; // added for bootstrap-rn
-  `,
-});
-
-const Progress = React.forwardRef<ViewRef, ProgressProps>((props, ref) => {
-  const {
-    children,
-    min = 0,
-    max = 100,
-    style,
-    textStyle,
-    ...elementProps
-  } = props;
-
-  const progress = useProgress(min, max);
-
-  const classes = getStyles(styles, ['.progress']);
-
-  const textClasses = getStyles(styles, ['.progress --text']);
-
-  return (
-    <View
-      {...elementProps}
-      ref={ref}
-      style={[classes, style]}
-      textStyle={[textClasses, textStyle]}
-    >
-      <ProgressContext.Provider value={progress}>
-        {children}
-      </ProgressContext.Provider>
-    </View>
-  );
-});
-
-Progress.displayName = 'Progress';
-
-export default Object.assign(Progress, {
-  Bar: ProgressBar,
-});
+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 ProgressBar from './ProgressBar';
+import ProgressContext from './ProgressContext';
+import useProgress from './useProgress';
+
+export interface ProgressProps extends ViewProps {
+  min?: number;
+  max?: number;
+}
+
+const styles = StyleSheet.create({
+  '.progress': css`
+    display: flex;
+    flex-direction: row; // added for bootstrap-rn
+    height: $progress-height;
+    overflow: hidden; // force rounded corners by cropping it
+    background-color: $progress-bg;
+    border-radius: $progress-border-radius;
+    // @include box-shadow($progress-box-shadow);
+  `,
+  '.progress --text': css`
+    font-size: $progress-font-size;
+    line-height: $progress-font-size * $line-height-base; // added for bootstrap-rn
+  `,
+});
+
+function Progress(props: ProgressProps & React.RefAttributes<ViewRef>) {
+  const {
+    ref,
+    children,
+    min = 0,
+    max = 100,
+    style,
+    textStyle,
+    ...elementProps
+  } = props;
+
+  const progress = useProgress(min, max);
+
+  const classes = getStyles(styles, ['.progress']);
+
+  const textClasses = getStyles(styles, ['.progress --text']);
+
+  return (
+    <View
+      {...elementProps}
+      ref={ref}
+      style={[classes, style]}
+      textStyle={[textClasses, textStyle]}
+    >
+      <ProgressContext.Provider value={progress}>
+        {children}
+      </ProgressContext.Provider>
+    </View>
+  );
+}
+
+export default Object.assign(Progress, {
+  Bar: ProgressBar,
+});

package/src/components/progress/ProgressBar.tsx

@@ -1,70 +1,62 @@
-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;
+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;
+};
+
+function ProgressBar(props: ProgressBarProps & React.RefAttributes<ViewRef>) {
+  const { ref, 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>
+  );
+}
+
+export default ProgressBar;