ws-web-utils

Can only be used internally for the project

Install

$ npm install --save ws-web-utils

API

stateHoc([options])(Component)

stateHoc是一个高阶组件，用于处理业务组件的等待、请求、异常处理显示等...

[options] (Object)

• Loading (Class/Func): loading状态下的显示组件

• Failure (Class/Func): failure状态下的显示组件

• Error (Class/Func): error状态下的显示组件

• NullData (Class/Func): nullData状态下的显示组件

• detail (Boolean): 如果 true ，则会通过 hocDetailKey 来获得key值用来处理渲染判断

• hocDetailKey (Function): 要求返回一个string类型的值，这个值是props.fetchStatus的渲染键名

• fetchStatus (String or Object):

  default模式下要求是string类型，遵循fetchStatus渲染规则(如下)。
  detail模式下要求是object类型，取object[key]来用于判断渲染，遵循fetchStatus渲染规则(如下)

• hocNullDataFunc (Function): 默认null，如果设置，则需要返回一个boolean值，用于判断是否显示NullData组件

Component

子组件下的成员方法

• hocComponentDidMount (Function): 如果存在，会在高级组件的render后像componentDidMount一样的生命周期执行,常用语fetch请求等

Examples

import {stateHoc,fetchStatus} from 'ws-web-utils'
import { connect } from "react-redux";

//默认模式
@connect(()=>({
    fetchStatus: fetchStatus.s
}))
@stateHoc()
class HourseDetail extends Component{
    hocComponentDidMount() {
        //todo more
    }
    render(){
        return <div>success</div>
    }
}

//detail模式
@connect(()=>({
    fetchStatus: {
        '1': fetchStatus.s
    }
}))
@stateHoc({
    detail: true
})
class HourseDetail extends Component{
    hocDetailKey(){
        return '1'
    }
    hocComponentDidMount() {
        //todo fetch
    }
    render(){
        return <div>success</div>
    }
}

fetchStatus (Object)

• l loading

• f failure

• e error

• s success

Examples

import {fetchStatus} from 'ws-web-utils'
console.log(fetchStatus)
/*
    {
        l: 'loading',
        f: 'failuer',
        e: 'error',
        s: 'success',
    }
*/

fetchStatus渲染规则

• fetchStatus.l render Loading
• fetchStatus.f render Failure
• fetchStatus.e render Error
• fetchStatus.s render 包裹的组件

废旧文档 (忽略以下)

stateHoc API (props , params)

options Config

| Param | Default | Type | Description | | :--- | :---: | :---: | :--- | | Loading | Loading | Class/Func | 等待状态 | | Failure | Failure | Class/Func | 失败状态 | | Error | Error | Class/Func | 错误状态 | | detail | false | Boolean | 使用场景是多个state | | keyFunc | undefined | Func | detail==true时有效，捆绑key生效 | | key | undefined | String | detail==true时有效，取值唯一标识 | | height | undefined | Number | LoadingView的height props |

Props Config

| Prop | Default | Type | Description | | :--- | :---: | :---: | :--- | | fetchStatus | undefined | String | 详见内部FetchStatus | | orther props | ...this.props | Object | ... |