scroll-shadow.tsx

import * as React from 'react';
import {Component} from 'react';
import {ScrollableContent, ScrollableWrapper} from './styled';

export interface ShadowColors {
  inactive: string;
  active: string;
}

export interface ScrollShadowProps {
  height?: string;
  bottomShadowColors?: ShadowColors;
  topShadowColors?: ShadowColors;
  shadowSize?: number;
}

export class ScrollShadow extends Component<ScrollShadowProps> {
  static defaultProps = {
    shadowSize: 2,
    bottomShadowColors: {
      inactive: 'white',
      active: 'gray'
    },
    topShadowColors: {
      inactive: 'white',
      active: 'gray'
    }
  };
  render() {
    const {
      children,
      height,
      bottomShadowColors,
      topShadowColors,
      shadowSize
    } = this.props;
    const style = {height};

    return (
      <ScrollableWrapper
        size={shadowSize}
        topShadowActiveColor={topShadowColors.active}
        bottomShadowActiveColor={bottomShadowColors.active}
      >
        <ScrollableContent
          size={shadowSize}
          topShadowInactiveColor={topShadowColors.inactive}
          bottomShadowInactiveColor={bottomShadowColors.inactive}
          style={style}
        >
          {children}
        </ScrollableContent>
      </ScrollableWrapper>
    );
  }
}

export default ScrollShadow;