1.0.0 • Published 9 months ago
roant v1.0.0
roant
基于 antd-design 封装复合组件库
特点
- 使用配置生成表格表单
- 无 ui 副作用、所有参数透传 antd 组件
- 使用的工具组件支持依赖注入
antd 写表单
<Form
name="basic"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
style={{ maxWidth: 600 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item<FieldType>
label="姓名"
name="username"
rules={[{ required: true, message: 'Please input your username!' }]}
>
<Input />
</Form.Item>
<Form.Item<FieldType>
label="密码"
name="password"
rules={[{ required: true, message: 'Please input your password!' }]}
>
<Input.Password />
</Form.Item>
<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
roant 写表单
const formProps: FormProps = {
form,
layout: 'vertical',
rowProps: { gutter: [30, 0] },
colProps: { span: 12 },
fields: [
{
keyPath: 'username',
name: '姓名',
required: true,
},
{
keyPath: 'password',
name: '密码',
required: true,
type: 'password',
},
],
};
<RForm {...formProps} />;
快速接入
环境准备
因同步依赖了 react antd 所以项目需要先保证 peerDependencies 依赖安装
# peerDependencies
{
"@ant-design/icons": ">=4.0.0",
"antd": ">=4.20",
"react": ">=16.9.0",
"react-dom": ">=16.9.0"
}
安装依赖
安装npm包
$ npm i roant -S
组件库配置
组件库使用 react.context 共享配置项在 react 根组件配置,保证全局组件可访问
import { RconfigContext } from 'roant';
<RconfigContext.Provider value={roantConfig}>
<App />
</RconfigContext.Provider>;
组件库配置 roantConfig
{
table: {
// table组件配置
fieldTypes: {
dropdownAction: DropdownAction,
},
},
description: {
fieldTypes: {},
},
form: {
// 表单form组件配置
fieldTypes: {
input: Input,
select: Select,
},
// 表单form组件默认属性
fieldDefaultProps: {
input: { allowClear: true },
select: { allowClear: true },
},
},
// 语言配置
locale: zhCn,
}
国际化 locale
目前默认使用中文,其他语言需自行配置
{
table: {
showTotal: '共{total}条',
},
form: {
// 表单默认渲染placeholder
placeholder: {
input: '请输入{name}',
select: '请选择{name}',
default: '请选择{name}',
},
// 表单默认渲染required
required: {
input: '请输入{name}',
select: '请选择{name}',
default: '请选择{name}',
},
},
searchTable: {
search: '搜索',
reset: '重置',
},
}