New: Project Aphrodite

frontend/src/Components/Scroller/OverlayScroller.css

@@ -0,0 +1,15 @@
+.scroller {
+  /* Placeholder */
+}
+
+.thumb {
+  min-height: 50px;
+  border: 1px solid transparent;
+  border-radius: 5px;
+  background-color: $scrollbarBackgroundColor;
+  background-clip: padding-box;
+
+  &:hover {
+    background-color: $scrollbarHoverBackgroundColor;
+  }
+}

frontend/src/Components/Scroller/OverlayScroller.js

@@ -0,0 +1,127 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { Scrollbars } from 'react-custom-scrollbars';
+import { scrollDirections } from 'Helpers/Props';
+import styles from './OverlayScroller.css';
+
+class OverlayScroller extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this._scroller = null;
+    this._isScrolling = false;
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      scrollTop
+    } = this.props;
+
+    if (!this._isScrolling && scrollTop != null && scrollTop !== prevProps.scrollTop) {
+      this._scroller.scrollTop(scrollTop);
+    }
+  }
+
+  //
+  // Control
+
+  _setScrollRef = (ref) => {
+    this._scroller = ref;
+  }
+
+  _renderThumb = (props) => {
+    return (
+      <div
+        className={this.props.trackClassName}
+        {...props}
+      />
+    );
+  }
+
+  _renderView = (props) => {
+    return (
+      <div
+        className={this.props.className}
+        {...props}
+      />
+    );
+  }
+
+  //
+  // Listers
+
+  onScrollStart = () => {
+    this._isScrolling = true;
+  }
+
+  onScrollStop = () => {
+    this._isScrolling = false;
+  }
+
+  onScroll = (event) => {
+    const {
+      scrollTop,
+      scrollLeft
+    } = event.currentTarget;
+
+    this._isScrolling = true;
+    const onScroll = this.props.onScroll;
+
+    if (onScroll) {
+      onScroll({ scrollTop, scrollLeft });
+    }
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      autoHide,
+      autoScroll,
+      children
+    } = this.props;
+
+    return (
+      <Scrollbars
+        ref={this._setScrollRef}
+        autoHide={autoHide}
+        hideTracksWhenNotNeeded={autoScroll}
+        renderThumbHorizontal={this._renderThumb}
+        renderThumbVertical={this._renderThumb}
+        renderView={this._renderView}
+        onScrollStart={this.onScrollStart}
+        onScrollStop={this.onScrollStop}
+        onScroll={this.onScroll}
+      >
+        {children}
+      </Scrollbars>
+    );
+  }
+
+}
+
+OverlayScroller.propTypes = {
+  className: PropTypes.string,
+  trackClassName: PropTypes.string,
+  scrollTop: PropTypes.number,
+  scrollDirection: PropTypes.oneOf([scrollDirections.NONE, scrollDirections.HORIZONTAL, scrollDirections.VERTICAL]).isRequired,
+  autoHide: PropTypes.bool.isRequired,
+  autoScroll: PropTypes.bool.isRequired,
+  children: PropTypes.node,
+  onScroll: PropTypes.func
+};
+
+OverlayScroller.defaultProps = {
+  className: styles.scroller,
+  trackClassName: styles.thumb,
+  scrollDirection: scrollDirections.VERTICAL,
+  autoHide: false,
+  autoScroll: true
+};
+
+export default OverlayScroller;

frontend/src/Components/Scroller/Scroller.css

@@ -0,0 +1,28 @@
+.scroller {
+  @add-mixin scrollbar;
+  @add-mixin scrollbarTrack;
+  @add-mixin scrollbarThumb;
+}
+
+.none {
+  overflow-x: hidden;
+  overflow-y: hidden;
+}
+
+.vertical {
+  overflow-x: hidden;
+  overflow-y: scroll;
+
+  &.autoScroll {
+    overflow-y: auto;
+  }
+}
+
+.horizontal {
+  overflow-x: scroll;
+  overflow-y: hidden;
+
+  &.autoScroll {
+    overflow-x: auto;
+  }
+}

frontend/src/Components/Scroller/Scroller.js

@@ -0,0 +1,81 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import classNames from 'classnames';
+import { scrollDirections } from 'Helpers/Props';
+import styles from './Scroller.css';
+
+class Scroller extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this._scroller = null;
+  }
+
+  componentDidMount() {
+    const {
+      scrollTop
+    } = this.props;
+
+    if (this.props.scrollTop != null) {
+      this._scroller.scrollTop = scrollTop;
+    }
+  }
+
+  //
+  // Control
+
+  _setScrollerRef = (ref) => {
+    this._scroller = ref;
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      className,
+      scrollDirection,
+      autoScroll,
+      children,
+      scrollTop,
+      onScroll,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <div
+        ref={this._setScrollerRef}
+        className={classNames(
+          className,
+          styles.scroller,
+          styles[scrollDirection],
+          autoScroll && styles.autoScroll
+        )}
+        {...otherProps}
+      >
+        {children}
+      </div>
+    );
+  }
+
+}
+
+Scroller.propTypes = {
+  className: PropTypes.string,
+  scrollDirection: PropTypes.oneOf([scrollDirections.NONE, scrollDirections.HORIZONTAL, scrollDirections.VERTICAL]).isRequired,
+  autoScroll: PropTypes.bool.isRequired,
+  scrollTop: PropTypes.number,
+  children: PropTypes.node,
+  onScroll: PropTypes.func
+};
+
+Scroller.defaultProps = {
+  scrollDirection: scrollDirections.VERTICAL,
+  autoScroll: true
+};
+
+export default Scroller;