@originallyus/feedback-rn-sdk 3.1.1 → 3.1.2-beta.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/lib/commonjs/api/index.js +1 -1
- package/lib/commonjs/index.js +1 -1
- package/lib/commonjs/package.json +1 -0
- package/lib/commonjs/utils/MyFunction.js +1 -1
- package/lib/commonjs/utils/NetworkHelper.js +1 -1
- package/lib/commonjs/utils/const.js +1 -1
- package/lib/module/ContentUsefulness.js +302 -0
- package/lib/module/ContentUsefulness.js.map +1 -0
- package/lib/module/FeedbackSDK.js +461 -0
- package/lib/module/FeedbackSDK.js.map +1 -0
- package/lib/module/FeedbackSDKForm.js +280 -0
- package/lib/module/FeedbackSDKForm.js.map +1 -0
- package/lib/module/FeedbackSDKSplash.js +60 -0
- package/lib/module/FeedbackSDKSplash.js.map +1 -0
- package/lib/module/FeedbackSDKStyles.js +357 -0
- package/lib/module/FeedbackSDKStyles.js.map +1 -0
- package/lib/module/FeedbackSDKSuccess.js +57 -0
- package/lib/module/FeedbackSDKSuccess.js.map +1 -0
- package/lib/module/assets/CheckIcon.js +21 -0
- package/lib/module/assets/CheckIcon.js.map +1 -0
- package/lib/module/assets/CloseIcon.js +21 -0
- package/lib/module/assets/CloseIcon.js.map +1 -0
- package/lib/module/assets/ErrorIcon.js +23 -0
- package/lib/module/assets/ErrorIcon.js.map +1 -0
- package/lib/module/assets/PlusIcon.js +21 -0
- package/lib/module/assets/PlusIcon.js.map +1 -0
- package/lib/module/assets/StarIcon.js +21 -0
- package/lib/module/assets/StarIcon.js.map +1 -0
- package/lib/module/component/Button.js +49 -0
- package/lib/module/component/Button.js.map +1 -0
- package/lib/module/component/ButtonSubmit.js +196 -0
- package/lib/module/component/ButtonSubmit.js.map +1 -0
- package/lib/module/component/Input.js +174 -0
- package/lib/module/component/Input.js.map +1 -0
- package/lib/module/component/MultiSelectButtons.js +186 -0
- package/lib/module/component/MultiSelectButtons.js.map +1 -0
- package/lib/module/component/README.md +215 -0
- package/lib/module/component/Rating.js +169 -0
- package/lib/module/component/Rating.js.map +1 -0
- package/lib/module/component/RatingNumber.js +289 -0
- package/lib/module/component/RatingNumber.js.map +1 -0
- package/lib/module/component/Textarea.js +167 -0
- package/lib/module/component/Textarea.js.map +1 -0
- package/lib/module/component/YesNoButtons.js +185 -0
- package/lib/module/component/YesNoButtons.js.map +1 -0
- package/lib/module/index.js +13 -0
- package/lib/module/index.js.map +1 -0
- package/lib/module/package.json +1 -0
- package/lib/module/service/feedbackService.js +77 -0
- package/lib/module/service/feedbackService.js.map +1 -0
- package/lib/module/utils/common.js +240 -0
- package/lib/module/utils/common.js.map +1 -0
- package/lib/module/utils/constants.js +49 -0
- package/lib/module/utils/constants.js.map +1 -0
- package/lib/module/utils/index.js +140 -0
- package/lib/module/utils/index.js.map +1 -0
- package/lib/module/utils/networking.js +164 -0
- package/lib/module/utils/networking.js.map +1 -0
- package/package.json +10 -120
|
@@ -0,0 +1,196 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import * as f from "../utils/common.js";
|
|
4
|
+
import { useMemo } from 'react';
|
|
5
|
+
import { ActivityIndicator, Pressable, StyleSheet, Text, View } from 'react-native';
|
|
6
|
+
import { BG_BUTTON_SECONDARY, BG_DISABLED, BG_DISABLED_SECONDARY, ERROR_COLOR, PRESSED_COLOR, PRIMARY_COLOR, TEXT_DISABLED, TEXT_WHITE } from "../utils/constants.js";
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Visual style variant for `ButtonSubmit`.
|
|
10
|
+
*
|
|
11
|
+
* - `'primary'` – solid primary background with white text.
|
|
12
|
+
* - `'secondary'` – light background with colored border and text.
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* Props for the form submit button.
|
|
17
|
+
*
|
|
18
|
+
* This is a higher-level button component that supports loading state,
|
|
19
|
+
* primary/secondary variants, full-width layout and basic theming.
|
|
20
|
+
*/
|
|
21
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
22
|
+
function ButtonSubmit({
|
|
23
|
+
onPress,
|
|
24
|
+
title,
|
|
25
|
+
leftIcon,
|
|
26
|
+
variant = 'primary',
|
|
27
|
+
fullWidth = true,
|
|
28
|
+
disabled = false,
|
|
29
|
+
loading = false,
|
|
30
|
+
appWidth,
|
|
31
|
+
isTabletInstrusive,
|
|
32
|
+
fontFamily,
|
|
33
|
+
fontSize = 16,
|
|
34
|
+
textColor: textColorProp,
|
|
35
|
+
backgroundColor: backgroundColorProp,
|
|
36
|
+
pressedColor: pressedColorProp,
|
|
37
|
+
disabledBackgroundColor: disabledBgProp,
|
|
38
|
+
disabledTextColor: disabledTextProp,
|
|
39
|
+
borderColor: borderColorProp,
|
|
40
|
+
borderWidth: borderWidthProp,
|
|
41
|
+
containerStyle,
|
|
42
|
+
style,
|
|
43
|
+
textStyle,
|
|
44
|
+
numberOfLines = 1
|
|
45
|
+
}) {
|
|
46
|
+
// const [pressed, setPressed] = useState(false)
|
|
47
|
+
const isPrimary = variant === 'primary';
|
|
48
|
+
const currentStyles = useMemo(() => {
|
|
49
|
+
const base = (() => {
|
|
50
|
+
if (isPrimary) {
|
|
51
|
+
return {
|
|
52
|
+
bg: PRIMARY_COLOR,
|
|
53
|
+
disabledBg: BG_DISABLED,
|
|
54
|
+
textColor: TEXT_WHITE,
|
|
55
|
+
border: undefined,
|
|
56
|
+
borderW: 0,
|
|
57
|
+
pressedBg: pressedColorProp ?? PRESSED_COLOR,
|
|
58
|
+
pressedText: TEXT_WHITE,
|
|
59
|
+
pressedBorder: undefined
|
|
60
|
+
};
|
|
61
|
+
}
|
|
62
|
+
return {
|
|
63
|
+
bg: BG_BUTTON_SECONDARY,
|
|
64
|
+
disabledBg: BG_DISABLED_SECONDARY,
|
|
65
|
+
textColor: ERROR_COLOR,
|
|
66
|
+
border: borderColorProp ?? ERROR_COLOR,
|
|
67
|
+
borderW: borderWidthProp ?? 1,
|
|
68
|
+
pressedBg: BG_BUTTON_SECONDARY,
|
|
69
|
+
pressedText: pressedColorProp ?? PRESSED_COLOR,
|
|
70
|
+
pressedBorder: pressedColorProp ?? PRESSED_COLOR
|
|
71
|
+
};
|
|
72
|
+
})();
|
|
73
|
+
if (disabled || loading) {
|
|
74
|
+
return {
|
|
75
|
+
bg: disabledBgProp ?? base.disabledBg,
|
|
76
|
+
text: disabledTextProp ?? TEXT_DISABLED,
|
|
77
|
+
border: isPrimary ? undefined : disabledTextProp ?? TEXT_DISABLED,
|
|
78
|
+
borderW: base.borderW
|
|
79
|
+
};
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
// if (pressed) {
|
|
83
|
+
// return {
|
|
84
|
+
// bg: base.pressedBg,
|
|
85
|
+
// text: base.pressedText,
|
|
86
|
+
// border: base.pressedBorder,
|
|
87
|
+
// borderW: base.borderW,
|
|
88
|
+
// }
|
|
89
|
+
// }
|
|
90
|
+
|
|
91
|
+
return {
|
|
92
|
+
bg: backgroundColorProp ?? base.bg,
|
|
93
|
+
text: textColorProp ?? base.textColor,
|
|
94
|
+
border: base.border,
|
|
95
|
+
borderW: base.borderW
|
|
96
|
+
};
|
|
97
|
+
}, [isPrimary, disabled, loading, pressedColorProp, borderColorProp, borderWidthProp, disabledBgProp, disabledTextProp, backgroundColorProp, textColorProp]);
|
|
98
|
+
const layout = useMemo(() => {
|
|
99
|
+
const widthStyle = (() => {
|
|
100
|
+
if (isTabletInstrusive) return {
|
|
101
|
+
width: 200
|
|
102
|
+
};
|
|
103
|
+
if (fullWidth) return {
|
|
104
|
+
width: '100%'
|
|
105
|
+
};
|
|
106
|
+
return {
|
|
107
|
+
alignSelf: 'flex-start'
|
|
108
|
+
};
|
|
109
|
+
})();
|
|
110
|
+
const loaderColor = (() => {
|
|
111
|
+
if (disabled) return TEXT_DISABLED;
|
|
112
|
+
if (isPrimary) return TEXT_WHITE;
|
|
113
|
+
return ERROR_COLOR;
|
|
114
|
+
})();
|
|
115
|
+
return {
|
|
116
|
+
width: widthStyle,
|
|
117
|
+
loaderColor,
|
|
118
|
+
opacity: loading ? 0 : 1,
|
|
119
|
+
marginTop: f.w_p(appWidth, 10)
|
|
120
|
+
};
|
|
121
|
+
}, [isTabletInstrusive, fullWidth, disabled, isPrimary, loading, appWidth]);
|
|
122
|
+
return /*#__PURE__*/_jsx(View, {
|
|
123
|
+
style: [styles.container, {
|
|
124
|
+
marginTop: layout.marginTop
|
|
125
|
+
}, containerStyle],
|
|
126
|
+
children: /*#__PURE__*/_jsxs(Pressable, {
|
|
127
|
+
onPress: disabled || loading ? undefined : onPress
|
|
128
|
+
// onPressIn={() => setPressed(true)}
|
|
129
|
+
// onPressOut={() => setPressed(false)}
|
|
130
|
+
,
|
|
131
|
+
disabled: disabled,
|
|
132
|
+
style: [styles.button, layout.width, {
|
|
133
|
+
backgroundColor: currentStyles.bg,
|
|
134
|
+
borderWidth: currentStyles.borderW,
|
|
135
|
+
borderColor: currentStyles.border
|
|
136
|
+
}, style],
|
|
137
|
+
children: [loading && /*#__PURE__*/_jsx(ActivityIndicator, {
|
|
138
|
+
style: styles.loader,
|
|
139
|
+
color: layout.loaderColor
|
|
140
|
+
}), /*#__PURE__*/_jsxs(View, {
|
|
141
|
+
style: styles.contentRow,
|
|
142
|
+
children: [leftIcon != null && leftIcon !== '' && /*#__PURE__*/_jsx(Text, {
|
|
143
|
+
style: [styles.text, styles.leftIcon, {
|
|
144
|
+
fontSize,
|
|
145
|
+
fontFamily,
|
|
146
|
+
color: currentStyles.text,
|
|
147
|
+
opacity: layout.opacity
|
|
148
|
+
}, textStyle],
|
|
149
|
+
children: leftIcon
|
|
150
|
+
}), /*#__PURE__*/_jsx(Text, {
|
|
151
|
+
style: [styles.text, {
|
|
152
|
+
fontSize,
|
|
153
|
+
fontFamily,
|
|
154
|
+
color: currentStyles.text,
|
|
155
|
+
opacity: layout.opacity
|
|
156
|
+
}, textStyle],
|
|
157
|
+
numberOfLines: numberOfLines,
|
|
158
|
+
ellipsizeMode: "tail",
|
|
159
|
+
children: title
|
|
160
|
+
})]
|
|
161
|
+
})]
|
|
162
|
+
})
|
|
163
|
+
});
|
|
164
|
+
}
|
|
165
|
+
export default ButtonSubmit;
|
|
166
|
+
const styles = StyleSheet.create({
|
|
167
|
+
container: {
|
|
168
|
+
width: '100%'
|
|
169
|
+
},
|
|
170
|
+
button: {
|
|
171
|
+
borderRadius: 8,
|
|
172
|
+
paddingVertical: 14,
|
|
173
|
+
paddingHorizontal: 20,
|
|
174
|
+
justifyContent: 'center',
|
|
175
|
+
alignItems: 'center',
|
|
176
|
+
minHeight: 44,
|
|
177
|
+
maxWidth: '100%'
|
|
178
|
+
},
|
|
179
|
+
loader: {
|
|
180
|
+
position: 'absolute'
|
|
181
|
+
},
|
|
182
|
+
contentRow: {
|
|
183
|
+
flexDirection: 'row',
|
|
184
|
+
alignItems: 'center',
|
|
185
|
+
gap: 6
|
|
186
|
+
},
|
|
187
|
+
leftIcon: {
|
|
188
|
+
marginRight: 0,
|
|
189
|
+
minWidth: 20
|
|
190
|
+
},
|
|
191
|
+
text: {
|
|
192
|
+
fontWeight: '600',
|
|
193
|
+
flexShrink: 1
|
|
194
|
+
}
|
|
195
|
+
});
|
|
196
|
+
//# sourceMappingURL=ButtonSubmit.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["f","useMemo","ActivityIndicator","Pressable","StyleSheet","Text","View","BG_BUTTON_SECONDARY","BG_DISABLED","BG_DISABLED_SECONDARY","ERROR_COLOR","PRESSED_COLOR","PRIMARY_COLOR","TEXT_DISABLED","TEXT_WHITE","jsx","_jsx","jsxs","_jsxs","ButtonSubmit","onPress","title","leftIcon","variant","fullWidth","disabled","loading","appWidth","isTabletInstrusive","fontFamily","fontSize","textColor","textColorProp","backgroundColor","backgroundColorProp","pressedColor","pressedColorProp","disabledBackgroundColor","disabledBgProp","disabledTextColor","disabledTextProp","borderColor","borderColorProp","borderWidth","borderWidthProp","containerStyle","style","textStyle","numberOfLines","isPrimary","currentStyles","base","bg","disabledBg","border","undefined","borderW","pressedBg","pressedText","pressedBorder","text","layout","widthStyle","width","alignSelf","loaderColor","opacity","marginTop","w_p","styles","container","children","button","loader","color","contentRow","ellipsizeMode","create","borderRadius","paddingVertical","paddingHorizontal","justifyContent","alignItems","minHeight","maxWidth","position","flexDirection","gap","marginRight","minWidth","fontWeight","flexShrink"],"sourceRoot":"../../../src","sources":["component/ButtonSubmit.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useMemo, useState } from 'react';
|
|
4
|
+
import { View, Text, StyleSheet, TextInput } from 'react-native';
|
|
5
|
+
import * as f from "../utils/common.js";
|
|
6
|
+
import { BG_DEFAULT, BORDER_FOCUS, BORDER_SECONDARY, ERROR_COLOR, TEXT_DARK, TEXT_NOTE, TEXT_PLACEHOLDER } from "../utils/constants.js";
|
|
7
|
+
import ErrorIcon from "../assets/ErrorIcon.js";
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Props for the single-line `Input` component.
|
|
11
|
+
*
|
|
12
|
+
* Renders a label, single-line text input, optional note, error,
|
|
13
|
+
* and an optional character counter.
|
|
14
|
+
*/
|
|
15
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
16
|
+
const DEFAULT_BG = BG_DEFAULT;
|
|
17
|
+
const DEFAULT_BORDER = BORDER_SECONDARY;
|
|
18
|
+
const DEFAULT_FOCUS_BORDER = BORDER_FOCUS;
|
|
19
|
+
const DEFAULT_TEXT = TEXT_DARK;
|
|
20
|
+
const DEFAULT_PLACEHOLDER = TEXT_PLACEHOLDER;
|
|
21
|
+
const DEFAULT_COUNTER = TEXT_PLACEHOLDER;
|
|
22
|
+
const DEFAULT_NOTE = TEXT_NOTE;
|
|
23
|
+
const DEFAULT_ERROR = ERROR_COLOR;
|
|
24
|
+
function Input({
|
|
25
|
+
value,
|
|
26
|
+
onChangeText,
|
|
27
|
+
placeholder = 'Placeholder',
|
|
28
|
+
label,
|
|
29
|
+
note,
|
|
30
|
+
error,
|
|
31
|
+
maxLength,
|
|
32
|
+
showCounter = true,
|
|
33
|
+
appWidth,
|
|
34
|
+
backgroundColor = DEFAULT_BG,
|
|
35
|
+
borderColor = DEFAULT_BORDER,
|
|
36
|
+
focusBackgroundColor = DEFAULT_BG,
|
|
37
|
+
focusBorderColor = DEFAULT_FOCUS_BORDER,
|
|
38
|
+
errorBorderColor = DEFAULT_ERROR,
|
|
39
|
+
fontFamily,
|
|
40
|
+
fontSize = 16,
|
|
41
|
+
placeholderTextColor = DEFAULT_PLACEHOLDER,
|
|
42
|
+
textColor = DEFAULT_TEXT,
|
|
43
|
+
labelStyle,
|
|
44
|
+
noteStyle,
|
|
45
|
+
errorStyle,
|
|
46
|
+
counterStyle,
|
|
47
|
+
style
|
|
48
|
+
}) {
|
|
49
|
+
const [focused, setFocused] = useState(false);
|
|
50
|
+
const length = value.length;
|
|
51
|
+
const hasError = useMemo(() => error != null && error !== '', [error]);
|
|
52
|
+
const showCounterEl = useMemo(() => maxLength != null && showCounter, [maxLength, showCounter]);
|
|
53
|
+
const effectiveBorderColor = useMemo(() => {
|
|
54
|
+
if (hasError) return errorBorderColor;
|
|
55
|
+
if (focused) return focusBorderColor;
|
|
56
|
+
return borderColor;
|
|
57
|
+
}, [hasError, focused, errorBorderColor, focusBorderColor, borderColor]);
|
|
58
|
+
const inputContainerStyle = useMemo(() => [styles.inputWrapper, {
|
|
59
|
+
paddingHorizontal: f.w_p(appWidth, 8),
|
|
60
|
+
paddingVertical: 10,
|
|
61
|
+
borderRadius: f.isTablet ? 8 : 8,
|
|
62
|
+
backgroundColor: focused ? focusBackgroundColor : backgroundColor,
|
|
63
|
+
borderColor: effectiveBorderColor,
|
|
64
|
+
borderWidth: 1
|
|
65
|
+
}], [appWidth, focused, focusBackgroundColor, backgroundColor, effectiveBorderColor]);
|
|
66
|
+
const textInputStyle = useMemo(() => [styles.input, {
|
|
67
|
+
fontFamily,
|
|
68
|
+
fontSize,
|
|
69
|
+
color: textColor,
|
|
70
|
+
paddingRight: showCounterEl ? 48 : 0
|
|
71
|
+
}], [fontFamily, fontSize, textColor, showCounterEl]);
|
|
72
|
+
return /*#__PURE__*/_jsxs(View, {
|
|
73
|
+
style: [styles.wrapper, style],
|
|
74
|
+
children: [label != null && label !== '' && /*#__PURE__*/_jsx(Text, {
|
|
75
|
+
style: [styles.label, labelStyle],
|
|
76
|
+
children: label
|
|
77
|
+
}), /*#__PURE__*/_jsxs(View, {
|
|
78
|
+
style: inputContainerStyle,
|
|
79
|
+
children: [/*#__PURE__*/_jsx(TextInput, {
|
|
80
|
+
placeholder: placeholder,
|
|
81
|
+
placeholderTextColor: placeholderTextColor,
|
|
82
|
+
style: textInputStyle,
|
|
83
|
+
value: value,
|
|
84
|
+
onChangeText: text => {
|
|
85
|
+
if (maxLength == null || text.length <= maxLength) {
|
|
86
|
+
onChangeText(text);
|
|
87
|
+
} else {
|
|
88
|
+
onChangeText(text.slice(0, maxLength));
|
|
89
|
+
}
|
|
90
|
+
},
|
|
91
|
+
onFocus: () => setFocused(true),
|
|
92
|
+
onBlur: () => setFocused(false),
|
|
93
|
+
autoCorrect: false
|
|
94
|
+
}), showCounterEl && /*#__PURE__*/_jsx(View, {
|
|
95
|
+
style: styles.counterWrapper,
|
|
96
|
+
pointerEvents: "none",
|
|
97
|
+
children: /*#__PURE__*/_jsxs(Text, {
|
|
98
|
+
style: [styles.counter, {
|
|
99
|
+
color: DEFAULT_COUNTER
|
|
100
|
+
}, counterStyle],
|
|
101
|
+
children: [length, "/", maxLength]
|
|
102
|
+
})
|
|
103
|
+
})]
|
|
104
|
+
}), note != null && note !== '' && /*#__PURE__*/_jsx(Text, {
|
|
105
|
+
style: [styles.note, {
|
|
106
|
+
color: DEFAULT_NOTE
|
|
107
|
+
}, noteStyle],
|
|
108
|
+
children: note
|
|
109
|
+
}), hasError && /*#__PURE__*/_jsxs(View, {
|
|
110
|
+
style: styles.errorWrap,
|
|
111
|
+
children: [/*#__PURE__*/_jsx(ErrorIcon, {
|
|
112
|
+
size: 20,
|
|
113
|
+
color: ERROR_COLOR
|
|
114
|
+
}), /*#__PURE__*/_jsx(Text, {
|
|
115
|
+
style: [styles.error, {
|
|
116
|
+
color: DEFAULT_ERROR
|
|
117
|
+
}, errorStyle],
|
|
118
|
+
children: error
|
|
119
|
+
})]
|
|
120
|
+
})]
|
|
121
|
+
});
|
|
122
|
+
}
|
|
123
|
+
export default Input;
|
|
124
|
+
const styles = StyleSheet.create({
|
|
125
|
+
wrapper: {
|
|
126
|
+
width: '100%'
|
|
127
|
+
},
|
|
128
|
+
label: {
|
|
129
|
+
fontSize: 16,
|
|
130
|
+
fontWeight: '600',
|
|
131
|
+
color: '#14181C',
|
|
132
|
+
marginBottom: 8,
|
|
133
|
+
lineHeight: 24,
|
|
134
|
+
letterSpacing: 0
|
|
135
|
+
},
|
|
136
|
+
inputWrapper: {
|
|
137
|
+
width: '100%',
|
|
138
|
+
position: 'relative',
|
|
139
|
+
flexDirection: 'row',
|
|
140
|
+
alignItems: 'center'
|
|
141
|
+
},
|
|
142
|
+
input: {
|
|
143
|
+
flex: 1,
|
|
144
|
+
padding: 0,
|
|
145
|
+
minHeight: 20
|
|
146
|
+
},
|
|
147
|
+
counterWrapper: {
|
|
148
|
+
position: 'absolute',
|
|
149
|
+
right: 12,
|
|
150
|
+
top: 0,
|
|
151
|
+
bottom: 0,
|
|
152
|
+
justifyContent: 'center'
|
|
153
|
+
},
|
|
154
|
+
counter: {
|
|
155
|
+
fontSize: 12
|
|
156
|
+
},
|
|
157
|
+
note: {
|
|
158
|
+
fontSize: 12,
|
|
159
|
+
marginTop: 8
|
|
160
|
+
},
|
|
161
|
+
errorWrap: {
|
|
162
|
+
flexDirection: 'row',
|
|
163
|
+
alignItems: 'center',
|
|
164
|
+
marginTop: 8,
|
|
165
|
+
gap: 6
|
|
166
|
+
},
|
|
167
|
+
error: {
|
|
168
|
+
fontSize: 14,
|
|
169
|
+
lineHeight: 20,
|
|
170
|
+
flex: 1,
|
|
171
|
+
fontWeight: '400'
|
|
172
|
+
}
|
|
173
|
+
});
|
|
174
|
+
//# sourceMappingURL=Input.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useMemo","useState","View","Text","StyleSheet","TextInput","f","BG_DEFAULT","BORDER_FOCUS","BORDER_SECONDARY","ERROR_COLOR","TEXT_DARK","TEXT_NOTE","TEXT_PLACEHOLDER","ErrorIcon","jsx","_jsx","jsxs","_jsxs","DEFAULT_BG","DEFAULT_BORDER","DEFAULT_FOCUS_BORDER","DEFAULT_TEXT","DEFAULT_PLACEHOLDER","DEFAULT_COUNTER","DEFAULT_NOTE","DEFAULT_ERROR","Input","value","onChangeText","placeholder","label","note","error","maxLength","showCounter","appWidth","backgroundColor","borderColor","focusBackgroundColor","focusBorderColor","errorBorderColor","fontFamily","fontSize","placeholderTextColor","textColor","labelStyle","noteStyle","errorStyle","counterStyle","style","focused","setFocused","length","hasError","showCounterEl","effectiveBorderColor","inputContainerStyle","styles","inputWrapper","paddingHorizontal","w_p","paddingVertical","borderRadius","isTablet","borderWidth","textInputStyle","input","color","paddingRight","wrapper","children","text","slice","onFocus","onBlur","autoCorrect","counterWrapper","pointerEvents","counter","errorWrap","size","create","width","fontWeight","marginBottom","lineHeight","letterSpacing","position","flexDirection","alignItems","flex","padding","minHeight","right","top","bottom","justifyContent","marginTop","gap"],"sourceRoot":"../../../src","sources":["component/Input.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useMemo } from 'react';
|
|
4
|
+
import { View, Text, StyleSheet } from 'react-native';
|
|
5
|
+
import * as f from "../utils/common.js";
|
|
6
|
+
import ButtonSubmit from "./ButtonSubmit.js";
|
|
7
|
+
import CheckIcon from "../assets/CheckIcon.js";
|
|
8
|
+
import PlusIcon from "../assets/PlusIcon.js";
|
|
9
|
+
import { BG_DEFAULT, BG_SECONDARY, BORDER_DEFAULT, BORDER_SELECTED, ERROR_COLOR, PRIMARY_COLOR, TEXT_DARK, TEXT_DEFAULT, TEXT_WHITE } from "../utils/constants.js";
|
|
10
|
+
import ErrorIcon from "../assets/ErrorIcon.js";
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Visual variant for selected tags in `MultiSelectButtons`.
|
|
14
|
+
*
|
|
15
|
+
* - `'primary'` – solid primary background with white text.
|
|
16
|
+
* - `'secondary'` – light background with colored border and dark text.
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* Single option for `MultiSelectButtons`.
|
|
21
|
+
*/
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* Props for the `MultiSelectButtons` component.
|
|
25
|
+
*
|
|
26
|
+
* Renders a question and a wrap layout of tag-like buttons allowing multiple selections.
|
|
27
|
+
*/
|
|
28
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
29
|
+
function MultiSelectButtons({
|
|
30
|
+
question,
|
|
31
|
+
note,
|
|
32
|
+
noteStyle,
|
|
33
|
+
options,
|
|
34
|
+
value,
|
|
35
|
+
onSelect,
|
|
36
|
+
appWidth,
|
|
37
|
+
selectedVariant = 'secondary',
|
|
38
|
+
error,
|
|
39
|
+
selectedBackgroundColor,
|
|
40
|
+
selectedBorderColor,
|
|
41
|
+
selectedTextColor,
|
|
42
|
+
questionStyle,
|
|
43
|
+
errorStyle,
|
|
44
|
+
errorColor = ERROR_COLOR,
|
|
45
|
+
iconSize = 16,
|
|
46
|
+
optionNumberOfLines = 1,
|
|
47
|
+
style,
|
|
48
|
+
fontFamilyOption
|
|
49
|
+
}) {
|
|
50
|
+
const hasError = useMemo(() => error != null && error !== '', [error]);
|
|
51
|
+
const selectedSet = useMemo(() => new Set(value), [value]);
|
|
52
|
+
const isPrimary = selectedVariant === 'primary';
|
|
53
|
+
const selectedBg = useMemo(() => selectedBackgroundColor ?? (isPrimary ? PRIMARY_COLOR : BG_SECONDARY), [selectedBackgroundColor, isPrimary]);
|
|
54
|
+
const selectedBorder = useMemo(() => isPrimary ? selectedBg : selectedBorderColor ?? BORDER_SELECTED, [isPrimary, selectedBg, selectedBorderColor]);
|
|
55
|
+
const selectedText = useMemo(() => selectedTextColor ?? (isPrimary ? TEXT_WHITE : TEXT_DEFAULT), [selectedTextColor, isPrimary]);
|
|
56
|
+
const toggle = optionValue => {
|
|
57
|
+
if (selectedSet.has(optionValue)) {
|
|
58
|
+
onSelect(value.filter(v => v !== optionValue));
|
|
59
|
+
} else {
|
|
60
|
+
onSelect([...value, optionValue]);
|
|
61
|
+
}
|
|
62
|
+
f.triggerHaptic();
|
|
63
|
+
};
|
|
64
|
+
const marginTop = useMemo(() => [styles.optionsRow, {
|
|
65
|
+
marginTop: 8 // f.w_p(appWidth, 8)
|
|
66
|
+
}], []);
|
|
67
|
+
return /*#__PURE__*/_jsxs(View, {
|
|
68
|
+
style: [styles.wrapper, style],
|
|
69
|
+
children: [question != null && question !== '' && /*#__PURE__*/_jsx(Text, {
|
|
70
|
+
style: [styles.question, questionStyle],
|
|
71
|
+
children: question
|
|
72
|
+
}), note != null && note !== '' && /*#__PURE__*/_jsx(Text, {
|
|
73
|
+
style: [styles.note, noteStyle],
|
|
74
|
+
children: note
|
|
75
|
+
}), /*#__PURE__*/_jsx(View, {
|
|
76
|
+
style: marginTop,
|
|
77
|
+
children: options.map(opt => {
|
|
78
|
+
const isSelected = selectedSet.has(opt.value);
|
|
79
|
+
const buttonStyles = (() => {
|
|
80
|
+
if (isSelected) {
|
|
81
|
+
return {
|
|
82
|
+
bg: selectedBg,
|
|
83
|
+
text: selectedText,
|
|
84
|
+
border: selectedBorder
|
|
85
|
+
};
|
|
86
|
+
}
|
|
87
|
+
// if (hasError) {
|
|
88
|
+
// return {bg: BG_DEFAULT, text: errorColor, border: errorColor}
|
|
89
|
+
// }
|
|
90
|
+
return {
|
|
91
|
+
bg: BG_DEFAULT,
|
|
92
|
+
text: TEXT_DARK,
|
|
93
|
+
border: BORDER_DEFAULT
|
|
94
|
+
};
|
|
95
|
+
})();
|
|
96
|
+
return /*#__PURE__*/_jsx(View, {
|
|
97
|
+
style: styles.optionSlot,
|
|
98
|
+
children: /*#__PURE__*/_jsx(ButtonSubmit, {
|
|
99
|
+
appWidth: appWidth,
|
|
100
|
+
title: opt.label,
|
|
101
|
+
leftIcon: isSelected ? /*#__PURE__*/_jsx(CheckIcon, {
|
|
102
|
+
size: iconSize,
|
|
103
|
+
color: buttonStyles.text
|
|
104
|
+
}) : /*#__PURE__*/_jsx(PlusIcon, {
|
|
105
|
+
size: iconSize,
|
|
106
|
+
color: buttonStyles.text
|
|
107
|
+
}),
|
|
108
|
+
onPress: () => toggle(opt.value),
|
|
109
|
+
variant: "secondary",
|
|
110
|
+
fullWidth: false,
|
|
111
|
+
backgroundColor: buttonStyles.bg,
|
|
112
|
+
textColor: buttonStyles.text,
|
|
113
|
+
borderColor: buttonStyles.border,
|
|
114
|
+
borderWidth: isSelected ? 2 : 1,
|
|
115
|
+
containerStyle: styles.tagContainer,
|
|
116
|
+
numberOfLines: optionNumberOfLines,
|
|
117
|
+
style: styles.tagButton,
|
|
118
|
+
fontFamily: fontFamilyOption
|
|
119
|
+
})
|
|
120
|
+
}, opt.value);
|
|
121
|
+
})
|
|
122
|
+
}), hasError && /*#__PURE__*/_jsxs(View, {
|
|
123
|
+
style: styles.errorRow,
|
|
124
|
+
children: [/*#__PURE__*/_jsx(ErrorIcon, {
|
|
125
|
+
size: 20,
|
|
126
|
+
color: ERROR_COLOR
|
|
127
|
+
}), /*#__PURE__*/_jsx(Text, {
|
|
128
|
+
style: [styles.errorText, {
|
|
129
|
+
color: errorColor
|
|
130
|
+
}, errorStyle],
|
|
131
|
+
children: error
|
|
132
|
+
})]
|
|
133
|
+
})]
|
|
134
|
+
});
|
|
135
|
+
}
|
|
136
|
+
export default MultiSelectButtons;
|
|
137
|
+
const styles = StyleSheet.create({
|
|
138
|
+
wrapper: {
|
|
139
|
+
width: '100%'
|
|
140
|
+
},
|
|
141
|
+
question: {
|
|
142
|
+
fontSize: 16,
|
|
143
|
+
fontWeight: 600,
|
|
144
|
+
color: '#14181C',
|
|
145
|
+
lineHeight: 24,
|
|
146
|
+
letterSpacing: 0
|
|
147
|
+
// marginBottom: 8,
|
|
148
|
+
},
|
|
149
|
+
note: {
|
|
150
|
+
fontSize: 12,
|
|
151
|
+
color: '#666666',
|
|
152
|
+
marginBottom: 10
|
|
153
|
+
},
|
|
154
|
+
optionsRow: {
|
|
155
|
+
flexDirection: 'row',
|
|
156
|
+
flexWrap: 'wrap',
|
|
157
|
+
gap: 12
|
|
158
|
+
},
|
|
159
|
+
optionSlot: {
|
|
160
|
+
alignSelf: 'flex-start'
|
|
161
|
+
},
|
|
162
|
+
tagContainer: {
|
|
163
|
+
marginTop: 0
|
|
164
|
+
},
|
|
165
|
+
tagButton: {
|
|
166
|
+
paddingVertical: 8,
|
|
167
|
+
paddingHorizontal: 12
|
|
168
|
+
},
|
|
169
|
+
errorRow: {
|
|
170
|
+
flexDirection: 'row',
|
|
171
|
+
alignItems: 'center',
|
|
172
|
+
marginTop: 8,
|
|
173
|
+
gap: 6
|
|
174
|
+
},
|
|
175
|
+
errorIcon: {
|
|
176
|
+
fontSize: 14,
|
|
177
|
+
fontWeight: '700'
|
|
178
|
+
},
|
|
179
|
+
errorText: {
|
|
180
|
+
fontSize: 14,
|
|
181
|
+
flex: 1,
|
|
182
|
+
fontWeight: '400',
|
|
183
|
+
paddingRight: 6
|
|
184
|
+
}
|
|
185
|
+
});
|
|
186
|
+
//# sourceMappingURL=MultiSelectButtons.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useMemo","View","Text","StyleSheet","f","ButtonSubmit","CheckIcon","PlusIcon","BG_DEFAULT","BG_SECONDARY","BORDER_DEFAULT","BORDER_SELECTED","ERROR_COLOR","PRIMARY_COLOR","TEXT_DARK","TEXT_DEFAULT","TEXT_WHITE","ErrorIcon","jsx","_jsx","jsxs","_jsxs","MultiSelectButtons","question","note","noteStyle","options","value","onSelect","appWidth","selectedVariant","error","selectedBackgroundColor","selectedBorderColor","selectedTextColor","questionStyle","errorStyle","errorColor","iconSize","optionNumberOfLines","style","fontFamilyOption","hasError","selectedSet","Set","isPrimary","selectedBg","selectedBorder","selectedText","toggle","optionValue","has","filter","v","triggerHaptic","marginTop","styles","optionsRow","wrapper","children","map","opt","isSelected","buttonStyles","bg","text","border","optionSlot","title","label","leftIcon","size","color","onPress","variant","fullWidth","backgroundColor","textColor","borderColor","borderWidth","containerStyle","tagContainer","numberOfLines","tagButton","fontFamily","errorRow","errorText","create","width","fontSize","fontWeight","lineHeight","letterSpacing","marginBottom","flexDirection","flexWrap","gap","alignSelf","paddingVertical","paddingHorizontal","alignItems","errorIcon","flex","paddingRight"],"sourceRoot":"../../../src","sources":["component/MultiSelectButtons.tsx"],"mappings":"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","ignoreList":[]}
|