fix: 修复 Popup 部分问题 (#1498)

* refactor: 修改 LayerPopup 开发 demo 错误传参

* fix: 修复 Popup 箭头与主体的间距问题

* fix: 下架 Popup 默认点击穿透的样式设置

* fix: 修复 Popup 更新配置时若为 hide 则会自动调用 show，保证单一 Popup 实例可用

* fix: 气泡 Popup 新增文本超出换行

Co-authored-by: yanxiong <oujinhui.ojh@antgroup.com>

dev-demos/component/popup/layerPopup.tsx

@@ -130,7 +130,7 @@ const Demo: FunctionComponent = () => {
             fields: ['name'],
           },
         ],
-        trigger: 'mousemove',
+        trigger: 'click',
       });
       pointLayer.on('mousemove', (e) => {
         console.log('point mousemove', e);

packages/component/src/css/index.css

@@ -422,7 +422,6 @@
   z-index: 5;
   display: -webkit-flex;
   display: flex;
-  pointer-events: none;
   will-change: transform;
 }
 .l7-popup.l7-popup-hide {
@@ -431,15 +430,18 @@
 .l7-popup .l7-popup-content {
   position: relative;
   padding: 16px;
+  font-size: 14px;
   background: #fff;
   border-radius: 3px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-  pointer-events: auto;
-  font-size: 14px;
 }
 .l7-popup .l7-popup-content .l7-popup-content__title {
-  font-weight: bold;
   margin-bottom: 8px;
+  font-weight: bold;
+}
+.l7-popup .l7-popup-content .l7-popup-content__title,
+.l7-popup .l7-popup-content .l7-popup-content__panel {
+  white-space: break-spaces;
 }
 .l7-popup .l7-popup-content .l7-popup-close-button {
   position: absolute;
@@ -447,16 +449,17 @@
   right: 0;
   width: 18px;
   height: 18px;
+  padding: 0;
+  font-size: 14px;
   line-height: 18px;
   text-align: center;
-  padding: 0;
   background-color: transparent;
   border: 0;
   border-radius: 0 3px 0 0;
   cursor: pointer;
-  font-size: 14px;
 }
 .l7-popup .l7-popup-tip {
+  position: relative;
   z-index: 1;
   width: 0;
   height: 0;
@@ -468,12 +471,22 @@
   -webkit-flex-direction: column-reverse;
   flex-direction: column-reverse;
 }
+.l7-popup.l7-popup-anchor-bottom .l7-popup-tip,
+.l7-popup.l7-popup-anchor-bottom-left .l7-popup-tip,
+.l7-popup.l7-popup-anchor-bottom-right .l7-popup-tip {
+  bottom: 1px;
+}
 .l7-popup.l7-popup-anchor-top,
 .l7-popup.l7-popup-anchor-top-left,
 .l7-popup.l7-popup-anchor-top-right {
   -webkit-flex-direction: column;
   flex-direction: column;
 }
+.l7-popup.l7-popup-anchor-top .l7-popup-tip,
+.l7-popup.l7-popup-anchor-top-left .l7-popup-tip,
+.l7-popup.l7-popup-anchor-top-right .l7-popup-tip {
+  top: 1px;
+}
 .l7-popup.l7-popup-anchor-left {
   -webkit-flex-direction: row;
   flex-direction: row;
@@ -483,6 +496,7 @@
   flex-direction: row-reverse;
 }
 .l7-popup-anchor-top .l7-popup-tip {
+  position: relative;
   -webkit-align-self: center;
   align-self: center;
   border-top: none;
@@ -529,6 +543,7 @@
   border-left: none;
 }
 .l7-popup-anchor-right .l7-popup-tip {
+  right: 1px;
   -webkit-align-self: center;
   align-self: center;
   border-right: none;

packages/component/src/css/popup.less

@@ -7,7 +7,6 @@
   z-index: 5;
   display: -webkit-flex;
   display: flex;
-  pointer-events: none;
   will-change: transform;
   &.l7-popup-hide {
     display: none;
@@ -16,15 +15,19 @@
   .l7-popup-content {
     position: relative;
     padding: 16px;
+    font-size: 14px;
     background: #fff;
     border-radius: 3px;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-    pointer-events: auto;
-    font-size: 14px;
 
     .l7-popup-content__title {
-      font-weight: bold;
       margin-bottom: 8px;
+      font-weight: bold;
+    }
+
+    .l7-popup-content__title,
+    .l7-popup-content__panel {
+      white-space: break-spaces;
     }
 
     .l7-popup-close-button {
@@ -33,18 +36,19 @@
       right: 0;
       width: 18px;
       height: 18px;
+      padding: 0;
+      font-size: 14px;
       line-height: 18px;
       text-align: center;
-      padding: 0;
       background-color: transparent;
       border: 0;
       border-radius: 0 3px 0 0;
       cursor: pointer;
-      font-size: 14px;
     }
   }
 
   .l7-popup-tip {
+    position: relative;
     z-index: 1;
     width: 0;
     height: 0;
@@ -56,6 +60,9 @@
   &.l7-popup-anchor-bottom-right {
     -webkit-flex-direction: column-reverse;
     flex-direction: column-reverse;
+    .l7-popup-tip {
+      bottom: 1px;
+    }
   }
 
   &.l7-popup-anchor-top,
@@ -63,6 +70,9 @@
   &.l7-popup-anchor-top-right {
     -webkit-flex-direction: column;
     flex-direction: column;
+    .l7-popup-tip {
+      top: 1px;
+    }
   }
 
   &.l7-popup-anchor-left {
@@ -77,6 +87,7 @@
 }
 
 .l7-popup-anchor-top .l7-popup-tip {
+  position: relative;
   -webkit-align-self: center;
   align-self: center;
   border-top: none;
@@ -130,6 +141,7 @@
 }
 
 .l7-popup-anchor-right .l7-popup-tip {
+  right: 1px;
   -webkit-align-self: center;
   align-self: center;
   border-right: none;

packages/component/src/popup/popup.ts

@@ -171,6 +171,7 @@ export default class Popup<O extends IPopupOption = IPopupOption>
   }
 
   public setOptions(option: Partial<O>) {
+    this.show();
     this.popupOption = {
       ...this.popupOption,
       ...option,
@@ -216,7 +217,6 @@ export default class Popup<O extends IPopupOption = IPopupOption>
     }
     if (this.checkUpdateOption(option, ['lngLat']) && option.lngLat) {
       this.setLnglat(option.lngLat);
-      this.show();
     }
     return this;
   }
@@ -293,6 +293,7 @@ export default class Popup<O extends IPopupOption = IPopupOption>
    * @param lngLat
    */
   public setLnglat(lngLat: ILngLat | [number, number]): this {
+    this.show();
     this.lngLat = lngLat as ILngLat;
     if (Array.isArray(lngLat)) {
       this.lngLat = {
@@ -379,6 +380,7 @@ export default class Popup<O extends IPopupOption = IPopupOption>
    * @param htmlNode
    */
   protected setDOMContent(htmlNode: ChildNode | DocumentFragment) {
+    this.show();
     this.createContent();
     this.contentPanel.appendChild(htmlNode);
     this.update();