Ant design mobile Actionsheet 组件的思考和改进

使用蚂蚁金服的 ant-design UI 组件库的移动端组件时,最近遇到一个问题。

官方的模板是这样的

  showActionSheet = () => {
    const BUTTONS = ['Operation1', 'Operation2', 'Operation2', 'Delete', 'Cancel'];
    ActionSheet.showActionSheetWithOptions({
      options: BUTTONS,
      cancelButtonIndex: BUTTONS.length - 1,
      destructiveButtonIndex: BUTTONS.length - 2,
      message: 'I am description, description, description',
      maskClosable: true,
    },
    (buttonIndex) => {
      this.setState({ clicked: BUTTONS[buttonIndex] });
    });
  }

如果一个菜单是动态的(不同情况,会创建不同的菜单,菜单的个数和内容不同),那么回调函数中,返回的 buttonIndex 所执行的函数就很难处理。下面想了两个结局按方案

思路一:使用享元模式,优化多重的IF循环

这样需要引入新的变量

实际的代码如下

showActionSheet = () => {
    let buttons = [{
      dom : <div className="my-am-action"><i className={`${font}rename`}></i>{t('Rename')}</div>,
      value: 'rename',
    }];
  	// In different situations, push special object(contain dom and value) into buttonArray
    if (!isNameColumn) {
      buttons.push({
        dom: <div className="my-am-action"><i className={`${font}test`}></i>{t('test')}</div>,
        value: 'test',
      });
    }
  	// This is real buttons array (ActionSheet use it)
    let optionButtons = [];
    for (let i = 0; i < buttons.length; i++) {
      optionButtons.push(buttons[i].dom);
    }
    ActionSheet.showActionSheetWithOptions({ options: optionButtons, maskClosable: true }, (buttonIndex) => {
      this.setState({ isMenuShow: false });
      const value = optionButtons[buttonIndex];
      this.onActionSheetClick(value);
    });
  }

  onActionSheetClick = (value) => {
    switch(value) {
      case 'rename':
        this.onRename();
        break;
      case 'test':
        this.onHideColumn();
        break;
    }
  }

这样的优点是:每一个情况对应一个字符串,把index转换成字符串,然后根据字符串进行回调函数处理。

不足:需要新增加一个数组,存储字符串变量。

思路二:直接对每一个菜单元素,监听onClick事件

这样的缺点是,每一个都需要设置回调函数,和原生的 ActionSheet 的回调函数无关,特殊情况下,无法控制点击事件(按钮不能点击)

if (sortColumnOptions.includes(columnType)) {
      buttons.push(
        <div className="my-am-action" onClick={(e) => this.modifySort(SORT_TYPE.UP, e)}><i className={`${font}ascending-order`}></i>{t('Sort_Ascending')}</div>,
        <div className="my-am-action" onClick={(e) => this.modifySort(SORT_TYPE.DOWN, e)}><i className={`${font}descending-order`}></i>{t('Sort_Descending')}</div>
      );
    }

综合这两种方法,我个人更认同第一种做法

当然,还可以基于第三方 ant design mobile 组件,自己再写一个适合自己项目的组件。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值