@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.
Files changed (64) hide show
  1. package/lib/runtime/components/react/dist/event.config.js +0 -2
  2. package/lib/runtime/components/react/dist/getInnerListeners.js +127 -153
  3. package/lib/runtime/components/react/dist/mpx-button.jsx +2 -3
  4. package/lib/runtime/components/react/dist/mpx-canvas/index.jsx +3 -4
  5. package/lib/runtime/components/react/dist/mpx-checkbox-group.jsx +2 -2
  6. package/lib/runtime/components/react/dist/mpx-checkbox.jsx +2 -3
  7. package/lib/runtime/components/react/dist/mpx-form.jsx +2 -2
  8. package/lib/runtime/components/react/dist/mpx-icon/index.jsx +2 -2
  9. package/lib/runtime/components/react/dist/mpx-image.jsx +2 -2
  10. package/lib/runtime/components/react/dist/mpx-input.jsx +7 -4
  11. package/lib/runtime/components/react/dist/mpx-keyboard-avoiding-view.jsx +4 -2
  12. package/lib/runtime/components/react/dist/mpx-label.jsx +2 -3
  13. package/lib/runtime/components/react/dist/mpx-movable-area.jsx +2 -2
  14. package/lib/runtime/components/react/dist/mpx-movable-view.jsx +1 -1
  15. package/lib/runtime/components/react/dist/mpx-navigator.jsx +11 -3
  16. package/lib/runtime/components/react/dist/mpx-picker/index.jsx +2 -2
  17. package/lib/runtime/components/react/dist/mpx-picker-view/index.jsx +2 -3
  18. package/lib/runtime/components/react/dist/mpx-radio-group.jsx +2 -2
  19. package/lib/runtime/components/react/dist/mpx-radio.jsx +2 -3
  20. package/lib/runtime/components/react/dist/mpx-rich-text/index.jsx +2 -2
  21. package/lib/runtime/components/react/dist/mpx-scroll-view.jsx +1 -1
  22. package/lib/runtime/components/react/dist/mpx-simple-text.jsx +3 -2
  23. package/lib/runtime/components/react/dist/mpx-simple-view.jsx +3 -3
  24. package/lib/runtime/components/react/dist/mpx-sticky-header.jsx +1 -1
  25. package/lib/runtime/components/react/dist/mpx-sticky-section.jsx +1 -1
  26. package/lib/runtime/components/react/dist/mpx-swiper-item.jsx +4 -5
  27. package/lib/runtime/components/react/dist/mpx-swiper.jsx +9 -9
  28. package/lib/runtime/components/react/dist/mpx-switch.jsx +3 -5
  29. package/lib/runtime/components/react/dist/mpx-text.jsx +4 -7
  30. package/lib/runtime/components/react/dist/mpx-video.jsx +2 -2
  31. package/lib/runtime/components/react/dist/mpx-view.jsx +2 -2
  32. package/lib/runtime/components/react/event.config.ts +1 -8
  33. package/lib/runtime/components/react/getInnerListeners.ts +146 -192
  34. package/lib/runtime/components/react/mpx-button.tsx +4 -5
  35. package/lib/runtime/components/react/mpx-canvas/index.tsx +23 -15
  36. package/lib/runtime/components/react/mpx-checkbox-group.tsx +4 -3
  37. package/lib/runtime/components/react/mpx-checkbox.tsx +8 -9
  38. package/lib/runtime/components/react/mpx-form.tsx +25 -19
  39. package/lib/runtime/components/react/mpx-icon/index.tsx +4 -3
  40. package/lib/runtime/components/react/mpx-image.tsx +4 -3
  41. package/lib/runtime/components/react/mpx-input.tsx +13 -8
  42. package/lib/runtime/components/react/mpx-keyboard-avoiding-view.tsx +5 -3
  43. package/lib/runtime/components/react/mpx-label.tsx +4 -5
  44. package/lib/runtime/components/react/mpx-movable-area.tsx +22 -13
  45. package/lib/runtime/components/react/mpx-movable-view.tsx +47 -40
  46. package/lib/runtime/components/react/mpx-navigator.tsx +4 -6
  47. package/lib/runtime/components/react/mpx-picker/index.tsx +7 -4
  48. package/lib/runtime/components/react/mpx-picker-view/index.tsx +17 -14
  49. package/lib/runtime/components/react/mpx-radio-group.tsx +4 -3
  50. package/lib/runtime/components/react/mpx-radio.tsx +8 -9
  51. package/lib/runtime/components/react/mpx-rich-text/index.tsx +15 -6
  52. package/lib/runtime/components/react/mpx-scroll-view.tsx +54 -48
  53. package/lib/runtime/components/react/mpx-simple-text.tsx +10 -3
  54. package/lib/runtime/components/react/mpx-simple-view.tsx +10 -4
  55. package/lib/runtime/components/react/mpx-sticky-header.tsx +1 -1
  56. package/lib/runtime/components/react/mpx-sticky-section.tsx +1 -1
  57. package/lib/runtime/components/react/mpx-swiper-item.tsx +31 -24
  58. package/lib/runtime/components/react/mpx-swiper.tsx +67 -61
  59. package/lib/runtime/components/react/mpx-switch.tsx +19 -14
  60. package/lib/runtime/components/react/mpx-text.tsx +16 -13
  61. package/lib/runtime/components/react/mpx-video.tsx +34 -33
  62. package/lib/runtime/components/react/mpx-view.tsx +15 -9
  63. package/lib/runtime/components/react/types/getInnerListeners.d.ts +65 -35
  64. 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 { hasOwn, collectDataset } from '@mpxjs/utils';
