scrollList 定义

gavinkd · Oct 6, 2020 · d6379a8 · d6379a8
1 parent dbe80f3
commit d6379a8
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 5 deletions.
diff --git a/config/config.ts b/config/config.ts
@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 // https://umijs.org/zh-CN/config
 import { defineConfig } from 'umi';
+// import AntdDayjsWebpackPlugin from 'antd-dayjs-webpack-plugin'
 import moment from 'moment';
 import routeConfig from './router.config';
 
@@ -49,5 +50,8 @@ export default defineConfig({
       mediaQuery: false, // 允许在媒体查询中转换`px`
     }),
   ],
+  // extraBabelPlugins: [
+  //    new AntdDayjsWebpackPlugin()
+  // ],
   ...getPathConfig(),
 });
diff --git a/package.json b/package.json
@@ -37,7 +37,9 @@
     "@umijs/preset-react": "1.x",
     "@umijs/test": "^3.2.14",
     "ahooks": "^2.6.0",
+    "antd-dayjs-webpack-plugin": "^1.0.1",
     "classnames": "^2.2.6",
+    "dayjs": "^1.8.36",
     "goeasy": "1.0.17",
     "lodash": "^4.17.19",
     "memoize-one": "^5.1.1",

diff --git a/src/components/ScrollList/index.tsx b/src/components/ScrollList/index.tsx
@@ -1,9 +1,16 @@
 /* eslint-disable react/prop-types */
 import React, { Fragment, useState } from 'react';
 import classnames from 'classnames';
-import { ListView, PullToRefresh, ActivityIndicator, Tabs } from 'antd-mobile';
+import {
+  ListView,
+  PullToRefresh,
+  ActivityIndicator,
+  Tabs,
+  SearchBar,
+} from 'antd-mobile';
 import { ListViewProps } from 'antd-mobile/lib/list-view';
 import { Empty, Skeleton } from 'antd';
+import dayjs from 'dayjs';
 import useList from '@/components/ScrollList/hooks/useList';
 import Filter from '@/components/Filter';
 import { FilterOptionItem } from '@/components/Filter/Propstype';
@@ -34,6 +41,7 @@ const ScrollView: React.FC<ScrollViewProps> = props => {
     requestOptions,
     tabOptions,
     filterOptions,
+    searchOptions,
   } = props;
   const [filterParams, setFilterParams] = useState<Record<string, unknown>>({}); // 筛选参数
   // const pagination = useRef({page:pageOptions.page, pageSize: pageOptions.pageSize})
@@ -54,6 +62,7 @@ const ScrollView: React.FC<ScrollViewProps> = props => {
     refreshing,
     refreshHandle,
     run,
+    searchHandle,
   } = useList({
     requestHandle: requestOptions.requestHandle,
     dependent,
@@ -108,13 +117,11 @@ const ScrollView: React.FC<ScrollViewProps> = props => {
   ) => React.ReactElement<any> = (rowData, sectionID, rowID, highlightRow) => {
     const ItemComponent = getItemComponent();
     const rowProps = rowOptions?.rowProps ? rowOptions?.rowProps : {};
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
     return (
       <ItemComponent
-        {...rowData}
         sectionID={sectionID}
         rowId={rowID}
+        {...rowData}
         {...rowProps}
       />
     );
@@ -177,6 +184,27 @@ const ScrollView: React.FC<ScrollViewProps> = props => {
     }
   };
 
+  const renderSearch = () => {
+    if (searchOptions) {
+      const {
+        visible,
+        requestHandle,
+        params,
+        onCancel,
+        onSubmit,
+      } = searchOptions;
+      const onSubmitHandle = (value: string) => {
+        console.log(value);
+        onSubmit(value);
+      };
+
+      if (visible) {
+        return <SearchBar onSubmit={onSubmitHandle} onCancel={onCancel} />;
+      }
+    }
+    return null;
+  };
+
   const renderBody = () => {
     if (loading) {
       return <SkeletonComponent />;
@@ -218,9 +246,11 @@ const ScrollView: React.FC<ScrollViewProps> = props => {
     [styles.container]: true,
   });
 
+  console.log(dayjs());
   return (
     <div className={cls}>
       {renderFilter()}
+      {renderSearch()}
       {renderBody()}
     </div>
   );

diff --git a/src/components/ScrollList/type.d.ts b/src/components/ScrollList/type.d.ts
@@ -1,7 +1,6 @@
 import React from 'react';
 import TabData from 'rmc-tabs/lib/Models';
 import { FilterProps } from '../Filter/Propstype';
-import ex from 'umi/dist';
 
 export interface ScrollOptionsType {
   params: Record<string, unknown>;
@@ -26,6 +25,14 @@ export interface TabOption {
   onTabClick?: () => void;
 }
 
+export interface SearchOptions {
+  visible: boolean;
+  params?: Record<string, any>;
+  requestHandle?: (params: any) => Promise<any>;
+  onSubmit: (value: string) => void;
+  onCancel: () => void;
+}
+
 export interface ScrollViewProps {
   flex?: boolean;
   rowRender: (
@@ -47,4 +54,5 @@ export interface ScrollViewProps {
   filterOptions?: FilterProps;
   tabOptions?: TabOption;
   // listOptions?: ListOptions
+  searchOptions?: SearchOptions;
 }