@mpxjs/webpack-plugin 2.10.4-beta.5 → 2.10.4-beta.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/runtime/components/react/dist/event.config.js +0 -2
- package/lib/runtime/components/react/dist/getInnerListeners.js +127 -153
- package/lib/runtime/components/react/dist/mpx-button.jsx +2 -3
- package/lib/runtime/components/react/dist/mpx-canvas/index.jsx +3 -4
- package/lib/runtime/components/react/dist/mpx-checkbox-group.jsx +2 -2
- package/lib/runtime/components/react/dist/mpx-checkbox.jsx +2 -3
- package/lib/runtime/components/react/dist/mpx-form.jsx +2 -2
- package/lib/runtime/components/react/dist/mpx-icon/index.jsx +2 -2
- package/lib/runtime/components/react/dist/mpx-image.jsx +2 -2
- package/lib/runtime/components/react/dist/mpx-input.jsx +7 -4
- package/lib/runtime/components/react/dist/mpx-keyboard-avoiding-view.jsx +4 -2
- package/lib/runtime/components/react/dist/mpx-label.jsx +2 -3
- package/lib/runtime/components/react/dist/mpx-movable-area.jsx +2 -2
- package/lib/runtime/components/react/dist/mpx-movable-view.jsx +1 -1
- package/lib/runtime/components/react/dist/mpx-navigator.jsx +11 -3
- package/lib/runtime/components/react/dist/mpx-picker/index.jsx +2 -2
- package/lib/runtime/components/react/dist/mpx-picker-view/index.jsx +2 -3
- package/lib/runtime/components/react/dist/mpx-radio-group.jsx +2 -2
- package/lib/runtime/components/react/dist/mpx-radio.jsx +2 -3
- package/lib/runtime/components/react/dist/mpx-rich-text/index.jsx +2 -2
- package/lib/runtime/components/react/dist/mpx-scroll-view.jsx +1 -1
- package/lib/runtime/components/react/dist/mpx-simple-text.jsx +3 -2
- package/lib/runtime/components/react/dist/mpx-simple-view.jsx +3 -3
- package/lib/runtime/components/react/dist/mpx-sticky-header.jsx +1 -1
- package/lib/runtime/components/react/dist/mpx-sticky-section.jsx +1 -1
- package/lib/runtime/components/react/dist/mpx-swiper-item.jsx +4 -5
- package/lib/runtime/components/react/dist/mpx-swiper.jsx +9 -9
- package/lib/runtime/components/react/dist/mpx-switch.jsx +3 -5
- package/lib/runtime/components/react/dist/mpx-text.jsx +4 -7
- package/lib/runtime/components/react/dist/mpx-video.jsx +2 -2
- package/lib/runtime/components/react/dist/mpx-view.jsx +2 -2
- package/lib/runtime/components/react/event.config.ts +1 -8
- package/lib/runtime/components/react/getInnerListeners.ts +146 -192
- package/lib/runtime/components/react/mpx-button.tsx +4 -5
- package/lib/runtime/components/react/mpx-canvas/index.tsx +23 -15
- package/lib/runtime/components/react/mpx-checkbox-group.tsx +4 -3
- package/lib/runtime/components/react/mpx-checkbox.tsx +8 -9
- package/lib/runtime/components/react/mpx-form.tsx +25 -19
- package/lib/runtime/components/react/mpx-icon/index.tsx +4 -3
- package/lib/runtime/components/react/mpx-image.tsx +4 -3
- package/lib/runtime/components/react/mpx-input.tsx +13 -8
- package/lib/runtime/components/react/mpx-keyboard-avoiding-view.tsx +5 -3
- package/lib/runtime/components/react/mpx-label.tsx +4 -5
- package/lib/runtime/components/react/mpx-movable-area.tsx +22 -13
- package/lib/runtime/components/react/mpx-movable-view.tsx +47 -40
- package/lib/runtime/components/react/mpx-navigator.tsx +4 -6
- package/lib/runtime/components/react/mpx-picker/index.tsx +7 -4
- package/lib/runtime/components/react/mpx-picker-view/index.tsx +17 -14
- package/lib/runtime/components/react/mpx-radio-group.tsx +4 -3
- package/lib/runtime/components/react/mpx-radio.tsx +8 -9
- package/lib/runtime/components/react/mpx-rich-text/index.tsx +15 -6
- package/lib/runtime/components/react/mpx-scroll-view.tsx +54 -48
- package/lib/runtime/components/react/mpx-simple-text.tsx +10 -3
- package/lib/runtime/components/react/mpx-simple-view.tsx +10 -4
- package/lib/runtime/components/react/mpx-sticky-header.tsx +1 -1
- package/lib/runtime/components/react/mpx-sticky-section.tsx +1 -1
- package/lib/runtime/components/react/mpx-swiper-item.tsx +31 -24
- package/lib/runtime/components/react/mpx-swiper.tsx +67 -61
- package/lib/runtime/components/react/mpx-switch.tsx +19 -14
- package/lib/runtime/components/react/mpx-text.tsx +16 -13
- package/lib/runtime/components/react/mpx-video.tsx +34 -33
- package/lib/runtime/components/react/mpx-view.tsx +15 -9
- package/lib/runtime/components/react/types/getInnerListeners.d.ts +65 -35
- package/package.json +1 -1
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
export const TAP_EVENTS = ['bindtap', 'catchtap', 'capture-bindtap', 'capture-catchtap'];
|
|
2
|
-
export const LONGPRESS_EVENTS = ['bindlongpress', 'catchlongpress', 'capture-bindlongpress', 'capture-catchlongpress'];
|
|
3
1
|
const eventConfigMap = {
|
|
4
2
|
bindtap: { bitFlag: '0', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd'] },
|
|
5
3
|
bindlongpress: { bitFlag: '1', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'] },
|
|
@@ -1,21 +1,22 @@
|
|
|
1
1
|
import { useRef, useMemo } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { collectDataset } from '@mpxjs/utils';
|
|
3
3
|
import { omit, extendObject, useNavigation } from './utils';
|
|
4
|
-
import eventConfigMap
|
|
4
|
+
import eventConfigMap from './event.config';
|
|
5
5
|
const globalEventState = {
|
|
6
6
|
needPress: true
|
|
7
7
|
};
|
|
8
|
-
const getTouchEvent = (type, event,
|
|
8
|
+
const getTouchEvent = (type, event, config) => {
|
|
9
|
+
const { navigation, propsRef, layoutRef } = config;
|
|
10
|
+
const props = propsRef.current;
|
|
9
11
|
const { y: navigationY = 0 } = navigation?.layout || {};
|
|
10
12
|
const nativeEvent = event.nativeEvent;
|
|
11
13
|
const { timestamp, pageX, pageY, touches, changedTouches } = nativeEvent;
|
|
12
14
|
const { id } = props;
|
|
13
|
-
const { layoutRef } = config;
|
|
14
15
|
const currentTarget = extendObject({}, event.currentTarget, {
|
|
15
16
|
id: id || '',
|
|
16
17
|
dataset: collectDataset(props),
|
|
17
|
-
offsetLeft: layoutRef
|
|
18
|
-
offsetTop: layoutRef
|
|
18
|
+
offsetLeft: layoutRef.current?.offsetLeft || 0,
|
|
19
|
+
offsetTop: layoutRef.current?.offsetTop || 0
|
|
19
20
|
});
|
|
20
21
|
const pendingProps = event._targetInst?.pendingProps || {};
|
|
21
22
|
const target = extendObject({}, event.target, {
|
|
@@ -70,150 +71,107 @@ export const getCustomEvent = (type = '', oe = {}, { detail = {}, layoutRef }, p
|
|
|
70
71
|
preventDefault: oe.preventDefault
|
|
71
72
|
});
|
|
72
73
|
};
|
|
73
|
-
function handleEmitEvent(
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
return;
|
|
80
|
-
}
|
|
81
|
-
if (match) {
|
|
82
|
-
const eventBase = match[2] || '';
|
|
83
|
-
if (eventBase === 'tap' || eventBase === 'longpress') {
|
|
84
|
-
// 为 tap、longpress 添加标记,影响后续的冒泡
|
|
85
|
-
if (!oe._stoppedEventTypes) {
|
|
86
|
-
oe._stoppedEventTypes = new Set();
|
|
87
|
-
}
|
|
88
|
-
oe._stoppedEventTypes.add(eventBase);
|
|
89
|
-
}
|
|
90
|
-
else {
|
|
91
|
-
// 原生 touch 事件使用 stopPropagation
|
|
92
|
-
oe.stopPropagation();
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
propsRef.current[event](getTouchEvent(type, oe, propsRef.current, config, navigation));
|
|
74
|
+
function handleEmitEvent(name, e, type, eventConfig) {
|
|
75
|
+
const { propsRef } = eventConfig;
|
|
76
|
+
const eventCfg = eventConfig[name];
|
|
77
|
+
if (eventCfg) {
|
|
78
|
+
if (eventCfg.hasCatch && name !== 'tap' && name !== 'longpress') {
|
|
79
|
+
e.stopPropagation();
|
|
96
80
|
}
|
|
97
|
-
|
|
81
|
+
eventCfg[type].forEach((event) => {
|
|
82
|
+
propsRef.current[event]?.(getTouchEvent(name, e, eventConfig));
|
|
83
|
+
});
|
|
84
|
+
}
|
|
98
85
|
}
|
|
99
86
|
function checkIsNeedPress(e, type, ref) {
|
|
100
87
|
const tapDetailInfo = ref.current.mpxPressInfo.detail || { x: 0, y: 0 };
|
|
101
|
-
const
|
|
102
|
-
const
|
|
103
|
-
const currentPageY = nativeEvent.changedTouches[0].pageY;
|
|
88
|
+
const currentPageX = e.nativeEvent.changedTouches[0].pageX;
|
|
89
|
+
const currentPageY = e.nativeEvent.changedTouches[0].pageY;
|
|
104
90
|
if (Math.abs(currentPageX - tapDetailInfo.x) > 3 ||
|
|
105
91
|
Math.abs(currentPageY - tapDetailInfo.y) > 3) {
|
|
106
92
|
globalEventState.needPress = false;
|
|
107
|
-
ref.current.startTimer[type] &&
|
|
108
|
-
clearTimeout(ref.current.startTimer[type]);
|
|
93
|
+
ref.current.startTimer[type] && clearTimeout(ref.current.startTimer[type]);
|
|
109
94
|
ref.current.startTimer[type] = null;
|
|
110
95
|
}
|
|
111
96
|
}
|
|
112
|
-
function handleTouchstart(e, type,
|
|
97
|
+
function handleTouchstart(e, type, eventConfig) {
|
|
98
|
+
// 阻止事件被释放放回对象池,导致对象复用 _stoppedEventTypes 状态被保留
|
|
113
99
|
e.persist();
|
|
114
|
-
const
|
|
115
|
-
const bubblePressEvent = ['catchlongpress', 'bindlongpress'];
|
|
116
|
-
const captureTouchEvent = [
|
|
117
|
-
'capture-catchtouchstart',
|
|
118
|
-
'capture-bindtouchstart'
|
|
119
|
-
];
|
|
120
|
-
const capturePressEvent = [
|
|
121
|
-
'capture-catchlongpress',
|
|
122
|
-
'capture-bindlongpress'
|
|
123
|
-
];
|
|
124
|
-
ref.current.startTimer[type] = null;
|
|
100
|
+
const { innerRef } = eventConfig;
|
|
125
101
|
globalEventState.needPress = true;
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
y: nativeEvent.changedTouches[0].pageY
|
|
102
|
+
innerRef.current.mpxPressInfo.detail = {
|
|
103
|
+
x: e.nativeEvent.changedTouches[0].pageX,
|
|
104
|
+
y: e.nativeEvent.changedTouches[0].pageY
|
|
130
105
|
};
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
106
|
+
handleEmitEvent('touchstart', e, type, eventConfig);
|
|
107
|
+
if (eventConfig.longpress) {
|
|
108
|
+
if (e._stoppedEventTypes?.has('longpress')) {
|
|
109
|
+
return;
|
|
110
|
+
}
|
|
111
|
+
if (eventConfig.longpress.hasCatch) {
|
|
112
|
+
e._stoppedEventTypes = e._stoppedEventTypes || new Set();
|
|
113
|
+
e._stoppedEventTypes.add('longpress');
|
|
114
|
+
}
|
|
115
|
+
innerRef.current.startTimer[type] && clearTimeout(innerRef.current.startTimer[type]);
|
|
116
|
+
innerRef.current.startTimer[type] = setTimeout(() => {
|
|
136
117
|
// 只要触发过longpress, 全局就不再触发tap
|
|
137
118
|
globalEventState.needPress = false;
|
|
138
|
-
handleEmitEvent(
|
|
119
|
+
handleEmitEvent('longpress', e, type, eventConfig);
|
|
139
120
|
}, 350);
|
|
140
121
|
}
|
|
141
122
|
}
|
|
142
|
-
function handleTouchmove(e, type,
|
|
143
|
-
const
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
];
|
|
148
|
-
const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent;
|
|
149
|
-
handleEmitEvent(currentTouchEvent, 'touchmove', e, propsRef, config, navigation);
|
|
150
|
-
if (TAP_EVENTS.some(eventName => propsRef.current[eventName])) {
|
|
151
|
-
checkIsNeedPress(e, type, ref);
|
|
123
|
+
function handleTouchmove(e, type, eventConfig) {
|
|
124
|
+
const { innerRef } = eventConfig;
|
|
125
|
+
handleEmitEvent('touchmove', e, type, eventConfig);
|
|
126
|
+
if (eventConfig.tap) {
|
|
127
|
+
checkIsNeedPress(e, type, innerRef);
|
|
152
128
|
}
|
|
153
129
|
}
|
|
154
|
-
function handleTouchend(e, type,
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
const captureTouchEvent = [
|
|
162
|
-
'capture-catchtouchend',
|
|
163
|
-
'capture-bindtouchend'
|
|
164
|
-
];
|
|
165
|
-
const captureTapEvent = ['capture-catchtap', 'capture-bindtap'];
|
|
166
|
-
const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent;
|
|
167
|
-
const currentTapEvent = type === 'bubble' ? bubbleTapEvent : captureTapEvent;
|
|
168
|
-
ref.current.startTimer[type] &&
|
|
169
|
-
clearTimeout(ref.current.startTimer[type]);
|
|
170
|
-
ref.current.startTimer[type] = null;
|
|
171
|
-
handleEmitEvent(currentTouchEvent, 'touchend', e, propsRef, config, navigation);
|
|
172
|
-
if (globalEventState.needPress) {
|
|
173
|
-
if (type === 'bubble' && config.disableTap) {
|
|
130
|
+
function handleTouchend(e, type, eventConfig) {
|
|
131
|
+
const { innerRef, disableTap } = eventConfig;
|
|
132
|
+
handleEmitEvent('touchend', e, type, eventConfig);
|
|
133
|
+
innerRef.current.startTimer[type] && clearTimeout(innerRef.current.startTimer[type]);
|
|
134
|
+
if (eventConfig.tap) {
|
|
135
|
+
checkIsNeedPress(e, type, innerRef);
|
|
136
|
+
if (!globalEventState.needPress || (type === 'bubble' && disableTap) || e._stoppedEventTypes?.has('tap')) {
|
|
174
137
|
return;
|
|
175
138
|
}
|
|
176
|
-
|
|
139
|
+
if (eventConfig.tap.hasCatch) {
|
|
140
|
+
e._stoppedEventTypes = e._stoppedEventTypes || new Set();
|
|
141
|
+
e._stoppedEventTypes.add('tap');
|
|
142
|
+
}
|
|
143
|
+
handleEmitEvent('tap', e, type, eventConfig);
|
|
177
144
|
}
|
|
178
145
|
}
|
|
179
|
-
function handleTouchcancel(e, type,
|
|
180
|
-
const
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
'capture-bindtouchcancel'
|
|
184
|
-
];
|
|
185
|
-
const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent;
|
|
186
|
-
ref.current.startTimer[type] &&
|
|
187
|
-
clearTimeout(ref.current.startTimer[type]);
|
|
188
|
-
ref.current.startTimer[type] = null;
|
|
189
|
-
handleEmitEvent(currentTouchEvent, 'touchcancel', e, propsRef, config, navigation);
|
|
146
|
+
function handleTouchcancel(e, type, eventConfig) {
|
|
147
|
+
const { innerRef } = eventConfig;
|
|
148
|
+
handleEmitEvent('touchcancel', e, type, eventConfig);
|
|
149
|
+
innerRef.current.startTimer[type] && clearTimeout(innerRef.current.startTimer[type]);
|
|
190
150
|
}
|
|
191
|
-
function createTouchEventHandler(eventName,
|
|
192
|
-
return (e
|
|
193
|
-
const
|
|
151
|
+
function createTouchEventHandler(eventName, eventConfig) {
|
|
152
|
+
return (e) => {
|
|
153
|
+
const bubbleHandlerMap = {
|
|
194
154
|
onTouchStart: handleTouchstart,
|
|
195
155
|
onTouchMove: handleTouchmove,
|
|
196
156
|
onTouchEnd: handleTouchend,
|
|
197
157
|
onTouchCancel: handleTouchcancel
|
|
198
158
|
};
|
|
199
|
-
const
|
|
200
|
-
|
|
201
|
-
|
|
159
|
+
const captureHandlerMap = {
|
|
160
|
+
onTouchStartCapture: handleTouchstart,
|
|
161
|
+
onTouchMoveCapture: handleTouchmove,
|
|
162
|
+
onTouchEndCapture: handleTouchend,
|
|
163
|
+
onTouchCancelCapture: handleTouchcancel
|
|
164
|
+
};
|
|
165
|
+
if (bubbleHandlerMap[eventName]) {
|
|
166
|
+
bubbleHandlerMap[eventName](e, 'bubble', eventConfig);
|
|
167
|
+
}
|
|
168
|
+
if (captureHandlerMap[eventName]) {
|
|
169
|
+
captureHandlerMap[eventName](e, 'capture', eventConfig);
|
|
202
170
|
}
|
|
203
171
|
};
|
|
204
172
|
}
|
|
205
|
-
const
|
|
206
|
-
|
|
207
|
-
{ eventName: 'onTouchMove', handler: createTouchEventHandler('onTouchMove', 'bubble') },
|
|
208
|
-
{ eventName: 'onTouchEnd', handler: createTouchEventHandler('onTouchEnd', 'bubble') },
|
|
209
|
-
{ eventName: 'onTouchCancel', handler: createTouchEventHandler('onTouchCancel', 'bubble') },
|
|
210
|
-
{ eventName: 'onTouchStartCapture', handler: createTouchEventHandler('onTouchStart', 'capture') },
|
|
211
|
-
{ eventName: 'onTouchMoveCapture', handler: createTouchEventHandler('onTouchMove', 'capture') },
|
|
212
|
-
{ eventName: 'onTouchEndCapture', handler: createTouchEventHandler('onTouchEnd', 'capture') },
|
|
213
|
-
{ eventName: 'onTouchCancelCapture', handler: createTouchEventHandler('onTouchCancel', 'capture') }
|
|
214
|
-
];
|
|
215
|
-
const useInnerProps = (props = {}, additionalProps = {}, userRemoveProps = [], rawConfig) => {
|
|
216
|
-
const ref = useRef({
|
|
173
|
+
const useInnerProps = (props = {}, userRemoveProps = [], rawConfig) => {
|
|
174
|
+
const innerRef = useRef({
|
|
217
175
|
startTimer: {
|
|
218
176
|
bubble: null,
|
|
219
177
|
capture: null
|
|
@@ -226,52 +184,68 @@ const useInnerProps = (props = {}, additionalProps = {}, userRemoveProps = [], r
|
|
|
226
184
|
}
|
|
227
185
|
});
|
|
228
186
|
const propsRef = useRef({});
|
|
229
|
-
|
|
230
|
-
const config = rawConfig || {
|
|
231
|
-
layoutRef: { current: {} },
|
|
232
|
-
disableTap: false
|
|
233
|
-
};
|
|
187
|
+
propsRef.current = props;
|
|
234
188
|
const navigation = useNavigation();
|
|
235
|
-
const
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
...userRemoveProps
|
|
245
|
-
];
|
|
246
|
-
propsRef.current = extendObject({}, props, additionalProps);
|
|
189
|
+
const eventConfig = extendObject({
|
|
190
|
+
layoutRef: {
|
|
191
|
+
current: null
|
|
192
|
+
},
|
|
193
|
+
propsRef,
|
|
194
|
+
innerRef,
|
|
195
|
+
disableTap: false,
|
|
196
|
+
navigation
|
|
197
|
+
}, rawConfig);
|
|
247
198
|
let hashEventKey = '';
|
|
248
199
|
const rawEventKeys = [];
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
hashEventKey
|
|
200
|
+
const transformedEventSet = new Set();
|
|
201
|
+
Object.keys(props).forEach((key) => {
|
|
202
|
+
if (eventConfigMap[key]) {
|
|
203
|
+
hashEventKey += eventConfigMap[key].bitFlag;
|
|
253
204
|
rawEventKeys.push(key);
|
|
205
|
+
eventConfigMap[key].events.forEach((event) => {
|
|
206
|
+
transformedEventSet.add(event);
|
|
207
|
+
});
|
|
208
|
+
const match = /^(bind|catch|capture-bind|capture-catch)(.*)$/.exec(key);
|
|
209
|
+
const prefix = match[1];
|
|
210
|
+
const eventName = match[2];
|
|
211
|
+
eventConfig[eventName] = eventConfig[eventName] || {
|
|
212
|
+
bubble: [],
|
|
213
|
+
capture: [],
|
|
214
|
+
hasCatch: false
|
|
215
|
+
};
|
|
216
|
+
if (prefix === 'bind' || prefix === 'catch') {
|
|
217
|
+
eventConfig[eventName].bubble.push(key);
|
|
218
|
+
}
|
|
219
|
+
else {
|
|
220
|
+
eventConfig[eventName].capture.push(key);
|
|
221
|
+
}
|
|
222
|
+
if (prefix === 'catch' || prefix === 'capture-catch') {
|
|
223
|
+
eventConfig[eventName].hasCatch = true;
|
|
224
|
+
}
|
|
254
225
|
}
|
|
255
|
-
}
|
|
226
|
+
});
|
|
256
227
|
const events = useMemo(() => {
|
|
257
|
-
if (!
|
|
228
|
+
if (!hashEventKey) {
|
|
258
229
|
return {};
|
|
259
230
|
}
|
|
260
|
-
const transformedEventKeys = rawEventKeys.reduce((acc, key) => {
|
|
261
|
-
if (propsRef.current[key]) {
|
|
262
|
-
return acc.concat(eventConfig[key]);
|
|
263
|
-
}
|
|
264
|
-
return acc;
|
|
265
|
-
}, []);
|
|
266
|
-
const finalEventKeys = [...new Set(transformedEventKeys)];
|
|
267
231
|
const events = {};
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
}
|
|
272
|
-
});
|
|
232
|
+
for (const eventName of transformedEventSet) {
|
|
233
|
+
events[eventName] = createTouchEventHandler(eventName, eventConfig);
|
|
234
|
+
}
|
|
273
235
|
return events;
|
|
274
236
|
}, [hashEventKey]);
|
|
275
|
-
|
|
237
|
+
const removeProps = [
|
|
238
|
+
'children',
|
|
239
|
+
'enable-background',
|
|
240
|
+
'enable-offset',
|
|
241
|
+
'enable-var',
|
|
242
|
+
'external-var-context',
|
|
243
|
+
'parent-font-size',
|
|
244
|
+
'parent-width',
|
|
245
|
+
'parent-height',
|
|
246
|
+
...userRemoveProps,
|
|
247
|
+
...rawEventKeys
|
|
248
|
+
];
|
|
249
|
+
return extendObject({}, events, omit(props, removeProps));
|
|
276
250
|
};
|
|
277
251
|
export default useInnerProps;
|
|
@@ -236,10 +236,9 @@ const Button = forwardRef((buttonProps, ref) => {
|
|
|
236
236
|
handleOpenTypeEvent(evt);
|
|
237
237
|
handleFormTypeFn();
|
|
238
238
|
};
|
|
239
|
-
const innerProps = useInnerProps(props,
|
|
239
|
+
const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
|
|
240
240
|
ref: nodeRef,
|
|
241
|
-
style: extendObject({}, innerStyle, layoutStyle)
|
|
242
|
-
}, layoutProps, {
|
|
241
|
+
style: extendObject({}, innerStyle, layoutStyle),
|
|
243
242
|
bindtap: !disabled && onTap
|
|
244
243
|
}), [
|
|
245
244
|
'disabled',
|
|
@@ -56,11 +56,10 @@ const _Canvas = forwardRef((props = {}, ref) => {
|
|
|
56
56
|
});
|
|
57
57
|
const { register } = useConstructorsRegistry();
|
|
58
58
|
const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
|
|
59
|
-
const innerProps = useInnerProps(props, {
|
|
59
|
+
const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
|
|
60
60
|
ref: nodeRef,
|
|
61
|
-
style: extendObject({}, normalStyle, layoutStyle, { opacity: isLoaded ? 1 : 0 })
|
|
62
|
-
|
|
63
|
-
}, [], {
|
|
61
|
+
style: extendObject({}, normalStyle, layoutStyle, { opacity: isLoaded ? 1 : 0 })
|
|
62
|
+
}), [], {
|
|
64
63
|
layoutRef
|
|
65
64
|
});
|
|
66
65
|
const context2D = new CanvasRenderingContext2D(canvasRef.current);
|
|
@@ -57,10 +57,10 @@ const CheckboxGroup = forwardRef((props, ref) => {
|
|
|
57
57
|
}
|
|
58
58
|
};
|
|
59
59
|
}, []);
|
|
60
|
-
const innerProps = useInnerProps(props,
|
|
60
|
+
const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
|
|
61
61
|
ref: nodeRef,
|
|
62
62
|
style: extendObject({}, normalStyle, layoutStyle)
|
|
63
|
-
}
|
|
63
|
+
}), [
|
|
64
64
|
'name'
|
|
65
65
|
], {
|
|
66
66
|
layoutRef
|
|
@@ -82,10 +82,9 @@ const Checkbox = forwardRef((checkboxProps, ref) => {
|
|
|
82
82
|
if (labelContext) {
|
|
83
83
|
labelContext.current.triggerChange = onChange;
|
|
84
84
|
}
|
|
85
|
-
const innerProps = useInnerProps(props,
|
|
85
|
+
const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
|
|
86
86
|
ref: nodeRef,
|
|
87
|
-
style: extendObject({}, innerStyle, layoutStyle)
|
|
88
|
-
}, layoutProps, {
|
|
87
|
+
style: extendObject({}, innerStyle, layoutStyle),
|
|
89
88
|
bindtap: !disabled && onTap
|
|
90
89
|
}), [
|
|
91
90
|
'value',
|
|
@@ -22,10 +22,10 @@ const _Form = forwardRef((fromProps, ref) => {
|
|
|
22
22
|
const propsRef = useRef({});
|
|
23
23
|
propsRef.current = props;
|
|
24
24
|
const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: formRef });
|
|
25
|
-
const innerProps = useInnerProps(props,
|
|
25
|
+
const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
|
|
26
26
|
style: extendObject({}, innerStyle, layoutStyle),
|
|
27
27
|
ref: formRef
|
|
28
|
-
}
|
|
28
|
+
}), [
|
|
29
29
|
'bindsubmit',
|
|
30
30
|
'bindreset'
|
|
31
31
|
], { layoutRef });
|
|
@@ -37,11 +37,11 @@ const Icon = forwardRef((props, ref) => {
|
|
|
37
37
|
const nodeRef = useRef(null);
|
|
38
38
|
useNodesRef(props, ref, nodeRef, { style: normalStyle });
|
|
39
39
|
const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
|
|
40
|
-
const innerProps = useInnerProps(props,
|
|
40
|
+
const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
|
|
41
41
|
ref: nodeRef,
|
|
42
42
|
source,
|
|
43
43
|
style: extendObject({}, normalStyle, layoutStyle, { tintColor: color })
|
|
44
|
-
}
|
|
44
|
+
}), [], {
|
|
45
45
|
layoutRef
|
|
46
46
|
});
|
|
47
47
|
return createElement(Image, innerProps);
|
|
@@ -258,10 +258,10 @@ const Image = forwardRef((props, ref) => {
|
|
|
258
258
|
});
|
|
259
259
|
}
|
|
260
260
|
}, [src, isSvg, isLayoutMode]);
|
|
261
|
-
const innerProps = useInnerProps(props,
|
|
261
|
+
const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
|
|
262
262
|
ref: nodeRef,
|
|
263
263
|
style: extendObject({}, normalStyle, layoutStyle, isHeightFixMode ? { width: fixedWidth } : {}, isWidthFixMode ? { height: fixedHeight } : {})
|
|
264
|
-
}
|
|
264
|
+
}), [
|
|
265
265
|
'src',
|
|
266
266
|
'mode',
|
|
267
267
|
'svg'
|
|
@@ -151,6 +151,9 @@ const Input = forwardRef((props, ref) => {
|
|
|
151
151
|
// sometimes the focus event occurs later than the keyboardWillShow event
|
|
152
152
|
setKeyboardAvoidContext();
|
|
153
153
|
};
|
|
154
|
+
const onTouchEnd = (evt) => {
|
|
155
|
+
evt.nativeEvent.origin = 'input';
|
|
156
|
+
};
|
|
154
157
|
const onFocus = (evt) => {
|
|
155
158
|
setKeyboardAvoidContext();
|
|
156
159
|
bindfocus && bindfocus(getCustomEvent('focus', evt, {
|
|
@@ -244,7 +247,7 @@ const Input = forwardRef((props, ref) => {
|
|
|
244
247
|
? nodeRef.current?.focus()
|
|
245
248
|
: nodeRef.current?.blur();
|
|
246
249
|
}, [focus]);
|
|
247
|
-
const innerProps = useInnerProps(props,
|
|
250
|
+
const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
|
|
248
251
|
ref: nodeRef,
|
|
249
252
|
style: extendObject({}, normalStyle, layoutStyle),
|
|
250
253
|
allowFontScaling,
|
|
@@ -261,16 +264,16 @@ const Input = forwardRef((props, ref) => {
|
|
|
261
264
|
underlineColorAndroid: 'rgba(0,0,0,0)',
|
|
262
265
|
textAlignVertical: textAlignVertical,
|
|
263
266
|
placeholderTextColor: placeholderStyle?.color,
|
|
264
|
-
multiline: !!multiline
|
|
265
|
-
}, !!multiline && confirmType === 'return' ? {} : { enterKeyHint: confirmType }, layoutProps, {
|
|
267
|
+
multiline: !!multiline,
|
|
266
268
|
onTouchStart,
|
|
269
|
+
onTouchEnd,
|
|
267
270
|
onFocus,
|
|
268
271
|
onBlur,
|
|
269
272
|
onChange,
|
|
270
273
|
onSelectionChange,
|
|
271
274
|
onContentSizeChange,
|
|
272
275
|
onSubmitEditing: bindconfirm && !multiline && onSubmitEditing
|
|
273
|
-
}), [
|
|
276
|
+
}, !!multiline && confirmType === 'return' ? {} : { enterKeyHint: confirmType }), [
|
|
274
277
|
'type',
|
|
275
278
|
'password',
|
|
276
279
|
'placeholder-style',
|
|
@@ -20,8 +20,10 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
|
|
|
20
20
|
offset.value = withTiming(0, { duration, easing });
|
|
21
21
|
basic.value = 'auto';
|
|
22
22
|
};
|
|
23
|
-
const onTouchEnd = () => {
|
|
24
|
-
|
|
23
|
+
const onTouchEnd = ({ nativeEvent }) => {
|
|
24
|
+
if (nativeEvent.origin !== 'input') {
|
|
25
|
+
Keyboard.isVisible() && Keyboard.dismiss();
|
|
26
|
+
}
|
|
25
27
|
};
|
|
26
28
|
useEffect(() => {
|
|
27
29
|
let subscriptions = [];
|
|
@@ -33,10 +33,9 @@ const Label = forwardRef((labelProps, ref) => {
|
|
|
33
33
|
bindtap && bindtap(getCustomEvent('tap', evt, { layoutRef }, { props: propsRef.current }));
|
|
34
34
|
contextRef.current.triggerChange(evt);
|
|
35
35
|
}, []);
|
|
36
|
-
const innerProps = useInnerProps(props,
|
|
36
|
+
const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
|
|
37
37
|
ref: nodeRef,
|
|
38
|
-
style: extendObject({}, innerStyle, layoutStyle)
|
|
39
|
-
}, layoutProps, {
|
|
38
|
+
style: extendObject({}, innerStyle, layoutStyle),
|
|
40
39
|
bindtap: onTap
|
|
41
40
|
}), [], {
|
|
42
41
|
layoutRef
|
|
@@ -19,10 +19,10 @@ const _MovableArea = forwardRef((props, ref) => {
|
|
|
19
19
|
width: normalStyle.width || 10
|
|
20
20
|
}), [normalStyle.width, normalStyle.height]);
|
|
21
21
|
const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableViewRef });
|
|
22
|
-
const innerProps = useInnerProps(props,
|
|
22
|
+
const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
|
|
23
23
|
style: extendObject({ height: contextValue.height, width: contextValue.width, overflow: 'hidden' }, normalStyle, layoutStyle),
|
|
24
24
|
ref: movableViewRef
|
|
25
|
-
}
|
|
25
|
+
}), [], { layoutRef });
|
|
26
26
|
return createElement(MovableAreaContext.Provider, { value: contextValue }, createElement(View, innerProps, wrapChildren(props, {
|
|
27
27
|
hasVarDec,
|
|
28
28
|
varContext: varContextRef.current
|
|
@@ -452,7 +452,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
|
|
|
452
452
|
'catchhtouchmove',
|
|
453
453
|
'catchtouchend'
|
|
454
454
|
]);
|
|
455
|
-
const innerProps = useInnerProps(filterProps,
|
|
455
|
+
const innerProps = useInnerProps(extendObject({}, filterProps, {
|
|
456
456
|
ref: nodeRef,
|
|
457
457
|
onLayout: onLayout,
|
|
458
458
|
style: [innerStyle, animatedStyles, layoutStyle]
|
|
@@ -1,5 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* ✔ hover-class
|
|
3
|
+
* ✘ hover-stop-propagation
|
|
4
|
+
* ✔ hover-start-time
|
|
5
|
+
* ✔ hover-stay-time
|
|
6
|
+
* ✔ open-type
|
|
7
|
+
* ✔ url
|
|
8
|
+
* ✔ delta
|
|
9
|
+
*/
|
|
1
10
|
import { useCallback, forwardRef, createElement } from 'react';
|
|
2
|
-
import useInnerProps from './getInnerListeners';
|
|
3
11
|
import { redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy';
|
|
4
12
|
import MpxView from './mpx-view';
|
|
5
13
|
const _Navigator = forwardRef((props, ref) => {
|
|
@@ -23,10 +31,10 @@ const _Navigator = forwardRef((props, ref) => {
|
|
|
23
31
|
break;
|
|
24
32
|
}
|
|
25
33
|
}, [openType, url, delta]);
|
|
26
|
-
const innerProps =
|
|
34
|
+
const innerProps = {
|
|
27
35
|
ref,
|
|
28
36
|
bindtap: handleClick
|
|
29
|
-
}
|
|
37
|
+
};
|
|
30
38
|
return createElement(MpxView, innerProps, children);
|
|
31
39
|
});
|
|
32
40
|
_Navigator.displayName = 'MpxNavigator';
|
|
@@ -114,9 +114,9 @@ const Picker = forwardRef((props, ref) => {
|
|
|
114
114
|
const pickerRef = useRef(null);
|
|
115
115
|
const { open, show, hide, remove } = useRef(createPopupManager()).current;
|
|
116
116
|
useNodesRef(props, ref, nodeRef);
|
|
117
|
-
const innerProps = useInnerProps(props, {
|
|
117
|
+
const innerProps = useInnerProps(extendObject({}, props, {
|
|
118
118
|
ref: nodeRef
|
|
119
|
-
}, [], { layoutRef: innerLayout });
|
|
119
|
+
}), [], { layoutRef: innerLayout });
|
|
120
120
|
const getInnerLayout = (layout) => {
|
|
121
121
|
innerLayout.current = layout.current;
|
|
122
122
|
};
|
|
@@ -47,13 +47,12 @@ const _PickerView = forwardRef((props, ref) => {
|
|
|
47
47
|
snapActiveValueRef.current = value.slice();
|
|
48
48
|
}
|
|
49
49
|
};
|
|
50
|
-
const innerProps = useInnerProps(props,
|
|
50
|
+
const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
|
|
51
51
|
ref: nodeRef,
|
|
52
52
|
style: extendObject({}, normalStyle, layoutStyle, {
|
|
53
53
|
position: 'relative',
|
|
54
54
|
overflow: 'hidden'
|
|
55
|
-
})
|
|
56
|
-
layoutProps
|
|
55
|
+
})
|
|
57
56
|
}), [
|
|
58
57
|
'enable-offset',
|
|
59
58
|
'indicator-style',
|
|
@@ -71,10 +71,10 @@ const radioGroup = forwardRef((props, ref) => {
|
|
|
71
71
|
notifyChange
|
|
72
72
|
};
|
|
73
73
|
}, []);
|
|
74
|
-
const innerProps = useInnerProps(props,
|
|
74
|
+
const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
|
|
75
75
|
ref: nodeRef,
|
|
76
76
|
style: extendObject({}, normalStyle, layoutStyle)
|
|
77
|
-
}
|
|
77
|
+
}), ['name'], {
|
|
78
78
|
layoutRef
|
|
79
79
|
});
|
|
80
80
|
return createElement(View, innerProps, createElement(RadioGroupContext.Provider, { value: contextValue }, wrapChildren(props, {
|
|
@@ -91,10 +91,9 @@ const Radio = forwardRef((radioProps, ref) => {
|
|
|
91
91
|
if (labelContext) {
|
|
92
92
|
labelContext.current.triggerChange = onChange;
|
|
93
93
|
}
|
|
94
|
-
const innerProps = useInnerProps(props,
|
|
94
|
+
const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
|
|
95
95
|
ref: nodeRef,
|
|
96
|
-
style: extendObject({}, innerStyle, layoutStyle)
|
|
97
|
-
}, layoutProps, {
|
|
96
|
+
style: extendObject({}, innerStyle, layoutStyle),
|
|
98
97
|
bindtap: !disabled && onTap
|
|
99
98
|
}), [
|
|
100
99
|
'value',
|