bootstrap-rn 0.3.0 → 0.3.1

package/src/components/tooltip/injectTooltip.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { OverlayContainer } from '@react-native-aria/overlays';
+import Overlay from '../helpers/Overlay';
+import BackdropHandler from '../helpers/BackdropHandler';
+import useTrigger, { TriggerPropTypes } from '../../hooks/useTrigger';
+import { normalizeNumber } from '../../style/math';
+import StyleSheet from '../../style/StyleSheet';
+import Tooltip from './Tooltip';
+
+const propTypes = {
+  tooltip: PropTypes.shape({
+    title: PropTypes.node.isRequired,
+    autoClose: PropTypes.oneOfType([
+      PropTypes.bool,
+      PropTypes.oneOf(['inside', 'outside']),
+    ]),
+    ...TriggerPropTypes,
+  }),
+};
+
+export default function injectTooltip(Target) {
+  const OverlayTooltip = React.forwardRef((props, ref) => {
+    /* eslint-disable react/prop-types */
+    const {
+      tooltip: {
+        title,
+        autoClose = 'outside',
+        trigger = 'hover focus',
+        placement = 'top',
+        ...tooltipProps
+      },
+      ...elementProps
+    } = props;
+    /* eslint-enable */
+
+    const {
+      visible,
+      setVisible,
+      targetProps,
+      targetRef,
+      templateProps,
+    } = useTrigger(trigger, tooltipProps, elementProps, ref);
+
+    const offset = normalizeNumber(StyleSheet.value('tooltip-arrow-height'));
+
+    return (
+      <>
+        <Target {...elementProps} {...targetProps} />
+        {visible && (
+          <OverlayContainer>
+            <Overlay
+              placement={placement}
+              targetRef={targetRef}
+              arrowOffset={offset}
+              visible={visible}
+            >
+              {(overlay, overlayRef) => (
+                <>
+                  <BackdropHandler
+                    toggleRef={targetRef}
+                    dialogRef={overlayRef}
+                    onClose={() => {
+                      setVisible(false);
+                    }}
+                    autoClose={autoClose}
+                  />
+                  <Tooltip
+                    {...templateProps}
+                    ref={overlayRef}
+                    placement={overlay.placement}
+                    popper={overlay.rendered}
+                    style={[
+                      overlay.overlayProps.style,
+                      { maxHeight: 'auto', opacity: overlay.rendered ? 1 : 0 },
+                    ]}
+                    arrowStyle={overlay.arrowProps.style}
+                  >
+                    <Tooltip.Arrow />
+                    <Tooltip.Inner>{title}</Tooltip.Inner>
+                  </Tooltip>
+                </>
+              )}
+            </Overlay>
+          </OverlayContainer>
+        )}
+      </>
+    );
+  });
+
+  OverlayTooltip.displayName = 'Overlay(Tooltip)';
+  OverlayTooltip.propTypes = propTypes;
+
+  return OverlayTooltip;
+}

package/src/components/type/Blockquote.js

@@ -0,0 +1,52 @@
+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 View 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,
+};
+
+const styles = StyleSheet.create({
+  blockquote: css`
+    margin-bottom: $blockquote-margin-y;
+  `,
+  'blockquote --text': css`
+    font-size: $blockquote-font-size;
+  `,
+});
+
+const Blockquote = React.forwardRef((props, ref) => {
+  const { children, style, textStyle, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['blockquote']);
+
+  const textClasses = getStyles(styles, ['blockquote --text']);
+
+  // Accessiblity role blockquote is only supported on web.
+  const role = Platform.OS === 'web' ? 'blockquote' : null;
+
+  return (
+    <View
+      {...elementProps}
+      ref={ref}
+      role={role}
+      style={[classes, style]}
+      textStyle={[textClasses, textStyle]}
+    >
+      {children}
+    </View>
+  );
+});
+
+Blockquote.displayName = 'Blockquote';
+Blockquote.propTypes = propTypes;
+
+export default Blockquote;

package/src/components/type/Code.js

@@ -0,0 +1,44 @@
+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,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  code: css`
+    font-family: $font-family-code;
+    font-size: $code-font-size;
+    color: $code-color;
+    @include platform(web) {
+      word-wrap: break-word;
+    }
+  `,
+});
+
+const Code = React.forwardRef((props, ref) => {
+  const { children, style, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['code']);
+
+  // Accessiblity role code is only supported on web.
+  const role = Platform.OS === 'web' ? 'code' : null;
+
+  return (
+    <Text {...elementProps} ref={ref} role={role} style={[classes, style]}>
+      {children}
+    </Text>
+  );
+});
+
+Code.displayName = 'Code';
+Code.propTypes = propTypes;
+
+export default Code;

package/src/components/type/DisplayHeading.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import Heading from '../Heading';
+import { DISPLAY_FONT_SIZES } from '../../theme/proxies';
+import { getStyles, each } from '../../utils';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  size: PropTypes.oneOf(Object.keys(DISPLAY_FONT_SIZES).map((k) => Number(k)))
+    .isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  ...each(DISPLAY_FONT_SIZES, (size, value) => ({
+    [`.display-${size}`]: css`
+      font-size: ${value};
+      line-height: ${value} * $headings-line-height;
+    `,
+  })),
+});
+
+const DisplayHeading = React.forwardRef((props, ref) => {
+  const { children, size, style, ...elementProps } = props;
+
+  const classes = getStyles(styles, [`.display-${size}`]);
+
+  return (
+    <Heading {...elementProps} ref={ref} size={1} style={[classes, style]}>
+      {children}
+    </Heading>
+  );
+});
+
+DisplayHeading.displayName = 'Heading';
+DisplayHeading.propTypes = propTypes;
+
+export default DisplayHeading;

