maisonsport-common-ui/src/atoms/Box/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 react/jsx-props-no-spreading */
import React from 'react';
import styled, { ThemeProvider } from 'styled-components/native';
import {
  color,
  space,
  layout,
  borders,
  flexbox,
} from 'styled-system';
import A11y from 'accessible-system';

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

export const testBoxID = 'box';

const StyledView = styled.View.attrs(A11y)`
  ${space}
  ${borders}
  ${color}
  ${layout}
  ${flexbox}
`;

function Box({
  noWrapTheme, ...props
}) {
  const extraProps = { testID: testBoxID, pointerEvents: 'box-none' };
  const { onPress } = props;

  if (onPress) {
    delete extraProps.pointerEvents;
  }

  if (noWrapTheme) {
    // eslint-disable-next-line react/jsx-props-no-spreading
    return <StyledView {...extraProps} {...props} />;
  }

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

Box.defaultProps = {};

export default Box;