Commit e68295ac authored by 陈帅's avatar 陈帅

new block SearchList

parent 480d57c9
/yarn.lock
/package-lock.json
/dist
/node_modules
.umi
.umi-production
# @umi-blocks/ant-design-pro/searchlist
SearchList
## Usage
```sh
umi block add ant-design-pro/searchlist
```
## LICENSE
MIT
{
"name": "@umi-block/search-list",
"version": "0.0.1",
"description": "SearchListApplications",
"main": "src/index.js",
"scripts": {
"dev": "umi dev"
},
"repository": {
"type": "git",
"url": "https://github.com/umijs/umi-blocks/ant-design-pro/searchlistapplications"
},
"dependencies": {
"antd": "^3.16.3",
"classnames": "^2.2.6",
"dva": "^2.4.0",
"hash.js": "^1.1.5",
"moment": "^2.22.2",
"numeral": "^2.0.6",
"nzh": "^1.0.3",
"react": "^16.6.3",
"umi-request": "^1.0.0"
},
"devDependencies": {
"umi": "^2.6.9",
"umi-plugin-react": "^1.7.2",
"umi-plugin-block-dev": "^1.0.0"
},
"license": "ISC",
"blockConfig": {
"specVersion": "0.1"
}
}
@import '~antd/lib/style/themes/default.less';
.children-content {
margin: 24px 24px 0;
}
.main {
.detail {
display: flex;
}
.row {
display: flex;
width: 100%;
}
.title-content {
margin-bottom: 16px;
}
@media screen and (max-width: @screen-sm) {
.content {
margin: 24px 0 0;
}
}
.title,
.content {
flex: auto;
}
.extraContent,
.main {
flex: 0 1 auto;
}
.main {
width: 100%;
}
.title {
margin-bottom: 16px;
}
.logo,
.content,
.extraContent {
margin-bottom: 16px;
}
.extraContent {
min-width: 242px;
margin-left: 88px;
text-align: right;
}
}
@media screen and (max-width: @screen-xl) {
.extraContent {
margin-left: 44px;
}
}
@media screen and (max-width: @screen-lg) {
.extraContent {
margin-left: 20px;
}
}
@media screen and (max-width: @screen-md) {
.row {
display: block;
}
.action,
.extraContent {
margin-left: 0;
text-align: left;
}
}
@media screen and (max-width: @screen-sm) {
.detail {
display: block;
}
}
import React from 'react';
import { RouteContext } from '@ant-design/pro-layout';
import { PageHeader, Tabs, Typography } from 'antd';
import styles from './index.less';
import { GridContent } from '@ant-design/pro-layout';
import { TabsProps } from 'antd/lib/tabs';
interface IPageHeaderTabConfig {
tabList?: Array<{
key: string;
tab: string;
}>;
tabActiveKey?: TabsProps['activeKey'];
onTabChange?: TabsProps['onChange'];
tabBarExtraContent?: TabsProps['tabBarExtraContent'];
}
interface IPageHeaderWrapperProps extends IPageHeaderTabConfig {
content?: React.ReactNode;
title: React.ReactNode;
extraContent?: React.ReactNode;
}
/**
* render Footer tabList
* In order to be compatible with the old version of the PageHeader
* basically all the functions are implemented.
*/
const renderFooter = ({
tabList,
tabActiveKey,
onTabChange,
tabBarExtraContent,
}: IPageHeaderTabConfig) => {
return tabList && tabList.length ? (
<Tabs
className={styles.tabs}
activeKey={tabActiveKey}
onChange={key => {
if (onTabChange) {
onTabChange(key);
}
}}
tabBarExtraContent={tabBarExtraContent}
>
{tabList.map(item => (
<Tabs.TabPane tab={item.tab} key={item.key} />
))}
</Tabs>
) : null;
};
const PageHeaderWrapper: React.SFC<IPageHeaderWrapperProps> = ({
children,
title,
content,
extraContent,
...restProps
}) => (
<RouteContext.Consumer>
{value => (
<div style={{ margin: '-24px -24px 0' }}>
<PageHeader
title={
<Typography.Title
level={4}
style={{
margin: 0,
}}
>
{title}
</Typography.Title>
}
{...restProps}
{...value}
footer={renderFooter(restProps)}
>
<div className={styles.detail}>
<div className={styles.main}>
<div className={styles.row}>
{content && <div className={styles.content}>{content}</div>}
{extraContent && <div className={styles.extraContent}>{extraContent}</div>}
</div>
</div>
</div>
</PageHeader>
{children ? (
<GridContent>
<div className={styles['children-content']}>{children}</div>
</GridContent>
) : null}
</div>
)}
</RouteContext.Consumer>
);
export default PageHeaderWrapper;
import React, { Component } from 'react';
import router from 'umi/router';
import { connect } from 'dva';
import { Input } from 'antd';
import PageHeaderWrapper from './components/PageHeaderWrapper';
interface PAGE_NAME_UPPER_CAMEL_CASEProps {
match: {
url: string;
path: string;
};
location: {
pathname: string;
};
}
@connect()
class PAGE_NAME_UPPER_CAMEL_CASE extends Component<PAGE_NAME_UPPER_CAMEL_CASEProps> {
handleTabChange = (key: string) => {
const { match } = this.props;
const url = match.url === '/' ? '' : match.url;
switch (key) {
case 'articles':
router.push(`${url}/articles`);
break;
case 'applications':
router.push(`${url}/applications`);
break;
case 'projects':
router.push(`${url}/projects`);
break;
default:
break;
}
};
handleFormSubmit = (value: string) => {
// tslint:disable-next-line: no-console
console.log(value);
};
getTabKey = () => {
const { match, location } = this.props;
const url = match.path === '/' ? '' : match.path;
const tabKey = location.pathname.replace(`${url}/`, '');
if (tabKey && tabKey !== '/') {
return tabKey;
}
return 'articles';
};
render() {
const tabList = [
{
key: 'articles',
tab: '文章',
},
{
key: 'projects',
tab: '项目',
},
{
key: 'applications',
tab: '应用',
},
];
const mainSearch = (
<div style={{ textAlign: 'center' }}>
<Input.Search
placeholder="请输入"
enterButton="搜索"
size="large"
onSearch={this.handleFormSubmit}
style={{ maxWidth: 522, width: '100%' }}
/>
</div>
);
const { children } = this.props;
return (
<PageHeaderWrapper
title="搜索列表"
content={mainSearch}
tabList={tabList}
tabActiveKey={this.getTabKey()}
onTabChange={this.handleTabChange}
>
{children}
</PageHeaderWrapper>
);
}
}
export default PAGE_NAME_UPPER_CAMEL_CASE;
.textOverflow() {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
word-break: break-all;
}
.textOverflowMulti(@line: 3, @bg: #fff) {
position: relative;
max-height: @line * 1.5em;
margin-right: -1em;
padding-right: 1em;
overflow: hidden;
line-height: 1.5em;
text-align: justify;
&::before {
position: absolute;
right: 14px;
bottom: 0;
padding: 0 1px;
background: @bg;
content: '...';
}
&::after {
position: absolute;
right: 14px;
width: 1em;
height: 1em;
margin-top: 0.2em;
background: white;
content: '';
}
}
// mixins for clearfix
// ------------------------
.clearfix() {
zoom: 1;
&::before,
&::after {
display: table;
content: ' ';
}
&::after {
clear: both;
height: 0;
font-size: 0;
visibility: hidden;
}
}
......@@ -17,7 +17,7 @@ export function formatWan(val: number) {
const v = val * 1;
if (!v || Number.isNaN(v)) return '';
let result = val;
let result: React.ReactNode = val;
if (val > 10000) {
result = (
<span>
......
{
"private": true,
"scripts": {
"dev": "cross-env PAGES_PATH='Workplace/src' umi dev",
"dev": "cross-env PAGES_PATH='SearchList/src' umi dev",
"lint": "npm run lint:ts && npm run lint:style && npm run lint:prettier",
"lint-staged": "lint-staged",
"lint-staged:ts": "tslint",
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment