antd/lib/table/interface#TableRowSelection TypeScript Examples

The following examples show how to use antd/lib/table/interface#TableRowSelection. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.tsx    From next-basics with GNU General Public License v3.0 4 votes vote down vote up
private _initConfigProps = () => {
    // 默认分页配置
    const defaultPagination: TablePaginationConfig = {
      current: this.page,
      pageSize: this.pageSize,
      total: this._total,
      showSizeChanger: true,
      pageSizeOptions: ["10", "20", "50"],
      // eslint-disable-next-line react/display-name
      showTotal: (totals) => (
        <>
          <span className={paginationStyle.totalText}>
            {i18n.t(`${NS_PRESENTATIONAL_BRICKS}:${K.PAGINATION_TOTAL_TEXT}`)}{" "}
            <strong className={paginationStyle.total}>{totals}</strong>{" "}
            {i18n.t(`${NS_PRESENTATIONAL_BRICKS}:${K.PAGINATION_TOTAL_UNIT}`)}
          </span>
          {this.configProps?.rowSelection &&
            this.showSelectInfo &&
            this.selectedRowKeys.length !== 0 &&
            this.renderSelectInfo()}
        </>
      ),
    };

    const rowKey =
      this.rowKey ?? this._fields.rowKey ?? this.configProps?.rowKey;
    let rowDisabledConfig: RowDisabledProps[];

    if (this.rowDisabledConfig) {
      rowDisabledConfig = Array.isArray(this.rowDisabledConfig)
        ? this.rowDisabledConfig
        : [this.rowDisabledConfig];
    }

    // 当 rowSelection 为 true 或者有相关配置的时候的默认行选择配置
    const defaultRowSelection: TableRowSelection<any> = {
      ...(rowKey
        ? {
            selectedRowKeys: this._isInSelect
              ? this.selectedRowKeys
              : this.storeCheckedByUrl
              ? this._getCheckedFromUrl()
              : this.defaultSelectAll
              ? this._handleDefaultSelectAll()
              : this.selectedRowKeys,
            onSelect: this._handleOnSelect,
            onSelectAll: this._handleSelectAll,
            onChange: this._handleRowSelectChange,
            preserveSelectedRowKeys: true,
          }
        : {
            // 当用户没有设置rowKey时的兼容处理
            onChange: this._handleRowSelectChange,
            preserveSelectedRowKeys: true,
          }),
      getCheckboxProps: (record: any) => {
        if (
          !isEmpty(this._disabledChildrenKeys) &&
          this._disabledChildrenKeys.includes(get(record, rowKey))
        ) {
          return {
            disabled: true,
          };
        }
        if (!rowDisabledConfig) return {};

        return {
          disabled: rowDisabledConfig.some((config) => {
            const { field, value, operator } = config;
            const fun = compareFunMap[operator];

            return fun?.(value, get(record, field));
          }),
        };
      },
    };
    if (this.configProps) {
      this._finalConfigProps = cloneDeep(this.configProps);
      if (this.configProps.pagination !== false) {
        this._finalConfigProps.pagination = {
          ...defaultPagination,
          ...this.pagination,
          ...this.configProps.pagination,
        };
        if (
          (this.configProps.pagination === undefined ||
            this.configProps.pagination === null) &&
          this.pagination === false
        ) {
          this._finalConfigProps.pagination = false;
        }
      }
      if (!this.configProps.size) {
        this._finalConfigProps.size = this.size;
      }
      if (this.configProps.rowSelection) {
        if (this.configProps.rowSelection === true) {
          this._finalConfigProps.rowSelection = {
            ...defaultRowSelection,
            type: this.type ?? "checkbox",
          };
        } else {
          this._finalConfigProps.rowSelection = {
            ...defaultRowSelection,
            type: this.type ?? "checkbox",
            ...this.configProps.rowSelection,
            ...(defaultRowSelection.selectedRowKeys
              ? { selectedRowKeys: defaultRowSelection.selectedRowKeys }
              : {}),
          };
        }
      } else {
        if (this.type) {
          this._finalConfigProps.rowSelection = {
            ...defaultRowSelection,
            type: this.type,
          };
        }
      }
    } else {
      this._finalConfigProps = {};
      this._finalConfigProps.pagination =
        this.pagination !== false ? defaultPagination : false;
      this._finalConfigProps.size = this.size;
      this._finalConfigProps.rowSelection = this.type && {
        ...defaultRowSelection,
        type: this.type,
      };
    }

    // 初始化列排序
    if (this._columns) {
      this._columns = this._columns.map((item) => {
        if (isNil(item.key)) {
          item.key = item.dataIndex as string;
        }
        if (item.sorter) {
          item.sortOrder = (this.sort === item.key &&
            !isNil(this.order) &&
            (this._fields.ascend === this.order
              ? "ascend"
              : "descend")) as SortOrder;
        }
        // 初始化表头过滤值
        if (item.filters) {
          const history = getHistory();
          const urlSearchParams = new URLSearchParams(history.location.search);
          const filteredValue =
            urlSearchParams.get(item.key as string) ??
            get(this.filters, item.key)?.join(",");
          if (!isNil(filteredValue) && !isEmpty(filteredValue)) {
            item.filtered = true;
            item.filteredValue = filteredValue
              .split(",")
              .map(
                (v) =>
                  find(item.filters, (f) => String(f.value) === v)?.value ?? v
              );
          } else {
            item.filtered = false;
            item.filteredValue = [];
          }
        }
        return item;
      });
    }
  };