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

@cainiaofe/overlay

v0.0.2

Published

overlay base component

Downloads

20

Readme

弹层

@cainiaofe/overlay

用于生成弹层的工具类集合。

如何使用

Overlay 提供了一系列组件用于创建弹层。其中包含:

Overlay

Overlay 可以在页面中弹出一个浮层,封装了定位,动画及其他一些可用性的功能。Overlay 被设计为无状态的组件,其本身并不控制自己显示和隐藏的状态。

注意: 类似 canCloseby* 的配置也需要配合 onRequestClose 才能关闭弹层。

安全节点 safeNode

Overlay 提供了点击弹层外文档中节点隐藏该弹层的功能,如果想让某个节点点击后不隐藏弹层(如:触发弹层打开的节点),请将该节点传入 safeNode 属性。

定位

  1. points 的值可以是由空格隔开的字符串,如 ['tl', 'bl'],其中 tl 代表目标元素的左上方,bl 代表基准元素的左下方,所以 ['tl', 'bl'] 的意思是目标元素的左上方对齐基准元素左下方。其中定位的可选值有 tl, tc, tr, cl, cc, cr, bl, bc, brttop 的缩写,bbottom 的缩写,ccenter 的缩写,lleft 的缩写,rright 的缩写。

Popup

Popup 是对 Overlay 的封装,children 作为触发节点,弹出一个浮层,这个浮层默认情况下使用这个节点作为定位的参照对象。

API

Overlay

| 参数 | 说明 | 类型 | 默认值 | | ---------------------- | ------------------------------------------------- | -------------- | --------------------------- | | children | 弹层内容 | ReactElement | - | | visible | 是否显示弹层 | Boolean | false | | onRequestClose | 弹层请求关闭时触发事件的回调函数 | Function | () => {} | | target | 弹层定位的参照元素 | Function | ()=> document.body | | points | 弹层相对于参照元素的定位 | [point, point] | ['tl', 'bl'] | | placement | 部分 points 的简写模式可选值:'t'(上,对应 points: ['bc', 'tc'])'r'(右,对应 points: ['lc', 'rc'])'b'(下,对应 points: ['tc', 'bc'])'l'(左,对应 points: ['rc', 'lc'])'tl'(上左,对应 points: ['bl', 'tl'])'tr'(上右,对应 points: ['br', 'tr'])'bl'(下左,对应 points: ['tl', 'bl'])'br'(下右,对应 points: ['tr', 'br'])'lt'(左上,对应 points: ['rt', 'lt'])'lb'(左下,对应 points: ['rb', 'lb'])'rt'(右上,对应 points: ['lt', 'rt'])'rb'(右下,对应 points: ['lb', 'rb']) | Enum | 'bl' | | | offset | 弹层相对于 trigger 的定位的微调,接收数组[hoz, ver], 表示弹层在 left / top 上的增量e.g. [100, 100] 表示往右、下分布偏移 100px | Array | [0, 0]| | container | 渲染组件的容器,如果是函数需要返回 ref,如果是字符串则是该 DOM 的 id,也可以直接传入 DOM 节点 | any | - | | hasMask | 是否显示遮罩 | Boolean | false | | canCloseByEsc | 是否支持 esc 按键关闭弹层 | Boolean | true | | canCloseByOutSideClick | 点击弹层外的区域是否关闭弹层,不显示遮罩时生效 | Boolean | true | | canCloseByMask | 点击遮罩区域是否关闭弹层,显示遮罩时生效 | Boolean | true | | onOpen | 弹层打开时触发事件的回调函数 | Function | noop | | onClose | 弹层关闭时触发事件的回调函数 | Function | noop | | beforePosition | 弹层定位完成前触发的事件 | Function | noop | | onPosition | 弹层定位完成时触发的事件签名:Function(config: Object) => void参数:config: {Object} 定位的参数config.config.points: {Array} 对齐方式,如 ['cc', 'cc'](如果开启 needAdjust,可能和预先设置的 points 不同)config.style.top: {Number} 距离视口顶部距离config.style.left: {Number} 距离视口左侧距离 | Function | noop | | autoFocus | 弹层打开时是否让其中的元素自动获取焦点 | Boolean | false | | autoAdjust | 当弹层由于页面滚动等情况不在可视区域时,是否自动调整定位以出现在可视区域 | Boolean | true | | autoHideScrollOverflow | 当 trigger 外面有滚动条,滚动到不可见区域后隐藏弹窗 | Boolean | true | | cache | 隐藏时是否保留子节点 | Boolean | false | | safeNode | 安全节点,当点击 document 的时候,如果包含该节点则不会关闭弹层,如果是函数需要返回 ref,如果是字符串则是该 DOM 的 id,也可以直接传入 DOM 节点,或者以上值组成的数组 | any | - | | wrapperClassName | 弹层的根节点的样式类 | String | - | | wrapperStyle | 弹层的根节点的内联样式 | Object | - |

Overlay.Popup

继承 Overlay 的 API,除非特别说明

| 参数 | 说明 | 类型 | 默认值 | | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ------------------------------ | | children | 触发弹层显示或隐藏的元素 | ReactNode | - | | overlay | 弹层内容 | ReactElement | - | | triggerType | 触发弹层显示或隐藏的操作类型,可以是 'click','hover','focus',或者它们组成的数组,如 ['hover', 'focus'] | String/Array | 'hover' | | triggerClickKeycode | 当 triggerType 为 click 时才生效,可自定义触发弹层显示的键盘码 | Number/Array | [KEYCODE.SPACE, KEYCODE.ENTER] | | visible | 弹层当前是否显示 | Boolean | - | | defaultVisible | 弹层默认是否显示 | Boolean | false | | onVisibleChange | 弹层显示或隐藏时触发的回调函数签名:Function(visible: Boolean, type: String, e: Object) => void参数:visible: {Boolean} 弹层是否显示type: {String} 触发弹层显示或隐藏的来源 fromTrigger 表示由 trigger 的点击触发;docClick 表示由 document 的点击触发e: {Object} DOM 事件 | Function | noop | | disabled | 设置此属性,弹层无法显示或隐藏 | Boolean | false | | delay | 弹层显示或隐藏的延时时间(以毫秒为单位),在 triggerType 被设置为 hover 时生效 | Number | 200 | | mouseEnterDelay | 鼠标移入弹层显示的延时时间(以毫秒为单位),在 triggerType 被设置为 hover 时生效,优先级高于 delay | Number | - | | mouseLeaveDelay | 鼠标移出弹层隐藏的延时时间(以毫秒为单位),在 triggerType 被设置为 hover 时生效,优先级高于 delay | Number | - | | followTrigger | 是否跟随 trigger 滚动 | Boolean | false