Merge pull request #213 from ubilabs/feat/layer-selector

feat(layer-selector): disable compare tab when no main layer is selected

src/scripts/components/layer-selector/layer-selector.tsx

@@ -1,6 +1,7 @@
 import React, {FunctionComponent, useState} from 'react';
 import {useSelector} from 'react-redux';
 import {useIntl} from 'react-intl';
+import {useParams} from 'react-router-dom';
 
 import {layersSelector} from '../../selectors/layers/list';
 import {LayersIcon} from '../icons/layers-icon';
@@ -15,16 +16,19 @@ import styles from './layer-selector.styl';
 const LayerSelector: FunctionComponent = () => {
   const intl = useIntl();
   const layers = useSelector(layersSelector);
+  const {mainLayerId} = useParams();
   const tabs: Tab[] = [
     {
       id: 'main',
       label: intl.formatMessage({id: 'layerSelector.main'}),
-      icon: LayersIcon
+      icon: LayersIcon,
+      disabled: false
     },
     {
       id: 'compare',
       label: intl.formatMessage({id: 'layerSelector.compare'}),
-      icon: CompareIcon
+      icon: CompareIcon,
+      disabled: !mainLayerId
     }
   ];
 
@@ -39,7 +43,6 @@ const LayerSelector: FunctionComponent = () => {
       setIsOpen(true);
       return;
     }
-
     if (activeTabId === id) {
       setIsOpen(false);
     }

src/scripts/components/tab/tab.styl

@@ -10,6 +10,12 @@
   cursor: pointer
   fill: #fff
 
+.disabled
+  border-color: #999
+  background-color: #333
+  color: #999
+  fill: #999
+
 .tabActive
   border: 1px solid #ccc
   background-color: #fff

src/scripts/components/tab/tab.tsx

@@ -7,23 +7,30 @@ interface Props {
   id: string;
   label: string;
   activeTabId: string;
+  disabled: boolean;
   onSelectTabId: (id: string) => void;
 }
 
 const Tab: FunctionComponent<Props> = ({
   id,
   label,
   activeTabId,
+  disabled,
   onSelectTabId,
   children
 }) => {
   const isActive = activeTabId === id;
-  const tabClasses = cx(styles.tab, isActive && styles.tabActive);
+  const tabClasses = cx(
+    styles.tab,
+    isActive && styles.tabActive,
+    disabled && styles.disabled
+  );
+
   return (
     <button
       title={label}
       className={tabClasses}
-      onClick={() => onSelectTabId(id)}>
+      onClick={() => !disabled && onSelectTabId(id)}>
       {children}
     </button>
   );

src/scripts/components/tabs/tabs.tsx

@@ -19,6 +19,7 @@ const Tabs: FunctionComponent<Props> = ({tabs, activeTabId, onTabChanged}) => (
         <Tab
           key={tab.id}
           id={tab.id}
+          disabled={tab.disabled}
           label={tab.label}
           activeTabId={activeTabId}
           onSelectTabId={id => onTabChanged(id)}>

src/scripts/types/tab.d.ts

@@ -3,5 +3,6 @@ import {FunctionComponent} from 'react';
 export interface Tab {
   id: string;
   label: string;
+  disabled: boolean;
   icon?: FunctionComponent;
 }