zkit-ui 1.0.0 → 1.0.2
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/dist/ui/Button/index.d.ts.map +1 -1
- package/dist/ui/Button/index.js +164 -15
- package/dist/ui/Checkbox/index.d.ts.map +1 -1
- package/dist/ui/Checkbox/index.js +18 -4
- package/dist/ui/Radio/index.d.ts.map +1 -1
- package/dist/ui/Radio/index.js +17 -6
- package/dist/ui/Text/index.d.ts.map +1 -1
- package/dist/ui/Text/index.js +65 -17
- package/package.json +1 -1
- package/src/ui/Button/README.md +5 -1
- package/src/ui/Button/index.tsx +388 -54
- package/src/ui/Checkbox/README.md +4 -1
- package/src/ui/Checkbox/index.tsx +19 -4
- package/src/ui/Radio/README.md +4 -1
- package/src/ui/Radio/index.tsx +23 -10
- package/src/ui/Text/README.md +5 -2
- package/src/ui/Text/index.tsx +107 -32
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAEV,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Button/index.tsx"],"names":[],"mappings":"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"}
|
package/dist/ui/Button/index.js
CHANGED
|
@@ -538,7 +538,20 @@ function resolveWebCursorStyle(disabled) {
|
|
|
538
538
|
return undefined;
|
|
539
539
|
return { cursor: disabled ? 'not-allowed' : 'pointer' };
|
|
540
540
|
}
|
|
541
|
-
function
|
|
541
|
+
function requiresAnimatedPressEffect(effect) {
|
|
542
|
+
return (effect === 'scale' ||
|
|
543
|
+
effect === 'scale-opacity' ||
|
|
544
|
+
effect === 'highlight' ||
|
|
545
|
+
effect === 'scale-highlight');
|
|
546
|
+
}
|
|
547
|
+
function shouldUseStaticButtonPath({ disabled, loading, pressEffect, }) {
|
|
548
|
+
if (loading)
|
|
549
|
+
return false;
|
|
550
|
+
if (disabled)
|
|
551
|
+
return true;
|
|
552
|
+
return !requiresAnimatedPressEffect(pressEffect);
|
|
553
|
+
}
|
|
554
|
+
function useButtonFrame({ variant = 'solid', tone = 'primary', size = 'md', shape = 'rounded', block = false, disabled = false, loading = false, icon, iconPlacement = 'start', iconOnly = false, color, colors, border, layout, gradient, shadow = 'none', children, textStyle, accessibilityLabel, }) {
|
|
542
555
|
var _a, _b;
|
|
543
556
|
const theme = (0, useTheme_1.useTheme)();
|
|
544
557
|
const scheme = (0, react_native_1.useColorScheme)();
|
|
@@ -551,8 +564,6 @@ function ButtonImpl({ variant = 'solid', tone = 'primary', size = 'md', shape =
|
|
|
551
564
|
const hasGradientBackground = Boolean(variant === 'solid' && gradientCfg && LinearGradientComponent);
|
|
552
565
|
const interactionDisabled = disabled || loading;
|
|
553
566
|
const visualDisabled = disabled;
|
|
554
|
-
const resolvedLoadingMode = iconOnly ? 'overlay' : loadingMode;
|
|
555
|
-
const centeredLoading = resolvedLoadingMode !== 'inline';
|
|
556
567
|
const visualColors = React.useMemo(() => resolveVisualColors({
|
|
557
568
|
accentColor,
|
|
558
569
|
colors,
|
|
@@ -629,12 +640,6 @@ function ButtonImpl({ variant = 'solid', tone = 'primary', size = 'md', shape =
|
|
|
629
640
|
const hasText = resolvedText != null;
|
|
630
641
|
const hasIcon = icon != null;
|
|
631
642
|
const iconSize = (_a = layout === null || layout === void 0 ? void 0 : layout.iconSize) !== null && _a !== void 0 ? _a : metrics.iconSize;
|
|
632
|
-
const loadingSize = React.useMemo(() => resolveLoadingSize({
|
|
633
|
-
iconOnly,
|
|
634
|
-
layout,
|
|
635
|
-
metrics,
|
|
636
|
-
variant,
|
|
637
|
-
}), [iconOnly, layout, metrics, variant]);
|
|
638
643
|
const contentGap = (_b = layout === null || layout === void 0 ? void 0 : layout.gap) !== null && _b !== void 0 ? _b : metrics.gap;
|
|
639
644
|
const iconBaseBoxStyle = React.useMemo(() => resolveIconBoxStyle(hasIcon, iconSize), [hasIcon, iconSize]);
|
|
640
645
|
const iconPlacedBoxStyle = React.useMemo(() => {
|
|
@@ -648,6 +653,125 @@ function ButtonImpl({ variant = 'solid', tone = 'primary', size = 'md', shape =
|
|
|
648
653
|
}, [contentGap, hasIcon, hasText, iconPlacement, iconSize]);
|
|
649
654
|
const inferredAccessibilityLabel = iconOnly && isPrimitiveTextChild(children) ? String(children) : undefined;
|
|
650
655
|
const resolvedAccessibilityLabel = accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : inferredAccessibilityLabel;
|
|
656
|
+
return {
|
|
657
|
+
accentColor,
|
|
658
|
+
contentGap,
|
|
659
|
+
contentSizeStyle,
|
|
660
|
+
defaultHitSlop,
|
|
661
|
+
gradientCfg,
|
|
662
|
+
hasGradientBackground,
|
|
663
|
+
hasIcon,
|
|
664
|
+
hasText,
|
|
665
|
+
iconBaseBoxStyle,
|
|
666
|
+
iconPlacedBoxStyle,
|
|
667
|
+
iconSize,
|
|
668
|
+
interactionDisabled,
|
|
669
|
+
LinearGradientComponent,
|
|
670
|
+
metrics,
|
|
671
|
+
paddingStyle,
|
|
672
|
+
radiusStyle,
|
|
673
|
+
resolvedAccessibilityLabel,
|
|
674
|
+
resolvedText,
|
|
675
|
+
rootSizeStyle,
|
|
676
|
+
shadowStyle,
|
|
677
|
+
visualColors,
|
|
678
|
+
visualDisabled,
|
|
679
|
+
webCursorStyle,
|
|
680
|
+
borderStyle,
|
|
681
|
+
};
|
|
682
|
+
}
|
|
683
|
+
function ButtonStaticImpl({ variant = 'solid', tone = 'primary', size = 'md', shape = 'rounded', block = false, disabled = false, loading = false, loadingMode: _loadingMode = 'inline', pressEffect = 'auto', icon, iconPlacement = 'start', iconOnly = false, color, colors, border, layout, gradient, shadow = 'none', children, style, contentStyle, textStyle, accessibilityLabel, accessibilityState, hitSlop, onPress, testID, ...pressableProps }, ref) {
|
|
684
|
+
const frame = useButtonFrame({
|
|
685
|
+
accessibilityLabel,
|
|
686
|
+
block,
|
|
687
|
+
border,
|
|
688
|
+
children,
|
|
689
|
+
color,
|
|
690
|
+
colors,
|
|
691
|
+
disabled,
|
|
692
|
+
gradient,
|
|
693
|
+
icon,
|
|
694
|
+
iconOnly,
|
|
695
|
+
iconPlacement,
|
|
696
|
+
layout,
|
|
697
|
+
loading,
|
|
698
|
+
shadow,
|
|
699
|
+
shape,
|
|
700
|
+
size,
|
|
701
|
+
textStyle,
|
|
702
|
+
tone,
|
|
703
|
+
variant,
|
|
704
|
+
});
|
|
705
|
+
const { borderStyle, contentSizeStyle, defaultHitSlop, gradientCfg, hasIcon, iconBaseBoxStyle, iconPlacedBoxStyle, interactionDisabled, LinearGradientComponent, paddingStyle, radiusStyle, resolvedAccessibilityLabel, resolvedText, rootSizeStyle, shadowStyle, visualColors, visualDisabled, webCursorStyle, } = frame;
|
|
706
|
+
const handlePress = React.useCallback((event) => {
|
|
707
|
+
if (interactionDisabled)
|
|
708
|
+
return;
|
|
709
|
+
onPress === null || onPress === void 0 ? void 0 : onPress(event);
|
|
710
|
+
}, [interactionDisabled, onPress]);
|
|
711
|
+
const pressOpacityEnabled = !interactionDisabled && (pressEffect === 'auto' || pressEffect === 'opacity');
|
|
712
|
+
const rootStyle = React.useCallback(({ pressed }) => [
|
|
713
|
+
styles.root,
|
|
714
|
+
rootSizeStyle,
|
|
715
|
+
radiusStyle,
|
|
716
|
+
shadowStyle,
|
|
717
|
+
visualDisabled ? styles.disabledRoot : null,
|
|
718
|
+
pressOpacityEnabled && pressed ? styles.pressedRoot : null,
|
|
719
|
+
webCursorStyle,
|
|
720
|
+
style,
|
|
721
|
+
], [
|
|
722
|
+
pressOpacityEnabled,
|
|
723
|
+
radiusStyle,
|
|
724
|
+
rootSizeStyle,
|
|
725
|
+
shadowStyle,
|
|
726
|
+
style,
|
|
727
|
+
visualDisabled,
|
|
728
|
+
webCursorStyle,
|
|
729
|
+
]);
|
|
730
|
+
return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { ...pressableProps, ref: ref, accessibilityLabel: resolvedAccessibilityLabel, accessibilityRole: "button", accessibilityState: {
|
|
731
|
+
...accessibilityState,
|
|
732
|
+
busy: Boolean(loading || (accessibilityState === null || accessibilityState === void 0 ? void 0 : accessibilityState.busy)),
|
|
733
|
+
disabled: Boolean(interactionDisabled || (accessibilityState === null || accessibilityState === void 0 ? void 0 : accessibilityState.disabled)),
|
|
734
|
+
}, disabled: interactionDisabled, hitSlop: hitSlop !== null && hitSlop !== void 0 ? hitSlop : defaultHitSlop, onPress: handlePress, style: rootStyle, testID: testID, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { pointerEvents: "none", style: [
|
|
735
|
+
styles.content,
|
|
736
|
+
contentSizeStyle,
|
|
737
|
+
paddingStyle,
|
|
738
|
+
radiusStyle,
|
|
739
|
+
borderStyle,
|
|
740
|
+
{ backgroundColor: visualColors.backgroundColor },
|
|
741
|
+
contentStyle,
|
|
742
|
+
], children: [LinearGradientComponent && gradientCfg ? ((0, jsx_runtime_1.jsx)(LinearGradientComponent, { pointerEvents: "none", colors: gradientCfg.colors, start: gradientCfg.start, end: gradientCfg.end, style: [react_native_1.StyleSheet.absoluteFillObject, radiusStyle] })) : null, iconOnly ? ((icon !== null && icon !== void 0 ? icon : resolvedText)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon && iconPlacement === 'start' ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [iconBaseBoxStyle, iconPlacedBoxStyle], children: icon })) : null, resolvedText, icon && iconPlacement === 'end' ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [iconBaseBoxStyle, iconPlacedBoxStyle], children: icon })) : null] }))] }) }));
|
|
743
|
+
}
|
|
744
|
+
function ButtonAnimatedImpl({ variant = 'solid', tone = 'primary', size = 'md', shape = 'rounded', block = false, disabled = false, loading = false, loadingMode = 'inline', pressEffect = 'auto', icon, iconPlacement = 'start', iconOnly = false, color, colors, border, layout, gradient, shadow = 'none', children, style, contentStyle, textStyle, accessibilityLabel, accessibilityState, hitSlop, onPress, onPressIn, onPressOut, testID, ...pressableProps }, ref) {
|
|
745
|
+
const resolvedLoadingMode = iconOnly ? 'overlay' : loadingMode;
|
|
746
|
+
const centeredLoading = resolvedLoadingMode !== 'inline';
|
|
747
|
+
const frame = useButtonFrame({
|
|
748
|
+
accessibilityLabel,
|
|
749
|
+
block,
|
|
750
|
+
border,
|
|
751
|
+
children,
|
|
752
|
+
color,
|
|
753
|
+
colors,
|
|
754
|
+
disabled,
|
|
755
|
+
gradient,
|
|
756
|
+
icon,
|
|
757
|
+
iconOnly,
|
|
758
|
+
iconPlacement,
|
|
759
|
+
layout,
|
|
760
|
+
loading,
|
|
761
|
+
shadow,
|
|
762
|
+
shape,
|
|
763
|
+
size,
|
|
764
|
+
textStyle,
|
|
765
|
+
tone,
|
|
766
|
+
variant,
|
|
767
|
+
});
|
|
768
|
+
const { accentColor, borderStyle, contentGap, contentSizeStyle, defaultHitSlop, gradientCfg, hasGradientBackground, hasIcon, hasText, iconBaseBoxStyle, iconPlacedBoxStyle, iconSize, interactionDisabled, LinearGradientComponent, metrics, paddingStyle, radiusStyle, resolvedAccessibilityLabel, resolvedText, rootSizeStyle, shadowStyle, visualColors, visualDisabled, webCursorStyle, } = frame;
|
|
769
|
+
const loadingSize = React.useMemo(() => resolveLoadingSize({
|
|
770
|
+
iconOnly,
|
|
771
|
+
layout,
|
|
772
|
+
metrics,
|
|
773
|
+
variant,
|
|
774
|
+
}), [iconOnly, layout, metrics, variant]);
|
|
651
775
|
const pressSv = (0, react_native_reanimated_1.useSharedValue)(0);
|
|
652
776
|
const loadingSv = (0, react_native_reanimated_1.useSharedValue)(loading ? 1 : 0);
|
|
653
777
|
const [spinnerMounted, setSpinnerMounted] = React.useState(loading);
|
|
@@ -675,20 +799,29 @@ function ButtonImpl({ variant = 'solid', tone = 'primary', size = 'md', shape =
|
|
|
675
799
|
}
|
|
676
800
|
if (loading) {
|
|
677
801
|
setSpinnerMounted(true);
|
|
802
|
+
loadingSv.value = (0, react_native_reanimated_1.withTiming)(1, LOADING_TIMING);
|
|
803
|
+
return () => {
|
|
804
|
+
if (hideSpinnerTimerRef.current) {
|
|
805
|
+
clearTimeout(hideSpinnerTimerRef.current);
|
|
806
|
+
hideSpinnerTimerRef.current = null;
|
|
807
|
+
}
|
|
808
|
+
};
|
|
678
809
|
}
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
setSpinnerMounted(false);
|
|
683
|
-
}, LOADING_TIMING.duration);
|
|
810
|
+
if (!spinnerMounted) {
|
|
811
|
+
loadingSv.value = 0;
|
|
812
|
+
return undefined;
|
|
684
813
|
}
|
|
814
|
+
loadingSv.value = (0, react_native_reanimated_1.withTiming)(0, LOADING_TIMING);
|
|
815
|
+
hideSpinnerTimerRef.current = setTimeout(() => {
|
|
816
|
+
setSpinnerMounted(false);
|
|
817
|
+
}, LOADING_TIMING.duration);
|
|
685
818
|
return () => {
|
|
686
819
|
if (hideSpinnerTimerRef.current) {
|
|
687
820
|
clearTimeout(hideSpinnerTimerRef.current);
|
|
688
821
|
hideSpinnerTimerRef.current = null;
|
|
689
822
|
}
|
|
690
823
|
};
|
|
691
|
-
}, [loading, loadingSv]);
|
|
824
|
+
}, [loading, loadingSv, spinnerMounted]);
|
|
692
825
|
const rootAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
|
|
693
826
|
const baseOpacity = visualDisabled ? DISABLED_OPACITY : 1;
|
|
694
827
|
const scale = pressScaleEnabled
|
|
@@ -789,6 +922,16 @@ function ButtonImpl({ variant = 'solid', tone = 'primary', size = 'md', shape =
|
|
|
789
922
|
overlayAnimatedStyle,
|
|
790
923
|
] }), iconOnly ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [styles.centerOverlay, centeredSpinnerAnimatedStyle], children: spinnerVisible ? ((0, jsx_runtime_1.jsx)(LoadingSpinner_1.LoadingSpinner, { animating: spinnerVisible, color: visualColors.loadingColor, size: loadingSize })) : null }), (icon !== null && icon !== void 0 ? icon : resolvedText) ? ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: contentAnimatedStyle, children: icon !== null && icon !== void 0 ? icon : resolvedText })) : null] })) : centeredLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_native_reanimated_1.default.View, { style: [styles.centerContent, contentAnimatedStyle], children: [icon && iconPlacement === 'start' ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [iconBaseBoxStyle, iconPlacedBoxStyle], children: icon })) : null, showContent ? resolvedText : null, icon && iconPlacement === 'end' ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [iconBaseBoxStyle, iconPlacedBoxStyle], children: icon })) : null] }), (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [styles.centerOverlay, centeredSpinnerAnimatedStyle], children: spinnerVisible ? ((0, jsx_runtime_1.jsx)(LoadingSpinner_1.LoadingSpinner, { animating: spinnerVisible, color: visualColors.loadingColor, size: loadingSize })) : null })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [styles.spinnerBox, { height: loadingSize }, inlineSpinnerAnimatedStyle], children: spinnerVisible ? ((0, jsx_runtime_1.jsx)(LoadingSpinner_1.LoadingSpinner, { animating: spinnerVisible, color: visualColors.loadingColor, size: loadingSize })) : null }), icon && iconPlacement === 'start' ? ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [iconBaseBoxStyle, iconAnimatedStyle], children: icon })) : null, resolvedText ? (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: contentAnimatedStyle, children: resolvedText }) : null, icon && iconPlacement === 'end' ? ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [iconBaseBoxStyle, iconAnimatedStyle], children: icon })) : null] }))] }) }));
|
|
791
924
|
}
|
|
925
|
+
const ButtonStaticWithRef = React.forwardRef(ButtonStaticImpl);
|
|
926
|
+
ButtonStaticWithRef.displayName = 'ButtonStatic';
|
|
927
|
+
const ButtonAnimatedWithRef = React.forwardRef(ButtonAnimatedImpl);
|
|
928
|
+
ButtonAnimatedWithRef.displayName = 'ButtonAnimated';
|
|
929
|
+
function ButtonImpl(props, ref) {
|
|
930
|
+
if (shouldUseStaticButtonPath(props)) {
|
|
931
|
+
return (0, jsx_runtime_1.jsx)(ButtonStaticWithRef, { ...props, ref: ref });
|
|
932
|
+
}
|
|
933
|
+
return (0, jsx_runtime_1.jsx)(ButtonAnimatedWithRef, { ...props, ref: ref });
|
|
934
|
+
}
|
|
792
935
|
const ButtonWithRef = React.forwardRef(ButtonImpl);
|
|
793
936
|
ButtonWithRef.displayName = 'Button';
|
|
794
937
|
exports.Button = React.memo(ButtonWithRef);
|
|
@@ -818,6 +961,12 @@ const styles = react_native_1.StyleSheet.create({
|
|
|
818
961
|
textDecorationLine: 'underline',
|
|
819
962
|
},
|
|
820
963
|
root: {},
|
|
964
|
+
disabledRoot: {
|
|
965
|
+
opacity: DISABLED_OPACITY,
|
|
966
|
+
},
|
|
967
|
+
pressedRoot: {
|
|
968
|
+
opacity: PRESSED_OPACITY,
|
|
969
|
+
},
|
|
821
970
|
spinnerBox: {
|
|
822
971
|
alignItems: 'center',
|
|
823
972
|
justifyContent: 'center',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Checkbox/index.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Checkbox/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -126,6 +126,7 @@ const SIZE_TOKENS = {
|
|
|
126
126
|
const DISABLED_OPACITY = 0.48;
|
|
127
127
|
const PRESSED_OPACITY = 0.86;
|
|
128
128
|
const PRESSED_SCALE = 0.965;
|
|
129
|
+
const CUSTOM_INDICATOR_ICON_SIZE_RATIO = 0.625;
|
|
129
130
|
const VALUE_TIMING_DURATION = 170;
|
|
130
131
|
const PRESS_IN_DURATION = 90;
|
|
131
132
|
const PRESS_OUT_DURATION = 140;
|
|
@@ -244,21 +245,34 @@ function resolveVariantColors(variant, accent, onAccent, colors, theme, scheme)
|
|
|
244
245
|
function resolveCheckboxMetrics(size, shape, layout) {
|
|
245
246
|
var _a;
|
|
246
247
|
const token = (_a = SIZE_TOKENS[size]) !== null && _a !== void 0 ? _a : SIZE_TOKENS.md;
|
|
247
|
-
const
|
|
248
|
-
const
|
|
248
|
+
const tokenIndicatorSize = (0, zkit_tools_1.wp)(token.indicatorSize);
|
|
249
|
+
const tokenIndicatorIconSize = (0, zkit_tools_1.wp)(token.indicatorIconSize);
|
|
250
|
+
const hasCustomIndicatorSize = isPositiveNumber(layout === null || layout === void 0 ? void 0 : layout.indicatorSize);
|
|
251
|
+
const indicatorSize = resolvePositiveNumber(layout === null || layout === void 0 ? void 0 : layout.indicatorSize, tokenIndicatorSize);
|
|
252
|
+
const fallbackIconSize = hasCustomIndicatorSize
|
|
253
|
+
? Math.max((0, zkit_tools_1.wp)(1), Math.round(indicatorSize * CUSTOM_INDICATOR_ICON_SIZE_RATIO))
|
|
254
|
+
: tokenIndicatorIconSize;
|
|
255
|
+
const fallbackRadius = shape === 'circle'
|
|
256
|
+
? Math.round(indicatorSize / 2)
|
|
257
|
+
: shape === 'square'
|
|
258
|
+
? 0
|
|
259
|
+
: (0, zkit_tools_1.wp)(token.indicatorRadius);
|
|
249
260
|
return {
|
|
250
261
|
indicatorSize,
|
|
251
262
|
indicatorRadius: resolveNonNegativeNumber(layout === null || layout === void 0 ? void 0 : layout.indicatorRadius, fallbackRadius),
|
|
252
263
|
indicatorBorderWidth: resolvePositiveNumber(layout === null || layout === void 0 ? void 0 : layout.indicatorBorderWidth, (0, zkit_tools_1.wp)(token.indicatorBorderWidth)),
|
|
253
|
-
indicatorIconSize: resolvePositiveNumber(layout === null || layout === void 0 ? void 0 : layout.indicatorIconSize,
|
|
264
|
+
indicatorIconSize: resolvePositiveNumber(layout === null || layout === void 0 ? void 0 : layout.indicatorIconSize, fallbackIconSize),
|
|
254
265
|
gap: resolveNonNegativeNumber(layout === null || layout === void 0 ? void 0 : layout.gap, (0, zkit_tools_1.wp)(token.gap)),
|
|
255
266
|
minTouchTarget: resolvePositiveNumber(layout === null || layout === void 0 ? void 0 : layout.minTouchTarget, (0, zkit_tools_1.wp)(44)),
|
|
256
267
|
focusRingWidth: resolvePositiveNumber(layout === null || layout === void 0 ? void 0 : layout.focusRingWidth, (0, zkit_tools_1.wp)(2)),
|
|
257
268
|
focusRingOffset: resolveNonNegativeNumber(layout === null || layout === void 0 ? void 0 : layout.focusRingOffset, (0, zkit_tools_1.wp)(3)),
|
|
258
269
|
};
|
|
259
270
|
}
|
|
271
|
+
function isPositiveNumber(value) {
|
|
272
|
+
return typeof value === 'number' && Number.isFinite(value) && value > 0;
|
|
273
|
+
}
|
|
260
274
|
function resolvePositiveNumber(value, fallback) {
|
|
261
|
-
return
|
|
275
|
+
return isPositiveNumber(value) ? value : fallback;
|
|
262
276
|
}
|
|
263
277
|
function resolveNonNegativeNumber(value, fallback) {
|
|
264
278
|
return typeof value === 'number' && Number.isFinite(value) && value >= 0 ? value : fallback;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Radio/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAIV,SAAS,EACT,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AACtB,OAAO,EAGL,SAAS,EAKT,IAAI,EACL,MAAM,cAAc,CAAC;AAgBtB,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AACzC,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC3C,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC1F,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,KAAK,CAAC;AAClD,MAAM,MAAM,qBAAqB,GAAG,YAAY,GAAG,UAAU,CAAC;AAC9D,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAErE,MAAM,MAAM,WAAW,GAAG;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,EAAE,YAAY,CAAC;IACtB,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Radio/index.tsx"],"names":[],"mappings":"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"}
|
package/dist/ui/Radio/index.js
CHANGED
|
@@ -101,6 +101,7 @@ const SIZE_TOKENS = {
|
|
|
101
101
|
const DISABLED_OPACITY = 0.48;
|
|
102
102
|
const PRESSED_OPACITY = 0.86;
|
|
103
103
|
const PRESSED_SCALE = 0.965;
|
|
104
|
+
const CUSTOM_INDICATOR_DOT_SIZE_RATIO = 0.45;
|
|
104
105
|
const VALUE_TIMING_DURATION = 170;
|
|
105
106
|
const PRESS_IN_DURATION = 90;
|
|
106
107
|
const PRESS_OUT_DURATION = 140;
|
|
@@ -213,10 +214,17 @@ function resolveVariantColors(variant, accent, onAccent, colors, theme, scheme)
|
|
|
213
214
|
function resolveRadioMetrics(size, layout) {
|
|
214
215
|
var _a;
|
|
215
216
|
const token = (_a = SIZE_TOKENS[size]) !== null && _a !== void 0 ? _a : SIZE_TOKENS.md;
|
|
216
|
-
const
|
|
217
|
+
const tokenIndicatorSize = (0, zkit_tools_1.wp)(token.indicatorSize);
|
|
218
|
+
const tokenIndicatorDotSize = (0, zkit_tools_1.wp)(token.indicatorDotSize);
|
|
219
|
+
const hasCustomIndicatorSize = isPositiveNumber(layout === null || layout === void 0 ? void 0 : layout.indicatorSize);
|
|
220
|
+
const indicatorSize = resolvePositiveNumber(layout === null || layout === void 0 ? void 0 : layout.indicatorSize, tokenIndicatorSize);
|
|
221
|
+
const fallbackDotSize = hasCustomIndicatorSize
|
|
222
|
+
? Math.max((0, zkit_tools_1.wp)(1), Math.round(indicatorSize * CUSTOM_INDICATOR_DOT_SIZE_RATIO))
|
|
223
|
+
: tokenIndicatorDotSize;
|
|
217
224
|
return {
|
|
218
225
|
indicatorSize,
|
|
219
|
-
|
|
226
|
+
indicatorRadius: Math.round(indicatorSize / 2),
|
|
227
|
+
indicatorDotSize: resolvePositiveNumber(layout === null || layout === void 0 ? void 0 : layout.indicatorDotSize, fallbackDotSize),
|
|
220
228
|
indicatorBorderWidth: resolvePositiveNumber(layout === null || layout === void 0 ? void 0 : layout.indicatorBorderWidth, (0, zkit_tools_1.wp)(token.indicatorBorderWidth)),
|
|
221
229
|
gap: resolveNonNegativeNumber(layout === null || layout === void 0 ? void 0 : layout.gap, (0, zkit_tools_1.wp)(token.gap)),
|
|
222
230
|
minTouchTarget: resolvePositiveNumber(layout === null || layout === void 0 ? void 0 : layout.minTouchTarget, (0, zkit_tools_1.wp)(44)),
|
|
@@ -224,8 +232,11 @@ function resolveRadioMetrics(size, layout) {
|
|
|
224
232
|
focusRingOffset: resolveNonNegativeNumber(layout === null || layout === void 0 ? void 0 : layout.focusRingOffset, (0, zkit_tools_1.wp)(3)),
|
|
225
233
|
};
|
|
226
234
|
}
|
|
235
|
+
function isPositiveNumber(value) {
|
|
236
|
+
return typeof value === 'number' && Number.isFinite(value) && value > 0;
|
|
237
|
+
}
|
|
227
238
|
function resolvePositiveNumber(value, fallback) {
|
|
228
|
-
return
|
|
239
|
+
return isPositiveNumber(value) ? value : fallback;
|
|
229
240
|
}
|
|
230
241
|
function resolveNonNegativeNumber(value, fallback) {
|
|
231
242
|
return typeof value === 'number' && Number.isFinite(value) && value >= 0 ? value : fallback;
|
|
@@ -472,9 +483,9 @@ function RadioImpl({ value, checked: checkedProp, defaultChecked = false, onChan
|
|
|
472
483
|
const indicatorFrameStyle = React.useMemo(() => ({
|
|
473
484
|
width: metrics.indicatorSize,
|
|
474
485
|
height: metrics.indicatorSize,
|
|
475
|
-
borderRadius: metrics.
|
|
486
|
+
borderRadius: metrics.indicatorRadius,
|
|
476
487
|
borderWidth: metrics.indicatorBorderWidth,
|
|
477
|
-
}), [metrics.indicatorBorderWidth, metrics.indicatorSize]);
|
|
488
|
+
}), [metrics.indicatorBorderWidth, metrics.indicatorRadius, metrics.indicatorSize]);
|
|
478
489
|
const indicatorNode = showIndicator ? ((0, jsx_runtime_1.jsxs)(react_native_reanimated_1.default.View, { style: [
|
|
479
490
|
styles.indicatorFrame,
|
|
480
491
|
indicatorFrameStyle,
|
|
@@ -488,7 +499,7 @@ function RadioImpl({ value, checked: checkedProp, defaultChecked = false, onChan
|
|
|
488
499
|
bottom: -metrics.focusRingOffset,
|
|
489
500
|
left: -metrics.focusRingOffset,
|
|
490
501
|
right: -metrics.focusRingOffset,
|
|
491
|
-
borderRadius: metrics.
|
|
502
|
+
borderRadius: metrics.indicatorRadius + metrics.focusRingOffset,
|
|
492
503
|
borderWidth: metrics.focusRingWidth,
|
|
493
504
|
borderColor: resolvedColors.focusRing,
|
|
494
505
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Text/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,IAAI,IAAI,MAAM,EAEd,KAAK,SAAS,EACd,KAAK,SAAS,IAAI,WAAW,EAC7B,KAAK,SAAS,EAGf,MAAM,cAAc,CAAC;AAKtB,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;AAClG,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AACxF,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC9C,MAAM,MAAM,QAAQ,GAChB,SAAS,GACT,SAAS,GACT,OAAO,GACP,QAAQ,GACR,SAAS,GACT,SAAS,GACT,SAAS,GACT,QAAQ,GACR,MAAM,GACN,UAAU,GACV,SAAS,GACT,WAAW,GACX,aAAa,GACb,SAAS,CAAC;AACd,MAAM,MAAM,UAAU,GAClB,SAAS,GACT,QAAQ,GACR,UAAU,GACV,MAAM,GACN,OAAO,GACP,OAAO,GACP,WAAW,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,CAAC;AACzC,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,MAAM,CAAC;AAE5C,KAAK,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,UAAU,GAAG,eAAe,GAAG,eAAe,CAAC,CAAC;AAEnG,MAAM,MAAM,OAAO,GAAG,KAAK,CAAC,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAExD,MAAM,WAAW,SAAU,SAAQ,eAAe;IAChD;;OAEG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;IACvC,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;IAC7C,aAAa,CAAC,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;IAC7C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Text/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,IAAI,IAAI,MAAM,EAEd,KAAK,SAAS,EACd,KAAK,SAAS,IAAI,WAAW,EAC7B,KAAK,SAAS,EAGf,MAAM,cAAc,CAAC;AAKtB,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;AAClG,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AACxF,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC9C,MAAM,MAAM,QAAQ,GAChB,SAAS,GACT,SAAS,GACT,OAAO,GACP,QAAQ,GACR,SAAS,GACT,SAAS,GACT,SAAS,GACT,QAAQ,GACR,MAAM,GACN,UAAU,GACV,SAAS,GACT,WAAW,GACX,aAAa,GACb,SAAS,CAAC;AACd,MAAM,MAAM,UAAU,GAClB,SAAS,GACT,QAAQ,GACR,UAAU,GACV,MAAM,GACN,OAAO,GACP,OAAO,GACP,WAAW,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,CAAC;AACzC,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,MAAM,CAAC;AAE5C,KAAK,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,UAAU,GAAG,eAAe,GAAG,eAAe,CAAC,CAAC;AAEnG,MAAM,MAAM,OAAO,GAAG,KAAK,CAAC,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAExD,MAAM,WAAW,SAAU,SAAQ,eAAe;IAChD;;OAEG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;IACvC,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;IAC7C,aAAa,CAAC,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;IAC7C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAgcD,eAAO,MAAM,IAAI,qEAAuB,CAAC"}
|
package/dist/ui/Text/index.js
CHANGED
|
@@ -120,6 +120,8 @@ const baseStyles = react_native_1.StyleSheet.create({
|
|
|
120
120
|
padding: 0,
|
|
121
121
|
},
|
|
122
122
|
});
|
|
123
|
+
const DEFAULT_LINE_HEIGHT_RATIO = 1.4;
|
|
124
|
+
const NestedTextContext = React.createContext(false);
|
|
123
125
|
function isFiniteNumber(value) {
|
|
124
126
|
return typeof value === 'number' && Number.isFinite(value);
|
|
125
127
|
}
|
|
@@ -243,21 +245,39 @@ function resolveTypographyToken(size) {
|
|
|
243
245
|
const fontSize = Math.max(0, size);
|
|
244
246
|
return {
|
|
245
247
|
fontSize,
|
|
246
|
-
lineHeight: Math.ceil(fontSize *
|
|
248
|
+
lineHeight: Math.ceil(fontSize * DEFAULT_LINE_HEIGHT_RATIO),
|
|
247
249
|
};
|
|
248
250
|
}
|
|
249
|
-
function
|
|
250
|
-
const
|
|
251
|
-
return
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
251
|
+
function readStyleNumber(style, key) {
|
|
252
|
+
const value = style === null || style === void 0 ? void 0 : style[key];
|
|
253
|
+
return isFiniteNumber(value) ? Math.max(0, value) : undefined;
|
|
254
|
+
}
|
|
255
|
+
function resolveTypographyStyle({ explicitLineHeight, hasExplicitSize, shouldUseVariantDefaults, size, styleFontSize, styleLineHeight, }) {
|
|
256
|
+
const shouldResolveSize = hasExplicitSize || shouldUseVariantDefaults;
|
|
257
|
+
const token = shouldResolveSize ? resolveTypographyToken(size) : undefined;
|
|
258
|
+
const nextStyle = {};
|
|
259
|
+
let hasStyle = false;
|
|
260
|
+
if (token) {
|
|
261
|
+
nextStyle.fontSize = (0, zkit_tools_1.wp)(token.fontSize);
|
|
262
|
+
hasStyle = true;
|
|
263
|
+
}
|
|
264
|
+
if (styleLineHeight != null) {
|
|
265
|
+
return hasStyle ? nextStyle : undefined;
|
|
266
|
+
}
|
|
267
|
+
if (isFiniteNumber(explicitLineHeight)) {
|
|
268
|
+
nextStyle.lineHeight = (0, zkit_tools_1.wp)(Math.max(0, explicitLineHeight));
|
|
269
|
+
hasStyle = true;
|
|
270
|
+
}
|
|
271
|
+
else if (token && styleFontSize == null) {
|
|
272
|
+
nextStyle.lineHeight = (0, zkit_tools_1.wp)(token.lineHeight);
|
|
273
|
+
hasStyle = true;
|
|
274
|
+
}
|
|
275
|
+
return hasStyle ? nextStyle : undefined;
|
|
255
276
|
}
|
|
256
|
-
function normalizeStyleFontWeight(style) {
|
|
277
|
+
function normalizeStyleFontWeight(style, flattenedStyle) {
|
|
257
278
|
if (!style)
|
|
258
279
|
return style;
|
|
259
|
-
const
|
|
260
|
-
const fontWeight = flattened === null || flattened === void 0 ? void 0 : flattened.fontWeight;
|
|
280
|
+
const fontWeight = flattenedStyle === null || flattenedStyle === void 0 ? void 0 : flattenedStyle.fontWeight;
|
|
261
281
|
if (fontWeight == null)
|
|
262
282
|
return style;
|
|
263
283
|
const normalizedFontWeight = normalizeFontWeight(fontWeight);
|
|
@@ -281,27 +301,54 @@ function resolveAccessibilityState(disabled, accessibilityState) {
|
|
|
281
301
|
disabled: true,
|
|
282
302
|
};
|
|
283
303
|
}
|
|
284
|
-
const TextBase = React.forwardRef(function Text({ variant
|
|
304
|
+
const TextBase = React.forwardRef(function Text({ variant: variantProp, size, lineHeight, weight, tone = 'default', color, align, transform, truncate, tabularNumbers = false, disabled = false, style, maxFontSizeMultiplier, allowFontScaling, numberOfLines, ellipsizeMode, accessibilityState, children, ...rest }, ref) {
|
|
285
305
|
var _a;
|
|
306
|
+
const nested = React.useContext(NestedTextContext);
|
|
286
307
|
const theme = (0, useTheme_1.useTheme)();
|
|
287
308
|
const { width: viewportWidth } = (0, react_native_1.useWindowDimensions)();
|
|
309
|
+
const hasExplicitVariant = variantProp != null;
|
|
310
|
+
const shouldUseVariantDefaults = !nested || hasExplicitVariant;
|
|
311
|
+
const variant = variantProp !== null && variantProp !== void 0 ? variantProp : 'body';
|
|
288
312
|
const variantToken = (_a = VARIANT_TOKENS[variant]) !== null && _a !== void 0 ? _a : VARIANT_TOKENS.body;
|
|
313
|
+
const hasExplicitSize = size != null;
|
|
289
314
|
const resolvedSize = size !== null && size !== void 0 ? size : variantToken.size;
|
|
290
|
-
const resolvedWeight = weight !== null && weight !== void 0 ? weight : variantToken.weight;
|
|
315
|
+
const resolvedWeight = weight !== null && weight !== void 0 ? weight : (shouldUseVariantDefaults ? variantToken.weight : undefined);
|
|
291
316
|
const toneColor = resolveToneColor(theme.colors, disabled ? 'disabled' : tone);
|
|
292
317
|
const resolvedColor = resolveColorToken(color, toneColor, theme);
|
|
293
318
|
const resolvedNumberOfLines = resolveNumberOfLines(truncate, numberOfLines);
|
|
294
319
|
const resolvedEllipsizeMode = truncate ? (ellipsizeMode !== null && ellipsizeMode !== void 0 ? ellipsizeMode : 'tail') : ellipsizeMode;
|
|
295
320
|
const resolvedAccessibilityState = React.useMemo(() => resolveAccessibilityState(disabled, accessibilityState), [accessibilityState, disabled]);
|
|
296
|
-
const
|
|
321
|
+
const flattenedStyle = React.useMemo(() => react_native_1.StyleSheet.flatten(style), [style]);
|
|
322
|
+
const styleFontSize = readStyleNumber(flattenedStyle, 'fontSize');
|
|
323
|
+
const styleLineHeight = readStyleNumber(flattenedStyle, 'lineHeight');
|
|
324
|
+
const typographyStyle = React.useMemo(() => resolveTypographyStyle({
|
|
325
|
+
explicitLineHeight: lineHeight,
|
|
326
|
+
hasExplicitSize,
|
|
327
|
+
shouldUseVariantDefaults,
|
|
328
|
+
size: resolvedSize,
|
|
329
|
+
styleFontSize,
|
|
330
|
+
styleLineHeight,
|
|
331
|
+
}), [
|
|
332
|
+
hasExplicitSize,
|
|
333
|
+
lineHeight,
|
|
334
|
+
resolvedSize,
|
|
335
|
+
shouldUseVariantDefaults,
|
|
336
|
+
styleFontSize,
|
|
337
|
+
styleLineHeight,
|
|
338
|
+
viewportWidth,
|
|
339
|
+
]);
|
|
297
340
|
const semanticStyle = React.useMemo(() => {
|
|
298
341
|
const nextStyle = {
|
|
299
|
-
fontFamily: variantToken.fontFamily,
|
|
300
342
|
fontVariant: tabularNumbers ? ['tabular-nums'] : undefined,
|
|
301
|
-
fontWeight: normalizeFontWeight(resolveTextWeight(resolvedWeight)),
|
|
302
343
|
textAlign: align,
|
|
303
344
|
textTransform: transform,
|
|
304
345
|
};
|
|
346
|
+
if (shouldUseVariantDefaults && variantToken.fontFamily !== undefined) {
|
|
347
|
+
nextStyle.fontFamily = variantToken.fontFamily;
|
|
348
|
+
}
|
|
349
|
+
if (resolvedWeight !== undefined) {
|
|
350
|
+
nextStyle.fontWeight = normalizeFontWeight(resolveTextWeight(resolvedWeight));
|
|
351
|
+
}
|
|
305
352
|
if (resolvedColor !== undefined) {
|
|
306
353
|
nextStyle.color = resolvedColor;
|
|
307
354
|
}
|
|
@@ -310,15 +357,16 @@ const TextBase = React.forwardRef(function Text({ variant = 'body', size, lineHe
|
|
|
310
357
|
align,
|
|
311
358
|
resolvedColor,
|
|
312
359
|
resolvedWeight,
|
|
360
|
+
shouldUseVariantDefaults,
|
|
313
361
|
tabularNumbers,
|
|
314
362
|
transform,
|
|
315
363
|
variantToken.fontFamily,
|
|
316
364
|
]);
|
|
317
|
-
const normalizedStyle = React.useMemo(() => normalizeStyleFontWeight(style), [style]);
|
|
365
|
+
const normalizedStyle = React.useMemo(() => normalizeStyleFontWeight(style, flattenedStyle), [flattenedStyle, style]);
|
|
318
366
|
const finalStyle = React.useMemo(() => normalizedStyle
|
|
319
367
|
? [baseStyles.root, typographyStyle, semanticStyle, normalizedStyle]
|
|
320
368
|
: [baseStyles.root, typographyStyle, semanticStyle], [normalizedStyle, semanticStyle, typographyStyle]);
|
|
321
|
-
return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { ref: ref, ...rest, accessibilityState: resolvedAccessibilityState, allowFontScaling: allowFontScaling, disabled: disabled, ellipsizeMode: resolvedEllipsizeMode, maxFontSizeMultiplier: allowFontScaling === false ? maxFontSizeMultiplier : (maxFontSizeMultiplier !== null && maxFontSizeMultiplier !== void 0 ? maxFontSizeMultiplier : (0, zkit_tools_1.getMaxFontSizeMultiplier)()), numberOfLines: resolvedNumberOfLines, style: finalStyle, children: children }));
|
|
369
|
+
return ((0, jsx_runtime_1.jsx)(NestedTextContext.Provider, { value: true, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { ref: ref, ...rest, accessibilityState: resolvedAccessibilityState, allowFontScaling: allowFontScaling, disabled: disabled, ellipsizeMode: resolvedEllipsizeMode, maxFontSizeMultiplier: allowFontScaling === false ? maxFontSizeMultiplier : (maxFontSizeMultiplier !== null && maxFontSizeMultiplier !== void 0 ? maxFontSizeMultiplier : (0, zkit_tools_1.getMaxFontSizeMultiplier)()), numberOfLines: resolvedNumberOfLines, style: finalStyle, children: children }) }));
|
|
322
370
|
});
|
|
323
371
|
TextBase.displayName = 'Text';
|
|
324
372
|
exports.Text = React.memo(TextBase);
|
package/package.json
CHANGED
package/src/ui/Button/README.md
CHANGED
|
@@ -154,7 +154,11 @@ export function Demo() {
|
|
|
154
154
|
}
|
|
155
155
|
```
|
|
156
156
|
|
|
157
|
-
渐变依赖 `expo-linear-gradient
|
|
157
|
+
渐变依赖 `expo-linear-gradient`，缺失时会使用第一段颜色作为稳定兜底。默认 `pressEffect="auto"` 走普通 `Pressable` 静态路径，并用原生 pressed style 做轻量透明度反馈；只有 `scale`、`scale-opacity`、`highlight`、`scale-highlight` 和 loading 过渡会升级到 Reanimated 动画路径。
|
|
158
|
+
|
|
159
|
+
## 列表高频渲染
|
|
160
|
+
|
|
161
|
+
在 `FlatList` / `FlashList` cell 中批量渲染普通按钮时，默认 `pressEffect="auto"` 已命中轻量 `Pressable + View` 路径，不会为每个 cell 挂载 Reanimated press/loading 动画结构。列表内需要更强反馈时优先使用 `pressEffect="opacity"`；只有确实需要缩放、高亮遮罩或 loading 动画时再使用对应动画配置。
|
|
158
162
|
|
|
159
163
|
## 常用 Props
|
|
160
164
|
|