小程序之tarojs框架实现下拉demo


import Taro, { Events } from "@tarojs/taro";
import { View, Text, Image } from "@tarojs/components";
import { AtCalendar } from 'taro-ui';
import "./index.css";
import _ from 'lodash';
const events = new Events();

export default class Select extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isShow: this.props.isShow || false,
      dataSource: this.props.dataSource || [{ value: '北京', label: '北京' }, { value: '上海', label: '上海' }, { value: '武汉', label: '深圳' }],
      currentValue: this.props.currentValue,
      leftIcon: this.props.icon,
      rightIcon: 'chevron-down',
      type: this.props.type,
      placeholder: this.props.placeholder,
      isClear: this.props.isClear || false,
      id: this.props.id
    };
  }

  componentDidMount() {
    Taro.eventCenter.on('closeSelect', () => {
      this.setState({ isShow: false })
    })
    Taro.eventCenter.on('clearSelect', this.clearCurrentValue)
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.dataSource !== this.props.dataSource) {
      this.setState({ dataSource: nextProps.dataSource })
    }
  }

  componentWillUnmount() {
    this.setState({ isShow: false, currentValue: this.props.currentValue, dataSource: this.props.dataSource })
  }

  selected = (item) => {
    let { isClear, isShow } = this.state;
    this.setState({ currentValue: item.value, isShow: !isShow, rightIcon: isClear ? 'close' : 'chevron-down' }, () => {
      if (this.props.selected) {
        this.props.selected(item);
      }
    })
  }

  openClose = (e) => {
    e.stopPropagation();
    if (e.mpEvent && e.mpEvent.target.id === 'close' || (e.target && e.target.id === 'close')) return;
    let { isShow, rightIcon, currentValue, isClear } = this.state;
    isShow = !isShow;
    this.setState({
      isShow,
      rightIcon: rightIcon === 'chevron-down' ? currentValue && isClear ? 'close' : 'chevron-up' : 'chevron-down'
    })
  }

  onCalendar = (e) => {
    this.setState({ currentValue: e.value, isShow: !this.state.isShow, rightIcon: 'chevron-down' }, () => {
      if (this.props.selected) {
        this.props.selected(e.value);
      }
    })
  }

  clearCurrentValue = () => {
    if (this.state.isClear) {
      this.setState({ currentValue: null, isShow: false, rightIcon: 'chevron-down' })
    }
  }

  render() {
    let { currentValue, dataSource, type, placeholder } = this.state;
    let source = _.find(dataSource, p => p.value === currentValue);

    let currentDate;
    if (type === 'calendar') {
      currentDate = currentValue.replace('年 ', '/');
      currentDate = currentDate.replace('月', '/');
      currentDate = currentDate.replace('日', '');
    }

    return <>
      <View className="select-box" style={this.props.boxStyle} >
        <View className="d-flex space-between" style={{ width: '100%', alignItems: 'center', height: '40px', zIndex: process.env.TARO_ENV === 'h5' ? 98 : '' }} onTouchStart={this.openClose}>
          <View className="d-flex align-items-center" style={{ marginLeft: '16px' }}>
            {/* <Image src={leftIcon} style={{ width: 24, height: 24 }} /> */}
            <Text className="current-name">{type !== 'calendar' ? (source ? source.label : placeholder) : currentValue}</Text>
          </View>
          <View className={`at-icon at-icon-${this.state.rightIcon}`} id='close'
            style={{ paddingRight: '15px', color: 'rgb(153, 153, 153)', fontSize: '20px' }} onClick={this.clearCurrentValue} />
        </View>
        {
          !type && this.state.isShow &&
          <View className='option-list' style={{ top: '44px', ...this.props.optionStyle }}>
            {
              this.state.dataSource.map((item, index) => {
                return <View
                  key={index}
                  onClick={() => this.selected(item)}
                  className="option"
                  style={{ color: currentValue === item.value ? '#007AFF' : '#7C7C7D' }}
                >{item.label}</View>
              })
            }
          </View>
        }
        {
          type === 'calendar' && this.state.isShow &&
          <View className="option-list" style={{ width: '100%', padding: '10px', top: '44px' }}>
            <AtCalendar format='YYYY年 M月D日' currentDate={currentDate} onDayClick={this.onCalendar} />
          </View>
        }
      </View>
      <View className='select-box-mask' onClick={this.openClose} style={{ display: !this.state.isShow ? 'none' : '' }} />
    </>
  }
}
coleava / me

小程序之tarojs框架实现下拉demo #23
