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 1 import React, { PureComponent } from 'react';
2 2 import numeral from 'numeral';
3 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 5 import { TagSelect } from 'ant-design-pro';
6 6
7 7 import StandardFormRow from './components/StandardFormRow';
  8 +import PageHeaderWrapper from './components/PageHeaderWrapper';
8 9 import { formatWan } from './utils/utils';
9 10 import styles from './style.less';
10 11
... ... @@ -88,94 +89,112 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends PureComponent {
88 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 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 +}
... ...
请 注册 或 登录 后发表评论