"ListSearchProjects/src/index.tsx" did not exist on "27d50044ba9ddd2c6a340620112c255b05adaf44"
index.tsx 7.96 KB
Newer Older
1
import React, { Component } from 'react';
偏右's avatar
偏右 committed
2
import { connect } from 'dva';
陈帅's avatar
陈帅 committed
3
import { Form, Card, Select, List, Tag, Icon, Row, Col, Button } from 'antd';
偏右's avatar
偏右 committed
4

陈帅's avatar
陈帅 committed
5
import TagSelect from './components/TagSelect';
6 7 8
import StandardFormRow from './components/StandardFormRow';
import ArticleListContent from './components/ArticleListContent';
import styles from './style.less';
陈帅's avatar
陈帅 committed
9
import { Dispatch } from 'redux';
陈帅's avatar
陈帅 committed
10
import { FormComponentProps } from 'antd/es/form';
陈帅's avatar
陈帅 committed
11 12
import { ListItemDataType } from './data';
import { IStateType } from './model';
偏右's avatar
偏右 committed
13 14 15 16 17 18

const { Option } = Select;
const FormItem = Form.Item;

const pageSize = 5;

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

class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEProps> {
偏右's avatar
偏右 committed
26
  componentDidMount() {
JoeyKo's avatar
JoeyKo committed
27 28
    const { dispatch } = this.props;
    dispatch({
29
      type: 'BLOCK_NAME_CAMEL_CASE/fetch',
JoeyKo's avatar
JoeyKo committed
30 31 32 33
      payload: {
        count: 5,
      },
    });
偏右's avatar
偏右 committed
34 35 36 37 38 39 40
  }

  setOwner = () => {
    const { form } = this.props;
    form.setFieldsValue({
      owner: ['wzj'],
    });
jim's avatar
jim committed
41
  };
偏右's avatar
偏右 committed
42 43

  fetchMore = () => {
陈帅's avatar
陈帅 committed
44 45
    const { dispatch } = this.props;
    dispatch({
46
      type: 'BLOCK_NAME_CAMEL_CASE/appendFetch',
偏右's avatar
偏右 committed
47 48 49 50
      payload: {
        count: pageSize,
      },
    });
jim's avatar
jim committed
51
  };
偏右's avatar
偏右 committed
52 53

