index.tsx 5.76 KB
Newer Older
陈帅's avatar
陈帅 committed
1
import { Card, Col, Form, List, Row, Select, Typography } from 'antd';
陈帅's avatar
陈帅 committed
2
import React, { Component } from 'react';
陈帅's avatar
陈帅 committed
3

陈帅's avatar
陈帅 committed
4 5
import { Dispatch } from 'redux';
import { FormComponentProps } from 'antd/es/form';
陈帅's avatar
陈帅 committed
6 7
import { connect } from 'dva';
import moment from 'moment';
陈帅's avatar
陈帅 committed
8
import AvatarList from './components/AvatarList';
陈帅's avatar
陈帅 committed
9 10
import { StateType } from './model';
import { ListItemDataType } from './data.d';
陈帅's avatar
陈帅 committed
11 12 13
import StandardFormRow from './components/StandardFormRow';
import TagSelect from './components/TagSelect';
import styles from './style.less';
陈帅's avatar
陈帅 committed
14

15 16
const { Option } = Select;
const FormItem = Form.Item;
陈帅's avatar
陈帅 committed
17
const { Paragraph } = Typography;
18

陈帅's avatar
陈帅 committed
19
interface PAGE_NAME_UPPER_CAMEL_CASEProps extends FormComponentProps {
陈帅's avatar
陈帅 committed
20
  dispatch: Dispatch<any>;
陈帅's avatar
陈帅 committed
21
  BLOCK_NAME_CAMEL_CASE: StateType;
陈帅's avatar
陈帅 committed
22 23
  loading: boolean;
}
24

陈帅's avatar
陈帅 committed
25
class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEProps> {
26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'BLOCK_NAME_CAMEL_CASE/fetch',
      payload: {
        count: 8,
      },
    });
  }

  render() {
    const {
      BLOCK_NAME_CAMEL_CASE: { list = [] },
      loading,
      form,
    } = this.props;
    const { getFieldDecorator } = form;

    const cardList = list ? (
陈帅's avatar
陈帅 committed
45
      <List<ListItemDataType>
46 47 48 49 50 51 52 53 54 55 56 57 58
        rowKey="id"
        loading={loading}
        grid={{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }}
        dataSource={list}
        renderItem={item => (
          <List.Item>
            <Card
              className={styles.card}
              hoverable
              cover={<img alt={item.title} src={item.cover} />}
            >
              <Card.Meta
                title={<a>{item.title}</a>}
陈帅's avatar
陈帅 committed
59 60 61 62 63
                description={
                  <Paragraph className={styles.item} ellipsis={{ rows: 2 }}>
                    {item.subDescription}
                  </Paragraph>
                }
64 65 66 67
              />
              <div className={styles.cardItemContent}>
                <span>{moment(item.updatedAt).fromNow()}</span>
                <div className={styles.avatarList}>
陈帅's avatar
陈帅 committed
68
                  <AvatarList size="small">
陈帅's avatar
陈帅 committed
69
                    {item.members.map(member => (
70
                      <AvatarList.Item
陈帅's avatar
陈帅 committed
71
                        key={`${item.id}-avatar`}
72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92
                        src={member.avatar}
                        tips={member.name}
                      />
                    ))}
                  </AvatarList>
                </div>
              </div>
            </Card>
          </List.Item>
        )}
      />
    ) : null;

    const formItemLayout = {
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };

    return (
陈帅's avatar
陈帅 committed
93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111
      <div className={styles.coverCardList}>
        <Card bordered={false}>
          <Form layout="inline">
            <StandardFormRow title="所属类目" block style={{ paddingBottom: 11 }}>
              <FormItem>
                {getFieldDecorator('category')(
                  <TagSelect expandable>
                    <TagSelect.Option value="cat1">类目一</TagSelect.Option>
                    <TagSelect.Option value="cat2">类目二</TagSelect.Option>
                    <TagSelect.Option value="cat3">类目三</TagSelect.Option>
                    <TagSelect.Option value="cat4">类目四</TagSelect.Option>
                    <TagSelect.Option value="cat5">类目五</TagSelect.Option>
                    <TagSelect.Option value="cat6">类目六</TagSelect.Option>
                    <TagSelect.Option value="cat7">类目七</TagSelect.Option>
                    <TagSelect.Option value="cat8">类目八</TagSelect.Option>
                    <TagSelect.Option value="cat9">类目九</TagSelect.Option>
                    <TagSelect.Option value="cat10">类目十</TagSelect.Option>
                    <TagSelect.Option value="cat11">类目十一</TagSelect.Option>
                    <TagSelect.Option value="cat12">类目十二</TagSelect.Option>
陈帅's avatar
陈帅 committed
112
                  </TagSelect>,
陈帅's avatar
陈帅 committed
113 114 115 116 117 118 119 120 121 122
                )}
              </FormItem>
            </StandardFormRow>
            <StandardFormRow title="其它选项" grid last>
              <Row gutter={16}>
                <Col lg={8} md={10} sm={10} xs={24}>
                  <FormItem {...formItemLayout} label="作者">
                    {getFieldDecorator('author', {})(
                      <Select placeholder="不限" style={{ maxWidth: 200, width: '100%' }}>
                        <Option value="lisa">王昭君</Option>
陈帅's avatar
陈帅 committed
123
                      </Select>,
陈帅's avatar
陈帅 committed
124 125 126 127 128 129 130 131 132
                    )}
                  </FormItem>
                </Col>
                <Col lg={8} md={10} sm={10} xs={24}>
                  <FormItem {...formItemLayout} label="好评度">
                    {getFieldDecorator('rate', {})(
                      <Select placeholder="不限" style={{ maxWidth: 200, width: '100%' }}>
                        <Option value="good">优秀</Option>
                        <Option value="normal">普通</Option>
陈帅's avatar
陈帅 committed
133
                      </Select>,
陈帅's avatar
陈帅 committed
134 135 136 137 138 139 140 141 142
                    )}
                  </FormItem>
                </Col>
              </Row>
            </StandardFormRow>
          </Form>
        </Card>
        <div className={styles.cardList}>{cardList}</div>
      </div>
143 144 145 146
    );
  }
}

陈帅's avatar
陈帅 committed
147
const WarpForm = Form.create<PAGE_NAME_UPPER_CAMEL_CASEProps>({
陈帅's avatar
陈帅 committed
148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164
  onValuesChange({ dispatch }: PAGE_NAME_UPPER_CAMEL_CASEProps, changedValues, allValues) {
    // 表单项变化时请求数据
    // 模拟查询表单生效
    dispatch({
      type: 'BLOCK_NAME_CAMEL_CASE/fetch',
      payload: {
        count: 8,
      },
    });
  },
})(PAGE_NAME_UPPER_CAMEL_CASE);

export default connect(
  ({
    BLOCK_NAME_CAMEL_CASE,
    loading,
  }: {
陈帅's avatar
陈帅 committed
165
    BLOCK_NAME_CAMEL_CASE: StateType;
陈帅's avatar
陈帅 committed
166 167 168 169
    loading: { models: { [key: string]: boolean } };
  }) => ({
    BLOCK_NAME_CAMEL_CASE,
    loading: loading.models.BLOCK_NAME_CAMEL_CASE,
陈帅's avatar
陈帅 committed
170
  }),
陈帅's avatar
陈帅 committed
171
)(WarpForm);