Cultivation/src/ui/components/common/TextInput.tsx

import React from 'react'

import './TextInput.css'
import Close from '../../../resources/icons/close.svg'

interface IProps {
  value?: string;
  initalValue?: string;
  placeholder?: string;
  onChange?: (value: string) => void;
  readOnly?: boolean;
  id?: string;
  clearable?: boolean;
  customClearBehaviour?: () => void;
  style?: {
    [key: string]: any;
  }
}

interface IState {
  value: string
}

export default class TextInput extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props)

    this.state = {
      value: props.value || ''
    }
  }

  async componentDidMount() {
    if (this.props.initalValue) {
      this.setState({
        value: this.props.initalValue
      })
    }
  }

  static getDerivedStateFromProps(props: IProps, state: IState) {
    return { value: props.value || state.value }
  }

  render() {
    return (
      <div className="TextInputWrapper" id="commonTextInputContainer" style={this.props.style || {}}>
        <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)
        }} />
        {
          this.props.clearable ?
            <div className="TextClear" id="commonTextInputClearableContainer" onClick={() => {
              // Run custom behaviour first
              if (this.props.customClearBehaviour) return this.props.customClearBehaviour()

              this.setState({ value: '' })
    
              if (this.props.onChange) this.props.onChange('')

              this.forceUpdate()
            }}>
              <img src={Close} className="TextInputClear" id="commonTextInputClearableIcon" />
            </div> : null
        }
      </div>
    )
  }
}