Screen

筛选漏斗。Screen UI UI提供与WeLink规范一致的视图。

参数说明

Selection

ScreenSort

Screen

import React from 'react';

import {

  Selection, ScreenArea, Screen, ScreenSort

} from '@wecode/react-weui';

export default class ScreenDemo extends React.Component {

  state = {

    defaultValue1: 'Jose Robinson',

    defaultValue2: '',

    arrayList: [

      { label: 'Elizabeth Anderson', value: 'Elizabeth Anderson' },

      { label: 'Sarah Martin', value: 'Sarah Martin' },

      { label: 'Cynthia Hall', value: 'Cynthia Hall' },

      { label: 'Anthony Miller', value: 'Anthony Miller' },

      { label: 'Karen Hall', value: 'Karen Hall' },

      { label: 'Steven Jones', value: 'Steven Jones' },

      { label: 'Jennifer Martinez', value: 'Jennifer Martinez' },

      { label: 'Joseph Jones', value: 'Joseph Jones' },

      { label: 'Maria Davis', value: 'Maria Davis' },

      { label: 'Jose Robinson', value: 'Jose Robinson' },

      { label: 'Brenda Harris', value: 'Brenda Harris' },

      { label: 'Charles Martin', value: 'Charles Martin' },

      { label: 'Eric Lopez', value: 'Eric Lopez' },

      { label: 'Anna Smith', value: 'Anna Smith' },

      { label: 'Jose Lopez', value: 'Jose Lopez' },

      { label: 'Michelle Perez', value: 'Michelle Perez' },

      { label: 'Angela Smith', value: 'Angela Smith' },

      { label: 'Susan Clark', value: 'Susan Clark' },

      { label: 'Lisa Martin', value: 'Lisa Martin' },

      { label: 'Sandra Williams', value: 'Sandra Williams' },

      { label: 'Dorothy Thomas', value: 'Dorothy Thomas' },

      { label: 'Kenneth Perez', value: 'Kenneth Perez' },

      { label: 'Larry Lewis', value: 'Larry Lewis' },

      { label: 'Frank Taylor', value: 'Frank Taylor' }

    ],

    screenArray: [

      { title: '维度一', data: [{ value: '1', label: '选项1' }, '选项名称长', '选项3', '选项4', '选项5', '选项名称长', '选项7', '选项8'] },

      { title: '维度二', data: [{ value: '1', label: '选项1' }, '选项名称长', '选项3', '选项名称长', '选项名称长', '选项6', '选项7'] },

      { title: '维度三', data: [{ value: '1', label: '选项1' }, '选项名称长', '选项3', '选项4', '选项名称长', '选项名称长', '选项7', '选项8'] }

    ],

    active: true

  }

  handleChangeValue = (key, value) => {

    this.setState({ [key]: value });

  }

  render() {

    const {

      defaultValue1, defaultValue2,

      arrayList, screenArray, sort, active

    } = this.state;

    return (

      <div>

        <ScreenArea>

          <Selection

            key="1"

            value={defaultValue1}

            dataSource={arrayList}

            placeholder="请选择数据"

            onChange={value => this.handleChangeValue('defaultValue1', value)}

          />

          <ScreenSort title="发布时间" sort={sort} onClick={()=> this.setState({ sort: (sort === 'asc' ? 'desc' : 'asc') })} />

          <Selection

            key="2"

            value={defaultValue2}

            dataSource={arrayList}

            placeholder="请选择数据"

            onChange={value => this.handleChangeValue('defaultValue2', value)}

          />

          <Screen

            groups={screenArray}

            active={active}

            resetText="Reset"

            okText="OK"

            defaultSelect={[[0, 3], 3, 4, 2]}

            onOkClick={selects=>{

              if (selects && selects.length > 0) {

                const selectgrounds = selects.filter(select=>{

                  if (Array.isArray(select)) {

                    return select.filter(val=>val || val === 0);

                  }

                  return select || select === 0;

                });

                console.log('selectgrounds:', selectgrounds);

                this.setState({ active: (selectgrounds && selectgrounds.length > 0) }, ()=>{ const { active } = this.state; console.log('------active', active) ; });

                return;

              }

              this.setState({ active: false });

            }}

          >

            筛选

          </Screen>

        </ScreenArea>

      </div>

    );

  }

}