码迷，mamicode.com
首页 > 其他好文 > 详细

纪录一些react-antd公共组件demo

时间：2019-09-10 15:05:56      阅读：112      评论：0      收藏：0      [点我收藏+]

标签：默认   16px   ESS   eric   isa   selected   xtend   fill   meta   

import React, { Component } from ‘react‘;
import {
  Form,
  Input,
  Button,
  Row,
  Select,
  Icon,
  Radio,
  Checkbox,
  Table,
  Pagination,
  Card,
  Tabs,
  Upload,
  message,
} from ‘antd‘;
import { connect } from ‘dva‘;
import styles from ‘./index.less‘;

import StandardCard from ‘@/components/StandardCard‘;

const { Option } = Select;
const { TabPane } = Tabs;
// const CheckboxGroup = Checkbox.Group;

@connect(({ fileModal }) => ({
  fileModal,
}))
@Form.create()
class chipStyles extends Component {
  state = {
    total: 500,
    current: 1,
    pageSize: 10,
    current1: 1,
    pageSize1: 10,
    afterIcon: <Icon type="edit" />,
    fileList: [],
    uploading: false,
  };

  inputChange = e => {
    const { value } = e.target;
    if (value !== ‘‘ && value !== undefined) {
      this.setState({
        afterIcon: <Icon type="check-circle" theme="filled" />,
      });
    } else {
      this.setState({
        afterIcon: <Icon type="edit" />,
      });
    }
  };

  handleUpload = () => {
    const { dispatch } = this.props;
    const { fileList } = this.state;
    this.setState({
      uploading: true,
    });

    dispatch({
      type: ‘fileModal/upload‘,
      payload: {
        files: fileList,
      },
      callback: resp => {
        if (resp && resp.sucess) {
          this.setState({
            fileList: [],
            uploading: false,
          });
          message.destroy();
          message.success(‘上传成功‘);
        } else {
          this.setState({
            uploading: false,
          });
          message.destroy();
          message.error(‘上传失败‘);
        }
      },
    });
  };
// 上传
  renderUpload = () => {
    const { uploading, fileList } = this.state;
    const props = {
      onRemove: file => {
        this.setState(state => {
          const index = state.fileList.indexOf(file);
          const newFileList = state.fileList.slice();
          newFileList.splice(index, 1);
          return {
            fileList: newFileList,
          };
        });
      },
      beforeUpload: file => {
        this.setState(() => ({
          // fileList: [...state.fileList, file],
          fileList: [file], // 只上传一个文件
        }));
        return false;
      },
      fileList,
    };
    return (
      <div style={{ marginTop: 32 }}>
        <Upload {...props}>
          <Button>
            <Icon type="upload" /> 选择文件
          </Button>
        </Upload>
        <Button
          type="primary"
          onClick={this.handleUpload}
          disabled={fileList.length === 0}
          loading={uploading}
          style={{ marginTop: 16 }}
        >
          {uploading ? ‘上传中‘ : ‘开始上传‘}
        </Button>
      </div>
    );
  };

