IconPicker 图标选择框

图标选择框。

何时使用

当用户需要输入一个图标，可以点击标准输入框，弹出图标面板进行选择。

代码演示

基本使用

图标选择器。

import React from 'react';
import ReactDOM from 'react-dom';
import { IconPicker } from 'choerodon-ui/pro';
​
function handleChange(value, oldValue) {
  console.log('[datepicker]', value, '[oldValue]', oldValue);
}
​
ReactDOM.render(
  <IconPicker onChange={handleChange} />,
  document.getElementById('container')
);
​

受控图标选择器

受控图标选择器

​
import React from 'react';
import ReactDOM from 'react-dom';
import { IconPicker } from 'choerodon-ui/pro';
​
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'add',
    };
  }
​
  handleChange = (value, oldValue) => {
    console.log('[newValue]', value, '[oldValue]', oldValue);
    this.setState({
      value,
    });
  }
​
  render() {
    return <IconPicker value={this.state.value} onChange={this.handleChange} />;
  }
}
​
ReactDOM.render(
  <App />,
  document.getElementById('container')
);

数据源

绑定数据源。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, IconPicker } from 'choerodon-ui/pro';
​
function handleDataSetChange({ record, name, value, oldValue }) {
  console.log('[dataset newValue]', value, '[oldValue]', oldValue, `[record.get('${name}')]`, record.get(name));
}
​
class App extends React.Component {
  ds = new DataSet({
    autoCreate: true,
    fields: [
      { name: 'icon', type: 'string', defaultValue: 'cancel', required: true },
    ],
    events: {
      update: handleDataSetChange,
    },
  });
​
  render() {
    return <IconPicker dataSet={this.ds} name="icon" />;
  }
}
​
ReactDOM.render(
  <App />,
  document.getElementById('container')
);

API

customFontName 属性说明

• 解决需求：可以用户客制化字体库进行项目专属的 icon 配置。

• 使用步骤：

  1. 先按照 icon 配置进行第三方自定义的 icon 配置
  2. 在 configure 配置需要的 icons 或者 用 icons 封装成项目公共组件（推荐） 字符串数组以及分类，完成配置后可以自定义选择使用
  3. 配置对应的 customFontName 就可以实现自定义项目 icon 选择

// 示例代码
<IconPicker icons={['clubs']} customFontName="c7ntest1" />

更多属性请参考 TriggerField。