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

hermes-tree-select

v1.1.8

Published

```html <Tree treeData = { cities } checked = { ['340803','340824'] } onChange = {this.onChange.bind(this) } searchValue = {this.state.searchValue } search = { this.search.bind(this) } /> ```

Downloads

59

Readme

同步树

 <Tree
  treeData = { cities }
  checked = { ['340803','340824'] }
  onChange = {this.onChange.bind(this) }
  searchValue = {this.state.searchValue }
  search = { this.search.bind(this) }
/>
  • treeData格式要求
[
  {
   id:'123',
   name:'Text', // 并不是必须的
   children:[{...}]
  }
]

// id 要求全局唯一的,
  • treeData 节点信息

  • checked 默认选中的节点id

  • disabled 默认禁用的节点id

  • onChange 在节点选中或者取消选中时触发,传入参数为ids 和 TreeModel

  • showCheckAll 是否显示全选(默认是false)

  • onlyLeft 只显示左边

  • defaultExpandLevel: 默认展开到哪个层级

  • onlyLeft 只显示左边节点

  • searchValue 搜索的值

  • search 搜索逻辑 searchValuesearch 配合使用来完成对树的搜索功能, 在searchValue变化时会便利所有节点, 然后把 searchValue 和当前节点 的信息, this指向树model(Node);

  • nodeText 节点描述信息, 默认为:

const DEFAULT_NODE_TEXT = (node, isRight) =>  {
    let rtn = false;
    if (node) {
     if (isRight) {
       if (node.id === '#') {
         rtn = (<span>已选 {`${node.checked().length}`}</span>)
       } else if (node.isLeaf()) {
         rtn = (<span>{node.model.name}</span>);
       } else {
         rtn = (<span>{node.model.name}({node.checked().length})</span>);
       }
     } else if (node.id === '#') {
       rtn = (<span>共 {`${node.leafs().length}`}</span>)
     } else if (node.isLeaf()) {
       rtn = (<span>{node.model.name}</span>);
     } else {
       rtn = (<span>{node.model.name}({node.leafs().length})</span>);
     }
    } else {
     rtn = (<span>搜索结果为空</span>);
    }
    return rtn;
};

// node 当前节点
// isRight 是否为右边节点
// this TreeModel(Node)

异步树

import Tree from 'hermes-tree-select';

const AsyncTree = Tree.AsyncTree
  • treeData 节点信息 需要传入初始化节点(一般为所有你传入的选中节点的信息)
  • checked 默认选中的节点id
  • disabled 默认禁用的节点id
  • onChange 在节点选中或者取消选中时触发,传入参数为ids 和 TreeModel
  • showCheckAll 是否显示全选(默认是false)
  • onlyLeft 只显示左边节点
  • searchValue 搜索的值
  • fetch 节点获取逻辑 searchValuefetch 配合使用来完成对树的搜索功能
fetch(node, searchValue) {
    return new Promise(resolve => {
      setTimeout(() => {
        if (!searchValue) {
          if (node.id === '#') {
            resolve(cloneDeep(cloneDeep(twoLevelAsync.children)))
          } else if (node.id === '0') {
            resolve(cloneDeep(cloneDeep(part0)))
          } else if (node.id === '1') {
            resolve(cloneDeep(part1));
          }
        } else {
          if (node.id === '#') {
            resolve(cloneDeep(searchData.children))
          } else if (node.id === '0') {
            resolve(cloneDeep(searchPart0))
          }
        }
      }, Math.random() * 2000)
    });
  }
 <AsyncTree
  treeData={treeData}
  checked={['02']}
  disabled={['02']}
  fetch={this.fetch.bind(this)}
  searchValue={this.state.searchValue}
  onChange={this.onChange.bind(this)}
/>

Node

  • get(id) 返回指定Id的节点
  • depth() 节点的深度
  • degree() 返回节点子节点的数量(节点的度)
  • isRoot() 是否为根节点
  • isLeaf() 是否为叶子节点
  • parent() 节点的父节点
  • children() 节点的子节点
  • ancestors() 节点的所有祖先节点
  • leafs() 返回该节点的所有叶子节点
  • checkState() 返回节点的选中状态 如果是叶子节点,只有 0 1两个状态 如果非叶子节点 有三种状态 0 1 -1;
  • disableState() 返回所有被禁用的叶子节点 只有两种状态 0 1
  • checked() 返回所有被选中的叶子节点(包括被禁用的节点)
  • disabled() 返回所有被禁用的叶子节点