Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(swipe-cell): support dragstart and dragend events #2904

Merged
merged 2 commits into from
Jun 27, 2024
Merged

feat(swipe-cell): support dragstart and dragend events #2904

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eea9db0
feat(swipe-cell): support dragstart and dragend events
Lyan-u Jun 25, 2024
090dc1e
feat(pull-down-refresh): support disabled props
Lyan-u Jun 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 18 additions & 6 deletions src/pull-down-refresh/README.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,12 @@

name | type | default | description | required
-- | -- | -- | -- | --
header | Slot | - | `1.2.10` | N
style | Object | - | CSS(Cascading Style Sheets) | N
custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
disabled | Boolean | false | disabled pull down refresh | N
enable-back-to-top | Boolean | true | `1.1.5` | N
enable-passive | Boolean | false | `1.1.5` | N
external-classes | Array | - | `['t-class', 't-class-loading','t-class-text', 't-class-indicator']` | N
header | Slot | - | `1.2.10`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
loading-bar-height | String / Number | 50 | \- | N
loading-props | Object | - | Typescript：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/pull-down-refresh/type.ts) | N
loading-texts | Array | [] | Typescript：`string[]` | N
Expand All @@ -27,15 +29,25 @@ default-value | Boolean | undefined | uncontrolled property | N
name | params | description
-- | -- | --
change | `(value: boolean)` | \-
dragend | `(scrollTop: number, scrollLeft: number)` | `1.2.10`
dragging | `(scrollTop: number, scrollLeft: number)` | `1.2.10`
dragstart | `(scrollTop: number, scrollLeft: number)` | `1.2.10`
refresh | \- | \-
scrolltolower | \- | \-
timeout | \- | \-
dragstart | `(scrollTop: number, scrollLeft: number)` | `1.2.10`
dragging | `(scrollTop: number, scrollLeft: number)` | `1.2.10`
dragend | `(scrollTop: number, scrollLeft: number)` | `1.2.10`

### PullDownRefresh External Classes

className | Description
-- | --
t-class | \-
t-class-indicator | \-
t-class-loading | \-
t-class-text | \-

### CSS Variables

The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-pull-down-refresh-color | @font-gray-3 | -
--td-pull-down-refresh-color | @font-gray-3 | -
20 changes: 12 additions & 8 deletions src/pull-down-refresh/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,14 @@ isComponent: true

### PullDownRefresh Props

名称 | 类型 | 默认值 | 说明 | 必传
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
header | Slot | - | `1.2.10` | N
style | Object | - | 样式 | N
custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
disabled | Boolean | false | 是否禁用下拉刷新 | N
enable-back-to-top | Boolean | true | `1.1.5`。iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向。自 2.27.3 版本开始，若非显式设置为 false，则在显示尺寸大于屏幕 90% 时自动开启 | N
enable-passive | Boolean | false | `1.1.5`。开启 passive 特性，能优化一定的滚动性能 | N
header | Slot | - | `1.2.10`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
loading-bar-height | String / Number | 50 | 加载中下拉高度，如果值为数字则单位是：'px' | N
loading-props | Object | - | 加载loading样式。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/pull-down-refresh/type.ts) | N
loading-texts | Array | [] | 提示语，组件内部默认值为 ['下拉刷新', '松手刷新', '正在刷新', '刷新完成']。TS 类型：`string[]` | N
Expand All @@ -53,24 +56,25 @@ default-value | Boolean | undefined | 组件状态，值为 `true` 表示下拉
名称 | 参数 | 描述
-- | -- | --
change | `(value: boolean)` | 下拉或收起时触发，用户手势往下滑动触发下拉状态，手势松开触发收起状态
dragend | `(scrollTop: number, scrollLeft: number)` | `1.2.10`。滑动结束事件
dragging | `(scrollTop: number, scrollLeft: number)` | `1.2.10`。滑动事件
dragstart | `(scrollTop: number, scrollLeft: number)` | `1.2.10`。滑动开始事件
refresh | \- | 结束下拉时触发
scrolltolower | \- | 滚动到页面底部时触发
timeout | \- | 刷新超时触发
dragstart | `(scrollTop: number, scrollLeft: number)` | `1.2.10`。滑动开始事件
dragging | `(scrollTop: number, scrollLeft: number)` | `1.2.10`。滑动事件
dragend | `(scrollTop: number, scrollLeft: number)` | `1.2.10`。滑动结束事件

### PullDownRefresh 外部样式类

类名 | 说明
类名 | 描述
-- | --
t-class | 根节点样式类
t-class-indicator | 指示样式类
t-class-loading | 加载样式类
t-class-text | 文本样式类
t-class-indicator | 指示样式类

### CSS 变量

组件提供了下列 CSS 变量，可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-pull-down-refresh-color | @font-gray-3 | -
--td-pull-down-refresh-color | @font-gray-3 | -
5 changes: 5 additions & 0 deletions src/pull-down-refresh/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,11 @@

