公共筛选组件(二次封装antd)支持代码提示

2024-06-24 13:52

本文主要是介绍公共筛选组件(二次封装antd)支持代码提示,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

如果项目是基于antd组件库为基础搭建,可使用此公共筛选组件
界面样式

使用到的库

npm i antd
npm i lodash-es
npm i @types/lodash-es -D

/components/CommonSearch

index.tsx

import React from 'react';
import { Button, Card, Form } from 'antd';
import styles from './index.module.scss';
import { renderItem, IItem } from './const';
import { debounce, pickBy } from 'lodash-es';interface IProps {items: IItem[];/** 标签位置 默认: inset */labelAlign?: 'left' | 'inset';/** 查询回调 */onSearch: <T>(values: T) => void;/** 重置回调 */onReset: () => void;
}export default function Index(props: IProps) {const { items = [], labelAlign = 'inset', onSearch, onReset } = props;const [form] = Form.useForm();const clasNameHandle = (row: IItem) => {const labelInset = styles[`custom-form-item-${row?.type?.toLowerCase() || 'label'}`];let className = `${styles['form-item-input']} ${row?.props?.className || ''} `;if (labelAlign === 'inset') {className += labelInset;}className = className.trim();return className;};const trimWhitespace = (value) => {if (typeof value === 'string') {return value.trim();}return value;};const searchHandle = debounce(() => {const values = form.getFieldsValue();const format = pickBy(values, (v) => v !== undefined && v !== null && v !== '');const delTrim = Object.keys(format).reduce((pre: any, cur: any) => {pre[cur] = trimWhitespace(format[cur]);return pre;}, {});console.log(delTrim, 'values');onSearch && onSearch(delTrim);}, 100);const resetSearch = debounce(() => {form.resetFields();onReset && onReset();}, 100);if (!items?.length) {return null;}return (<Card className={styles['search-card-box']}><Form layout="inline" form={form}>{items?.map((item: IItem) => {const className = clasNameHandle(item);const itemProps = {options: item.options,onPressEnter: () => {searchHandle();},...(item.props ?? {}),className,};return (<divkey={item.name}className={`${styles['search-item-wrap']} ${labelAlign === 'inset' ? styles['search-item-wrap-inset'] : ''}`}><Form.Item label={item.label} name={item.name}>{renderItem(item.type, itemProps)}</Form.Item></div>);})}</Form><div className={styles['search-btn']}><Button type="primary" onClick={searchHandle}>查询</Button><Button type="default" onClick={resetSearch}>重置</Button></div></Card>);
}

index.module.scss

