style: pretiffy code

DTStack · Nov 20, 2020 · ec2579d · ec2579d
1 parent afab6dc
commit ec2579d
Show file tree

Hide file tree

Showing 10 changed files with 174 additions and 71 deletions.
diff --git a/src/common/css.ts b/src/common/css.ts
@@ -1,9 +1,8 @@
-
 /**
  * px = em * parentElementFontSize
  * @param em em value
  * TODO: Use Template Literal Types replace fontSize typing
  */
 export function em2Px(em: number, fontSize: number): number {
     return em * fontSize;
-}
+}
diff --git a/src/common/dom.ts b/src/common/dom.ts
@@ -68,8 +68,8 @@ export function getRelativePosition(
 export function getEventPosition(e: React.MouseEvent) {
     return {
         x: e.clientX,
-        y: e.clientY
-    }
+        y: e.clientY,
+    };
 }
 
 export function findParentByClassName<T>(element, className): T | null {

diff --git a/src/components/contextview/index.tsx b/src/components/contextview/index.tsx
@@ -61,7 +61,10 @@ export function useContextView(props?: IContextViewProps): IContextView {
 
     if (!contextView) {
         contextView = document.createElement('div');
-        contextView.className = classNames(claName, Utils.isMacOs() ? 'mac' : null);
+        contextView.className = classNames(
+            claName,
+            Utils.isMacOs() ? 'mac' : null
+        );
         contextView.style.display = 'none';
         const root = document.getElementById('molecule');
         if (!root) {

diff --git a/src/components/icon/index.tsx b/src/components/icon/index.tsx
@@ -9,6 +9,13 @@ export interface IIcon {
 export function Icon(props: IIcon) {
     const { className, type, ...others } = props;
     return (
-        <span className={classNames(className, 'codicon', prefixClaName(type, 'codicon'))} {...others}></span>
-    )
-}
+        <span
+            className={classNames(
+                className,
+                'codicon',
+                prefixClaName(type, 'codicon')
+            )}
+            {...others}
+        ></span>
+    );
+}
diff --git a/src/components/menu/menu.tsx b/src/components/menu/menu.tsx
@@ -9,25 +9,43 @@ export interface IMenu extends ISubMenu {}
 export const defaultMenuClassName = 'menu';
 
 export function Menu(props: React.PropsWithChildren<IMenu>) {
-    const { className, mode = MenuMode.Vertical, data = [], children, ...others } = props;
+    const {
+        className,
+        mode = MenuMode.Vertical,
+        data = [],
+        children,
+        ...others
+    } = props;
     let content = children;
-    const claNames = classNames(prefixClaName(defaultMenuClassName), mode, className);
+    const claNames = classNames(
+        prefixClaName(defaultMenuClassName),
+        mode,
+        className
+    );
 
     if (data.length > 0) {
         const renderMenusByData = (menus: IMenu[]) => {
             return menus.map((item: IMenu) => {
                 if (item.data && item.data.length > 0) {
-                    return <SubMenu mode={mode} {...item}>{ renderMenusByData(item.data) }</SubMenu> 
+                    return (
+                        <SubMenu mode={mode} {...item}>
+                            {renderMenusByData(item.data)}
+                        </SubMenu>
+                    );
                 }
-                return <MenuItem key={item.id} {...item}>{item.name}</MenuItem>
-            })
-        }
+                return (
+                    <MenuItem key={item.id} {...item}>
+                        {item.name}
+                    </MenuItem>
+                );
+            });
+        };
         content = renderMenusByData(data);
     }
 
     return (
         <ul className={claNames} {...others}>
-            { content }
+            {content}
         </ul>
     );
 }
diff --git a/src/components/menu/menuItem.tsx b/src/components/menu/menuItem.tsx
@@ -20,29 +20,44 @@ export interface IMenuItem extends HTMLElementProps {
      */
     keybinding?: string;
     /**
-     * Custom render 
+     * Custom render
      */
     render?: (data: IMenuItem) => ReactNode;
     onClick?: (e: React.MouseEvent, item?: IMenuItem) => void;
     sortIndex?: number;
 }
 
 export function MenuItem(props: React.PropsWithChildren<IMenuItem>) {
-    const { icon, className, onClick, keybinding, render, children, name } = props;
+    const {
+        icon,
+        className,
+        onClick,
+        keybinding,
+        render,
+        children,
+        name,
+    } = props;
     const events = {
-        onClick: function(e: React.MouseEvent) {
+        onClick: function (e: React.MouseEvent) {
             if (onClick) {
-                onClick(e, props)
+                onClick(e, props);
             }
-        }
-    }
+        },
+    };
     return (
-        <li className={classNames(defaultMenuItemClassName, className)} {...events}>
+        <li
+            className={classNames(defaultMenuItemClassName, className)}
+            {...events}
+        >
             <a className="menu-item-container">
                 <Icon className="menu-item-check" type={icon || ''} />
-                <span className="menu-item-label" title={name as string}>{ render ? render(props) : children }</span>
-                { keybinding ? <span className="keybinding">{keybinding}</span> : null }
+                <span className="menu-item-label" title={name as string}>
+                    {render ? render(props) : children}
+                </span>
+                {keybinding ? (
+                    <span className="keybinding">{keybinding}</span>
+                ) : null}
             </a>
         </li>
-    )
+    );
 }