  render() {
    const { selectedKeys } = this.state;
    const rowSelection = {
      selectedRowKeys: selectedKeys,
      onChange: selectedRowKeys => {
        this.setState({
          // selecItems: selectedRows,
          selectedKeys: selectedRowKeys,
        });
      },
    };
    const columns = [
      {
        title: ‘表头A‘,
        dataIndex: ‘name1‘,
      },
      {
        title: ‘表头B‘,
        dataIndex: ‘name2‘,
      },
      {
        title: ‘表头C‘,
        dataIndex: ‘name3‘,
      },
    ];
    const { total, current, pageSize, current1, pageSize1, afterIcon } = this.state;
    const itemRender = (curr, type, originalElement) => {
      // console.log(curr);
      if (type === ‘prev‘) {
        return <a>上一页</a>;
      }
      if (type === ‘next‘) {
        return <a>下一页</a>;
      }
      return originalElement;
    };
    const tableData = [
      {
        key: 1,
        name1: ‘显示内容‘,
        name2: ‘显示内容‘,
        name3: ‘显示内容‘,
      },
      {
        key: 2,
        name1: ‘显示内容‘,
        name2: ‘显示内容‘,
        name3: ‘显示内容‘,
      },
      {
        key: 3,
        name1: ‘显示内容‘,
        name2: ‘显示内容‘,
        name3: ‘显示内容‘,
      },
      {
        key: 4,
        name1: ‘显示内容‘,
        name2: ‘显示内容‘,
        name3: ‘显示内容‘,
      },
      {
        key: 5,
        name1: ‘显示内容‘,
        name2: ‘显示内容‘,
        name3: ‘显示内容‘,
      },
      {
        key: 6,
        name1: ‘显示内容‘,
        name2: ‘显示内容‘,
        name3: ‘显示内容‘,
      },
      {
        key: 7,
        name1: ‘显示内容‘,
        name2: ‘显示内容‘,
        name3: ‘显示内容‘,
      },
      {
        key: 8,
        name1: ‘显示内容‘,
        name2: ‘显示内容‘,
        name3: ‘显示内容‘,
      },
      {
        key: 9,
        name1: ‘显示内容‘,
        name2: ‘显示内容‘,
        name3: ‘显示内容‘,
      },
      {
        key: 10,
        name1: ‘显示内容‘,
        name2: ‘显示内容‘,
        name3: ‘显示内容‘,
      },
      {
        key: 11,
        name1: ‘显示内容‘,
        name2: ‘显示内容‘,
        name3: ‘显示内容‘,
      },
      {
        key: 12,
        name1: ‘显示内容‘,
        name2: ‘显示内容‘,
        name3: ‘显示内容‘,
      },
      {
        key: 13,
        name1: ‘显示内容‘,
        name2: ‘显示内容‘,
        name3: ‘显示内容‘,
      },
      {
        key: 14,
        name1: ‘显示内容‘,
        name2: ‘显示内容‘,
        name3: ‘显示内容‘,
      },
      {
        key: 15,
        name1: ‘显示内容‘,
        name2: ‘显示内容‘,
        name3: ‘显示内容‘,
      },
      {
        key: 16,
        name1: ‘显示内容‘,
        name2: ‘显示内容‘,
        name3: ‘显示内容‘,
      },
    ];
    return (
      <div>
        <p>1.按钮样式</p>
        <Row span={24} className={styles.btn_box}>
          <Button type="primary" className="multicolor_btn">
            按钮1
          </Button>
          <Button type="primary" className="blue_btn">
            按钮2
          </Button>
          <Button type="primary" className="red_btn">
            按钮3
          </Button>
          <Button type="primary" className="green_btn">
            按钮4
          </Button>
          <Button type="primary" className="pithy_btn">
            按钮5
          </Button>
        </Row>
        <p>2.输入框样式</p>
        <Row span={24}>
          <Input placeholder="请输入" style={{ width: ‘300px‘ }} />
        </Row>
        <Row span={24}>
          <Input
            placeholder="请输入"
            style={{ width: ‘300px‘ }}
            suffix={afterIcon}
            onChange={this.inputChange}
          />
        </Row>
        <p>3.选择框样式</p>
        <Row span={24}>
          <Select
            showSearch
            style={{ width: 200 }}
            placeholder="请选择"
            suffixIcon={<Icon type="caret-down" />}
          >
            <Option value="jack">Jack</Option>
            <Option value="lucy">Lucy</Option>
            <Option value="tom">Tom</Option>
          </Select>
        </Row>
        <p>4.单选样式</p>
        <Row span={24}>
          <Radio.Group name="radiogroup" defaultValue={1}>
            <Radio value={1}>A</Radio>
            <Radio value={2}>B</Radio>
            <Radio value={3}>C</Radio>
            <Radio value={4}>D</Radio>
          </Radio.Group>
        </Row>
        <p>5.多选样式</p>
        <Row span={24}>
          <Checkbox.Group>
            <Checkbox value="A">A</Checkbox>
            <Checkbox value="B">B</Checkbox>
            <Checkbox value="C" disabled>
              C
            </Checkbox>
            <Checkbox value="D" disabled>
              D
            </Checkbox>
          </Checkbox.Group>
        </Row>
        <p>6.表格样式</p>
        <Row span={24}>
          <Table
            rowSelection={rowSelection}
            dataSource={tableData}
            columns={columns}
            bordered
            pagination={{
              pageSize: pageSize1,
              current: current1,
              showSizeChanger: true,
              showQuickJumper: { goButton: <Button>确定</Button> },
              itemRender,
              total: tableData.length,
              showTotal: totals => {
                return (
                  <span>
                    当前：第<font>{current1}</font>
                    <font>/</font>
                    <font>{Math.ceil(Number(totals) / Number(pageSize1))}</font>
                    页&nbsp;&nbsp;共
                    <font>{totals}</font>条记录&nbsp;&nbsp;每页
                    <font>{pageSize1}</font>条
                  </span>
                );
              },
              onChange: (page, size) => {
                this.setState({
                  current1: page,
                  pageSize1: size,
                });
              },
              onShowSizeChange: (page, size) => {
                this.setState({
                  current1: page,
                  pageSize1: size,
                });
              },
            }}
          />
        </Row>
        <p>7.翻页样式</p>
        <Row span={24}>
          <Pagination
            pageSize={pageSize}
            current={current}
            showSizeChanger
            showQuickJumper={{ goButton: <Button>确定</Button> }}
            itemRender={itemRender}
            total={total}
            showTotal={totals => {
              return (
                <span>
                  当前：第<font>{current}</font>
                  <font>/</font>
                  <font>{Math.ceil(Number(totals) / Number(pageSize))}</font>
                  页&nbsp;&nbsp;共
                  <font>{totals}</font>条记录&nbsp;&nbsp;每页
                  <font>{pageSize}</font>条
                </span>
              );
            }}
            onChange={(page, size) => {
              this.setState({
                current: page,
                pageSize: size,
              });
            }}
            onShowSizeChange={(page, size) => {
              this.setState({
                current: page,
                pageSize: size,
              });
            }}
          />
        </Row>
        <Card className="card_container" title="123" style={{ marginTop: 32 }}>
          test
        </Card>
        <Tabs type="card" style={{ marginTop: 32 }}>
          <TabPane tab="Tab 1" key="1">
            Content of Tab Pane 1
          </TabPane>
          <TabPane tab="Tab 2" key="2">
            Content of Tab Pane 2
          </TabPane>
          <TabPane tab="Tab 3" key="3">
            Content of Tab Pane 3
          </TabPane>
        </Tabs>
        <StandardCard src="./assets/common/peizhi.png" style={{ marginTop: 32 }}>
          {/*  RouterCard */}
          <StandardCard.Meta title="StandardCard.Meta" />
          {/*  高度为内容高度 */}
        </StandardCard>
        <StandardCard src="./assets/common/peizhi.png" style={{ marginTop: 32 }} full>
          {/*  RouterCard */}
          <StandardCard.Meta
            title="StandardCard.Meta"
            titleStyle={{ color: ‘red‘, fontSize: 22 }}
          />
          {/*  高度占满 */}
        </StandardCard>
        {this.renderUpload()}
      </div>
    );
  }
}
export default chipStyles;
 
