✨ feat: 优化接口定义

BREAKING CHANGES: 调整最大化最小化等接口用法
arvinxx · Sep 21, 2021 · dd9ea51 · dd9ea51
1 parent b397b06
commit dd9ea51
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 35 deletions.
diff --git a/docs/components/common/examples/TrafficLight/Basic.tsx b/docs/components/common/examples/TrafficLight/Basic.tsx
@@ -5,13 +5,13 @@ const Basic = () => {
   return (
     <div>
       <TrafficLight
-        close={() => {
+        onClose={() => {
           alert('Pressed closed');
         }}
-        minimize={() => {
+        onMinimize={() => {
           alert('Pressed minimize');
         }}
-        maximize={() => {
+        onMaximize={() => {
           alert('Pressed maximize');
         }}
       />

diff --git a/docs/components/common/examples/TrafficLight/DisableMax.tsx b/docs/components/common/examples/TrafficLight/DisableMax.tsx
@@ -27,13 +27,13 @@ const DisableMaximize = () => {
         <TrafficLight {...props} disableMaximize />
       </Block>
       <Block title={'移除最大化:'}>
-        <TrafficLight {...props} showMaximize={false} />
+        <TrafficLight {...props} maximizable={false} />
       </Block>
       <Block title={'移除最小化:'}>
-        <TrafficLight {...props} showMinimize={false} />
+        <TrafficLight {...props} minimizable={false} />
       </Block>
       <Block title={'移除最小与最大化:'}>
-        <TrafficLight {...props} showMinimize={false} showMaximize={false} />
+        <TrafficLight {...props} minimizable={false} maximizable={false} />
       </Block>
     </div>
   );

diff --git a/packages/macos-traffic-light/README.md b/packages/macos-traffic-light/README.md
@@ -21,14 +21,14 @@ import TrafficLight from '@arvinxu/macos-traffic-light';
 const Demo = () => {
   return (
     <TrafficLight
-      close={() => {
+      onClose={() => {
         alert('Pressed closed');
       }}
-      minimize={() => {
-        alert('Pressed minimize');
+      onMinimize={() => {
+        alert('Pressed onMinimize');
       }}
-      maximize={() => {
-        alert('Pressed maximize');
+      onMaximize={() => {
+        alert('Pressed onMaximize');
       }}
     />
   );

diff --git a/packages/macos-traffic-light/src/index.tsx b/packages/macos-traffic-light/src/index.tsx
@@ -14,25 +14,25 @@ interface TrafficLightProps {
   /**
    * 关闭事件
    */
-  close?: (event: MouseEvent) => void;
+  onClose?: (event: MouseEvent) => void;
   /**
    * 最小化事件
    */
-  minimize?: (event: MouseEvent) => void;
+  onMinimize?: (event: MouseEvent) => void;
   /**
    * 显示最小化图标
    * @default true
    */
-  showMinimize?: boolean;
+  minimizable?: boolean;
   /**
    * 最大化事件
    */
-  maximize?: (event: MouseEvent) => void;
+  onMaximize?: (event: MouseEvent) => void;
   /**
    * 显示最大化图标
    * @default true
    */
-  showMaximize?: boolean;
+  maximizable?: boolean;
   /**
    * 禁用最大化交互
    * @default false
@@ -41,11 +41,11 @@ interface TrafficLightProps {
 }
 
 const TrafficLight: FC<TrafficLightProps> = ({
-  close,
-  minimize,
-  maximize,
-  showMinimize = true,
-  showMaximize = true,
+  onClose,
+  onMinimize,
+  onMaximize,
+  minimizable = true,
+  maximizable = true,
   disableMaximize,
 }) => {
   const { hover, isFocus, hoverOff, hoverOn } = useTrafficLight();
@@ -60,39 +60,39 @@ const TrafficLight: FC<TrafficLightProps> = ({
       data-testid="container"
     >
       <div
-        onClick={close}
+        onClick={onClose}
         className={cls({
           'avx-traffic-light-close': true,
           'avx-traffic-light-blur': isBlur,
         })}
-        data-testid="close"
+        data-testid="onClose"
       >
         {hover ? <CloseIcon /> : null}
       </div>
-      {showMinimize ? (
+      {minimizable ? (
         <div
-          onClick={minimize}
+          onClick={onMinimize}
           className={cls({
             'avx-traffic-light-minus': true,
             'avx-traffic-light-blur': isBlur,
           })}
-          data-testid="minimize"
+          data-testid="onMinimize"
         >
           {hover ? <MinimizeIcon /> : null}
         </div>
       ) : null}
-      {showMaximize ? (
+      {maximizable ? (
         <div
           onClick={(e) => {
             if (disableMaximize) return;
-            maximize(e);
+            onMaximize?.(e);
           }}
           className={cls({
             'avx-traffic-light-max': true,
             'avx-traffic-light-blur': isBlur,
             'avx-traffic-light-disable': disableMaximize,
           })}
-          data-testid="maximize"
+          data-testid="onMaximize"
         >
           {!disableMaximize && hover ? <MaximizeIcon /> : null}
         </div>

diff --git a/packages/macos-traffic-light/tests/__snapshots__/index.test.tsx.snap b/packages/macos-traffic-light/tests/__snapshots__/index.test.tsx.snap
@@ -8,15 +8,15 @@ exports[`TrafficLight 默认状态 1`] = `
   >
     <div
       class="avx-traffic-light-close"
-      data-testid="close"
+      data-testid="onClose"
     />
     <div
       class="avx-traffic-light-minus"
-      data-testid="minimize"
+      data-testid="onMinimize"
     />
     <div
       class="avx-traffic-light-max"
-      data-testid="maximize"
+      data-testid="onMaximize"
     />
   </div>
 </div>

diff --git a/packages/macos-traffic-light/tests/index.test.tsx b/packages/macos-traffic-light/tests/index.test.tsx
@@ -26,7 +26,7 @@ describe('TrafficLight', () => {
 
   it('关闭最大化和最小化', () => {
     const { queryByTestId } = render(
-      <TrafficLight showMaximize={false} showMinimize={false} />,
+      <TrafficLight maximizable={false} minimizable={false} />,
     );
     const ctn = queryByTestId('container');
 
@@ -39,7 +39,7 @@ describe('TrafficLight', () => {
 
   it('测试最大化方法', () => {
     const maximize = jest.fn();
-    const { queryByTestId } = render(<TrafficLight maximize={maximize} />);
+    const { queryByTestId } = render(<TrafficLight onMaximize={maximize} />);
     const maxEl = queryByTestId('maximize');
     userEvent.click(maxEl);
     expect(maximize).toBeCalledTimes(1);
@@ -48,7 +48,7 @@ describe('TrafficLight', () => {
   it('测试禁用最大化方法', () => {
     const maximize = jest.fn();
     const { queryByTestId } = render(
-      <TrafficLight disableMaximize maximize={maximize} />,
+      <TrafficLight disableMaximize onMaximize={maximize} />,
     );
     const maxEl = queryByTestId('maximize');
     userEvent.click(maxEl);