npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ref-core

v2.0.5

Published

参照基础包(@tinper/next-ui版本)

Downloads

136

Readme

ref-core

参照组件的通用功能提取

如何使用

$ npm install ref-core --save
import RefCoreError from 'ref-core/lib/refs/RefCoreError';
import RefCoreButton from 'ref-core/lib/refs/RefCoreButton';
import RefCoreTab from 'ref-core/lib/refs/RefCoreTab';
import RefCoreSearch from 'ref-core/lib/refs/RefCoreSearch';
import RefWithInput from 'ref-core/lib/refs/RefWithInput';
import RefCoreGlobal from 'ref-core/lib/refs/RefCoreGlobal';

refcore提供以下通用组件

RefCoreButton

提供确认,取消,清空已选按钮,已经进行国际化适配。在树参照、表格参照可见到

RefCoreError

没有查询到数据的提示,默认提示‘没有查询到数据’,已经进行国际化适配。在树参照、表格参照可见到。

RefCoreGlobal

return (
        <div>
            { React.cloneElement(
                this.props.children,
                {...this.props}
            )}
        </div>  
    )
可以与所有参照类型进行组合

RefCoreList

输出带有多选的list列表。暂未使用

RefCoreSearch

带有input的搜索。在带有搜索的树参照、简单搜索表格参照可见。

RefCoreTab

tab切换,默认展示的文字是‘已选’,‘收起已选’。可在表格参照中见到

RefCoreTable

包含表格和分页。暂未使用

RefCoreTree

树组件。可在树参照中可见

RefCoreWithInput

input组件。可以与所有参照类型进行组合。

API

注意:分为接收参数和提供参数。

RefCoreButton

接收参数

参数 | 类型 |默认值| 说明 | 必选 ---|---|--- | --- | --- emptyBut| bool | false| 清空按钮是否展示 |否 onClickBtn | function(value) | - | 点击按钮的onclick回调,value分为save、cancel、clear | 否 language |string| zh_CN |多语配置,详情查看参数详解。可选'zh_CN'/'en_US'/'zh_TW'/'fr_FR'/'de_DE'/'ja_JP' | 否 buttons|object| - |{buttons:{cancelButton:'',saveButton:'',clearButton:''}} 按钮文字展示| 否

提供参数暂无

RefCoreError

接收参数

参数 | 类型 |默认值| 说明 | 必选 ---|---|--- | --- | --- language |string| zh_CN |多语配置,详情查看参数详解。可选'zh_CN'/'en_US'/'zh_TW'/'fr_FR'/'de_DE'/'ja_JP' | 否 show|bool| - |是否展示| 否

提供参数暂无

RefCoreGlobal

接收参数

暂无

提供参数

暂无

RefCoreList

RefCoreSearch

接收参数

参数 | 类型 |默认值| 说明 | 必选 ---|---|--- | --- | --- language |string| zh_CN |多语配置,详情查看参数详解。可选'zh_CN'/'en_US'/'zh_TW'/'fr_FR'/'de_DE'/'ja_JP' | 否 placeholder|string| zh_CN |input的placeholder,已做国际化。可选'zh_CN'/'en_US'/'zh_TW'/'fr_FR'/'de_DE'/'ja_JP' | 否 className| string| '' |input的class类名。| 否 show | bool | true | input是否展示 | 否 onSearch | function(value) | --|搜索按钮点击回调,value是搜索内容|否 onChange | function(value) | --|input输入回调,value是输入内容|否

提供参数

暂无

RefCoreTab

接收参数

参数 | 类型 |默认值| 说明 | 必选 ---|---|--- | --- | --- language |string| zh_CN |多语配置,详情查看参数详解。可选'zh_CN'/'en_US'/'zh_TW'/'fr_FR'/'de_DE'/'ja_JP' | 否 className| string| '' |tabPanel的class类名。| 否 show | bool | true | tabPanel是否展示 | 否 selectedData | array | [] | 已选择的数据 | 否 selecteing | bool | --|selecteing:true,展示已选择数;selecteing:false,展示文字:收起已选|否 onSelectTabItem | function(selectedData, selecteing ? 'selected' : 'selecting') | --|tab切换文字点击操作| 否

提供参数

暂无

RefCoreTable

RefCoreTree

接收参数

参数 | 类型 |默认值| 说明 | 必选 ---|---|--- | --- | --- show | bool | true | tree是否展示 | 否 data | array | -- | tree数据|否 ~~checkable~~| bool | -- | ~~行数据选中有对号展示~~| 否 nodeKeys | function(value,index) | return item.id || index;| 节点的key | 否 displayField |string 或 function|'{refname}' |记录中显示的内容的格式。当为字符串时则会根据{}包裹的增则匹配替换。如:'人员姓名:{refname},编号:{refcode}'当为函数时则需自定义返回内容,参数为迭代已选择的记录。如:displayField: (record)=> ${record.refname}-${record.refname}| 否

提供参数

暂无

RefCoreWithInput

接收参数

参数 | 类型 |默认值| 说明 | 必选 ---|---|--- | --- | --- wrapClassName|string|空 | 文本框的class样,默认为空。 | 否 placeholder|string| 空 |文本框的 placeholder | 否 style| object| {width:200}| 文本框的style,默认宽度200px | 否 filterUrl| string|空|快捷录入接口。|否 filterUrlFunc| function(value) | ()=>{} | 必须配合filterUrl使用,当filterUrl为空或者不传入,才会回调filterUrlFunc | 否 filertData| Array| [] | 必须配合filterUrl使用,当filterUrl为空或者不传入,才会使用filterData| 否 displayField |string 或 function|'{refname}' |记录中显示的内容的格式。当为字符串时则会根据{}包裹的增则匹配替换。如:'人员姓名:{refname},编号:{refcode}'当为函数时则需自定义返回内容,参数为迭代已选择的记录。如:displayField: (record)=> ${record.refname}-${record.refname},是input展示value| 否 valueField |string|'refcode' |待提交的 value 的键。 | 否 value| string|空|默认值,例如 '{"refname":"初级-T1","refpk":"level1"}'。|否 disabled|bool| false |禁用整个参照 | 否 onChange|function(values, record)|--|value改变、快捷录入和保存时数据回调|否 canClickGoOn|function()| ()=>{return true}|当点击文本框右侧弹出按钮时是否打开modal适用于级联情况下当选择不全时的处理| 否 canInputGoOn|function()| ()=>{return true}|当点击文本框触发快捷录入时是否可以录入适用于级联情况下当选择不全时的处理| 否 menuIcon|string|<span className={uf uf-navmenu ${disabled ? 'ref-input-wrap-display' : ''}}> | input框打开参照的处的icon| 否

提供的参数

参数 | 类型 |默认值| 说明 | 必选 ---|---|--- | --- | --- showModal | bool | false | 是否展示参照 ,true显示,false不显示| 否 onSave | function(value) | -- | 参照确定的回调,会更新checkedArray,showname(input的value),showModal关闭,最后回调RefWithInput接收的参数onSave| 否 onCancel | function() | -- | 参照取消的回调,会更新showModal关闭,最后回调RefWithInput接收的参数onCancel| 否 checkedArray | Array | [] | 传给树选中的节点| 否 onMatchInitValue| function(value) | onMatchInitValue = (checkedArray) => {this.setState({checkedArray})} | 更改checkedArray | 否

RefCoreWithInput提供的参数可以保证参照组件的checkedArray更新以及参照showModal关闭打开,因此在使用RefCoreWithInput就不需要额外手动维护这两个参数