@telus-uds/components-base 3.7.1 → 3.8.0

package/src/ActivityIndicator/FullScreenIndicator.jsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import { View, StyleSheet, Platform } from 'react-native'
+import PropTypes from 'prop-types'
+import StackView from '../StackView'
+import Typography from '../Typography'
+import RenderActivityIndicator from './RenderActivityIndicator'
+import { BACKDROP_Z_INDEX, SPACE_WITH_LABEL, SPACE_WITHOUT_LABEL } from './shared'
+import { activityIndicatorCommonProps } from './sharedProptypes'
+
+const FullScreenIndicator = React.forwardRef(
+  ({ variantProps, label, labelPosition, labelMapping, backgroundColor, showLabel }, ref) => (
+    <View style={[staticStyles.fullScreenOverlay, { backgroundColor }]}>
+      <StackView
+        space={showLabel ? SPACE_WITH_LABEL : SPACE_WITHOUT_LABEL}
+        tokens={{ alignItems: 'center' }}
+        direction={labelMapping[labelPosition]}
+      >
+        <RenderActivityIndicator {...variantProps} ref={ref} label={label} />
+        {showLabel && <Typography>{label}</Typography>}
+      </StackView>
+    </View>
+  )
+)
+
+FullScreenIndicator.displayName = 'FullScreenIndicator'
+
+const staticStyles = StyleSheet.create({
+  fullScreenOverlay: {
+    ...Platform.select({
+      web: {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100vw',
+        height: '100vh',
+        zIndex: BACKDROP_Z_INDEX,
+        justifyContent: 'center',
+        alignItems: 'center'
+      },
+      default: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        justifyContent: 'center',
+        alignItems: 'center',
+        ...(Platform.OS === 'android' ? { elevation: 5 } : { zIndex: BACKDROP_Z_INDEX })
+      }
+    })
+  }
+})
+
+FullScreenIndicator.propTypes = {
+  /**
+   * Shared props
+   * */
+  ...activityIndicatorCommonProps,
+  /**
+   * Background color for overlay
+   * */
+  backgroundColor: PropTypes.string.isRequired
+}
+
+export default FullScreenIndicator

package/src/ActivityIndicator/InlineIndicator.jsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { View, StyleSheet, Platform } from 'react-native'
+import PropTypes from 'prop-types'
+import StackView from '../StackView'
+import Typography from '../Typography'
+import RenderActivityIndicator from './RenderActivityIndicator'
+import { activityIndicatorCommonProps } from './sharedProptypes'
+import { SPACE_WITH_LABEL, SPACE_WITHOUT_LABEL } from './shared'
+
+const InlineIndicator = React.forwardRef(
+  ({ variantProps, label, labelPosition, labelMapping, showLabel }, ref) => (
+    <View style={staticStyles.container}>
+      <StackView
+        space={showLabel ? SPACE_WITH_LABEL : SPACE_WITHOUT_LABEL}
+        direction={labelMapping[labelPosition]}
+        tokens={{ alignItems: 'center' }}
+      >
+        <RenderActivityIndicator {...variantProps} ref={ref} label={label} />
+        {showLabel && <Typography>{label}</Typography>}
+      </StackView>
+    </View>
+  )
+)
+
+InlineIndicator.displayName = 'InlineIndicator'
+
+const staticStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    display: Platform.OS === 'web' ? 'inline-flex' : 'flex',
+    alignSelf: 'flex-start'
+  }
+})
+
+InlineIndicator.propTypes = {
+  /**
+   * Shared props
+   * */
+  ...activityIndicatorCommonProps,
+  /**
+   * Whether the indicator sits inline with text/other elements
+   * */
+  inline: PropTypes.bool
+}
+
+export default InlineIndicator

package/src/ActivityIndicator/OverlayIndicator.jsx

