Skip to content

Commit 8e5e4c8

Browse files
committed
changing input active/passive and value states when it has a different value
1 parent 298a4c3 commit 8e5e4c8

File tree

2 files changed

+25
-5
lines changed

2 files changed

+25
-5
lines changed

lib/BaseInput.js

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,25 @@ export default class BaseInput extends Component {
4343
};
4444
}
4545

46+
componentWillReceiveProps(newProps) {
47+
const newValue = newProps.value;
48+
if (newValue !== this.state.value) {
49+
this.setState({
50+
value: newValue,
51+
});
52+
53+
// animate input if it's active state has changed with the new value
54+
// and input is not focused currently.
55+
const isFocused = this.refs.input.isFocused();
56+
if (!isFocused) {
57+
const isActive = Boolean(newValue);
58+
if (isActive !== this.isActive) {
59+
this._toggle(isActive);
60+
}
61+
}
62+
}
63+
}
64+
4665
_onLayout(event) {
4766
this.setState({
4867
width: event.nativeEvent.layout.width,
@@ -84,10 +103,11 @@ export default class BaseInput extends Component {
84103
this.refs.input.focus();
85104
}
86105

87-
_toggle(displayed) {
106+
_toggle(isActive) {
107+
this.isActive = isActive;
88108
Animated.timing(
89109
this.state.focusedAnim, {
90-
toValue: displayed ? 1 : 0,
110+
toValue: isActive ? 1 : 0,
91111
duration: this.props.animationDuration,
92112
easing: this.props.easing,
93113
},

lib/Jiro.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,8 @@ export default class Jiro extends BaseInput {
3737
};
3838
}
3939

40-
_toggle(displayed) {
41-
const animationValue = displayed ? 1 : 0;
40+
_toggle(isActive) {
41+
const animationValue = isActive ? 1 : 0;
4242
const borderPositionAnimation = Animated.timing(this.state.borderPositionAnim, {
4343
toValue: animationValue,
4444
eaasing: Easing.bezier(0.2, 1, 0.3, 1),
@@ -55,7 +55,7 @@ export default class Jiro extends BaseInput {
5555
duration: 200,
5656
});
5757

58-
if (displayed) {
58+
if (isActive) {
5959
Animated.sequence([
6060
borderPositionAnimation,
6161
Animated.parallel([labelPositionAnimation, borderHeightAnimation]),

0 commit comments

Comments
 (0)