♻️ refactor: 优化实现代码

arvinxx · Mar 23, 2021 · 6dbd35f · 6dbd35f
1 parent 8f30eaa
commit 6dbd35f
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 73 deletions.
diff --git a/docs/components/common/examples/TrafficLight/DisableMax.tsx b/docs/components/common/examples/TrafficLight/DisableMax.tsx
@@ -27,13 +27,17 @@ const DisableMaximize = () => {
         <TrafficLight {...props} disableMaximize />
       </Block>
       <Block title={'移除最大化:'}>
-        <TrafficLight {...props} showMaximize={false} />
+        <TrafficLight {...props} enableMaximize={false} />
       </Block>
       <Block title={'移除最小化:'}>
-        <TrafficLight {...props} showMinimize={false} />
+        <TrafficLight {...props} enableMinimize={false} />
       </Block>
       <Block title={'移除最小与最大化:'}>
-        <TrafficLight {...props} showMinimize={false} showMaximize={false} />
+        <TrafficLight
+          {...props}
+          enableMinimize={false}
+          enableMaximize={false}
+        />
       </Block>
     </div>
   );

diff --git a/packages/macos-traffic-light/src/CloseIcon.tsx b/packages/macos-traffic-light/src/CloseIcon.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import type { FC } from 'react';
 import './icon.less';
 
