Add ScrollTabs component

Author: frozenhelium

components/View/FormattedDate/styles.scss

@@ -1,5 +1,6 @@
 @import '../../../stylesheets/base';
 
 .formatted-date {
+    white-space: nowrap;
     font-family: $font-family-monospace;
 }

components/View/ScrollTabs/index.js

@@ -1,46 +1,84 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import List from '../List';
 import Button from '../../Action/Button';
+import HashManager from '../../General/HashManager';
+import List from '../List';
 import iconNames from '../../../constants/iconNames';
+import { addClassName } from '../../../utils/common';
+
 import styles from './styles.scss';
 
 const propTypes = {
+    active: PropTypes.string,
+    children: PropTypes.node,
     className: PropTypes.string,
+    itemClassName: PropTypes.string,
+    defaultHash: PropTypes.string,
+    onClick: PropTypes.func,
+    replaceHistory: PropTypes.bool,
     tabs: PropTypes.shape({
         dummy: PropTypes.string,
     }),
-    onClick: PropTypes.func,
-    active: PropTypes.string,
+    useHash: PropTypes.bool,
+    modifier: PropTypes.func,
 };
 
 const defaultProps = {
     active: undefined,
+    children: null,
     className: '',
-    tabs: [],
+    itemClassName: '',
+    defaultHash: undefined,
     onClick: () => {},
+    replaceHistory: false,
+    tabs: {},
+    useHash: false,
+    modifier: undefined,
 };
 