2
+ import { collectDataset } from '@mpxjs/utils';
3
3
  import { omit, extendObject, useNavigation } from './utils';
4
- import eventConfigMap, { TAP_EVENTS, LONGPRESS_EVENTS } from './event.config';
4
+ import eventConfigMap from './event.config';
5
5
  const globalEventState = {
6
6
  needPress: true
7
7
  };
8
- const getTouchEvent = (type, event, props, config, navigation) => {
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?.current?.offsetLeft || 0,
18
- offsetTop: layoutRef?.current?.offsetTop || 0
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(events, type, oe, propsRef, config, navigation) {
74
- events.forEach((event) => {
75
- if (propsRef.current[event]) {
76
- const match = /^(catch|capture-catch):?(.*?)(?:\.(.*))?$/.exec(event);
77
- // 检查是否已经被上层的 catch 阻止
78
- if ((type === 'tap' || type === 'longpress') && oe._stoppedEventTypes?.has(type)) {
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 nativeEvent = e.nativeEvent;
102
- const currentPageX = nativeEvent.changedTouches[0].pageX;
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, ref, propsRef, config, navigation) {
97
+ function handleTouchstart(e, type, eventConfig) {
98
+ // 阻止事件被释放放回对象池,导致对象复用 _stoppedEventTypes 状态被保留
113
99
  e.persist();
114
- const bubbleTouchEvent = ['catchtouchstart', 'bindtouchstart'];
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
- const nativeEvent = e.nativeEvent;
127
- ref.current.mpxPressInfo.detail = {
128
- x: nativeEvent.changedTouches[0].pageX,
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
- const currentTouchEvent = type === 'bubble' ? bubbleTouchEvent : captureTouchEvent;
132
- const currentPressEvent = type === 'bubble' ? bubblePressEvent : capturePressEvent;
133
- handleEmitEvent(currentTouchEvent, 'touchstart', e, propsRef, config, navigation);
134
- if (LONGPRESS_EVENTS.some(eventName => propsRef.current[eventName])) {
135
- ref.current.startTimer[type] = setTimeout(() => {
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(currentPressEvent, 'longpress', e, propsRef, config, navigation);
119
+ handleEmitEvent('longpress', e, type, eventConfig);
139
120
  }, 350);
140
121
  }
141
122
  }
142
- function handleTouchmove(e, type, ref, propsRef, config, navigation) {
143
- const bubbleTouchEvent = ['catchtouchmove', 'bindtouchmove'];
144
- const captureTouchEvent = [
145
- 'capture-catchtouchmove',
146
- 'capture-bindtouchmove'
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, ref, propsRef, config, navigation) {
155
- // move event may not be triggered
156
- if (TAP_EVENTS.some(eventName => propsRef.current[eventName])) {
157
- checkIsNeedPress(e, type, ref);
158
- }
159
- const bubbleTouchEvent = ['catchtouchend', 'bindtouchend'];
160
- const bubbleTapEvent = ['catchtap', 'bindtap'];
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
- handleEmitEvent(currentTapEvent, 'tap', e, propsRef, config, navigation);
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, ref, propsRef, config, navigation) {
180
- const bubbleTouchEvent = ['catchtouchcancel', 'bindtouchcancel'];
181
- const captureTouchEvent = [
182
- 'capture-catchtouchcancel',
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, type) {
192
- return (e, ref, propsRef, config, navigation) => {
193
- const handlerMap = {
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 handler = handlerMap[eventName];
200
- if (handler) {
201
- handler(e, type, ref, propsRef, config, navigation);
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 touchEventList = [
206
- { eventName: 'onTouchStart', handler: createTouchEventHandler('onTouchStart', 'bubble') },
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
- const eventConfig = {};
230
- const config = rawConfig || {
231
- layoutRef: { current: {} },
232
- disableTap: false
233
- };
187
+ propsRef.current = props;
234
188
  const navigation = useNavigation();
235
- const removeProps = [
236
- 'children',
237
- 'enable-background',
238
- 'enable-offset',
239
- 'enable-var',
240
- 'external-var-context',
241
- 'parent-font-size',
242
- 'parent-width',
243
- 'parent-height',
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
- for (const key in eventConfigMap) {
250
- if (hasOwn(propsRef.current, key)) {
251
- eventConfig[key] = eventConfigMap[key].events;
252
- hashEventKey = hashEventKey + eventConfigMap[key].bitFlag;
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 (!rawEventKeys.length) {
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
- touchEventList.forEach((item) => {
269
- if (finalEventKeys.includes(item.eventName)) {
270
- events[item.eventName] = (e) => item.handler(e, ref, propsRef, config, navigation);
271
- }
272
- });
232
+ for (const eventName of transformedEventSet) {
233
+ events[eventName] = createTouchEventHandler(eventName, eventConfig);
234
+ }
273
235
  return events;
274
236
  }, [hashEventKey]);
275
- return extendObject({}, events, omit(propsRef.current, [...rawEventKeys, ...removeProps]));
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, extendObject({
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
- ...layoutProps
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, extendObject({
60
+ const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
61
61
  ref: nodeRef,
62
62
  style: extendObject({}, normalStyle, layoutStyle)
63
- }, layoutProps), [
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, extendObject({
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, extendObject({
25
+ const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
26
26
  style: extendObject({}, innerStyle, layoutStyle),
27
27
  ref: formRef
28
- }, layoutProps), [
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, extendObject({
40
+ const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
41
41
  ref: nodeRef,
42
42
  source,
43
43
  style: extendObject({}, normalStyle, layoutStyle, { tintColor: color })
44
- }, layoutProps), [], {
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, extendObject({
261
+ const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
262
262
  ref: nodeRef,
263
263
  style: extendObject({}, normalStyle, layoutStyle, isHeightFixMode ? { width: fixedWidth } : {}, isWidthFixMode ? { height: fixedHeight } : {})
264
- }, layoutProps), [
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, extendObject({
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
- Keyboard.isVisible() && Keyboard.dismiss();
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, extendObject({
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, extendObject({
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
- }, layoutProps), [], { layoutRef });
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, extendObject({
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 = useInnerProps(props, {
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, extendObject({
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, extendObject({
74
+ const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
75
75
  ref: nodeRef,
76
76
  style: extendObject({}, normalStyle, layoutStyle)
77
- }, layoutProps), ['name'], {
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, extendObject({
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',