@momo-kits/foundation 0.81.31 → 0.81.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/Title/index.tsx +60 -40
  2. package/Title/styles.ts +7 -8
  3. package/Title/types.ts +1 -0
  4. package/package.json +1 -1
package/Title/index.tsx CHANGED
@@ -24,27 +24,19 @@ const Title: FC<TitleProps> = ({
24
24
  showAction = true,
25
25
  icon,
26
26
  description,
27
+ usePadding = true,
27
28
  }) => {
28
29
  const {theme} = useContext(ApplicationContext);
29
30
  const [containerWidth, setContainerWidth] = useState(0);
30
31
  const [textLines, setTextLines] = useState(0);
31
- const flexStyle = titleFlex ? {flex: 1} : {};
32
32
  const typeStyle =
33
33
  type === 'screen' ? styles.screen : styles[`${type}_${size}`];
34
- const actionColor = titleFlex
35
- ? theme.colors.primary
36
- : theme.colors.text.default;
37
- const actionBackground = titleFlex
38
- ? theme.colors.primary + '0F'
39
- : Colors.black_06;
40
- const actionSize = titleFlex ? scaleSize(22) : scaleSize(18);
41
34
  const titleWeight = type === 'screen' ? 'Semibold' : 'Bold';
42
- const marginStyle = type === 'section' ? {marginTop: Spacing.M} : {};
35
+ const marginStyle =
36
+ type === 'section' && usePadding ? {marginTop: Spacing.S} : {};
43
37
  const numberOfLines = type === 'section' ? 1 : 2;
44
38
 
45
39
  const renderAction = () => {
46
- if (!actionTitle && !titleFlex && textLines > 1) return null;
47
-
48
40
  return !!actionTitle && titleFlex ? (
49
41
  <TouchableOpacity onPress={onPressAction}>
50
42
  <Text typography={'action_s'} color={theme.colors.primary}>
@@ -54,20 +46,38 @@ const Title: FC<TitleProps> = ({
54
46
  ) : (
55
47
  <TouchableOpacity
56
48
  style={[
57
- {backgroundColor: actionBackground},
49
+ {backgroundColor: theme.colors.primary + '0F'},
58
50
  styles.actionIcon,
59
- {width: actionSize, height: actionSize},
51
+ {width: scaleSize(22), height: scaleSize(22)},
60
52
  ]}
61
53
  onPress={onPressAction}>
62
54
  <Icon
63
- size={actionSize}
64
- color={actionColor}
55
+ size={scaleSize(22)}
56
+ color={theme.colors.primary}
65
57
  source={'arrow_chevron_right_small'}
66
58
  />
67
59
  </TouchableOpacity>
68
60
  );
69
61
  };
70
62
 
63
+ const renderSemiAction = () => {
64
+ if (textLines > 1) return null;
65
+ return (
66
+ <TouchableOpacity
67
+ style={[
68
+ {backgroundColor: Colors.black_06},
69
+ styles.actionIcon,
70
+ {width: scaleSize(18), height: scaleSize(18)},
71
+ ]}
72
+ onPress={onPressAction}>
73
+ <Icon
74
+ size={scaleSize(18)}
75
+ color={theme.colors.text.default}
76
+ source={'arrow_chevron_right_small'}
77
+ />
78
+ </TouchableOpacity>
79
+ );
80
+ };
71
81
  const onLayout = (e: LayoutChangeEvent) => {
72
82
  setContainerWidth(e.nativeEvent.layout.width);
73
83
  };
@@ -77,33 +87,43 @@ const Title: FC<TitleProps> = ({
77
87
  };
78
88
 
79
89
  return (
80
- <View onLayout={onLayout} style={styles.wrapper}>
81
- <View style={[styles.container, marginStyle]}>
82
- {!!icon && type !== 'screen' && (
83
- <Icon style={styles.icon} source={icon} />
84
- )}
85
- <RNText
86
- onTextLayout={onTextLayout}
87
- numberOfLines={numberOfLines}
88
- style={[
89
- typeStyle,
90
- flexStyle,
91
- styles.title,
92
- {
93
- fontFamily: `${theme.font}-${titleWeight}`,
94
- color: theme.colors.text.default,
90
+ <View onLayout={onLayout} style={[styles.wrapper, marginStyle]}>
91
+ {!!icon && type !== 'screen' && (
92
+ <Icon style={styles.icon} source={icon} />
93
+ )}
94
+ <View style={{flex: 1, flexDirection: 'row'}}>
95
+ <View style={styles.textContent}>
96
+ <View
97
+ style={{
98
+ flexDirection: 'row',
95
99
  maxWidth: containerWidth - scaleSize(22),
96
- },
97
- ]}>
98
- {title}
99
- </RNText>
100
- {showAction && type !== 'screen' && renderAction()}
100
+ }}>
101
+ <RNText
102
+ onTextLayout={onTextLayout}
103
+ numberOfLines={numberOfLines}
104
+ style={[
105
+ typeStyle,
106
+ {
107
+ fontFamily: `${theme.font}-${titleWeight}`,
108
+ color: theme.colors.text.default,
109
+ marginRight: Spacing.S,
110
+ },
111
+ ]}>
112
+ {title}
113
+ </RNText>
114
+ {!titleFlex && renderSemiAction()}
115
+ </View>
116
+ {!!description && type !== 'screen' && (
117
+ <Text
118
+ numberOfLines={1}
119
+ typography={'description_s'}
120
+ color={theme.colors.text.secondary}>
121
+ {description}
122
+ </Text>
123
+ )}
124
+ </View>
125
+ {showAction && titleFlex && type !== 'screen' && renderAction()}
101
126
  </View>
102
- {!!description && type !== 'screen' && (
103
- <Text typography={'description_s'} color={theme.colors.text.secondary}>
104
- {description}
105
- </Text>
106
- )}
107
127
  </View>
108
128
  );
109
129
  };
package/Title/styles.ts CHANGED
@@ -31,23 +31,22 @@ export default StyleSheet.create({
31
31
  fontSize: scaleSize(36),
32
32
  lineHeight: scaleSize(44),
33
33
  },
34
- title: {
35
- marginRight: Spacing.S,
36
- },
37
- container: {
38
- flexDirection: 'row',
39
- width: '100%',
40
- },
41
34
  actionIcon: {
42
35
  borderRadius: Radius.M,
43
36
  alignItems: 'center',
44
37
  justifyContent: 'center',
45
38
  },
46
39
  icon: {
47
- marginRight: Spacing.XS,
40
+ marginRight: Spacing.S,
48
41
  borderRadius: Radius.XS,
49
42
  },
50
43
  wrapper: {
51
44
  width: '100%',
45
+ flexDirection: 'row',
46
+ alignItems: 'center',
47
+ },
48
+ textContent: {
49
+ marginRight: Spacing.S,
50
+ flex: 1,
52
51
  },
53
52
  });
package/Title/types.ts CHANGED
@@ -48,4 +48,5 @@ export type TitleProps = {
48
48
  * Optional. If `true`, an action button or icon is displayed alongside the title.
49
49
  */
50
50
  showAction?: boolean;
51
+ usePadding?: boolean;
51
52
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@momo-kits/foundation",
3
- "version": "0.81.31",
3
+ "version": "0.81.32",
4
4
  "description": "React Native Component Kits",
5
5
  "main": "index.ts",
6
6
  "scripts": {