@@ -9,10 +10,11 @@ const CloseIcon: FC = () => {
       height="6"
       viewBox="0 0 6 6"
       xmlns="http://www.w3.org/2000/svg"
+      data-testid="close-icon"
     >
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M0.157283 0.151369C0.365251 -0.0521572 0.70045 -0.050193 0.905971 0.155756L3 2.25414L5.09403 0.155756C5.29955 -0.050193 5.63475 -0.0521572 5.84272 0.151369C6.05069 0.354895 6.05267 0.686839 5.84715 0.892788L3.74431 3L5.84715 5.10721C6.05267 5.31316 6.05069 5.64511 5.84272 5.84863C5.63475 6.05216 5.29955 6.05019 5.09403 5.84424L3 3.74586L0.905971 5.84424C0.70045 6.05019 0.365251 6.05216 0.157283 5.84863C-0.0506851 5.64511 -0.0526685 5.31316 0.152853 5.10721L2.25569 3L0.152853 0.892788C-0.0526685 0.686839 -0.0506851 0.354895 0.157283 0.151369Z"
       />
     </svg>

diff --git a/packages/macos-traffic-light/src/MaximizeIcon.tsx b/packages/macos-traffic-light/src/MaximizeIcon.tsx
@@ -1,7 +1,8 @@
+import React from 'react';
 import type { FC } from 'react';
 import './icon.less';
 
-const CloseIcon: FC = () => {
+const MaximizeIcon: FC = () => {
   return (
     <svg
       className="avx-traffic-light-icon"
@@ -10,14 +11,15 @@ const CloseIcon: FC = () => {
       viewBox="0 0 6 6"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      data-testid="maximize-icon"
     >
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M1.45679 0.869873L5.16357 4.23975C5.48486 4.53174 6 4.30371 6 3.86963V0.5C6 0.223877 5.77612 0 5.5 0H1.79321C1.33618 0 1.11865 0.5625 1.45679 0.869873ZM0.853516 1.85352L4.14648 5.14648C4.46143 5.46143 4.23828 6 3.79297 6H0.5C0.223877 6 0 5.77612 0 5.5V2.20703C0 1.76172 0.538574 1.53857 0.853516 1.85352Z"
       />
     </svg>
   );
 };
 
-export default CloseIcon;
+export default MaximizeIcon;
diff --git a/packages/macos-traffic-light/src/MinimizeIcon.tsx b/packages/macos-traffic-light/src/MinimizeIcon.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import type { FC } from 'react';
 import './icon.less';
 
@@ -9,8 +10,9 @@ const MinimizeIcon: FC = () => {
       height="2"
       viewBox="0 0 8 2"
       xmlns="http://www.w3.org/2000/svg"
+      data-testid="minimize-icon"
     >
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M8 2L0 2L0 0L8 0V2Z" />
+      <path fillRule="evenodd" clipRule="evenodd" d="M8 2L0 2L0 0L8 0V2Z" />
     </svg>
   );
 };

diff --git a/packages/macos-traffic-light/src/index.tsx b/packages/macos-traffic-light/src/index.tsx
@@ -8,7 +8,7 @@ import MinimizeIcon from './MinimizeIcon';
 
 import { useTrafficLight } from './useTrafficLight';
 
-import styles from './style.less';
+import './style.less';
 
 interface TrafficLightProps {
   /**
@@ -25,15 +25,15 @@ interface TrafficLightProps {
   maximize?: (event: MouseEvent) => void;
 
   /**
-   * 显示最小化
+   * 允许最小化
    * @default true
    */
-  showMinimize?: boolean;
+  enableMinimize?: boolean;
   /**
    * 显示最大化
    * @default true
    */
-  showMaximize?: boolean;
+  enableMaximize?: boolean;
   /**
    * 禁用最大化
    * @default false
@@ -44,48 +44,52 @@ const TrafficLight: FC<TrafficLightProps> = ({
   close,
   minimize,
   maximize,
-  showMinimize = true,
-  showMaximize = true,
+  enableMinimize = true,
+  enableMaximize = true,
   disableMaximize,
 }) => {
   const { hover, isFocus, hoverOff, hoverOn } = useTrafficLight();
   return (
     <div
-      className={styles.container}
+      className="avx-traffic-light-container"
       onMouseEnter={hoverOn}
       onMouseLeave={hoverOff}
+      data-testid="container"
     >
       <div
         onClick={close}
         className={cls({
-          [styles.close]: true,
-          [styles.blur]: !isFocus,
+          'avx-traffic-light-close': true,
+          'avx-traffic-light-blur': !isFocus,
         })}
+        data-testid="close"
       >
         {hover ? <CloseIcon /> : null}
       </div>
-      {showMinimize ? (
+      {enableMinimize ? (
         <div
           onClick={minimize}
           className={cls({
-            [styles.minus]: true,
-            [styles.blur]: !isFocus,
+            'avx-traffic-light-minus': true,
+            'avx-traffic-light-blur': !isFocus,
           })}
+          data-testid="minimize"
         >
           {hover ? <MinimizeIcon /> : null}
         </div>
       ) : null}
-      {showMaximize ? (
+      {enableMaximize ? (
         <div
           onClick={(e) => {
             if (disableMaximize) return;
             maximize(e);
           }}
           className={cls({
-            [styles.max]: true,
-            [styles.blur]: !isFocus,
-            [styles.disable]: disableMaximize,
+            'avx-traffic-light-max': true,
+            'avx-traffic-light-blur': !isFocus,
+            'avx-traffic-light-disable': disableMaximize,
           })}
+          data-testid="maximize"
         >
           {!disableMaximize && hover ? <MaximizeIcon /> : null}
         </div>

diff --git a/packages/macos-traffic-light/src/style.less b/packages/macos-traffic-light/src/style.less
@@ -8,63 +8,57 @@
 @mac-control-icon-max: #28c940;
 @mac-control-icon-max-pressed: #1f9a31;
 
-.container {
-  display: flex;
-  -webkit-app-region: no-drag;
-  > * {
-    margin-right: 8px;
+.avx-traffic-light {
+  &-container {
+    display: flex;
+    -webkit-app-region: no-drag;
+    > * {
+      margin-right: 8px;
+    }
   }
-}
-
-.icon {
-  position: relative;
-  width: 12px;
-  height: 12px;
-  border: 1px solid @mac-control-icon-border;
-  border-radius: 100%;
-}
 
-.size {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  color: @mac-control-icon-color;
-  font-size: 6px;
-  transform: translate(-50%, -50%);
-}
-.close {
-  .icon;
+  &-blur {
+    background: @mac-control-icon-bg;
+  }
 
-  background: @mac-control-icon-close;
-  &:active {
-    background: @mac-control-icon-close-pressed;
+  &-disable {
+    background: @mac-control-icon-bg;
+    &:active {
+      background: @mac-control-icon-bg;
+    }
   }
-}
 
-.minus {
-  .icon;
+  &-close {
+    .base-icon;
 
-  background: @mac-control-icon-minus;
-  &:active {
-    background: @mac-control-icon-minus-pressed;
+    background: @mac-control-icon-close;
+    &:active {
+      background: @mac-control-icon-close-pressed;
+    }
   }
-}
-.max {
-  .icon;
 
-  background: @mac-control-icon-max;
-  &:active {
-    background: @mac-control-icon-max-pressed;
+  &-minus {
+    .base-icon;
+
+    background: @mac-control-icon-minus;
+    &:active {
+      background: @mac-control-icon-minus-pressed;
+    }
   }
-}
+  &-max {
+    .base-icon;
 
-.blur {
-  background: @mac-control-icon-bg;
+    background: @mac-control-icon-max;
+    &:active {
+      background: @mac-control-icon-max-pressed;
+    }
+  }
 }
 
-.disable {
-  background: @mac-control-icon-bg;
-  &:active {
-    background: @mac-control-icon-bg;
-  }
+.base-icon {
+  position: relative;
+  width: 12px;
+  height: 12px;
+  border: 1px solid @mac-control-icon-border;
+  border-radius: 100%;
 }