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

@riil-frontend/component-select-for-opration

v1.0.1-a.2

Published

变体选择器

Downloads

23

Readme

SelectForOperation 添加选项的选择器

select-for-opration

这是继承自Select选择器的变体,除了下面定义的相关属性外,其他的API属性继承与Select。SelectForOperation默认支持通过文本框添加和编辑选项,默认支持对选项的删除。可支持对其他操作项的扩展。

dataSourse的使用

SelectForOpration主要支持props中传入dataSource作为数据源。

注意:1、默认支持对选项的操作项悬浮显示,因此需要dataSource须包含boolean字段operation值为true。2、key值的使用同Select的默认设置。3、添加数据项时默认label和value值相同。

const dataSource = [
	{label:'option1', value:'option1'},
    {label:'option2', value:'option2'},
    {label:'operation',value:'operation' ,operation:true}
]

<SelectForOperation  dataSource={dataSource}/>

API

| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 | | -------- | ------------------------ | ---- | ---- | ------ | ---- | | value | 当前值,用于受控模式(同Select选择器) | - | any | - | - | | onChange | Select发生改变时触发的回调签名:Function(value: mixed, actionType: String, item: mixed) => void参数:value: {mixed} 选中的值actionType: {String} 触发的方式, 'itemClick', 'enter', 'tag'item: {mixed} 选中的值的对象数据 (useDetailValue=false有效) | - | Function | - | - | | dataSort | 默认选择器添加数据显示下拉菜单的位置可选值true:显示在下拉菜单第一条false:自定义显示下拉菜单的位置只针对添加类型为input类型有效 | - | boolean | true | 自定义时,saveOption,deleteOption,value,onChange需要填写,如果有扩展操作,相关的回调函数需要填写 | | addType |添加数据项的形式可选值'input':文本框'drawer':抽屉|-|String|'input'|-| | editType |编辑数据项的形式可选值'input':文本框'drawer':抽屉|-|String|'input'|-| | dataSource |数据源,同Select选择器|是|Array<Object/Boolean/Number/String>|-|显示操作列需要设置operation字段为true| | saveOption |添加项保存的方法签名:Function(e:Event, operation:boolean ,type:String ,item: Object)=>void参数e:{Event}DOM事件对象,返回文本框的值operation:{boolean}返回为 true,用于判断悬浮显示操作项type:{String}返回操作类型,'add'为添加,'edit'为编辑item:{Object}当前操作选项值对象,添加时null|-|Function|-|-| | deleteOption |删除选项的方法签名:Function(e:Event,item:Object)=>void参数e:{Event}DOM事件对象item:{Object}当前删除项的值对象|-|Function|-|-| | openDrawer |打开抽屉的方法签名:Function(isOpen:boolean,type:String,item:Object)=>void参数isOpen:{boolean}返回truetype:{String}:'add'表示添加时打开抽屉,'edit'表示编辑时打开抽屉item:{Object}当前操作选项值对象,添加时为null|-|Function|-|-| | operationItem |扩展添加操作项数组类型,元素为对象,包含两个字段,第一个为node:{ReactNode}为操作项;第二个为func:{Functon}类型,为回调函数回调函数签名:(e:Event,item:Object)=>void参数:e:{Event}DOM事件对象item:{Object}当前操作选项值对象|-|Array|null|[{node:,func:()=>{}},]| | validator |校验文本框的方法签名:Function(val:String,e:Event,type:String)=>String/null参数val:{String}当前需要校验的文本框值e:{Event}DOM事件对象type:{String}校验的类型,'add'为添加,'edit'为编辑返回值{String/null},返回校验信息,必须有返回值,有校验提示返回校验信息,没有提示返回null或者空字符串|-|Function|-|-| | addItemSort |添加按钮的位置可选值'first':添加按钮在下拉菜单的第一项'last':添加按钮在下拉菜单的 最后一项|-|String|'first'|-| | className |下拉菜单的样式名|-|String|'itemlist'|| | style |选择器样式|-|Object|-|{width:300}| | popupStyle |下拉菜单的样式|-|Object|-|{width:300}| | mode |选择器模式可选值'single', 'multiple'|-|String|'single'|-| | isOperation |添加项是否需要悬浮显示操作按钮|-|boolean|true|-|