React封装强业务hook的一个例子
最近因为使用列表展示的需求有点多，就想着把列表分页筛选的逻辑抽象一下。看了umi的一个useTable的hook，也不能满足业务需要，于是就自己写了一个，支持本地分页筛选和接口分页筛选。
思路就是，筛选的字段都使用form表单控制，然后在hook里面将form和table联合起来。
下面贴出源码
1 import { TableProps, PaginationProps } from '@slardar/antd'; 2 import React, { useEffect } from 'react'; 3 import { 4 PaginationConfig, 5 SorterResult, 6 TableCurrentDataSource 7 } from 'antd/lib/table'; 8 import { useDeepCompareEffect } from '@byted-woody/slardar'; 9 10 export type WrappedFormUtils = any; 11 12 export interface TableControlState<T> extends TableProps<DataRow> { 13 pagination: PaginationProps; 14 sorter?: SorterResult<DataRow>; 15 loading?: boolean; 16 } 17 18 // 搜索参数描述 19 export interface SearchDescribe { 20 // 字段名 21 fieldName: string; 22 iniValue?: any; 23 // 输入值解析,比如日期输入解析 24 decodeFn?: any; 25 // 自定义搜索函数 26 searchFn?: (record: DataRow, desc: SearchDescribe) => boolean; 27 // 解析后的值 28 searchValue?: any; 29 // 调用接口或者只在本地过滤 30 searchMod?: 'api' | 'local'; 31 // 搜索的字段，默认只搜索当前字段 32 searchFields?: string[]; 33 } 34 35 export interface DataReceive { 36 pageSize?: number; 37 pageIndex?: number; 38 pageTotal?: number; 39 pageData: any[]; 40 } 41 42 export type DataRow = { [key: string]: any }; 43 export type DataApiGet = ( 44 apiParams, 45 pagination?: { pageIndex?: number; pageSize?: number } 46 ) => Promise<DataReceive>; 47 48 export interface FormTableReq { 49 form: WrappedFormUtils; 50 getDataApi: DataApiGet; 51 getDataParam?: { [key: string]: any }; 52 // 表单的字段解析 53 includeFormFields?: (SearchDescribe | string)[]; 54 // 本地分页 55 localPagination?: boolean; 56 // 本地搜索 57 localSearch?: boolean; 58 // 本地分页+搜索 59 local?: boolean; 60 afterFetchData?: (v: any) => void; 61 validateParam?: (param: any) => boolean; 62 } 63 64 const defaultTableState: TableControlState<DataRow> = { 65 pagination: { current: 1, total: 0, pageSize: 10 }, 66 dataSource: [], 67 loading: true 68 }; 69 70 export type FormTableRet = [ 71 TableControlState<DataRow>, 72 { fetchData: () => void } 73 ]; 74 75 export function useFormTable(options: FormTableReq): FormTableRet { 76 if (options.local) { 77 options?.includeFormFields?.forEach(d => (d.searchMod = 'local')); 78 return useFormTableLocal(options); 79 } else { 80 return useFormTableDB(options); 81 } 82 } 83 84 // 本地分页筛选版本 85 export function useFormTableLocal(options: FormTableReq): FormTableRet { 86 let { form, getDataApi, includeFormFields } = options; 87 let currentFormValue = form.getFieldsValue(); 88 // 缓存数据 89 let cacheDataListRef = React.useRef<DataRow[]>([]); 90 let [tableState, setTableState] = React.useState<TableControlState<DataRow>>( 91 defaultTableState 92 ); 93 let searchApiParam = {}; 94 let searchLocalParam: SearchDescribe[] = []; 95 if (Array.isArray(includeFormFields)) { 96 includeFormFields?.forEach(describe => { 97 if (typeof describe === 'string') { 98 let value = currentFormValue[describe]; 99 searchApiParam[describe] = value; 100 } else { 101 let value = currentFormValue[describe.fieldName]; 102 if (describe.decodeFn) { 103 value = describe.decodeFn(value); 104 } 105 if (describe.searchMod === 'api') { 106 searchApiParam[describe.fieldName] = value; 107 } else { 108 searchLocalParam.push( 109 Object.assign({ searchValue: value }, describe) 110 ); 111 } 112 } 113 }); 114 } else { 115 searchApiParam = currentFormValue; 116 } 117 118 function getTableApiData() { 119 getDataApi(searchApiParam).then(data => { 120 cacheDataListRef.current = data.pageData; 121 setTableState(prevState => { 122 return Object.assign({}, prevState, { dataSource: [] }); 123 }); 124 }); 125 } 126 127 useEffect(getTableApiData, []); 128 129 let { data, total } = calculatePageData( 130 tableState, 131 cacheDataListRef.current, 132 searchLocalParam 133 ); 134 135 function onSorterChange( 136 _pagination: PaginationConfig, 137 _filters: Record<keyof DataRow, string[]>, 138 _sorter: SorterResult<DataRow>, 139 _extra: TableCurrentDataSource<DataRow> 140 ) { 141 setTableState(prevState => { 142 return Object.assign({}, prevState, { sorter: _sorter }); 143 }); 144 } 145 146 let newPage: PaginationProps = { 147 total: total, 148 onChange: (page, pageSize) => { 149 setTableState(prevState => { 150 prevState.pagination.pageSize = pageSize; 151 prevState.pagination.current = page; 152 return Object.assign({}, prevState); 153 }); 154 } 155 }; 156 157 let finalPagination: PaginationProps = Object.assign( 158 {}, 159 tableState.pagination, 160 newPage 161 ); 162 163 return [ 164 { pagination: finalPagination, dataSource: data, onChange: onSorterChange }, 165 { fetchData: getTableApiData } 166 ]; 167 } 168 169 // 接口分页筛选版本 待完善 170 export function useFormTableDB(options: FormTableReq): FormTableRet { 171 let { form, getDataApi, includeFormFields } = options; 172 let currentFormValue = form.getFieldsValue(); 173 let [state, setState] = React.useState<TableControlState<DataRow>>( 174 defaultTableState 175 ); 176 let searchApiParam: { [key: string]: any } = {}; 177 let onceRef = React.useRef(false); 178 // 计算接口参数 179 if (Array.isArray(includeFormFields)) { 180 includeFormFields?.forEach(describe => { 181 if (typeof describe === 'string') { 182 let value = currentFormValue[describe]; 183 searchApiParam[describe] = value; 184 } else { 185 let value = currentFormValue[describe.fieldName]; 186 if (!onceRef.current && describe.iniValue) { 187 value = describe.iniValue; 188 } 189 if (describe.decodeFn) { 190 value = describe.decodeFn(value); 191 Object.assign(searchApiParam, value); 192 } else { 193 searchApiParam[describe.fieldName] = value; 194 } 195 } 196 }); 197 } else { 198 searchApiParam = currentFormValue; 199 } 200 Object.assign(searchApiParam, options.getDataParam); 201 const pageParam = { 202 pageIndex: state.pagination.current, 203 pageSize: state.pagination.pageSize 204 }; 205 206 function getTableApiData() { 207 if (options.validateParam && !options.validateParam(searchApiParam)) { 208 return; 209 } 210 setState(prevState => { 211 return Object.assign({}, prevState, { 212 loading: true 213 } as TableControlState<any>); 214 }); 215 getDataApi(searchApiParam, pageParam).then(data => { 216 const { pageData, pageTotal } = data; 217 onceRef.current = true; 218 setState(prevState => { 219 return Object.assign({}, prevState, { 220 dataSource: pageData, 221 pagination: { 222 current: pageParam.pageIndex, 223 total: pageTotal || 0, 224 pageSize: pageParam.pageSize 225 }, 226 loading: false 227 } as TableControlState<any>); 228 }); 229 // 将表单数据同步到query 230 if (options.afterFetchData) { 231 options.afterFetchData(currentFormValue); 232 } 233 }); 234 } 235 useDeepCompareEffect(getTableApiData, [searchApiParam, pageParam]); 236 237 function onSorterChange( 238 _pagination: PaginationConfig, 239 _filters: Record<keyof DataRow, string[]>, 240 _sorter: SorterResult<DataRow>, 241 _extra: TableCurrentDataSource<DataRow> 242 ) { 243 setState(prevState => { 244 return Object.assign({}, prevState, { sorter: _sorter }); 245 }); 246 } 247 248 let finalPagination: PaginationProps = Object.assign( 249 { 250 total: state.pagination.total, 251 onChange: (page, pageSize) => { 252 setState(prevState => { 253 prevState.pagination.pageSize = pageSize; 254 prevState.pagination.current = page; 255 return Object.assign({}, prevState); 256 }); 257 } 258 }, 259 state.pagination 260 ); 261 let dataSource = state.dataSource; 262 if (options.localPagination) { 263 let { data, total } = calculatePageData(state, state.dataSource as any, []); 264 finalPagination.total = total; 265 dataSource = data; 266 } 267 268 return [ 269 { 270 pagination: finalPagination, 271 dataSource: dataSource, 272 onChange: onSorterChange, 273 loading: state.loading 274 }, 275 { fetchData: getTableApiData }, 276 state 277 ] as any; 278 } 279 280 // 排序，筛选，计算分页数据 281 function calculatePageData( 282 state: TableControlState<DataRow>, 283 dataList: DataRow[], 284 param: SearchDescribe[] 285 ) { 286 let { pagination, sorter } = state; 287 let { current = 1, pageSize = 10 } = pagination; 288 let copyDataList = Array.from(dataList); 289 // 排序 290 if (sorter?.column) { 291 let order = sorter.order; 292 let sortField = sorter.columnKey; 293 copyDataList = copyDataList.sort((a, b) => { 294 if (order === 'ascend') { 295 return a[sortField] - b[sortField]; 296 } else { 297 return b[sortField] - a[sortField]; 298 } 299 }); 300 } 301 // 筛选 302 if (Array.isArray(param) && param.length > 0) { 303 copyDataList = copyDataList.filter(function filter(v) { 304 return param.every(desc => { 305 let { fieldName, searchValue, searchFields, searchFn } = desc; 306 let fieldValue = v[fieldName]; 307 let searchString = searchValue; 308 if (!searchString) { 309 return true; 310 } 311 if (searchFn) { 312 return searchFn(v, desc); 313 } 314 if ( 315 typeof fieldValue !== 'string' || 316 typeof searchString !== 'string' 317 ) { 318 return true; 319 } 320 if (searchFields?.length) { 321 return searchFields?.some(fieldName => { 322 let value = v[fieldName]; 323 if (typeof value === 'string') { 324 value.includes(searchString); 325 } 326 return false; 327 }); 328 } else { 329 return fieldValue.includes(searchString); 330 } 331 }); 332 }); 333 } 334 // 分页 335 let displayData = copyDataList.slice( 336 (current - 1) * pageSize, 337 current * pageSize 338 ); 339 // 默认空数据的展示 340 displayData.forEach(d => { 341 Object.entries(d).forEach(([k, v]) => { 342 if (v !== 0 && !v) { 343 d[k] = '---'; 344 } 345 }); 346 return d; 347 }); 348 return { data: displayData, total: copyDataList.length }; 349 }
下面是业务代码demo
1 import React, { FC } from 'react'; 2 import { Form, FormComponentProps, Input, Table } from '@slardar/antd'; 3 import { useFormTable } from '@slardar/common-modules'; 4 5 const FormItem = Form.Item; 6 7 interface IProps extends FormComponentProps {} 8 const DemoComponent: FC<IProps> = function(props) { 9 const form = props.form; 10 let [tableState] = useFormTable({ 11 form: props.form, 12 getDataApi: () => Promise.resolve([] as any), 13 includeFormFields: ['name', 'search'] 14 }); 15 16 return ( 17 <div className={'alarm-page-content'}> 18 <Form layout={'inline'}> 19 <FormItem> 20 {form.getFieldDecorator('name')( 21 <Input.Search 22 style={{ marginLeft: 16, width: 150 }} 23 placeholder="名称" 24 /> 25 )} 26 </FormItem> 27 <FormItem> 28 {form.getFieldDecorator('search')( 29 <Input.Search 30 style={{ marginLeft: 16, width: 150 }} 31 placeholder="评论" 32 /> 33 )} 34 </FormItem> 35 </Form> 36 <Table {...tableState} columns={[]} /> 37 </div> 38 ); 39 }; 40 41 export const Demo = Form.create()(DemoComponent);
1 1 import { useRef, useEffect } from 'react'; 2 2 import _ from 'lodash'; 3 3 export function useDeepCompareEffect<T>(fn, deps: T) { 4 4 // 使用一个数字信号控制是否渲染，简化 react 的计算，也便于调试 5 5 let renderRef = useRef<number | any>(0); 6 6 let depsRef = useRef<T>(deps); 7 7 if (!_.isEqual(deps, depsRef.current)) { 8 8 renderRef.current++; 9 9 } 10 10 depsRef.current = deps; 11 11 return useEffect(fn, [renderRef.current]); 12 12 }
