maisonsport-common-ui/src/atoms/ActivityIndicator/index.js

Suite of styled-components to be consumed by the React-Native App and by the Web (via React-Native for Web)

// eslint-disable-next-line no-unused-vars
import React from 'react';
import styled, { ThemeProvider } from 'styled-components/native';
import { variant } from 'styled-system';

import Theme from '../../theme';

const activityIndicatorVariants = variant({ scale: 'activityIndicator' });
const StyledActivityIndicator = styled.ActivityIndicator.attrs((props) => {
  const { color, size } = activityIndicatorVariants(props);
  return {
    color,
    size,
  };
})``;

function ActivityIndicator({ noWrapTheme, ...props }) {
  if (noWrapTheme) {
    // eslint-disable-next-line react/jsx-props-no-spreading
    return <StyledActivityIndicator {...props} />;
  }

  return (
    <ThemeProvider theme={Theme}>
      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
      <StyledActivityIndicator {...props} />
    </ThemeProvider>
  );
}

ActivityIndicator.defaultProps = {};

export default ActivityIndicator;