@widergy/mobile-ui 0.39.3 → 0.40.0
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/CHANGELOG.md +15 -0
- package/lib/components/UTStepFeedback/index.js +27 -5
- package/lib/components/UTStepFeedback/proptypes.js +2 -1
- package/lib/components/UTTextInput/components/InputLabel/index.js +11 -0
- package/lib/components/UTTextInput/components/InputLabel/styles.js +4 -1
- package/lib/components/UTTextInput/flavors/FilledInput/index.js +17 -2
- package/lib/components/UTTextInput/flavors/OutlinedInput/index.js +14 -1
- package/lib/components/UTTextInput/flavors/StandardInput/index.js +93 -76
- package/lib/components/UTTextInput/index.js +11 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,18 @@
|
|
|
1
|
+
# [0.40.0](https://github.com/widergy/mobile-ui/compare/v0.39.4...v0.40.0) (2023-10-31)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* adds step change functionality ([#252](https://github.com/widergy/mobile-ui/issues/252)) ([da14033](https://github.com/widergy/mobile-ui/commit/da14033a75deeb70b8992760fcf5f8961d609554))
|
|
7
|
+
|
|
8
|
+
## [0.39.4](https://github.com/widergy/mobile-ui/compare/v0.39.3...v0.39.4) (2023-10-26)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Bug Fixes
|
|
12
|
+
|
|
13
|
+
* add support for active admin config ([d992629](https://github.com/widergy/mobile-ui/commit/d992629424aeb71dfff5bf3a8aeb6c86818f3dc7))
|
|
14
|
+
* label text overflow can now be controlled ([98a0056](https://github.com/widergy/mobile-ui/commit/98a0056d94d7dca60eb65df0f1ea6b5a9e61a6fc))
|
|
15
|
+
|
|
1
16
|
## [0.39.3](https://github.com/widergy/mobile-ui/compare/v0.39.2...v0.39.3) (2023-08-25)
|
|
2
17
|
|
|
3
18
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* eslint-disable react/prop-types */
|
|
2
2
|
import React, { Fragment, useEffect, useRef, useState } from 'react';
|
|
3
|
-
import { Animated, View } from 'react-native';
|
|
3
|
+
import { Animated, TouchableOpacity, View } from 'react-native';
|
|
4
4
|
import _ from 'lodash';
|
|
5
5
|
|
|
6
6
|
import IconButton from '../IconButton';
|
|
@@ -23,9 +23,10 @@ const StepFeedback = ({
|
|
|
23
23
|
iconSize,
|
|
24
24
|
labelsCentered,
|
|
25
25
|
onClose,
|
|
26
|
+
onStepPress,
|
|
26
27
|
steps,
|
|
27
28
|
titleBottom,
|
|
28
|
-
variant = 'default'
|
|
29
|
+
variant = 'default'
|
|
29
30
|
}) => {
|
|
30
31
|
const [offset, setOffset] = useState(0);
|
|
31
32
|
|
|
@@ -101,13 +102,34 @@ const StepFeedback = ({
|
|
|
101
102
|
isComplete: index < currentIndex,
|
|
102
103
|
isFuture: index > currentIndex
|
|
103
104
|
};
|
|
105
|
+
const Wrapper = ({ children }) =>
|
|
106
|
+
onStepPress ? (
|
|
107
|
+
<TouchableOpacity
|
|
108
|
+
onPress={() => {
|
|
109
|
+
if (!status.isActive && !status.isFuture) onStepPress(step.step);
|
|
110
|
+
}}
|
|
111
|
+
>
|
|
112
|
+
{children}
|
|
113
|
+
</TouchableOpacity>
|
|
114
|
+
) : (
|
|
115
|
+
children
|
|
116
|
+
);
|
|
104
117
|
|
|
105
118
|
return (
|
|
106
119
|
<Fragment>
|
|
107
120
|
<View style={styles.stepContainer}>
|
|
108
|
-
<
|
|
109
|
-
<
|
|
110
|
-
|
|
121
|
+
<Wrapper>
|
|
122
|
+
<View style={styles.centerStepContainer}>
|
|
123
|
+
<CircleNumber
|
|
124
|
+
hideStepNumber={hideStepNumber}
|
|
125
|
+
index={index}
|
|
126
|
+
status={status}
|
|
127
|
+
step={step}
|
|
128
|
+
themedStyles={styles}
|
|
129
|
+
variant={variant}
|
|
130
|
+
/>
|
|
131
|
+
</View>
|
|
132
|
+
</Wrapper>
|
|
111
133
|
</View>
|
|
112
134
|
{index < steps.length - 1 && (
|
|
113
135
|
<View style={[styles.stepSeparator, status.isComplete && styles.stepSeparatorComplete]} />
|
|
@@ -14,6 +14,7 @@ const InputLabel = ({
|
|
|
14
14
|
error,
|
|
15
15
|
value,
|
|
16
16
|
children,
|
|
17
|
+
overflowControl,
|
|
17
18
|
position,
|
|
18
19
|
theme,
|
|
19
20
|
variant,
|
|
@@ -93,6 +94,8 @@ const InputLabel = ({
|
|
|
93
94
|
<AnimatedView
|
|
94
95
|
style={[
|
|
95
96
|
styles.title,
|
|
97
|
+
overflowControl &&
|
|
98
|
+
styles.dynamicWidth(overflowControl.parentWidth, focused, overflowControl.scallingFactor),
|
|
96
99
|
{
|
|
97
100
|
transform: [
|
|
98
101
|
{
|
|
@@ -107,6 +110,8 @@ const InputLabel = ({
|
|
|
107
110
|
>
|
|
108
111
|
<AnimatedText
|
|
109
112
|
onLayout={handleLayout}
|
|
113
|
+
ellipsizeMode={overflowControl?.ellipsizeMode}
|
|
114
|
+
numberOfLines={overflowControl?.numberOfLines}
|
|
110
115
|
style={{
|
|
111
116
|
color: active ? activeColor : disabled ? disabledColor : inactiveColor,
|
|
112
117
|
fontSize,
|
|
@@ -147,6 +152,12 @@ const InputLabel = ({
|
|
|
147
152
|
InputLabel.propTypes = {
|
|
148
153
|
variant: oneOf(['standard', 'outlined', 'filled']).isRequired,
|
|
149
154
|
focused: bool,
|
|
155
|
+
overflowControl: shape({
|
|
156
|
+
ellipsizeMode: oneOf(['head', 'middle', 'tail', 'clip', undefined]),
|
|
157
|
+
numberOfLines: number,
|
|
158
|
+
parentWidth: number,
|
|
159
|
+
scallingFactor: number
|
|
160
|
+
}),
|
|
150
161
|
error: string,
|
|
151
162
|
value: string,
|
|
152
163
|
disabled: bool,
|
|
@@ -3,5 +3,8 @@ import { StyleSheet } from 'react-native';
|
|
|
3
3
|
export const ANIM_DURATION = 100;
|
|
4
4
|
|
|
5
5
|
export default StyleSheet.create({
|
|
6
|
-
title: { position: 'absolute', zIndex: 2 }
|
|
6
|
+
title: { position: 'absolute', zIndex: 2 },
|
|
7
|
+
dynamicWidth: (width, focused, scallingFactor = 0.8) => ({
|
|
8
|
+
maxWidth: (focused ? width : width * scallingFactor) || '100%'
|
|
9
|
+
})
|
|
7
10
|
});
|
|
@@ -38,6 +38,7 @@ const FilledInput = ({
|
|
|
38
38
|
multiline,
|
|
39
39
|
captionLabel,
|
|
40
40
|
borderless,
|
|
41
|
+
overflowControl,
|
|
41
42
|
errorTextProps,
|
|
42
43
|
...props
|
|
43
44
|
}) => {
|
|
@@ -45,8 +46,12 @@ const FilledInput = ({
|
|
|
45
46
|
useEffect(() => {
|
|
46
47
|
if (!initialHeight && inputHeight) setInitialHeight(inputHeight);
|
|
47
48
|
}, [initialHeight, inputHeight]);
|
|
49
|
+
const [containerWidth, setContainerWidth] = useState(0);
|
|
48
50
|
return (
|
|
49
|
-
<View
|
|
51
|
+
<View
|
|
52
|
+
onLayout={e => setContainerWidth(e.nativeEvent.layout.width)}
|
|
53
|
+
style={[ownStyles.container, themeStyles?.root, styles?.container]}
|
|
54
|
+
>
|
|
50
55
|
<View
|
|
51
56
|
style={[
|
|
52
57
|
ownStyles.innerContainer,
|
|
@@ -93,6 +98,14 @@ const FilledInput = ({
|
|
|
93
98
|
focused={focused}
|
|
94
99
|
error={error}
|
|
95
100
|
value={value}
|
|
101
|
+
overflowControl={
|
|
102
|
+
overflowControl
|
|
103
|
+
? {
|
|
104
|
+
parentWidth: containerWidth,
|
|
105
|
+
...overflowControl
|
|
106
|
+
}
|
|
107
|
+
: {}
|
|
108
|
+
}
|
|
96
109
|
variant="filled"
|
|
97
110
|
disabled={disabled}
|
|
98
111
|
position={{
|
|
@@ -106,7 +119,9 @@ const FilledInput = ({
|
|
|
106
119
|
</InputLabel>
|
|
107
120
|
)}
|
|
108
121
|
</View>
|
|
109
|
-
{!borderless && (
|
|
122
|
+
{!borderless && (
|
|
123
|
+
<InputAnimatedBorder variant="filled" focused={focused} error={error} value={value} />
|
|
124
|
+
)}
|
|
110
125
|
</View>
|
|
111
126
|
{!!tooltip && (
|
|
112
127
|
<View style={[ownStyles.tooltipContainer, multiline && { height: initialHeight }]}>
|
|
@@ -40,6 +40,7 @@ const OutlinedInput = ({
|
|
|
40
40
|
multiline,
|
|
41
41
|
captionLabel,
|
|
42
42
|
borderless,
|
|
43
|
+
overflowControl,
|
|
43
44
|
errorTextProps,
|
|
44
45
|
...props
|
|
45
46
|
}) => {
|
|
@@ -54,8 +55,12 @@ const OutlinedInput = ({
|
|
|
54
55
|
useEffect(() => {
|
|
55
56
|
if (!initialHeight && inputHeight) setInitialHeight(inputHeight);
|
|
56
57
|
}, [initialHeight, inputHeight]);
|
|
58
|
+
const [containerWidth, setContainerWidth] = useState(0);
|
|
57
59
|
return (
|
|
58
|
-
<View
|
|
60
|
+
<View
|
|
61
|
+
onLayout={e => setContainerWidth(e.nativeEvent.layout.width)}
|
|
62
|
+
style={[ownStyles.container, themeStyles?.root, styles?.container]}
|
|
63
|
+
>
|
|
59
64
|
<View
|
|
60
65
|
style={[
|
|
61
66
|
ownStyles.innerContainer,
|
|
@@ -121,6 +126,14 @@ const OutlinedInput = ({
|
|
|
121
126
|
focused={focused}
|
|
122
127
|
error={error}
|
|
123
128
|
value={value}
|
|
129
|
+
overflowControl={
|
|
130
|
+
overflowControl
|
|
131
|
+
? {
|
|
132
|
+
parentWidth: containerWidth,
|
|
133
|
+
...overflowControl
|
|
134
|
+
}
|
|
135
|
+
: {}
|
|
136
|
+
}
|
|
124
137
|
variant="outlined"
|
|
125
138
|
disabled={disabled}
|
|
126
139
|
labelBackgroundColor={(disabled && labelBackgroundColorDisabled) || labelBackgroundColor}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
2
|
import { View } from 'react-native';
|
|
3
3
|
|
|
4
4
|
import { withTheme } from '../../../../theming';
|
|
@@ -37,90 +37,107 @@ const StandardInput = ({
|
|
|
37
37
|
tooltipProps,
|
|
38
38
|
captionLabel,
|
|
39
39
|
borderless,
|
|
40
|
+
overflowControl,
|
|
40
41
|
errorTextProps,
|
|
41
42
|
...props
|
|
42
|
-
}) =>
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
themeStyles?.input,
|
|
59
|
-
disabled && themeStyles?.inputDisabled,
|
|
60
|
-
{
|
|
61
|
-
fontSize: themeStyles?.fontSize || theme.fonts.fontSizes.medium,
|
|
62
|
-
fontFamily: theme.fonts.fontFamily
|
|
63
|
-
},
|
|
64
|
-
styles?.input
|
|
65
|
-
],
|
|
66
|
-
icon: { alignSelf: 'flex-end' }
|
|
67
|
-
}}
|
|
68
|
-
onChange={onChange}
|
|
69
|
-
value={value}
|
|
70
|
-
disabled={disabled}
|
|
71
|
-
select={select}
|
|
72
|
-
RightIcon={RightIcon}
|
|
73
|
-
hiddenInput={hiddenInput}
|
|
74
|
-
onRightIconPress={onRightIconPress}
|
|
75
|
-
standard
|
|
76
|
-
{...props}
|
|
77
|
-
/>
|
|
78
|
-
{!!label && (
|
|
79
|
-
<InputLabel
|
|
43
|
+
}) => {
|
|
44
|
+
const [containerWidth, setContainerWidth] = useState(0);
|
|
45
|
+
return (
|
|
46
|
+
<View
|
|
47
|
+
onLayout={e => setContainerWidth(e.nativeEvent.layout.width)}
|
|
48
|
+
style={[ownStyles.container, themeStyles?.root, styles?.container]}
|
|
49
|
+
>
|
|
50
|
+
<View style={[ownStyles.innerContainer, themeStyles?.innerContainer, styles?.innerContainer]}>
|
|
51
|
+
<View style={ownStyles.outerInputContainer}>
|
|
52
|
+
<View style={[ownStyles.inputContainer, themeStyles?.container, styles?.inputContainer]}>
|
|
53
|
+
<BaseInput
|
|
54
|
+
ref={InputRef}
|
|
55
|
+
onLayout={onLayout}
|
|
56
|
+
onBlur={onBlur}
|
|
57
|
+
placeholder={placeholder}
|
|
58
|
+
label={label}
|
|
80
59
|
focused={focused}
|
|
81
|
-
|
|
60
|
+
onFocus={onFocus}
|
|
61
|
+
variantStyle={{
|
|
62
|
+
text: [
|
|
63
|
+
ownStyles.input,
|
|
64
|
+
themeStyles?.input,
|
|
65
|
+
disabled && themeStyles?.inputDisabled,
|
|
66
|
+
{
|
|
67
|
+
fontSize: themeStyles?.fontSize || theme.fonts.fontSizes.medium,
|
|
68
|
+
fontFamily: theme.fonts.fontFamily
|
|
69
|
+
},
|
|
70
|
+
styles?.input
|
|
71
|
+
],
|
|
72
|
+
icon: { alignSelf: 'flex-end' }
|
|
73
|
+
}}
|
|
74
|
+
onChange={onChange}
|
|
82
75
|
value={value}
|
|
83
|
-
variant="standard"
|
|
84
76
|
disabled={disabled}
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
77
|
+
select={select}
|
|
78
|
+
RightIcon={RightIcon}
|
|
79
|
+
hiddenInput={hiddenInput}
|
|
80
|
+
onRightIconPress={onRightIconPress}
|
|
81
|
+
standard
|
|
82
|
+
{...props}
|
|
83
|
+
/>
|
|
84
|
+
{!!label && (
|
|
85
|
+
<InputLabel
|
|
86
|
+
focused={focused}
|
|
87
|
+
error={error}
|
|
88
|
+
value={value}
|
|
89
|
+
overflowControl={
|
|
90
|
+
overflowControl
|
|
91
|
+
? {
|
|
92
|
+
parentWidth: containerWidth,
|
|
93
|
+
...overflowControl
|
|
94
|
+
}
|
|
95
|
+
: {}
|
|
96
|
+
}
|
|
97
|
+
variant="standard"
|
|
98
|
+
disabled={disabled}
|
|
99
|
+
position={{
|
|
100
|
+
initX: 0,
|
|
101
|
+
initY: inputHeight - CONTAINER_PADDINGS.bottom,
|
|
102
|
+
initScale: 1,
|
|
103
|
+
endX: 0,
|
|
104
|
+
endY: 0
|
|
105
|
+
}}
|
|
106
|
+
>
|
|
107
|
+
{label}
|
|
108
|
+
</InputLabel>
|
|
109
|
+
)}
|
|
110
|
+
</View>
|
|
111
|
+
{!borderless && (
|
|
112
|
+
<InputAnimatedBorder variant="standard" focused={focused} error={error} value={value} />
|
|
95
113
|
)}
|
|
96
114
|
</View>
|
|
97
|
-
{
|
|
115
|
+
{!!tooltip && (
|
|
116
|
+
<View style={ownStyles.tooltipContainer}>
|
|
117
|
+
<UTTooltip content={tooltip} position="left" {...tooltipProps}>
|
|
118
|
+
<Icon
|
|
119
|
+
name="questioncircleo"
|
|
120
|
+
type="antdesign"
|
|
121
|
+
color={themeStyles?.tooltip?.color}
|
|
122
|
+
size={25}
|
|
123
|
+
{...tooltipIconProps}
|
|
124
|
+
/>
|
|
125
|
+
</UTTooltip>
|
|
126
|
+
</View>
|
|
127
|
+
)}
|
|
98
128
|
</View>
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
/>
|
|
109
|
-
</UTTooltip>
|
|
110
|
-
</View>
|
|
111
|
-
)}
|
|
129
|
+
<CaptionLabel
|
|
130
|
+
error={error}
|
|
131
|
+
color={theme.colors.primary}
|
|
132
|
+
errorColor={theme.colors.error}
|
|
133
|
+
style={[themeStyles?.errorLabel, styles?.errorLabel]}
|
|
134
|
+
textProps={errorTextProps}
|
|
135
|
+
>
|
|
136
|
+
{captionLabel}
|
|
137
|
+
</CaptionLabel>
|
|
112
138
|
</View>
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
color={theme.colors.primary}
|
|
116
|
-
errorColor={theme.colors.error}
|
|
117
|
-
style={[themeStyles?.errorLabel, styles?.errorLabel]}
|
|
118
|
-
textProps={errorTextProps}
|
|
119
|
-
>
|
|
120
|
-
{captionLabel}
|
|
121
|
-
</CaptionLabel>
|
|
122
|
-
</View>
|
|
123
|
-
);
|
|
139
|
+
);
|
|
140
|
+
};
|
|
124
141
|
|
|
125
142
|
StandardInput.propTypes = InputTypes;
|
|
126
143
|
|
|
@@ -14,7 +14,16 @@ const variants = {
|
|
|
14
14
|
outlined: OutlinedInput
|
|
15
15
|
};
|
|
16
16
|
|
|
17
|
-
const UTTextInput = ({
|
|
17
|
+
const UTTextInput = ({
|
|
18
|
+
variant = 'standard',
|
|
19
|
+
theme,
|
|
20
|
+
onFocus,
|
|
21
|
+
onBlur,
|
|
22
|
+
controlledFocus,
|
|
23
|
+
select,
|
|
24
|
+
errorTextProps,
|
|
25
|
+
...props
|
|
26
|
+
}) => {
|
|
18
27
|
const [inputHeight, setInputHeight] = useState(0);
|
|
19
28
|
const [focused, setFocused] = useState(false);
|
|
20
29
|
|
|
@@ -44,6 +53,7 @@ const UTTextInput = ({ variant = 'standard', theme, onFocus, onBlur, controlledF
|
|
|
44
53
|
themeStyles={themeStyles}
|
|
45
54
|
inputHeight={inputHeight}
|
|
46
55
|
select={select}
|
|
56
|
+
overflowControl={props?.configuration?.overflowControl}
|
|
47
57
|
errorTextProps={errorTextProps}
|
|
48
58
|
/>
|
|
49
59
|
);
|
package/package.json
CHANGED