retail-cool v1.2.6

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

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

ConfirmSwitch

基于 antd switch

import React from 'react';
import { ConfirmSwitch } from 'retail-cool';

const Example = () => {
  const handleOk = () => {
    // should return Promise
  };
  return;
  <>
    <ConfirmSwitch onChange={handleOk} />
  </>;
};

API

Loadimg

点击查看原图 基于 antd Modal

import React from 'react';
import { Loadimg } from 'retail-cool';

const Example = () => {
  return <Loadimg src='图片地址' style={{ width: 120, height: 120 }} />;
};

API

说明

• 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

Method

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

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

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

Method

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 上

表格参数

最终整合为 { ...params, ...location.query, ...formData, ...payload }

• payload: 赋给表格的 payload, 请求时会带上, 再次执行搜索会将请求参数 payload 重新赋值
• params: 赋给表格的 params, 请求时会一直带上, 再次执行搜索不会覆盖 params
• location.query: 路由上的参数, 开启了更改路由才会执行
• formData: 赋给搜索表单的默认值