Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[TextField] Remove style-propable mixin #3349

Merged
merged 1 commit into from
Feb 15, 2016
Merged

[TextField] Remove style-propable mixin #3349

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
228 changes: 113 additions & 115 deletions src/TextField/TextField.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom';
import ColorManipulator from '../utils/color-manipulator';
import StylePropable from '../mixins/style-propable';
import Transitions from '../styles/transitions';
import UniqueId from '../utils/unique-id';
import EnhancedTextarea from '../enhanced-textarea';
Expand All @@ -10,6 +9,97 @@ import TextFieldHint from './TextFieldHint';
import TextFieldLabel from './TextFieldLabel';
import TextFieldUnderline from './TextFieldUnderline';

const getStyles = (props, state) => {
const {
baseTheme,
textField: {
floatingLabelColor,
focusColor,
textColor,
disabledTextColor,
backgroundColor,
hintColor,
errorColor,
},
} = state.muiTheme;

const styles = {
root: {
fontSize: 16,
lineHeight: '24px',
width: props.fullWidth ? '100%' : 256,
height: (props.rows - 1) * 24 + (props.floatingLabelText ? 72 : 48),
display: 'inline-block',
position: 'relative',
backgroundColor: backgroundColor,
fontFamily: baseTheme.fontFamily,
transition: Transitions.easeOut('200ms', 'height'),
},
error: {
position: 'relative',
bottom: 2,
fontSize: 12,
lineHeight: '12px',
color: errorColor,
transition: Transitions.easeOut(),
},
floatingLabel: {
color: hintColor,
pointerEvents: 'none',
},
input: {
tapHighlightColor: 'rgba(0,0,0,0)',
padding: 0,
position: 'relative',
width: '100%',
height: '100%',
border: 'none',
outline: 'none',
backgroundColor: 'rgba(0,0,0,0)',
color: props.disabled ? disabledTextColor : textColor,
font: 'inherit',
},
textarea: {},
};

Object.assign(styles.error, props.errorStyle);

Object.assign(styles.textarea, styles.input, {
marginTop: props.floatingLabelText ? 36 : 12,
marginBottom: props.floatingLabelText ? -36 : -12,
boxSizing: 'border-box',
font: 'inherit',
});

if (state.isFocused) {
styles.floatingLabel.color = focusColor;
}

if (state.hasValue) {
styles.floatingLabel.color = ColorManipulator.fade(props.disabled ? disabledTextColor : floatingLabelColor, 0.5);
}

if (props.floatingLabelText) {
styles.input.boxSizing = 'border-box';

if (!props.multiLine) {
styles.input.marginTop = 14;
}

if (state.errorText) {
styles.error.bottom = !props.multiLine ? styles.error.fontSize + 3 : 3;
}
}

if (state.errorText) {
if (state.isFocused) {
styles.floatingLabel.color = styles.error.color;
}
}

return styles;
};

