retail-cool
Components based on
antd
,@ant-design/icons
,react
,react-dom
,react-router-dom
Install
npm install --save retail-cool
Usage
引入 CSS
@import '~retail-cool/dist/index.css';
或者 js 中引入
import 'retail-cool/dist/index.css';
Components
ConfirmBtn
基于 antd Popconfirm
import React from 'react';
import { ConfirmBtn } from 'retail-cool';
const Example = () => {
const handleOk = () => {
// should return Promise
};
return;
<>
<ConfirmBtn type='button' onOk={handleOk} />
<ConfirmBtn
onOk={handleOk}
mode='modal'
title='确认删除第一行吗?'
content='删除后不可恢复'
/>
</>;
};
API
属性名 | 说明 | 默认值 |
---|---|---|
type | 按钮类型 a 或 button | 'a' |
mode | 确认类型 popover 或 modal | 'popover' |
pop | 只对 mode='popover'有效, 是否显示 Popconfirm | true |
text | a 或 button 文字 | '删除' |
title | Popconfirm / Modal 的标题 | '确定删除吗?' |
content | Modal 的 content | - |
disabled | 布尔值 | false |
onOk | function, 点击确认触发, 需返回 promise | - |
onCancel | 点击取消触发 | - |
okText | 确认按钮文字 | '确定' |
cancelText | 取消按钮文字 | '取消' |
buttonProps | button 属性 | type='primary' |
style | 放在 a 或 button 上 | - |
className | 放在 a 或 button 上 | - |
successMessage | 为 false 时, 不显示提示 | text + '成功' |
PromiseBtn
基于 retail-cool ConfirmBtn
import React from 'react';
import { PromiseBtn } from 'retail-cool';
const Example = () => {
const handleAction = () => {
// should return Promise
};
return;
<>
<PromiseBtn type='button' onClick={handleAction}>
点击
</PromiseBtn>
<PromiseBtn type='a' onClick={handleAction}>
点击
</PromiseBtn>
</>;
};
API
属性名 | 说明 | 默认值 |
---|---|---|
type | 按钮类型 a 或 button | 'button' |
onClick | function, 点击确认触发, 需返回 promise | - |
buttonProps | button 属性 | type='primary' |
style | 放在 a 或 button 上 | - |
className | 放在 a 或 button 上 | - |
ConfirmSwitch
基于 antd switch
import React from 'react';
import { ConfirmSwitch } from 'retail-cool';
const Example = () => {
const handleOk = () => {
// should return Promise
};
return;
<>
<ConfirmSwitch onChange={handleOk} />
</>;
};
API
属性名 | 说明 | 默认值 |
---|---|---|
onChange | function, 应返回 Promise | - |
enableMessage | 启用成功时候的 message | '启用' |
disableMessage | 禁用成功时候的 message | '禁用' |
Loadimg
点击查看原图 基于 antd Modal
import React from 'react';
import { Loadimg } from 'retail-cool';
const Example = () => {
return <Loadimg src='图片地址' style={{ width: 120, height: 120 }} />;
};
API
属性名 | 说明 | 默认值 |
---|---|---|
preview | 是否需要查看原图 | false |
fallback | 图片加载失败时的占位符 | 默认的裂图 |
modalProps | 预览 Modal 的 props | - |
说明
- loading 状态:
<span className='cool-loadimg-load'> <LoadingOutlined className='cool-loadimg-loading' /> </span>
- 加载失败
<span className='cool-loadimg-error-span'> <img className='cool-loadimg-error' src={fallback} // ...其他 /> </span>
- 带预览
<span onClick={handleView} className='cool-loadimg-span'> <span className='cool-loadimg-preview'>{previewContent}</span> <img src={src} // ...其他 /> </span>
Modal Form
基于 antd Modal, message
表单基于 retail-cool Form
import React, { useRef } from 'react';
import { ModalForm } from 'retail-cool';
const Example = () => {
const modalFormRef = useRef();
const handleClick = () => {
modalFormRef.current.open();
};
const handleSubmit = () => {
// return Promise
};
const formAttr = [
{ label: '名称', key: 'name' },
{ label: '邮箱', key: 'email' },
];
return (
<React.Fragment>
<Button onClick={handleClick}>点击</Button>
<ModalForm
ref={modalFormRef}
title='增加信息'
formAttr={formAttr}
onSubmit={handleSubmit}
/>
</React.Fragment>
);
};
API
属性名 | 说明 | 默认值 |
---|---|---|
title | 标题 | - |
formData | 表单初始值 | {} |
formDataLoading | 布尔值,异步获取表单数据时的 loading | - |
formAttr | 表单结构数组 | [] |
payload | 默认数据,表单提交时一起提交 | - |
onSubmit | 表单提交 function,需返回 Promise | - |
onCancel | 点击取消按钮的回调 | - |
okText | 弹框确认按钮的文字 | '保存' |
cancelText | 弹框取消按钮的文字 | '取消' |
modalProps | Modal 上的其他属性 | {} |
successMessage | 表单提交成功后的提示文字, successMessage 值为 false 时, 不显示提示 | title + '成功' |
cancelMessage | 表单提交成功后的提示文字, cancelMessage 值为 false 时, 不显示提示 | false |
formProps | Form 上的其他属性 | {} |
Method
属性名 | 说明 | 默认值 |
---|---|---|
open | 打开 ModalForm | - |
close | 关闭 Modal, 一般情况下不需要主动调用 | - |
config | 设置 Form 默认属性 | - |
CreateField
主要为 retail-cool Form 服务, 也可单独使用
在 Form 中使用时, formAttr 的每一项将作为属性放在 CreateField 上, 例如
{ label:'标题', key:'title', type:'text' }
使用为
import React, { useRef } from 'react';
import { CreateField } from 'retail-cool';
const Example = () => {
return <CreateField label='标题' name='title' key='title' type='text' >
}
Form
基于 antd Form
基于 retail-cool CreateField
根据配置生成表单
import React from 'react';
import { Form } from 'retail-cool';
const Example = () => {
const handleSubmit = (values) => {
console.log('form submit >>', values);
};
return <Form formAttr={formAttr} onSubmit={handleSubmit} />;
};
API
属性名 | 说明 | 默认值 |
---|---|---|
editable | 是否编辑状态 | true |
data | 表单默认值 | {} |
layout | 布局方式,horizontal 或 vertical,同 antd Form | 'horizontal' |
formAttr | 见下方说明 | [] |
loading | 布尔值,表单提交时的 loading | - |
onSubmit | 表单验证成功后的提交 | - |
submitButtonProps | 如果用默认的保存按钮,按钮属性 | - |
submitText | 如果用默认的保存按钮,按钮文字 | 提交 |
submitAction | 自定义 保存按钮 | button |
onCancel | 如果用默认的取消按钮,点击取消按钮的事件, 默认重置表单 | reset form |
cancelAction | 自定义 取消按钮 | button |
cancelText | 如果用默认的取消按钮,按钮文字 | 重置 |
scrollToFirstError | 同 antd Form | true |
labelCol | 同 antd Form | { xs: { span: 24 }, sm: { span: 5 } } |
wrapperCol | 同 antd Form | { xs: { span: 24 }, sm: { span: 15 } } |
actionCol | action 按钮的布局, 会自动获取, 也可自行设置 | - |
showAction | 是否显示 action 按钮 | true |
formExtra | 放在 action 按钮后面的内容 | - |
FormAttr 说明 格式为:
{ label, key, type, fieldProps, formProps, rules, required, message, shouldUpdate, component, viewComponent, editable }
如果 required 为 true, 与 message 生成第一条 rule, 将拼接 rules
message 默认用 label 生成, 可自己设置
当 editable 为 false 时, viewComponent 自定义用来展示用的组件, 默认用原本的组件
formProps 将放在 FormItem 上
fieldProps 将放在控件上
type 类型: text, email, textarea, select, int, number, radio, checkbox, url, group, block, onlyLabel
Form.getField
主要为 type = shouldUpdate 服务, 根据配置生成 FormItem
Method
属性名 | 说明 | 默认值 |
---|---|---|
resetFields | 重置表单到初始值 | - |
setFieldsValue | 设置某 field 值, 同 antd Form | - |
setFields | 设置某些 fields, 同 antd Form | - |
getFieldValue | 获取某 field 值, 同 antd Form | - |
getFieldsValue | 获取某些 fields 值, 同 antd Form | - |
validateFields | 同 antd Form | - |
scrollToField | 同 antd Form | - |
getFieldError | 同 antd Form | - |
getFieldsError | 同 antd Form | - |
isFieldTouched | 同 antd Form | - |
isFieldsTouched | 同 antd Form | - |
submit | 手动触发 form 的提交, 仍通过 onSubmit 获取数据 | - |
config | 设置 Form 默认属性, labelCol, wrapperCol, onCancel, cancelText | - |
Table Page
基于 antd Table, 大部分属性与 antd Table 一致
进入页面时, 根据配置自动获取内容, 已封装分页相关, 有 table 和 list 两种类型
import React from 'react';
import { TablePage } from 'retail-cool';
const Example = ({ list, listPager, loading, dispatch }) => {
const columns = [
{ title: 'ID', dataIndex: 'id' },
{ title: 'Name', dataIndex: 'name' },
];
const renderItem = (item) => (
<div className='list-item'>
<p>{item.name}</p>
<p>{item.email}</p>
</div>
);
return (
<React.Fragment>
<srong>table</srong>
<TablePage
dispatch={dispatch}
columns={columns}
type='demo/list'
loading={loading}
dataSource={list}
pageData={listPager}
rowKey='id'
/>
<srong>list</srong>
<TablePage
listType='list'
grid={{ gutter: 32, column: 6 }}
dispatch={dispatch}
type='demo/list'
loading={loading}
dataSource={list}
pageData={listPager}
renderItem={renderItem}
rowKey='id'
/>
</React.Fragment>
);
};
API
属性名 | 说明 | 默认值 |
---|---|---|
dispatch | dispatch | - |
type | dispatch 的 type | - |
columns | 同 antd Table | [] |
dataSource | 用来渲染的数据 | [] |
loading | 请求接口时的 loading | - |
listType | table 或 list | 'table' |
needPage | 是否需要页码 | true |
onChange | 翻页等时的回调 | - |
renderItem | 给 List 使用 | - |
payload | 获取数据时,放入接口参数,调用 getList 的参数将覆盖 payload | - |
params | 获取数据时,放入接口参数,不会被覆盖 | - |
pagination | 同 antd Table | - |
currentName | pageData 中 current page 的 key | 'currentPage' |
sizeName | pageData 中 size 的 key | 'pageSize' |
totalName | pageData 中 total 的 key | 'totalRows' |
dispatchSizeName | 提供给接口 current page 的 key | 'current' |
dispatchCurrentName | 提供给接口 size 的 key | 'size' |
hide | 是否渲染该列 | - |
Method
属性名 | 说明 | 默认值 |
---|---|---|
getList | 获取某页内容 | getList(p = 1, payload = {}){ } |
reloadPage | 重新获取某页内容,默认是当前页,-1 为前一页, 1 为后一页 | reloadPage(v=0) |
config | 设置 TablePage 默认属性, currentName, sizeName, dispatchSizeName, dispatchCurrentName | - |
Content Table
基于 retail-cool TablePage, Form
在 TablePage 基础上, 增加搜索表单
import React from 'react';
import { ContentTable } from 'retail-cool';
const Example = ({ list, listPager, loading, dispatch }) => {
const columns = [
{ title: 'ID', dataIndex: 'id' },
{ title: 'Name', dataIndex: 'name' },
];
const formAttr = [
{ label: '名称', key: 'name' },
{ label: '邮箱', key: 'email' },
];
const renderItem = (item) => (
<div className='list-item'>
<p>{item.name}</p>
<p>{item.email}</p>
</div>
);
return (
<React.Fragment>
<srong>table</srong>
<ContentTable
dispatch={dispatch}
type='demo/list'
formAttr={formAttr}
dataSource={list}
columns={columns}
rowKey='id'
>
other element
</ContentTable>
<srong>list</srong>
<ContentTable
dispatch={dispatch}
type='demo/list'
listType='list'
grid={{ gutter: 32, column: 6 }}
formAttr={formAttr}
dataSource={list}
renderItem={renderItem}
rowKey='id'
>
other element
</ContentTable>
</React.Fragment>
);
};
API
其他属性与 retail-cool Form, TablePage 相同, 不再列举. TablePage 的属性直接写在 ContentTable 上
属性名 | 说明 | 默认值 |
---|---|---|
extra | 放置于搜索表单 右侧的内容 | - |
replaceLocation | 搜索时, 是否替换 location query | false |
formProps | 其他放置于搜索表单上的属性 | - |
showReset | 默认不显示重置按钮 | false |
tableProps | 其他放置于 table 上的属性 | - |
listProps | 其他放置于 list 上的属性 | - |
searchQueryFn | function 类型, 从 location 取的 query 做处理再赋给 form, 需返回 object | - |
searchValueFn | function 类型, 搜索表单提交时将 data 处理再去请求接口, 需返回 object。请勿在该 function 中触发 setState | - |
以下为表格选择属性 | ||
selected | 当前选择列(需要手动控制选择列时) | - |
showSelect | 显示表格选择 | false |
showResultAll | 显示 本页全选/结果全选 | false |
showSelectInfo | 已选择几个文字信息 | true |
rowDisable | function, 返回布尔值 用在 selections disabled | - |
rowSelection | 用于 Table 上。当 showSelect=true 时, 将与默认 rowSelection 合并, 再赋给 Table | - |
onTableSelectChange | function({type, selectedRowKeys, selectedRows}), 选择项发生变化的回调, type 值为 'currentPage' 或 'resultAll' , 本页全选和手动勾选的 type 都是 'currentPage' | - |
columnTitle | showResultAll=true 时, 内置了自定义 columnTitle, 设置 columnTitle=false, 可使用 antd table 的默认 columnTitle | - |
表格参数
最终整合为
{ ...params, ...location.query, ...formData, ...payload }
-
payload
: 赋给表格的 payload, 请求时会带上, 再次执行搜索会将请求参数 payload 重新赋值 -
params
: 赋给表格的 params, 请求时会一直带上, 再次执行搜索不会覆盖 params -
location.query
: 路由上的参数, 开启了更改路由才会执行 -
formData
: 赋给搜索表单的默认值