Skip to content

Commit

Permalink
feat(swipe): 新增 SwipeGroup (#2439)
Browse files Browse the repository at this point in the history
  • Loading branch information
@eiinu
eiinu authored Jul 20, 2023
1 parent a480e24 commit e498a7f
Show file tree
Hide file tree
Showing 15 changed files with 593 additions and 278 deletions.
19 changes: 13 additions & 6 deletions packages/nutui-taro-demo/src/basic/pages/button/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,18 +103,25 @@ export default {
<style lang="scss">
.demo-button-row {
margin-bottom: 20px;
.nut-button {
margin-right: 15px;
&:last-child {
margin-bottom: 0;
margin-right: 0;
}
}
}
.demo-button-row2 {
margin-bottom: 10px;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.nut-button {
margin-right: 15px;
&:last-child {
margin-bottom: 0;
margin-right: 0;
.nut-button {
margin-right: 15px;
&:last-child {
margin-bottom: 0;
margin-right: 0;
}
}
}
</style>
69 changes: 36 additions & 33 deletions packages/nutui-taro-demo/src/feedback/pages/swipe/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,9 @@
<nut-button shape="square" style="height: 100%" type="info">收藏</nut-button>
</template>
</nut-swipe>
<h2>异步控制</h2>
<nut-swipe ref="refSwipe" @open="open" @close="close">
<nut-cell title="异步打开关闭">
<template v-slot:link>
<nut-switch v-model="checked" @change="changSwitch" active-text="开" inactive-text="关" />
</template>
</nut-cell>
<h2>异步控制 <nut-switch v-model="checked" @change="changSwitch" /></h2>
<nut-swipe ref="refSwipe">
<nut-cell title="异步打开关闭"></nut-cell>
<template #right>
<nut-button shape="square" style="height: 100%" type="danger">删除</nut-button>
</template>
Expand All @@ -52,38 +48,45 @@
<nut-button shape="square" style="height: 100%" type="info">收藏</nut-button>
</template>
</nut-swipe>
<h2>使用 SwipeGroup 控制 Swipe 之间互斥</h2>
<nut-swipe-group lock>
<nut-swipe name="11">
<nut-cell round-radius="0" title="左滑删除" />
<template #right>
<nut-button shape="square" style="height: 100%" type="danger">删除</nut-button>
</template>
</nut-swipe>
<nut-swipe name="22">
<nut-cell round-radius="0" title="左滑删除" />
<template #right>
<nut-button shape="square" style="height: 100%" type="danger">删除</nut-button>
</template>
</nut-swipe>
<div>
<nut-swipe name="33">
<nut-cell round-radius="0" title="左滑删除" />
<template #right>
<nut-button shape="square" style="height: 100%" type="danger">删除</nut-button>
</template>
</nut-swipe>
</div>
</nut-swipe-group>
</div>
</template>

<script lang="ts">
<script setup lang="ts">
import { ref } from 'vue';
import Taro from '@tarojs/taro';
import Header from '../../../components/header.vue';
export default {
components: {
Header
},
setup() {
const env = Taro.getEnv();
const refSwipe = ref<HTMLElement>();
const checked = ref(false);
const number = ref(0);
const changSwitch = (value: boolean) => {
if (value) {
refSwipe.value?.open('left');
} else {
refSwipe.value?.close();
}
};
const open = (obj: any) => {
console.log(obj);
};
const close = (obj: any) => {
console.log(obj);
};
return { checked, number, changSwitch, refSwipe, open, close, env };
const env = Taro.getEnv();
const refSwipe = ref<HTMLElement>();
const checked = ref(false);
const number = ref(0);
const changSwitch = (value: boolean) => {
if (value) {
refSwipe.value?.open('left');
} else {
refSwipe.value?.close();
}
};
</script>

<style lang="scss" scoped></style>
10 changes: 10 additions & 0 deletions src/config.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -663,6 +663,16 @@
"show": true,
"author": "richard1015"
},
{
"name": "SwipeGroup",
"taro": true,
"cName": "滑动手势",
"type": "component",
"show": false,
"exportEmpty": true,
"desc": "Swipe 的集合，用于控制互斥",
"author": "eiinu"
},
{
"version": "3.0.0",
"name": "ActionSheet",
Expand Down
108 changes: 104 additions & 4 deletions src/packages/__VUE/swipe/__tests__/swipe.spec.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
import { DOMWrapper, mount } from '@vue/test-utils';
import Swipe from '../index.vue';
import SwipeGroup from '../../swipegroup/index.vue';
import { nextTick } from 'vue';
import Button from '../../button/index.vue';
import Cell from '../../cell/index.vue';
import { triggerDrag, mockGetBoundingClientRect } from '@/packages/utils/unit';

test('base swipe', () => {
test('Swipe: base swipe', () => {
const wrapper = mount(Swipe);
const swipe: DOMWrapper<Element> = wrapper.find('.nut-swipe');
expect(swipe.exists()).toBe(true);
});

test('base swipe props disabled', async () => {
test('Swipe: base swipe props disabled', async () => {
const wrapper = mount(() => {
return (
<Swipe disabled={false}>
Expand All @@ -37,7 +39,7 @@ test('base swipe props disabled', async () => {
expect(swipe1.text()).toBe('删除');
expect(swipe2.exists()).toBe(true);
});
test('base swipe Slots', async () => {
test('Swipe: base swipe Slots', async () => {
const wrapper = mount(() => (
<Swipe>
{{
Expand All @@ -56,7 +58,7 @@ test('base swipe Slots', async () => {
expect(swipe.text()).toBe('选择');
expect(swipe2.exists()).toBe(true);
});
test('base swipe content', async () => {
test('Swipe: base swipe content', async () => {
const wrapper = mount(() => (
<Swipe>
<Cell round-radio="0" desc="左滑右滑都可以哦"></Cell>
Expand All @@ -69,3 +71,101 @@ test('base swipe content', async () => {
expect(swipe2.text()).toBe('左滑右滑都可以哦');
expect(swipe3.exists()).toBe(true);
});

test('Swipe: ref open & close', async () => {
const wrapper = mount(() => (
<Swipe>
{{
right: () => '右侧按钮'
}}
</Swipe>
));
mockGetBoundingClientRect({ width: 99 });
const swipe = wrapper.getComponent(Swipe);
expect(swipe.element.outerHTML).toContain('translate3d(0');
swipe.vm.open('left');
await nextTick();
expect(swipe.element.outerHTML).toContain('translate3d(-99');
swipe.vm.close();
await nextTick();
expect(swipe.element.outerHTML).toContain('translate3d(0');
});

test('Swipe: ref open & click close', async () => {
const wrapper = mount(() => (
<Swipe>
{{
right: () => '右侧按钮'
}}
</Swipe>
));
mockGetBoundingClientRect({ width: 99 });
const swipe = wrapper.getComponent(Swipe);
swipe.vm.open('left');
await nextTick();
expect(swipe.element.outerHTML).toContain('translate3d(-99');
wrapper.find('.nut-swipe__content').trigger('click');
await nextTick();
expect(swipe.element.outerHTML).toContain('translate3d(0');
});

test('Swipe: touch event right', async () => {
const wrapper = mount(() => (
<Swipe>
{{
right: () => '右侧按钮'
}}
</Swipe>
));
mockGetBoundingClientRect({ width: 99 });
const swipe = wrapper.getComponent(Swipe);
triggerDrag(wrapper, -10, 0);
await nextTick();
expect(swipe.element.outerHTML).toContain('translate3d(0');
triggerDrag(wrapper, -90, 0);
await nextTick();
expect(swipe.element.outerHTML).toContain('translate3d(-99');
swipe.vm.close();
await nextTick();
expect(swipe.element.outerHTML).toContain('translate3d(0');
});

test('Swipe: touch event left', async () => {
const wrapper = mount(() => (
<Swipe touchMovePreventDefault touchMoveStopPropagation>
{{
left: () => '左侧按钮'
}}
</Swipe>
));
mockGetBoundingClientRect({ width: 99 });
const swipe = wrapper.getComponent(Swipe);
triggerDrag(wrapper, +10, 0);
await nextTick();
expect(swipe.element.outerHTML).toContain('translate3d(0');
triggerDrag(wrapper, +90, 0);
await nextTick();
expect(swipe.element.outerHTML).toContain('translate3d(99');
swipe.vm.close();
await nextTick();
expect(swipe.element.outerHTML).toContain('translate3d(0');
});

test('Swipe: SwipeGroup lock', async () => {
const wrapper = mount(() => (
<SwipeGroup lock>
<Swipe name="111">{{ right: () => '右侧' }}</Swipe>
<Swipe name="222">{{ right: () => '右侧' }}</Swipe>
<Swipe name="333">{{ right: () => '右侧' }}</Swipe>
</SwipeGroup>
));
mockGetBoundingClientRect({ width: 99 });
const swipes = wrapper.findAllComponents(Swipe);
triggerDrag(swipes[0], -90, 0);
await nextTick();
expect(swipes[0].element.outerHTML).toContain('translate3d(-99');
triggerDrag(swipes[1], -90, 0);
await nextTick();
expect(swipes[0].element.outerHTML).toContain('translate3d(0');
expect(swipes[1].element.outerHTML).toContain('translate3d(-99');
});
85 changes: 45 additions & 40 deletions src/packages/__VUE/swipe/demo.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,18 +25,12 @@
<nut-button shape="square" style="height: 100%" type="info">{{ translate('collect') }}</nut-button>
</template>
</nut-swipe>
<h2>{{ translate('async') }}</h2>
<nut-swipe ref="refSwipe" @open="open" @close="close">
<nut-cell :title="translate('asyncDesc')">
<template #link>
<nut-switch
v-model="checked"
@change="changSwitch"
:active-text="translate('open')"
:inactive-text="translate('close')"
/>
</template>
</nut-cell>
<h2>
{{ translate('async') }}
<nut-switch v-model="checked" @change="changSwitch" />
</h2>
<nut-swipe ref="refSwipe">
<nut-cell :title="translate('asyncDesc')"> </nut-cell>
<template #right>
<nut-button shape="square" style="height: 100%" type="danger">{{ translate('delete') }}</nut-button>
</template>
Expand All @@ -56,11 +50,34 @@
<nut-button shape="square" style="height: 100%" type="info">{{ translate('collect') }}</nut-button>
</template>
</nut-swipe>
<h2>使用 SwipeGroup 控制 Swipe 之间互斥</h2>
<nut-swipe-group lock>
<nut-swipe name="11">
<nut-cell round-radius="0" :title="translate('leftDel')" />
<template #right>
<nut-button shape="square" style="height: 100%" type="danger">{{ translate('delete') }}</nut-button>
</template>
</nut-swipe>
<nut-swipe name="22">
<nut-cell round-radius="0" :title="translate('leftDel')" />
<template #right>
<nut-button shape="square" style="height: 100%" type="danger">{{ translate('delete') }}</nut-button>
</template>
</nut-swipe>
<div>
<nut-swipe name="33">
<nut-cell round-radius="0" :title="translate('leftDel')" />
<template #right>
<nut-button shape="square" style="height: 100%" type="danger">{{ translate('delete') }}</nut-button>
</template>
</nut-swipe>
</div>
</nut-swipe-group>
</div>
</template>

<script lang="ts">
import { ref, defineComponent } from 'vue';
<script setup lang="ts">
import { ref } from 'vue';
import { createComponent } from '@/packages/utils/create';
const { translate } = createComponent('swipe');
import { useTranslate } from '@/sites/assets/util/useTranslate';
Expand All @@ -80,7 +97,8 @@ const initTranslate = () =>
desc: '商品描述',
delete: '删除',
select: '选择',
collect: '收藏'
collect: '收藏',
group: '使用 SwipeGroup 控制 Swipe 之间互斥'
},
'en-US': {
basic: 'Basic Usage',
Expand All @@ -96,32 +114,19 @@ const initTranslate = () =>
desc: 'product description',
delete: 'Delelte',
select: 'Select',
collect: 'Collect'
collect: 'Collect',
group: 'Use SwipeGroup to make swipe exclusive'
}
});
export default defineComponent({
props: {},
setup() {
initTranslate();
const refSwipe = ref<HTMLElement>();
const checked = ref(false);
const number = ref(0);
const changSwitch = (value: boolean) => {
if (value) {
refSwipe.value?.open('left');
} else {
refSwipe.value?.close();
}
};
const open = (obj: any) => {
console.log(obj);
};
const close = (obj: any) => {
console.log(obj);
};
return { checked, number, changSwitch, refSwipe, open, close, translate };
initTranslate();
const refSwipe = ref<HTMLElement>();
const checked = ref(false);
const number = ref(0);
const changSwitch = (value: boolean) => {
if (value) {
refSwipe.value?.open('left');
} else {
refSwipe.value?.close();
}
});
};
</script>

<style lang="scss" scoped></style>
Loading

0 comments on commit e498a7f

Please sign in to comment.