云社区 博客 博客详情
云社区 博客 博客详情

筛选组件Screen

云会议运营喵大人 发表于 2020-03-10 15:50:58 03-10 15:50
云会议运营喵大人 发表于 2020-03-10 15:50:58 2020/03/10
0
0

【摘要】 Screen筛选漏斗。Screen UI UI提供与WeLink规范一致的视图。参数说明Selection名称类型默认值说明valuestring选中的值dataSourcearray组件数据显示数据placeholderstring未选择是显示字样onChangefunc组件选中事件ScreenSort名称类型默认值说明titlestring显示的文本sortstring上下箭头显示效果,...

Screen


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

参数说明

Selection

名称类型默认值说明
valuestring
选中的值
dataSourcearray
组件数据显示数据
placeholderstring
未选择是显示字样
onChangefunc
组件选中事件

ScreenSort

名称类型默认值说明
titlestring
显示的文本
sortstring
上下箭头显示效果,升序:asc,降序:desc
onClickfunc
组件的onclik事件

Screen

名称类型默认值说明
activeboolfalse选中状态
defaultSelectarray
选中的值
groupsarray
组件数据显示数据
onOkClickfunc
确认按钮事件
resetTextstring'重置条件'重置按钮文本
okTextstring'确定'确认按钮文本

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>

    );

  }

}


登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请发送邮件至:huaweicloud.bbs@huawei.com;如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 0
点赞
分享文章到微博
分享文章到朋友圈

评论 (0)


0/1000
评论

登录后可评论,请 登录注册

评论

您还没有写博客的权限!

温馨提示

您确认删除评论吗?

确定
取消
温馨提示

您确认删除评论吗?

删除操作无法恢复,请谨慎操作。

确定
取消
温馨提示

您确认删除博客吗?

确定
取消

确认删除

您确认删除博客吗?

确认删除

您确认删除评论吗?

温馨提示

登录超时或用户已下线,请重新登录!!!

确定
取消