ActionSheet回调函数享元模式改进

对于移动端按钮的回调函数的分析

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

这样需要引入新的变量

实际的代码如下

showActionSheet = () => {
    const { t, column } = this.props;
    const columnType = column.type;
    const font = 'dtable-font dtable-icon-';
    const isNameColumn = column.key === '0000';
    // this is auxiliary buttons array
    let buttons = [{
      dom : <div className="my-am-action"><i className={`${font}rename`}></i>{t('Rename_Column')}</div>,
      value: 'rename_column',
    }];
    // 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}hide`}></i>{t('Hide_Column')}</div>,
        value: 'hide_column',
      });
    }
    switch(columnType) {
      case CellType.SINGLE_SELECT:
        buttons.push({
          dom: <div className="my-am-action"><i className={`${font}single-election`}></i>{t('Edit_Single_Select')}</div>,
          value: 'edit_single_select',
        });
        break;
      case CellType.MULTIPLE_SELECT:
        buttons.push({
          dom: <div className="my-am-action"><i className={`${font}multiple-selection`}></i>{t('Edit_Multiple_Select')}</div>,
          value: 'edit_multiple_select',
        });
        break;
      case CellType.NUMBER:
        buttons.push({
          dom: <div className="my-am-action"><i className={`${font}set-up`}></i>{t('Format_Settings')}</div>,
          value: 'number_format_settings',
        });
        break;
      case CellType.DATE:
        buttons.push({
          dom: <div className="my-am-action"><i className={`${font}set-up`}></i>{t('Format_Settings')}</div>,
          value: 'date_format_settings',
        });
        break;
      case CellType.FORMULA: 
        buttons.push({
          dom: <div className="my-am-action"><i className={`${font}formula`}></i>{t('Edit_Formula')}</div>,
          value: 'edit_formule',
        });
        break;
    }
    buttons.push({
      dom: <div className="my-am-action"><i className={`${font}modify-column-type`}></i>{t('Customize_column_type')}</div>,
      value: 'customize_column_type',
    });
    if (!isNameColumn) {
      buttons.push({
        dom: <div className="my-am-action"><i className={`${font}delete`}></i>{t('Delete_Column')}</div>,
        value: 'delete_column',
      });
    }
    // 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_column':
        this.onRenameToggle();
        break;
      case 'hide_column':
        this.onHideColumn();
        break;
      case 'edit_single_select':
        this.toggleTheadSelectOptionDialog();
        break;
      case 'edit_multiple_select':
        this.toggleTheadSelectOptionDialog();
        break;
      case 'number_format_settings':
        this.toggleFormatView();
        this.setState({ columnFormat: NUMBER_FORMATS });
        break;
      case 'date_format_settings':
        this.toggleFormatView();
        this.setState({ columnFormat: DATE_FORMATS });
        break;
      case 'edit_formule':
        this.toggleEditFormulaDialog();
        break;
      case 'customize_column_type':
        this.toggleEditColumnDialog();
        break;
      case 'delete_column':
        this.onDeleteColumn();
        break;
    }
  }

思路二：直接对每一个数组的DOM元素，监听onClick事件

这样的缺点是，每一个都需要设置回调函数

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

---

Last update: September 12, 2022