@git-temporal/git-temporal-react/lib/app/components/HorizontalScroller.js

<!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const styles_1 = require("app/styles");
const debounce_1 = require("app/utilities/debounce");
const CaretRightIcon_1 = require("app/components/CaretRightIcon");
const CaretLeftIcon_1 = require("app/components/CaretLeftIcon");
const initialState = {
    showingLeftTouch: true,
    showingRightTouch: true,
};
const farOuterStyle = {
    display: 'flex',
    width: '100%',
    position: 'relative',
};
const outerStyle = {
    _extends: 'fill',
    overflowX: 'scroll',
    position: 'relative',
};
const innerContainerStyle = {
    position: 'relative',
    display: 'block',
};
const touchArea = {
    position: 'absolute',
    top: 0,
    width: 40,
    height: '100%',
    verticalAlign: 'middle',
    zIndex: 2,
    marginTop: 5,
    opacity: 0.5,
    color: '@colors.selectable',
};
const leftTouchStyle = {
    _extends: touchArea,
    left: -10,
};
const rightTouchStyle = {
    _extends: touchArea,
    right: -20,
};
const iconStyle = {
    transform: 'scaleY(3)',
    maxHeight: '50%',
    top: '12%',
    position: 'absolute',
};
class HorizontalScroller extends react_1.default.Component {
    constructor(props) {
        super(props);
        this.state = initialState;
        this.onLeftTouchClick = () => {
            const innerEl = this.innerContainerRef.current;
            const outerEl = this.outerContainerRef.current;
            const innerBoundingRect = innerEl.getBoundingClientRect();
            let newScrollLeft = outerEl.scrollLeft - innerBoundingRect.width + 50;
            if (newScrollLeft < 0) {
                newScrollLeft = 0;
            }
            outerEl.scrollLeft = newScrollLeft;
        };
        this.onLeftTouchDoubleClick = () => {
            const outerEl = this.outerContainerRef.current;
            outerEl.scrollLeft = 0;
        };
        this.onRightTouchClick = () => {
            const innerEl = this.innerContainerRef.current;
            const outerEl = this.outerContainerRef.current;
            const innerBoundingRect = innerEl.getBoundingClientRect();
            const maxScrollLeft = innerEl.scrollWidth - innerBoundingRect.width;
            let newScrollLeft = outerEl.scrollLeft + innerBoundingRect.width - 50;
            if (newScrollLeft > maxScrollLeft) {
                newScrollLeft = maxScrollLeft;
            }
            outerEl.scrollLeft = newScrollLeft;
        };
        this.onRightTouchDoubleClick = () => {
            const innerEl = this.innerContainerRef.current;
            const outerEl = this.outerContainerRef.current;
            const innerBoundingRect = innerEl.getBoundingClientRect();
            const maxScrollLeft = innerEl.scrollWidth - innerBoundingRect.width;
            outerEl.scrollLeft = maxScrollLeft;
        };
        this.innerContainerRef = react_1.default.createRef();
        this.outerContainerRef = react_1.default.createRef();
        this.onScroll = this.onScroll.bind(this);
        this.debouncedOnScroll = debounce_1.debounce(this.onScroll, 50);
    }
    componentDidMount() {
        this.showHideTouchControls();
    }
    componentDidUpdate(prevProps) {
        this.showHideTouchControls();
        if (prevProps.scrollLeft !== this.props.scrollLeft) {
            this.outerContainerRef.current.scrollLeft = this.props.scrollLeft;
        }
    }
    render() {
        return (react_1.default.createElement("div", { style: styles_1.style(farOuterStyle) },
            react_1.default.createElement("div", { style: styles_1.style(outerStyle, this.props.style), ref: this.outerContainerRef, onScroll: this.debouncedOnScroll, "data-testid": "outerContainer" },
                react_1.default.createElement("div", { style: styles_1.style(innerContainerStyle, this.props.innerStyle), ref: this.innerContainerRef, "data-testid": "innerContainer" }, this.props.children)),
            this.state.showingLeftTouch && (react_1.default.createElement("div", { style: styles_1.style(leftTouchStyle), onClick: this.onLeftTouchClick, onDoubleClick: this.onLeftTouchDoubleClick, "data-testid": "leftTouch" },
                react_1.default.createElement(CaretLeftIcon_1.CaretLeftIcon, { width: 40, height: 100, style: styles_1.style(iconStyle, this.props.iconStyle) }),
                ' ')),
            this.state.showingRightTouch && (react_1.default.createElement("div", { style: styles_1.style(rightTouchStyle), onClick: this.onRightTouchClick, onDoubleClick: this.onRightTouchDoubleClick, "data-testid": "rightTouch" },
                react_1.default.createElement(CaretRightIcon_1.CaretRightIcon, { width: 40, height: 100, style: styles_1.style(iconStyle, this.props.iconStyle) })))));
    }
    showHideTouchControls() {
        const innerEl = this.innerContainerRef.current;
        const outerEl = this.outerContainerRef.current;
        const innerBoundingRect = innerEl.getBoundingClientRect();
        const showingLeftTouch = outerEl.scrollLeft > 0;
        const showingRightTouch = innerEl.scrollWidth > outerEl.clientWidth &&
            outerEl.scrollLeft + innerBoundingRect.width < innerEl.scrollWidth;
        const shouldUpdate = showingLeftTouch !== this.state.showingLeftTouch ||
            showingRightTouch !== this.state.showingRightTouch;
        if (shouldUpdate) {
            this.setState({ showingLeftTouch, showingRightTouch });
        }
    }
    onScroll() {
        this.showHideTouchControls();
        this.props.onScroll &&
            this.props.onScroll(this.outerContainerRef.current.scrollLeft);
    }
}
exports.HorizontalScroller = HorizontalScroller;