Browse Source

chore: update pnpm lock file

pull/10914/head
期贤 3 years ago
parent
commit
847f013b33
  1. 226
      src/pages/list/search/articles/index.tsx
  2. 2
      src/pages/list/search/projects/index.tsx

226
src/pages/list/search/articles/index.tsx

@ -0,0 +1,226 @@
import { LikeOutlined, LoadingOutlined, MessageOutlined, StarOutlined } from '@ant-design/icons';
import { useRequest } from '@umijs/max';
import { Button, Card, Col, Form, List, Row, Select, Tag } from 'antd';
import type { FC } from 'react';
import React from 'react';
import ArticleListContent from './components/ArticleListContent';
import StandardFormRow from './components/StandardFormRow';
import TagSelect from './components/TagSelect';
import type { ListItemDataType } from './data.d';
import { queryFakeList } from './service';
import useStyles from './style.style';
const { Option } = Select;
const FormItem = Form.Item;
const pageSize = 5;
const Articles: FC = () => {
const [form] = Form.useForm();
const { styles } = useStyles();
const { data, reload, loading, loadMore, loadingMore } = useRequest(
() => {
return queryFakeList({
count: pageSize,
});
},
{
loadMore: true,
},
);
const list = data?.list || [];
const setOwner = () => {
form.setFieldsValue({
owner: ['wzj'],
});
};
const owners = [
{
id: 'wzj',
name: '我自己',
},
{
id: 'wjh',
name: '吴家豪',
},
{
id: 'zxx',
name: '周星星',
},
{
id: 'zly',
name: '赵丽颖',
},
{
id: 'ym',
name: '姚明',
},
];
const IconText: React.FC<{
type: string;
text: React.ReactNode;
}> = ({ type, text }) => {
switch (type) {
case 'star-o':
return (
<span>
<StarOutlined style={{ marginRight: 8 }} />
{text}
</span>
);
case 'like-o':
return (
<span>
<LikeOutlined style={{ marginRight: 8 }} />
{text}
</span>
);
case 'message':
return (
<span>
<MessageOutlined style={{ marginRight: 8 }} />
{text}
</span>
);
default:
return null;
}
};
const formItemLayout = {
wrapperCol: {
xs: { span: 24 },
sm: { span: 24 },
md: { span: 12 },
},
};
const loadMoreDom = list.length > 0 && (
<div style={{ textAlign: 'center', marginTop: 16 }}>
<Button onClick={loadMore} style={{ paddingLeft: 48, paddingRight: 48 }}>
{loadingMore ? (
<span>
<LoadingOutlined /> ...
</span>
) : (
'加载更多'
)}
</Button>
</div>
);
return (
<>
<Card bordered={false}>
<Form
layout="inline"
form={form}
initialValues={{
owner: ['wjh', 'zxx'],
}}
onValuesChange={reload}
>
<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="owner" grid>
<FormItem name="owner" noStyle>
<Select mode="multiple" placeholder="选择 owner" style={{ minWidth: '6rem' }}>
{owners.map((owner) => (
<Option key={owner.id} value={owner.id}>
{owner.name}
</Option>
))}
</Select>
</FormItem>
<a className={styles.selfTrigger} onClick={setOwner}>
</a>
</StandardFormRow>
<StandardFormRow title="其它选项" grid last>
<Row gutter={16}>
<Col xl={8} lg={10} md={12} sm={24} xs={24}>
<FormItem {...formItemLayout} label="活跃用户" name="user">
<Select placeholder="不限" style={{ maxWidth: 200, width: '100%' }}>
<Option value="lisa"></Option>
</Select>
</FormItem>
</Col>
<Col xl={8} lg={10} md={12} sm={24} xs={24}>
<FormItem {...formItemLayout} label="好评度" name="rate">
<Select placeholder="不限" style={{ maxWidth: 200, width: '100%' }}>
<Option value="good"></Option>
</Select>
</FormItem>
</Col>
</Row>
</StandardFormRow>
</Form>
</Card>
<Card
style={{ marginTop: 24 }}
bordered={false}
bodyStyle={{ padding: '8px 32px 32px 32px' }}
>
<List<ListItemDataType>
size="large"
loading={loading}
rowKey="id"
itemLayout="vertical"
loadMore={loadMoreDom}
dataSource={list}
renderItem={(item) => (
<List.Item
key={item.id}
actions={[
<IconText key="star" type="star-o" text={item.star} />,
<IconText key="like" type="like-o" text={item.like} />,
<IconText key="message" type="message" text={item.message} />,
]}
extra={<div className={styles.listItemExtra} />}
>
<List.Item.Meta
title={
<a className={styles.listItemMetaTitle} href={item.href}>
{item.title}
</a>
}
description={
<span>
<Tag>Ant Design</Tag>
<Tag></Tag>
<Tag></Tag>
</span>
}
/>
<ArticleListContent data={item} />
</List.Item>
)}
/>
</Card>
</>
);
};
export default Articles;

2
src/pages/list/search/projects/index.tsx

@ -9,7 +9,9 @@ import TagSelect from './components/TagSelect';
import type { ListItemDataType } from './data.d';
import { queryFakeList } from './service';
import useStyles from './style.style';
dayjs.extend(relativeTime);
const { Option } = Select;
const FormItem = Form.Item;
const { Paragraph } = Typography;

Loading…
Cancel
Save