# IconSelection 自定义图标选择

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/icon-selection/freepass)
- 平台：PC
- 维护者：许平源
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/PC/yysz/#s1
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[IconSelection]

## 代码演示

### 使用方法

基础使用方法

```jsx
import React, { PureComponent } from 'react';
import { IconSelection } from '@weapp/ui';

class BasicDemo extends PureComponent<any, any> {

  state = {
    value: 2,
    value2: 4,
    defaultValue: 3
  }
  handleChange = (value: number | string, options: any) => {
    console.log('IconSelection', value, options)
    this.setState({ value })
  }
  handleChange2 = (value: number | string, options: any) => {
    console.log('IconSelection', value, options)
    this.setState({ value2: value })
  }
  render() {
    const { value, value2, defaultValue } = this.state;
    console.log(value)
    return (
      <div>
        <h3>基础使用</h3>
        <IconSelection
          value={value}
          onChange={this.handleChange}
        />
        <h3>开启删除已选功能</h3>
        <IconSelection
          value={value2}
          onChange={this.handleChange2}
          canClear={true}
        />
        <h3>只读</h3>
        <IconSelection
          value={2}
          onChange={this.handleChange}
          readOnly
        />
        <h3>禁用</h3>
        <IconSelection
          value={3}
          onChange={this.handleChange}
          disabled
        />
      </div>
    );
  }
}

export default BasicDemo;
```

### 扩展图标选择

扩展图标选择（RichIconSelection）

```jsx
import React, { PureComponent } from 'react';
import { IconSelection } from '@weapp/ui';

const RichIconSelection = IconSelection.RichIconSelection;

class BasicDemo extends PureComponent<any, any> {

  state = {
    value: 'Icon-Approval-process',
    value2: 'Icon-inc',
  }
  handleChange = (value: number | string, options: any) => {
    console.error('RichIconSelection onChange', value, options)
    this.setState({ value })
  }
  handleChange2 = (value: number | string, options: any) => {
    console.error('RichIconSelection onChange', value, options)
    this.setState({ value2: value })
  }
  render() {
    const { value, value2 } = this.state;
    return (
      <div>
        <h3>基础使用</h3>
        <RichIconSelection
          value={value}
          onChange={this.handleChange}
        />
        <h3>开启删除已选功能</h3>
        <RichIconSelection
          value={value2}
          onChange={this.handleChange2}
          canClear={true}
        />
        <h3>只读</h3>
        <RichIconSelection
          value={'Icon-Cloud-clothing'}
          onChange={this.handleChange}
          readOnly
        />
        <h3>禁用</h3>
        <RichIconSelection
          value={'Icon-order'}
          onChange={this.handleChange}
          disabled
        />
      </div>
    );
  }
}

export default BasicDemo;
```

### 根据 value 获取图标信息

根据 value 去获取 iconSelection 中支持的图标的信息，包括线性图标名称，面性图标名称，图标颜色（可选）

```jsx
import React, { PureComponent } from 'react';
import { Button, IconSelection, Input } from '@weapp/ui';

const { getIconInfo } = IconSelection;

class BasicDemo extends PureComponent<any, any> {
  state = {
    value: ''
  }
  inputChange = (value: React.ReactText) => {
    this.setState({ value })
  }
  handleClick = () => {
    const info = getIconInfo(this.state.value);
    console.error('info', info);
  }
  render() {
    const { value } = this.state;
    return (
      <div>
        <Input value={value} onChange={this.inputChange}/>
        <Button onClick={this.handleClick}>打印信息</Button>
      </div>
    );
  }
}

export default BasicDemo;
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| defaultValue | 自定义图标编号（默认） | `number` \| `string` | false | 1 |
| value | 自定义图标编号 | `number` \| `string` | false |  |
| bindTriggerContainer | 是否将 trigger 弹出层固定在该节点下 | boolean | false | true |
| triggerProps | trigger 的 props | 参考 trigger 组件的 props | false |  |
| onChange | 图标变化回调（第一个参数和 appIcon 的主键相同，第二个参数返回图标的详细信息（包括颜色） | (customId: number,options:any) => void | false |  |
| canClear | 是否启用清除已选功能 | boolean | false |  |
