@momo-kits/foundation 0.92.1-rc.16 → 0.92.1-rc.17
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/Application/Components.tsx +2 -5
- package/Consts/colors+spacing+radius.ts +5 -4
- package/Text/index.tsx +21 -0
- package/Text/types.ts +18 -0
- package/Title/index.tsx +29 -6
- package/Title/styles.ts +0 -1
- package/Title/types.ts +2 -1
- package/package.json +1 -1
|
@@ -8,7 +8,6 @@ import React, {
|
|
|
8
8
|
import {
|
|
9
9
|
Animated,
|
|
10
10
|
BackHandler,
|
|
11
|
-
DeviceEventEmitter,
|
|
12
11
|
StatusBar,
|
|
13
12
|
StyleSheet,
|
|
14
13
|
TouchableOpacity,
|
|
@@ -148,9 +147,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
|
|
|
148
147
|
} else if (navigator?.maxApi) {
|
|
149
148
|
navigator?.maxApi?.dismiss(navigator.dismissData);
|
|
150
149
|
} else {
|
|
151
|
-
|
|
152
|
-
const requestId = `navigationBackPress#${currentTime}`;
|
|
153
|
-
DeviceEventEmitter.emit('dismiss', {requestId});
|
|
150
|
+
(global as any)?.miniAppApi?.dispatch?.('dismiss', undefined);
|
|
154
151
|
}
|
|
155
152
|
onPressLeftHeader?.();
|
|
156
153
|
};
|
|
@@ -369,7 +366,7 @@ const HeaderToolkitAction: React.FC<any> = ({
|
|
|
369
366
|
),
|
|
370
367
|
});
|
|
371
368
|
} else {
|
|
372
|
-
|
|
369
|
+
(global as any)?.miniAppApi?.dispatch?.('dismiss', undefined);
|
|
373
370
|
}
|
|
374
371
|
};
|
|
375
372
|
|
|
@@ -216,14 +216,15 @@ const Shadow = {
|
|
|
216
216
|
|
|
217
217
|
Pink: Platform.select({
|
|
218
218
|
ios: {
|
|
219
|
-
shadowColor: '
|
|
220
|
-
shadowOffset: {
|
|
221
|
-
shadowOpacity:
|
|
219
|
+
shadowColor: '#e27eb5',
|
|
220
|
+
shadowOffset: {width: 0, height: 6},
|
|
221
|
+
shadowOpacity: 0.25,
|
|
222
222
|
shadowRadius: 8,
|
|
223
223
|
},
|
|
224
224
|
android: {
|
|
225
225
|
elevation: 16,
|
|
226
|
-
shadowColor: '
|
|
226
|
+
shadowColor: '#e27eb5',
|
|
227
|
+
shadowOpacity: 0.25,
|
|
227
228
|
},
|
|
228
229
|
}),
|
|
229
230
|
};
|
package/Text/index.tsx
CHANGED
|
@@ -52,6 +52,21 @@ export interface TextProps extends RNTextProps {
|
|
|
52
52
|
color?: string;
|
|
53
53
|
}
|
|
54
54
|
|
|
55
|
+
const deprecatedValues: Typography[] = [
|
|
56
|
+
'headline_default',
|
|
57
|
+
'headline_l',
|
|
58
|
+
'headline_xl',
|
|
59
|
+
'title_default',
|
|
60
|
+
'title_xs',
|
|
61
|
+
'title_s',
|
|
62
|
+
'header_default',
|
|
63
|
+
'paragraph_default',
|
|
64
|
+
'paragraph_bold',
|
|
65
|
+
'paragraph_italic',
|
|
66
|
+
'label_xxs',
|
|
67
|
+
'action_s',
|
|
68
|
+
];
|
|
69
|
+
|
|
55
70
|
const Text: React.FC<TextProps> = ({
|
|
56
71
|
typography = 'body_default_regular',
|
|
57
72
|
color,
|
|
@@ -96,6 +111,12 @@ const Text: React.FC<TextProps> = ({
|
|
|
96
111
|
|
|
97
112
|
const textStyle = getTypoStyle(typography);
|
|
98
113
|
|
|
114
|
+
if (deprecatedValues.includes(typography)) {
|
|
115
|
+
console.warn(
|
|
116
|
+
`Warning: The typography value "${typography}" is deprecated.`,
|
|
117
|
+
);
|
|
118
|
+
}
|
|
119
|
+
|
|
99
120
|
return (
|
|
100
121
|
<RNText
|
|
101
122
|
{...rest}
|
package/Text/types.ts
CHANGED
|
@@ -14,6 +14,24 @@ export type TypographyWeight = {
|
|
|
14
14
|
};
|
|
15
15
|
|
|
16
16
|
export type Typography =
|
|
17
|
+
/**
|
|
18
|
+
* @deprecated
|
|
19
|
+
**/
|
|
20
|
+
| 'headline_default'
|
|
21
|
+
| 'headline_l'
|
|
22
|
+
| 'headline_xl'
|
|
23
|
+
| 'title_default'
|
|
24
|
+
| 'title_xs'
|
|
25
|
+
| 'title_s'
|
|
26
|
+
| 'header_default'
|
|
27
|
+
| 'paragraph_default'
|
|
28
|
+
| 'paragraph_bold'
|
|
29
|
+
| 'paragraph_italic'
|
|
30
|
+
| 'label_xxs'
|
|
31
|
+
| 'action_s'
|
|
32
|
+
/**
|
|
33
|
+
* end
|
|
34
|
+
**/
|
|
17
35
|
| 'headline_default_bold'
|
|
18
36
|
| 'header_m_bold'
|
|
19
37
|
| 'header_default_bold'
|
package/Title/index.tsx
CHANGED
|
@@ -7,6 +7,7 @@ import {ApplicationContext} from '../Application';
|
|
|
7
7
|
import {Badge} from '../Badge';
|
|
8
8
|
import {Typography} from '../Text/types';
|
|
9
9
|
import {TitleProps} from './types';
|
|
10
|
+
import {Colors} from '../Consts';
|
|
10
11
|
|
|
11
12
|
const Title: FC<TitleProps> = ({
|
|
12
13
|
title = 'Title',
|
|
@@ -17,11 +18,12 @@ const Title: FC<TitleProps> = ({
|
|
|
17
18
|
iconColor = null,
|
|
18
19
|
iconAlign = 'top',
|
|
19
20
|
showRightAction = false,
|
|
20
|
-
|
|
21
|
+
showTrailingAction = false,
|
|
21
22
|
badgeLabel,
|
|
22
23
|
buttonTitle,
|
|
23
24
|
onPressRightAction = () => {},
|
|
24
25
|
buttonSize = 'small',
|
|
26
|
+
textOnly = false,
|
|
25
27
|
}) => {
|
|
26
28
|
const {theme} = useContext(ApplicationContext);
|
|
27
29
|
const [badgeWidth, setBadgeWidth] = useState(0);
|
|
@@ -31,10 +33,10 @@ const Title: FC<TitleProps> = ({
|
|
|
31
33
|
} = styles;
|
|
32
34
|
const typography = `${type}_${size}`;
|
|
33
35
|
const isSection = type === 'section';
|
|
34
|
-
const numberOfLines =
|
|
36
|
+
const numberOfLines = showTrailingAction || !!badgeLabel ? 1 : 2;
|
|
35
37
|
const buttonTypo: Typography =
|
|
36
38
|
buttonSize === 'small' ? 'action_xs_bold' : 'action_s_bold';
|
|
37
|
-
const flexStyle =
|
|
39
|
+
const flexStyle = showTrailingAction && {maxWidth: '70%'};
|
|
38
40
|
|
|
39
41
|
const renderIcon = () => {
|
|
40
42
|
if (!icon) return null;
|
|
@@ -100,8 +102,16 @@ const Title: FC<TitleProps> = ({
|
|
|
100
102
|
const renderActionLeft = () => {
|
|
101
103
|
return (
|
|
102
104
|
<View style={styles.iconLeftView}>
|
|
103
|
-
{
|
|
104
|
-
<View
|
|
105
|
+
{showTrailingAction && !showRightAction && (
|
|
106
|
+
<View
|
|
107
|
+
style={[
|
|
108
|
+
styles.iconLeft,
|
|
109
|
+
{
|
|
110
|
+
backgroundColor: isSection
|
|
111
|
+
? Colors.black_06 + '99'
|
|
112
|
+
: Colors.black_06 + '4D',
|
|
113
|
+
},
|
|
114
|
+
]}>
|
|
105
115
|
<Icon
|
|
106
116
|
source={'arrow_chevron_right_small'}
|
|
107
117
|
size={scaleSize(18)}
|
|
@@ -114,7 +124,7 @@ const Title: FC<TitleProps> = ({
|
|
|
114
124
|
};
|
|
115
125
|
|
|
116
126
|
const renderActionRight = () => {
|
|
117
|
-
if (!showRightAction ||
|
|
127
|
+
if (!showRightAction || showTrailingAction) return false;
|
|
118
128
|
|
|
119
129
|
return (
|
|
120
130
|
<View>
|
|
@@ -142,6 +152,19 @@ const Title: FC<TitleProps> = ({
|
|
|
142
152
|
</View>
|
|
143
153
|
);
|
|
144
154
|
};
|
|
155
|
+
|
|
156
|
+
if (textOnly) {
|
|
157
|
+
return (
|
|
158
|
+
<View style={isSection && styles.margin}>
|
|
159
|
+
<RNText
|
|
160
|
+
numberOfLines={numberOfLines}
|
|
161
|
+
style={[styleSheet[typography], styles.title]}>
|
|
162
|
+
{title}
|
|
163
|
+
</RNText>
|
|
164
|
+
</View>
|
|
165
|
+
);
|
|
166
|
+
}
|
|
167
|
+
|
|
145
168
|
return (
|
|
146
169
|
<View style={[styles.wrapper, isSection && styles.margin]}>
|
|
147
170
|
{renderIcon()}
|
package/Title/styles.ts
CHANGED
package/Title/types.ts
CHANGED
|
@@ -7,9 +7,10 @@ export type TitleProps = {
|
|
|
7
7
|
iconColor?: string;
|
|
8
8
|
iconAlign?: 'top' | 'middle' | 'bottom';
|
|
9
9
|
showRightAction?: boolean;
|
|
10
|
-
|
|
10
|
+
showTrailingAction?: boolean;
|
|
11
11
|
badgeLabel?: string;
|
|
12
12
|
buttonTitle?: string;
|
|
13
13
|
buttonSize?: 'small' | 'large';
|
|
14
14
|
onPressRightAction?: () => void;
|
|
15
|
+
textOnly?: boolean;
|
|
15
16
|
};
|