@momo-kits/foundation 0.77.8-beta.4 → 0.77.8-beta.6

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 (23) hide show
  1. package/Application/ModalScreen.tsx +6 -33
  2. package/Application/NavigationContainer.tsx +22 -1
  3. package/Application/types.ts +15 -16
  4. package/Button/index.tsx +20 -0
  5. package/Divider/index.tsx +2 -0
  6. package/Input/Input.tsx +126 -107
  7. package/Input/InputMoney.tsx +118 -111
  8. package/Input/InputSearch.tsx +129 -124
  9. package/Input/InputTextArea.tsx +126 -119
  10. package/Input/index.tsx +5 -0
  11. package/Layout/Card.tsx +9 -2
  12. package/Layout/Item.tsx +15 -2
  13. package/Layout/Screen.tsx +61 -3
  14. package/Layout/Section.tsx +36 -3
  15. package/Layout/types.ts +0 -37
  16. package/Loader/DotLoader.tsx +10 -12
  17. package/Loader/Loader.tsx +3 -4
  18. package/Loader/Spinner.tsx +8 -10
  19. package/Loader/types.ts +24 -0
  20. package/Popup/PopupNotify.tsx +2 -10
  21. package/Skeleton/types.ts +3 -0
  22. package/Text/utils.ts +1 -1
  23. package/package.json +1 -1
package/Input/InputMoney.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React, {FC, useContext, useRef, useState} from 'react';
1
+ import React, {FC, forwardRef, useContext, useRef, useState} from 'react';
2
2
  import {
3
3
  NativeSyntheticEvent,
4
4
  TextInput,
@@ -13,124 +13,131 @@ import {InputMoneyProps} from './index';
13
13
  import {Icon} from '../Icon';
14
14
  import {formatMoneyToNumber, formatNumberToMoney} from './utils';
15
15
 
16
- const InputMoney: FC<InputMoneyProps> = ({
17
- onChangeText,
18
- floatingValue,
19
- floatingIcon,
20
- size = 'small',
21
- onBlur,
22
- onFocus,
23
- errorMessage,
24
- icon,
25
- disabled,
26
- floatingIconColor,
27
- iconColor,
28
- required,
29
- errorSpacing,
30
- ...props
31
- }) => {
32
- const {theme} = useContext(ApplicationContext);
33
- const [focused, setFocused] = useState(false);
34
- const inputRef = useRef<any>(null);
35
- const [value, setValue] = useState('');
36
- const onClearText = () => {
37
- inputRef?.current?.clear();
38
- setValue('');
39
- onChangeText?.('');
40
- };
41
- const _onChangeText = (text: string) => {
42
- if (text.length < value.length && value.indexOf(text) === 0) {
43
- text = value.slice(0, -2) + 'đ';
44
- }
45
- const valueFormat = formatMoneyToNumber(text, 'đ');
46
- setValue(formatNumberToMoney(valueFormat, 'đ'));
47
- onChangeText?.(formatMoneyToNumber(text, 'đ').toString());
48
- };
16
+ const InputMoney: FC<InputMoneyProps> = forwardRef(
17
+ (
18
+ {
19
+ onChangeText,
20
+ floatingValue,
21
+ floatingIcon,
22
+ size = 'small',
23
+ onBlur,
24
+ onFocus,
25
+ errorMessage,
26
+ icon,
27
+ disabled,
28
+ floatingIconColor,
29
+ iconColor,
30
+ required,
31
+ errorSpacing,
32
+ ...props
33
+ },
34
+ ref,
35
+ ) => {
36
+ const {theme} = useContext(ApplicationContext);
37
+ const [focused, setFocused] = useState(false);
38
+ const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
39
+ const [value, setValue] = useState('');
40
+ const onClearText = () => {
41
+ inputRef?.current?.clear();
42
+ setValue('');
43
+ onChangeText?.('');
44
+ };
45
+ const _onChangeText = (text: string) => {
46
+ if (text.length < value.length && value.indexOf(text) === 0) {
47
+ text = value.slice(0, -2) + 'đ';
48
+ }
49
+ const valueFormat = formatMoneyToNumber(text, 'đ');
50
+ setValue(formatNumberToMoney(valueFormat, 'đ'));
51
+ onChangeText?.(formatMoneyToNumber(text, 'đ').toString());
52
+ };
49
53
 
50
- const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
51
- setFocused(true);
52
- onFocus?.(e);
53
- };
54
+ const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
55
+ setFocused(true);
56
+ onFocus?.(e);
57
+ };
54
58
 
55
- const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
56
- setFocused(false);
57
- onBlur?.(e);
58
- };
59
+ const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
60
+ setFocused(false);
61
+ onBlur?.(e);
62
+ };
59
63
 
