neo-widgets/README.md

neo自定义组件注册器（支持 react 和 vue2.0 技术栈），主要用于注册 neo 渲染器、neo-editor 插件。

# neo-widgets
> neo 组件注册器（支持 react 和 vue2.0 技术栈）；
- 提供注册 neo 自定义组件和 neo-editor 自定义插件的方法；
- 目前支持的技术栈：vue2.0、react。

### 提供的方法
- registerRendererByType: 根据type类型注册 neo自定义组件
- registerNeoEditorPlugin: 注册 neo-editor 插件

## 快速使用

```
npm install --save neo-widgets
```

## 注册 neo 自定义组件
```tsx
import { registerRendererByType } from 'neo-widgets';

class MyReactSelect extends React.PureComponent {
  constructor() {
    super();
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    // 调用neo onToggle 方法，变更选择器表单项值
    const {onToggle, options} = this.props;
    const option = options.find(o => o.value === event.target.value);
    if (onToggle) {
      onToggle(option);
    }
  }

  render() {
    // 获取表单项 value 和 options 属性
    const {label, options, title} = this.props;

    return (
      <div className="react-select">
        <span>
          {label}：
        </span>
        <select onChange={this.handleChange} title={title}>
          {options.map(option => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
      </div>
    );
  }
}

// 注册 neo 自定义组件
registerRendererByType(MyReactSelect, 'react-select');

export default MyReactSelect;
```

## 注册 neo-editor 自定义插件
```tsx
import { registerNeoEditorPlugin } from 'neo-widgets';

class ReactSelectPlugin {
  cmpType = 'react-select'; // 自定义组件名称，用于标识组件的唯一性
  label = 'select 自定义组件'; // 组件名称，用于设置在编辑器左侧组件面板中展示的名称
  description = 'react-select 自定义组件'; // 组件描述，用于设置在编辑器左侧组件面板中展示的描述
  tags = ['自定义组件']; // 自定义组件分类
  iconSrc = 'https://neo-widgets.bj.bcebos.com/custom-widget.svg'; // 组件图标，用于设置在编辑器左侧组件面板中展示的图标
  defaultComProps = { // 初次插入页面的默认属性数据
    label: 'select 自定义组件',
    name: 'customSelect',
    options: [
      {
        label: 'A',
        value: 'a'
      },
      {
        label: 'B',
        value: 'b'
      },
      {
        label: 'C',
        value: 'c'
      }
    ]
  };
  previewComProps = { // 设计器端预览时展示的默认数据
    label: 'select 自定义组件',
    options: [
      {
        label: 'A',
        value: 'a'
      },
      {
        label: 'B',
        value: 'b'
      },
      {
        label: 'C',
        value: 'c'
      }
    ]
  };
  panelControls = [ // 组件面板配置，用于生成编辑器右侧属性配置面板内容
    {
      type: 'text',
      name: 'label',
      label: 'label',
      value: 'react-select'
    },
    {
      type: 'textarea',
      name: 'title',
      label: 'hover title',
      value: '点击下拉选择数值'
    }
  ];
}
// 注册一个 neo-editor 自定义插件（仅页面设计器需要，会在组件面板中展示）
registerNeoEditorPlugin(ReactSelectPlugin);

export default ReactSelectPlugin;
```

## 自定义组件配置项设置说明
- panelControls 中可用的配置项类型 请见 [当前可用表单项](./docs/FormItemType.md)。