Wbd-frontend-kit NPM

wbd-frontend-kit

包含组件、TS 类型定义、hooks、前端脚本等的 React 开发集合

组件

Message 消息提示组件（完全兼容 antd message 组件）

适用场景：每个类型的消息每次只允许展示一个，如果当一个消息提示的显示且并未消失时，其他消息提示默认不展示

使用方式：

import { message } from 'antd'
import { messageApi } from 'wbd-frontend-kit'

const singletonMessage = messageApi(message)

singletonMessage.success({ content: 'success' })
singletonMessage.info('info')
singletonMessage.reset()
singletonMessage.error('error happend!')

Hooks

usePagination 用于分页使用方式：

import { usePagination, useNoRenderPagination } from 'wbd-frontend-kit'
// handleChange, handleShowSizeChange, reset 会触发组件更新
const [page, size, handleChange, handleShowSizeChange, reset] = usePagination({
  page: 1,
  size: 10,
})
// setPage不会触发组件更新，适用于手动更新的方式
const [pageOptions, setPage] = useNoRenderPagination({ page: 1, size: 10 })

useQueryParams 获取查询参数使用方式:

import { useQueryParam, useQueryParams } from 'wbd-frontend-kit'
// 获取单个参数
const name = useQueryParam(location.search, 'name')
// 获取所有参数
const params = useQueryParams(location.search)

useToggleState true/false 状态切换使用方式:

import { useToggleState } from 'wbd-frontend-kit'
const [state, toggleState] = useToggleState(false)
toggleState()

工具函数

execFunction(func, ...params)用于执行函数的函数，常用于执行callback

import { execFunction } from 'wbd-frontend-kit'
execFunction(func)

exportFile(url, params)下载远程文件

import { exportFile } from 'wbd-frontend-kit'
const sendData = { Authorization: this.state.Authorization, type: 'all' }
exportFile('/api/admin/platform/downloadReceiptProfitTemplate.xls', sendData)

importAll(ctx: __WebpackModuleApi.RequireContext, isArray?: boolean, formatkey?: (key: string) => string) 批量导出模块

importAll函数用于批量导出模块，ctx函数为require.context的context实例，isArray表示导出类型是否是数组，formatKey表示在导出为对象的情况下，自定义key。

importAll函数依赖require.context，详情见require.context的使用。注意：本函数只在使用Webpack构建的项目中生效。

例如如果要导出pages/目录下所有的model.ts，可以是如下的写法：

import { importAll } from 'wbd-frontend-kit'
// 1. 导出为对象，使用默认的key生成规则
export default importAll(require.context('./pages/', true, /.*model\.ts$/))
// 2. 导出为对象，使用自定义key规则（加上前缀）
export default importAll(require.context('./pages/', true, /.*model\.ts$/), false, (key) => `prefix-${key}`)
// 3. 导出为数组
export default importAll(require.context('./pages/', true, /.*model\.ts$/), true)

warning(content), warningOnce(content)开发模式下控制台警告

import { warn } from 'wbd-frontend-kit
warn.warning('warning there')
warn.warningOnce('warning once')
warn.resetWarned()
warn.warningOnce('warning once')

其余工具函数见es/utils

脚本

本项目包含的所有脚本均可以通过wbd-scripts [command] [<params>]的方式运行，全局安装yarn global add wbd-frontend-kit后直接使用该命令或本地安装后在package.json中的scripts对象中添加{"commandxx": "wbd-scripts"}，然后使用通过yarn commandxx commandName的运行脚本。

Usage: wbd-scripts [command] [<params>]

  [command]
    将要运行的命令名称，例如 wbd-scripts module
  <params>
    该命令需要的参数（可选），例如：wbd-scripts init ts dva 表示初始化时使用ts和dva

支持的命令

module: yarn wbd-scripts module 使用该命令创建一个新的模块，该模块包含了pages/routes/models三个部分。第一次运行命令会生成配置文件模板，修改模板后第二次运行本命令可生成一个新的模块。注：该命令生成的模块只适用于b2b模板的项目。
注意：1.0.7 版本后只支持web-templates模板，使用b2b模板的项目请使用 1.0.6 及以下版本