128 lines
2.7 KiB
JavaScript
128 lines
2.7 KiB
JavaScript
import React from "react";
|
|
|
|
const styleContainer = {
|
|
backgroundColor: "#ccc",
|
|
display: "inline-block",
|
|
height: "2.5rem"
|
|
};
|
|
|
|
const styleIcon = {
|
|
lineHeight: "2.5rem",
|
|
height: "2.5rem",
|
|
margin: "0 0.25rem 0 0.5rem"
|
|
};
|
|
|
|
const styleInputBase = {
|
|
backgroundColor: "transparent",
|
|
border: "none",
|
|
display: "inline-block",
|
|
fontSize: "0.875rem",
|
|
height: "2.5rem",
|
|
lineHeight: "2.5rem",
|
|
outline: "none",
|
|
overflowY: "hidden",
|
|
padding: "0 0.75rem",
|
|
verticalAlign: "middle"
|
|
};
|
|
|
|
const styleDefault = {
|
|
...styleInputBase,
|
|
color: "#333"
|
|
};
|
|
|
|
const styleInvalid = {
|
|
...styleInputBase,
|
|
color: "#e74c3c"
|
|
};
|
|
|
|
const inputClassName = "qs-input";
|
|
const styleStr = `
|
|
.${inputClassName}:hover {
|
|
// box-shadow: 0px 0px -5px rgba(0, 0, 0, 1);
|
|
opacity: 0.7;
|
|
transition: opacity 0.25s;
|
|
}
|
|
|
|
.${inputClassName}:active {
|
|
// box-shadow: 0px 0px -5px rgba(0, 0, 0, 1);
|
|
opacity: 0.7;
|
|
transition: opacity 0.25s;
|
|
}
|
|
|
|
.${inputClassName}:disabled {
|
|
color: #ccc;
|
|
}
|
|
`;
|
|
|
|
export class Input extends React.PureComponent {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = { isValid: true };
|
|
this.inputRef = undefined;
|
|
}
|
|
|
|
onChange = e => {
|
|
this.props.onChange(e.target.value);
|
|
this.props.onChangeEvent(e);
|
|
this.props.onChangeTarget(e.target);
|
|
this.setState({ isValid: this.props.validate(e.target.value) });
|
|
};
|
|
|
|
getRef = input => {
|
|
this.inputRef = input;
|
|
this.props.inputRef(this.inputRef);
|
|
};
|
|
|
|
render() {
|
|
const style = this.state.isValid ? styleDefault : styleInvalid;
|
|
const icon =
|
|
this.props.icon != null ? (
|
|
<span style={styleIcon}>{this.props.icon}</span>
|
|
) : (
|
|
<span />
|
|
);
|
|
|
|
return (
|
|
<div style={{ ...styleContainer, ...this.props.styleContainer }}>
|
|
{icon}
|
|
<input
|
|
style={{
|
|
...styleDefault,
|
|
...this.props.style,
|
|
width: this.props.width
|
|
}}
|
|
className={`${inputClassName} ${this.props.className}`}
|
|
disabled={this.props.disabled}
|
|
readOnly={this.props.readOnly}
|
|
maxLength={this.props.maxLength}
|
|
placeholder={this.props.placeholder}
|
|
type={this.props.type}
|
|
onChange={this.onChange}
|
|
value={this.props.value}
|
|
ref={this.getRef}
|
|
/>
|
|
<style>{styleStr}</style>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
Input.defaultProps = {
|
|
className: "input",
|
|
maxLength: "32",
|
|
placeholder: "placeholder",
|
|
readOnly: false,
|
|
style: {},
|
|
styleContainer: {},
|
|
styleInvalid: {},
|
|
type: "text",
|
|
disabled: false,
|
|
width: "auto",
|
|
value: "",
|
|
icon: null,
|
|
onChange: () => true,
|
|
onChangeEvent: () => true,
|
|
onChangeTarget: () => true,
|
|
validate: () => true,
|
|
inputRef: () => true
|
|
};
|