提交 5151c75d303ab6b179fa72b438fd346ee4e9cef1

作者 愚道
1 个父辈 3217aa71

add search input to SearchListArticles

1 -/yarn.lock  
2 -/package-lock.json  
3 -/dist  
4 -/node_modules  
5 -  
6 -.umi  
7 -.umi-production  
1 -export default {  
2 - plugins: [  
3 - ['umi-plugin-block-dev', {  
4 - layout: 'ant-design-pro',  
5 - }],  
6 - ['umi-plugin-react', {  
7 - dva: true,  
8 - locale: true,  
9 - antd: true,  
10 - }]  
11 - ],  
12 -}  
1 -# @umi-blocks/ant-design-pro/searchlist  
2 -  
3 -SearchList  
4 -  
5 -## Usage  
6 -  
7 -```sh  
8 -umi block add ant-design-pro/searchlist  
9 -```  
10 -  
11 -## SNAPSHOT  
12 -  
13 -![SNAPSHOT](./snapshot.png)  
14 -  
15 -## LICENSE  
16 -  
17 -MIT  
1 -{  
2 - "name": "@umi-block/search-list",  
3 - "version": "0.0.1",  
4 - "description": "SearchList",  
5 - "main": "src/index.js",  
6 - "scripts": {  
7 - "dev": "umi dev"  
8 - },  
9 - "repository": {  
10 - "type": "git",  
11 - "url": "https://github.com/umijs/umi-blocks/ant-design-pro/searchlist"  
12 - },  
13 - "dependencies": {  
14 - "ant-design-pro": "^2.1.1",  
15 - "antd": "^3.10.9",  
16 - "react": "^16.6.3"  
17 - },  
18 - "devDependencies": {  
19 - "umi": "^2.3.0-beta.1",  
20 - "umi-plugin-react": "^1.3.0-beta.1",  
21 - "umi-plugin-block-dev": "^1.0.0"  
22 - },  
23 - "license": "ISC"  
24 -}  
1 -import React, { Component } from 'react';  
2 -import router from 'umi/router';  
3 -import { Input } from 'antd';  
4 -import PageHeaderWrapper from './components/PageHeaderWrapper';  
5 -  
6 -class PAGE_NAME_UPPER_CAMEL_CASE extends Component {  
7 - handleTabChange = key => {  
8 - const { match } = this.props;  
9 - switch (key) {  
10 - case 'articles':  
11 - router.push(`${match.url}/articles`);  
12 - break;  
13 - case 'applications':  
14 - router.push(`${match.url}/applications`);  
15 - break;  
16 - case 'projects':  
17 - router.push(`${match.url}/projects`);  
18 - break;  
19 - default:  
20 - break;  
21 - }  
22 - };  
23 -  
24 - handleFormSubmit = value => {  
25 - // eslint-disable-next-line  
26 - console.log(value);  
27 - };  
28 -  
29 - render() {  
30 - const tabList = [  
31 - {  
32 - key: 'articles',  
33 - tab: '文章',  
34 - },  
35 - {  
36 - key: 'projects',  
37 - tab: '项目',  
38 - },  
39 - {  
40 - key: 'applications',  
41 - tab: '应用',  
42 - },  
43 - ];  
44 -  
45 - const mainSearch = (  
46 - <div style={{ textAlign: 'center' }}>  
47 - <Input.Search  
48 - placeholder="请输入"  
49 - enterButton="搜索"  
50 - size="large"  
51 - onSearch={this.handleFormSubmit}  
52 - style={{ width: 522 }}  
53 - />  
54 - </div>  
55 - );  
56 -  
57 - const { match, children, location } = this.props;  
58 -  
59 - return (  
60 - <PageHeaderWrapper  
61 - title="搜索列表"  
62 - content={mainSearch}  
63 - tabList={tabList}  
64 - tabActiveKey={location.pathname.replace(`${match.path}/`, '')}  
65 - onTabChange={this.handleTabChange}  
66 - >  
67 - {children}  
68 - </PageHeaderWrapper>  
69 - );  
70 - }  
71 -}  
72 -  
73 -export default PAGE_NAME_UPPER_CAMEL_CASE;  
1 -import React, { Component, Fragment } from 'react'; 1 +import React, { Component } from 'react';
2 import { connect } from 'dva'; 2 import { connect } from 'dva';
3 -import { Form, Card, Select, List, Tag, Icon, Row, Col, Button } from 'antd'; 3 +import { Form, Card, Select, List, Tag, Icon, Row, Col, Button, Input } from 'antd';
4 4
5 import TagSelect from 'ant-design-pro/lib/TagSelect'; 5 import TagSelect from 'ant-design-pro/lib/TagSelect';
6 import StandardFormRow from './components/StandardFormRow'; 6 import StandardFormRow from './components/StandardFormRow';
7 import ArticleListContent from './components/ArticleListContent'; 7 import ArticleListContent from './components/ArticleListContent';
  8 +import PageHeaderWrapper from './components/PageHeaderWrapper';
8 import styles from './style.less'; 9 import styles from './style.less';
9 10
10 const { Option } = Select; 11 const { Option } = Select;
@@ -119,8 +120,24 @@ class SearchList extends Component { @@ -119,8 +120,24 @@ class SearchList extends Component {
119 </div> 120 </div>
120 ) : null; 121 ) : null;
121 122
  123 + const mainSearch = (
  124 + <div style={{ textAlign: 'center' }}>
  125 + <Input.Search
  126 + placeholder="请输入"
  127 + enterButton="搜索"
  128 + size="large"
  129 + onSearch={this.handleFormSubmit}
  130 + style={{ width: 522 }}
  131 + />
  132 + </div>
  133 + );
  134 +
122 return ( 135 return (
123 - <Fragment> 136 + <PageHeaderWrapper
  137 + title="搜索列表"
  138 + content={mainSearch}
  139 + onTabChange={this.handleTabChange}
  140 + >
124 <Card bordered={false}> 141 <Card bordered={false}>
125 <Form layout="inline"> 142 <Form layout="inline">
126 <StandardFormRow title="所属类目" block style={{ paddingBottom: 11 }}> 143 <StandardFormRow title="所属类目" block style={{ paddingBottom: 11 }}>
@@ -234,7 +251,7 @@ class SearchList extends Component { @@ -234,7 +251,7 @@ class SearchList extends Component {
234 )} 251 )}
235 /> 252 />
236 </Card> 253 </Card>
237 - </Fragment> 254 + </PageHeaderWrapper>
238 ); 255 );
239 } 256 }
240 } 257 }
注册登录 后发表评论