feat: NEO sider's toggle button and refactoring

lablup · Nov 15, 2024 · f7c1327 · f7c1327
1 parent aecdb0d
commit f7c1327
Show file tree

Hide file tree

Showing 7 changed files with 379 additions and 202 deletions.
diff --git a/react/src/components/BAISider.tsx b/react/src/components/BAISider.tsx
@@ -1,36 +1,39 @@
 import Flex from './Flex';
-import { ConfigProvider, Grid, SiderProps, Typography, theme } from 'antd';
+import { ConfigProvider, Grid, SiderProps, theme } from 'antd';
 import Sider from 'antd/es/layout/Sider';
+import classNames from 'classnames';
 import _ from 'lodash';
-import React from 'react';
+import React, { forwardRef } from 'react';
 
 export interface BAISiderProps extends SiderProps {
   logoCollapsed?: React.ReactNode;
   logo?: React.ReactNode;
   logoTitleCollapsed?: React.ReactNode;
   logoTitle?: React.ReactNode;
-  bottomText?: React.ReactNode;
 }
 
-export const DEFAULT_COLLAPSED_WIDTH = 74;
-const BAISider: React.FC<BAISiderProps> = ({
-  children,
-  logo,
-  logoCollapsed,
-  logoTitle,
-  logoTitleCollapsed,
-  bottomText,
-  theme: siderTheme,
-  ...otherProps
-}) => {
-  const { token } = theme.useToken();
-  const { Text } = Typography;
-  const { xs } = Grid.useBreakpoint();
+export const COLLAPSED_SIDER_WIDTH = 74;
+export const SIDER_WIDTH = 240;
+const BAISider = forwardRef<HTMLDivElement, BAISiderProps>(
+  (
+    {
+      children,
+      logo,
+      logoCollapsed,
+      logoTitle,
+      logoTitleCollapsed,
+      theme: siderTheme,
+      ...otherProps
+    },
+    ref,
+  ) => {
+    const { token } = theme.useToken();
+    const { xs } = Grid.useBreakpoint();
 
-  return (
-    <>
-      <style>
-        {`
+    return (
+      <>
+        <style>
+          {`
           .bai-sider .ant-layout-sider-children {
             display: flex;
             flex-direction: column;
@@ -54,100 +57,69 @@ const BAISider: React.FC<BAISiderProps> = ({
             -webkit-app-region: no-drag;
           }
         `}
-      </style>
-      <Sider
-        width={240}
-        breakpoint="md"
-        style={{
-          overflowX: 'hidden',
-          overflowY: 'auto',
-          height: '100vh',
-          position: 'sticky',
-          top: 0,
-          left: 0,
-          scrollbarColor: 'auto',
-        }}
-        {...otherProps}
-        collapsedWidth={
-          xs
-            ? 0
-            : _.isNumber(otherProps.collapsedWidth)
-              ? otherProps.collapsedWidth
-              : DEFAULT_COLLAPSED_WIDTH
-        }
-        theme={siderTheme}
-        className="bai-sider"
-      >
-        <ConfigProvider
-          theme={{
-            algorithm: siderTheme === 'dark' ? theme.darkAlgorithm : undefined,
+        </style>
+        <Sider
+          ref={ref}
+          width={SIDER_WIDTH}
+          breakpoint="md"
+          style={{
+            height: '100vh',
+            scrollbarColor: 'auto',
           }}
+          {...otherProps}
+          collapsedWidth={
+            xs
+              ? 0
+              : _.isNumber(otherProps.collapsedWidth)
+                ? otherProps.collapsedWidth
+                : COLLAPSED_SIDER_WIDTH
+          }
+          theme={siderTheme}
+          className={classNames('bai-sider', otherProps.className)}
+          trigger={null}
         >
-          <Flex
-            direction="column"
-            justify="center"
-            align={otherProps.collapsed ? 'center' : 'start'}
-            style={{
-              transition: 'all 0.2s ease-in-out',
-              backgroundColor: token.colorPrimary,
-              padding: otherProps.collapsed ? undefined : '0 30px',
-              height: token.Layout?.headerHeight || 60,
-              marginBottom: token.marginXL,
-              position: 'sticky',
-              top: 0,
+          <ConfigProvider
+            theme={{
+              algorithm:
+                siderTheme === 'dark' ? theme.darkAlgorithm : undefined,
             }}
-            className={'logo-and-text-container draggable'}
           >
-            <div className="logo-img-wrap non-draggable">
-              <div style={{ display: otherProps.collapsed ? 'none' : 'block' }}>
-                {logo}
-              </div>
-              <div style={{ display: otherProps.collapsed ? 'block' : 'none' }}>
-                {logoCollapsed}
-              </div>
-            </div>
-            {/* <div className="logo-title-wrap non-draggable">
-              <Typography.Text
-                style={{
-                  fontSize: 16,
-                  lineHeight: '16px',
-                  fontWeight: 200,
-                  whiteSpace: 'nowrap',
-                }}
-              >
-                {otherProps.collapsed ? logoTitleCollapsed : logoTitle}
-              </Typography.Text>
-            </div> */}
-          </Flex>
-          {children}
-          {bottomText && (
-            <>
-              <Flex style={{ flex: 1 }} />
+            <Flex direction="column" align="stretch" style={{ height: '100%' }}>
               <Flex
-                justify="center"
                 direction="column"
+                justify="center"
+                align={otherProps.collapsed ? 'center' : 'start'}
                 style={{
-                  width: '100%',
-                  padding: 30,
-                  textAlign: 'center',
+                  transition: 'all 0.2s ease-in-out',
+                  backgroundColor: token.colorPrimary,
+                  padding: otherProps.collapsed ? undefined : '0 30px',
+                  height: token.Layout?.headerHeight || 60,
+                  position: 'sticky',
+                  top: 0,
+                  zIndex: 1,
                 }}
+                className={'logo-and-text-container draggable'}
               >
-                <Text
-                  type="secondary"
-                  style={{
-                    fontSize: '12px',
-                    wordBreak: 'normal',
-                  }}
-                >
-                  {bottomText}
-                </Text>
+                <div className="logo-img-wrap non-draggable">
+                  <div
+                    style={{ display: otherProps.collapsed ? 'none' : 'block' }}
+                  >
+                    {logo}
+                  </div>
+                  <div
+                    style={{ display: otherProps.collapsed ? 'block' : 'none' }}
+                  >
+                    {logoCollapsed}
+                  </div>
+                </div>
               </Flex>
-            </>
-          )}
-        </ConfigProvider>
-      </Sider>
-    </>
-  );
-};
+              {children}
+            </Flex>
+          </ConfigProvider>
+        </Sider>
+      </>
+    );
+  },
+);
 
 export default BAISider;
diff --git a/react/src/components/MainLayout/MainLayout.tsx b/react/src/components/MainLayout/MainLayout.tsx
@@ -1,5 +1,6 @@
 import { useCustomThemeConfig } from '../../helper/customThemeConfig';
 import { useBAISettingUserState } from '../../hooks/useBAISetting';
+import useKeyboardShortcut from '../../hooks/useKeyboardShortcut';
 import { useThemeMode } from '../../hooks/useThemeMode';
 import BAIContentWithDrawerArea from '../BAIContentWithDrawerArea';
 import BAIErrorBoundary from '../BAIErrorBoundary';
@@ -51,6 +52,13 @@ function MainLayout() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [compactSidebarActive]);
 
+  useKeyboardShortcut((event) => {
+    if (event.key === '[') {
+      event.preventDefault();
+      setSideCollapsed((v) => !v);
+    }
+  });
+
   // const currentDomainName = useCurrentDomainValue();
   const { token } = theme.useToken();
   const webUIRef = useRef<HTMLElement>(null);
@@ -132,6 +140,9 @@ function MainLayout() {
               !compactSidebarActive && setSideCollapsed(false);
             }
           }}
+          onCollapse={(collapsed) => {
+            setSideCollapsed(collapsed);
+          }}
           webuiplugins={webUIPlugins}
         />
       </Suspense>