Mirror/Cultivation
1
0
Fork 0
mirror of https://github.com/Grasscutters/Cultivation.git synced 2025-12-16 09:04:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

text input clearable

Browse Source
This commit is contained in:
SpikeHD
2022-05-16 17:15:26 -07:00
parent f5147239ae
commit 0a37529b17
2 changed files with 34 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/ui/components/common/TextInput.tsx
View File

@@ -1,5 +1,7 @@
import React from 'react'
import './TextInput.css'
import Close from '../../../resources/icons/close.svg'
interface IProps {
value?: string;
@@ -7,6 +9,7 @@ interface IProps {
onChange?: (value: string) => void;
readOnly?: boolean;
id?: string;
clearable?: boolean;
}
interface IState {
@@ -34,10 +37,17 @@ export default class TextInput extends React.Component<IProps, IState> {
render() {
return (
<input id={this.props?.id} readOnly={this.props.readOnly || false} placeholder={this.props.placeholder || ''} className="TextInput" value={this.state.value} onChange={(e) => {
this.setState({ value: e.target.value })
if (this.props.onChange) this.props.onChange(e.target.value)
}} />
<div className="TextInputWrapper">
<input id={this.props?.id} readOnly={this.props.readOnly || false} placeholder={this.props.placeholder || ''} className="TextInput" value={this.state.value} onChange={(e) => {
this.setState({ value: e.target.value })
if (this.props.onChange) this.props.onChange(e.target.value)
}} />
<div className="TextClear" onClick={() => {
this.setState({ value: '' })
}}>
<img src={Close} className="TextInputClear" />
</div>
</div>
)
}
}