Skip to content

Commit

Permalink
Add dense styling. Update README.
Browse files Browse the repository at this point in the history
  • Loading branch information
evblurbs committed Feb 4, 2016
1 parent 32552ee commit 61b5832
Show file tree
Hide file tree
Showing 7 changed files with 83 additions and 54 deletions.
8 changes: 7 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,12 @@ class App extends React.Component {
}
```

### Dense Styling

To use the "dense" styling that matches the [Material Design Style Guide](https://www.google.com/design/spec/components/text-fields.html#text-fields-labels), you can set the prop `dense` to `true`. By default, this prop is set to `false`.

![demo dense](/demo-dense.gif)

## Props

Below are the props you can pass to the React Component to customize the TextInput.
Expand All @@ -64,10 +70,10 @@ highlightColor | string | | This string represents the hex code, rgb, or rgba co
duration | number | `200` | A number representing the duration of floating label and underline animations in milliseconds.
labelColor | string | `#9E9E9E` | This string represents the hex code, rgb, or rgba color of the textInput label when it is inactive.
borderColor | string | `#E0E0E0` | This string represents the hex code, rgb, or rgba color of the textInput underline when it is inactive.
dense | bool | `false` | If true, it will render the "dense" input field which is smaller in height and has smaller font sizes. You can view more [here](https://www.google.com/design/spec/components/text-fields.html#text-fields-labels).

## TODO

- [ ] Support multi-line TextInput fields
- [ ] Support dense style
- [ ] Support character limit
- [ ] Add option for dark theme
Binary file added demo-dense.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified demo.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 4 additions & 1 deletion examples/FloatingLabel/index.ios.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,8 @@ class FloatingLabel extends Component {
onChangeText={(text) => {
this.inputs.name = text;
}}
value={'Jam Man'}
value={'Jane'}
dense={true}
/>
<TextField
label={'Address'}
Expand All @@ -48,6 +49,7 @@ class FloatingLabel extends Component {
onSubmitEditing={() => {
this.refs.cityInput.focus();
}}
dense={true}
/>
<TextField
label={'City'}
Expand All @@ -63,6 +65,7 @@ class FloatingLabel extends Component {
onChangeText={(text) => {
this.inputs.state = text;
}}
value={'WA'}
/>
<TextField
label={'Zip'}
Expand Down
2 changes: 1 addition & 1 deletion examples/FloatingLabel/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,6 @@
},
"dependencies": {
"react-native": "^0.19.0",
"react-native-md-textinput": "1.6.0"
"react-native-md-textinput": "^1.6.0"
}
}
28 changes: 20 additions & 8 deletions lib/FloatingLabel.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,19 @@ import React, {
export default class FloatingLabel extends Component {
constructor(props: Object) {
super(props);
let posTop = (props.hasValue) ? 16 : 34;
let fontSize = (props.hasValue) ? 10 : 16;
if(props.dense) {
this.posTop = 12;
this.posBottom = 32;
this.fontLarge = 13;
this.fontSmall = 13;
} else {
this.posTop = 16;
this.posBottom = 37;
this.fontLarge = 16;
this.fontSmall = 12;
}
let posTop = (props.hasValue) ? this.posTop : this.posBottom;
let fontSize = (props.hasValue) ? this.fontSmall : this.fontLarge;
this.state = {
top: new Animated.Value(posTop),
fontSize: new Animated.Value(fontSize)
Expand All @@ -24,23 +35,23 @@ export default class FloatingLabel extends Component {
floatLabel() {
Animated.parallel([
Animated.timing(this.state.top, {
toValue: 16,
toValue: this.posTop,
duration: this.props.duration
}),
Animated.timing(this.state.fontSize, {
toValue: 10,
toValue: this.fontSmall,
duration: this.props.duration
})
]).start();
}
sinkLabel() {
Animated.parallel([
Animated.timing(this.state.top, {
toValue: 34,
toValue: this.posBottom,
duration: this.props.duration
}),
Animated.timing(this.state.fontSize, {
toValue: 16,
toValue: this.fontLarge,
duration: this.props.duration
})
]).start();
Expand Down Expand Up @@ -74,13 +85,14 @@ FloatingLabel.propTypes = {
duration: PropTypes.number,
label: PropTypes.string,
labelColor: PropTypes.string,
highlightColor: PropTypes.string
highlightColor: PropTypes.string,
dense: PropTypes.bool
};

const styles = StyleSheet.create({
labelText: {
position: 'absolute',
left: 1,
left: 0,
backgroundColor: 'rgba(0,0,0,0)'
}
});
94 changes: 51 additions & 43 deletions lib/TextField.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,40 +34,39 @@ export default class TextField extends Component {
onBlur,
onChangeText,
value,
dense,
...props
} = this.props;
return (
<View style={styles.wrapper} ref="wrapper">
<View style={[styles.inputWrapper, this.state.isFocused && styles.inputWrapperActive]}>
<TextInput
style={styles.textInput}
onFocus={() => {
this.setState({isFocused: true});
this.refs.floatingLabel.floatLabel();
this.refs.underline.expandLine();
onFocus && onFocus();
}}
onBlur={() => {
this.setState({isFocused: false});
!this.state.text.length && this.refs.floatingLabel.sinkLabel();
this.refs.underline.shrinkLine();
onBlur && onBlur();
}}
onChangeText={(text) => {
this.setState({text});
onChangeText && onChangeText(text);
}}
ref="input"
value={this.state.text}
{...props}
/>
<Underline
ref="underline"
highlightColor={highlightColor}
duration={duration}
borderColor={borderColor}
/>
</View>
<View style={dense ? styles.denseWrapper : styles.wrapper} ref="wrapper">
<TextInput
style={dense ? styles.denseTextInput : styles.textInput}
onFocus={() => {
this.setState({isFocused: true});
this.refs.floatingLabel.floatLabel();
this.refs.underline.expandLine();
onFocus && onFocus();
}}
onBlur={() => {
this.setState({isFocused: false});
!this.state.text.length && this.refs.floatingLabel.sinkLabel();
this.refs.underline.shrinkLine();
onBlur && onBlur();
}}
onChangeText={(text) => {
this.setState({text});
onChangeText && onChangeText(text);
}}
ref="input"
value={this.state.text}
{...props}
/>
<Underline
ref="underline"
highlightColor={highlightColor}
duration={duration}
borderColor={borderColor}
/>
<FloatingLabel
isFocused={this.state.isFocused}
ref="floatingLabel"
Expand All @@ -76,6 +75,7 @@ export default class TextField extends Component {
labelColor={labelColor}
highlightColor={highlightColor}
duration={duration}
dense={dense}
hasValue={(this.state.text.length) ? true : false}
/>
</View>
Expand All @@ -90,32 +90,40 @@ TextField.propTypes = {
onFocus: PropTypes.func,
onBlur: PropTypes.func,
onChangeText: PropTypes.func,
value: PropTypes.string
value: PropTypes.string,
dense: PropTypes.bool
};

TextField.defaultProps = {
duration: 200,
labelColor: '#9E9E9E',
borderColor: '#E0E0E0',
value: ''
value: '',
dense: false
};

const styles = StyleSheet.create({
wrapper: {
height: 72,
flex: 1,
paddingTop: 28,
paddingBottom: 8,
paddingTop: 30,
paddingBottom: 7,
position: 'relative'
},
denseWrapper: {
height: 60,
paddingTop: 28,
paddingBottom: 4,
position: 'relative'
},
textInput: {
flex: 1,
fontSize: 16,
lineHeight: 16
height: 34,
lineHeight: 34
},
inputWrapper: {
borderWidth: 0,
height: 32,
flex: 1
}
denseTextInput: {
fontSize: 13,
height: 27,
lineHeight: 24,
paddingBottom: 3
}
});

0 comments on commit 61b5832

Please sign in to comment.