|
1
|
|
import * as React from 'react';
|
|
2
|
4
|
import { createHostComponent } from '@remax/shared';
|
|
3
|
|
import { BaseProps, GenericEvent } from '../../types/component';
|
|
4
|
|
|
|
5
|
|
// can't extends from BaseProps, bacause this MovableViewProps overwrite animation to boolean
|
|
6
|
|
export interface MovableViewProps extends Omit<BaseProps, 'animation'> {
|
|
7
|
|
/** (default: none) movable-view的移动方向，属性值有all、vertical、horizontal、none 1.2.0 */
|
|
8
|
|
direction?: string;
|
|
9
|
|
/** (default: false) movable-view是否带有惯性 1.2.0 */
|
|
10
|
|
inertia?: boolean;
|
|
11
|
|
/** (default: false) 超过可移动区域后，movable-view是否还可以移动 1.2.0 */
|
|
12
|
|
outOfBounds?: boolean;
|
|
13
|
|
/** 定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画 1.2.0 */
|
|
14
|
|
x?: number;
|
|
15
|
|
/** 定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画 1.2.0 */
|
|
16
|
|
y?: number;
|
|
17
|
|
/** (default: 20) 阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快 1.2.0 */
|
|
18
|
|
damping?: number;
|
|
19
|
|
/** (default: 2) 摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值 1.2.0 */
|
|
20
|
|
friction?: number;
|
|
21
|
|
/** (default: false) 是否禁用 1.9.90 */
|
|
22
|
|
disabled?: boolean;
|
|
23
|
|
/** (default: false) 是否支持双指缩放，默认缩放手势生效区域是在movable-view内 1.9.90 */
|
|
24
|
|
scale?: boolean;
|
|
25
|
|
/** (default: 0.5) 定义缩放倍数最小值 1.9.90 */
|
|
26
|
|
scaleMin?: number;
|
|
27
|
|
/** (default: 10) 定义缩放倍数最大值 1.9.90 */
|
|
28
|
|
scaleMax?: number;
|
|
29
|
|
/** (default: 1) 定义缩放倍数，取值范围为 0.5 - 10 1.9.90 */
|
|
30
|
|
scaleValue?: number;
|
|
31
|
|
/**
|
|
32
|
|
* 是否使用动画 2.1.0
|
|
33
|
|
*/
|
|
34
|
|
animation?: boolean;
|
|
35
|
|
/** 拖动过程中触发的事件，event.detail = {x, y, source} 1.9.90 */
|
|
36
|
|
onChange?: (event: GenericEvent) => any;
|
|
37
|
|
/** 缩放过程中触发的事件，event.detail = {x, y, scale}，x和y字段在2.1.0之后支持 1.9.90 */
|
|
38
|
|
onScale?: (event: GenericEvent) => any;
|
|
39
|
|
/** 初次手指触摸后移动为横向的移动时触发，如果catch此事件，则意味着touchmove事件也被catch 1.9.90 */
|
|
40
|
|
hTouchMove?: (event: GenericEvent) => any;
|
|
41
|
|
/** 初次手指触摸后移动为纵向的移动时触发，如果catch此事件，则意味着touchmove事件也被catch 1.9.90 */
|
|
42
|
|
vTouchMove?: (event: GenericEvent) => any;
|
|
43
|
|
}
|
|
44
|
|
/**
|
|
45
|
|
* https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html
|
|
46
|
|
*/
|
|
47
|
4
|
export const MovableView: React.ComponentType<MovableViewProps> = createHostComponent<MovableViewProps>('movable-view');
|
|
48
|
|
|
|
49
|
4
|
MovableView.defaultProps = {
|
|
50
|
|
direction: 'none',
|
|
51
|
|
inertia: false,
|
|
52
|
|
outOfBounds: false,
|
|
53
|
|
damping: 20,
|
|
54
|
|
friction: 2,
|
|
55
|
|
disabled: false,
|
|
56
|
|
scale: false,
|
|
57
|
|
scaleMin: 0,
|
|
58
|
|
scaleMax: 10,
|
|
59
|
|
scaleValue: 1,
|
|
60
|
|
animation: true,
|
|
61
|
|
};
|
Darmody