From dda0c65fec68958ba10d948fc636709c4f8078a4 Mon Sep 17 00:00:00 2001
From: RickCole <rickcole21@outlook.com>
Date: Wed, 20 Apr 2022 15:25:27 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=8C=89=E9=92=AEdisa?=
 =?UTF-8?q?bledTip=E5=A4=B1=E6=95=88=E9=97=AE=E9=A2=98=20(#4086)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 修复按钮disabledTip失效问题

* 补一下注释 e.persist()
---
 __tests__/renderers/Action.test.tsx           |  45 +++++
 .../__snapshots__/Action.test.tsx.snap        | 184 ++++++++++++++++++
 scss/_properties.scss                         |   1 +
 scss/components/_button.scss                  |  76 ++++----
 src/renderers/Action.tsx                      |   2 +-
 src/utils/handleAction.ts                     |   2 +-
 6 files changed, 269 insertions(+), 41 deletions(-)

diff --git a/__tests__/renderers/Action.test.tsx b/__tests__/renderers/Action.test.tsx
index 7d81f90ea..d1ac9bfc5 100644
--- a/__tests__/renderers/Action.test.tsx
+++ b/__tests__/renderers/Action.test.tsx
@@ -14,6 +14,51 @@ import '../../src/themes/default';
 
 afterEach(cleanup);
 
+test('Renderers:Action all levels', () => {
+  const levels = [
+    'link',
+    'primary',
+    'secondary',
+    'info',
+    'success',
+    'warning',
+    'danger',
+    'light',
+    'dark',
+    'default'
+  ];
+
+  const {container} = render(
+    amisRender(
+      {
+        type: 'page',
+        body: [
+          levels.map(item => ({
+            type: 'button',
+            level: item,
+            label: `按钮 ${item}`
+          })),
+
+          {
+            type: 'divider'
+          },
+
+          levels.map(item => ({
+            type: 'button',
+            level: item,
+            disabled: true,
+            label: `按钮${item}`
+          }))
+        ]
+      },
+      {},
+      makeEnv({})
+    )
+  );
+
+  expect(container).toMatchSnapshot();
+});
+
 test('Renderers:Action MenuItem changes class when actived & disabled', () => {
   const component = renderer.create(
     <Action isMenuItem className="a" label="123" />
diff --git a/__tests__/renderers/__snapshots__/Action.test.tsx.snap b/__tests__/renderers/__snapshots__/Action.test.tsx.snap
index 159c4006f..a330f85e1 100644
--- a/__tests__/renderers/__snapshots__/Action.test.tsx.snap
+++ b/__tests__/renderers/__snapshots__/Action.test.tsx.snap
@@ -83,6 +83,190 @@ exports[`Renderers:Action MenuItem display icon 2`] = `
 </a>
 `;
 
+exports[`Renderers:Action all levels 1`] = `
+<div>
+  <div
+    class="cxd-Page"
+  >
+    <div
+      class="cxd-Page-content"
+    >
+      <div
+        class="cxd-Page-main"
+      >
+        <div
+          class="cxd-Page-body"
+        >
+          <button
+            class="cxd-Button cxd-Button--link"
+            type="button"
+          >
+            <span>
+              按钮 link
+            </span>
+          </button>
+          <button
+            class="cxd-Button cxd-Button--primary"
+            type="button"
+          >
+            <span>
+              按钮 primary
+            </span>
+          </button>
+          <button
+            class="cxd-Button cxd-Button--secondary"
+            type="button"
+          >
+            <span>
+              按钮 secondary
+            </span>
+          </button>
+          <button
+            class="cxd-Button cxd-Button--info"
+            type="button"
+          >
+            <span>
+              按钮 info
+            </span>
+          </button>
+          <button
+            class="cxd-Button cxd-Button--success"
+            type="button"
+          >
+            <span>
+              按钮 success
+            </span>
+          </button>
+          <button
+            class="cxd-Button cxd-Button--warning"
+            type="button"
+          >
+            <span>
+              按钮 warning
+            </span>
+          </button>
+          <button
+            class="cxd-Button cxd-Button--danger"
+            type="button"
+          >
+            <span>
+              按钮 danger
+            </span>
+          </button>
+          <button
+            class="cxd-Button cxd-Button--light"
+            type="button"
+          >
+            <span>
+              按钮 light
+            </span>
+          </button>
+          <button
+            class="cxd-Button cxd-Button--dark"
+            type="button"
+          >
+            <span>
+              按钮 dark
+            </span>
+          </button>
+          <button
+            class="cxd-Button cxd-Button--default"
+            type="button"
+          >
+            <span>
+              按钮 default
+            </span>
+          </button>
+          <div
+            class="cxd-Divider cxd-Divider--dashed"
+          />
+          <div
+            class="cxd-Button cxd-Button--link is-disabled"
+            disabled=""
+          >
+            <span>
+              按钮link
+            </span>
+          </div>
+          <div
+            class="cxd-Button cxd-Button--primary is-disabled"
+            disabled=""
+          >
+            <span>
+              按钮primary
+            </span>
+          </div>
+          <div
+            class="cxd-Button cxd-Button--secondary is-disabled"
+            disabled=""
+          >
+            <span>
+              按钮secondary
+            </span>
+          </div>
+          <div
+            class="cxd-Button cxd-Button--info is-disabled"
+            disabled=""
+          >
+            <span>
+              按钮info
+            </span>
+          </div>
+          <div
+            class="cxd-Button cxd-Button--success is-disabled"
+            disabled=""
+          >
+            <span>
+              按钮success
+            </span>
+          </div>
+          <div
+            class="cxd-Button cxd-Button--warning is-disabled"
+            disabled=""
+          >
+            <span>
+              按钮warning
+            </span>
+          </div>
+          <div
+            class="cxd-Button cxd-Button--danger is-disabled"
+            disabled=""
+          >
+            <span>
+              按钮danger
+            </span>
+          </div>
+          <div
+            class="cxd-Button cxd-Button--light is-disabled"
+            disabled=""
+          >
+            <span>
+              按钮light
+            </span>
+          </div>
+          <div
+            class="cxd-Button cxd-Button--dark is-disabled"
+            disabled=""
+          >
+            <span>
+              按钮dark
+            </span>
+          </div>
+          <div
+            class="cxd-Button cxd-Button--default is-disabled"
+            disabled=""
+          >
+            <span>
+              按钮default
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Renderers:Action custom activeClass 1`] = `
 <button
   className="cxd-Button cxd-Button--default a"
diff --git a/scss/_properties.scss b/scss/_properties.scss
index 4bcd50100..5fb177857 100644
--- a/scss/_properties.scss
+++ b/scss/_properties.scss
@@ -241,6 +241,7 @@
   --Button--light-onHover-color: var(--Button--light-color);
   --Button--link-color: var(--primary);
   --Button--link-onDisabled-color: #{$gray600};
+  --Button--link-onDisabled-backgroundColor: transparent;
   --Button--link-onHover-color: var(--primary-onHover);
   --Button--link-onActive-color: var(--primary-onActive);
   --Button--md-fontSize: var(--Button-fontSize);
diff --git a/scss/components/_button.scss b/scss/components/_button.scss
index 7617bdb43..e07686e07 100644
--- a/scss/components/_button.scss
+++ b/scss/components/_button.scss
@@ -48,7 +48,6 @@
     box-shadow: none;
     cursor: not-allowed;
     color: var(--text--muted-color);
-    pointer-events: auto;
     border: var(--Button-borderWidth) solid var(--Button-onDisabled-borderColor);
     background: var(--Button-onDisabled-bg);
 
@@ -62,9 +61,44 @@
     cursor: pointer;
   }
 
-  &.cxd-Button--link.is-disabled {
-    background: transparent;
+  &--link {
+    width: auto;
+    min-width: auto;
+    font-weight: var(--fontWeightNormal);
+    color: var(--Button--link-color);
+    text-decoration: var(--link-decoration);
     border: none;
+    height: auto;
+
+    @include hover-focus {
+      color: var(--Button--link-onHover-color);
+      box-shadow: none;
+    }
+
+    @include hover-active {
+      color: var(--Button--link-onActive-color);
+      box-shadow: none;
+    }
+
+    &:disabled,
+    &.is-disabled {
+      color: var(--text--muted-color);
+      border: none;
+      background: var(--Button--link-onDisabled-backgroundColor);
+
+      @include hover-active {
+        color: var(--text--muted-color);
+      }
+    }
+  }
+
+  &--block {
+    display: block;
+    width: 100%;
+
+    + .#{$ns}Button--block {
+      margin-top: var(--gap-base);
+    }
   }
 
   > .pull-left,
@@ -317,42 +351,6 @@ fieldset:disabled a.#{$ns}Button {
   @include button-loading-icon();
 }
 
-.#{$ns}Button--link {
-  width: auto;
-  min-width: auto;
-  font-weight: var(--fontWeightNormal);
-  color: var(--Button--link-color);
-  text-decoration: var(--link-decoration);
-  border: none;
-  height: auto;
-
-  @include hover-focus {
-    color: var(--Button--link-onHover-color);
-    box-shadow: none;
-  }
-
-  @include hover-active {
-    color: var(--Button--link-onActive-color);
-    box-shadow: none;
-  }
-
-  &:disabled,
-  &.is-disabled {
-    color: var(--text--muted-color);
-    pointer-events: none;
-    background: var(--Button-onDisabled-bg);
-  }
-}
-
-.#{$ns}Button--block {
-  display: block;
-  width: 100%;
-
-  + .#{$ns}Button--block {
-    margin-top: var(--gap-base);
-  }
-}
-
 input[type='submit'],
 input[type='reset'],
 input[type='button'] {
diff --git a/src/renderers/Action.tsx b/src/renderers/Action.tsx
index 125e8f419..299783e68 100644
--- a/src/renderers/Action.tsx
+++ b/src/renderers/Action.tsx
@@ -614,7 +614,7 @@ export class Action extends React.Component<ActionProps, ActionState> {
     const {onAction, disabled, countDown, env} = this.props;
 
     // https://reactjs.org/docs/legacy-event-pooling.html
-    e.persist();
+    // e.persist(); // react 17之后去掉 event pooling 了，这个应该没用了
     let onClick = this.props.onClick;
 
     if (typeof onClick === 'string') {
diff --git a/src/utils/handleAction.ts b/src/utils/handleAction.ts
index b32e5de4f..3b4b5b961 100644
--- a/src/utils/handleAction.ts
+++ b/src/utils/handleAction.ts
@@ -13,7 +13,7 @@ export default function handleAction(
   data?: any
 ) {
   // https://reactjs.org/docs/legacy-event-pooling.html
-  e.persist();
+  // e.persist(); // react 17之后去掉 event pooling 了，这个应该没用了
 
   const onAction = props.onAction;
   let onClick: any = action.onClick;