60
- const renderInputView = () => {
61
- const disabledColor = theme.colors.text.disable;
62
- let textColor = theme.colors.text.default;
63
- let placeholderColor = theme.colors.text.hint;
64
- let iconTintColor = iconColor;
64
+ const renderInputView = () => {
65
+ const disabledColor = theme.colors.text.disable;
66
+ let textColor = theme.colors.text.default;
67
+ let placeholderColor = theme.colors.text.hint;
68
+ let iconTintColor = iconColor;
65
69
 
66
- if (disabled) {
67
- textColor = disabledColor;
68
- placeholderColor = disabledColor;
69
- iconTintColor = disabledColor;
70
- }
70
+ if (disabled) {
71
+ textColor = disabledColor;
72
+ placeholderColor = disabledColor;
73
+ iconTintColor = disabledColor;
74
+ }
71
75
 
72
- return (
73
- <View
74
- style={[
75
- styles.inputWrapper,
76
- {backgroundColor: theme.colors.background.surface},
77
- getSizeStyle(size),
78
- getBorderColor(theme, focused, errorMessage, disabled),
79
- ]}>
80
- <FloatingView
81
- floatingValue={floatingValue}
82
- floatingIconColor={floatingIconColor}
83
- disabled={disabled}
84
- required={required}
85
- floatingIcon={floatingIcon}
86
- />
87
- <View style={styles.inputView}>
88
- <TextInput
89
- {...props}
90
- accessibilityLabel={`TextInput`}
91
- editable={!disabled}
92
- textAlignVertical="top"
93
- ref={inputRef}
94
- keyboardType={'number-pad'}
95
- style={[
96
- styles.moneyInput,
97
- {
98
- color: textColor,
99
- },
100
- ]}
101
- value={value}
102
- onChangeText={_onChangeText}
103
- onFocus={_onFocus}
104
- onBlur={_onBlur}
105
- selectionColor={theme.colors.primary}
106
- placeholderTextColor={placeholderColor}
107
- placeholder={'0đ'}
76
+ return (
77
+ <View
78
+ style={[
79
+ styles.inputWrapper,
80
+ {backgroundColor: theme.colors.background.surface},
81
+ getSizeStyle(size),
82
+ getBorderColor(theme, focused, errorMessage, disabled),
83
+ ]}>
84
+ <FloatingView
85
+ floatingValue={floatingValue}
86
+ floatingIconColor={floatingIconColor}
87
+ disabled={disabled}
88
+ required={required}
89
+ floatingIcon={floatingIcon}
108
90
  />
91
+ <View style={styles.inputView}>
92
+ <TextInput
93
+ {...props}
94
+ accessibilityLabel={`TextInput`}
95
+ editable={!disabled}
96
+ textAlignVertical="top"
97
+ ref={inputRef}
98
+ keyboardType={'number-pad'}
99
+ style={[
100
+ styles.moneyInput,
101
+ {
102
+ color: textColor,
103
+ },
104
+ ]}
105
+ value={value}
106
+ onChangeText={_onChangeText}
107
+ onFocus={_onFocus}
108
+ onBlur={_onBlur}
109
+ selectionColor={theme.colors.primary}
110
+ placeholderTextColor={placeholderColor}
111
+ placeholder={'0đ'}
112
+ />
113
+ </View>
114
+ <View style={styles.iconView}>
115
+ {focused && (
116
+ <TouchableOpacity
117
+ style={styles.iconWrapper}
118
+ onPress={onClearText}>
119
+ <Icon
120
+ source="24_navigation_close_circle_full"
121
+ size={16}
122
+ color={theme.colors.text.hint}
123
+ />
124
+ </TouchableOpacity>
125
+ )}
126
+ {!!icon && <Icon color={iconTintColor} source={icon} />}
127
+ </View>
109
128
  </View>
110
- <View style={styles.iconView}>
111
- {focused && (
112
- <TouchableOpacity style={styles.iconWrapper} onPress={onClearText}>
113
- <Icon
114
- source="24_navigation_close_circle_full"
115
- size={16}
116
- color={theme.colors.text.hint}
117
- />
118
- </TouchableOpacity>
119
- )}
120
- {!!icon && <Icon color={iconTintColor} source={icon} />}
121
- </View>
129
+ );
130
+ };
131
+
132
+ return (
133
+ <View
134
+ style={styles.wrapper}
135
+ accessibilityLabel={`InputMoney/${floatingValue}`}>
136
+ {renderInputView()}
137
+ <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
122
138
  </View>
123
139
  );
124
- };
125
-
126
- return (
127
- <View
128
- style={styles.wrapper}
129
- accessibilityLabel={`InputMoney/${floatingValue}`}>
130
- {renderInputView()}
131
- <ErrorView errorMessage={errorMessage} errorSpacing={errorSpacing} />
132
- </View>
133
- );
134
- };
140
+ },
141
+ );
135
142
 