import { TdPullDownRefreshProps } from './type';
const props: TdPullDownRefreshProps = {
/** 是否禁用下拉刷新 */
disabled: {
type: Boolean,
value: false,
},
/** iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向。自 2.27.3 版本开始，若非显式设置为 false，则在显示尺寸大于屏幕 90% 时自动开启 */
enableBackToTop: {
type: Boolean,
Expand Down
10 changes: 7 additions & 3 deletions src/pull-down-refresh/pull-down-refresh.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ export default class PullDownRefresh extends SuperComponent {
this.triggerEvent('scroll', { scrollTop });
},
onTouchStart(e: WechatMiniprogram.Component.TrivialInstance) {
if (this.isPulling || !this.data.enableToRefresh) return;
if (this.isPulling || !this.data.enableToRefresh || this.properties.disabled) return;
const { touches } = e;
if (touches.length !== 1) return;
const { pageX, pageY } = touches[0];
Expand All @@ -130,7 +130,7 @@ export default class PullDownRefresh extends SuperComponent {
},

onTouchMove(e: WechatMiniprogram.Component.TrivialInstance) {
if (!this.startPoint) return;
if (!this.startPoint || this.properties.disabled) return;

const { touches } = e;

Expand All @@ -145,7 +145,7 @@ export default class PullDownRefresh extends SuperComponent {
},

onTouchEnd(e: WechatMiniprogram.Component.TrivialInstance) {
if (!this.startPoint) return;
if (!this.startPoint || this.properties.disabled) return;
const { changedTouches } = e;
if (changedTouches.length !== 1) return;
const { pageY } = changedTouches[0];
Expand All @@ -166,24 +166,28 @@ export default class PullDownRefresh extends SuperComponent {
},

onDragStart(e: WechatMiniprogram.ScrollViewDragStart) {
if (this.properties.disabled) return;
const { scrollTop, scrollLeft } = e.detail;

this.triggerEvent('dragstart', { scrollTop, scrollLeft });
},

onDragging(e: WechatMiniprogram.ScrollViewDragging) {
if (this.properties.disabled) return;
const { scrollTop, scrollLeft } = e.detail;

this.triggerEvent('dragging', { scrollTop, scrollLeft });
},

onDragEnd(e: WechatMiniprogram.ScrollViewDragEnd) {
if (this.properties.disabled) return;
const { scrollTop, scrollLeft } = e.detail;

this.triggerEvent('dragend', { scrollTop, scrollLeft });
},

doRefresh() {
if (this.properties.disabled) return;
this.setData({
barHeight: this.loadingBarHeight,
refreshStatus: 2,
Expand Down
8 changes: 8 additions & 0 deletions src/pull-down-refresh/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,14 @@
import { LoadingProps } from '../loading/index';

export interface TdPullDownRefreshProps {
/**
* 是否禁用下拉刷新
* @default false
*/
disabled?: {
type: BooleanConstructor;
value?: boolean;
};
/**
* iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向。自 2.27.3 版本开始，若非显式设置为 false，则在显示尺寸大于屏幕 90% 时自动开启
* @default true
Expand Down
8 changes: 6 additions & 2 deletions src/swipe-cell/README.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,17 @@

name | type | default | description | required
-- | -- | -- | -- | --
style | Object | - | CSS(Cascading Style Sheets) | N
custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
disabled | Boolean | - | \- | N
opened | Boolean / Array | false | \- | N
left | Array / Slot | - | Typescript：`Array<SwipeActionItem>` | N
right | Array / Slot | - | Typescript：`Array<SwipeActionItem>` `interface SwipeActionItem {text?: string; icon?: string | object; className?: string; style?: string; onClick?: () => void; [key: string]: any }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swipe-cell/type.ts) | N
opened | Boolean / Array | false | Typescript：`boolean \| Array<boolean>` | N
right | Array / Slot | - | Typescript：`Array<SwipeActionItem>` `interface SwipeActionItem {text?: string; icon?: string \| object, className?: string; style?: string; onClick?: () => void; [key: string]: any }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swipe-cell/type.ts) | N

### SwipeCell Events

name | params | description
-- | -- | --
click | `(action: SwipeActionItem, source: SwipeSource)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swipe-cell/type.ts)。<br/>`type SwipeSource = 'left' \| 'right'`<br/>
dragend | \- | \-
dragstart | \- | \-
9 changes: 7 additions & 2 deletions src/swipe-cell/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,17 +35,22 @@ isComponent: true
{{ icon }}

## API

### SwipeCell Props

名称 | 类型 | 默认值 | 说明 | 必传
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
disabled | Boolean | - | 是否禁用滑动 | N
opened | Boolean / Array | false | 操作项是否呈现为打开态，值为数组时表示分别控制左右滑动的展开和收起状态。TS 类型：`boolean \| Array<boolean>` | N |
left | Array / Slot | - | 左侧滑动操作项。所有行为同 `right`。TS 类型：`Array<SwipeActionItem>` | N
opened | Boolean / Array | false | 操作项是否呈现为打开态，值为数组时表示分别控制左右滑动的展开和收起状态。TS 类型：`boolean \| Array<boolean>` | N
right | Array / Slot | - | 右侧滑动操作项。有两种定义方式，一种是使用数组，二种是使用插槽。`right.text` 表示操作文本，`right.className` 表示操作项类名，`right.style` 表示操作项样式，`right.onClick` 表示点击操作项后执行的回调函数。示例：`[{ text: '删除', icon: 'delete', style: 'background-color: red', onClick: () => {} }]`。TS 类型：`Array<SwipeActionItem>` `interface SwipeActionItem {text?: string; icon?: string \| object, className?: string; style?: string; onClick?: () => void; [key: string]: any }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swipe-cell/type.ts) | N

### SwipeCell Events

名称 | 参数 | 描述
-- | -- | --
click | `(action: SwipeActionItem, source: SwipeSource)` | 操作项点击时触发（插槽写法组件不触发，业务侧自定义内容和事件）。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swipe-cell/type.ts)。<br/>`type SwipeSource = 'left' \| 'right'`<br/>
dragend | \- | 滑动结束事件
dragstart | \- | 滑动开始事件
10 changes: 7 additions & 3 deletions src/swipe-cell/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,18 @@ const props: TdSwipeCellProps = {
},
/** 操作项是否呈现为打开态，值为数组时表示分别控制左右滑动的展开和收起状态 */
opened: {
type: Boolean,
optionalTypes: [Array],
type: null,
value: false,
},
/** 右侧滑动操作项。有两种定义方式，一种是使用数组，二种是使用插槽。`right.text` 表示操作文本，`right.className` 表示操作项类名，`right.style` 表示操作项样式，`right.onClick` 表示点击操作项后执行的回调函数。示例：`[{ text: '删除', style: 'background-color: red', onClick: () => {} }]` */
/** 右侧滑动操作项。有两种定义方式，一种是使用数组，二种是使用插槽。`right.text` 表示操作文本，`right.className` 表示操作项类名，`right.style` 表示操作项样式，`right.onClick` 表示点击操作项后执行的回调函数。示例：`[{ text: '删除', icon: 'delete', style: 'background-color: red', onClick: () => {} }]` */
right: {
type: Array,
},
/** 自定义组件样式 */
style: {
type: String,
value: '',
},
};

export default props;
6 changes: 5 additions & 1 deletion src/swipe-cell/swipe-cell.wxs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,9 +131,12 @@ var onDrag = function (event, ownerInstance) {
if (state.direction !== 'horizontal') {
return;
}
if (!state.dragging) {
ownerInstance.triggerEvent('dragstart');
}
state.dragging = true;
swipeMove(state.startOffset + state.deltaX);
return false
return false;
};

var open = function (position) {
Expand Down Expand Up @@ -164,6 +167,7 @@ var endDrag = function (event, ownerInstance) {
close();
}
}
ownerInstance.triggerEvent('dragend');
};

module.exports = {
Expand Down
25 changes: 12 additions & 13 deletions src/swipe-cell/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,6 @@
* */

export interface TdSwipeCellProps {
/**
* 自定义组件样式
* @default ''
*/
style?: {
type: StringConstructor;
value?: string;
};
/**
* 是否禁用滑动
*/
Expand All @@ -32,22 +24,29 @@ export interface TdSwipeCellProps {
* @default false
*/
opened?: {
type: BooleanConstructor;
optionalTypes: Array<ArrayConstructor>;
type: null;
value?: boolean | Array<boolean>;
required?: boolean;
};
/**
* 右侧滑动操作项。有两种定义方式，一种是使用数组，二种是使用插槽。`right.text` 表示操作文本，`right.className` 表示操作项类名，`right.style` 表示操作项样式，`right.onClick` 表示点击操作项后执行的回调函数。示例：`[{ text: '删除', style: 'background-color: red', onClick: () => {} }]`
* 右侧滑动操作项。有两种定义方式，一种是使用数组，二种是使用插槽。`right.text` 表示操作文本，`right.className` 表示操作项类名，`right.style` 表示操作项样式，`right.onClick` 表示点击操作项后执行的回调函数。示例：`[{ text: '删除', icon: 'delete', style: 'background-color: red', onClick: () => {} }]`
*/
right?: {
type: ArrayConstructor;
value?: Array<SwipeActionItem>;
};
/**
* 自定义组件样式
* @default ''
*/
style?: {
type: StringConstructor;
value?: string;
};
}

export interface SwipeActionItem {
text: string;
text?: string;
icon?: string | object;
className?: string;
style?: string;
onClick?: () => void;
Expand Down
Loading