.search-card-box {:global {.ant-card,.ant-card-body {padding: 16px 0 16px 16px;}}.search-item-wrap {width: 25%;min-width: 240px;margin-bottom: 12px;.form-item-input {width: 100%;}.custom-form-item-timepicker,.custom-form-item-input,.custom-form-item-select,.custom-form-item-inputnumber,.custom-form-item-datepicker,.custom-form-item-label {width: 100%;border-color: transparent;box-shadow: none;&:focus {box-shadow: none;}}}.search-item-wrap-inset {:global {.ant-row {padding-left: 12px;border: 1px solid #d9d9d9;border-radius: 6px;}.ant-row:focus-within {border-color: var(--primary-color);}}}.search-btn {display: flex;gap: 12px;justify-content: flex-end;padding-right: 16px;}
}

const.tsx

import {DatePicker,DatePickerProps,Input,InputNumber,InputNumberProps,InputProps,Select,SelectProps,TimePickerProps,
} from 'antd';interface IOptions {label: string;value: any;
}type IType = 'Input' | 'InputNumber' | 'Select' | 'DatePicker' | 'TimePicker';
type PropsMap = {Input: InputProps;InputNumber: InputNumberProps;Select: SelectProps;DatePicker: DatePickerProps;TimePicker: TimePickerProps;
};export interface IItem<T extends IType = IType> {label: string;name: string;type: T;props?: PropsMap[T];options?: IOptions[];
}export const renderItem = (type, props) => {switch (type) {case 'Input':return <Input placeholder="请输入" {...props} />;case 'TextArea':return <Input.TextArea placeholder="请输入" {...props} />;case 'InputNumber':return <InputNumber placeholder="请输入" controls={false} {...props} />;case 'Select':return <Select placeholder="请选择" {...props} />;case 'DatePicker':return <DatePicker {...props} />;case 'TimePicker':return <DatePicker.TimePicker {...props} />;default:return <Input placeholder="请输入" {...props} />;}
};

这篇关于公共筛选组件(二次封装antd)支持代码提示的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1090336

相关文章

Java中调用数据库存储过程的示例代码

《Java中调用数据库存储过程的示例代码》本文介绍Java通过JDBC调用数据库存储过程的方法,涵盖参数类型、执行步骤及数据库差异,需注意异常处理与资源管理,以优化性能并实现复杂业务逻辑,感兴趣的朋友... 目录一、存储过程概述二、Java调用存储过程的基本javascript步骤三、Java调用存储过程示

Visual Studio 2022 编译C++20代码的图文步骤

《VisualStudio2022编译C++20代码的图文步骤》在VisualStudio中启用C++20import功能,需设置语言标准为ISOC++20,开启扫描源查找模块依赖及实验性标... 默认创建Visual Studio桌面控制台项目代码包含C++20的import方法。右键项目的属性:

Golang如何对cron进行二次封装实现指定时间执行定时任务

《Golang如何对cron进行二次封装实现指定时间执行定时任务》:本文主要介绍Golang如何对cron进行二次封装实现指定时间执行定时任务问题,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录背景cron库下载代码示例【1】结构体定义【2】定时任务开启【3】使用示例【4】控制台输出总结背景

MySQL数据库的内嵌函数和联合查询实例代码

《MySQL数据库的内嵌函数和联合查询实例代码》联合查询是一种将多个查询结果组合在一起的方法,通常使用UNION、UNIONALL、INTERSECT和EXCEPT关键字,下面:本文主要介绍MyS... 目录一.数据库的内嵌函数1.1聚合函数COUNT([DISTINCT] expr)SUM([DISTIN

IDEA Maven提示:未解析的依赖项的问题及解决

《IDEAMaven提示:未解析的依赖项的问题及解决》:本文主要介绍IDEAMaven提示:未解析的依赖项的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝... 目录IDEA Maven提示:未解析的依编程赖项例如总结IDEA Maven提示:未解析的依赖项例如

Java实现自定义table宽高的示例代码

《Java实现自定义table宽高的示例代码》在桌面应用、管理系统乃至报表工具中,表格(JTable)作为最常用的数据展示组件,不仅承载对数据的增删改查,还需要配合布局与视觉需求,而JavaSwing... 目录一、项目背景详细介绍二、项目需求详细介绍三、相关技术详细介绍四、实现思路详细介绍五、完整实现代码

Go语言代码格式化的技巧分享

《Go语言代码格式化的技巧分享》在Go语言的开发过程中,代码格式化是一个看似细微却至关重要的环节,良好的代码格式化不仅能提升代码的可读性,还能促进团队协作,减少因代码风格差异引发的问题,Go在代码格式... 目录一、Go 语言代码格式化的重要性二、Go 语言代码格式化工具:gofmt 与 go fmt(一)

Python中对FFmpeg封装开发库FFmpy详解

《Python中对FFmpeg封装开发库FFmpy详解》:本文主要介绍Python中对FFmpeg封装开发库FFmpy,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录一、FFmpy简介与安装1.1 FFmpy概述1.2 安装方法二、FFmpy核心类与方法2.1 FF

k8s上运行的mysql、mariadb数据库的备份记录(支持x86和arm两种架构)

《k8s上运行的mysql、mariadb数据库的备份记录(支持x86和arm两种架构)》本文记录在K8s上运行的MySQL/MariaDB备份方案,通过工具容器执行mysqldump,结合定时任务实... 目录前言一、获取需要备份的数据库的信息二、备份步骤1.准备工作(X86)1.准备工作(arm)2.手

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.