bootstrap-rn 0.3.0 → 0.3.2

package/src/components/toasts/ToastHeader.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import View from '../View';
+import { subtract } from '../../theme/functions';
+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({
+  '.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) => t['toast-border-radius'],
+      (t) => t['toast-border-width'],
+    )};
+    border-top-right-radius: ${subtract(
+      (t) => t['toast-border-radius'],
+      (t) => t['toast-border-width'],
+    )};
+  `,
+  '.toast-header --text': css`
+    color: $toast-header-color;
+  `,
+});
+
+const ToastHeader = React.forwardRef((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';
+ToastHeader.propTypes = propTypes;
+
+export default ToastHeader;

package/src/components/tooltip/Tooltip.js

@@ -0,0 +1,102 @@
+import React from 'react';
+import { Platform } from 'react-native';
+import PropTypes from 'prop-types';
+import View from '../View';
+import StyleSheet from '../../style/StyleSheet';
+import { getStyles, transformPlacement } from '../../utils';
+import css from '../../style/css';
+import TooltipArrow from './TooltipArrow';
+import TooltipInner from './TooltipInner';
+import TooltipContext from './TooltipContext';
+
+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({
+  '.tooltip': css`
+    position: absolute;
+    z-index: $zindex-tooltip;
+    // display: block;
+    margin: $tooltip-margin;
+    // opacity: 0;
+  `,
+  '.tooltip --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: $tooltip-font-size;
+    // Allow breaking very long words so they don't overflow the tooltip's bounds
+    // word-wrap: break-word;
+  `,
+  '.bs-tooltip-top': css`
+    padding: $tooltip-arrow-height 0;
+  `,
+  '.bs-tooltip-end': css`
+    padding: 0 $tooltip-arrow-height;
+  `,
+  '.bs-tooltip-bottom': css`
+    padding: $tooltip-arrow-height 0;
+  `,
+  '.bs-tooltip-start': css`
+    padding: 0 $tooltip-arrow-height;
+  `,
+});
+
+const Tooltip = React.forwardRef((props, ref) => {
+  const {
+    children,
+    placement = 'top',
+    popper,
+    style,
+    textStyle,
+    arrowStyle,
+    ...elementProps
+  } = props;
+
+  const tooltip = {
+    placement: transformPlacement(placement),
+    arrowStyle,
+    popper,
+  };
+
+  const classes = getStyles(styles, [
+    '.tooltip',
+    // Wait for rendering (of Overlay) before setting the offset.
+    popper && `.bs-tooltip-${tooltip.placement}`,
+  ]);
+  const textClasses = getStyles(styles, ['.tooltip --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]}
+    >
+      <TooltipContext.Provider value={tooltip}>
+        {children}
+      </TooltipContext.Provider>
+    </View>
+  );
+});
+
+Tooltip.displayName = 'Tooltip';
+Tooltip.propTypes = propTypes;
+
+Tooltip.Arrow = TooltipArrow;
+Tooltip.Inner = TooltipInner;
+
+export default Tooltip;

package/src/components/tooltip/TooltipArrow.js

@@ -0,0 +1,105 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from '../View';
+import StyleSheet from '../../style/StyleSheet';
+import { getStyles } from '../../utils';
+import css from '../../style/css';
+import useForcedContext from '../../hooks/useForcedContext';
+import TooltipContext from './TooltipContext';
+
+const propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  '.tooltip-arrow': css`
+    position: absolute;
+    // display: block;
+    width: $tooltip-arrow-width;
+    height: $tooltip-arrow-height;
+  `,
+  '.tooltip-arrow::before': css`
+    position: absolute;
+    // content: "";
+    border-top-color: transparent;
+    border-right-color: transparent;
+    border-left-color: transparent;
+    border-bottom-color: transparent;
+    border-style: solid;
+  `,
+  '.bs-tooltip-top .tooltip-arrow': css`
+    bottom: 0;
+  `,
+  '.bs-tooltip-top .tooltip-arrow::before': css`
+    top: -1px;
+    border-top-width: $tooltip-arrow-height;
+    border-right-width: $tooltip-arrow-width * 0.5;
+    border-left-width: $tooltip-arrow-width * 0.5;
+    border-bottom-width: 0;
+    border-top-color: $tooltip-arrow-color;
+  `,
+  '.bs-tooltip-end .tooltip-arrow': css`
+    left: 0;
+    width: $tooltip-arrow-height;
+    height: $tooltip-arrow-width;
+  `,
+  '.bs-tooltip-end .tooltip-arrow::before': css`
+    right: -1px;
+    border-top-width: $tooltip-arrow-width * 0.5;
+    border-right-width: $tooltip-arrow-height;
+    border-left-width: 0;
+    border-bottom-width: $tooltip-arrow-width * 0.5;
+    border-right-color: $tooltip-arrow-color;
+  `,
+  '.bs-tooltip-bottom .tooltip-arrow': css`
+    top: 0;
+  `,
+  '.bs-tooltip-bottom .tooltip-arrow::before': css`
+    bottom: -1px;
+    border-top-width: 0;
+    border-right-width: $tooltip-arrow-width * 0.5;
+    border-left-width: $tooltip-arrow-width * 0.5;
+    border-bottom-width: $tooltip-arrow-height;
+    border-bottom-color: $tooltip-arrow-color;
+  `,
+  '.bs-tooltip-start .tooltip-arrow': css`
+    right: 0;
+    width: $tooltip-arrow-height;
+    height: $tooltip-arrow-width;
+  `,
+  '.bs-tooltip-start .tooltip-arrow::before': css`
+    left: -1px;
+    border-top-width: $tooltip-arrow-width * 0.5;
+    border-right-width: 0;
+    border-left-width: $tooltip-arrow-height;
+    border-bottom-width: $tooltip-arrow-width * 0.5;
+    border-left-color: $tooltip-arrow-color;
+  `,
+});
+
+const TooltipArrow = React.forwardRef((props, ref) => {
+  const { style, ...elementProps } = props;
+
+  const { placement, arrowStyle, popper } = useForcedContext(TooltipContext);
+
+  const classes = getStyles(styles, [
+    '.tooltip-arrow',
+    popper && `.bs-tooltip-${placement} .tooltip-arrow`,
+  ]);
+  const beforeClasses = getStyles(styles, [
+    '.tooltip-arrow::before',
+    popper && `.bs-tooltip-${placement} .tooltip-arrow::before`,
+  ]);
+
+  return (
+    <View {...elementProps} ref={ref} style={[classes, arrowStyle, style]}>
+      <View style={beforeClasses} />
+    </View>
+  );
+});
+
+TooltipArrow.displayName = 'TooltipArrow';
+TooltipArrow.propTypes = propTypes;
+
+export default TooltipArrow;