136
143
  export default InputMoney;
package/Input/InputSearch.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React, {FC, useContext, useRef, useState} from 'react';
1
+ import React, {FC, forwardRef, useContext, useRef, useState} from 'react';
2
2
  import {
3
3
  NativeSyntheticEvent,
4
4
  TextInput,
@@ -13,141 +13,146 @@ import {Icon} from '../Icon';
13
13
  import {Text} from '../Text';
14
14
  import {checkTyping} from './utils';
15
15
 
16
- const InputSearch: FC<InputSearchProps> = ({
17
- placeholder,
18
- onFocus,
19
- onBlur,
20
- iconColor,
21
- value,
22
- onChangeText,
23
- icon,
24
- buttonText = 'Hủy',
25
- showButtonText = true,
26
- showBorder = true,
27
- style,
28
- defaultValue,
29
- onPressButtonText,
30
- ...props
31
- }) => {
32
- const {theme} = useContext(ApplicationContext);
33
- const [focused, setFocused] = useState(false);
34
- const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
35
- const inputRef = useRef<any>(null);
36
- let iconTintColor = iconColor;
16
+ const InputSearch: FC<InputSearchProps> = forwardRef(
17
+ (
18
+ {
19
+ placeholder,
20
+ onFocus,
21
+ onBlur,
22
+ iconColor,
23
+ value,
24
+ onChangeText,
25
+ icon,
26
+ buttonText = 'Hủy',
27
+ showButtonText = true,
28
+ showBorder = true,
29
+ style,
30
+ defaultValue,
31
+ onPressButtonText,
32
+ ...props
33
+ },
34
+ ref,
35
+ ) => {
36
+ const {theme} = useContext(ApplicationContext);
37
+ const [focused, setFocused] = useState(false);
38
+ const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
39
+ const inputRef = (ref as React.RefObject<TextInput>) ?? useRef<TextInput>();
40
+ let iconTintColor = iconColor;
37
41
 
38
- const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
39
- setFocused(true);
40
- onFocus?.(e);
41
- };
42
+ const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
43
+ setFocused(true);
44
+ onFocus?.(e);
45
+ };
42
46
 
43
- const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
44
- setFocused(false);
45
- onBlur?.(e);
46
- };
47
+ const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
48
+ setFocused(false);
49
+ onBlur?.(e);
50
+ };
47
51
 
48
- const onClearText = () => {
49
- inputRef?.current?.clear();
50
- _onChangeText('');
51
- };
52
+ const onClearText = () => {
53
+ inputRef?.current?.clear();
54
+ _onChangeText('');
55
+ };
52
56
 
53
- const _onChangeText = (text: string) => {
54
- checkTyping(text, haveValue, setHaveValue);
55
- onChangeText?.(text);
56
- };
57
+ const _onChangeText = (text: string) => {
58
+ checkTyping(text, haveValue, setHaveValue);
59
+ onChangeText?.(text);
60
+ };
57
61
 
58
- const renderInputView = () => {
59
- let textColor = theme.colors.text.default;
60
- let placeholderColor = theme.colors.text.hint;
62
+ const renderInputView = () => {
63
+ let textColor = theme.colors.text.default;
64
+ let placeholderColor = theme.colors.text.hint;
61
65
 
62
- return (
63
- <TextInput
64
- {...props}
65
- accessibilityLabel={`TextInput`}
66
- textAlignVertical="top"
67
- ref={inputRef}
68
- style={[
69
- styles.searchInput,
70
- {
71
- color: textColor,
72
- },
73
- ]}
74
- value={value}
75
- onChangeText={_onChangeText}
76
- onFocus={_onFocus}
77
- onBlur={_onBlur}
78
- placeholder={placeholder}
79
- selectionColor={theme.colors.primary}
80
- placeholderTextColor={placeholderColor}
81
- />
82
- );
83
- };
66
+ return (
67
+ <TextInput
68
+ {...props}
69
+ accessibilityLabel={`TextInput`}
70
+ textAlignVertical="top"
71
+ ref={inputRef}
72
+ style={[
73
+ styles.searchInput,
74
+ {
75
+ color: textColor,
76
+ },
77
+ ]}
78
+ value={value}
79
+ onChangeText={_onChangeText}
80
+ onFocus={_onFocus}
81
+ onBlur={_onBlur}
82
+ placeholder={placeholder}
83
+ selectionColor={theme.colors.primary}
84
+ placeholderTextColor={placeholderColor}
85
+ />
86
+ );
87
+ };
84
88
 
