feat: Popover 组件 Taro 小程序适配 (#1882)

* fix: 修复 ImagePreview 在Taro编译成H5后报错的问题

* fix: 地址关闭时, Close 事件触发两次问题解决

* feat: 组件DatePicker 添加双向绑定

* docs: 组件Picker文档修改

* feat: 组件Picker与DatePicker新增属性safe-area-inset-bottom

* feat: imagepreview

* fix: 组件imagepreview点击视频遮罩关闭(#1729)

* fix: 解决 Picker 在微信小程序中无法使用问题 (#1774)

* fix: 修改 Picker 组件 v-model 失效问题

* fix: 组件NoticeBar修改height之后，垂直轮播会卡顿

* fix: 删除Datepicker Demo演示多余内容

* fix: 组件Picker在JD小程序上适配

* fix: 组件Address京东小程序适配

* feat: 京东小程序适配

* fix: 删除空格

* feat: 删除console

* fix: 京东小程序imagepreview适配

* fix: 修复 imagepreview 动态设置 initNo 显示不正确问题

* fix: 组件 InfiniteLoading 某些情况下会错误触发下拉刷新#1819

* fix: 删除pullrefresh

* feat: 组件 imagepreview瘦身

* feat: 组件Picker 瘦身

* fix: address线上问题修改

* fix: 完善imagepreview

* feat: 公共函数提取

* feat: 函数式改用 createComponent

* fix: 组件 Imagepreview与Address兼容性修改

* feat: 组件 popover 小程序适配

* feat: 单元测试

* fix: 文件回撤

* feat: 组件popover添加单元测试

* feat: 组件 popup 修改

Author: yangxiaolu1993

src/packages/__VUE/address/index.taro.vue

@@ -33,7 +33,7 @@
 
       <!-- 请选择 -->
       <view class="custom-address" v-if="privateType == 'custom'">
-        <view class="region-tab" ref="tabRegion">
+        <view class="nut-address-region-tab" ref="tabRegion">
           <view
             :class="{ 'tab-item': true, active: index == tabIndex, [tabName[index]]: true }"
             v-for="(item, key, index) in selectedRegion"
@@ -72,7 +72,7 @@
 
       <!-- 请选择 -->
       <view class="custom-address" v-else-if="privateType == 'custom2'">
-        <view class="region-tab" ref="tabRegion">
+        <view class="nut-address-region-tab" ref="tabRegion">
           <view
             :class="{ 'tab-item': true, active: index == tabIndex, [tabName[index]]: true }"
             v-for="(item, key, index) in selectedRegion"

src/packages/__VUE/imagepreview/index.taro.vue

@@ -1,6 +1,5 @@
 <template>
-  <nut-popup pop-class="nut-imagepreview-custom-pop" v-model:visible="showPop" @click="onClose" style="width: 100%">
-    <!-- @click.stop="closeOnImg" -->
+  <nut-popup pop-class="nut-imagepreview-custom-pop" v-model:visible="showPop" @closed="onClose">
     <view class="nut-imagepreview" @touchstart.capture="onTouchStart">
       <nut-swiper
         v-if="showPop"
@@ -9,32 +8,28 @@
         :loop="isLoop"
         :is-preventDefault="false"
         direction="horizontal"
-        @change="slideChangeEnd"
-        :init-page="initPage"
+        @change="setActive"
+        :init-page="initNo"
         :pagination-visible="paginationVisible"
         :pagination-color="paginationColor"
       >
-        <nut-swiper-item v-for="(item, index) in images" :key="index">
+        <nut-swiper-item v-for="(item, index) in images" :key="index" @click="onClose">
           <image mode="aspectFit" :src="item.src" class="nut-imagepreview-taro-img" v-if="ENV != ENV_TYPE.WEB" />
           <img :src="item.src" mode="aspectFit" class="nut-imagepreview-img" v-else />
         </nut-swiper-item>
       </nut-swiper>
     </view>
 
-    <view class="nut-imagepreview-index" v-if="showIndex"> {{ active }} / {{ images.length }} </view>
-    <view class="nut-imagepreview-close-icon" @click="handleCloseIcon" :style="styles" v-if="closeable"
+    <view class="nut-imagepreview-index" v-if="showIndex"> {{ active + 1 }} / {{ images.length }} </view>
+    <view class="nut-imagepreview-close-icon" @click="onClose" :style="styles" v-if="closeable"
       ><nut-icon :name="closeIcon" v-bind="$attrs" color="#ffffff"></nut-icon
     ></view>
   </nut-popup>
 </template>
 <script lang="ts">
 import { toRefs, reactive, watch, onMounted, computed, CSSProperties, PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import Popup from '../popup/index.taro.vue';
-import Swiper from '../swiper/index.taro.vue';
-import SwiperItem from '../swiperitem/index.taro.vue';
-import Icon from '../icon/index.taro.vue';
-import { isPromise } from '@/packages/utils/util';
+import { funInterceptor, Interceptor } from '@/packages/utils/util';
 import { ImageInterface } from './types';
 import Taro from '@tarojs/taro';
 const { create } = createComponent('imagepreview');
@@ -55,7 +50,7 @@ export default create({
     },
     initNo: {
       type: Number,
-      default: 1
+      default: 0
     },
     paginationVisible: {
       type: Boolean,
@@ -85,29 +80,19 @@ export default create({
       type: String,
       default: 'top-right' // top-right  top-left
     },
-    beforeClose: Function,
+    beforeClose: Function as PropType<Interceptor>,
     isLoop: {
       type: Boolean,
       default: true
     }
   },
   emits: ['close', 'change'],
-  components: {
-    [Popup.name]: Popup,
-    // [Video.name]: Video,
-    [Swiper.name]: Swiper,
-    [SwiperItem.name]: SwiperItem,
-    [Icon.name]: Icon
-  },
+  components: {},
 
   setup(props, { emit }) {
     const state = reactive({
       showPop: false,
-      active: 1,
-      source: {
-        src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
-        type: 'video/mp4'
-      },
+      active: 0,
       options: {
         muted: true,
         controls: true
@@ -135,9 +120,12 @@ export default create({
       return style;
     });
 
-    const slideChangeEnd = function (page: number) {
-      state.active = page + 1;
-      emit('change', state.active);
+    // 设置当前选中第几个
+    const setActive = (active: number) => {
+      if (active !== state.active) {
+        state.active = active;
+        emit('change', state.active);
+      }
     };
 
     const closeOnImg = () => {
@@ -148,35 +136,21 @@ export default create({
     };
 
     const onClose = () => {
-      if (props.beforeClose) {
-        const returnVal = props.beforeClose.apply(null, state.active);
-
-        if (isPromise(returnVal)) {
-          returnVal.then((value) => {
-            if (value) {
-              closeDone();
-            }
-          });
-        } else if (returnVal) {
-          closeDone();
-        }
-      } else {
-        closeDone();
-      }
+      funInterceptor(props.beforeClose, {
+        args: [state.active],
+        done: () => closeDone()
+      });
     };
     // 执行关闭
     const closeDone = () => {
       state.showPop = false;
       state.store.scale = 1;
       scaleNow();
-      // state.active = 1;
       emit('close');
     };
 
     // 计算两个点的距离
     const getDistance = (first: { x: number; y: number }, second: { x: number; y: number }) => {
-      // 计算两个点起始时刻的距离和终止时刻的距离，终止时刻距离变大了则放大，变小了则缩小
-      // 放大 k 倍则 scale 也 扩大 k 倍
       return Math.hypot(Math.abs(second.x - first.x), Math.abs(second.y - first.y));
     };
 
@@ -187,8 +161,6 @@ export default create({
     };
 
     const onTouchStart = (event: TouchEvent) => {
-      // console.log('start');
-      // 如果已经放大，双击应变回原尺寸；如果是原尺寸，双击应放大
       const curTouchTime = new Date().getTime();
       if (curTouchTime - state.lastTouchEndTime < 300) {
         const store = state.store;
@@ -204,13 +176,10 @@ export default create({
       var events = touches[0];
       var events2 = touches[1];
 
-      // event.preventDefault();
-
       const store = state.store;
       store.moveable = true;
 
       if (events2) {
-        // 如果开始两指操作，记录初始时刻两指间的距离
         store.oriDistance = getDistance(
           {
             x: events.pageX,
@@ -222,7 +191,7 @@ export default create({
           }
         );
       }
-      // 取到开始两指操作时的放大（缩小比例），store.scale 存储的是当前的放缩比（相对于标准大小 scale 为 1 的情况的放大缩小比）
+
       store.originScale = store.scale || 1;
     };
 
@@ -265,7 +234,6 @@ export default create({
     };
 
     const onTouchEnd = () => {
-      // console.log('end');
       state.lastTouchEndTime = new Date().getTime();
       const store = state.store;
       store.moveable = false;
@@ -293,42 +261,25 @@ export default create({
     watch(
       () => props.initNo,
       (val) => {
-        if (val != state.active) {
-          state.active = val;
-        }
+        if (val != state.active) setActive(val);
       }
     );
 
-    const initPage = computed(() => {
-      const maxNo = props.images.length;
-      const _initPage = props.initNo > maxNo ? maxNo - 1 : props.initNo - 1;
-      return _initPage >= 0 ? _initPage : 0;
-    });
-
-    // 点击关闭按钮
-    const handleCloseIcon = () => {
-      onClose();
-    };
-
     onMounted(() => {
-      // 初始化页码
-      state.active = props.initNo;
-      state.showPop = props.show;
+      setActive(props.initNo);
     });
 
     return {
       ...toRefs(state),
-      initPage,
-      slideChangeEnd,
+      setActive,
       onClose,
       closeOnImg,
       onTouchStart,
       onTouchMove,
       onTouchEnd,
       getDistance,
       scaleNow,
-      styles,
-      handleCloseIcon
+      styles
     };
   }
 });

src/packages/__VUE/popover/__test__/popover.spec.ts

@@ -0,0 +1,97 @@
+import { config, mount } from '@vue/test-utils';
+import Popover from '../index.vue';
+import NutPupup from '../../popup/index.vue';
+import NutOverlay from '../../overlay/index.vue';
+import NutIcon from '../../icon/index.vue';
+import { nextTick, reactive } from 'vue';
+
+beforeAll(() => {
+  config.global.components = {
+    NutIcon,
+    NutPupup,
+    NutOverlay
+  };
+});
+
+afterAll(() => {
+  config.global.components = {};
+});
+
+const iconItemList = [{ name: 'option1' }, { name: 'option2' }, { name: 'option3' }];
+
+const listDisabled = reactive([
+  { name: 'option1', disabled: true },
+  { name: 'option2', disabled: true },
+  { name: 'option3' }
+]);
+
+test('first render', async () => {
+  const wrapper = mount(Popover, {
+    props: {
+      visible: true,
+      list: iconItemList,
+      teleportDisable: false
+    }
+  });
+  await nextTick();
+  expect(wrapper.find('.nut-popover-menu-item').exists()).toBeTruthy();
+});
+
+test('Props theme dark', async () => {
+  const wrapper = mount(Popover, {
+    props: {
+      visible: true,
+      list: iconItemList,
+      teleportDisable: false,
+      theme: 'dark'
+    }
+  });
+  await nextTick();
+  expect(wrapper.find('.nut-popover--dark').exists()).toBeTruthy();
+});
+
+test('should not emit select event when the action is disabled', async () => {
+  const wrapper = mount(Popover, {
+    props: {
+      visible: true,
+      list: listDisabled,
+      teleportDisable: false
+    }
+  });
+  await nextTick();
+  expect(wrapper.findAll('.nut-popover-menu-disabled').length).toEqual(2);
+
+  wrapper.find('.nut-popover-menu-item').trigger('click');
+  expect(wrapper.emitted('choose')).toBeFalsy();
+});
+
+test('should close popover when clicking the action', async () => {
+  const wrapper = mount(Popover, {
+    props: {
+      visible: true,
+      list: iconItemList,
+      teleportDisable: false
+    }
+  });
+  await nextTick();
+
+  await wrapper.find('.nut-popover-menu-item').trigger('click');
+  expect(wrapper.emitted('update:visible')![0]).toEqual([false]);
+
+  await wrapper.setProps({ closeOnClickAction: false });
+  await wrapper.find('.nut-popover-menu-item').trigger('click');
+  expect(wrapper.emitted('update:visible')).toHaveLength(1);
+});
+
+test('Set Props Position', async () => {
+  const wrapper = mount(Popover, {
+    props: {
+      visible: true,
+      list: iconItemList,
+      teleportDisable: false,
+      location: 'top-start'
+    }
+  });
+  await nextTick();
+  expect(wrapper.find('.nut-popover-arrow--top-start').exists()).toBeTruthy();
+});

src/packages/__VUE/popover/index.scss

@@ -125,6 +125,10 @@
         border-bottom: none;
       }
 
+      .nut-popover-item-img {
+        vertical-align: top;
+      }
+
       .nut-popover-menu-item-name {
         margin-right: 12px;
         margin-left: 8px;
@@ -135,6 +139,10 @@
         color: $popover-disable-color;
         cursor: not-allowed;
       }
+
+      &.nut-popover-menu-taroitem {
+        display: flex;
+      }
     }
 
     &--top {
@@ -263,3 +271,13 @@
 .nut-popover-leave-active {
   transition-timing-function: ease-in;
 }
+
+.nut-popover-content-bg {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  background: transparent;
+  z-index: 1999;
+}