// 面包屑 StandardCard公共组件代码 
CommonCard.js
import React from ‘react‘;
import { Card } from ‘antd‘;
import classnames from ‘classnames‘;
import styles from ‘./index.less‘;

const Meta = ({ title, titleStyle, className, src, ...rest }) => {
  const titleNode = (
    <div className={styles.metaTitleContainer}>
      <div />
      <span style={titleStyle}>{title}</span>
    </div>
  );
  const cls = classnames(styles.meta, className);

  return <Card.Meta className={cls} title={titleNode} {...rest} />;
};
export default Meta;
CommonTitle.js
import React from ‘react‘;
import styles from ‘./index.less‘;

const CommonTitle = ({ src, title }) => {
  return (
    <div className={styles.title}>
      {src && <img src={src}  />}
      {title}
    </div>
  );
};

export default CommonTitle;
index.js
import React from ‘react‘;
import CommonCard from ‘./CommonCard‘;
import RouterCard from ‘./RouterCard‘;
import Meta from ‘./Meta‘;
import RouterTitle from ‘./RouterTitle‘;
import CommonTitle from ‘./CommonTitle‘;

const StandardCard = ({ showTitle, ...rest }) => {
  return showTitle ? <CommonCard {...rest} /> : <RouterCard {...rest} />;
};
StandardCard.RouterTitle = RouterTitle;
StandardCard.CommonTitle = CommonTitle;
StandardCard.Meta = Meta;
export default StandardCard;
/**
 * full属性： 卡片最小宽度是否占满屏幕，默认：false
 * eg:
 * 顶部显示自定义内容
 * <StandardCard src=‘./assets/common/peizhi.png‘ title=‘你好/你好‘ showTitle>
 *    内容
 * </StandardCard>
 *
 * 顶部显示路由内容
 * <StandardCard src=‘./assets/common/peizhi.png‘>
 *    内容
 * </StandardCard>
 */
