<commit_before>//
//	jballands/vespyr
//	TextInput.js
//	
//	© 2017 <NAME>
//

import React from 'react';
import PropTypes from 'prop-types';
import Radium, { Style } from 'radium';

import ColorUtility from './utils/ColorUtility';
import DefaultFont from './utils/DefaultFontStyles';

function getStyles(props) {
	const { accentColor, color, disabled, hintColor } = props;

	const _accentColor = disabled ? ColorUtility.disabledGray() : accentColor;
	const _color = disabled ? ColorUtility.disabledGray() : color;

	return {
		base: {
			display: 'flex',
			flexFlow: 'row nowrap',
			alignItems: 'center',
		},
		baseDisabled: {
			pointerEvents: 'none',
			':hover': {
				cursor: 'not-allowed',
			},
		},
		icon: {
			maxWidth: '25px',
			maxHeight: '25px',
			marginRight: '10px',
		},
		iconChildren: {
			maxWidth: '100%',
			maxHeight: '100%',
		},
		input: {
			border: 0,
			outline: 'none',
			width: '250px',
			padding: '5px 0',
			fontSize: '16px',
			color: color,
			background: 'transparent',
			':focus': {},
		},
		inputContainer: {
			display: 'flex',
			flexFlow: 'column nowrap',
			justifyContent: 'flex-start',
		},
		inputPlaceholder: {
			fontStyle: 'italic',
			color: hintColor,
		},
		title: {
			fontSize: '10px',
			textTransform: 'uppercase',
			marginTop: '3px',
			transition: 'color 250ms ease',
			color: _color,
		},
		titleFocus: {
			color: _accentColor,
		},
		underlineDefault: {
			position: 'absolute',
			top: 0,
			left: 0,
			width: '100%',
			display: 'block',
			content: '',
			borderBottom: `solid 1px ${_color}`,
		},
		underlineFocus: {
			position: 'absolute',
			top: 0,
			left: 0,
			width: '100%',
			display: 'block',
			content: '',
			borderBottom: `solid 2px ${_accentColor}`,
			transform: 'scaleX(0)',
			transition: 'transform 250ms ease',
		},
		underlineFocusShow: {
			transform: 'scaleX(1)',
		},
		underlines: {
			position: 'relative',
		},
	};
}

@Radium
export default class TextInput extends React.Component {

	static propTypes = {
		accentColor: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
		className: PropTypes.string,
		color: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
		disabled: PropTypes.bool,
		hint: PropTypes.string,
		hintColor: PropTypes.string,
		icon: PropTypes.node,
		invalid: PropTypes.bool,
		invalidColor: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
		onUpdate: PropTypes.func,
		value: PropTypes.string,
		style: PropTypes.object,
		title: PropTypes.string,
		type: PropTypes.string,
	};

	static defaultProps = {
		accentColor: ColorUtility.blue(),
		color: ColorUtility.black(),
		disabled: false,
		hintColor: ColorUtility.hintGray(),
		invalid: false,
		invalidColor: ColorUtility.red(),
		type: 'text',
	};

	focus = () => {
		this.input.focus();
	};

	handleUpdate = e => {
		this.props.onUpdate(e.target.value);
	};

	inputReference = input => {
		this.input = input;
	};

	renderIcon = styles => {
		const { icon } = this.props;
		if (!icon) {
			return null;
		}
		return (
			<div style={styles.icon}>
				<Style rules={{ '*': styles.iconChildren }} />
				{icon}
			</div>
		);
	};

	renderTextInput = styles => {
		const { hint, title, type, value } = this.props;
		const isFocused = Radium.getState(this.state, 'VespyrTextInput', ':focus');

		return (
			<div style={styles.inputContainer}>
				<Style rules={{ 'input::placeholder': styles.inputPlaceholder }} />
				<input type={type}
					key="VespyrTextInput"
					style={styles.input}
					placeholder={hint}
					ref={this.inputReference}
					onChange={this.handleUpdate}
					value={value}
				/>
				<div style={styles.underlines}>
					<div style={styles.underlineDefault} />
					<div style={[styles.underlineFocus, isFocused ? styles.underlineFocusShow : null]} />
				</div>
				<div style={[styles.title, isFocused ? styles.titleFocus : null]}>
					{title}
				</div>
			</div>
		);
	};

	render() {
		const styles = getStyles(this.props);
		const { className, disabled, style } = this.props;

		return (
			<div style={[DefaultFont, styles.base, disabled ? styles.baseDisabled : null, style]}
				className={className}
				onClick={this.focus}>
				{this.renderIcon(styles)}
				{this.renderTextInput(styles)}
			</div>
		);
	}

}<commit_msg>Fixed disabled<commit_after>//
//	jballands/vespyr
//	TextInput.js
//	
//	© 2017 <NAME>
//

import React from 'react';
import PropTypes from 'prop-types';
import Radium, { Style } from 'radium';

