import React, { Component } from 'react'
|
import { is, fromJS } from 'immutable'
|
import { Input } from 'antd'
|
import md5 from 'md5'
|
|
import MKEmitter from '@/utils/events.js'
|
|
import './index.scss'
|
|
/**
|
* @description 自定义文本输入
|
*/
|
class MKInput extends Component {
|
constructor(props) {
|
super(props)
|
|
const config = props.config
|
let _value = config.initval
|
let encryption = 'false'
|
|
if (config.encryption === 'true') {
|
encryption = 'true'
|
if (_value) {
|
try {
|
_value = window.decodeURIComponent(window.atob(_value))
|
} catch (e) {
|
_value = config.initval
|
}
|
}
|
} else if (config.encryption === 'md5') {
|
encryption = 'md5'
|
}
|
|
this.state = {
|
value: _value,
|
encryption
|
}
|
}
|
|
inputRef = React.createRef()
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
componentDidMount () {
|
MKEmitter.addListener('mkFC', this.mkFormHandle)
|
}
|
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
MKEmitter.removeListener('mkFC', this.mkFormHandle)
|
}
|
|
mkFormHandle = (type, uuid, value) => {
|
if (uuid !== this.props.config.uuid) return
|
if (type === 'focus') {
|
this.inputRef.current.select()
|
} else if (type === 'input') {
|
this.setState({value})
|
let _val = value
|
|
if (this.state.encryption === 'true') {
|
try {
|
_val = window.btoa(window.encodeURIComponent(_val))
|
} catch (e) {
|
_val = value
|
}
|
this.props.onChange(_val)
|
} else if (this.state.encryption === 'md5') {
|
_val = _val + ''
|
_val = md5(_val.toLowerCase())
|
_val = _val.toUpperCase()
|
|
this.props.onChange(_val)
|
} else {
|
this.props.onChange(_val, true)
|
}
|
}
|
}
|
|
handleChange = (e) => {
|
let val = e.target.value
|
let submit = /\n/g.test(val)
|
|
if (submit) {
|
val = val.replace(/\n|'/g, '')
|
}
|
|
if (submit && /^\s+$/.test(val)) {
|
submit = false
|
}
|
|
let _val = val
|
|
if (this.state.encryption === 'true') {
|
try {
|
_val = window.btoa(window.encodeURIComponent(_val))
|
} catch (e) {
|
_val = val
|
}
|
} else if (this.state.encryption === 'md5') {
|
_val = md5(_val.toLowerCase())
|
_val = _val.toUpperCase()
|
}
|
|
this.props.onChange(_val)
|
|
this.setState({value: val}, () => {
|
if (submit) {
|
this.handleInputSubmit()
|
} else if (!val) {
|
this.inputRef.current.focus()
|
}
|
})
|
}
|
|
handleInputSubmit = () => {
|
const { config } = this.props
|
|
if (config.enter === 'false') return
|
if (config.enter === 'tab') {
|
MKEmitter.emit('mkFC', 'focus', config.tabUuid)
|
} else {
|
MKEmitter.emit('mkFC', 'focus', config.tabUuid)
|
this.props.onSubmit(config.tabUuid, config.errTabUuid)
|
}
|
}
|
|
render() {
|
const { config } = this.props
|
const { value } = this.state
|
|
if (config.inputType === 'password') {
|
return <Input.Password ref={this.inputRef} className="mk-form-input" placeholder={config.placeholder || ''} value={value} autoComplete="off" disabled={config.readonly} onChange={this.handleChange} onPressEnter={this.handleInputSubmit}/>
|
}
|
|
return <Input ref={this.inputRef} className="mk-form-input" allowClear placeholder={config.placeholder || ''} value={value} autoComplete="off" disabled={config.readonly} onChange={this.handleChange} onPressEnter={this.handleInputSubmit} />
|
}
|
}
|
|
export default MKInput
|
