November's Paddleball Marathon

    This package has been deprecated

    Author message:

    Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

    wbd-frontend-kit
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.13 • Public • Published

    wbd-frontend-kit

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

    组件

    1. 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

    1. 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 })
    1. useQueryParams 获取查询参数 使用方式:
    import { useQueryParam, useQueryParams } from 'wbd-frontend-kit'
    // 获取单个参数
    const name = useQueryParam(location.search, 'name')
    // 获取所有参数
    const params = useQueryParams(location.search)
    1. useToggleState true/false 状态切换 使用方式:
    import { useToggleState } from 'wbd-frontend-kit'
    const [state, toggleState] = useToggleState(false)
    toggleState()

    工具函数

    1. execFunction(func, ...params)用于执行函数的函数,常用于执行callback
    import { execFunction } from 'wbd-frontend-kit'
    execFunction(func)
    1. exportFile(url, params)下载远程文件
    import { exportFile } from 'wbd-frontend-kit'
    const sendData = { Authorization: this.state.Authorization, type: 'all' }
    exportFile('/api/admin/platform/downloadReceiptProfitTemplate.xls', sendData)
    1. importAll(ctx: __WebpackModuleApi.RequireContext, isArray?: boolean, formatkey?: (key: string) => string) 批量导出模块

    importAll函数用于批量导出模块,ctx函数为require.contextcontext实例,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)
    1. 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

    支持的命令

    1. module: yarn wbd-scripts module 使用该命令创建一个新的模块,该模块包含了pages/routes/models三个部分。第一次运行命令会生成配置文件模板,修改模板后第二次运行本命令可生成一个新的模块。注:该命令生成的模块只适用于b2b模板的项目。

      注意:1.0.7 版本后只支持web-templates模板,使用b2b模板的项目请使用 1.0.6 及以下版本

    Install

    npm i wbd-frontend-kit

    DownloadsWeekly Downloads

    2

    Version

    1.0.13

    License

    ISC

    Unpacked Size

    90 kB

    Total Files

    103

    Last publish

    Collaborators

    • limoer