d2-ui
Version:
98 lines (82 loc) • 2.05 kB
JSX
import React from 'react';
import Transitions from '../styles/transitions';
import {mergeStyles, prepareStyles} from '../utils/styles';
const propTypes = {
/**
* The material-ui theme applied to this component.
*/
muiTheme: React.PropTypes.object.isRequired,
/**
* The css class name of the root element.
*/
className: React.PropTypes.string,
/**
* The label contents.
*/
children: React.PropTypes.node,
/**
* Disables the label if set to true.
*/
disabled: React.PropTypes.bool,
/**
* True if the floating label should shrink.
*/
shrink: React.PropTypes.bool,
/**
* The id of the target element that this label should refer to.
*/
htmlFor: React.PropTypes.string,
/**
* Callback function for when the label is selected via a touch tap.
*/
onTouchTap: React.PropTypes.func,
/**
* Override the inline-styles of the root element.
*/
style: React.PropTypes.object,
};
const defaultProps = {
disabled: false,
shrink: false,
};
const TextFieldLabel = (props) => {
const {
muiTheme,
className,
children,
disabled,
shrink,
htmlFor,
style,
onTouchTap,
} = props;
const styles = {
root: {
position: 'absolute',
lineHeight: '22px',
top: 38,
transition: Transitions.easeOut(),
zIndex: 1, // Needed to display label above Chrome's autocomplete field background
cursor: disabled ? 'default' : 'text',
transform: shrink
? 'perspective(1px) scale(0.75) translate3d(2px, -28px, 0)'
: 'scale(1) translate3d(0, 0, 0)',
transformOrigin: 'left top',
pointerEvents: shrink ? 'none' : 'auto',
userSelect: 'none',
},
};
return (
<label
className={className}
style={prepareStyles(muiTheme, mergeStyles(styles.root, style))}
htmlFor={htmlFor}
onTouchTap={onTouchTap}
>
{children}
</label>
);
};
TextFieldLabel.propTypes = propTypes;
TextFieldLabel.defaultProps = defaultProps;
export default TextFieldLabel;