# Encry 加密

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/encry/freepass)
- 平台：PC
- 维护者：蒋贝贝
- 设计稿：http://pd.e-cology.com.cn//pd/E10/hc/%E6%95%B0%E6%8D%AE%E5%8A%A0%E5%AF%86/#id=yh8jak&p=%E5%AE%9E%E9%99%85%E6%95%88%E6%9E%9C_6&g=1
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[Encry]

## 代码演示

### 基础用法

```jsx
import { RichText } from "@weapp/ui";
import { Encry, Input, Textarea, utils } from "@weapp/ui";
import { PureComponent, ReactText } from "react";

const { getRandom } = utils;
const { InputNumber } = Input;
class EncryBasicInner extends PureComponent<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      value: 'desensitization__b8ff3578-7938-4797-b8b2-8f63581de529'
    }
  }
  onChange = (value: ReactText) => {
    this.setState({ value });
  }
  id = getRandom();
  getTitle = () => {
    const { type, readOnly } = this.props;
    let title = '';
    switch (type) {
      case 'INPUT': title += "单行文本输入框"; break;
      case 'TEXTAREA': title += "多行文本输入框"; break;
      case 'INPUTNUMBER': title += "数字输入框"; break;
      case 'RICHTEXT': title += "富文本"; break;
    }
    return `${title}${readOnly ? '(只读)' : '(可编辑)'}`;
  }
  render() {
    const { type, readOnly, ...resProps } = this.props;
    const { value } = this.state;
    const commonProps = readOnly ? { value } : { value, onChange: this.onChange };
    let content = (
      <Input
        {...commonProps}
        readOnly={readOnly}
        {...resProps}
      />
    )
    if (type === 'TEXTAREA') {
      content = (
        <Textarea
          {...commonProps}
          readOnly={readOnly}
          {...resProps}
        />
      )
    } else if (type === 'INPUTNUMBER') {
      content = (
        <InputNumber {...commonProps} readOnly={readOnly} {...resProps} />
      )
    } else if (type === 'RICHTEXT') {
      content = (<RichText id={this.id} {...commonProps} readOnly={readOnly} {...resProps} />)
    }
    return (<>
      <br />
      {this.getTitle()}
      <br />
      {content}
      <br />
    </>);
  }
}
export default class EncryBasicDemo extends PureComponent<any, any> {
  onEncry = (value: any) => console.log(value);
  onDecrypt = (value: any) => console.log(value);
  encryProps = {
    onEncry: this.onEncry,
    onDecrypt: this.onDecrypt,
  }
  render() {
    return <>
      脱敏数据：
      <Encry
       
        value={'desensitization__b8ff3578-7938-4797-b8b2-8f63581de529'}
        onEncry={this.onEncry}
        onDecrypt={this.onDecrypt}
      />
      <br />
      加密数据：
      <Encry
       
        value={'encryption__c24e6532-6037-499a-8d64-5747ab4cb6ed'}
        onEncry={this.onEncry}
        onDecrypt={this.onDecrypt}
      />
      <EncryBasicInner type="INPUT" readOnly encryProps={this.encryProps} />
      <EncryBasicInner type="INPUT" encryProps={this.encryProps} />
      <EncryBasicInner type="INPUTNUMBER" readOnly encryProps={this.encryProps} />
      <EncryBasicInner type="INPUTNUMBER" encryProps={this.encryProps} />
      <EncryBasicInner type="TEXTAREA" readOnly  encryProps={this.encryProps} />
      <EncryBasicInner type="TEXTAREA" encryProps={this.encryProps} />
      <EncryBasicInner type="RICHTEXT" readOnly encryProps={this.encryProps} />
      <EncryBasicInner type="RICHTEXT" encryProps={this.encryProps} />
    </>
  }
}
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| className | class 类名 | string | 否 | - |
| style | style 样式 | CSSProperties | 否 | - |
| value | 加密数据 | ReactText | 否 | - |
| isMobile | 移动端标记 | boolean | 否 | false |
| readOnly | 只读标记 | boolean | 否 | - |
| onChange | 数据改变回调(仅编辑模式触发) | (value: any, e: any) => void | 否 | - |
| onEncry | 加密回调 | (value: any) => void | 否 | - |
| onDecrypt | 解密回调 | (value: any) => void | 否 | - |
### 其他

```
一、Encry.desensitization // 判断是否为脱敏数据
二、Encry.encryption // 判断是否为加密数据
三、readOnly 为false，为编辑模式，非false不开启编辑模式。
```
