fanwh / workai-design-blocks · 提交

提交 b9482c0a2d929d9a7a7e0b443df43cf02f2a50f1

作者 愚道
1 个父辈 5151c75d

add search input to SearchListApplications

内嵌 并排对比
正在显示 5 个修改的文件 包含 177 行增加 和 86 行删除
  1 +import React from 'react';
  2 +import { FormattedMessage } from 'umi/locale';
  3 +import Link from 'umi/link';
  4 +import { PageHeader } from 'ant-design-pro';
  5 +import styles from './index.less';
  6 +
  7 +const PageHeaderWrapper = ({ children, wrapperClassName, ...restProps }) => (
  8 + <div style={{ margin: '-24px -24px 0' }} className={wrapperClassName}>
  9 + <PageHeader
  10 + home={<FormattedMessage id="menu.home" defaultMessage="Home" />}
  11 + key="pageheader"
  12 + {...restProps}
  13 + linkElement={Link}
  14 + itemRender={item => {
  15 + if (item.locale) {
  16 + return <FormattedMessage id={item.locale} defaultMessage={item.title} />;
  17 + }
  18 + return item.title;
  19 + }}
  20 + />
  21 + {children ? <div className={styles.content}>{children}</div> : null}
  22 + </div>
  23 +);
  24 +
  25 +export default PageHeaderWrapper;
  1 +@import '~antd/lib/style/themes/default.less';
  2 +
  3 +.content {
  4 + margin: 24px 24px 0;
  5 +}
  6 +
  7 +@media screen and (max-width: @screen-sm) {
  8 + .content {
  9 + margin: 24px 0 0;
  10 + }
  11 +}
1 import React, { PureComponent } from 'react'; 1 import React, { PureComponent } from 'react';
2 import numeral from 'numeral'; 2 import numeral from 'numeral';
3 import { connect } from 'dva'; 3 import { connect } from 'dva';
4 -import { Row, Col, Form, Card, Select, Icon, Avatar, List, Tooltip, Dropdown, Menu } from 'antd'; 4 +import { Row, Col, Form, Card, Select, Icon, Avatar, List, Tooltip, Dropdown, Menu, Input } from 'antd';
5 import { TagSelect } from 'ant-design-pro'; 5 import { TagSelect } from 'ant-design-pro';
6 6
7 import StandardFormRow from './components/StandardFormRow'; 7 import StandardFormRow from './components/StandardFormRow';
  8 +import PageHeaderWrapper from './components/PageHeaderWrapper';
