1.0.1 • Published 5 years ago

wow-react-bash v1.0.1

Weekly downloads
1
License
ISC
Repository
github
Last release
5 years ago

wow-react-bash

基于 react-bash 的 web 命令行组件

安装

npm install wow-react-bash

特性

本组件在 react-bash 的基础上增加了如下特性:

  • 支持异步命令及交互
  • 支持 filter
  • 支持 formatter
  • 支持 disabled
  • 支持限制最大历史条数
  • 更好的样式覆盖
  • 新增了一些方法和事件用于和父组件交互
  • 拦截了点击自动获取焦点事件,方便复制文字

Props

history *移除

请不要直接给该组件传递 history ,否则可能导致数据流异常。请使用 setHistory

styles *增强

  • 不会对你的样式文件造成污染
  • 会自动 merge 本组件的默认样式,而不是覆盖
  • 修复输入框的边框问题
{
  ReactBash: {
    border: '1px solid #ddd',
  },
  header: {
    padding: '5px 10px 0'
  }
}

更多样式单元可参考react-bash/styles.js

extensions *增强

  • 支持异步命令和更好的异步交互
  • 支持 ctrl + c 终止
{
  asyncCommand: {
    // 新增了 setState 函数用于支持异步指令。当然了目前你也只能用该函数实现同步指令了
    exec({ history }, command, { setState }) {
       const timer = setInterval(() => {
         history.push({value: 'test'})
         setState({ history })
       }, 1000)
       
       // 你可以返回一个用于终止此异步任务的函数,命令行会进入异步任务状态
       // 异步任务期间,其他自定义命令不会被执行
       // ctrl + c 或 手动调用 kill 都会触发此函数
       // 支持 Promise
       return () => clearInterval(timer)
    }
  }
}

disabled *新增

是否禁用命令行。默认:false

maxHistoryLength *新增

用于限制最大历史条数,防止内存占用过多导致浏览器卡死。默认:不限制(0)

onAsyncTaskChange *新增

当异步任务状态发生变化会触发该回调

onAsyncTaskChange (command, status) {
  // command: 同 react-bash
  // status: 'running' 或 'end'
}

formatter *新增

用于格式化命令行中的内容,可用于代码高亮,数据裁剪等需求

formatter (value) {
  // value: 一条 history 内容
  // 返回一个 React Element 或 String 来替换原始内容吧
  return <span styles={{ color: 'yellow' }}>{ value }<span>    
}

实例方法

// 通过 ref 拿到组件实例
<Bash ref={bash => (this.bash = bash)} />

setHistory

设置(重置)命令行内容

this.bash.setHistory([{ value: '欢迎使用 wow-react-bash' }])

filter

用于过滤并高亮包含某关键字的数据

注意:执行 filter 就不会再执行 formatter,原因是目前 filter 只支持处理原始的纯文本数据

this.bash.filter('hello')
this.bash.filter('') // 不过滤

exec

用于执行一条命令行指令,相当于在命令行中输入并回车

this.bash.exec('command some args')

kill

用于结束当前的异步任务

// 支持 Promise
this.bash.kill()

其他

仍待支持的问题:

  • structure 没有做完整的数据代理,某些情况下可能会存在问题
  • 由于 history 的数据代理方式,目前 clear 指令只会清屏并不会重置 history
  • 覆盖/屏蔽 默认命令
  • 更完善的 help,比如支持自定义帮助内容和自定义指令的帮助
  • 基于 format 之后数据(React Element)的 filter

讨论

首先为什么要做基于 format 之后数据(React Element)来做 filter ?

假设当前 History 数据为:

{ value: 'abcdefg' }

你格式化后的内容为

{ 
  value:
    <div>
        <span>a</span>
        <a href="">
          <span>b</span>
        </a>
    </div>
}

那么实际上显示在命令行中的内容只有「ab」。如果基于原始数据来过滤,用户搜索了「cde」却出现了一个「ab」的结果,显然会造成困惑

那如何基于以上 React Element 做关键词高亮和过滤? 此时我拿到的实际的数据结构类似为:

{
  type: 'div',
  children: [
    { type: 'span', children: 'a' }
    { 
      type: 'a', 
      children: [{ type: 'span', children: 'b' }]
    }
  ]
}

由于「ab」是个连续的词,而实际它们被分隔到了不同的 Node 节点中,这需要一个高效的算法来深度遍历以上结构去做高亮

倒是有一个比较取巧的方案是通过获取实际 Dom 结构的 innerText 来做,不过最后再考虑它吧

如果你有好的方案,欢迎 PR~