bootstrap-rn 0.3.0 → 0.3.1

package/src/components/popover/Popover.js

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

package/src/components/popover/PopoverArrow.js

@@ -0,0 +1,166 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import View 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';
+
+const propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  '.popover-arrow': css`
+    position: absolute;
+    // display: block;
+    width: $popover-arrow-width;
+    height: $popover-arrow-height;
+  `,
+  '.popover-arrow::before': css`
+    position: absolute;
+    // display: block;
+    // content: "";
+    border-top-color: transparent;
+    border-right-color: transparent;
+    border-left-color: transparent;
+    border-bottom-color: transparent;
+    border-style: solid;
+  `,
+  '.popover-arrow::after': css`
+    position: absolute;
+    // display: block;
+    // content: "";
+    border-top-color: transparent;
+    border-right-color: transparent;
+    border-left-color: transparent;
+    border-bottom-color: transparent;
+    border-style: solid;
+  `,
+  '.bs-popover-top .popover-arrow': css`
+    bottom: ${subtract(
+      (t) => `-${t['popover-arrow-height']}`,
+      (t) => t['popover-border-width'],
+    )};
+  `,
+  '.bs-popover-top .popover-arrow::before': css`
+    bottom: 0;
+    border-top-width: $popover-arrow-height;
+    border-right-width: $popover-arrow-width * 0.5;
+    border-left-width: $popover-arrow-width * 0.5;
+    border-bottom-width: 0;
+    border-top-color: $popover-arrow-outer-color;
+  `,
+  '.bs-popover-top .popover-arrow::after': css`
+    bottom: $popover-border-width;
+    border-top-width: $popover-arrow-height;
+    border-right-width: $popover-arrow-width * 0.5;
+    border-left-width: $popover-arrow-width * 0.5;
+    border-bottom-width: 0;
+    border-top-color: $popover-arrow-color;
+  `,
+  '.bs-popover-end .popover-arrow': css`
+    left: ${subtract(
+      (t) => `-${t['popover-arrow-height']}`,
+      (t) => t['popover-border-width'],
+    )};
+    width: $popover-arrow-height;
+    height: $popover-arrow-width;
+  `,
+  '.bs-popover-end .popover-arrow::before': css`
+    left: 0;
+    border-top-width: $popover-arrow-width * 0.5;
+    border-right-width: $popover-arrow-height;
+    border-left-width: 0;
+    border-bottom-width: $popover-arrow-width * 0.5;
+    border-right-color: $popover-arrow-outer-color;
+  `,
+  '.bs-popover-end .popover-arrow::after': css`
+    left: $popover-border-width;
+    border-top-width: $popover-arrow-width * 0.5;
+    border-right-width: $popover-arrow-height;
+    border-left-width: 0;
+    border-bottom-width: $popover-arrow-width * 0.5;
+    border-right-color: $popover-arrow-color;
+  `,
+  '.bs-popover-bottom .popover-arrow': css`
+    top: ${subtract(
+      (t) => `-${t['popover-arrow-height']}`,
+      (t) => t['popover-border-width'],
+    )};
+  `,
+  '.bs-popover-bottom .popover-arrow::before': css`
+    top: 0;
+    border-top-width: 0;
+    border-right-width: $popover-arrow-width * 0.5;
+    border-left-width: $popover-arrow-width * 0.5;
+    border-bottom-width: $popover-arrow-height;
+    border-bottom-color: $popover-arrow-outer-color;
+  `,
+  '.bs-popover-bottom .popover-arrow::after': css`
+    top: $popover-border-width;
+    border-top-width: 0;
+    border-right-width: $popover-arrow-width * 0.5;
+    border-left-width: $popover-arrow-width * 0.5;
+    border-bottom-width: $popover-arrow-height;
+    border-bottom-color: $popover-arrow-color;
+  `,
+  '.bs-popover-start .popover-arrow': css`
+    right: ${subtract(
+      (t) => `-${t['popover-arrow-height']}`,
+      (t) => t['popover-border-width'],
+    )};
+    width: $popover-arrow-height;
+    height: $popover-arrow-width;
+  `,
+  '.bs-popover-start .popover-arrow::before': css`
+    right: 0;
+    border-top-width: $popover-arrow-width * 0.5;
+    border-right-width: 0;
+    border-left-width: $popover-arrow-height;
+    border-bottom-width: $popover-arrow-width * 0.5;
+    border-left-color: $popover-arrow-outer-color;
+  `,
+  '.bs-popover-start .popover-arrow::after': css`
+    right: $popover-border-width;
+    border-top-width: $popover-arrow-width * 0.5;
+    border-right-width: 0;
+    border-left-width: $popover-arrow-height;
+    border-bottom-width: $popover-arrow-width * 0.5;
+    border-left-color: $popover-arrow-color;
+  `,
+});
+
+const PopoverArrow = React.forwardRef((props, ref) => {
+  const { style, ...elementProps } = props;
+
+  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`,
+  ]);
+
+  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.js

@@ -0,0 +1,47 @@
+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';
+
+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({
+  '.popover-body': css`
+    padding: $popover-body-padding-y $popover-body-padding-x;
+  `,
+  '.popover-body --text': css`
+    color: $popover-body-color;
+  `,
+});
+
+const PopoverBody = React.forwardRef((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';
+PopoverBody.propTypes = propTypes;
+
+export default PopoverBody;

package/src/components/popover/PopoverContext.js

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

package/src/components/popover/PopoverHeader.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import View 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,
+};
+
+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((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';
+PopoverHeader.propTypes = propTypes;
+
+export default PopoverHeader;

package/src/components/popover/injectPopover.js

@@ -0,0 +1,102 @@
+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 Popover from './Popover';
+
+const propTypes = {
+  popover: PropTypes.shape({
+    title: PropTypes.node,
+    content: PropTypes.node.isRequired,
+    autoClose: PropTypes.oneOfType([
+      PropTypes.bool,
+      PropTypes.oneOf(['inside', 'outside']),
+    ]),
+    ...TriggerPropTypes,
+  }),
+};
+
+export default function injectPopover(Target) {
+  const OverlayPopover = React.forwardRef((props, ref) => {
+    /* eslint-disable react/prop-types */
+    const {
+      popover: {
+        title,
+        content,
+        autoClose = 'outside',
+        trigger = 'press',
+        placement = 'right',
+        ...tooltipProps
+      },
+      ...elementProps
+    } = props;
+    /* eslint-enable */
+
+    const {
+      visible,
+      setVisible,
+      targetProps,
+      targetRef,
+      templateProps,
+    } = useTrigger(trigger, tooltipProps, 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)';
+  OverlayPopover.propTypes = propTypes;
+
+  return OverlayPopover;
+}

package/src/components/progress/Progress.js

@@ -0,0 +1,72 @@
+import React 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 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,
+};
+
+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((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';
+Progress.propTypes = propTypes;
+
+Progress.Bar = ProgressBar;
+
+export default Progress;

package/src/components/progress/ProgressBar.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import Text from '../Text';
+import View from '../View';
+import { getStyles } from '../../utils';
+import useForcedContext from '../../hooks/useForcedContext';
+import ProgressContext from './ProgressContext';
+
+const propTypes = {
+  children: PropTypes.node,
+  value: PropTypes.number.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({
+  '.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, min, max) => {
+  const percentage = ((value - min) / (max - min)) * 100;
+  return Math.round(percentage * ROUND_PRECISION) / ROUND_PRECISION;
+};
+
+const ProgressBar = React.forwardRef((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';
+ProgressBar.propTypes = propTypes;
+
+export default ProgressBar;

package/src/components/progress/ProgressContext.js

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

package/src/components/progress/useProgress.js

@@ -0,0 +1,11 @@
+import { useMemo } from 'react';
+
+export default function useProgress(min, max) {
+  return useMemo(
+    () => ({
+      min,
+      max,
+    }),
+    [min, max],
+  );
+}