8 import { formatWan } from './utils/utils'; 9 import { formatWan } from './utils/utils';
9 import styles from './style.less'; 10 import styles from './style.less';
10 11
@@ -88,94 +89,112 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent { @@ -88,94 +89,112 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent {
88 </Menu> 89 </Menu>
89 ); 90 );
90 91
91 - return (  
92 - <div className={styles.filterCardList}>  
93 - <Card bordered={false}>  
94 - <Form layout="inline">  
95 - <StandardFormRow title="所属类目" block style={{ paddingBottom: 11 }}>  
96 - <FormItem>  
97 - {getFieldDecorator('category')(  
98 - <TagSelect expandable>  
99 - <TagSelect.Option value="cat1">类目一</TagSelect.Option>  
100 - <TagSelect.Option value="cat2">类目二</TagSelect.Option>  
101 - <TagSelect.Option value="cat3">类目三</TagSelect.Option>  
102 - <TagSelect.Option value="cat4">类目四</TagSelect.Option>  
103 - <TagSelect.Option value="cat5">类目五</TagSelect.Option>  
104 - <TagSelect.Option value="cat6">类目六</TagSelect.Option>  
105 - <TagSelect.Option value="cat7">类目七</TagSelect.Option>  
106 - <TagSelect.Option value="cat8">类目八</TagSelect.Option>  
107 - <TagSelect.Option value="cat9">类目九</TagSelect.Option>  
108 - <TagSelect.Option value="cat10">类目十</TagSelect.Option>  
109 - <TagSelect.Option value="cat11">类目十一</TagSelect.Option>  
110 - <TagSelect.Option value="cat12">类目十二</TagSelect.Option>  
111 - </TagSelect>  
112 - )}  
113 - </FormItem>  
114 - </StandardFormRow>  
115 - <StandardFormRow title="其它选项" grid last>  
116 - <Row gutter={16}>  
117 - <Col lg={8} md={10} sm={10} xs={24}>  
118 - <FormItem {...formItemLayout} label="作者">  
119 - {getFieldDecorator('author', {})(  
120 - <Select placeholder="不限" style={{ maxWidth: 200, width: '100%' }}>  
121 - <Option value="lisa">王昭君</Option>  
122 - </Select>  
123 - )}  
124 - </FormItem>  
125 - </Col>  
126 - <Col lg={8} md={10} sm={10} xs={24}>  
127 - <FormItem {...formItemLayout} label="好评度">  
128 - {getFieldDecorator('rate', {})(  
129 - <Select placeholder="不限" style={{ maxWidth: 200, width: '100%' }}>  
130 - <Option value="good">优秀</Option>  
131 - <Option value="normal">普通</Option>  
132 - </Select>  
133 - )}  
134 - </FormItem>  
135 - </Col>  
136 - </Row>  
137 - </StandardFormRow>  
138 - </Form>  
139 - </Card>  
140 - <List  
141 - rowKey="id"  
142 - style={{ marginTop: 24 }}  
143 - grid={{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }}  
144 - loading={loading}  
145 - dataSource={list}  
146 - renderItem={item => (  
147 - <List.Item key={item.id}>  
148 - <Card  
149 - hoverable  
150 - bodyStyle={{ paddingBottom: 20 }}  
151 - actions={[  
152 - <Tooltip title="下载">  
153 - <Icon type="download" />  
154 - </Tooltip>,  
155 - <Tooltip title="编辑">  
156 - <Icon type="edit" />  
157 - </Tooltip>,  
158 - <Tooltip title="分享">  
159 - <Icon type="share-alt" />  
160 - </Tooltip>,  
161 - <Dropdown overlay={itemMenu}>  
162 - <Icon type="ellipsis" />  
163 - </Dropdown>,  
164 - ]}  
165 - >  
166 - <Card.Meta avatar={<Avatar size="small" src={item.avatar} />} title={item.title} />  
167 - <div className={styles.cardItemContent}>  
168 - <CardInfo  
169 - activeUser={formatWan(item.activeUser)}  
170 - newUser={numeral(item.newUser).format('0,0')}  
171 - />  
172 - </div>  
173 - </Card>  
174 - </List.Item>  
175 - )} 92 + const mainSearch = (
  93 + <div style={{ textAlign: 'center' }}>
  94 + <Input.Search
  95 + placeholder="请输入"
  96 + enterButton="搜索"
  97 + size="large"
  98 + onSearch={this.handleFormSubmit}
  99 + style={{ width: 522 }}
176 /> 100 />
177 </div> 101 </div>
178 ); 102 );
  103 +
  104 + return (
  105 + <PageHeaderWrapper
  106 + title="搜索列表"
  107 + content={mainSearch}
  108 + onTabChange={this.handleTabChange}
  109 + >
  110 + <div className={styles.filterCardList}>
  111 + <Card bordered={false}>
  112 + <Form layout="inline">
  113 + <StandardFormRow title="所属类目" block style={{ paddingBottom: 11 }}>
  114 + <FormItem>
  115 + {getFieldDecorator('category')(
  116 + <TagSelect expandable>
  117 + <TagSelect.Option value="cat1">类目一</TagSelect.Option>
  118 + <TagSelect.Option value="cat2">类目二</TagSelect.Option>
  119 + <TagSelect.Option value="cat3">类目三</TagSelect.Option>
  120 + <TagSelect.Option value="cat4">类目四</TagSelect.Option>
  121 + <TagSelect.Option value="cat5">类目五</TagSelect.Option>
  122 + <TagSelect.Option value="cat6">类目六</TagSelect.Option>
  123 + <TagSelect.Option value="cat7">类目七</TagSelect.Option>
  124 + <TagSelect.Option value="cat8">类目八</TagSelect.Option>
  125 + <TagSelect.Option value="cat9">类目九</TagSelect.Option>
  126 + <TagSelect.Option value="cat10">类目十</TagSelect.Option>
  127 + <TagSelect.Option value="cat11">类目十一</TagSelect.Option>
  128 + <TagSelect.Option value="cat12">类目十二</TagSelect.Option>
  129 + </TagSelect>
  130 + )}
  131 + </FormItem>
  132 + </StandardFormRow>
  133 + <StandardFormRow title="其它选项" grid last>
  134 + <Row gutter={16}>
  135 + <Col lg={8} md={10} sm={10} xs={24}>
  136 + <FormItem {...formItemLayout} label="作者">
  137 + {getFieldDecorator('author', {})(
  138 + <Select placeholder="不限" style={{ maxWidth: 200, width: '100%' }}>
  139 + <Option value="lisa">王昭君</Option>
  140 + </Select>
  141 + )}
  142 + </FormItem>
  143 + </Col>
  144 + <Col lg={8} md={10} sm={10} xs={24}>
  145 + <FormItem {...formItemLayout} label="好评度">
  146 + {getFieldDecorator('rate', {})(
  147 + <Select placeholder="不限" style={{ maxWidth: 200, width: '100%' }}>
  148 + <Option value="good">优秀</Option>
  149 + <Option value="normal">普通</Option>
  150 + </Select>
  151 + )}
  152 + </FormItem>
  153 + </Col>
  154 + </Row>
  155 + </StandardFormRow>
  156 + </Form>
  157 + </Card>
  158 + <List
  159 + rowKey="id"
  160 + style={{ marginTop: 24 }}
  161 + grid={{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }}
  162 + loading={loading}
  163 + dataSource={list}
  164 + renderItem={item => (
  165 + <List.Item key={item.id}>
  166 + <Card
  167 + hoverable
  168 + bodyStyle={{ paddingBottom: 20 }}
  169 + actions={[
  170 + <Tooltip title="下载">
  171 + <Icon type="download" />
  172 + </Tooltip>,
  173 + <Tooltip title="编辑">
  174 + <Icon type="edit" />
  175 + </Tooltip>,
  176 + <Tooltip title="分享">
  177 + <Icon type="share-alt" />
  178 + </Tooltip>,
  179 + <Dropdown overlay={itemMenu}>
  180 + <Icon type="ellipsis" />
  181 + </Dropdown>,
  182 + ]}
  183 + >
  184 + <Card.Meta avatar={<Avatar size="small" src={item.avatar} />} title={item.title} />
  185 + <div className={styles.cardItemContent}>
  186 + <CardInfo
  187 + activeUser={formatWan(item.activeUser)}
  188 + newUser={numeral(item.newUser).format('0,0')}
  189 + />
  190 + </div>
  191 + </Card>
  192 + </List.Item>
  193 + )}
  194 + />
  195 + </div>
  196 + </PageHeaderWrapper>
  197 + );
