UNPKG

d2-ui

Version:
98 lines (82 loc) 2.05 kB
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;