package/src/components/type/Paragraph.js

@@ -0,0 +1,46 @@
+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;

package/src/hooks/useAction.js

@@ -0,0 +1,31 @@
+import { concatRefs } from '../utils';
+
+const getActionHook = (toggle, dismiss) => {
+  if (toggle) {
+    return toggle.useToggle || toggle;
+  }
+
+  if (dismiss) {
+    return dismiss.useDismiss || dismiss;
+  }
+
+  return null;
+};
+
+export default function useAction(props, ref) {
+  const { toggle, dismiss, ...restProps } = props;
+
+  const useActionHook = getActionHook(toggle, dismiss);
+
+  if (!useActionHook) {
+    return [props, ref];
+  }
+
+  if (typeof useActionHook !== 'function') {
+    throw new Error('Action hook must be of type function.');
+  }
+
+  const { ref: actionRef, ...actionProps } = useActionHook(restProps);
+
+  return [actionProps, concatRefs(actionRef, ref)];
+}

package/src/hooks/useBackground.js

@@ -0,0 +1,110 @@
+import { StyleSheet } from 'react-native';
+
+// 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({
+  reset: {
+    // Background repeat is not supported on native yet.
+    backgroundRepeat: 'no-repeat',
+  },
+});
+
+const normalizeValue = (value) =>
+  typeof value === 'number' && value !== 0 ? `${value}px` : value;
+
+const resolveBackgroundSize = (style) => {
+  const { backgroundSize } = style;
+
+  if (typeof backgroundSize !== 'object') {
+    return backgroundSize;
+  }
+
+  const { width = 'auto', height = 'auto' } = backgroundSize;
+
+  return `${normalizeValue(width)} ${normalizeValue(height)}`;
+};
+
+const resolveBackgroundPosition = (style) => {
+  const {
+    backgroundPosition,
+    backgroundPositionX,
+    backgroundPositionY,
+  } = style;
+
+  if (!backgroundPosition && !backgroundPositionX && !backgroundPositionY) {
+    return null;
+  }
+
+  const value = {
+    positionX: backgroundPosition || 'left',
+    offsetX: 0,
+    positionY: backgroundPosition || 'top',
+    offsetY: 0,
+  };
+
+  if (backgroundPositionX) {
+    const { position: positionX = 'left', offset: offsetX = 0 } =
+      typeof backgroundPositionX === 'object'
+        ? backgroundPositionX
+        : { position: backgroundPositionX };
+
+    value.positionX = positionX;
+    value.offsetX = normalizeValue(offsetX);
+  }
+
+  if (backgroundPositionY) {
+    const { position: positionY = 'top', offset: offsetY = 0 } =
+      typeof backgroundPositionY === 'object'
+        ? backgroundPositionY
+        : { position: backgroundPositionY };
+
+    value.positionY = positionY;
+    value.offsetY = normalizeValue(offsetY);
+  }
+
+  const valueX = value.offsetX
+    ? `${value.positionX} ${value.offsetX}`
+    : value.positionX;
+  const valueY = value.offsetY
+    ? `${value.positionY} ${value.offsetY}`
+    : value.positionY;
+
+  return `${valueX} ${valueY}`;
+};
+
+export default function useBackground(style) {
+  const flattenedStyle = StyleSheet.flatten(style);
+
+  return {
+    style: [
+      flattenedStyle,
+      styles.reset,
+      {
+        // Transform background size
+        backgroundSize: resolveBackgroundSize(flattenedStyle),
+        // Workaround, because some browsers do not support two-value syntax:
+        // https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-x#browser_compatibility
+        backgroundPositionX: null,
+        backgroundPositionY: null,
+        backgroundPosition: resolveBackgroundPosition(flattenedStyle),
+      },
+    ],
+    element: null,
+  };
+}

package/src/hooks/useBackground.native.js

@@ -0,0 +1,191 @@
+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>
+    ),
+  };
+}

package/src/hooks/useControlledState.js

@@ -0,0 +1,30 @@
+import { useState } from 'react';
+
+export default function useControlledState(
+  defaultValue,
+  controlledValue,
+  handleChange = () => {},
+) {
+  const [stateValue, setStateValue] = useState(defaultValue);
+
+  const isControlled =
+    controlledValue !== undefined && controlledValue !== null;
+
+  const value = isControlled ? controlledValue : stateValue;
+
+  const setValue = (next) => {
+    const nextValue = typeof next === 'function' ? next(value) : next;
+
+    if (value === nextValue) {
+      return;
+    }
+
+    if (!isControlled) {
+      setStateValue(next);
+    }
+
+    handleChange(nextValue);
+  };
+
+  return [value, setValue];
+}

package/src/hooks/useFixedElement.js

@@ -0,0 +1,17 @@
+import { useContext, useRef, useEffect } from 'react';
+import Context from '../Context';
+
+export default function useFixedElement() {
+  const context = useContext(Context);
+  const ref = useRef();
+
+  useEffect(() => {
+    const link = context.addFixedElement(ref);
+
+    return () => {
+      link.remove();
+    };
+  }, []);
+
+  return ref;
+}

package/src/hooks/useForcedContext.js

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import invariant from 'tiny-invariant';
+
+export default function useForcedContext(Context) {
+  const context = useContext(Context);
+
+  invariant(context, `Failed to get context "${Context.displayName}".`);
+
+  return context;
+}

package/src/hooks/useIdentifier.js

@@ -0,0 +1,14 @@
+import { useContext, useRef } from 'react';
+import Context from '../Context';
+
+export default function useIdentifier(prefix) {
+  const context = useContext(Context);
+
+  const ref = useRef();
+
+  if (!ref.current) {
+    ref.current = context.generateKey(prefix);
+  }
+
+  return ref.current;
+}