Skip to content

i5ting/stateview

Repository files navigation

简体中文 | English

Stateview


a react render solution for Multi-State View.

npm version download standardjs License Node

Features


  • Compatible with JSX (React/Remax/Taro/Eva.js)
  • Built-in the Multi-State View with {Stateview , Layer, setViewState }
  • Customize Data Dispatch via React Component props.data
  • Support the Nested Stateview

预览

可以通过StackBlitz进行线上预览:

Open in StackBlitz

安装

$ npm install --save stateview

用法

下面是3个示例,展示Stateview在多状态视图切换功能上的抽象和能力。

  • 示例1:最小示例,只有Logined和UnLogin二个状态,纯UI展示型,通过stateview.show切换视图
  • 示例2:数据示例,通过stateview.datashow切换状态来控制视图展示,视图组件在切换的时候,根据props.data进行渲染
  • 示例3:嵌套示例,主要演示复杂场景里多状态视图切换。
  • 示例4:分组示例,主要演示复杂场景同时存在多个Stateview命名空间冲突问题。

最小示例

最小示例,只有Logined和UnLogin二个状态。

import React from 'react';

import { Stateview, Layer, setViewState } from 'stateview';

/**
 * 最简单的Demo:2个状态切换 
 */
export default () => {

  function unlogin() {
    setViewState('unlogin')
  }

  function logined() {
    setViewState('logined')
  }

  return (
    <Stateview default='unlogin'>
      <Layer state='logined'>
        <h1>Logined, <button onClick={unlogin}>go to UnLogin</button></h1>
      </Layer>
      <Layer state='unlogin'>
        <h1 >UnLogin, <button onClick={logined}>go to Logined</button></h1>
      </Layer>
    </Stateview>
  );
}

数据示例

import React from 'react';

import { Stateview, Layer, setViewState } from 'stateview';

const Logined = (props: any) => {
  function unlogin() {
    setViewState('unlogin', { name: 'unlogin i5ting' })
  }
  return (<h1>Logined, <button onClick={unlogin}>{props.data.name}</button></h1>)
}

const UnLogin = (props: any) => {
  return (<h1 >UnLogin, <button onClick={props.action}>{props.data.name}</button></h1>)
}

export default (props: any) => {

  function logined() {
    setViewState('logined', { name: 'logined i5ting' })
  }

  return (
    <span>
      <Stateview default='unlogin' data={{ name: 'somename' }}>
        <Layer state='logined' component={<Logined />} />
        <Layer state='unlogin' component={<UnLogin action={logined} />} />
      </Stateview>
    </span>
  );
}

嵌套示例

带嵌套的3个状态示例

- root
    - 已登录logined
        - 可领 candraw
        - 次数不足 notdraw
    - 未登录unlogin

entry

import React from 'react';

import { Stateview, Layer } from 'stateview';
import { Logined, UnLogin } from '../layers/1';

export default () => {
  return (
    <Stateview default='unlogin'>
      <Layer state='logined' component={<Logined name='跳转到未登录状态' />} />
      <Layer state='unlogin' component={<UnLogin name='跳转到登录状态' />} />
    </Stateview>
  );
}

unlogin

import React from 'react';
import { setViewState } from 'stateview';

export function UnLogin(props: any) {

  function sayHello() {
    setViewState('logined')
  }

  return <h1 >UnLogin, <button onClick={sayHello}>{props.name}</button></h1>;
}

logined

import React from 'react';
import { Stateview, Layer, setViewState } from 'stateview';
import { CanDraw, NotDraw } from './logined/index';

export function Logined(props: any) {

  function sayHello() {
    setViewState('unlogin')
  }

  return <>
    <h1>Logined, <button onClick={sayHello}>{props.name}</button></h1>
    <Stateview default='notdraw'>
      <Layer state='candraw' component={<CanDraw name='跳转到未登录状态' />} />
      <Layer state='notdraw' component={<NotDraw name='跳转到可领状态' />} />
    </Stateview>
  </>;
}

分组示例

分组表达,主要解决复杂场景同时存在多个Stateview命名空间冲突问题。通过window.stateview['alfred'],具体方法和window.stateview上的一样。

import React from 'react';

import { Stateview, Layer, getStateview } from 'stateview';

/**
 * 最简单的分组Demo:2个状态切换 
 */
export default (props: any) => {

  function unlogin() {
    getStateview('alfred').setViewState('unlogin')
  }

  function logined() {
    getStateview('alfred').setViewState('logined')
  }

  return (
    <Stateview default='unlogin' group='alfred'>
      <Layer state='logined'>
        <h1>Logined, <button onClick={unlogin}>go to UnLogin</button></h1>
      </Layer>
      <Layer state='unlogin'>
        <h1 >UnLogin, <button onClick={logined}>go to Logined</button></h1>
      </Layer>
    </Stateview>
  );
}

文档

运行示例方法

$ npm i 
$ npm run dev

参与贡献

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

Refer to the CONTRIBUTING.

License

Copyright © i5ting. All rights reserved.

Licensed under the MIT license.