  render() {
陈帅's avatar
陈帅 committed
54 55
    const {
      form,
56
      BLOCK_NAME_CAMEL_CASE: { list },
陈帅's avatar
陈帅 committed
57 58
      loading,
    } = this.props;
偏右's avatar
偏右 committed
59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83
    const { getFieldDecorator } = form;

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

陈帅's avatar
陈帅 committed
84 85 86 87
    const IconText: React.SFC<{
      type: string;
      text: React.ReactNode;
    }> = ({ type, text }) => (
偏右's avatar
偏右 committed
88 89 90 91 92 93 94 95 96 97 98 99 100 101
      <span>
        <Icon type={type} style={{ marginRight: 8 }} />
        {text}
      </span>
    );

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

jim's avatar
jim committed
102 103 104 105 106 107 108 109 110 111 112 113 114 115
    const loadMore =
      list.length > 0 ? (
        <div style={{ textAlign: 'center', marginTop: 16 }}>
          <Button onClick={this.fetchMore} style={{ paddingLeft: 48, paddingRight: 48 }}>
            {loading ? (
              <span>
                <Icon type="loading" /> 加载中...
              </span>
            ) : (
              '加载更多'
            )}
          </Button>
        </div>
      ) : null;
偏右's avatar
偏右 committed
116 117

    return (
陈帅's avatar
陈帅 committed
118
      <>
偏右's avatar
偏右 committed
119 120 121 122 123
        <Card bordered={false}>
          <Form layout="inline">
            <StandardFormRow title="所属类目" block style={{ paddingBottom: 11 }}>
              <FormItem>
                {getFieldDecorator('category')(
124
                  <TagSelect expandable>
偏右's avatar
偏右 committed
125 126 127 128 129 130 131 132 133 134 135 136
                    <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
137
                  </TagSelect>,
偏右's avatar
偏右 committed
138 139 140
                )}
              </FormItem>
            </StandardFormRow>
jim's avatar
jim committed
141
            <StandardFormRow title="owner" grid>
偏右's avatar
偏右 committed
142
              <Row>
陈帅's avatar
陈帅 committed
143 144
                <Col>
                  <FormItem {...formItemLayout}>
偏右's avatar
偏右 committed
145 146 147 148 149 150 151 152
                    {getFieldDecorator('owner', {
                      initialValue: ['wjh', 'zxx'],
                    })(
                      <Select
                        mode="multiple"
                        style={{ maxWidth: 286, width: '100%' }}
                        placeholder="选择 owner"
                      >
jim's avatar
jim committed
153 154 155 156 157
                        {owners.map(owner => (
                          <Option key={owner.id} value={owner.id}>
                            {owner.name}
                          </Option>
                        ))}
陈帅's avatar
陈帅 committed
158
                      </Select>,
偏右's avatar
偏右 committed
159
                    )}
jim's avatar
jim committed
160 161 162
                    <a className={styles.selfTrigger} onClick={this.setOwner}>
                      只看自己的
                    </a>
偏右's avatar
偏右 committed
163 164 165 166
                  </FormItem>
                </Col>
              </Row>
            </StandardFormRow>
jim's avatar
jim committed
167
            <StandardFormRow title="其它选项" grid last>
偏右's avatar
偏右 committed
168 169
              <Row gutter={16}>
                <Col xl={8} lg={10} md={12} sm={24} xs={24}>
jim's avatar
jim committed
170
                  <FormItem {...formItemLayout} label="活跃用户">
偏右's avatar
偏右 committed
171
                    {getFieldDecorator('user', {})(
172
                      <Select placeholder="不限" style={{ maxWidth: 200, width: '100%' }}>
偏右's avatar
偏右 committed
173
                        <Option value="lisa">李三</Option>
陈帅's avatar
陈帅 committed
174
                      </Select>,
偏右's avatar
偏右 committed
175 176 177 178
                    )}
                  </FormItem>
                </Col>
                <Col xl={8} lg={10} md={12} sm={24} xs={24}>
jim's avatar
jim committed
179
                  <FormItem {...formItemLayout} label="好评度">
ddcat1115's avatar
ddcat1115 committed
180
                    {getFieldDecorator('rate', {})(
181
                      <Select placeholder="不限" style={{ maxWidth: 200, width: '100%' }}>
ddcat1115's avatar
ddcat1115 committed
182
                        <Option value="good">优秀</Option>
陈帅's avatar
陈帅 committed
183
                      </Select>,
ddcat1115's avatar
ddcat1115 committed
184 185
                    )}
                  </FormItem>
偏右's avatar
偏右 committed
186 187 188 189 190 191 192 193 194 195
                </Col>
              </Row>
            </StandardFormRow>
          </Form>
        </Card>
        <Card
          style={{ marginTop: 24 }}
          bordered={false}
          bodyStyle={{ padding: '8px 32px 32px 32px' }}
        >
陈帅's avatar
陈帅 committed
196
          <List<ListItemDataType>
偏右's avatar
偏右 committed
197 198 199 200 201 202 203 204 205 206
            size="large"
            loading={list.length === 0 ? loading : false}
            rowKey="id"
            itemLayout="vertical"
            loadMore={loadMore}
            dataSource={list}
            renderItem={item => (
              <List.Item
                key={item.id}
                actions={[
陈帅's avatar
陈帅 committed
207 208 209
                  <IconText key="star" type="star-o" text={item.star} />,
                  <IconText key="like" type="like-o" text={item.like} />,
                  <IconText type="message" key="message" text={item.message} />,
偏右's avatar
偏右 committed
210 211 212 213
                ]}
                extra={<div className={styles.listItemExtra} />}
              >
                <List.Item.Meta
jim's avatar
jim committed
214 215 216 217 218
                  title={
                    <a className={styles.listItemMetaTitle} href={item.href}>
                      {item.title}
                    </a>
                  }
偏右's avatar
偏右 committed
219 220 221 222 223 224 225 226
                  description={
                    <span>
                      <Tag>Ant Design</Tag>
                      <Tag>设计语言</Tag>
                      <Tag>蚂蚁金服</Tag>
                    </span>
                  }
                />
227
                <ArticleListContent data={item} />
偏右's avatar
偏右 committed
228 229 230 231
              </List.Item>
            )}
          />
        </Card>
陈帅's avatar
陈帅 committed
232
      </>
偏右's avatar
偏右 committed
233 234 235
    );
  }
}
lijiehua's avatar
lijiehua committed
236

陈帅's avatar
陈帅 committed
237
const WarpForm = Form.create<PAGE_NAME_UPPER_CAMEL_CASEProps>({
陈帅's avatar
陈帅 committed
238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259
  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,
  }: {
    BLOCK_NAME_CAMEL_CASE: IStateType;
    loading: { models: { [key: string]: boolean } };
  }) => ({
    BLOCK_NAME_CAMEL_CASE,
    loading: loading.models.BLOCK_NAME_CAMEL_CASE,
陈帅's avatar
陈帅 committed
260
  }),
陈帅's avatar
陈帅 committed
261
)(WarpForm);