open-index/open-npm huggingface dataset:
npm package: @kn-oa-components/antd3
Description: > 基于`Antd` 3.x 版本抽出的组件，参数API可参考`Antd` > 部分组件如: `Select` `Form` 做了一些改动，可参考下面例子
Latest version: 0.0.4

# antd 3.X OA组件库

> 基于`Antd` 3.x 版本抽出的组件，参数API可参考`Antd`
> 部分组件如: `Select` `Form` 做了一些改动，可参考下面例子 

[Button](#Button)
[Select](#Select)
[Dialog](#Dialog)
[Form](#Form)

## Button

未做封装，参考`Antd`

实例
```jsx
<Button>123</Button>
```

## Select

增加`options`参数，用于渲染下拉框，
增加`valueField`参数, 控制`value`字段
增加`labelField`参数, 控制`label`字段
其他参数不受影响

实例
```js
const options = [
  {
    value: 1,
    label: 1,
  },
  {
    value: "lucy",
    label: "lucy",
    children: "自定义一些文案"
  },
  {
    value: "disabled",
    label: "disabled",
    disabled: true
  }
]
```
```html
<Select
  options={options}
  style={{width: 200}}
  defaultValue={1}
  optionLabelProp="label"
/>
```

## Dialog

提示弹窗依旧使用原组件

```html
<Button onClick={() => {Alert("12333")}}>Alert 默认成功提示</Button>
<Button onClick={() => {ShowErrorAlert("必填")}}>错误提示</Button>
```

若需要修改配置，参数可以传如对象

```html
<Button onClick={() => {Alert({
    width: 310,
    content: "内容",
    onOk: () => {},
    okText: "已阅读"
  })}}>灵活配置</Button>
```

一般弹窗也是类似用法，需要说明: 内容组件用`content`传入，其他参数`Antd`

```html
<Button onClick={this.onShowModal}>Modal</Button>
```
```js
function onShowModal() {
  Modal.show({
    title: "标题",
    content: <div>Modal Node</div>,
    onOk: this.onOk
  })
}
```


## Form

> 为了后续升级方便，封装后的用法，像4.0靠拢

1. 原`const FormCom = Form.create()(Com)`改为`const FormCom = Form.useForm(Com)`;
2. `Form`需要传入`form={this.props.form}`
3. 支持`initialValues`参数，同意传入初始值，`Form.Item`传初始值优先
4. `Form.Item` 只需要传`name` `label` `rules`等即可

实例
```js
class Com extends Component {
  <Form form={this.props.form} initialValues={{ name: "张三" }} {...ALL_LINE_LAYOUT} >
    <Form.Item name="name" label="姓名" rules={[{ required: true }]}>
      <Input type="hidden" />
      <span>张三</span>
    </Form.Item>
  </Form>
}

const FormCom = Form.useForm(Com);
```