2022-08-20

king

2022-08-20 e24c707ba13733903c310334fb0bbee1667ca4f6

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons'
 
import './index.scss'
 
class Encryption extends Component {
  static propTpyes = {
    value: PropTypes.any
  }
 
  state = {
    eye: false
  }
 
  getValue = () => {
    const { value } = this.props
 
    let len = value.length
    let val = ''
 
    if (len === 1) {
      val = '*'
    } else if (len === 2) {
      val = value.substr(0, 1) + '*'
    } else if (len <= 6) {
      val = value.substr(0, 1) + Array(len - 1).join('*') + value.substr(-1)
    } else if (len <= 10) {
      val = value.substr(0, 2) + Array(len - 3).join('*') + value.substr(-2)
    } else if (len === 11) {
      val = value.substr(0, 3) + '****' + value.substr(-4)
    } else {
      let l = Math.floor(len * 0.2)
      val = value.substr(0, l) + Array(len - 1 - 2 * l).join('*') + value.substr(-l)
    }
 
    return val
  }
 
  render() {
    const { value } = this.props
    const { eye } = this.state
 
    return (
      <>
        {eye ? value : this.getValue()}
        {eye ? <EyeOutlined className="mk-open-eye" onClick={() => this.setState({eye: false})}/> : <EyeInvisibleOutlined className="mk-close-eye" onClick={() => this.setState({eye: true})}/>}
      </>
    )
  }
}
 
export default Encryption