组件

引用方式

import { MultiList } from '$yo-component';

// 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
// 你仍然可以通过下面这种方式来引用
import MultiList from 'yo3/component/multilist';

使用场景

这里展示的是 multiList 主要使用场景，用于多级列表选择。常见于去哪儿客户端、美团客户端、大众点评客户端，位置筛选功能。

class MultiListDemo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      multiValue: [],
      dataSource: originalData
    };
  }
  handleValueChange({newValue}) {
    let value;
    // 最后一项选中项value值为0,则清空value,0通常是不限。
    if (newValue[newValue.length - 1] === DEFAULT) {
      value = [];
    } else {
      value = newValue;
    }
    this.setState({
      multiValue: value
    });
  }
  async handleUpdateData(item){
    switch (item.asyncType){
      case 'SUBWAY-2':
        originalData.subList[5].subList[1].subList = await fetchDataOfSubway();
        this.setState({
          dataSource: Object.assign({}, originalData)
        });
      break;
    }
  }
  render() {
    return (
      <Page title="multiList Demo" extraClass="demo-content">
        <MultiList
          dataSource={this.state.dataSource}
          value={this.state.multiValue}
          onChange={this.handleValueChange.bind(this)}
          onUpdateData={this.handleUpdateData.bind(this)}
        />
      </Page>
    );
  }
}

异步加载数据

该方法用于减少首次渲染数据的大小，不适用于替代首次数据的获取。下面是传入组件中用于渲染的 dataSource。

const dataSource = {
  defaultValue: 1,
  subItemType: 'MENU',
  subList: [{
    name: '同步',
    value: 1,
    defaultValue: '1-1',
    subItemType: 'RADIO',
    subList: [{
      name: '1-1  默认选项',
      value: '1-1'
    }, {
      name: '1-2',
      value: '1-2'
    }, {
      name: '1-3',
      value: '1-3'
    }, {
      name: '1-4',
      value: '1-4'
    }]
  }, {
    name: '异步',
    value: 2,
    subItemType: 'RADIO',
    defaultValue: '2-2',
    subList: 'ASYNC',
    asyncType: '2-2'
  }]
};

组件按照 Value 和 defaultValue 来计算展开路径，并渲染组件。当渲染到 subList 为 ASYNC 的节点时会触发 onUpdateData 事件，并传入该层级数据内容作为参数，用户可以通过判断 Value 或自定义 key 值标记，获取数据更新 dataSource。

class SimpleMultiList extends Component {
  // ...
  async handleUpdateData(item){
    /**
    * item 内容为
    * {
    *   name: '异步',
    *   value: 2,
    *   subItemType: 'RADIO',
    *   defaultValue: '2-2',
    *   subList: 'ASYNC',
    *   asyncType: '2-2'
    * }
    */
    switch (item.asyncType){
      case '2-2':
        testData[1].subList = await fetchData();
        this.setState({
          dataSource: {
            defaultValue: 1,
            subList: testData,
            subItemType: 'MENU'
          }
        });
      break;
    }
  }
  render() {
    return (
      <Page
        title="multiList Demo"
        extraClass="demo-content"
      >
        <MultiList
          dataSource={ this.state.dataSource}
          value={this.state.value}
          onUpdateData={this.handleUpdateData.bind(this)}
          onChange={({newValue}) => {
            this.updateValue(newValue);
            Toast.show(`您的选择是${newValue.join('>')}`)
          }}
        />
      </Page>
    )
  }
}

自定义内容

multiList 主要适用于多级选择列表，但是也支持自定义二级及二级以下内容的自定义。使用时传入 subList 传入自定义内容，触发 renderContent，该方法需返回一个 element。

const multiData = {
  subItemType: 'ProductMenu',
  subList: [{
    name: '产品1',
    value: 1,
    subList: 'product1'
  },{
    name: '产品2',
    value: 2,
    subList: 'product2',
  }]
};

class SimplaMultiList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: multiData,
      value: [1]
    }
  }
  updateValue(value) {
    this.setState({
      value,
    })
  }
  render() {
    return (
      <Page
        title="multiList Demo"
        extraClass="demo-content"
      >
        <MultiList
          dataSource={ this.state.dataSource}
          value={this.state.value}
          onChange={({newValue}) => {
            this.updateValue(newValue);
          }}
          onItemTap={({item})=>{
            return [item.value];
          }}
          renderItem={({itemType, data, isSpread, index})=>{
            switch (itemType){
              case 'ProductMenu':
                return <ProductMenu data={data} isSpread={isSpread} index={index}/>
            }
          }}
          renderContent={({type}) => {
            switch (type) {
              case 'product1':
                return <Product tit="product1" />;
              case 'product2':
                return <Product tit="product2" />;
            }
          }}
        />
      </Page>
    )
  }
}

ReactDOM.render(<SimplaMultiList /> , document.querySelector('#container'));