diff --git a/src/components/menu/style.scss b/src/components/menu/style.scss
@@ -88,6 +88,6 @@ $menu: 'menu';
     display: block;
     font-size: 13px;
     position: fixed;
-    // transition-delay: 0.2s; Bug 
+    // transition-delay: 0.2s; Bug
     z-index: 1;
 }
diff --git a/src/components/menu/subMenu.tsx b/src/components/menu/subMenu.tsx
@@ -4,14 +4,18 @@ import { classNames, prefixClaName } from 'mo/common/className';
 import { Icon } from '../icon';
 import { Menu } from './menu';
 import { useEffect } from 'react';
-import { findParentByClassName, getRelativePosition, TriggerEvent } from 'mo/common/dom';
+import {
+    findParentByClassName,
+    getRelativePosition,
+    TriggerEvent,
+} from 'mo/common/dom';
 import { defaultMenuItemClassName, IMenuItem } from './menuItem';
 import { em2Px } from 'mo/common/css';
 
 export enum MenuMode {
     Vertical = 'vertical',
-    Horizontal = 'horizontal'
-};
+    Horizontal = 'horizontal',
+}
 
 export function isHorizontal(mode: MenuMode) {
     return mode === MenuMode.Horizontal;
@@ -27,87 +31,128 @@ export interface ISubMenu extends IMenuItem {
      */
     trigger?: TriggerEvent;
     icon?: string;
-    data?:  ISubMenu[];
+    data?: ISubMenu[];
     mode?: MenuMode;
 }
 
 const defaultSubMenuClassName = prefixClaName('sub-menu');
 
 function hideSubMenu(target?: HTMLElement) {
     const container = target || document.body;
-    const all = container.querySelectorAll<HTMLMenuElement>('.'+defaultSubMenuClassName);
-    all?.forEach(ele =>  {
+    const all = container.querySelectorAll<HTMLMenuElement>(
+        '.' + defaultSubMenuClassName
+    );
+    all?.forEach((ele) => {
         ele.style.visibility = 'hidden';
     });
 }
 
-const hideAll =  () => {
+const hideAll = () => {
     hideSubMenu();
 };
 
 const hideAfterLeftWindow = () => {
     if (document.hidden) {
         hideSubMenu();
     }
-}
+};
 
 let timer;
 
 export function SubMenu(props: React.PropsWithChildren<ISubMenu>) {
-    const { className, name, render, data = [], mode = MenuMode.Vertical, icon, children, ...others } = props;
+    const {
+        className,
+        name,
+        render,
+        data = [],
+        mode = MenuMode.Vertical,
+        icon,
+        children,
+        ...others
+    } = props;
     const cNames = classNames(defaultSubMenuClassName, mode, className);
     const isAlignHorizontal = isHorizontal(mode);
 
     const events = {
         onMouseOver: (event: React.MouseEvent<any, any>) => {
             clearTimeout(timer);
 
-            const nextMenuItem = findParentByClassName<HTMLLIElement>(event.target, defaultMenuItemClassName);
-            const nextSubMenu = nextMenuItem?.querySelector<HTMLMenuElement>('.' + defaultSubMenuClassName);
+            const nextMenuItem = findParentByClassName<HTMLLIElement>(
+                event.target,
+                defaultMenuItemClassName
+            );
+            const nextSubMenu = nextMenuItem?.querySelector<HTMLMenuElement>(
+                '.' + defaultSubMenuClassName
+            );
             if (!nextMenuItem || !nextSubMenu) return;
 
-            const prevMenuItem = findParentByClassName<HTMLLIElement>(event.relatedTarget, defaultMenuItemClassName);
-            const prevSubMenu = prevMenuItem?.querySelector<HTMLMenuElement>('.' + defaultSubMenuClassName);
-
-            if (prevMenuItem && prevSubMenu && !prevMenuItem.contains(nextMenuItem)) {
+            const prevMenuItem = findParentByClassName<HTMLLIElement>(
+                event.relatedTarget,
+                defaultMenuItemClassName
+            );
+            const prevSubMenu = prevMenuItem?.querySelector<HTMLMenuElement>(
+                '.' + defaultSubMenuClassName
+            );
+
+            if (
+                prevMenuItem &&
+                prevSubMenu &&
+                !prevMenuItem.contains(nextMenuItem)
+            ) {
                 hideAll();
             }
 
             const domRect = nextMenuItem.getBoundingClientRect();
             nextSubMenu.style.visibility = 'visible';
             const pos = getRelativePosition(nextSubMenu, domRect);
-            
-            if (isAlignHorizontal) pos.y =  pos.y + domRect.height;
+
+            if (isAlignHorizontal) pos.y = pos.y + domRect.height;
             else {
                 pos.x = pos.x + domRect.width;
-                // The vertical menu default has padding 0.5em so that need reduce the padding 
-                const fontSize = getComputedStyle(nextSubMenu).getPropertyValue('font-size');
-                const paddingTop = em2Px(0.5, parseInt(fontSize.replace('px', ''), 10));
+                // The vertical menu default has padding 0.5em so that need reduce the padding
+                const fontSize = getComputedStyle(nextSubMenu).getPropertyValue(
+                    'font-size'
+                );
+                const paddingTop = em2Px(
+                    0.5,
+                    parseInt(fontSize.replace('px', ''), 10)
+                );
                 pos.y = pos.y - paddingTop;
             }
-            
+
             nextSubMenu.style.cssText = `
                 left: ${pos.x}px;
                 top: ${pos.y}px;
             `;
         },
-        onMouseOut: function(event: React.MouseEvent) {
-            const nextMenuItem = findParentByClassName<HTMLLIElement>(event.relatedTarget, defaultMenuItemClassName) ;
+        onMouseOut: function (event: React.MouseEvent) {
+            const nextMenuItem = findParentByClassName<HTMLLIElement>(
+                event.relatedTarget,
+                defaultMenuItemClassName
+            );
             if (!nextMenuItem) return;
-    
+
             const prevMenuItem = event.currentTarget as HTMLLIElement;
-            const prevSubMenu = prevMenuItem?.querySelector('.' + defaultSubMenuClassName);
-            const nextSubMenu = nextMenuItem?.querySelector('.' + defaultSubMenuClassName);
-            // Hide the prev subMenu when the next menuItem hasn't subMenu and the prev MenuItem 
+            const prevSubMenu = prevMenuItem?.querySelector(
+                '.' + defaultSubMenuClassName
+            );
+            const nextSubMenu = nextMenuItem?.querySelector(
+                '.' + defaultSubMenuClassName
+            );
+            // Hide the prev subMenu when the next menuItem hasn't subMenu and the prev MenuItem
             // subMenu not contains it.
-            if (!nextSubMenu && prevSubMenu && !prevMenuItem.contains(nextMenuItem)) {
+            if (
+                !nextSubMenu &&
+                prevSubMenu &&
+                !prevMenuItem.contains(nextMenuItem)
+            ) {
                 hideAll();
                 // delayHide(prevMenuItem);
             }
         },
-        onClick: function(event: React.MouseEvent) {
+        onClick: function (event: React.MouseEvent) {
             event.stopPropagation();
-        }
+        },
     };
 
     useEffect(() => {
@@ -119,24 +164,39 @@ export function SubMenu(props: React.PropsWithChildren<ISubMenu>) {
             window.removeEventListener('click', hideAll);
             window.removeEventListener('visibilitychange', hideAfterLeftWindow);
             clearTimeout(timer);
-        }
-    }, [])
+        };
+    }, []);
 
     const chevronType = isAlignHorizontal ? 'down' : 'right';
-    const subMenuContent = data.length > 0 ? 
-    <Menu className={cNames} style={{ visibility: 'hidden' }} data={data}/> : 
-    <Menu className={cNames} style={{ visibility: 'hidden' }}> { children } </Menu>;
-
-    console.log('mode', mode, isAlignHorizontal)
-
-    return  (
+    const subMenuContent =
+        data.length > 0 ? (
+            <Menu
+                className={cNames}
+                style={{ visibility: 'hidden' }}
+                data={data}
+            />
+        ) : (
+            <Menu className={cNames} style={{ visibility: 'hidden' }}>
+                {' '}
+                {children}{' '}
+            </Menu>
+        );
+
+    console.log('mode', mode, isAlignHorizontal);
+
+    return (
         <li className={defaultMenuItemClassName} {...events} {...others}>
             <a className="menu-item-container">
                 <Icon className="menu-item-check" type={icon || ''} />
-                <span className="menu-item-label">{ render ? render(props) : name }</span>
-                <Icon className="menu-item-indicator" type={`chevron-${chevronType}`}/>
+                <span className="menu-item-label">
+                    {render ? render(props) : name}
+                </span>
+                <Icon
+                    className="menu-item-indicator"
+                    type={`chevron-${chevronType}`}
+                />
             </a>
-            { subMenuContent }
+            {subMenuContent}
         </li>
-    )
+    );
 }