fix: fix editor tabs cannot scroll (#219)

Author: mortalYoung

src/components/scrollable/index.tsx

@@ -6,6 +6,7 @@ import { prefixClaName, classNames } from 'mo/common/className';
 export interface IScrollbarProps extends ScrollbarProps {
     autoHideThumb?: boolean;
     isShowShadow?: boolean;
+    trackStyle?: React.CSSProperties;
 }
 
 const defaultSrollableClassName = prefixClaName('scrollbar');
@@ -16,7 +17,13 @@ const defaultSrollableClassName = prefixClaName('scrollbar');
  * https://github.com/xobotyi/react-scrollbars-custom/issues/46
  */
 export function Scrollable(props: IScrollbarProps) {
-    const { className, children, isShowShadow = false, ...custom } = props;
+    const {
+        className,
+        children,
+        isShowShadow = false,
+        trackStyle,
+        ...custom
+    } = props;
     const scroller = React.useRef<Scrollbar>(null);
 
     const [isScrolling, setIsScrolling] = useState(false);
@@ -40,27 +47,33 @@ export function Scrollable(props: IScrollbarProps) {
 
     const trackProps = useMemo(
         () => ({
-            renderer: ({ elementRef, style, ...restProps }: any) => (
-                <span
-                    {...restProps}
-                    ref={elementRef}
-                    style={{
-                        ...style,
-                        opacity: isShow ? 1 : 0,
-                        transition: 'opacity 0.4s ease-in-out',
-                    }}
-                    onMouseEnter={onMouseEnter}
-                    onMouseLeave={onMouseLeave}
-                />
-            ),
+            renderer: ({ elementRef, style, ...restProps }: any) => {
+                // [TODO]: I don't know how to code it in a perfect way
+                restProps.children.props.style.background = '#bfbfbf66';
+                return (
+                    <span
+                        {...restProps}
+                        ref={elementRef}
+                        style={{
+                            ...style,
+                            opacity: isShow ? 1 : 0,
+                            transition: 'opacity 0.4s ease-in-out',
+                            background: 'transparent',
+                            ...trackStyle,
+                        }}
+                    />
+                );
+            },
         }),
-        [isShow, onMouseEnter, onMouseLeave]
+        [isShow, trackStyle]
     );
 
     return (
         <Scrollbar
             className={claNames}
             ref={scroller}
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
             {...(custom as any)}
             wrapperProps={{
                 renderer: ({ elementRef, style, key, ...restProps }) => {

src/components/scrollable/style.scss

@@ -17,11 +17,9 @@ $react-custom-scrollbars: '.ScrollbarsCustom';
 }
 
 #{$react-custom-scrollbars} {
-    &-Scroller {
-        height: 100%;
-    }
-
-    &-Content {
+    &-Scroller,
+    &-Content,
+    &-Wrapper {
         height: 100%;
     }
 }

src/components/tabs/style.scss

@@ -2,23 +2,15 @@
 
 #{$tabs} {
     height: 100%;
-    height: 100%;
-    overflow-x: auto;
-    overflow-y: hidden;
     position: relative;
     user-select: none;
-    width: 100%;
 
     &__header {
         align-items: center;
         display: flex;
         flex-flow: row nowrap;
         height: 35px;
         justify-content: flex-start;
-        overflow: hidden;
-        overflow-x: inherit;
-        overflow-y: hidden;
-        width: 100%;
     }
 
     &__content {
@@ -43,6 +35,7 @@
         box-sizing: border-box;
         cursor: pointer;
         display: flex;
+        flex: 0 0 auto;
         font-size: 13px;
         height: 100%;
         max-width: 300px;

src/workbench/editor/group.tsx

@@ -62,13 +62,12 @@ export function EditorGroup(props: IEditorGroupProps & IEditorController) {
         <div className={groupClassName}>
             <div className={groupHeaderClassName}>
                 <div className={groupTabsClassName}>
-                    <Scrollable>
+                    <Scrollable noScrollY trackStyle={{ height: 3 }}>
                         <Tabs
                             editable={true}
                             type="card"
                             data={data}
                             onMoveTab={onMoveTab}
-                            style={{ overflow: 'hidden' }}
                             onSelectTab={onSelectTab}
                             onContextMenu={handleTabContextMenu}
                             activeTab={isActiveGroup ? tab.id : ''}