@@ -0,0 +1,140 @@
+import React from 'react'
+import { View, Platform, StyleSheet } from 'react-native'
+import PropTypes from 'prop-types'
+import StackView from '../StackView'
+import Typography from '../Typography'
+import RenderActivityIndicator from './RenderActivityIndicator'
+import { BACKDROP_Z_INDEX, BACKDROP_OPACITY, SPACE_WITH_LABEL, SPACE_WITHOUT_LABEL } from './shared'
+import { activityIndicatorCommonProps } from './sharedProptypes'
+
+const recursiveMap = (nodeChildren, fn) =>
+  React.Children.map(nodeChildren, (child) => {
+    if (!React.isValidElement(child)) return child
+    if (child.props?.children) {
+      return fn(
+        React.cloneElement(child, {
+          children: recursiveMap(child.props.children, fn)
+        })
+      )
+    }
+    return fn(child)
+  })
+
+const OverlayIndicator = React.forwardRef(
+  (
+    {
+      variantProps,
+      label,
+      labelPosition,
+      labelMapping,
+      children,
+      inline,
+      showLabel,
+      isActive = true
+    },
+    ref
+  ) => {
+    const safeChildren =
+      Platform.OS === 'web' && isActive
+        ? recursiveMap(children, (c) =>
+            React.isValidElement(c) ? React.cloneElement(c, { role: 'presentation' }) : c
+          )
+        : children
+
+    // inline + children
+    if (inline && children) {
+      return (
+        <View
+          style={[staticStyles.container, Platform.OS === 'web' && staticStyles.inlineContainer]}
+        >
+          <View style={staticStyles.backdropContainer}>{safeChildren}</View>
+          <View style={staticStyles.buttonOverlaySpinner}>
+            <RenderActivityIndicator {...variantProps} ref={ref} label={label} />
+          </View>
+        </View>
+      )
+    }
+
+    // overlay
+    return (
+      <View style={staticStyles.container}>
+        <View style={staticStyles.backdropContainer}>{safeChildren}</View>
+
+        <View
+          style={[
+            staticStyles.overlayContainer,
+            Platform.OS === 'web' && staticStyles.webOverlayContainer
+          ]}
+        >
+          <StackView
+            space={showLabel ? SPACE_WITH_LABEL : SPACE_WITHOUT_LABEL}
+            tokens={{ alignItems: 'center' }}
+            direction={labelMapping[labelPosition]}
+          >
+            <RenderActivityIndicator {...variantProps} ref={ref} label={label} />
+            {showLabel && <Typography>{label}</Typography>}
+          </StackView>
+        </View>
+      </View>
+    )
+  }
+)
+
+OverlayIndicator.displayName = 'OverlayIndicator'
+
+const staticStyles = StyleSheet.create({
+  container: { position: 'relative' },
+  inlineContainer: { display: 'inline-flex' },
+  backdropContainer: { opacity: BACKDROP_OPACITY },
+  overlayContainer: {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    ...Platform.select({
+      ios: { zIndex: BACKDROP_Z_INDEX },
+      android: { elevation: 5 }
+    })
+  },
+
+  webOverlayContainer: {
+    transform: [{ translateX: '-50%' }, { translateY: '-50%' }],
+    zIndex: BACKDROP_Z_INDEX
+  },
+
+  buttonOverlaySpinner: {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    ...Platform.select({
+      web: {
+        transform: 'translate(-50%, -50%)',
+        zIndex: BACKDROP_Z_INDEX
+      },
+      default: {
+        transform: [{ translateX: -0.5 }, { translateY: -0.5 }],
+        zIndex: BACKDROP_Z_INDEX
+      }
+    })
+  }
+})
+
+OverlayIndicator.propTypes = {
+  /**
+   * Shared props
+   * */
+  ...activityIndicatorCommonProps,
+  /**
+   * Background color for overlay
+   * */
+  inline: PropTypes.bool,
+  /**
+   * Children on which the overlay is drawn
+   * */
+  children: PropTypes.node,
+  /**
+   * Controls whether the overlay is active and should apply the presentation role
+   * */
+  isActive: PropTypes.bool
+}
+
+export default OverlayIndicator

package/src/ActivityIndicator/RenderActivityIndicator.jsx

