@mpxjs/webpack-plugin 2.10.24-test.1 → 2.11.0
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/LICENSE +433 -0
- package/lib/index.js +4 -1
- package/lib/platform/style/wx/index.js +44 -38
- package/lib/platform/template/wx/component-config/picker.js +0 -6
- package/lib/resolver/AddEnvPlugin.js +1 -1
- package/lib/resolver/AddModePlugin.js +1 -1
- package/lib/resolver/ExtendComponentsPlugin.js +68 -0
- package/lib/runtime/components/extends/section-list.mpx +14 -0
- package/lib/runtime/components/react/dist/mpx-button.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-button.jsx +2 -2
- package/lib/runtime/components/react/dist/mpx-camera.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-camera.jsx +36 -4
- package/lib/runtime/components/react/dist/mpx-canvas/index.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-canvas/index.jsx +1 -2
- package/lib/runtime/components/react/dist/mpx-checkbox-group.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-checkbox-group.jsx +2 -2
- package/lib/runtime/components/react/dist/mpx-checkbox.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-checkbox.jsx +2 -2
- package/lib/runtime/components/react/dist/mpx-form.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-form.jsx +2 -2
- package/lib/runtime/components/react/dist/mpx-icon/index.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-icon/index.jsx +2 -2
- package/lib/runtime/components/react/dist/mpx-image.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-image.jsx +2 -2
- package/lib/runtime/components/react/dist/mpx-inline-text.jsx +13 -4
- package/lib/runtime/components/react/dist/mpx-input.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-input.jsx +16 -8
- package/lib/runtime/components/react/dist/mpx-label.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-label.jsx +2 -2
- package/lib/runtime/components/react/dist/mpx-movable-area.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-movable-area.jsx +2 -2
- package/lib/runtime/components/react/dist/mpx-movable-view.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-movable-view.jsx +2 -2
- package/lib/runtime/components/react/dist/mpx-nav.jsx +1 -1
- package/lib/runtime/components/react/dist/mpx-picker/index.jsx +72 -23
- package/lib/runtime/components/react/dist/mpx-picker/multiSelector.jsx +2 -2
- package/lib/runtime/components/react/dist/mpx-picker/type.d.ts +4 -0
- package/lib/runtime/components/react/dist/mpx-picker-view/index.jsx +6 -8
- package/lib/runtime/components/react/dist/mpx-picker-view/pickerVIewContext.d.ts +0 -2
- package/lib/runtime/components/react/dist/mpx-picker-view/pickerVIewContext.js +0 -5
- package/lib/runtime/components/react/dist/mpx-picker-view-column/index.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-picker-view-column/index.jsx +34 -14
- package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewColumnItem.d.ts +0 -2
- package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewColumnItem.jsx +4 -5
- package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewColumnItemLite.d.ts +0 -2
- package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewColumnItemLite.jsx +3 -5
- package/lib/runtime/components/react/dist/mpx-popup/index.d.ts +5 -4
- package/lib/runtime/components/react/dist/mpx-popup/index.jsx +2 -2
- package/lib/runtime/components/react/dist/mpx-popup/popupBase.jsx +3 -2
- package/lib/runtime/components/react/dist/mpx-progress.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-progress.jsx +1 -2
- package/lib/runtime/components/react/dist/mpx-radio-group.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-radio-group.jsx +2 -2
- package/lib/runtime/components/react/dist/mpx-radio.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-radio.jsx +2 -2
- package/lib/runtime/components/react/dist/mpx-rich-text/index.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-rich-text/index.jsx +1 -2
- package/lib/runtime/components/react/dist/mpx-scroll-view.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-scroll-view.jsx +2 -2
- package/lib/runtime/components/react/dist/mpx-section-list.d.ts +51 -0
- package/lib/runtime/components/react/dist/mpx-section-list.jsx +376 -0
- package/lib/runtime/components/react/dist/mpx-simple-text.jsx +27 -14
- package/lib/runtime/components/react/dist/mpx-simple-view.d.ts +1 -0
- package/lib/runtime/components/react/dist/mpx-slider.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-slider.jsx +1 -2
- package/lib/runtime/components/react/dist/mpx-sticky-header.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-sticky-header.jsx +2 -2
- package/lib/runtime/components/react/dist/mpx-sticky-section.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-sticky-section.jsx +2 -2
- package/lib/runtime/components/react/dist/mpx-swiper-item.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-swiper.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-swiper.jsx +1 -2
- package/lib/runtime/components/react/dist/mpx-switch.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-switch.jsx +1 -2
- package/lib/runtime/components/react/dist/mpx-text.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-text.jsx +22 -8
- package/lib/runtime/components/react/dist/mpx-video.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-video.jsx +1 -2
- package/lib/runtime/components/react/dist/mpx-view.d.ts +0 -1
- package/lib/runtime/components/react/dist/mpx-view.jsx +1 -2
- package/lib/runtime/components/react/dist/mpx-web-view.d.ts +2 -1
- package/lib/runtime/components/react/dist/utils.d.ts +6 -9
- package/lib/runtime/components/react/dist/utils.jsx +70 -84
- package/lib/runtime/components/react/mpx-button.tsx +1 -3
- package/lib/runtime/components/react/mpx-camera.tsx +40 -5
- package/lib/runtime/components/react/mpx-canvas/index.tsx +5 -5
- package/lib/runtime/components/react/mpx-checkbox-group.tsx +1 -3
- package/lib/runtime/components/react/mpx-checkbox.tsx +1 -3
- package/lib/runtime/components/react/mpx-form.tsx +1 -3
- package/lib/runtime/components/react/mpx-icon/index.tsx +1 -3
- package/lib/runtime/components/react/mpx-image.tsx +2 -5
- package/lib/runtime/components/react/mpx-inline-text.tsx +13 -4
- package/lib/runtime/components/react/mpx-input.tsx +19 -10
- package/lib/runtime/components/react/mpx-label.tsx +1 -3
- package/lib/runtime/components/react/mpx-movable-area.tsx +2 -3
- package/lib/runtime/components/react/mpx-movable-view.tsx +1 -3
- package/lib/runtime/components/react/mpx-nav.tsx +1 -1
- package/lib/runtime/components/react/mpx-picker/index.tsx +100 -29
- package/lib/runtime/components/react/mpx-picker/multiSelector.tsx +3 -3
- package/lib/runtime/components/react/mpx-picker/selector.tsx +1 -1
- package/lib/runtime/components/react/mpx-picker/type.ts +4 -0
- package/lib/runtime/components/react/mpx-picker-view/index.tsx +12 -17
- package/lib/runtime/components/react/mpx-picker-view/pickerVIewContext.ts +0 -9
- package/lib/runtime/components/react/mpx-picker-view-column/index.tsx +44 -21
- package/lib/runtime/components/react/mpx-picker-view-column/pickerViewColumnItem.tsx +1 -9
- package/lib/runtime/components/react/mpx-picker-view-column/pickerViewColumnItemLite.tsx +0 -9
- package/lib/runtime/components/react/mpx-popup/index.tsx +7 -3
- package/lib/runtime/components/react/mpx-popup/popupBase.tsx +3 -2
- package/lib/runtime/components/react/mpx-progress.tsx +0 -3
- package/lib/runtime/components/react/mpx-radio-group.tsx +1 -3
- package/lib/runtime/components/react/mpx-radio.tsx +1 -3
- package/lib/runtime/components/react/mpx-rich-text/index.tsx +0 -3
- package/lib/runtime/components/react/mpx-scroll-view.tsx +1 -3
- package/lib/runtime/components/react/mpx-section-list.tsx +557 -0
- package/lib/runtime/components/react/mpx-simple-text.tsx +26 -13
- package/lib/runtime/components/react/mpx-slider.tsx +0 -3
- package/lib/runtime/components/react/mpx-sticky-header.tsx +1 -3
- package/lib/runtime/components/react/mpx-sticky-section.tsx +1 -3
- package/lib/runtime/components/react/mpx-swiper-item.tsx +0 -1
- package/lib/runtime/components/react/mpx-swiper.tsx +0 -3
- package/lib/runtime/components/react/mpx-switch.tsx +0 -3
- package/lib/runtime/components/react/mpx-text.tsx +21 -9
- package/lib/runtime/components/react/mpx-video.tsx +0 -3
- package/lib/runtime/components/react/mpx-view.tsx +0 -3
- package/lib/runtime/components/react/mpx-web-view.tsx +4 -3
- package/lib/runtime/components/react/utils.tsx +82 -88
- package/lib/template-compiler/compiler.js +6 -0
- package/package.json +5 -5
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { Text } from 'react-native';
|
|
2
|
-
import { createElement } from 'react';
|
|
2
|
+
import { createElement, useContext, useRef } from 'react';
|
|
3
3
|
import useInnerProps from './getInnerListeners';
|
|
4
|
-
import { extendObject, getDefaultAllowFontScaling,
|
|
4
|
+
import { extendObject, getDefaultAllowFontScaling, wrapChildren, isStringChildren, transformBoxSizing, splitStyle, isBoxSizingAffectingStyle, resolveTextFontSizePercentStyle, resolveTextLineHeightPercentStyle } from './utils';
|
|
5
5
|
import * as perf from '@mpxjs/perf';
|
|
6
|
+
import { diffAndCloneA } from '@mpxjs/utils';
|
|
7
|
+
import { TextPassThroughContext } from './context';
|
|
6
8
|
const SimpleText = (props) => {
|
|
7
9
|
let idTotal = -1;
|
|
8
10
|
if (__mpx_perf_framework__)
|
|
@@ -12,27 +14,38 @@ const SimpleText = (props) => {
|
|
|
12
14
|
if (__mpx_perf_framework__)
|
|
13
15
|
idStyle = perf.scopeStart('simple-text:render:style');
|
|
14
16
|
let hasBoxSizingAffectingStyle = false;
|
|
15
|
-
const { textStyle } = splitStyle(props.style
|
|
17
|
+
const { textStyle } = splitStyle(props.style, (key) => {
|
|
16
18
|
if (!hasBoxSizingAffectingStyle && isBoxSizingAffectingStyle(key)) {
|
|
17
19
|
hasBoxSizingAffectingStyle = true;
|
|
18
20
|
}
|
|
19
21
|
});
|
|
22
|
+
const inheritedText = useContext(TextPassThroughContext);
|
|
23
|
+
const resolvedTextStyle = resolveTextFontSizePercentStyle(textStyle, inheritedText?.textStyle);
|
|
20
24
|
// textStyle 仅在子节点非纯字符串时才需要透传给子级;按需计算 isStringChildren
|
|
21
|
-
const childTextStyle =
|
|
22
|
-
?
|
|
25
|
+
const childTextStyle = resolvedTextStyle && !isStringChildren(props.children)
|
|
26
|
+
? resolvedTextStyle
|
|
23
27
|
: undefined;
|
|
24
|
-
const
|
|
28
|
+
const textPassThroughRef = useRef(null);
|
|
29
|
+
let textPassThrough = null;
|
|
30
|
+
if (childTextStyle) {
|
|
31
|
+
const nextTextPassThrough = {
|
|
32
|
+
textStyle: extendObject({}, inheritedText?.textStyle, childTextStyle)
|
|
33
|
+
};
|
|
34
|
+
if (diffAndCloneA(textPassThroughRef.current, nextTextPassThrough).diff) {
|
|
35
|
+
textPassThroughRef.current = nextTextPassThrough;
|
|
36
|
+
}
|
|
37
|
+
textPassThrough = textPassThroughRef.current;
|
|
38
|
+
}
|
|
25
39
|
const mergedProps = inheritedText?.pendingTextProps
|
|
26
40
|
? extendObject({}, inheritedText.pendingTextProps, props)
|
|
27
41
|
: props;
|
|
28
|
-
|
|
29
|
-
? extendObject({}, inheritedText
|
|
30
|
-
:
|
|
31
|
-
if (
|
|
32
|
-
|
|
33
|
-
if (
|
|
34
|
-
mergedStyle
|
|
35
|
-
transformBoxSizing(mergedStyle);
|
|
42
|
+
const mergedStyle = inheritedText?.textStyle || props.style
|
|
43
|
+
? extendObject({}, inheritedText?.textStyle, props.style, resolvedTextStyle)
|
|
44
|
+
: undefined;
|
|
45
|
+
if (mergedStyle) {
|
|
46
|
+
resolveTextLineHeightPercentStyle(mergedStyle, inheritedText?.textStyle);
|
|
47
|
+
if (hasBoxSizingAffectingStyle)
|
|
48
|
+
transformBoxSizing(mergedStyle);
|
|
36
49
|
}
|
|
37
50
|
if (__mpx_perf_framework__)
|
|
38
51
|
perf.scopeEnd(idStyle);
|
|
@@ -25,7 +25,7 @@ import { useLayout, useTransformStyle, extendObject, useRunOnJSCallback } from '
|
|
|
25
25
|
import Portal from './mpx-portal';
|
|
26
26
|
import { FormContext } from './context';
|
|
27
27
|
const Slider = forwardRef((props, ref) => {
|
|
28
|
-
const { min: rawMin = 0, max: rawMax = 100, step: rawStep = 1, disabled = false, value: rawValue, color, 'selected-color': selectedColor, activeColor = selectedColor || color || '#1aad19', backgroundColor = color || '#e9e9e9', 'block-size': rawBlockSize = 28, 'block-color': blockColor = '#ffffff', name, style = {}, 'enable-var': enableVar, 'parent-
|
|
28
|
+
const { min: rawMin = 0, max: rawMax = 100, step: rawStep = 1, disabled = false, value: rawValue, color, 'selected-color': selectedColor, activeColor = selectedColor || color || '#1aad19', backgroundColor = color || '#e9e9e9', 'block-size': rawBlockSize = 28, 'block-color': blockColor = '#ffffff', name, style = {}, 'enable-var': enableVar, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
|
|
29
29
|
// 确保数值类型正确
|
|
30
30
|
const min = typeof rawMin === 'string' ? parseFloat(rawMin) : rawMin;
|
|
31
31
|
const max = typeof rawMax === 'string' ? parseFloat(rawMax) : rawMax;
|
|
@@ -51,7 +51,6 @@ const Slider = forwardRef((props, ref) => {
|
|
|
51
51
|
}
|
|
52
52
|
const { normalStyle, hasSelfPercent, setWidth, setHeight, hasPositionFixed } = useTransformStyle(style, {
|
|
53
53
|
enableVar,
|
|
54
|
-
parentFontSize,
|
|
55
54
|
parentWidth,
|
|
56
55
|
parentHeight
|
|
57
56
|
});
|
|
@@ -8,7 +8,6 @@ interface StickyHeaderProps {
|
|
|
8
8
|
'offset-top'?: number;
|
|
9
9
|
'enable-var'?: boolean;
|
|
10
10
|
'enable-text-pass-through'?: boolean;
|
|
11
|
-
'parent-font-size'?: number;
|
|
12
11
|
'parent-width'?: number;
|
|
13
12
|
'parent-height'?: number;
|
|
14
13
|
bindstickontopchange?: (e: NativeSyntheticEvent<unknown>) => void;
|
|
@@ -7,14 +7,14 @@ import { error } from '@mpxjs/utils';
|
|
|
7
7
|
import useInnerProps, { getCustomEvent } from './getInnerListeners';
|
|
8
8
|
const _StickyHeader = forwardRef((stickyHeaderProps = {}, ref) => {
|
|
9
9
|
const { textProps, innerProps: props = {} } = splitProps(stickyHeaderProps);
|
|
10
|
-
const { style, bindstickontopchange, padding = [0, 0, 0, 0], 'offset-top': offsetTop = 0, 'enable-var': enableVar, 'enable-text-pass-through': enableTextPassThrough, 'parent-
|
|
10
|
+
const { style, bindstickontopchange, padding = [0, 0, 0, 0], 'offset-top': offsetTop = 0, 'enable-var': enableVar, 'enable-text-pass-through': enableTextPassThrough, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
|
|
11
11
|
const { scrollOffset, gestureRef: scrollViewRef } = useContext(ScrollViewContext);
|
|
12
12
|
const stickyContext = useContext(StickyContext);
|
|
13
13
|
const { registerStickyHeader, unregisterStickyHeader } = stickyContext;
|
|
14
14
|
const headerRef = useRef(null);
|
|
15
15
|
const isStickOnTopRef = useRef(false);
|
|
16
16
|
const id = useId();
|
|
17
|
-
const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar,
|
|
17
|
+
const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, parentWidth, parentHeight });
|
|
18
18
|
const { layoutRef, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: headerRef, onLayout });
|
|
19
19
|
const { textStyle, innerStyle = {} } = splitStyle(normalStyle);
|
|
20
20
|
const textPassThrough = useTextPassThrough(textStyle, textProps, { enableTextPassThrough });
|
|
@@ -6,9 +6,9 @@ import { StickyContext } from './context';
|
|
|
6
6
|
import useInnerProps from './getInnerListeners';
|
|
7
7
|
const _StickySection = forwardRef((stickySectionProps = {}, ref) => {
|
|
8
8
|
const { textProps, innerProps: props = {} } = splitProps(stickySectionProps);
|
|
9
|
-
const { style, 'enable-var': enableVar, 'enable-text-pass-through': enableTextPassThrough, 'parent-
|
|
9
|
+
const { style, 'enable-var': enableVar, 'enable-text-pass-through': enableTextPassThrough, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
|
|
10
10
|
const sectionRef = useRef(null);
|
|
11
|
-
const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar,
|
|
11
|
+
const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, parentWidth, parentHeight });
|
|
12
12
|
const { layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: sectionRef, onLayout });
|
|
13
13
|
const { textStyle, innerStyle = {} } = splitStyle(normalStyle);
|
|
14
14
|
const textPassThrough = useTextPassThrough(textStyle, textProps, { enableTextPassThrough });
|
|
@@ -61,7 +61,7 @@ const easeMap = {
|
|
|
61
61
|
easeInOutCubic: Easing.inOut(Easing.cubic)
|
|
62
62
|
};
|
|
63
63
|
const SwiperWrapper = forwardRef((props, ref) => {
|
|
64
|
-
const { 'indicator-dots': showPagination, 'indicator-color': dotColor = 'rgba(0, 0, 0, .3)', 'indicator-width': dotWidth = 8, 'indicator-height': dotHeight = 8, 'indicator-radius': dotRadius = 4, 'indicator-spacing': dotSpacing = 4, 'indicator-margin': paginationMargin = 10, 'indicator-active-color': activeDotColor = '#000000', 'enable-var': enableVar = false, 'enable-text-pass-through': enableTextPassThrough, 'parent-
|
|
64
|
+
const { 'indicator-dots': showPagination, 'indicator-color': dotColor = 'rgba(0, 0, 0, .3)', 'indicator-width': dotWidth = 8, 'indicator-height': dotHeight = 8, 'indicator-radius': dotRadius = 4, 'indicator-spacing': dotSpacing = 4, 'indicator-margin': paginationMargin = 10, 'indicator-active-color': activeDotColor = '#000000', 'enable-var': enableVar = false, 'enable-text-pass-through': enableTextPassThrough, 'parent-width': parentWidth, 'parent-height': parentHeight, 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, autoplay = false, circular = false, disableGesture = false, current: propCurrent = 0, bindchange } = props;
|
|
65
65
|
const dotCommonStyle = {
|
|
66
66
|
width: dotWidth,
|
|
67
67
|
height: dotHeight,
|
|
@@ -85,7 +85,6 @@ const SwiperWrapper = forwardRef((props, ref) => {
|
|
|
85
85
|
// 计算transfrom之类的
|
|
86
86
|
const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, hasPositionFixed, setWidth, setHeight } = useTransformStyle(style, {
|
|
87
87
|
enableVar,
|
|
88
|
-
parentFontSize,
|
|
89
88
|
parentWidth,
|
|
90
89
|
parentHeight
|
|
91
90
|
});
|
|
@@ -15,7 +15,6 @@ interface _SwitchProps extends SwitchProps {
|
|
|
15
15
|
disabled: boolean;
|
|
16
16
|
color: string;
|
|
17
17
|
'enable-var'?: boolean;
|
|
18
|
-
'parent-font-size'?: number;
|
|
19
18
|
'parent-width'?: number;
|
|
20
19
|
'parent-height'?: number;
|
|
21
20
|
bindchange?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
|
|
@@ -14,7 +14,7 @@ import Portal from './mpx-portal';
|
|
|
14
14
|
import { FormContext } from './context';
|
|
15
15
|
import { useTransformStyle, useLayout, extendObject } from './utils';
|
|
16
16
|
const _Switch = forwardRef((props, ref) => {
|
|
17
|
-
const { style = {}, checked = false, type = 'switch', disabled = false, color = '#04BE02', 'enable-var': enableVar, 'parent-
|
|
17
|
+
const { style = {}, checked = false, type = 'switch', disabled = false, color = '#04BE02', 'enable-var': enableVar, 'parent-width': parentWidth, 'parent-height': parentHeight, bindchange, catchchange } = props;
|
|
18
18
|
const [isChecked, setIsChecked] = useState(checked);
|
|
19
19
|
const changeHandler = bindchange || catchchange;
|
|
20
20
|
let formValuesMap;
|
|
@@ -24,7 +24,6 @@ const _Switch = forwardRef((props, ref) => {
|
|
|
24
24
|
}
|
|
25
25
|
const { normalStyle, hasSelfPercent, setWidth, setHeight, hasPositionFixed } = useTransformStyle(style, {
|
|
26
26
|
enableVar,
|
|
27
|
-
parentFontSize,
|
|
28
27
|
parentWidth,
|
|
29
28
|
parentHeight
|
|
30
29
|
});
|
|
@@ -4,12 +4,14 @@
|
|
|
4
4
|
* ✔ decode
|
|
5
5
|
*/
|
|
6
6
|
import { Text } from 'react-native';
|
|
7
|
-
import { useRef, forwardRef, createElement, Children } from 'react';
|
|
7
|
+
import { useRef, forwardRef, createElement, Children, useContext } from 'react';
|
|
8
8
|
import Portal from './mpx-portal';
|
|
9
9
|
import useInnerProps from './getInnerListeners';
|
|
10
10
|
import useNodesRef from './useNodesRef'; // 引入辅助函数
|
|
11
|
-
import { useTransformStyle, wrapChildren, extendObject, getDefaultAllowFontScaling,
|
|
11
|
+
import { useTransformStyle, wrapChildren, extendObject, getDefaultAllowFontScaling, isStringChildren, splitStyle, resolveTextFontSizePercentStyle, resolveTextLineHeightPercentStyle } from './utils';
|
|
12
12
|
import * as perf from '@mpxjs/perf';
|
|
13
|
+
import { diffAndCloneA } from '@mpxjs/utils';
|
|
14
|
+
import { TextPassThroughContext } from './context';
|
|
13
15
|
const decodeMap = {
|
|
14
16
|
'<': '<',
|
|
15
17
|
'>': '>',
|
|
@@ -47,7 +49,7 @@ const _Text = forwardRef((props, ref) => {
|
|
|
47
49
|
let idProps = -1;
|
|
48
50
|
if (__mpx_perf_framework__)
|
|
49
51
|
idProps = perf.scopeStart('text:render:props');
|
|
50
|
-
const { style: currentStyle = {}, allowFontScaling, selectable, 'enable-var': enableVar, 'user-select': userSelect, 'parent-
|
|
52
|
+
const { style: currentStyle = {}, allowFontScaling, selectable, 'enable-var': enableVar, 'user-select': userSelect, 'parent-width': parentWidth, 'parent-height': parentHeight, decode } = props;
|
|
51
53
|
if (__mpx_perf_framework__)
|
|
52
54
|
perf.scopeEnd(idProps);
|
|
53
55
|
// ───── style 阶段 ─────
|
|
@@ -56,7 +58,6 @@ const _Text = forwardRef((props, ref) => {
|
|
|
56
58
|
idStyle = perf.scopeStart('text:render:style');
|
|
57
59
|
const { normalStyle, hasVarDec, varContextRef, hasPositionFixed } = useTransformStyle(currentStyle, {
|
|
58
60
|
enableVar,
|
|
59
|
-
parentFontSize,
|
|
60
61
|
parentWidth,
|
|
61
62
|
parentHeight
|
|
62
63
|
});
|
|
@@ -69,14 +70,27 @@ const _Text = forwardRef((props, ref) => {
|
|
|
69
70
|
children = props.children;
|
|
70
71
|
isStringOnly = isStringChildren(children);
|
|
71
72
|
}
|
|
72
|
-
const
|
|
73
|
-
const
|
|
73
|
+
const inheritedText = useContext(TextPassThroughContext);
|
|
74
|
+
const resolvedNormalStyle = resolveTextFontSizePercentStyle(normalStyle, inheritedText?.textStyle);
|
|
75
|
+
const childTextStyle = !isStringOnly ? splitStyle(resolvedNormalStyle).textStyle : undefined;
|
|
76
|
+
const textPassThroughRef = useRef(null);
|
|
77
|
+
let textPassThrough = null;
|
|
78
|
+
if (childTextStyle) {
|
|
79
|
+
const nextTextPassThrough = {
|
|
80
|
+
textStyle: extendObject({}, inheritedText?.textStyle, childTextStyle)
|
|
81
|
+
};
|
|
82
|
+
if (diffAndCloneA(textPassThroughRef.current, nextTextPassThrough).diff) {
|
|
83
|
+
textPassThroughRef.current = nextTextPassThrough;
|
|
84
|
+
}
|
|
85
|
+
textPassThrough = textPassThroughRef.current;
|
|
86
|
+
}
|
|
74
87
|
const mergedProps = inheritedText?.pendingTextProps
|
|
75
88
|
? extendObject({}, inheritedText.pendingTextProps, props)
|
|
76
89
|
: props;
|
|
77
90
|
const finalStyle = inheritedText?.textStyle
|
|
78
|
-
? extendObject({}, inheritedText.textStyle,
|
|
79
|
-
:
|
|
91
|
+
? extendObject({}, inheritedText.textStyle, resolvedNormalStyle)
|
|
92
|
+
: resolvedNormalStyle;
|
|
93
|
+
resolveTextLineHeightPercentStyle(finalStyle, inheritedText?.textStyle);
|
|
80
94
|
const nodeRef = useRef(null);
|
|
81
95
|
useNodesRef(mergedProps, ref, nodeRef, {
|
|
82
96
|
style: finalStyle
|
|
@@ -83,7 +83,6 @@ interface VideoProps {
|
|
|
83
83
|
'preferred-peak-bit-rate'?: number;
|
|
84
84
|
'enable-auto-rotation'?: number;
|
|
85
85
|
'enable-var'?: boolean;
|
|
86
|
-
'parent-font-size'?: number;
|
|
87
86
|
'parent-width'?: number;
|
|
88
87
|
'parent-height'?: number;
|
|
89
88
|
bindplay?: (event: Record<string, any>) => void;
|
|
@@ -80,7 +80,7 @@ const styles = StyleSheet.create({
|
|
|
80
80
|
});
|
|
81
81
|
const MpxVideo = forwardRef((videoProps, ref) => {
|
|
82
82
|
const { innerProps: props = {} } = splitProps(videoProps);
|
|
83
|
-
const { src, autoplay = false, loop = false, muted = false, controls = true, poster = '', bindplay, bindpause, bindended, bindtimeupdate, bindfullscreenchange, bindwaiting, binderror, bindloadedmetadata, bindcontrolstoggle, bindseekcomplete, style, 'initial-time': initialTime = 0, 'object-fit': objectFit = 'contain', 'is-drm': isDrm = false, 'provision-url': provisionUrl, 'certificate-url': certificateUrl, 'license-url': licenseUrl, 'preferred-peak-bit-rate': preferredPeakBitRate = 0, 'enable-auto-rotation': enableAutoRotation = false, 'enable-var': enableVar, 'parent-
|
|
83
|
+
const { src, autoplay = false, loop = false, muted = false, controls = true, poster = '', bindplay, bindpause, bindended, bindtimeupdate, bindfullscreenchange, bindwaiting, binderror, bindloadedmetadata, bindcontrolstoggle, bindseekcomplete, style, 'initial-time': initialTime = 0, 'object-fit': objectFit = 'contain', 'is-drm': isDrm = false, 'provision-url': provisionUrl, 'certificate-url': certificateUrl, 'license-url': licenseUrl, 'preferred-peak-bit-rate': preferredPeakBitRate = 0, 'enable-auto-rotation': enableAutoRotation = false, 'enable-var': enableVar, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
|
|
84
84
|
const videoRef = useRef(null);
|
|
85
85
|
const viewRef = useRef(null);
|
|
86
86
|
const videoInfoRef = useRef({});
|
|
@@ -88,7 +88,6 @@ const MpxVideo = forwardRef((videoProps, ref) => {
|
|
|
88
88
|
propsRef.current = props;
|
|
89
89
|
const { normalStyle, hasSelfPercent, setWidth, setHeight, hasPositionFixed } = useTransformStyle(style, {
|
|
90
90
|
enableVar,
|
|
91
|
-
parentFontSize,
|
|
92
91
|
parentWidth,
|
|
93
92
|
parentHeight,
|
|
94
93
|
defaultStyle: styles.container
|
|
@@ -21,7 +21,6 @@ export interface _ViewProps extends ViewProps {
|
|
|
21
21
|
'enable-text-pass-through'?: boolean;
|
|
22
22
|
'enable-var'?: boolean;
|
|
23
23
|
'enable-fast-image'?: boolean;
|
|
24
|
-
'parent-font-size'?: number;
|
|
25
24
|
'parent-width'?: number;
|
|
26
25
|
'parent-height'?: number;
|
|
27
26
|
'enable-animation'?: boolean | AnimationType;
|
|
@@ -679,7 +679,7 @@ const _View = forwardRef((viewProps, ref) => {
|
|
|
679
679
|
if (__mpx_perf_framework__)
|
|
680
680
|
idProps = perf.scopeStart('view:render:props');
|
|
681
681
|
const { textProps, innerProps: props = {} } = splitProps(viewProps);
|
|
682
|
-
let { style = {}, 'hover-style': hoverStyle, 'hover-start-time': hoverStartTime = 50, 'hover-stay-time': hoverStayTime = 400, 'enable-var': enableVar, 'enable-background': enableBackground, 'enable-text-pass-through': enableTextPassThrough, 'enable-fast-image': enableFastImage, 'enable-animation': enableAnimation, 'parent-
|
|
682
|
+
let { style = {}, 'hover-style': hoverStyle, 'hover-start-time': hoverStartTime = 50, 'hover-stay-time': hoverStayTime = 400, 'enable-var': enableVar, 'enable-background': enableBackground, 'enable-text-pass-through': enableTextPassThrough, 'enable-fast-image': enableFastImage, 'enable-animation': enableAnimation, 'parent-width': parentWidth, 'parent-height': parentHeight, animation, catchtransitionend, bindtransitionend } = props;
|
|
683
683
|
const enableHover = !!hoverStyle;
|
|
684
684
|
const { isHover, gesture } = useHover({ enableHover, hoverStartTime, hoverStayTime });
|
|
685
685
|
const styleObj = isHover
|
|
@@ -693,7 +693,6 @@ const _View = forwardRef((viewProps, ref) => {
|
|
|
693
693
|
idStyle = perf.scopeStart('view:render:style');
|
|
694
694
|
const { normalStyle, hasSelfPercent, hasPositionFixed, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, {
|
|
695
695
|
enableVar,
|
|
696
|
-
parentFontSize,
|
|
697
696
|
parentWidth,
|
|
698
697
|
parentHeight,
|
|
699
698
|
// 基于合并后的 styleObj 判断(hover 状态切换 display 也能触发)
|
|
@@ -18,5 +18,6 @@ interface WebViewProps {
|
|
|
18
18
|
binderror?: (event: CommonCallbackEvent) => void;
|
|
19
19
|
[x: string]: any;
|
|
20
20
|
}
|
|
21
|
-
|
|
21
|
+
type WebViewInstance = WebView<any>;
|
|
22
|
+
declare const _WebView: import("react").ForwardRefExoticComponent<Omit<WebViewProps, "ref"> & import("react").RefAttributes<HandlerRef<WebViewInstance, WebViewProps>>>;
|
|
22
23
|
export default _WebView;
|
|
@@ -20,13 +20,11 @@ interface PercentConfig {
|
|
|
20
20
|
fontSize?: number | string;
|
|
21
21
|
width?: number;
|
|
22
22
|
height?: number;
|
|
23
|
-
parentFontSize?: number;
|
|
24
23
|
parentWidth?: number;
|
|
25
24
|
parentHeight?: number;
|
|
26
25
|
}
|
|
27
26
|
interface TransformStyleConfig {
|
|
28
27
|
enableVar?: boolean;
|
|
29
|
-
parentFontSize?: number;
|
|
30
28
|
parentWidth?: number;
|
|
31
29
|
parentHeight?: number;
|
|
32
30
|
transformRadiusPercent?: boolean;
|
|
@@ -61,6 +59,7 @@ export interface GestureHandler {
|
|
|
61
59
|
};
|
|
62
60
|
}>;
|
|
63
61
|
current?: unknown;
|
|
62
|
+
handlerTag?: number;
|
|
64
63
|
}
|
|
65
64
|
export declare function omit<T, K extends string>(obj: T, fields: K[]): Omit<T, K>;
|
|
66
65
|
export declare const parseUrl: (cssUrl?: string) => string | undefined;
|
|
@@ -74,12 +73,12 @@ export declare const debounce: <T extends AnyFunc>(func: T, delay: number) => ((
|
|
|
74
73
|
};
|
|
75
74
|
export declare function isBoxSizingAffectingStyle(key: string): boolean;
|
|
76
75
|
export declare function transformBoxSizing(style?: Record<string, any>): void;
|
|
77
|
-
export declare function splitStyle<T extends Record<string, any>>(styleObj
|
|
76
|
+
export declare function splitStyle<T extends Record<string, any>>(styleObj?: T, sideEffect?: (key: string, val: T[keyof T]) => void): {
|
|
78
77
|
textStyle?: Partial<T>;
|
|
79
78
|
backgroundStyle?: Partial<T>;
|
|
80
79
|
innerStyle?: Partial<T>;
|
|
81
80
|
};
|
|
82
|
-
export declare function splitProps<T extends Record<string, any>>(props
|
|
81
|
+
export declare function splitProps<T extends Record<string, any>>(props?: T): {
|
|
83
82
|
textProps?: Partial<T>;
|
|
84
83
|
innerProps?: Partial<T>;
|
|
85
84
|
};
|
|
@@ -87,7 +86,7 @@ export declare function pickStyle(styleObj: Record<string, any> | undefined, pic
|
|
|
87
86
|
export declare function transformShorthand(styleObj: Record<string, any>, shorthandKeys: string[], percentConfig: PercentConfig): void;
|
|
88
87
|
export declare function traverseStyle(styleObj: Record<string, any>, visitor: (arg: VisitorArg) => void): void;
|
|
89
88
|
export declare function setStyle(styleObj: Record<string, any>, keyPath: Array<string>, setter: (arg: VisitorArg) => void): void;
|
|
90
|
-
export declare function useTransformStyle(styleObj: Record<string, any> | undefined, { enableVar, transformRadiusPercent,
|
|
89
|
+
export declare function useTransformStyle(styleObj: Record<string, any> | undefined, { enableVar, transformRadiusPercent, parentWidth, parentHeight, defaultStyle }: TransformStyleConfig): {
|
|
91
90
|
hasVarDec: boolean;
|
|
92
91
|
varContextRef: MutableRefObject<Record<string, any>>;
|
|
93
92
|
setWidth: Dispatch<SetStateAction<number>>;
|
|
@@ -97,6 +96,8 @@ export declare function useTransformStyle(styleObj: Record<string, any> | undefi
|
|
|
97
96
|
hasPositionFixed: boolean;
|
|
98
97
|
};
|
|
99
98
|
export declare function useNavigation(): Record<string, any> | undefined;
|
|
99
|
+
export declare function resolveTextFontSizePercentStyle<T extends TextStyle | undefined>(textStyle: T, parentTextStyle?: TextStyle): T;
|
|
100
|
+
export declare function resolveTextLineHeightPercentStyle<T extends TextStyle | undefined>(textStyle: T, parentTextStyle?: TextStyle): T;
|
|
100
101
|
/**
|
|
101
102
|
* 用法等同于 useEffect,但是会忽略首次执行,只在依赖更新时执行
|
|
102
103
|
*/
|
|
@@ -109,10 +110,6 @@ export declare const useLayout: ({ props, hasSelfPercent, setWidth, setHeight, o
|
|
|
109
110
|
layoutProps: Record<string, any>;
|
|
110
111
|
};
|
|
111
112
|
export declare function useTextPassThrough(textStyle?: TextStyle, textProps?: Record<string, any>, { enableTextPassThrough }?: TextPassThroughValueOptions): TextPassThroughContextValue | null;
|
|
112
|
-
export declare function useTextPassThroughText(textStyle?: TextStyle): {
|
|
113
|
-
inheritedText: TextPassThroughContextValue | null;
|
|
114
|
-
textPassThrough: TextPassThroughContextValue | null;
|
|
115
|
-
};
|
|
116
113
|
export declare function useHover({ enableHover, hoverStartTime, hoverStayTime, disabled }: {
|
|
117
114
|
enableHover: boolean;
|
|
118
115
|
hoverStartTime: number;
|