src/components/ui/wrapper/index.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

import classnames from 'classnames';
import { Component, type ReactNode } from 'react';
import injectStyle, { type WithStylesProps } from 'react-jss';

// eslint-disable-next-line no-use-before-define
interface IProps extends WithStylesProps<typeof styles> {
  children: ReactNode;
  className?: string;
  identifier: string;
  // eslint-disable-next-line react/no-unused-prop-types
  noMargin?: boolean;
}

const styles = {
  container: {
    marginBottom: (props: IProps) => (props.noMargin ? 0 : 20),
  },
};

class WrapperComponent extends Component<IProps> {
  render() {
    const { children, classes, className, identifier } = this.props;

    return (
      <div
        className={classnames({
          [`${classes.container}`]: true,
          [`${className}`]: className,
        })}
        data-type={identifier}
      >
        {children}
      </div>
    );
  }
}

export default injectStyle(styles, { injectTheme: true })(WrapperComponent);