@@ -0,0 +1,82 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Spinner from './Spinner'
+import Dots from './Dots'
+import { DOTS_STYLE } from './shared'
+
+/**
+ * Return <Dots/> or <Spinner/> based on `variant?.dots`.
+ * Reused in all the variants of the component.
+ */
+const RenderActivityIndicator = React.forwardRef(
+  (
+    { variant = {}, dotSize, size, color, indicatorBackgroundColor, thickness, label, isStatic },
+    ref
+  ) => {
+    const { dots, style } = variant || {}
+    const isDots = dots === true || style === DOTS_STYLE
+
+    return isDots ? (
+      <Dots
+        ref={ref}
+        size={dotSize}
+        color={color}
+        indicatorBackgroundColor={indicatorBackgroundColor}
+        label={label}
+        isStatic={isStatic}
+      />
+    ) : (
+      <Spinner
+        ref={ref}
+        size={size}
+        color={color}
+        indicatorBackgroundColor={indicatorBackgroundColor}
+        thickness={thickness}
+        label={label}
+        isStatic={isStatic}
+      />
+    )
+  }
+)
+
+RenderActivityIndicator.displayName = 'RenderActivityIndicator'
+
+RenderActivityIndicator.propTypes = {
+  /**
+   * ActivityIndicator variants
+   * */
+  variant: PropTypes.shape({
+    dots: PropTypes.bool,
+    style: PropTypes.oneOf([DOTS_STYLE])
+  }),
+  /**
+   * Size of the dots
+   * */
+  dotSize: PropTypes.number,
+  /**
+   * Size of the spinner
+   * */
+  size: PropTypes.number,
+  /**
+   * Primary color
+   * */
+  color: PropTypes.string,
+  /**
+   * Secondary color (background) of the indicator
+   * */
+  indicatorBackgroundColor: PropTypes.string,
+  /**
+   * Thickness of the indicator
+   * */
+  thickness: PropTypes.number,
+  /**
+   * Label for the ActivityIndicator
+   * */
+  label: PropTypes.string,
+  /**
+   * if true, there's no animation for ActivityIndicator
+   * */
+  isStatic: PropTypes.bool
+}
+
+export default RenderActivityIndicator

package/src/ActivityIndicator/index.jsx

@@ -1,42 +1,95 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { Platform } from 'react-native'
+import { useScrollBlocking } from '../utils'
 import { useThemeTokens } from '../ThemeProvider'
 import { getTokensPropType, variantProp } from '../utils/props'
 
-import Spinner from './Spinner'
-import Dots from './Dots'
+import FullScreenIndicator from './FullScreenIndicator'
+import OverlayIndicator from './OverlayIndicator'
+import InlineIndicator from './InlineIndicator'
+
+const labelMapping = {
+  top: 'column-reverse',
+  bottom: 'column',
+  left: 'row-reverse',
+  right: 'row'
+}
 
 /**
  * `ActivityIndicator` renders a visual loading state.
  * It does not handle positioning or layout of that visual loader.
  */
-const ActivityIndicator = React.forwardRef(({ variant, tokens, label, isStatic = false }, ref) => {
-  const { size, dotSize, color, indicatorBackgroundColor, thickness } = useThemeTokens(
-    'ActivityIndicator',
-    tokens,
-    variant
-  )
-  return variant?.dots ? (
-    <Dots
-      ref={ref}
-      size={dotSize}
-      color={color}
-      indicatorBackgroundColor={indicatorBackgroundColor}
-      label={label}
-      isStatic={isStatic}
-    />
-  ) : (
-    <Spinner
-      ref={ref}
-      size={size}
-      color={color}
-      indicatorBackgroundColor={indicatorBackgroundColor}
-      thickness={thickness}
-      label={label}
-      isStatic={isStatic}
-    />
-  )
-})
+const ActivityIndicator = React.forwardRef(
+  (
+    {
+      variant,
+      tokens,
+      label,
+      labelPosition = 'bottom',
+      showLabel = true,
+      inline = false,
+      fullScreen = false,
+      overlay = false,
+      isStatic = false,
+      children,
+      fullScreenBackgroundColor
+    },
+    ref
+  ) => {
+    const {
+      size,
+      dotSize,
+      color,
+      indicatorBackgroundColor,
+      fullScreenOverlayBackground,
+      thickness
+    } = useThemeTokens('ActivityIndicator', tokens, variant)
+
+    useScrollBlocking([Platform.OS === 'web' && fullScreen])
+
+    const variantProps = {
+      variant,
+      dotSize,
+      size,
+      color,
+      indicatorBackgroundColor,
+      thickness,
+      isStatic
+    }
+
+    const visibleLabel = showLabel && !!label
+
+    const commonProps = {
+      ref,
+      variantProps,
+      label,
+      labelPosition,
+      labelMapping,
+      showLabel: visibleLabel
+    }
+
+    switch (true) {
+      case fullScreen:
+        return (
+          <FullScreenIndicator
+            {...commonProps}
+            backgroundColor={fullScreenBackgroundColor || fullScreenOverlayBackground}
+          />
+        )
+
+      case overlay:
+        return (
+          <OverlayIndicator {...commonProps} inline={inline} isActive={overlay}>
+            {children}
+          </OverlayIndicator>
+        )
+
+      default:
+        return <InlineIndicator {...commonProps} />
+    }
+  }
+)
 
 ActivityIndicator.displayName = 'ActivityIndicator'
 