import ColorUtility from './utils/ColorUtility';
import DefaultFont from './utils/DefaultFontStyles';

function getStyles(props) {
	const { accentColor, color, disabled, hintColor } = props;

	const _accentColor = disabled ? ColorUtility.disabledGray() : accentColor;
	const _color = disabled ? ColorUtility.disabledGray() : color;

	return {
		base: {
			display: 'inline-flex',
			flexFlow: 'row nowrap',
			alignItems: 'center',
		},
		baseDisabled: {
			':hover': {
				cursor: 'not-allowed',
			},
		},
		icon: {
			maxWidth: '25px',
			maxHeight: '25px',
			marginRight: '10px',
		},
		iconChildren: {
			maxWidth: '100%',
			maxHeight: '100%',
		},
		input: {
			border: 0,
			outline: 'none',
			width: '250px',
			padding: '5px 0',
			fontSize: '16px',
			color: color,
			background: 'transparent',
			':focus': {},
		},
		inputContainer: {
			display: 'flex',
			flexFlow: 'column nowrap',
			justifyContent: 'flex-start',
		},
		inputDisabled: {
			':disabled': {
				cursor: 'not-allowed',
			},
		},
		inputPlaceholder: {
			fontStyle: 'italic',
			color: hintColor,
		},
		title: {
			fontSize: '10px',
			textTransform: 'uppercase',
			marginTop: '3px',
			transition: 'color 250ms ease',
			color: _color,
		},
		titleFocus: {
			color: _accentColor,
		},
		underlineDefault: {
			position: 'absolute',
			top: 0,
			left: 0,
			width: '100%',
			display: 'block',
			content: '',
			borderBottom: `solid 1px ${_color}`,
		},
		underlineFocus: {
			position: 'absolute',
			top: 0,
			left: 0,
			width: '100%',
			display: 'block',
			content: '',
			borderBottom: `solid 2px ${_accentColor}`,
			transform: 'scaleX(0)',
			transition: 'transform 250ms ease',
		},
		underlineFocusShow: {
			transform: 'scaleX(1)',
		},
		underlines: {
			position: 'relative',
		},
	};
}

@Radium
export default class TextInput extends React.Component {

	static propTypes = {
		accentColor: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
		className: PropTypes.string,
		color: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
		disabled: PropTypes.bool,
		hint: PropTypes.string,
		hintColor: PropTypes.string,
		icon: PropTypes.node,
		invalid: PropTypes.bool,
		invalidColor: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
		onUpdate: PropTypes.func,
		value: PropTypes.string,
		style: PropTypes.object,
		title: PropTypes.string,
		type: PropTypes.string,
	};

	static defaultProps = {
		accentColor: ColorUtility.blue(),
		color: ColorUtility.black(),
		disabled: false,
		hintColor: ColorUtility.hintGray(),
		invalid: false,
		invalidColor: ColorUtility.red(),
		type: 'text',
	};

	focus = () => {
		this.input.focus();
	};

	handleUpdate = e => {
		this.props.onUpdate(e.target.value);
	};

	inputReference = input => {
		this.input = input;
	};

	renderIcon = styles => {
		const { icon } = this.props;
		if (!icon) {
			return null;
		}
		return (
			<div style={styles.icon}>
				<Style rules={{ '*': styles.iconChildren }} />
				{icon}
			</div>
		);
	};

	renderTextInput = styles => {
		const { disabled, hint, title, type, value } = this.props;
		const isFocused = Radium.getState(this.state, 'VespyrTextInput', ':focus');

		return (
			<div style={styles.inputContainer}>
				<Style rules={{ 'input::placeholder': styles.inputPlaceholder }} />
				<input type={type}
					key="VespyrTextInput"
					style={[styles.input, disabled ? styles.inputDisabled : null]}
					disabled={disabled}
					placeholder={hint}
					ref={this.inputReference}
					onChange={this.handleUpdate}
					value={value}
				/>
				<div style={styles.underlines}>
					<div style={styles.underlineDefault} />
					<div style={[styles.underlineFocus, isFocused ? styles.underlineFocusShow : null]} />
				</div>
				<div style={[styles.title, isFocused ? styles.titleFocus : null]}>
					{title}
				</div>
			</div>
		);
	};

	render() {
		const styles = getStyles(this.props);
		const { className, disabled, style } = this.props;

		return (
			<div style={[DefaultFont, styles.base, disabled ? styles.baseDisabled : null, style]}
				className={className}
				onClick={this.focus}
				key="VespyrTextInputContainer">
				{this.renderIcon(styles)}
				{this.renderTextInput(styles)}
			</div>
		);
	}

}
{'fraction_non_alphanumeric': 0.15986198964922368, 'fraction_numerical': 0.010810810810810811, 'mean_word_length': 3.4894166236448116, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 45, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '719838', 'n_tokens_mistral': 3511, 'n_tokens_neox': 2955, 'n_words': 633}