Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: List Search Projects #179

Merged
merged 5 commits into from
Feb 6, 2020
Merged

feat: List Search Projects #179

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
138f56f
feat: List Search Projects
xiaohuoni Feb 4, 2020
84f9a29
style: fix lint
xiaohuoni Feb 4, 2020
02b7e40
style: change eslint rule
xiaohuoni Feb 4, 2020
43f430b
chore: fix lint
xiaohuoni Feb 4, 2020
aeeb5df
chore: update @umijs/fabric
xiaohuoni Feb 6, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .umirc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ export default {
[
'umi-plugin-block-dev',
{
layout: 'ant-design-pro-user',
layout: 'ant-design-pro',
menu: {
name: '主页',
icon: 'home',
Expand Down
2 changes: 1 addition & 1 deletion DashboardMonitor/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEPro
</Col>
</Row>
<div className={styles.mapChart}>
<Map></Map>
<Map />
</div>
</Card>
</Col>
Expand Down
2 changes: 1 addition & 1 deletion EmptyPage/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default () => {
return (
<PageHeaderWrapper content="这是一个新页面，从这里进行开发！" className={styles.main}>
<div style={{ paddingTop: 100, textAlign: 'center' }}>
<Spin spinning={loading} size="large"></Spin>
<Spin spinning={loading} size="large" />
</div>
</PageHeaderWrapper>
);
Expand Down
1 change: 0 additions & 1 deletion ListSearchProjects/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
"dev": "umi dev"
},
"dependencies": {
"@ant-design/compatible": "^0.0.1-rc.0",
"classnames": "^2.2.6",
"dva": "^2.4.0",
"moment": "^2.22.2",
Expand Down
1 change: 1 addition & 0 deletions ListSearchProjects/src/components/StandardFormRow/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

.standardFormRow {
display: flex;
width: 100%;
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px dashed @border-color-split;
Expand Down
250 changes: 111 additions & 139 deletions ListSearchProjects/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Col, List, Row, Select, Typography } from 'antd';
import React, { Component } from 'react';

import { Card, Col, Form, List, Row, Select, Typography } from 'antd';
import React, { FC, useEffect } from 'react';
import { Dispatch } from 'redux';
import { FormComponentProps } from '@ant-design/compatible/es/form';
import { connect } from 'dva';
import moment from 'moment';
import AvatarList from './components/AvatarList';
Expand All @@ -18,154 +14,130 @@ const { Option } = Select;
const FormItem = Form.Item;
const { Paragraph } = Typography;

interface PAGE_NAME_UPPER_CAMEL_CASEProps extends FormComponentProps {
interface PAGE_NAME_UPPER_CAMEL_CASEProps {
dispatch: Dispatch<any>;
BLOCK_NAME_CAMEL_CASE: StateType;
loading: boolean;
}

const getKey = (id: string, index: number) => `${id}-${index}`;

class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEProps> {
componentDidMount() {
const { dispatch } = this.props;
const PAGE_NAME_UPPER_CAMEL_CASE: FC<PAGE_NAME_UPPER_CAMEL_CASEProps> = ({
dispatch,
BLOCK_NAME_CAMEL_CASE: { list = [] },
loading,
}) => {
useEffect(() => {
dispatch({
type: 'BLOCK_NAME_CAMEL_CASE/fetch',
payload: {
count: 8,
},
});
}

render() {
const {
BLOCK_NAME_CAMEL_CASE: { list = [] },
loading,
form,
} = this.props;
const { getFieldDecorator } = form;

const cardList = list && (
<List<ListItemDataType>
rowKey="id"
loading={loading}
grid={{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }}
dataSource={list}
renderItem={item => (
<List.Item>
<Card
className={styles.card}
hoverable
cover={<img alt={item.title} src={item.cover} />}
>
<Card.Meta
title={<a>{item.title}</a>}
description={
<Paragraph className={styles.item} ellipsis={{ rows: 2 }}>
{item.subDescription}
</Paragraph>
}
/>
<div className={styles.cardItemContent}>
<span>{moment(item.updatedAt).fromNow()}</span>
<div className={styles.avatarList}>
<AvatarList size="small">
{item.members.map((member, i) => (
<AvatarList.Item
key={getKey(item.id, i)}
src={member.avatar}
tips={member.name}
/>
))}
</AvatarList>
</div>
}, []);
const cardList = list && (
<List<ListItemDataType>
rowKey="id"
loading={loading}
grid={{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }}
dataSource={list}
renderItem={item => (
<List.Item>
<Card className={styles.card} hoverable cover={<img alt={item.title} src={item.cover} />}>
<Card.Meta
title={<a>{item.title}</a>}
description={
<Paragraph className={styles.item} ellipsis={{ rows: 2 }}>
{item.subDescription}
</Paragraph>
}
/>
<div className={styles.cardItemContent}>
<span>{moment(item.updatedAt).fromNow()}</span>
<div className={styles.avatarList}>
<AvatarList size="small">
{item.members.map((member, i) => (
<AvatarList.Item
key={getKey(item.id, i)}
src={member.avatar}
tips={member.name}
/>
))}
</AvatarList>
</div>
</Card>
</List.Item>
)}
/>
);
</div>
</Card>
</List.Item>
)}
/>
);

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

return (
<div className={styles.coverCardList}>
<Card bordered={false}>
<Form layout="inline">
<StandardFormRow title="所属类目" block style={{ paddingBottom: 11 }}>
<FormItem>
{getFieldDecorator('category')(
<TagSelect expandable>
<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>
</TagSelect>,
)}
</FormItem>
</StandardFormRow>
<StandardFormRow title="其它选项" grid last>
<Row gutter={16}>
<Col lg={8} md={10} sm={10} xs={24}>
<FormItem {...formItemLayout} label="作者">
{getFieldDecorator(
'author',
{},
)(
<Select placeholder="不限" style={{ maxWidth: 200, width: '100%' }}>
<Option value="lisa">王昭君</Option>
</Select>,
)}
</FormItem>
</Col>
<Col lg={8} md={10} sm={10} xs={24}>
<FormItem {...formItemLayout} label="好评度">
{getFieldDecorator(
'rate',
{},
)(
<Select placeholder="不限" style={{ maxWidth: 200, width: '100%' }}>
<Option value="good">优秀</Option>
<Option value="normal">普通</Option>
</Select>,
)}
</FormItem>
</Col>
</Row>
</StandardFormRow>
</Form>
</Card>
<div className={styles.cardList}>{cardList}</div>
</div>
);
}
}
const formItemLayout = {
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
};

const WarpForm = Form.create<PAGE_NAME_UPPER_CAMEL_CASEProps>({
onValuesChange({ dispatch }: PAGE_NAME_UPPER_CAMEL_CASEProps) {
// 表单项变化时请求数据
// 模拟查询表单生效
dispatch({
type: 'BLOCK_NAME_CAMEL_CASE/fetch',
payload: {
count: 8,
},
});
},
})(PAGE_NAME_UPPER_CAMEL_CASE);
return (
<div className={styles.coverCardList}>
<Card bordered={false}>
<Form
layout="inline"
onValuesChange={() => {
// 表单项变化时请求数据
// 模拟查询表单生效
dispatch({
type: 'BLOCK_NAME_CAMEL_CASE/fetch',
payload: {
count: 8,
},
});
}}
>
<StandardFormRow title="所属类目" block style={{ paddingBottom: 11 }}>
<FormItem name="category">
<TagSelect expandable>
<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>
</TagSelect>
</FormItem>
</StandardFormRow>
<StandardFormRow title="其它选项" grid last>
<Row gutter={16}>
<Col lg={8} md={10} sm={10} xs={24}>
<FormItem {...formItemLayout} label="作者" name="author">
<Select placeholder="不限" style={{ maxWidth: 200, width: '100%' }}>
<Option value="lisa">王昭君</Option>
</Select>
</FormItem>
</Col>
<Col lg={8} md={10} sm={10} xs={24}>
<FormItem {...formItemLayout} label="好评度" name="rate">
<Select placeholder="不限" style={{ maxWidth: 200, width: '100%' }}>
<Option value="good">优秀</Option>
<Option value="normal">普通</Option>
</Select>
</FormItem>
</Col>
</Row>
</StandardFormRow>
</Form>
</Card>
<div className={styles.cardList}>{cardList}</div>
</div>
);
};

export default connect(
({
Expand All @@ -178,4 +150,4 @@ export default connect(
BLOCK_NAME_CAMEL_CASE,
loading: loading.models.BLOCK_NAME_CAMEL_CASE,
}),
)(WarpForm);
)(PAGE_NAME_UPPER_CAMEL_CASE);
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
"devDependencies": {
"@types/classnames": "^2.2.7",
"@types/numeral": "^0.0.26",
"@umijs/fabric": "^2.0.0",
"@umijs/fabric": "^2.0.2",
"cross-env": "^6.0.0",
"eslint": "^6.8.0",
"husky": "^4.0.1",
Expand Down