179 } 198 }
180 } 199 }
181 200
  1 +import React from 'react';
  2 +import { FormattedMessage } from 'umi/locale';
  3 +import Link from 'umi/link';
  4 +import { PageHeader } from 'ant-design-pro';
  5 +import styles from './index.less';
  6 +
  7 +const PageHeaderWrapper = ({ children, wrapperClassName, ...restProps }) => (
  8 + <div style={{ margin: '-24px -24px 0' }} className={wrapperClassName}>
  9 + <PageHeader
  10 + home={<FormattedMessage id="menu.home" defaultMessage="Home" />}
  11 + key="pageheader"
  12 + {...restProps}
  13 + linkElement={Link}
  14 + itemRender={item => {
  15 + if (item.locale) {
  16 + return <FormattedMessage id={item.locale} defaultMessage={item.title} />;
  17 + }
  18 + return item.title;
  19 + }}
  20 + />
  21 + {children ? <div className={styles.content}>{children}</div> : null}
  22 + </div>
  23 +);
  24 +
  25 +export default PageHeaderWrapper;
  1 +@import '~antd/lib/style/themes/default.less';
  2 +
  3 +.content {
  4 + margin: 24px 24px 0;
  5 +}
  6 +
  7 +@media screen and (max-width: @screen-sm) {
  8 + .content {
  9 + margin: 24px 0 0;
  10 + }
  11 +}
请 注册 或 登录 后发表评论