85
- const renderIconView = () => {
89
+ const renderIconView = () => {
90
+ return (
91
+ <View
92
+ style={{
93
+ flexDirection: 'row',
94
+ }}>
95
+ {focused && haveValue && (
96
+ <TouchableOpacity style={styles.iconWrapper} onPress={onClearText}>
97
+ <Icon
98
+ source="24_navigation_close_circle_full"
99
+ size={16}
100
+ color={theme.colors.text.hint}
101
+ />
102
+ </TouchableOpacity>
103
+ )}
104
+ {!!icon && (
105
+ <View style={{flexDirection: 'row'}}>
106
+ <View
107
+ style={[
108
+ styles.divider,
109
+ {
110
+ backgroundColor: theme.colors.primary,
111
+ },
112
+ ]}
113
+ />
114
+ <Icon
115
+ color={iconTintColor}
116
+ source={icon}
117
+ style={styles.iconSearchInput}
118
+ />
119
+ </View>
120
+ )}
121
+ </View>
122
+ );
123
+ };
86
124
  return (
87
125
  <View
88
- style={{
89
- flexDirection: 'row',
90
- }}>
91
- {focused && haveValue && (
92
- <TouchableOpacity style={styles.iconWrapper} onPress={onClearText}>
93
- <Icon
94
- source="24_navigation_close_circle_full"
95
- size={16}
96
- color={theme.colors.text.hint}
97
- />
126
+ style={[style, styles.searchInputContainer]}
127
+ accessibilityLabel={`InputSearch/${placeholder}`}>
128
+ <View
129
+ style={[
130
+ styles.searchInputWrapper,
131
+ {
132
+ backgroundColor: theme.colors.background.surface,
133
+ borderColor: theme.colors.background.surface,
134
+ },
135
+ showBorder && {borderColor: theme.colors.border.default},
136
+ focused && {borderColor: theme.colors.primary},
137
+ ]}>
138
+ <Icon
139
+ source={'navigation_search'}
140
+ size={24}
141
+ color={theme.colors.text.hint}
142
+ />
143
+ {renderInputView()}
144
+ {renderIconView()}
145
+ </View>
146
+ {showButtonText && (
147
+ <TouchableOpacity onPress={onPressButtonText}>
148
+ <Text typography={'action_default'} style={styles.textButton}>
149
+ {buttonText}
150
+ </Text>
98
151
  </TouchableOpacity>
99
152
  )}
100
- {!!icon && (
101
- <View style={{flexDirection: 'row'}}>
102
- <View
103
- style={[
104
- styles.divider,
105
- {
106
- backgroundColor: theme.colors.primary,
107
- },
108
- ]}
109
- />
110
- <Icon
111
- color={iconTintColor}
112
- source={icon}
113
- style={styles.iconSearchInput}
114
- />
115
- </View>
116
- )}
117
153
  </View>
118
154
  );
119
- };
120
- return (
121
- <View
122
- style={[style, styles.searchInputContainer]}
123
- accessibilityLabel={`InputSearch/${placeholder}`}>
124
- <View
125
- style={[
126
- styles.searchInputWrapper,
127
- {
128
- backgroundColor: theme.colors.background.surface,
129
- borderColor: theme.colors.background.surface,
130
- },
131
- showBorder && {borderColor: theme.colors.border.default},
132
- focused && {borderColor: theme.colors.primary},
133
- ]}>
134
- <Icon
135
- source={'navigation_search'}
136
- size={24}
137
- color={theme.colors.text.hint}
138
- />
139
- {renderInputView()}
140
- {renderIconView()}
141
- </View>
142
- {showButtonText && (
143
- <TouchableOpacity onPress={onPressButtonText}>
144
- <Text typography={'action_default'} style={styles.textButton}>
145
- {buttonText}
146
- </Text>
147
- </TouchableOpacity>
148
- )}
149
- </View>
150
- );
151
- };
155
+ },
156
+ );
152
157
 
153
158
  export default InputSearch;