Styled Component example

IndentStyled.js

import AppPropTypes from 'common/types/AppPropTypes';
import styled, { css } from 'styled-components';
import { applyIfNotNull } from 'styles/utils';

const sizeMap = ['Zero', 'Xs', 'Sm', 'Md', 'Bg', 'Lg'];

const applySize = (size, inverse, theme) => {
  return applyIfNotNull(size, () => (`${inverse ? '-' : ''}${theme[`margin${sizeMap[size]}`]}`));
};

const applyIndentStyles = ({ inverse }) => ({ around, left, right,
  top, bottom, type, horizontal, vertical, theme, lineHeight, width }) => css`
  display: ${type};
  width: ${width};
  line-height: ${lineHeight};
  margin: ${applySize(around, inverse, theme)};

  margin-left: ${applySize(horizontal, inverse, theme)};
  margin-right: ${applySize(horizontal, inverse, theme)};

  margin-top: ${applySize(vertical, inverse, theme)};
  margin-bottom: ${applySize(vertical, inverse, theme)};

  margin-left: ${applySize(left, inverse, theme)};
  margin-right: ${applySize(right, inverse, theme)};
  margin-top: ${applySize(top, inverse, theme)};
  margin-bottom: ${applySize(bottom, inverse, theme)};
`;

const CommonPropTypes = {
  around: AppPropTypes.intRange(0, 5),
  vertical: AppPropTypes.intRange(0, 5),
  horizontal: AppPropTypes.intRange(0, 5),
  left: AppPropTypes.intRange(0, 5),
  right: AppPropTypes.intRange(0, 5),
  top: AppPropTypes.intRange(0, 5),
  bottom: AppPropTypes.intRange(0, 5),
};

const commonDefaultProps = {
  type: 'inline-block',
  width: 'auto',
  lineHeight: 'normal',
  around: null,
  vertical: null,
  horizontal: null,
  left: null,
  right: null,
  top: null,
  bottom: null,
};

/**
 * Компонент для организации отступов между компонентами
 */
const Root = styled.div`
  ${applyIndentStyles({ inverse: false })}
`;

Root.propTypes = {
  ...CommonPropTypes,
}

Root.defaultProps = {
  ...commonDefaultProps,
}

/**
 * Компонент для организации отрицательных отступов между компонентами
 */
const Negative = styled.div`
  ${applyIndentStyles({ inverse: true })}
`;

Negative.propTypes = {
  ...CommonPropTypes,
}

Negative.defaultProps = {
  ...commonDefaultProps,
}

export { Negative };
export default Root;