new block SearchList

SearchList/.gitignore

+/yarn.lock
+/package-lock.json
+/dist
+/node_modules
+
+.umi
+.umi-production

SearchList/README.md

+# @umi-blocks/ant-design-pro/searchlist
+
+SearchList
+
+## Usage
+
+```sh
+umi block add ant-design-pro/searchlist
+```
+
+## LICENSE
+
+MIT

SearchList/package.json

+{
+  "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"
+  }
+}

SearchList/src/components/PageHeaderWrapper/index.less

+@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;
+  }
+}

SearchList/src/components/PageHeaderWrapper/index.tsx

+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;

SearchList/src/index.tsx

+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;

SearchList/src/utils/utils.less

+.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;
+  }
+}

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 = (
       <span>

package.json

 {
   "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",