@@ -46,11 +99,39 @@ ActivityIndicator.propTypes = {
   /**
    * A visually hidden accessible label describing the action taking place
    */
-  label: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  /**
+   * If true, it should render a static ActivityIndicator
+   */
+  isStatic: PropTypes.bool,
+  /**
+   * Position of the label relative to ActivityIndicator
+   */
+  labelPosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+  /**
+   * show or hide the label
+   */
+  showLabel: PropTypes.bool,
+  /**
+   * If true, the ActivityIndicator will be displayed in full screen mode
+   */
+  fullScreen: PropTypes.bool,
+  /**
+   * If true, the ActivityIndicator will be displayed inline
+   */
+  inline: PropTypes.bool,
+  /**
+   * If true, the ActivityIndicator will be displayed in overlay mode
+   */
+  overlay: PropTypes.bool,
+  /**
+   * Children to be rendered inside ActivityIndicator
+   */
+  children: PropTypes.node,
   /**
-   * If true, it should render a static spinner
+   * Background color of the full screen overlay
    */
-  isStatic: PropTypes.bool
+  fullScreenBackgroundColor: PropTypes.string
 }
 
 export default ActivityIndicator

package/src/ActivityIndicator/shared.js

@@ -51,6 +51,17 @@ export const DOT1_ANIMATION_INPUT_RANGE = [0, 0.1, 0.2, 1]
 export const DOT2_ANIMATION_INPUT_RANGE = [0, 0.3, 0.4, 0.5, 1]
 export const DOT3_ANIMATION_INPUT_RANGE = [0, 0.6, 0.7, 0.8, 1]
 
+// Backdrop
+export const BACKDROP_OPACITY = 0.06
+export const BACKDROP_Z_INDEX = 1400
+
+// Space
+export const SPACE_WITH_LABEL = 3
+export const SPACE_WITHOUT_LABEL = 0
+
+// Style
+export const DOTS_STYLE = 'dots'
+
 export const propTypes = {
   color: PropTypes.string.isRequired,
   baseColor: PropTypes.string,

package/src/ActivityIndicator/sharedProptypes.js

@@ -0,0 +1,62 @@
+import PropTypes from 'prop-types'
+
+/**
+ * PropTypes for the 3 variants of the ActivityIndicator:
+ *   - InlineIndicator
+ *   - OverlayIndicator
+ *   - FullScreenIndicator
+ */
+export const activityIndicatorVariantProps = PropTypes.shape({
+  /**
+   * Indicates the variant style for the ActivityIndicator
+   * */
+  variant: PropTypes.object,
+  /**
+   * Size of the dots
+   * */
+  dotSize: PropTypes.number,
+  /**
+   * Size of the ActivityIndicator Spinner
+   * */
+  size: PropTypes.number,
+  /**
+   * Primary color (Spinner)
+   * */
+  color: PropTypes.string,
+  /**
+   * Secondary color (background) of the indicator
+   * */
+  indicatorBackgroundColor: PropTypes.string,
+  /**
+   * Thickness of the ActivityIndicator Spinner
+   * */
+  thickness: PropTypes.number,
+  /**
+   * Indicates if the ActivityIndicator is static
+   * (not animated)
+   * */
+  isStatic: PropTypes.bool
+}).isRequired
+
+export const activityIndicatorCommonProps = {
+  /**
+   * Props used by RenderActivityIndicator
+   * */
+  variantProps: activityIndicatorVariantProps,
+  /**
+   * Shows or hide the label
+   * */
+  showLabel: PropTypes.bool,
+  /**
+   * A visually hidden accessible label describing the action taking place
+   */
+  label: PropTypes.string,
+  /**
+   * Position of the label relative to ActivityIndicator
+   */
+  labelPosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+  /**
+   * Map of flex-direction position for label
+   * */
+  labelMapping: PropTypes.object.isRequired
+}