❤
npm
Sign UpSign In

This package has been deprecated

Author message:

WARNING: This project has been renamed to ant-design-kit. Install using ant-design-kit.

retail-cool

1.2.6 • Public • Published

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: 赋给搜索表单的默认值

Readme

Keywords

none

Package Sidebar

Install

npm i retail-cool

Weekly Downloads

0

Version

1.2.6

License

MIT

Unpacked Size

224 kB

Total Files

5

Last publish

Collaborators

  • gaoyong06
  • zling_gnilz
Try on RunKit
Report malware