StandardAppLayout.tsx 5.29 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
/**
 * See the NOTICE file distributed with this work for additional information
 * regarding copyright ownership.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

17
import React, { ReactNode, useEffect } from 'react';
Andrey Azov's avatar
Andrey Azov committed
18 19 20
import classNames from 'classnames';
import noop from 'lodash/noop';

21 22 23
import { BreakpointWidth } from 'src/global/globalConfig';
import usePrevious from 'src/shared/hooks/usePrevious';

Andrey Azov's avatar
Andrey Azov committed
24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
import { ReactComponent as Chevron } from 'static/img/shared/chevron-right.svg';
import { ReactComponent as CloseIcon } from 'static/img/shared/close.svg';

import styles from './StandardAppLayout.scss';

enum SidebarModeToggleAction {
  OPEN = 'open',
  CLOSE = 'close'
}

type SidebarModeToggleProps = {
  onClick: () => void;
  showAction: SidebarModeToggleAction;
};

type StandardAppLayoutProps = {
  mainContent: ReactNode;
  sidebarContent: ReactNode;
  sidebarToolstripContent?: ReactNode;
43
  sidebarNavigation: ReactNode;
Andrey Azov's avatar
Andrey Azov committed
44 45 46 47 48 49
  topbarContent: ReactNode;
  isSidebarOpen: boolean;
  onSidebarToggle: () => void;
  isDrawerOpen: boolean;
  drawerContent?: ReactNode;
  onDrawerClose: () => void;
50
  viewportWidth: BreakpointWidth;
Andrey Azov's avatar
Andrey Azov committed
51 52 53
};

const StandardAppLayout = (props: StandardAppLayoutProps) => {
54 55 56 57 58 59 60 61 62
  // TODO: is there any way to run this smarter?
  // Ideally, it should run only once per app life cycle to check whether user is on small screen and close the sidebar if they are
  useEffect(() => {
    if (props.viewportWidth < BreakpointWidth.DESKTOP && props.isSidebarOpen) {
      props.onSidebarToggle();
    }
  }, []);

  const mainClassNames = classNames(
Andrey Azov's avatar
Andrey Azov committed
63
    styles.main,
Andrey Azov's avatar
Andrey Azov committed
64
    props.isSidebarOpen ? styles.mainDefault : styles.mainFullWidth
Andrey Azov's avatar
Andrey Azov committed
65 66
  );

67 68 69
  const shouldShowSidebarNavigation =
    props.viewportWidth > BreakpointWidth.LAPTOP || props.isSidebarOpen;

70 71 72 73
  const topbarClassnames = classNames(
    styles.topbar,
    { [styles.topbar_withSidebarNavigation]: shouldShowSidebarNavigation },
    { [styles.topbar_withoutSidebarNavigation]: !shouldShowSidebarNavigation }
Andrey Azov's avatar
Andrey Azov committed
74 75
  );

76 77
  const sidebarWrapperClassnames = useSidebarWrapperClassNames(props);

Andrey Azov's avatar
Andrey Azov committed
78 79
  return (
    <div className={styles.standardAppLayout}>
80
      <div className={topbarClassnames}>
Andrey Azov's avatar
Andrey Azov committed
81
        {props.topbarContent}
82
        {shouldShowSidebarNavigation && props.sidebarNavigation}
Andrey Azov's avatar
Andrey Azov committed
83 84
      </div>
      <div className={styles.mainWrapper}>
85
        <div className={mainClassNames}>{props.mainContent}</div>
Andrey Azov's avatar
Andrey Azov committed
86 87
        <div className={sidebarWrapperClassnames}>
          {props.isDrawerOpen && <DrawerWindow onClick={props.onDrawerClose} />}
88
          <div className={styles.sidebarToolstrip}>
Andrey Azov's avatar
Andrey Azov committed
89 90
            <SidebarModeToggle
              onClick={
91 92 93
                props.isDrawerOpen
                  ? () => props.onDrawerClose()
                  : () => props.onSidebarToggle()
Andrey Azov's avatar
Andrey Azov committed
94 95 96 97 98 99 100
              }
              showAction={
                props.isSidebarOpen
                  ? SidebarModeToggleAction.CLOSE
                  : SidebarModeToggleAction.OPEN
              }
            />
101
            <div className={styles.sidebarToolstripContent}>
Andrey Azov's avatar
Andrey Azov committed
102 103 104
              {props.sidebarToolstripContent}
            </div>
          </div>
105
          <div className={styles.sidebar}>{props.sidebarContent}</div>
Andrey Azov's avatar
Andrey Azov committed
106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142
          <div className={styles.drawer}>
            <CloseIcon
              className={styles.drawerClose}
              onClick={props.onDrawerClose}
            />
            {props.drawerContent || null}
          </div>
        </div>
      </div>
    </div>
  );
};

StandardAppLayout.defaultProps = {
  isDrawerOpen: false,
  onDrawerClose: noop
};

const SidebarModeToggle = (props: SidebarModeToggleProps) => {
  const chevronClasses = classNames(styles.sidebarModeToggleChevron, {
    [styles.sidebarModeToggleChevronOpen]:
      props.showAction === SidebarModeToggleAction.OPEN
  });

  return (
    <div className={styles.sidebarModeToggle}>
      <Chevron className={chevronClasses} onClick={props.onClick} />
    </div>
  );
};

// left-most transparent part of the drawer allowing the user to see what element is behind the drawer;
// when clicked, will close the drawer
const DrawerWindow = (props: { onClick: () => void }) => {
  return <div className={styles.drawerWindow} onClick={props.onClick} />;
};

143 144 145 146 147 148 149 150
const useSidebarWrapperClassNames = (props: StandardAppLayoutProps) => {
  const previousSidebarOpen = usePrevious(props.isSidebarOpen);
  // do not use transition for opening and closing of the sidebar
  const isInstantaneous =
    !props.isSidebarOpen || // <-- sidebar about to close
    (props.isSidebarOpen && !previousSidebarOpen); // <-- sidebar about to open

  return classNames(
151 152 153
    styles.sidebarWrapper,
    { [styles.sidebarWrapperOpen]: props.isSidebarOpen },
    { [styles.sidebarWrapperClosed]: !props.isSidebarOpen },
154
    {
155
      [styles.sidebarWrapperDrawerOpen]: props.isDrawerOpen ?? false
156 157 158 159 160
    },
    { [styles.instantaneous]: isInstantaneous }
  );
};

Andrey Azov's avatar
Andrey Azov committed
161
export default StandardAppLayout;