@mpxjs/webpack-plugin 2.10.19 → 2.10.21
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/dependencies/ResolveDependency.js +2 -2
- package/lib/index.js +38 -7
- package/lib/json-compiler/helper.js +11 -10
- package/lib/json-compiler/index.js +7 -4
- package/lib/json-compiler/plugin.js +4 -4
- package/lib/loader.js +4 -4
- package/lib/native-loader.js +4 -4
- package/lib/parser.js +1 -1
- package/lib/platform/create-diagnostic.js +168 -0
- package/lib/platform/index.js +16 -3
- package/lib/platform/json/wx/index.js +66 -17
- package/lib/platform/run-rules.js +9 -5
- package/lib/platform/style/wx/index.js +82 -33
- package/lib/platform/template/normalize-component-rules.js +7 -9
- package/lib/platform/template/wx/component-config/block.js +2 -1
- package/lib/platform/template/wx/component-config/custom-built-in-component.js +34 -0
- package/lib/platform/template/wx/component-config/index.js +18 -3
- package/lib/platform/template/wx/component-config/input.js +1 -7
- package/lib/platform/template/wx/component-config/movable-view.js +1 -7
- package/lib/platform/template/wx/component-config/text.js +1 -1
- package/lib/platform/template/wx/component-config/textarea.js +1 -25
- package/lib/platform/template/wx/component-config/unsupported.js +1 -1
- package/lib/platform/template/wx/index.js +48 -34
- package/lib/react/processJSON.js +7 -4
- package/lib/react/processStyles.js +22 -8
- package/lib/react/processTemplate.js +98 -41
- package/lib/react/style-helper.js +121 -86
- package/lib/react/template-loader.js +161 -0
- package/lib/runtime/components/react/context.ts +8 -1
- package/lib/runtime/components/react/dist/context.d.ts +6 -1
- package/lib/runtime/components/react/dist/context.js +1 -0
- package/lib/runtime/components/react/dist/getInnerListeners.js +1 -0
- package/lib/runtime/components/react/dist/mpx-async-suspense.jsx +1 -1
- package/lib/runtime/components/react/dist/mpx-button.d.ts +1 -1
- package/lib/runtime/components/react/dist/mpx-button.jsx +6 -5
- package/lib/runtime/components/react/dist/mpx-camera.jsx +1 -0
- package/lib/runtime/components/react/dist/mpx-canvas/index.jsx +4 -1
- package/lib/runtime/components/react/dist/mpx-checkbox-group.jsx +2 -1
- package/lib/runtime/components/react/dist/mpx-checkbox.jsx +6 -4
- package/lib/runtime/components/react/dist/mpx-form.jsx +3 -3
- package/lib/runtime/components/react/dist/mpx-icon/index.jsx +5 -1
- package/lib/runtime/components/react/dist/mpx-image.d.ts +3 -3
- package/lib/runtime/components/react/dist/mpx-image.jsx +45 -12
- package/lib/runtime/components/react/dist/mpx-inline-text.jsx +10 -6
- package/lib/runtime/components/react/dist/mpx-input.jsx +17 -4
- package/lib/runtime/components/react/dist/mpx-label.jsx +6 -4
- package/lib/runtime/components/react/dist/mpx-movable-view.jsx +19 -4
- package/lib/runtime/components/react/dist/mpx-picker/index.jsx +12 -2
- package/lib/runtime/components/react/dist/mpx-picker/type.d.ts +1 -1
- package/lib/runtime/components/react/dist/mpx-picker-view/index.jsx +7 -4
- package/lib/runtime/components/react/dist/mpx-portal/index.jsx +5 -1
- package/lib/runtime/components/react/dist/mpx-radio-group.jsx +4 -1
- package/lib/runtime/components/react/dist/mpx-radio.jsx +5 -4
- package/lib/runtime/components/react/dist/mpx-rich-text/index.jsx +3 -1
- package/lib/runtime/components/react/dist/mpx-scroll-view.jsx +13 -4
- package/lib/runtime/components/react/dist/mpx-simple-text.jsx +52 -6
- package/lib/runtime/components/react/dist/mpx-simple-view.jsx +36 -6
- package/lib/runtime/components/react/dist/mpx-slider.jsx +2 -1
- package/lib/runtime/components/react/dist/mpx-sticky-header.jsx +8 -4
- package/lib/runtime/components/react/dist/mpx-sticky-section.jsx +6 -4
- package/lib/runtime/components/react/dist/mpx-swiper-item.jsx +7 -4
- package/lib/runtime/components/react/dist/mpx-swiper.jsx +15 -4
- package/lib/runtime/components/react/dist/mpx-switch.jsx +4 -1
- package/lib/runtime/components/react/dist/mpx-text.jsx +57 -12
- package/lib/runtime/components/react/dist/mpx-video.d.ts +2 -1
- package/lib/runtime/components/react/dist/mpx-video.jsx +10 -4
- package/lib/runtime/components/react/dist/mpx-view.jsx +42 -7
- package/lib/runtime/components/react/dist/utils.d.ts +21 -11
- package/lib/runtime/components/react/dist/utils.jsx +105 -35
- package/lib/runtime/components/react/getInnerListeners.ts +1 -0
- package/lib/runtime/components/react/mpx-async-suspense.tsx +2 -1
- package/lib/runtime/components/react/mpx-button.tsx +6 -5
- package/lib/runtime/components/react/mpx-camera.tsx +1 -0
- package/lib/runtime/components/react/mpx-canvas/index.tsx +4 -1
- package/lib/runtime/components/react/mpx-checkbox-group.tsx +2 -1
- package/lib/runtime/components/react/mpx-checkbox.tsx +6 -4
- package/lib/runtime/components/react/mpx-form.tsx +3 -3
- package/lib/runtime/components/react/mpx-icon/index.tsx +5 -1
- package/lib/runtime/components/react/mpx-image.tsx +57 -20
- package/lib/runtime/components/react/mpx-inline-text.tsx +12 -7
- package/lib/runtime/components/react/mpx-input.tsx +17 -4
- package/lib/runtime/components/react/mpx-label.tsx +6 -4
- package/lib/runtime/components/react/mpx-movable-view.tsx +20 -4
- package/lib/runtime/components/react/mpx-picker/index.tsx +12 -2
- package/lib/runtime/components/react/mpx-picker/type.ts +1 -1
- package/lib/runtime/components/react/mpx-picker-view/index.tsx +8 -4
- package/lib/runtime/components/react/mpx-portal/index.tsx +5 -1
- package/lib/runtime/components/react/mpx-radio-group.tsx +4 -1
- package/lib/runtime/components/react/mpx-radio.tsx +5 -4
- package/lib/runtime/components/react/mpx-rich-text/index.tsx +3 -1
- package/lib/runtime/components/react/mpx-scroll-view.tsx +13 -4
- package/lib/runtime/components/react/mpx-simple-text.tsx +55 -8
- package/lib/runtime/components/react/mpx-simple-view.tsx +30 -6
- package/lib/runtime/components/react/mpx-slider.tsx +2 -1
- package/lib/runtime/components/react/mpx-sticky-header.tsx +8 -4
- package/lib/runtime/components/react/mpx-sticky-section.tsx +6 -4
- package/lib/runtime/components/react/mpx-swiper-item.tsx +7 -4
- package/lib/runtime/components/react/mpx-swiper.tsx +16 -4
- package/lib/runtime/components/react/mpx-switch.tsx +4 -1
- package/lib/runtime/components/react/mpx-text.tsx +55 -15
- package/lib/runtime/components/react/mpx-video.tsx +11 -5
- package/lib/runtime/components/react/mpx-view.tsx +35 -7
- package/lib/runtime/components/react/types/global.d.ts +4 -0
- package/lib/runtime/components/react/utils.tsx +126 -45
- package/lib/runtime/components/wx/default-component.mpx +9 -0
- package/lib/runtime/components/wx/default-page.mpx +3 -11
- package/lib/runtime/optionProcessor.d.ts +2 -0
- package/lib/runtime/optionProcessor.js +77 -1
- package/lib/runtime/optionProcessorReact.js +5 -0
- package/lib/script-setup-compiler/index.js +1 -1
- package/lib/style-compiler/index.js +2 -0
- package/lib/style-compiler/plugins/remove-strip-conditional-comments.js +14 -0
- package/lib/style-compiler/plugins/trans-special.js +1 -1
- package/lib/style-compiler/strip-conditional.js +40 -26
- package/lib/template-compiler/compiler.js +306 -125
- package/lib/template-compiler/gen-node-react.js +35 -7
- package/lib/template-compiler/index.js +9 -7
- package/lib/utils/const.js +4 -1
- package/lib/utils/gen-component-tag.js +1 -5
- package/lib/utils/normalize-perf-options.js +47 -0
- package/lib/utils/partial-compile-rules.js +27 -0
- package/lib/utils/pre-process-json.js +3 -0
- package/lib/utils/source-location.js +96 -0
- package/lib/web/compile-wx-template-fragment.js +68 -0
- package/lib/web/index.js +3 -0
- package/lib/web/processJSON.js +7 -4
- package/lib/web/processMainScript.js +3 -7
- package/lib/web/processScript.js +43 -8
- package/lib/web/processStyles.js +12 -3
- package/lib/web/processTemplate.js +61 -19
- package/lib/web/template-loader.js +123 -0
- package/lib/web/template-shared.js +48 -0
- package/lib/wxml/loader.js +4 -3
- package/lib/wxss/loader.js +1 -1
- package/lib/wxss/utils.js +6 -4
- package/package.json +12 -4
- package/lib/platform/template/wx/component-config/component.js +0 -41
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { Image as RNImage, ImageStyle, NativeSyntheticEvent, ImageErrorEventData, ImageLoadEventData } from 'react-native';
|
|
2
|
+
import { Image as RNImage, ImageStyle, NativeSyntheticEvent, ImageErrorEventData, ImageLoadEventData, ImageSourcePropType } from 'react-native';
|
|
3
3
|
import { HandlerRef } from './useNodesRef';
|
|
4
4
|
export type Mode = 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | 'heightFix' | 'top' | 'bottom' | 'center' | 'left' | 'right' | 'top left' | 'top right' | 'bottom left' | 'bottom right';
|
|
5
5
|
export interface ImageProps {
|
|
6
|
-
src?: string;
|
|
6
|
+
src?: string | ImageSourcePropType;
|
|
7
7
|
mode?: Mode;
|
|
8
|
-
svg?: boolean;
|
|
9
8
|
style?: ImageStyle & Record<string, any>;
|
|
10
9
|
'enable-offset'?: boolean;
|
|
11
10
|
'enable-var'?: boolean;
|
|
@@ -14,6 +13,7 @@ export interface ImageProps {
|
|
|
14
13
|
'parent-width'?: number;
|
|
15
14
|
'parent-height'?: number;
|
|
16
15
|
'enable-fast-image'?: boolean;
|
|
16
|
+
'is-svg'?: boolean;
|
|
17
17
|
bindload?: (evt: NativeSyntheticEvent<ImageLoadEventData> | unknown) => void;
|
|
18
18
|
binderror?: (evt: NativeSyntheticEvent<ImageErrorEventData> | unknown) => void;
|
|
19
19
|
}
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { useEffect, useMemo, useState, useRef, forwardRef, createElement } from 'react';
|
|
14
14
|
import { Image as RNImage, View } from 'react-native';
|
|
15
15
|
import { noop } from '@mpxjs/utils';
|
|
16
|
-
import { SvgCssUri } from 'react-native-svg/css';
|
|
16
|
+
import { LocalSvg, SvgCssUri } from 'react-native-svg/css';
|
|
17
17
|
import useInnerProps, { getCustomEvent } from './getInnerListeners';
|
|
18
18
|
import useNodesRef from './useNodesRef';
|
|
19
19
|
import { SVG_REGEXP, useLayout, useTransformStyle, renderImage, extendObject, isAndroid } from './utils';
|
|
@@ -43,6 +43,29 @@ const isNumber = (value) => typeof value === 'number';
|
|
|
43
43
|
const relativeCenteredSize = (viewSize, imageSize) => {
|
|
44
44
|
return (viewSize - imageSize) / 2;
|
|
45
45
|
};
|
|
46
|
+
function normalizeImageSource(src) {
|
|
47
|
+
return typeof src === 'string' ? { uri: src } : src;
|
|
48
|
+
}
|
|
49
|
+
function getImageUri(src) {
|
|
50
|
+
return typeof src === 'string' ? src : RNImage.resolveAssetSource(src)?.uri || '';
|
|
51
|
+
}
|
|
52
|
+
function isSvgSource(src) {
|
|
53
|
+
const uri = getImageUri(src);
|
|
54
|
+
return SVG_REGEXP.test(uri);
|
|
55
|
+
}
|
|
56
|
+
function getImageSize(src, success, fail = noop) {
|
|
57
|
+
if (typeof src === 'string') {
|
|
58
|
+
RNImage.getSize(src, success, fail);
|
|
59
|
+
return;
|
|
60
|
+
}
|
|
61
|
+
const source = RNImage.resolveAssetSource(src);
|
|
62
|
+
if (source && source.width && source.height) {
|
|
63
|
+
success(source.width, source.height);
|
|
64
|
+
}
|
|
65
|
+
else {
|
|
66
|
+
fail();
|
|
67
|
+
}
|
|
68
|
+
}
|
|
46
69
|
// 获取能完全显示图片的缩放比例:长宽方向的缩放比例最小值即为能完全展示的比例
|
|
47
70
|
function getFitScale(width1, height1, width2, height2) {
|
|
48
71
|
return Math.min(width2 / width1, height2 / height1);
|
|
@@ -69,7 +92,7 @@ const getFixedHeight = (viewWidth, viewHeight, ratio) => {
|
|
|
69
92
|
return !fixed ? viewHeight : fixed;
|
|
70
93
|
};
|
|
71
94
|
const Image = forwardRef((props, ref) => {
|
|
72
|
-
const { src = '', mode = 'scaleToFill', style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'enable-fast-image': enableFastImage, 'parent-width': parentWidth, 'parent-height': parentHeight, bindload, binderror } = props;
|
|
95
|
+
const { src = '', mode = 'scaleToFill', style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'enable-fast-image': enableFastImage, 'parent-width': parentWidth, 'parent-height': parentHeight, 'is-svg': isSvgProp, bindload, binderror } = props;
|
|
73
96
|
const defaultStyle = {
|
|
74
97
|
width: DEFAULT_IMAGE_WIDTH,
|
|
75
98
|
height: DEFAULT_IMAGE_HEIGHT
|
|
@@ -79,7 +102,7 @@ const Image = forwardRef((props, ref) => {
|
|
|
79
102
|
useNodesRef(props, ref, nodeRef, {
|
|
80
103
|
defaultStyle
|
|
81
104
|
});
|
|
82
|
-
const isSvg =
|
|
105
|
+
const isSvg = isSvgProp || isSvgSource(src);
|
|
83
106
|
const isWidthFixMode = mode === 'widthFix';
|
|
84
107
|
const isHeightFixMode = mode === 'heightFix';
|
|
85
108
|
const isCropMode = cropMode.includes(mode);
|
|
@@ -270,12 +293,18 @@ const Image = forwardRef((props, ref) => {
|
|
|
270
293
|
};
|
|
271
294
|
const onImageLoad = (evt) => {
|
|
272
295
|
evt.persist();
|
|
273
|
-
|
|
296
|
+
const triggerLoad = (width, height) => {
|
|
274
297
|
bindload(getCustomEvent('load', evt, {
|
|
275
298
|
detail: { width, height },
|
|
276
299
|
layoutRef
|
|
277
300
|
}, props));
|
|
278
|
-
}
|
|
301
|
+
};
|
|
302
|
+
const { source } = evt.nativeEvent;
|
|
303
|
+
if (source && source.width && source.height) {
|
|
304
|
+
triggerLoad(source.width, source.height);
|
|
305
|
+
return;
|
|
306
|
+
}
|
|
307
|
+
getImageSize(src, triggerLoad);
|
|
279
308
|
};
|
|
280
309
|
const onImageError = (evt) => {
|
|
281
310
|
binderror(getCustomEvent('error', evt, {
|
|
@@ -285,7 +314,7 @@ const Image = forwardRef((props, ref) => {
|
|
|
285
314
|
};
|
|
286
315
|
useEffect(() => {
|
|
287
316
|
if (!isSvg && isLayoutMode) {
|
|
288
|
-
|
|
317
|
+
getImageSize(src, (width, height) => {
|
|
289
318
|
state.current.imageWidth = width;
|
|
290
319
|
state.current.imageHeight = height;
|
|
291
320
|
state.current.ratio = !width ? 0 : height / width;
|
|
@@ -311,21 +340,25 @@ const Image = forwardRef((props, ref) => {
|
|
|
311
340
|
}), [
|
|
312
341
|
'src',
|
|
313
342
|
'mode',
|
|
314
|
-
'svg'
|
|
343
|
+
'is-svg',
|
|
344
|
+
'enable-fast-image',
|
|
345
|
+
'bindload',
|
|
346
|
+
'binderror'
|
|
315
347
|
], {
|
|
316
348
|
layoutRef
|
|
317
349
|
});
|
|
318
350
|
function renderSvgImage() {
|
|
319
|
-
|
|
320
|
-
uri: src,
|
|
351
|
+
const svgProps = {
|
|
321
352
|
onLayout: onSvgLoad,
|
|
322
|
-
onError: binderror && onSvgError,
|
|
323
353
|
style: extendObject({ transformOrigin: 'left top' }, modeStyle)
|
|
324
|
-
}
|
|
354
|
+
};
|
|
355
|
+
return createElement(View, innerProps, typeof src === 'string'
|
|
356
|
+
? createElement(SvgCssUri, extendObject({ uri: src, onError: binderror && onSvgError }, svgProps))
|
|
357
|
+
: createElement(LocalSvg, extendObject({ asset: src }, svgProps)));
|
|
325
358
|
}
|
|
326
359
|
function renderBaseImage() {
|
|
327
360
|
return renderImage(extendObject({
|
|
328
|
-
source:
|
|
361
|
+
source: normalizeImageSource(src),
|
|
329
362
|
resizeMode: resizeMode,
|
|
330
363
|
onLoad: bindload && onImageLoad,
|
|
331
364
|
onError: binderror && onImageError,
|
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
import { Text } from 'react-native';
|
|
2
|
-
import { createElement } from 'react';
|
|
3
|
-
import { extendObject } from './utils';
|
|
2
|
+
import { createElement, useContext } from 'react';
|
|
3
|
+
import { extendObject, getDefaultAllowFontScaling } from './utils';
|
|
4
|
+
import { TextPassThroughContext } from './context';
|
|
4
5
|
const InlineText = (props) => {
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
}
|
|
6
|
+
const inheritedText = useContext(TextPassThroughContext);
|
|
7
|
+
const style = extendObject({}, inheritedText?.textStyle, props.style);
|
|
8
|
+
const mergedProps = extendObject({}, inheritedText?.pendingTextProps, props, { style });
|
|
9
|
+
const { allowFontScaling, children } = mergedProps;
|
|
10
|
+
return createElement(Text, extendObject({}, mergedProps, {
|
|
11
|
+
allowFontScaling: allowFontScaling ?? getDefaultAllowFontScaling()
|
|
12
|
+
}), children);
|
|
9
13
|
};
|
|
10
14
|
InlineText.displayName = 'MpxInlineText';
|
|
11
15
|
export default InlineText;
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
import { forwardRef, useRef, useState, useContext, useEffect, createElement } from 'react';
|
|
41
41
|
import { TextInput } from 'react-native';
|
|
42
42
|
import { warn } from '@mpxjs/utils';
|
|
43
|
-
import { useUpdateEffect, useTransformStyle, useLayout, extendObject, isAndroid } from './utils';
|
|
43
|
+
import { useUpdateEffect, useTransformStyle, useLayout, extendObject, isAndroid, getDefaultAllowFontScaling } from './utils';
|
|
44
44
|
import useInnerProps, { getCustomEvent } from './getInnerListeners';
|
|
45
45
|
import useNodesRef from './useNodesRef';
|
|
46
46
|
import { FormContext, KeyboardAvoidContext } from './context';
|
|
@@ -52,7 +52,7 @@ const inputModeMap = {
|
|
|
52
52
|
digit: 'decimal'
|
|
53
53
|
};
|
|
54
54
|
const Input = forwardRef((props, ref) => {
|
|
55
|
-
const { style = {}, allowFontScaling
|
|
55
|
+
const { style = {}, allowFontScaling, type = 'text', value, password, 'placeholder-style': placeholderStyle = {}, disabled, maxlength = 140, 'cursor-spacing': cursorSpacing = 0, 'auto-focus': autoFocus, focus, 'confirm-type': confirmType = 'done', 'confirm-hold': confirmHold = false, cursor, 'cursor-color': cursorColor, 'selection-start': selectionStart = -1, 'selection-end': selectionEnd = -1, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'adjust-position': adjustPosition = true, 'keyboard-type': originalKeyboardType, 'hold-keyboard': holdKeyboard = false, bindinput, bindfocus, bindblur, bindconfirm, bindselectionchange,
|
|
56
56
|
// private
|
|
57
57
|
multiline, 'auto-height': autoHeight, bindlinechange } = props;
|
|
58
58
|
const formContext = useContext(FormContext);
|
|
@@ -290,7 +290,7 @@ const Input = forwardRef((props, ref) => {
|
|
|
290
290
|
const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
|
|
291
291
|
ref: nodeRef,
|
|
292
292
|
style: extendObject({}, normalStyle, layoutStyle),
|
|
293
|
-
allowFontScaling,
|
|
293
|
+
allowFontScaling: allowFontScaling ?? getDefaultAllowFontScaling(),
|
|
294
294
|
inputMode: originalKeyboardType ? undefined : inputModeMap[type],
|
|
295
295
|
keyboardType: originalKeyboardType,
|
|
296
296
|
secureTextEntry: !!password,
|
|
@@ -315,7 +315,14 @@ const Input = forwardRef((props, ref) => {
|
|
|
315
315
|
onContentSizeChange,
|
|
316
316
|
onSubmitEditing: bindconfirm && onSubmitEditing
|
|
317
317
|
}, needMultilineFix ? { numberOfLines: 1 } : {}, !!multiline && confirmType === 'return' ? {} : { enterKeyHint: confirmType }), [
|
|
318
|
+
'name',
|
|
318
319
|
'type',
|
|
320
|
+
'maxlength',
|
|
321
|
+
'cursor-spacing',
|
|
322
|
+
'adjust-position',
|
|
323
|
+
'hold-keyboard',
|
|
324
|
+
'keyboard-type',
|
|
325
|
+
'auto-height',
|
|
319
326
|
'password',
|
|
320
327
|
'placeholder-style',
|
|
321
328
|
'disabled',
|
|
@@ -326,7 +333,13 @@ const Input = forwardRef((props, ref) => {
|
|
|
326
333
|
'cursor',
|
|
327
334
|
'cursor-color',
|
|
328
335
|
'selection-start',
|
|
329
|
-
'selection-end'
|
|
336
|
+
'selection-end',
|
|
337
|
+
'bindinput',
|
|
338
|
+
'bindfocus',
|
|
339
|
+
'bindblur',
|
|
340
|
+
'bindconfirm',
|
|
341
|
+
'bindselectionchange',
|
|
342
|
+
'bindlinechange'
|
|
330
343
|
], {
|
|
331
344
|
layoutRef
|
|
332
345
|
});
|
|
@@ -6,7 +6,7 @@ import { View } from 'react-native';
|
|
|
6
6
|
import { noop, warn } from '@mpxjs/utils';
|
|
7
7
|
import useInnerProps, { getCustomEvent } from './getInnerListeners';
|
|
8
8
|
import useNodesRef from './useNodesRef';
|
|
9
|
-
import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils';
|
|
9
|
+
import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useTextPassThroughValue } from './utils';
|
|
10
10
|
import { LabelContext } from './context';
|
|
11
11
|
import Portal from './mpx-portal';
|
|
12
12
|
const Label = forwardRef((labelProps, ref) => {
|
|
@@ -23,6 +23,7 @@ const Label = forwardRef((labelProps, ref) => {
|
|
|
23
23
|
useNodesRef(props, ref, nodeRef, { style: normalStyle });
|
|
24
24
|
const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
|
|
25
25
|
const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle);
|
|
26
|
+
const textPassThrough = useTextPassThroughValue(textStyle, textProps);
|
|
26
27
|
if (backgroundStyle) {
|
|
27
28
|
warn('Label does not support background image-related styles!');
|
|
28
29
|
}
|
|
@@ -38,14 +39,15 @@ const Label = forwardRef((labelProps, ref) => {
|
|
|
38
39
|
ref: nodeRef,
|
|
39
40
|
style: extendObject({}, innerStyle, layoutStyle),
|
|
40
41
|
bindtap: onTap
|
|
41
|
-
}), [
|
|
42
|
+
}), [
|
|
43
|
+
'for'
|
|
44
|
+
], {
|
|
42
45
|
layoutRef
|
|
43
46
|
});
|
|
44
47
|
const finalComponent = createElement(View, innerProps, createElement(LabelContext.Provider, { value: contextRef }, wrapChildren(props, {
|
|
45
48
|
hasVarDec,
|
|
46
49
|
varContext: varContextRef.current,
|
|
47
|
-
|
|
48
|
-
textProps
|
|
50
|
+
textPassThrough
|
|
49
51
|
})));
|
|
50
52
|
if (hasPositionFixed) {
|
|
51
53
|
return createElement(Portal, null, finalComponent);
|
|
@@ -22,7 +22,7 @@ import { StyleSheet } from 'react-native';
|
|
|
22
22
|
import useInnerProps, { getCustomEvent } from './getInnerListeners';
|
|
23
23
|
import useNodesRef from './useNodesRef';
|
|
24
24
|
import { MovableAreaContext } from './context';
|
|
25
|
-
import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, flatGesture, extendObject, omit, useNavigation, useRunOnJSCallback } from './utils';
|
|
25
|
+
import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, flatGesture, extendObject, omit, useNavigation, useRunOnJSCallback, useTextPassThroughValue } from './utils';
|
|
26
26
|
import { GestureDetector, Gesture } from 'react-native-gesture-handler';
|
|
27
27
|
import Animated, { useSharedValue, useAnimatedStyle, runOnJS, runOnUI, withTiming, Easing } from 'react-native-reanimated';
|
|
28
28
|
import { collectDataset, noop } from '@mpxjs/utils';
|
|
@@ -136,6 +136,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
|
|
|
136
136
|
const prevWaitForHandlersRef = useRef(waitFor || []);
|
|
137
137
|
const gestureSwitch = useRef(false);
|
|
138
138
|
const { textStyle, innerStyle } = splitStyle(normalStyle);
|
|
139
|
+
const textPassThrough = useTextPassThroughValue(textStyle, textProps);
|
|
139
140
|
const offsetX = useSharedValue(x);
|
|
140
141
|
const offsetY = useSharedValue(y);
|
|
141
142
|
const startPosition = useSharedValue({
|
|
@@ -582,12 +583,26 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
|
|
|
582
583
|
ref: nodeRef,
|
|
583
584
|
onLayout: onLayout,
|
|
584
585
|
style: [innerStyle, animatedStyles, layoutStyle]
|
|
585
|
-
}, rewriteCatchEvent())
|
|
586
|
+
}, rewriteCatchEvent()), [
|
|
587
|
+
'direction',
|
|
588
|
+
'x',
|
|
589
|
+
'y',
|
|
590
|
+
'disabled',
|
|
591
|
+
'animation',
|
|
592
|
+
'damping',
|
|
593
|
+
'friction',
|
|
594
|
+
'out-of-bounds',
|
|
595
|
+
'inertia',
|
|
596
|
+
'wait-for',
|
|
597
|
+
'simultaneous-handlers',
|
|
598
|
+
'disable-event-passthrough',
|
|
599
|
+
'changeThrottleTime',
|
|
600
|
+
'bindchange'
|
|
601
|
+
]);
|
|
586
602
|
return createElement(GestureDetector, { gesture: gesture }, createElement(Animated.View, innerProps, wrapChildren(props, {
|
|
587
603
|
hasVarDec,
|
|
588
604
|
varContext: varContextRef.current,
|
|
589
|
-
|
|
590
|
-
textProps
|
|
605
|
+
textPassThrough
|
|
591
606
|
})));
|
|
592
607
|
});
|
|
593
608
|
_MovableView.displayName = 'MpxMovableView';
|
|
@@ -120,7 +120,17 @@ const Picker = forwardRef((props, ref) => {
|
|
|
120
120
|
});
|
|
121
121
|
const innerProps = useInnerProps(extendObject({}, props, {
|
|
122
122
|
ref: nodeRef
|
|
123
|
-
}, layoutProps), [
|
|
123
|
+
}, layoutProps), [
|
|
124
|
+
'mode',
|
|
125
|
+
'value',
|
|
126
|
+
'range',
|
|
127
|
+
'disabled',
|
|
128
|
+
'bindcancel',
|
|
129
|
+
'bindchange',
|
|
130
|
+
'header-text',
|
|
131
|
+
'name',
|
|
132
|
+
'bindcolumnchange'
|
|
133
|
+
], { layoutRef });
|
|
124
134
|
useEffect(() => {
|
|
125
135
|
if (range && pickerRef.current && mode === "multiSelector" /* PickerMode.MULTI_SELECTOR */) {
|
|
126
136
|
pickerRef.current.updateRange?.(range);
|
|
@@ -175,7 +185,7 @@ const Picker = forwardRef((props, ref) => {
|
|
|
175
185
|
bindchange?.(eventData);
|
|
176
186
|
hide();
|
|
177
187
|
};
|
|
178
|
-
const specificProps = extendObject(innerProps, {
|
|
188
|
+
const specificProps = extendObject({}, innerProps, {
|
|
179
189
|
mode,
|
|
180
190
|
children,
|
|
181
191
|
bindchange: onChange,
|
|
@@ -71,7 +71,7 @@ export interface RegionProps extends BasePickerProps {
|
|
|
71
71
|
/** 表示选中的省市区,默认选中每一列的第一个值, 默认值 [] */
|
|
72
72
|
value?: string[];
|
|
73
73
|
/** 默认值 region */
|
|
74
|
-
level?: 'province' | 'city' | 'region'
|
|
74
|
+
level?: 'province' | 'city' | 'region';
|
|
75
75
|
/** 可为每一列的顶部添加一个自定义的项 */
|
|
76
76
|
'custom-item'?: string;
|
|
77
77
|
/** value 改变时触发 change 事件, event.detail = {value, code, postcode},
|
|
@@ -2,7 +2,7 @@ import { View } from 'react-native';
|
|
|
2
2
|
import React, { createElement, forwardRef, useRef } from 'react';
|
|
3
3
|
import useInnerProps, { getCustomEvent } from '../getInnerListeners';
|
|
4
4
|
import useNodesRef from '../useNodesRef';
|
|
5
|
-
import { useLayout, splitProps, splitStyle, wrapChildren, useTransformStyle, extendObject } from '../utils';
|
|
5
|
+
import { useLayout, splitProps, splitStyle, wrapChildren, useTransformStyle, extendObject, useTextPassThroughValue } from '../utils';
|
|
6
6
|
import { PickerViewStyleContext } from './pickerVIewContext';
|
|
7
7
|
import Portal from '../mpx-portal';
|
|
8
8
|
const styles = {
|
|
@@ -31,6 +31,7 @@ const _PickerView = forwardRef((props, ref) => {
|
|
|
31
31
|
const { layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: nodeRef });
|
|
32
32
|
const { textProps } = splitProps(props);
|
|
33
33
|
const { textStyle } = splitStyle(normalStyle);
|
|
34
|
+
const textPassThrough = useTextPassThroughValue(textStyle, textProps);
|
|
34
35
|
const onSelectChange = (columnIndex, selectedIndex) => {
|
|
35
36
|
const activeValue = activeValueRef.current;
|
|
36
37
|
activeValue[columnIndex] = selectedIndex;
|
|
@@ -59,7 +60,10 @@ const _PickerView = forwardRef((props, ref) => {
|
|
|
59
60
|
'indicator-style',
|
|
60
61
|
'indicator-class',
|
|
61
62
|
'mask-style',
|
|
62
|
-
'mask-class'
|
|
63
|
+
'mask-class',
|
|
64
|
+
'value',
|
|
65
|
+
'bindchange',
|
|
66
|
+
'enable-wheel-animation'
|
|
63
67
|
], { layoutRef });
|
|
64
68
|
const renderColumn = (child, index, columnData, initialIndex) => {
|
|
65
69
|
const childProps = child?.props || {};
|
|
@@ -84,8 +88,7 @@ const _PickerView = forwardRef((props, ref) => {
|
|
|
84
88
|
}, {
|
|
85
89
|
hasVarDec,
|
|
86
90
|
varContext: varContextRef.current,
|
|
87
|
-
|
|
88
|
-
textProps
|
|
91
|
+
textPassThrough
|
|
89
92
|
});
|
|
90
93
|
};
|
|
91
94
|
const validateChildInitialIndex = (index, data) => {
|
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
import { useContext, useEffect, useRef } from 'react';
|
|
2
|
-
import { PortalContext, ProviderContext, RouteContext, VarContext } from '../context';
|
|
2
|
+
import { PortalContext, ProviderContext, RouteContext, VarContext, TextPassThroughContext } from '../context';
|
|
3
3
|
import PortalHost, { portal } from './portal-host';
|
|
4
4
|
const Portal = ({ children }) => {
|
|
5
5
|
const manager = useContext(PortalContext);
|
|
6
6
|
const keyRef = useRef(null);
|
|
7
7
|
const { pageId } = useContext(RouteContext) || {};
|
|
8
8
|
const varContext = useContext(VarContext);
|
|
9
|
+
const textPassThroughContext = useContext(TextPassThroughContext);
|
|
9
10
|
const parentProvides = useContext(ProviderContext);
|
|
11
|
+
if (textPassThroughContext) {
|
|
12
|
+
children = (<TextPassThroughContext.Provider value={textPassThroughContext} key='textPassThroughWrap'>{children}</TextPassThroughContext.Provider>);
|
|
13
|
+
}
|
|
10
14
|
if (varContext) {
|
|
11
15
|
children = (<VarContext.Provider value={varContext} key='varContextWrap'>{children}</VarContext.Provider>);
|
|
12
16
|
}
|
|
@@ -75,7 +75,10 @@ const radioGroup = forwardRef((props, ref) => {
|
|
|
75
75
|
const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
|
|
76
76
|
ref: nodeRef,
|
|
77
77
|
style: extendObject({}, normalStyle, layoutStyle)
|
|
78
|
-
}), [
|
|
78
|
+
}), [
|
|
79
|
+
'name',
|
|
80
|
+
'bindchange'
|
|
81
|
+
], {
|
|
79
82
|
layoutRef
|
|
80
83
|
});
|
|
81
84
|
const finalComponent = createElement(View, innerProps, createElement(RadioGroupContext.Provider, {
|
|
@@ -10,7 +10,7 @@ import { warn } from '@mpxjs/utils';
|
|
|
10
10
|
import { LabelContext, RadioGroupContext } from './context';
|
|
11
11
|
import useInnerProps, { getCustomEvent } from './getInnerListeners';
|
|
12
12
|
import useNodesRef from './useNodesRef';
|
|
13
|
-
import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject } from './utils';
|
|
13
|
+
import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useTextPassThroughValue } from './utils';
|
|
14
14
|
import Icon from './mpx-icon';
|
|
15
15
|
import Portal from './mpx-portal';
|
|
16
16
|
const styles = StyleSheet.create({
|
|
@@ -76,6 +76,7 @@ const Radio = forwardRef((radioProps, ref) => {
|
|
|
76
76
|
};
|
|
77
77
|
const { hasPositionFixed, hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
|
|
78
78
|
const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle);
|
|
79
|
+
const textPassThrough = useTextPassThroughValue(textStyle, textProps);
|
|
79
80
|
if (backgroundStyle) {
|
|
80
81
|
warn('Radio does not support background image-related styles!');
|
|
81
82
|
}
|
|
@@ -99,7 +100,8 @@ const Radio = forwardRef((radioProps, ref) => {
|
|
|
99
100
|
}), [
|
|
100
101
|
'value',
|
|
101
102
|
'disabled',
|
|
102
|
-
'checked'
|
|
103
|
+
'checked',
|
|
104
|
+
'color'
|
|
103
105
|
], {
|
|
104
106
|
layoutRef
|
|
105
107
|
});
|
|
@@ -132,8 +134,7 @@ const Radio = forwardRef((radioProps, ref) => {
|
|
|
132
134
|
})), wrapChildren(props, {
|
|
133
135
|
hasVarDec,
|
|
134
136
|
varContext: varContextRef.current,
|
|
135
|
-
|
|
136
|
-
textProps
|
|
137
|
+
textPassThrough
|
|
137
138
|
}));
|
|
138
139
|
if (hasPositionFixed) {
|
|
139
140
|
return createElement(Portal, null, finalComponent);
|
|
@@ -48,7 +48,9 @@ const _RichText = forwardRef((props, ref) => {
|
|
|
48
48
|
const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
|
|
49
49
|
ref: nodeRef,
|
|
50
50
|
style: extendObject(normalStyle, layoutStyle)
|
|
51
|
-
}), [
|
|
51
|
+
}), [
|
|
52
|
+
'nodes'
|
|
53
|
+
], {
|
|
52
54
|
layoutRef
|
|
53
55
|
});
|
|
54
56
|
const html = typeof nodes === 'string' ? nodes : jsonToHtmlStr(nodes);
|
|
@@ -38,7 +38,7 @@ import Animated, { useSharedValue, withTiming, useAnimatedStyle, runOnJS } from
|
|
|
38
38
|
import { warn, hasOwn } from '@mpxjs/utils';
|
|
39
39
|
import useInnerProps, { getCustomEvent } from './getInnerListeners';
|
|
40
40
|
import useNodesRef from './useNodesRef';
|
|
41
|
-
import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture, HIDDEN_STYLE, useRunOnJSCallback } from './utils';
|
|
41
|
+
import { splitProps, splitStyle, useTransformStyle, useLayout, wrapChildren, extendObject, flatGesture, HIDDEN_STYLE, useRunOnJSCallback, useTextPassThroughValue } from './utils';
|
|
42
42
|
import { IntersectionObserverContext, ScrollViewContext } from './context';
|
|
43
43
|
import Portal from './mpx-portal';
|
|
44
44
|
const AnimatedScrollView = RNAnimated.createAnimatedComponent(ScrollView);
|
|
@@ -77,6 +77,7 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
|
|
|
77
77
|
const isContentSizeChange = useRef(false);
|
|
78
78
|
const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, hasPositionFixed, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
|
|
79
79
|
const { textStyle, innerStyle = {} } = splitStyle(normalStyle);
|
|
80
|
+
const textPassThrough = useTextPassThroughValue(textStyle, textProps);
|
|
80
81
|
const scrollViewRef = useRef(null);
|
|
81
82
|
const propsRef = useRef(props);
|
|
82
83
|
const refresherStateRef = useRef({
|
|
@@ -644,7 +645,15 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
|
|
|
644
645
|
'refresher-triggered',
|
|
645
646
|
'refresher-enabled',
|
|
646
647
|
'refresher-default-style',
|
|
648
|
+
'refresher-threshold',
|
|
647
649
|
'refresher-background',
|
|
650
|
+
'scroll-into-view',
|
|
651
|
+
'enable-sticky',
|
|
652
|
+
'wait-for',
|
|
653
|
+
'simultaneous-handlers',
|
|
654
|
+
'scroll-event-throttle',
|
|
655
|
+
'scroll-into-view-offset',
|
|
656
|
+
'__selectRef',
|
|
648
657
|
'children',
|
|
649
658
|
'enhanced',
|
|
650
659
|
'binddragstart',
|
|
@@ -653,15 +662,15 @@ const _ScrollView = forwardRef((scrollViewProps = {}, ref) => {
|
|
|
653
662
|
'bindscroll',
|
|
654
663
|
'bindscrolltoupper',
|
|
655
664
|
'bindscrolltolower',
|
|
656
|
-
'bindrefresherrefresh'
|
|
665
|
+
'bindrefresherrefresh',
|
|
666
|
+
'bindscrollend'
|
|
657
667
|
], { layoutRef });
|
|
658
668
|
const ScrollViewComponent = enableSticky ? AnimatedScrollView : ScrollView;
|
|
659
669
|
const createScrollViewContent = () => {
|
|
660
670
|
const wrappedChildren = wrapChildren(hasRefresher ? extendObject({}, props, { children: otherContent }) : props, {
|
|
661
671
|
hasVarDec,
|
|
662
672
|
varContext: varContextRef.current,
|
|
663
|
-
|
|
664
|
-
textProps
|
|
673
|
+
textPassThrough
|
|
665
674
|
});
|
|
666
675
|
return createElement(ScrollViewContext.Provider, { value: contextValue }, wrappedChildren);
|
|
667
676
|
};
|
|
@@ -1,13 +1,59 @@
|
|
|
1
1
|
import { Text } from 'react-native';
|
|
2
|
-
import { createElement } from 'react';
|
|
2
|
+
import { createElement, useContext } from 'react';
|
|
3
3
|
import useInnerProps from './getInnerListeners';
|
|
4
|
-
import { extendObject } from './utils';
|
|
4
|
+
import { extendObject, getDefaultAllowFontScaling, useTextPassThroughValue, wrapChildren, isStringChildren, transformBoxSizing, splitStyle, isBoxSizingAffectingStyle } from './utils';
|
|
5
|
+
import { TextPassThroughContext } from './context';
|
|
6
|
+
import * as perf from '@mpxjs/perf';
|
|
5
7
|
const SimpleText = (props) => {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
8
|
+
let stopTotal;
|
|
9
|
+
if (__mpx_perf_framework__)
|
|
10
|
+
stopTotal = perf.scope('simple-text:render:total');
|
|
11
|
+
// ───── style 阶段 ─────
|
|
12
|
+
let stopStyle;
|
|
13
|
+
if (__mpx_perf_framework__)
|
|
14
|
+
stopStyle = perf.scope('simple-text:render:style');
|
|
15
|
+
const inheritedText = useContext(TextPassThroughContext);
|
|
16
|
+
const mergedStyle = extendObject({}, inheritedText?.textStyle, props.style);
|
|
17
|
+
let hasBoxSizingAffectingStyle = false;
|
|
18
|
+
const { textStyle = {} } = splitStyle(mergedStyle, (key) => {
|
|
19
|
+
if (!hasBoxSizingAffectingStyle && isBoxSizingAffectingStyle(key)) {
|
|
20
|
+
hasBoxSizingAffectingStyle = true;
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
const finalStyle = transformBoxSizing(mergedStyle, hasBoxSizingAffectingStyle);
|
|
24
|
+
const mergedProps = extendObject({}, inheritedText?.pendingTextProps, props);
|
|
25
|
+
const { allowFontScaling, children } = mergedProps;
|
|
26
|
+
const isStringOnly = isStringChildren(children);
|
|
27
|
+
const childTextStyle = !isStringOnly && Object.keys(textStyle).length ? textStyle : undefined;
|
|
28
|
+
const childTextPassThrough = useTextPassThroughValue(childTextStyle, undefined, {
|
|
29
|
+
inheritTextProps: false,
|
|
30
|
+
disabled: isStringOnly
|
|
31
|
+
});
|
|
32
|
+
if (__mpx_perf_framework__)
|
|
33
|
+
stopStyle();
|
|
34
|
+
// ───── innerProps 阶段 ─────
|
|
35
|
+
let stopInnerProps;
|
|
36
|
+
if (__mpx_perf_framework__)
|
|
37
|
+
stopInnerProps = perf.scope('simple-text:render:innerProps');
|
|
38
|
+
const innerProps = useInnerProps(extendObject({}, mergedProps, {
|
|
39
|
+
allowFontScaling: allowFontScaling ?? getDefaultAllowFontScaling(),
|
|
40
|
+
style: finalStyle
|
|
9
41
|
}));
|
|
10
|
-
|
|
42
|
+
if (__mpx_perf_framework__)
|
|
43
|
+
stopInnerProps();
|
|
44
|
+
// ───── createElement 阶段 ─────
|
|
45
|
+
let stopCreate;
|
|
46
|
+
if (__mpx_perf_framework__)
|
|
47
|
+
stopCreate = perf.scope('simple-text:render:createElement');
|
|
48
|
+
const result = createElement(Text, innerProps, wrapChildren({ children }, {
|
|
49
|
+
hasVarDec: false,
|
|
50
|
+
textPassThrough: childTextPassThrough
|
|
51
|
+
}));
|
|
52
|
+
if (__mpx_perf_framework__)
|
|
53
|
+
stopCreate();
|
|
54
|
+
if (__mpx_perf_framework__)
|
|
55
|
+
stopTotal();
|
|
56
|
+
return result;
|
|
11
57
|
};
|
|
12
58
|
SimpleText.displayName = 'MpxSimpleText';
|
|
13
59
|
export default SimpleText;
|
|
@@ -1,18 +1,48 @@
|
|
|
1
1
|
import { View } from 'react-native';
|
|
2
2
|
import { createElement } from 'react';
|
|
3
|
-
import { splitProps, splitStyle, wrapChildren, extendObject } from './utils';
|
|
3
|
+
import { splitProps, splitStyle, wrapChildren, extendObject, useTextPassThroughValue, transformBoxSizing, isBoxSizingAffectingStyle } from './utils';
|
|
4
4
|
import useInnerProps from './getInnerListeners';
|
|
5
|
+
import * as perf from '@mpxjs/perf';
|
|
5
6
|
const SimpleView = (simpleViewProps) => {
|
|
7
|
+
let stopTotal;
|
|
8
|
+
if (__mpx_perf_framework__)
|
|
9
|
+
stopTotal = perf.scope('simple-view:render:total');
|
|
10
|
+
// ───── style 阶段 ─────
|
|
11
|
+
let stopStyle;
|
|
12
|
+
if (__mpx_perf_framework__)
|
|
13
|
+
stopStyle = perf.scope('simple-view:render:style');
|
|
6
14
|
const { textProps, innerProps: props = {} } = splitProps(simpleViewProps);
|
|
7
|
-
|
|
15
|
+
let hasBoxSizingAffectingStyle = false;
|
|
16
|
+
const { textStyle, innerStyle = {} } = splitStyle(props.style || {}, (key) => {
|
|
17
|
+
if (!hasBoxSizingAffectingStyle && isBoxSizingAffectingStyle(key)) {
|
|
18
|
+
hasBoxSizingAffectingStyle = true;
|
|
19
|
+
}
|
|
20
|
+
});
|
|
21
|
+
const textPassThrough = useTextPassThroughValue(textStyle, textProps);
|
|
22
|
+
if (__mpx_perf_framework__)
|
|
23
|
+
stopStyle();
|
|
24
|
+
// ───── innerProps 阶段 ─────
|
|
25
|
+
let stopInnerProps;
|
|
26
|
+
if (__mpx_perf_framework__)
|
|
27
|
+
stopInnerProps = perf.scope('simple-view:render:innerProps');
|
|
8
28
|
const innerProps = useInnerProps(extendObject({}, props, {
|
|
9
|
-
style: innerStyle
|
|
29
|
+
style: transformBoxSizing(extendObject({}, innerStyle), hasBoxSizingAffectingStyle)
|
|
10
30
|
}));
|
|
11
|
-
|
|
31
|
+
if (__mpx_perf_framework__)
|
|
32
|
+
stopInnerProps();
|
|
33
|
+
// ───── createElement 阶段 ─────
|
|
34
|
+
let stopCreate;
|
|
35
|
+
if (__mpx_perf_framework__)
|
|
36
|
+
stopCreate = perf.scope('simple-view:render:createElement');
|
|
37
|
+
const result = createElement(View, innerProps, wrapChildren(props, {
|
|
12
38
|
hasVarDec: false,
|
|
13
|
-
|
|
14
|
-
textProps
|
|
39
|
+
textPassThrough
|
|
15
40
|
}));
|
|
41
|
+
if (__mpx_perf_framework__)
|
|
42
|
+
stopCreate();
|
|
43
|
+
if (__mpx_perf_framework__)
|
|
44
|
+
stopTotal();
|
|
45
|
+
return result;
|
|
16
46
|
};
|
|
17
47
|
SimpleView.displayName = 'MpxSimpleView';
|
|
18
48
|
export default SimpleView;
|
|
@@ -289,7 +289,8 @@ const Slider = forwardRef((props, ref) => {
|
|
|
289
289
|
'bindchange',
|
|
290
290
|
'catchchange',
|
|
291
291
|
'bindchanging',
|
|
292
|
-
'catchchanging'
|
|
292
|
+
'catchchanging',
|
|
293
|
+
'name'
|
|
293
294
|
], { layoutRef });
|
|
294
295
|
const sliderContent = createElement(View, extendObject({}, innerProps, { style: containerStyle }),
|
|
295
296
|
// 轨道容器
|