index.less
@import ‘~antd/lib/style/themes/default.less‘;

.cardFull {
  min-height: 100%;
}

.title {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: @primary-color;
  font-weight: bold;
  img {
    width: 30px;
    height: 30px;
    margin-right: 6px;
  }

  :global {
    .ant-breadcrumb {
      font-size: 16px !important;
      a {
        color: @primary-color !important;
      }
      span {
        color: @primary-color !important;
      }
    }
  }
}

.meta {
  margin-top: 30px;
  margin-bottom: 20px;
}

.metaTitleContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  div {
    width: 5px;
    height: 18px;
    border-radius: 3px;
    background-color: @primary-color;
    margin-right: 8px;
  }
  span {
    color: @primary-color;
    font-size: 16px;
  }
}
Meta.js
import React from ‘react‘;
import { Card } from ‘antd‘;
import classnames from ‘classnames‘;
import styles from ‘./index.less‘;

const Meta = ({ title, titleStyle, className, src, ...rest }) => {
  const titleNode = (
    <div className={styles.metaTitleContainer}>
      <div />
      <span style={titleStyle}>{title}</span>
    </div>
  );
  const cls = classnames(styles.meta, className);

  return <Card.Meta className={cls} title={titleNode} {...rest} />;
};
export default Meta;
RouterCard.js
import React from ‘react‘;
import { withRouter } from ‘umi‘;
// import Link from ‘umi/link‘;
import { Card } from ‘antd‘;
import classnames from ‘classnames‘;
import RouterTitle from ‘./RouterTitle‘;
import styles from ‘./index.less‘;

const RouterCard = ({ src, children, className, full, staticContext, ...rest }) => {
  const titleEle = <RouterTitle src={src} />;

  let cls = classnames(‘card_container‘, className);
  if (full) {
    cls = classnames(cls, styles.cardFull);
  }
  return (
    <Card className={cls} {...rest} title={titleEle}>
      {children}
    </Card>
  );
};

export default withRouter(RouterCard);

/**
 * eg:
 * <StandardCard src=‘./assets/common/peizhi.png‘>
 *    内容
 * </StandardCard>
 */
RouterTitle.js
import React from ‘react‘;
// import Link from ‘umi/link‘;
import { Breadcrumb } from ‘antd‘;
import { conversionBreadcrumbList } from ‘@/components/PageHeaderWrapper/breadcrumb‘;
import MenuContext from ‘@/layouts/MenuContext‘;
import styles from ‘./index.less‘;

const RouterTitle = ({ src }) => {
  return (
    <MenuContext.Consumer>
      {value => {
        const breadcrumbList = conversionBreadcrumbList({ ...value });

        const extraBreadcrumbItems = breadcrumbList.routes.map(item => {
          const href= item.hideInMenu ? `#${item.path}` : ‘‘
          const ps = {
            key: item.path
          }
          if (href) {
            ps.href = href
          }

          return (
            <Breadcrumb.Item {...ps}>
              <span>{item.breadcrumbName}</span>
            </Breadcrumb.Item>
          )
        });
        const breadcrumbItems = extraBreadcrumbItems;
        // const breadcrumbItems = [
        //   <Breadcrumb.Item key=‘home‘>
        //     <Link to=‘/home‘>Home</Link>
        //   </Breadcrumb.Item>,
        // ].concat(extraBreadcrumbItems)
        return (
          <div className={styles.title}>
            {src && <img src={src} />}
            <Breadcrumb>{breadcrumbItems}</Breadcrumb>
          </div>
        );
      }}
    </MenuContext.Consumer>
  );
};

export default RouterTitle;
 
 
 

纪录一些react-antd公共组件demo

标签：默认   16px   ESS   eric   isa   selected   xtend   fill   meta   

原文地址：https://www.cnblogs.com/jinchi/p/11497304.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！