SearchList.js 9.08 KB
Newer Older
1 2 3
import React, { Component } from 'react';
import moment from 'moment';
import { connect } from 'dva';
4
import { routerRedux } from 'dva/router';
niko's avatar
niko committed
5
import { Form, Card, Select, List, Tag, Icon, Avatar, Row, Col, Button, Input } from 'antd';
6 7 8 9 10 11

import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import StandardFormRow from '../../components/StandardFormRow';
import TagSelect from '../../components/TagSelect';
import styles from './SearchList.less';

afc163's avatar
afc163 committed
12
const { Option } = Select;
13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72
const FormItem = Form.Item;
const TagOption = TagSelect.Option;
const TagExpand = TagSelect.Expand;

@Form.create()
@connect(state => ({
  list: state.list,
}))
export default class SearchList extends Component {
  state = {
    count: 3,
    showLoadMore: true,
    loadingMore: false,
  }

  componentDidMount() {
    const { count } = this.state;
    this.props.dispatch({
      type: 'list/fetch',
      payload: {
        count,
      },
    });
  }

  setOwner = () => {
    const { form } = this.props;
    form.setFieldsValue({
      owner: ['wzj'],
    });
  }

  handleLoadMore = () => {
    const { count } = this.state;
    const nextCount = count + 5;

    this.setState({
      count: nextCount,
      loadingMore: true,
    });
    this.props.dispatch({
      type: 'list/fetch',
      payload: {
        count: nextCount,
      },
      callback: () => {
        this.setState({
          loadingMore: false,
        });

        // fack count
        if (nextCount < 10) {
          this.setState({
            showLoadMore: false,
          });
        }
      },
    });
  }

73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89
  handleTabChange = (key) => {
    const { dispatch } = this.props;
    switch (key) {
      case 'docs':
        dispatch(routerRedux.push('/list/search'));
        break;
      case 'app':
        dispatch(routerRedux.push('/list/filter-card-list'));
        break;
      case 'project':
        dispatch(routerRedux.push('/list/cover-card-list'));
        break;
      default:
        break;
    }
  }

90 91
  render() {
    const { showLoadMore, loadingMore } = this.state;
nikogu's avatar
nikogu committed
92
    const { form, list: { list, loading } } = this.props;
93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119
    const { getFieldDecorator } = form;

    const owners = [
      {
        id: 'wzj',
        name: '我自己',
      },
      {
        id: 'wjh',
        name: '吴家豪',
      },
      {
        id: 'zxx',
        name: '周星星',
      },
      {
        id: 'zly',
        name: '赵丽颖',
      },
      {
        id: 'ym',
        name: '姚明',
      },
    ];

    const tabList = [
      {
120
        key: 'doc',
121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143
        tab: '文章',
      },
      {
        key: 'app',
        tab: '应用',
      },
      {
        key: 'project',
        tab: '项目',
      },
    ];

    const IconText = ({ type, text }) => (
      <span>
        <Icon type={type} style={{ marginRight: 8 }} />
        {text}
      </span>
    );

    const ListContent = ({ data: { content, updatedAt, avatar, owner, href } }) => (
      <div className={styles.listContent}>
        <p>{content}</p>
        <div>
niko's avatar
niko committed
144
          <Avatar src={avatar} size="small" /><a href={href}>{owner}</a> 发布在 <a href={href}>{href}</a>
145 146 147 148 149 150 151
          <em>{moment(updatedAt).format('YYYY-MM-DD hh:mm')}</em>
        </div>
      </div>
    );

    const pageHeaderContent = (
      <div style={{ textAlign: 'center' }}>
niko's avatar
niko committed
152 153 154 155 156 157 158
        <Input.Search
          placeholder="请输入"
          enterButton="搜索"
          size="large"
          onSearch={this.handleFormSubmit}
          style={{ width: 522 }}
        />
159 160 161 162 163 164
      </div>
    );

    const formItemLayout = {
      wrapperCol: {
        xs: { span: 24 },
niko's avatar
niko committed
165 166
        sm: { span: 24 },
        md: { span: 12 },
167 168 169
      },
    };

nikogu's avatar
nikogu committed
170
    const loadMore = showLoadMore ? (
nikogu's avatar
nikogu committed
171
      <div style={{ textAlign: 'center', marginTop: 16 }}>
niko's avatar
niko committed
172
        <Button onClick={this.handleLoadMore} style={{ paddingLeft: 48, paddingRight: 48 }}>
nikogu's avatar
nikogu committed
173 174 175 176 177 178
          {loadingMore && (<span><Icon type="loading" /> 加载中...</span>)}
          {!loadingMore && (<span>加载更多</span>)}
        </Button>
      </div>
    ) : null;

179 180 181 182 183
    return (
      <PageHeaderLayout
        title="搜索列表"
        content={pageHeaderContent}
        tabList={tabList}
184
        onTabChange={this.handleTabChange}
185 186
      >
        <div>
niko's avatar
niko committed
187
          <Card bordered={false}>
188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205
            <Form layout="inline">
              <StandardFormRow title="所属类目" block>
                <FormItem>
                  {getFieldDecorator('category')(
                    <TagSelect onChange={this.handleFormSubmit}>
                      <TagOption value="cat1">类目一</TagOption>
                      <TagOption value="cat2">类目二</TagOption>
                      <TagOption value="cat3">类目三</TagOption>
                      <TagOption value="cat4">类目四</TagOption>
                      <TagExpand>
                        <TagOption value="cat5">类目五</TagOption>
                        <TagOption value="cat6">类目六</TagOption>
                      </TagExpand>
                    </TagSelect>
                  )}
                </FormItem>
              </StandardFormRow>
              <StandardFormRow
nikogu's avatar
nikogu committed
206
                title="owner"
207 208 209
                grid
              >
                <Row>
niko's avatar
niko committed
210
                  <Col lg={16} md={24} sm={24} xs={24}>
211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226
                    <FormItem>
                      {getFieldDecorator('owner', {
                        initialValue: ['wjh', 'zxx'],
                      })(
                        <Select
                          mode="multiple"
                          style={{ maxWidth: 286, width: '100%' }}
                          placeholder="选择 owner"
                        >
                          {
                            owners.map(owner =>
                              <Option key={owner.id} value={owner.id}>{owner.name}</Option>
                            )
                          }
                        </Select>
                      )}
niko's avatar
niko committed
227
                      <a className={styles.selfTrigger} onClick={this.setOwner}>只看自己的</a>
228 229 230 231 232 233 234 235 236 237
                    </FormItem>
                  </Col>
                </Row>
              </StandardFormRow>
              <StandardFormRow
                title="其它选项"
                grid
                last
              >
                <Row gutter={16}>
niko's avatar
niko committed
238
                  <Col xl={8} lg={10} md={12} sm={24} xs={24}>
239 240 241 242 243 244 245 246 247 248 249 250 251 252 253
                    <FormItem
                      {...formItemLayout}
                      label="活跃用户"
                    >
                      {getFieldDecorator('user', {})(
                        <Select
                          onChange={this.handleFormSubmit}
                          placeholder="不限"
                          style={{ maxWidth: 200, width: '100%' }}
                        >
                          <Option value="lisa">李三</Option>
                        </Select>
                      )}
                    </FormItem>
                  </Col>
niko's avatar
niko committed
254
                  <Col xl={8} lg={10} md={12} sm={24} xs={24}>
255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279
                    <FormItem
                      {...formItemLayout}
                      label="好评度"
                    >
                      {getFieldDecorator('rate', {})(
                        <FormItem
                          label="好评度"
                        >
                          {getFieldDecorator('rate', {})(
                            <Select
                              onChange={this.handleFormSubmit}
                              placeholder="不限"
                              style={{ maxWidth: 200, width: '100%' }}
                            >
                              <Option value="good">优秀</Option>
                            </Select>
                          )}
                        </FormItem>
                      )}
                    </FormItem>
                  </Col>
                </Row>
              </StandardFormRow>
            </Form>
          </Card>
nikogu's avatar
nikogu committed
280 281 282 283 284
          <Card
            style={{ marginTop: 24 }}
            bordered={false}
            bodyStyle={{ padding: '12px 24px 32px 24px' }}
          >
285
            <List
niko's avatar
niko committed
286
              size="large"
nikogu's avatar
nikogu committed
287
              loading={!loadingMore && loading}
nikogu's avatar
nikogu committed
288
              rowKey="id"
289
              itemLayout="vertical"
nikogu's avatar
nikogu committed
290 291 292 293 294
              loadMore={loadMore}
              dataSource={list}
              renderItem={item => (
                <List.Item
                  key={item.id}
niko's avatar
niko committed
295 296 297 298 299
                  actions={[
                    <IconText type="star-o" text={item.star} />,
                    <IconText type="like-o" text={item.like} />,
                    <IconText type="message" text={item.message} />,
                  ]}
nikogu's avatar
nikogu committed
300 301 302
                  extra={<div className={styles.listItemExtra} />}
                >
                  <List.Item.Meta
niko's avatar
niko committed
303 304 305
                    title={(
                      <a className={styles.listItemMetaTitle} href={item.href}>{item.title}</a>
                    )}
nikogu's avatar
nikogu committed
306 307 308 309 310 311
                    description={<span><Tag>Ant Design</Tag><Tag>设计语言</Tag><Tag>蚂蚁金服</Tag></span>}
                  />
                  <ListContent data={item} />
                </List.Item>
              )}
            />
312 313 314 315 316 317
          </Card>
        </div>
      </PageHeaderLayout>
    );
  }
}