From e68295ac410f7159fa7508ddb018c30da7958fec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Tue, 21 May 2019 19:57:58 +0800 Subject: [PATCH] new block SearchList --- SearchList/.gitignore | 7 ++ SearchList/README.md | 13 +++ SearchList/package.json | 33 +++++++ .../components/PageHeaderWrapper/index.less | 86 +++++++++++++++++ .../components/PageHeaderWrapper/index.tsx | 96 +++++++++++++++++++ SearchList/src/index.tsx | 96 +++++++++++++++++++ SearchList/src/utils/utils.less | 50 ++++++++++ SearchListApplications/src/index.tsx | 2 +- package.json | 2 +- 9 files changed, 383 insertions(+), 2 deletions(-) create mode 100644 SearchList/.gitignore create mode 100644 SearchList/README.md create mode 100644 SearchList/package.json create mode 100644 SearchList/src/components/PageHeaderWrapper/index.less create mode 100644 SearchList/src/components/PageHeaderWrapper/index.tsx create mode 100644 SearchList/src/index.tsx create mode 100644 SearchList/src/utils/utils.less diff --git a/SearchList/.gitignore b/SearchList/.gitignore new file mode 100644 index 00000000..8ce76bc4 --- /dev/null +++ b/SearchList/.gitignore @@ -0,0 +1,7 @@ +/yarn.lock +/package-lock.json +/dist +/node_modules + +.umi +.umi-production diff --git a/SearchList/README.md b/SearchList/README.md new file mode 100644 index 00000000..e94db352 --- /dev/null +++ b/SearchList/README.md @@ -0,0 +1,13 @@ +# @umi-blocks/ant-design-pro/searchlist + +SearchList + +## Usage + +```sh +umi block add ant-design-pro/searchlist +``` + +## LICENSE + +MIT diff --git a/SearchList/package.json b/SearchList/package.json new file mode 100644 index 00000000..e4ce46c1 --- /dev/null +++ b/SearchList/package.json @@ -0,0 +1,33 @@ +{ + "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" + } +} diff --git a/SearchList/src/components/PageHeaderWrapper/index.less b/SearchList/src/components/PageHeaderWrapper/index.less new file mode 100644 index 00000000..908db575 --- /dev/null +++ b/SearchList/src/components/PageHeaderWrapper/index.less @@ -0,0 +1,86 @@ +@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; + } +} diff --git a/SearchList/src/components/PageHeaderWrapper/index.tsx b/SearchList/src/components/PageHeaderWrapper/index.tsx new file mode 100644 index 00000000..6ed06a55 --- /dev/null +++ b/SearchList/src/components/PageHeaderWrapper/index.tsx @@ -0,0 +1,96 @@ +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 ? ( + { + if (onTabChange) { + onTabChange(key); + } + }} + tabBarExtraContent={tabBarExtraContent} + > + {tabList.map(item => ( + + ))} + + ) : null; +}; + +const PageHeaderWrapper: React.SFC = ({ + children, + title, + content, + extraContent, + ...restProps +}) => ( + + {value => ( +
+ + {title} + + } + {...restProps} + {...value} + footer={renderFooter(restProps)} + > +
+
+
+ {content &&
{content}
} + {extraContent &&
{extraContent}
} +
+
+
+ + {children ? ( + +
{children}
+ + ) : null} +
+ )} + +); + +export default PageHeaderWrapper; diff --git a/SearchList/src/index.tsx b/SearchList/src/index.tsx new file mode 100644 index 00000000..ac769bf5 --- /dev/null +++ b/SearchList/src/index.tsx @@ -0,0 +1,96 @@ +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 { + 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 = ( +
+ +
+ ); + + const { children } = this.props; + + return ( + + {children} + + ); + } +} + +export default PAGE_NAME_UPPER_CAMEL_CASE; diff --git a/SearchList/src/utils/utils.less b/SearchList/src/utils/utils.less new file mode 100644 index 00000000..de1aa642 --- /dev/null +++ b/SearchList/src/utils/utils.less @@ -0,0 +1,50 @@ +.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; + } +} diff --git a/SearchListApplications/src/index.tsx b/SearchListApplications/src/index.tsx index 30ffa88d..7e5183b7 100644 --- a/SearchListApplications/src/index.tsx +++ b/SearchListApplications/src/index.tsx @@ -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 = ( diff --git a/package.json b/package.json index e7515839..dd32352d 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "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", -- GitLab