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>
    );
  }
}