-export default class ScrollTabs extends React.Component {
+
+export default class FixedTabs extends React.Component {
     static propTypes = propTypes;
     static defaultProps = defaultProps;
 
+    constructor(props) {
+        super(props);
+        this.state = {
+            hash: undefined,
+        };
+        this.tabsContainerRef = React.createRef();
+        this.mainContainerRef = React.createRef();
+    }
+
+    componentDidMount() {
+        const { current: tabsContainer } = this.tabsContainerRef;
+        const { current: mainContainer } = this.mainContainerRef;
+
+        if (tabsContainer.scrollWidth > tabsContainer.clientWidth) {
+            addClassName(mainContainer, styles.scroll);
+        }
+    }
+
     getClassName = () => {
         const { className } = this.props;
 
         const classNames = [
             className,
             'scroll-tabs',
+            styles.scrollTabs,
         ];
 
         return classNames.join(' ');
     }
 
     getTabClassName = (isActive) => {
+        const { itemClassName } = this.props;
+
         const classNames = [
+            itemClassName,
             styles.tab,
-            'scroll-tab',
+            'fixed-tab',
         ];
 
         if (isActive) {
@@ -51,69 +89,129 @@ export default class ScrollTabs extends React.Component {
         return classNames.join(' ');
     }
 
-    handleTabClick = (key) => {
-        const { onClick } = this.props;
+    handleHashChange = (hash) => {
+        this.setState({ hash });
+    }
+
+    handleTabClick = (key, e) => {
+        const {
+            onClick,
+            useHash,
+            replaceHistory,
+        } = this.props;
+
+        if (useHash && replaceHistory) {
+            window.location.replace(`#/${key}`);
+            e.preventDefault();
+        }
+
         onClick(key);
     }
 
-    renderTab = (key, data) => {
+    handleLeftButtonClick = () => {
+        const { current: tabsContainer } = this.tabsContainerRef;
+
+        tabsContainer.scrollLeft -= 48;
+    }
+
+    handleRightButtonClick = () => {
+        const { current: tabsContainer } = this.tabsContainerRef;
+
+        tabsContainer.scrollLeft += 48;
+    }
+
+    renderTab = (_, data) => {
         const {
             active,
             tabs,
+            useHash,
+            modifier,
         } = this.props;
-        const isActive = data === active;
+
+        if (!tabs[data]) {
+            return null;
+        }
+
+        const onClick = (e) => { this.handleTabClick(data, e); };
+        const content = modifier ? modifier(data) : tabs[data];
+
+        if (!useHash) {
+            const isActive = data === active;
+            const className = this.getTabClassName(isActive);
+
+            return (
+                <button
+                    onClick={onClick}
+                    className={className}
+                    key={data}
+                    type="button"
+                >
+                    { content }
+                </button>
+            );
+        }
+
+        const { hash } = this.state;
+
+        const isActive = hash === data;
         const className = this.getTabClassName(isActive);
-        const onClick = () => { this.handleTabClick(data); };
 
         return (
-            <button
+            <a
+                onClick={onClick}
+                href={`#/${data}`}
                 className={className}
                 key={data}
-                onClick={onClick}
-                type="button"
             >
-                { tabs[data] }
-            </button>
+                { content }
+            </a>
         );
     }
 
     render() {
         const {
             tabs,
+            useHash,
+            defaultHash,
         } = this.props;
 
+        // FIXME: generate tabList when tabs change
         const tabList = Object.keys(tabs);
-        const leftButtonClassNames = [
-            styles.scrollButton,
-            styles.scrollButtonLeft,
-        ];
-        const rightButtonClassNames = [
-            styles.scrollButton,
-            styles.scrollButtonRight,
-        ];
-
+        const className = this.getClassName();
         return (
-            <div className={styles.scrollTabs}>
+            <div
+                ref={this.mainContainerRef}
+                className={className}
+            >
+                <HashManager
+                    tabs={tabs}
+                    useHash={useHash}
+                    defaultHash={defaultHash}
+                    onHashChange={this.handleHashChange}
+                />
                 <Button
-                    className={leftButtonClassNames.join(' ')}
-                    transparent
-                    smallVerticalPadding
-                    smallHorizontalPadding
-                    onClick={this.handleScrollLeftButtonClick}
                     iconName={iconNames.chevronLeft}
+                    transparent
+                    className={styles.leftButton}
+                    onClick={this.handleLeftButtonClick}
                 />
-                <List
-                    data={tabList}
-                    modifier={this.renderTab}
-                />
-                <div className={styles.void} />
+                <div
+                    ref={this.tabsContainerRef}
+                    className={styles.tabsContainer}
+                >
+                    <List
+                        data={tabList}
+                        modifier={this.renderTab}
+                    />
+                    <div className={styles.blank}>
+                        { this.props.children }
+                    </div>
+                </div>
                 <Button
-                    className={rightButtonClassNames.join(' ')}
-                    transparent
-                    smallVerticalPadding
-                    smallHorizontalPadding
-                    onClick={this.handleScrollLeftButtonClick}
                     iconName={iconNames.chevronRight}
+                    transparent
+                    className={styles.rightButton}
+                    onClick={this.handleRightButtonClick}
                 />
             </div>
         );

components/View/ScrollTabs/styles.scss

@@ -2,44 +2,69 @@
 
 .scroll-tabs {
     display: flex;
-    position: relative;
-    width: 200px;
-    overflow: hidden;
+    justify-content: center;
+    background-color: $color-foreground;
 
-    .tab {
+    .left-button {
+        display: none;
+        align-self: center;
         flex-shrink: 0;
-        outline: 0;
-        border: 0;
-        border-bottom: $width-separator-medium solid $color-separator;
-        background-color: transparent;
-        cursor: pointer;
-        padding: $spacing-small $spacing-medium;
-        color: $color-text-label-on-light;
-        font-family: inherit;
-        font-size: inherit;
-
-        &.active {
-            border-bottom-color: $color-accent;
-            color: $color-text;
-        }
+        padding: $spacing-small-alt;
     }
 
-    .scroll-button {
-        position: absolute;
+    .right-button {
+        display: none;
         align-self: center;
+        flex-shrink: 0;
+        padding: $spacing-small-alt;
     }
 
-    .scroll-button-left {
-        left: 0;
-    }
+    .tabs-container {
+        display: flex;
+        flex-grow: 1;
+        overflow-x: auto;
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+
+        .tab {
+            user-select: none;
+            flex-shrink: 0;
+            outline: 0;
+            border: 0;
+            border-bottom: $width-separator-medium solid $color-separator;
+            background-color: transparent;
+            cursor: pointer;
+            padding: $spacing-small-alt $spacing-medium;
+            text-transform: uppercase;
+            color: $color-text-label;
+            font-family: inherit;
+            font-size: inherit;
 
-    .scroll-button-right {
-        right: 0;
+            &.active {
+                border-bottom-color: $color-accent;
+                color: $color-text;
+            }
+        }
+
+        .blank {
+            display: flex;
+            align-items: center;
+            align-self: stretch;
+            flex-grow: 1;
+            justify-content: flex-end;
+            border-bottom: $width-separator-medium solid $color-separator;
+        }
     }
 
-    .void {
-        align-self: stretch;
-        flex-grow: 1;
-        border-bottom: $width-separator-medium solid $color-separator;
+    &.scroll {
+        .left-button {
+            display: initial;
+        }
+
+        .right-button {
+            display: initial;
+        }
     }
 }

stylesheets/_base.scss

@@ -4,6 +4,8 @@
 @import 'dimens';
 @import 'utils';
 
+@import url("https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css");
+
 $font-family-sans-serif: sans-serif !default;
 $font-family-monospace: monospace !default;
 $font-family-icons: 'Ionicons' !default;