/**
* Check if a value is valid to be displayed inside an input.
*
Expand Down Expand Up @@ -179,15 +269,10 @@ const TextField = React.createClass({
muiTheme: React.PropTypes.object,
},

//for passing default theme context to children
childContextTypes: {
muiTheme: React.PropTypes.object,
},

mixins: [
StylePropable,
],

getDefaultProps() {
return {
disabled: false,
Expand Down Expand Up @@ -222,10 +307,11 @@ const TextField = React.createClass({
},

componentWillReceiveProps(nextProps, nextContext) {
const newState = {};
newState.muiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
const newState = {
errorText: nextProps.errorText,
muiTheme: nextContext.muiTheme || this.state.muiTheme,
};

newState.errorText = nextProps.errorText;
if (nextProps.children && nextProps.children.props) {
nextProps = nextProps.children.props;
}
Expand All @@ -242,96 +328,6 @@ const TextField = React.createClass({
if (newState) this.setState(newState);
},

getStyles() {
const props = this.props;
const {
textField: {
floatingLabelColor,
focusColor,
textColor,
disabledTextColor,
backgroundColor,
hintColor,
errorColor,
},
} = this.state.muiTheme;

const styles = {
root: {
fontSize: 16,
lineHeight: '24px',
width: props.fullWidth ? '100%' : 256,
height: (props.rows - 1) * 24 + (props.floatingLabelText ? 72 : 48),
display: 'inline-block',
position: 'relative',
backgroundColor: backgroundColor,
fontFamily: this.state.muiTheme.rawTheme.fontFamily,
transition: Transitions.easeOut('200ms', 'height'),
},
error: {
position: 'relative',
bottom: 2,
fontSize: 12,
lineHeight: '12px',
color: errorColor,
transition: Transitions.easeOut(),
},
floatingLabel: {
color: hintColor,
pointerEvents: 'none',
},
input: {
tapHighlightColor: 'rgba(0,0,0,0)',
padding: 0,
position: 'relative',
width: '100%',
height: '100%',
border: 'none',
outline: 'none',
backgroundColor: 'rgba(0,0,0,0)',
color: props.disabled ? disabledTextColor : textColor,
font: 'inherit',
},
};

styles.error = this.mergeStyles(styles.error, props.errorStyle);

styles.textarea = this.mergeStyles(styles.input, {
marginTop: props.floatingLabelText ? 36 : 12,
marginBottom: props.floatingLabelText ? -36 : -12,
boxSizing: 'border-box',
font: 'inherit',
});

if (this.state.isFocused) {
styles.floatingLabel.color = focusColor;
}

if (this.state.hasValue) {
styles.floatingLabel.color = ColorManipulator.fade(props.disabled ? disabledTextColor : floatingLabelColor, 0.5);
}

if (props.floatingLabelText) {
styles.input.boxSizing = 'border-box';

if (!props.multiLine) {
styles.input.marginTop = 14;
}

if (this.state.errorText) {
styles.error.bottom = !props.multiLine ? styles.error.fontSize + 3 : 3;
}
}

if (this.state.errorText) {
if (this.state.isFocused) {
styles.floatingLabel.color = styles.error.color;
}
}

return styles;
},

blur() {
if (this.isMounted()) this._getInputNode().blur();
},
Expand Down Expand Up @@ -410,30 +406,32 @@ const TextField = React.createClass({
...other,
} = this.props;

const styles = this.getStyles();
const {
prepareStyles,
} = this.state.muiTheme;

const styles = getStyles(this.props, this.state);

const inputId = id || this._uniqueId;

const errorTextElement = this.state.errorText ? (
<div style={this.prepareStyles(styles.error)}>{this.state.errorText}</div>
) : null;
const errorTextElement = this.state.errorText && (
<div style={prepareStyles(styles.error)}>{this.state.errorText}</div>
);

const floatingLabelTextElement = floatingLabelText ? (
const floatingLabelTextElement = floatingLabelText && (
<TextFieldLabel
muiTheme={this.state.muiTheme}
style={this.mergeStyles(styles.floatingLabel, this.props.floatingLabelStyle)}
style={Object.assign(styles.floatingLabel, this.props.floatingLabelStyle)}
htmlFor={inputId}
shrink={this.state.hasValue || this.state.isFocused}
disabled={disabled}
>
{floatingLabelText}
</TextFieldLabel>
) : null;
);

let inputProps;
let inputElement;

inputProps = {
const inputProps = {
id: inputId,
ref: 'input',
onBlur: this._handleInputBlur,
Expand All @@ -442,19 +440,19 @@ const TextField = React.createClass({
onKeyDown: this._handleInputKeyDown,
};

const inputStyleMerged = this.mergeStyles(styles.input, inputStyle);
const textareaStyleMerged = this.mergeStyles(styles.textarea, textareaStyle);
const inputStyleMerged = Object.assign(styles.input, inputStyle);

if (!this.props.hasOwnProperty('valueLink')) {
inputProps.onChange = this._handleInputChange;
}

let inputElement;
if (this.props.children) {
inputElement = React.cloneElement(this.props.children,
{
...inputProps,
...this.props.children.props,
style: this.mergeStyles(inputStyleMerged, this.props.children.props.style),
style: Object.assign(inputStyleMerged, this.props.children.props.style),
});
} else {
inputElement = multiLine ? (
Expand All @@ -465,20 +463,20 @@ const TextField = React.createClass({
rows={rows}
rowsMax={rowsMax}
onHeightChange={this._handleTextAreaHeightChange}
textareaStyle={textareaStyleMerged}
textareaStyle={Object.assign(styles.textarea, textareaStyle)}
/>
) : (
<input
{...other}
{...inputProps}
style={this.prepareStyles(inputStyleMerged)}
style={prepareStyles(inputStyleMerged)}
type={type}
/>
);
}

return (
<div className={className} style={this.prepareStyles(styles.root, this.props.style)}>
<div className={className} style={prepareStyles(Object.assign(styles.root, style))}>
{floatingLabelTextElement}
{hintText ?
<TextFieldHint
Expand Down