package/src/components/tooltip/TooltipContext.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const TooltipContext = React.createContext();
+
+TooltipContext.displayName = 'TooltipContext';
+
+export default TooltipContext;

package/src/components/tooltip/TooltipInner.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import { getStyles } from '../../utils';
+import css from '../../style/css';
+import View from '../View';
+import Text from '../Text';
+
+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({
+  '.tooltip-inner': css`
+    max-width: $tooltip-max-width;
+    padding: $tooltip-padding-y $tooltip-padding-x;
+    background-color: $tooltip-bg;
+    border-radius: $tooltip-border-radius;
+  `,
+  '.tooltip-inner --text': css`
+    color: $tooltip-color;
+    text-align: center;
+  `,
+});
+
+const TooltipInner = React.forwardRef((props, ref) => {
+  const { children, style, textStyle, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['.tooltip-inner']);
+  const textClasses = getStyles(styles, ['.tooltip-inner --text']);
+
+  // composite component
+  return (
+    <View {...elementProps} ref={ref} style={[classes, style]}>
+      <Text style={[textClasses, textStyle]}>{children}</Text>
+    </View>
+  );
+});
+
+TooltipInner.displayName = 'TooltipInner';
+TooltipInner.propTypes = propTypes;
+
+export default TooltipInner;

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)];
+}